@font-face{font-family:"Fira Code";src:url("../assets/fonts/FiraCode-VF.woff2") format("woff2");font-display:swap}
:root{color-scheme:only light;--ink:#251c32;--paper:#fff1b8;--pink:#ee668f;--berry:#9d365e}
*{box-sizing:border-box}html,body{min-height:100%}
body{margin:0;display:grid;place-items:center;padding:clamp(.6rem,3vw,2rem);background:radial-gradient(circle at 50% 12%,#326f68 0 2px,transparent 3px) 0 0/17px 17px,repeating-linear-gradient(135deg,#173f43 0 5px,#1c4b4c 5px 10px);color:var(--ink);font-family:"Fira Code",ui-monospace,monospace}
.experiment{position:relative;container-type:inline-size;width:min(100%,640px);filter:drop-shadow(9px 11px 0 rgb(19 27 37/.42))}
.marquee{position:absolute;z-index:3;top:clamp(.55rem,3cqw,1rem);left:clamp(.7rem,3cqw,1.25rem);display:grid;pointer-events:none;color:var(--paper);text-shadow:2px 2px 0 var(--ink),-1px -1px 0 var(--ink);transform:rotate(-2deg)}
.marquee span{font-size:clamp(.5rem,2cqw,.78rem);font-weight:800;letter-spacing:.12em;text-transform:uppercase}.marquee strong{color:#ffd64f;font-size:clamp(.92rem,4cqw,1.6rem);line-height:.95}
.scene{position:relative;display:block;width:100%;margin:0;padding:0;overflow:hidden;border:4px solid var(--ink);border-radius:2px;background:#3aa2b6;box-shadow:inset 0 0 0 3px var(--paper),0 0 0 3px var(--pink);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.scene::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgb(37 28 50/.07) 0 1px,transparent 1px 4px);mix-blend-mode:multiply}.scene:focus-visible{outline:4px solid #fff36f;outline-offset:7px}.scene:disabled{cursor:wait}
canvas{display:block;width:100%;height:auto;aspect-ratio:640/420;image-rendering:pixelated;image-rendering:crisp-edges}
.click-cue{position:absolute;z-index:2;right:7%;bottom:8%;display:flex;align-items:center;gap:.4rem;padding:.32rem .55rem;border:2px solid var(--ink);background:var(--paper);box-shadow:3px 3px 0 var(--ink);font-size:clamp(.48rem,1.8cqw,.7rem);font-weight:800;text-transform:uppercase;transition:transform 120ms steps(2,end),opacity 120ms linear}.click-cue i{width:8px;height:8px;border:2px solid var(--berry);background:var(--pink);transform:rotate(45deg)}.scene:hover .click-cue,.scene:focus-visible .click-cue{transform:translate(-3px,-2px)}.scene:disabled .click-cue{opacity:0}
.story-strip{display:flex;align-items:center;justify-content:space-between;gap:.8rem;min-height:3.1rem;padding:.65rem .8rem;border:4px solid var(--ink);border-top:0;background:var(--paper);box-shadow:inset 0 -3px #d3ad52}.story-strip p{margin:0;font-size:clamp(.58rem,2.3cqw,.76rem);line-height:1.35}.story-strip button{flex:none;padding:.45rem .7rem;border:2px solid var(--ink);border-radius:0;background:var(--berry);box-shadow:2px 2px 0 var(--ink);color:#fff;font:800 clamp(.58rem,2cqw,.72rem)/1 "Fira Code",monospace;cursor:pointer}.story-strip button:hover:not(:disabled){background:var(--pink)}.story-strip button:active:not(:disabled){transform:translate(2px,2px);box-shadow:none}.story-strip button:focus-visible{outline:3px solid var(--pink);outline-offset:3px}.story-strip button:disabled{opacity:.45;cursor:wait}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(max-width:460px){.story-strip{align-items:flex-start}.story-strip p{max-width:72%}.click-cue{right:5%}}
@media(prefers-reduced-motion:reduce){.experiment{filter:none}.click-cue{transition:none}.scene::after{display:none}}

.story-strip button { min-height: 44px; }
html.embedded body { display: flex; min-height: 100svh; padding: 8px; }
html.embedded .experiment { width: min(100%, 800px, calc((100svh - 100px) * 1.5238)); margin: auto; flex: none; }