:root{color:#222;font-synthesis:none;background:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{margin:0;padding:0 clamp(20px,5vw,80px)}header,footer{justify-content:space-between;align-items:center;gap:16px;display:flex}header{padding:30px 0}header a{color:#222;letter-spacing:-.07em;align-items:center;gap:6px;font-size:2rem;font-weight:750;text-decoration:none;display:flex}.brand-dot{background:#06f;align-self:end;width:8px;height:8px;margin-bottom:9px}header>span{color:#526071;font-size:.875rem}main{max-width:1400px;margin:0 auto}.viewer{background:#eef4fb;grid-template-columns:1fr auto;align-items:center;padding:0 clamp(18px,3.5vw,54px) 20px;display:grid}#stage{grid-column:1/-1;min-width:0;height:clamp(300px,58vh,590px);margin:0 -10px;position:relative}canvas{touch-action:none;cursor:grab;width:100%;height:100%;display:block}canvas:active{cursor:grabbing}[hidden]{display:none!important}#fallback{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:20px;display:flex;position:absolute;inset:0}#fallback img{width:min(65%,280px);height:auto}#fallback p{max-width:420px;font-size:.875rem;line-height:1.5}h1{letter-spacing:-.045em;margin:0 0 10px;font-size:clamp(1.35rem,2vw,1.85rem);font-weight:600}#hint{color:#526071;max-width:44ch;margin:0;font-size:.8125rem;line-height:1.6}.toolbar{flex-wrap:wrap;justify-content:end;gap:8px;padding-left:20px;display:flex}button{font:inherit;color:#222;cursor:pointer;background:#fff;border:1px solid #b6c5d7;border-radius:6px;min-height:44px;padding:12px 16px;font-size:.875rem;font-weight:550}button:hover{border-color:#06f}button[aria-pressed=true]{color:#fff;background:#06f;border-color:#06f}button:disabled{opacity:.5;cursor:not-allowed}:focus-visible{outline-offset:4px;outline:3px solid #06f}.selection{color:#526071;grid-column:1/-1;min-height:1em;margin:24px 0 0;font-size:.75rem}footer{color:#526071;padding:24px 0;font-size:.75rem}.no-script{text-align:center}@media (width<=760px){header{padding:22px 0}header a{font-size:1.75rem}header>span{font-size:.75rem}.viewer{grid-template-columns:1fr}#stage{height:clamp(310px,49svh,460px)}.toolbar{justify-content:start;gap:6px;padding:22px 0 0}button{padding:11px 12px;font-size:.8125rem}footer{flex-direction:column;align-items:start;gap:6px}}
