:root { color-scheme:light; font-family:system-ui,"Yu Gothic",sans-serif; color:#334339; background:#f5f7f3; }
* { box-sizing:border-box; }
body { margin:0; padding:20px 16px 76px; }
.heading { text-align:center; max-width:620px; margin:0 auto 18px; }
h1 { font-size:clamp(22px,5vw,30px); margin:12px 0 8px; }
.heading p { font-size:14px; margin:8px 0; }
.test-label { display:inline-block; padding:7px 12px; border-radius:20px; background:#e0eddf; font-weight:700; }
.character-card { width:min(100%,620px); margin:auto; padding:18px; border:1px solid #dce5d8; border-radius:22px; background:#fffefa; box-shadow:0 12px 36px #344b3610; }
.stage { position:relative; width:min(100%,374px); margin:auto; background:linear-gradient(#eff4f0,#f9f8f3); border-radius:18px; }
canvas { display:block; width:100%; height:auto; aspect-ratio:752/842; }
.selected-state { position:absolute; top:10px; left:10px; font-size:12px; border:1px solid #c1d4bc; background:#fffffff0; border-radius:16px; padding:5px 9px; z-index:3; }
#asset-status { font-size:12px; text-align:center; margin:10px 0; min-height:18px; }
section { margin-top:18px; }
.auto-preview { margin-top:0; margin-bottom:12px; }
h2 { font-size:14px; margin:0 0 8px; }
.states { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.directions { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
button { font:inherit; font-size:14px; min-height:46px; border:1px solid #bfd0ba; border-radius:12px; padding:9px 8px; background:#f9fbf6; color:inherit; cursor:pointer; touch-action:manipulation; }
button:hover:not(:disabled) { background:#e7f0e2; }
button[aria-pressed="true"] { background:#dcebd3; border-color:#7d9b74; font-weight:700; }
button:focus-visible { outline:3px solid #729869; outline-offset:3px; }
button:disabled { opacity:.55; cursor:default; }
#preview-button { width:100%; background:#e4edfa; border-color:#b7cce7; }
section p { font-size:12px; line-height:1.65; margin:8px 0 0; }
#preview-status { color:#304f6b; min-height:22px; font-size:13px; }
footer { position:fixed; bottom:0; left:0; right:0; padding:10px 12px; text-align:center; background:#fffefa; border-top:1px solid #dde6d8; font-size:12px; z-index:4; }
footer span { display:inline-block; }
.footer-test-label { display:block; margin-bottom:3px; }
@media(max-width:420px) { body { padding:14px 12px 76px; } .character-card { padding:12px; } .heading { margin-bottom:14px; } section { margin-top:14px; } }
@media(max-width:420px) and (max-height:700px) { .stage { width:min(100%,280px); } .heading p { margin:5px 0; } h1 { margin:8px 0; } }