@font-face{font-family:Bangers;src:url('assets/fonts/bangers.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Comic Neue';src:url('assets/fonts/comic-neue.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Comic Neue';src:url('assets/fonts/comic-neue-bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root{--ink:#172e36;--comic-paper:#fff9e8;--comic-yellow:#ffdc58;--comic-coral:#ff8982;font-family:'Comic Neue',Arial,sans-serif}
.story-header{position:fixed;inset:18px 24px auto;z-index:12;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none}
.wordmark{font:38px/1 Bangers,sans-serif;color:var(--comic-yellow);-webkit-text-stroke:1px var(--ink);paint-order:stroke fill;text-shadow:2px 3px 0 var(--ink);padding:4px 0;transform:rotate(-3deg);text-decoration:none;pointer-events:auto} /* taste-skill-ignore: user-requested comic-cover dimensional lettering */
.comic-button{border:0;border-bottom:4px solid var(--ink);background:transparent;color:var(--ink);font:700 20px/1.15 'Comic Neue',sans-serif;padding:7px 3px;pointer-events:auto;text-decoration:none;cursor:pointer}
.comic-button:hover{transform:translateY(-2px)}.comic-button:active{transform:translateY(1px)}
#comic-story{position:absolute;inset:0;pointer-events:none;z-index:4}
.speech-bubble{position:absolute;aspect-ratio:480/260;color:var(--ink);visibility:hidden;transform-origin:38% 94%;pointer-events:none}
.speech-shape{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:var(--comic-paper);stroke:var(--ink);stroke-width:3.5;stroke-linejoin:round}
.speech-side,.speech-oval,.speech-opening{display:none}.speech-bubble[data-position=hello] .speech-opening{display:block}.speech-bubble[data-position=film] .speech-oval{display:block}.speech-bubble:not([data-position=hello]):not([data-position=film]) .speech-side{display:block}
.speech-bubble[data-shape=emphasis] .speech-shape{fill:#ffed9d;stroke-width:5}
.speech-content{position:absolute;inset:12% 9% 24%;display:flex;flex-direction:column;justify-content:center;text-align:center}
.comic-title{font:clamp(34px,2.6vw,42px)/1.05 Bangers,sans-serif;margin:0 0 8px;letter-spacing:.015em}
.comic-copy{font:700 clamp(24px,1.75vw,29px)/1.15 'Comic Neue',sans-serif;text-transform:uppercase;white-space:pre-line;margin:0}
.speech-bubble[data-position=film] .comic-title{font-size:34px}.speech-bubble[data-position=film] .comic-copy{font-size:24px}
.speech-bubble[data-layout=side] .speech-content{inset:13% 9%}
.speech-bubble[data-layout=side] .comic-title{font-size:clamp(31px,3.5svh,42px)}
.speech-bubble[data-layout=side] .comic-copy{font-size:clamp(21px,2.65svh,29px)}
@media(max-height:899px){
  .speech-bubble[data-layout=above] .comic-title{font-size:34px}
  .speech-bubble[data-layout=above] .comic-copy{font-size:22px}
  .speech-bubble[data-layout=above] .speech-content{inset:10% 9% 22%}
}
.speech-word{display:inline-block;white-space:nowrap}.speech-letter{opacity:0;position:relative}.speech-letter.is-typed{opacity:1}
.speech-letter.is-cursor::after{content:'';position:absolute;right:-4px;top:10%;height:.85em;width:2px;background:var(--ink)}
#enter-vault{position:absolute;left:26px;bottom:69px;font:28px/1 Bangers,sans-serif;min-height:44px;color:var(--ink);border-color:var(--ink);pointer-events:auto}
.comic-fx{position:absolute;visibility:hidden;pointer-events:none;transform-origin:center;z-index:2}
.comic-fx svg{display:block;width:100%;height:auto}
.comic-fx text{font-family:Bangers,sans-serif;text-anchor:middle;fill:var(--comic-paper);stroke:var(--ink);stroke-width:7;paint-order:stroke fill;stroke-linejoin:round;letter-spacing:2px}
.comic-fx .impact{fill:#ef6657;stroke:var(--ink);stroke-width:6}
.comic-fx .speed{fill:none;stroke:var(--comic-paper);stroke-width:8;stroke-linecap:round}
.comic-fx .shards{fill:none;stroke:#ffdf60;stroke-width:12;stroke-linecap:square}
.comic-fx .celebrate{fill:var(--comic-yellow);stroke:var(--ink);stroke-width:6}
.fx-chunk{left:25%;top:62%;width:min(40vw,640px)}
.fx-whirr{left:48%;top:17%;width:min(43vw,690px)}.fx-whirr text{fill:var(--comic-yellow);letter-spacing:8px}
.fx-clunk{left:52%;top:45%;width:min(37vw,590px)}.fx-clunk text{fill:#ffdb57;stroke-width:9}
.fx-whoosh{left:25%;top:32%;width:min(64vw,1020px)}.fx-whoosh text{fill:#fffef0;stroke:#a34c30;stroke-width:6;letter-spacing:0}
.fx-tada{left:56%;top:32%;width:min(38vw,610px)}.fx-tada text{fill:#e64d48;stroke-width:8;letter-spacing:4px}
/* User-directed comic motion: separate inner transforms preserve scroll scrubbing. */
.speech-bubble[data-live=true]{animation:dialogue-float 2.8s ease-in-out infinite}
.speech-bubble[data-live=true] .comic-title{animation:dialogue-emphasis 3.8s ease-in-out infinite;transform-origin:center}
.comic-fx[data-live=true] svg{transform-origin:center;animation-duration:1.8s;animation-iteration-count:infinite;animation-timing-function:ease-in-out}
.fx-chunk[data-live=true] svg{animation-name:metal-rattle}
.fx-whirr[data-live=true] svg{animation-name:rolling-sway;animation-duration:2.2s}
.fx-clunk[data-live=true] svg{animation-name:heavy-clunk;animation-duration:2s}
.fx-whoosh[data-live=true] svg{animation-name:air-rush;animation-duration:1.4s}
.fx-tada[data-live=true] svg{animation-name:celebration-pop;animation-duration:2.4s}
#comic-story.is-paused *{animation-play-state:paused!important}
@keyframes dialogue-float{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes dialogue-emphasis{0%,32%,100%{transform:scale(1) rotate(0)}12%{transform:scale(1.09) rotate(-2deg)}21%{transform:scale(.98) rotate(1deg)}}
@keyframes metal-rattle{0%,28%,100%{transform:translate(0,0) rotate(0)}5%,15%{transform:translate(-9px,3px) rotate(-2.5deg)}10%,20%{transform:translate(9px,-3px) rotate(2.5deg)}}
@keyframes rolling-sway{0%,100%{transform:rotate(-5deg) translateX(-10px)}50%{transform:rotate(5deg) translateX(10px)}}
@keyframes heavy-clunk{0%,35%,100%{transform:translateY(0) scale(1)}9%{transform:translateY(13px) rotate(-2deg) scale(1.06)}18%{transform:translateY(-7px) rotate(1deg)}27%{transform:translateY(3px)}}
@keyframes air-rush{0%,100%{transform:translateX(-18px) skewX(2deg)}50%{transform:translateX(21px) skewX(-5deg)}}
@keyframes celebration-pop{0%,46%,100%{transform:scale(1) translateY(0) rotate(0)}17%{transform:scale(1.14) translateY(-15px) rotate(-4deg)}29%{transform:scale(.97) translateY(3px) rotate(2deg)}}
.handoff-hands[data-live=true]{animation:receiving-hands 4s ease-in-out infinite}
#reference-tour.is-paused .handoff-hands{animation-play-state:paused}
@keyframes receiving-hands{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -7px;rotate:.35deg}}
.controls{bottom:20px;right:24px;gap:14px}.controls button{font-family:'Comic Neue',sans-serif;font-weight:700;border:0;border-bottom:2px solid var(--ink);border-radius:0;background:transparent;padding:7px 3px;box-shadow:none}.controls button:hover{background:transparent;color:var(--comic-paper)}
.scroll-cue{bottom:25px;left:26px;font-weight:700;background:none;border:0;padding:0;color:var(--ink)}
.story-note{position:fixed;left:26px;bottom:24px;max-width:460px;font-size:14px;line-height:1.2;font-weight:700;color:var(--ink);margin:0;z-index:8;pointer-events:none}
.story-note[hidden]{display:none}.tv-source{display:none}
.tv-controls{position:absolute;z-index:6;transform:translate(-50%,-50%);width:94px;height:94px;pointer-events:auto;color:var(--ink)}
.tv-controls[hidden]{display:none}
#tv-play{display:grid;place-items:center;width:100%;height:100%;border:4px solid var(--ink);border-radius:50%;background:var(--comic-paper);color:var(--ink);transition:transform 140ms ease,opacity 140ms ease}
#tv-play:hover{transform:scale(1.08)}#tv-play:active{transform:scale(.96)}
#tv-play svg{width:46px;height:46px;fill:currentColor}.pause-symbol{display:none}
.tv-controls[data-playing=true] .play-symbol{display:none}.tv-controls[data-playing=true] .pause-symbol{display:block}
.tv-controls[data-playing=false] .play-symbol{animation:ready-to-play 2.8s ease-in-out infinite;transform-origin:center}
@keyframes ready-to-play{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.tv-controls[data-playing=true] #tv-play{opacity:.15}.tv-controls[data-playing=true] #tv-play:hover,.tv-controls[data-playing=true] #tv-play:focus-visible{opacity:1}
.tv-controls #tv-error{position:absolute;top:104px;left:50%;transform:translateX(-50%);width:330px;background:var(--comic-paper);padding:12px;font-size:18px}
.tv-fallback{position:absolute;left:42%;top:25%;width:50%;z-index:5;pointer-events:auto;background:var(--comic-coral);padding:15px;border:5px solid var(--ink)}.tv-fallback[hidden]{display:none}.tv-fallback video{width:100%;display:block}.tv-fallback p{font-weight:700;text-align:center}
.reduced-copy{font-family:'Comic Neue',sans-serif;padding:35px 7%;background:var(--comic-paper)}.reduced-copy h2{font:42px Bangers,sans-serif}.reduced-copy p{font-size:21px;max-width:60ch}
.static-film{padding:8% 10%;background:var(--comic-paper)}.static-film video{display:block;max-width:100%;width:900px;border:8px solid var(--ink)}
@media(max-height:850px){.story-note{max-width:390px;font-size:13px}.tv-controls p{margin-top:7px}}
@media(prefers-reduced-motion:reduce){.story-header,#comic-story,.story-note,#tv-controls{display:none}.comic-button,.controls button{transition:none}#comic-story *,.handoff-hands,#tv-play *{animation:none!important}}