@font-face{font-family:Poppins;src:url(assets/Poppins-Regular.ttf);font-weight:400;font-display:swap}@font-face{font-family:Poppins;src:url(assets/Poppins-Bold.ttf);font-weight:700;font-display:swap}
:root{color-scheme:dark;--ink:#111923;--paper:#fff3db;--orange:#fa5617;--muted:#c8c9c5}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--paper);font-family:Poppins,system-ui,sans-serif}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ffb57d;outline-offset:5px}.experience{max-width:1600px;margin:auto;min-height:100svh;padding-top:env(safe-area-inset-top);display:flex;flex-direction:column}header{padding:20px 24px 12px;display:flex;justify-content:space-between;align-items:center;gap:16px}.wordmark{font-weight:700;font-size:25px;color:var(--paper);text-decoration:none;line-height:1}.wordmark span{display:block;font-size:10px;letter-spacing:.04em;font-weight:400;margin-top:5px}.quiet{background:transparent;border:1px solid #54606a;color:var(--paper);border-radius:3px;min-height:44px;padding:8px 12px;font-size:12px}main{display:grid;grid-template-areas:"intro" "stage" "narrative"}.intro{grid-area:intro;padding:18px 24px 20px}.eyebrow{font-size:11px;letter-spacing:.12em;line-height:1.6;color:#ffb57d;margin:0 0 12px}h1{font-size:clamp(32px,8.8vw,40px);font-weight:700;line-height:1.08;letter-spacing:-.04em;margin:0;outline:none}h1:focus{outline:none}.chapter-label{font-size:11px;letter-spacing:.05em;color:var(--muted);margin:14px 0 0}.stage{grid-area:stage;position:relative;isolation:isolate;overflow:hidden;height:clamp(260px,43svh,420px);background:#26323c;border-top:3px solid var(--paper);border-bottom:3px solid var(--paper);touch-action:pan-y}.scene{position:absolute;inset:0;opacity:0;transform:scale(1.11) translateX(5%);transition:opacity .65s,transform 1s cubic-bezier(.2,.6,.2,1);pointer-events:none}.scene.active{opacity:1;transform:scale(1) translateX(0);z-index:1}.scene img{width:100%;height:100%;object-fit:cover;object-position:50% 65%;transform:scale(1.04);animation:camera 15s ease-out both}.scene[data-index="1"] img{object-position:50% 50%}.scene[data-index="2"] img{object-position:50% 62%}.scene[data-index="3"] img{object-position:50% 67%}.clock,.hero-tag,.status-tag{position:absolute;top:16px;right:20px;background:var(--ink);padding:10px 14px;font-size:26px;font-weight:700;line-height:1.1;box-shadow:4px 4px 0 #0007}.clock small{display:block;font-size:8px;letter-spacing:.1em;margin-top:5px}.hero-tag{top:auto;bottom:22px;left:20px;right:auto;color:var(--ink);background:var(--paper);font-size:18px;transform:rotate(-3deg)}.status-tag{left:14px;right:14px;font-size:10px;line-height:1.5;text-align:center}.narrative{grid-area:narrative;padding:22px 24px 8px}#caption{font-size:16px;line-height:1.6;margin:0 0 20px;max-width:36em}.primary{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:56px;background:var(--orange);color:#09090b;border:0;padding:16px 20px;font-size:15px;font-weight:700;text-align:left;box-shadow:4px 4px 0 #0008;transition:transform .2s}.primary:active{transform:translate(2px,2px)}.primary:disabled{background:#667078;box-shadow:none;color:#fff}.hint{font-size:11px;color:var(--muted);line-height:1.6;margin:14px 0 4px}footer{margin-top:auto;padding:4px 24px calc(16px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:12px}footer p{max-width:180px;font-size:9px;line-height:1.5;text-align:right;color:var(--muted)}nav{display:flex}nav button{position:relative;width:32px;height:44px;padding:0;border:0;background:transparent}nav button:after{content:"";position:absolute;top:20px;left:4px;width:24px;height:3px;background:#78828a}nav button[aria-current]:after{background:var(--orange)}nav button:disabled:after{background:#38434c}#workflow{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:8px}#workflow[hidden]{display:none}#workflow li{font-size:13px;animation:arrive .5s both}#workflow li:nth-child(2){animation-delay:.15s}#workflow li:nth-child(3){animation-delay:.3s}#workflow span{color:#ffb57d;display:inline-block;width:36px}.paper-field{position:absolute;inset:0;pointer-events:none;z-index:2;transition:opacity .6s}.paper-field i{position:absolute;width:36px;height:48px;background:repeating-linear-gradient(0deg,transparent 0 7px,#4e403355 8px 9px),#efe0bd;border:1px solid #302919;opacity:.8;left:8%;top:18%;animation:paper 8s ease-in-out infinite}.paper-field i:nth-child(2){left:80%;top:60%;animation-delay:-3s}.paper-field i:nth-child(3){left:65%;top:10%;animation-delay:-5s;scale:.6}.paper-field i:nth-child(4){left:3%;top:70%;animation-delay:-2s;scale:1.3}.paper-field i:nth-child(5){left:90%;top:30%;animation-delay:-6s}.paper-field i:nth-child(6){left:44%;top:88%;animation-delay:-4s;scale:.5}[data-scene="2"] .paper-field,[data-scene="3"] .paper-field{opacity:0}.voice-line{position:absolute;z-index:3;width:110%;bottom:-10px;left:-5%;height:80px;pointer-events:none;opacity:0;transition:opacity .8s}.voice-line path{fill:none;stroke:url(#voice);stroke-width:5;stroke-linecap:round;stroke-dasharray:900;stroke-dashoffset:900;filter:drop-shadow(0 0 6px #ee097988)}[data-scene="1"] .voice-line{opacity:1}[data-scene="1"] .voice-line path{animation:draw 1.4s .2s forwards}.scene-error{position:absolute;inset:30%;font-size:16px;z-index:4}dialog{background:var(--paper);color:var(--ink);border:0;border-top:5px solid var(--orange);padding:28px 24px;width:min(460px,calc(100% - 24px));max-height:calc(100dvh - 32px);overflow:auto;box-shadow:12px 12px 0 #0006}dialog::backdrop{background:#080c14df}dialog .eyebrow{color:#9b320d;font-size:10px;padding-right:36px}dialog h2{font-size:32px;line-height:1.1;letter-spacing:-.04em;margin:16px 0 24px}dialog p{font-size:13px;line-height:1.65}.close{position:absolute;right:12px;top:12px;color:var(--ink);font-size:24px;border:0;width:44px}dl{margin:0 0 20px}dl div{border-top:1px solid #11203033;padding:12px 0}dt{font-size:10px;text-transform:uppercase;letter-spacing:.08em}dd{margin:4px 0 0;font-size:14px}label.check{display:flex;align-items:center;gap:12px;margin:20px 0;font-size:13px;line-height:1.5;min-height:48px;cursor:pointer}input[type=checkbox]{accent-color:#b23a10;flex-shrink:0;width:24px;height:24px}dialog .hint{color:#4e5358;font-size:10px}.skip{position:fixed;top:-100px;left:12px;z-index:20;background:var(--paper);color:var(--ink);padding:16px}.skip:focus{top:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.noscript{padding:24px}[hidden]{display:none!important}.reduced *, .reduced *::after{animation:none!important;transition:none!important}.reduced .voice-line path{stroke-dashoffset:0}@keyframes paper{0%,100%{transform:translate(0,0) rotate(-12deg)}50%{transform:translate(16px,-28px) rotate(24deg)}}@keyframes camera{from{transform:scale(1.13)}to{transform:scale(1.04)}}@keyframes arrive{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}@keyframes draw{to{stroke-dashoffset:0}}
@media(min-width:800px){header{padding:32px 5%}main{grid-template-columns:40% 60%;grid-template-areas:"intro stage" "narrative stage";padding:24px 5%;align-content:center;flex:1}.intro{padding:24px 44px 20px 0;align-self:end}h1{font-size:clamp(40px,4.6vw,68px)}.stage{height:min(72vh,720px);border:3px solid var(--paper);align-self:center;transform:rotate(1deg)}.narrative{padding:12px 44px 24px 0;align-self:start}.primary{max-width:420px}.clock{font-size:34px;right:24px;top:24px}.clock small{font-size:10px}.status-tag{font-size:12px}.hero-tag{font-size:26px}footer{padding:12px 5% 24px}footer p{max-width:none;font-size:11px}nav button{width:48px}nav button:after{width:36px}.wordmark{font-size:30px}}
.clock,.status-tag{z-index:5}.paper-field i:nth-child(2){left:96%;top:22%}.paper-field i:nth-child(4){left:-5%;top:42%}.paper-field i:nth-child(6){left:96%;top:88%}.reduced .paper-field{display:none}nav button{width:44px;height:48px}nav button:after{left:8px;width:28px}
@media(max-width:799px){.stage{height:clamp(250px,36svh,340px)}footer p{font-size:10px}header .quiet{min-height:48px}.hint{font-size:12px}}
.voice-line{width:100%;left:0;bottom:0}
@media(prefers-reduced-motion:reduce){*,*::after{animation:none!important;transition:none!important}.voice-line path{stroke-dashoffset:0}.paper-field{display:none}}