:root{--ink:#edf3ee;--muted:#9ba9a8;--void:#071014;--glass:rgba(10,24,29,.72);--line:rgba(164,222,217,.22);--aqua:#a8e0d7;--amber:#e3bd79;--violet:#c7b9df}*{box-sizing:border-box}html,body{margin:0;background:#071014;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body{min-height:100vh;background:radial-gradient(circle at 15% 5%,rgba(84,130,139,.22),transparent 30%),radial-gradient(circle at 82% 22%,rgba(119,93,137,.17),transparent 28%),linear-gradient(135deg,#071014,#10191c 55%,#11161d);overflow-x:hidden}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.28;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.5px);background-size:71px 71px;animation:drift 80s linear infinite}@keyframes drift{to{transform:translate3d(-71px,71px,0)}}.shell{width:min(1500px,94vw);margin:auto;padding:26px 0 45px}.top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:0 2px 18px;margin-bottom:24px}.brand{letter-spacing:.3em;font-size:13px}.brand b{color:var(--amber)}.meta{font:11px ui-monospace,monospace;color:var(--muted);letter-spacing:.12em}.hero{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px}.screen{position:relative;aspect-ratio:16/9;background:#000;border:1px solid rgba(168,224,215,.3);box-shadow:0 25px 90px #0008,0 0 70px rgba(92,155,160,.08);overflow:hidden;border-radius:3px}.screen:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 100px #0009}video{width:100%;height:100%;object-fit:fill;display:block}.hud{position:absolute;z-index:5;inset:15px 17px auto;display:flex;justify-content:space-between;font:10px ui-monospace,monospace;letter-spacing:.12em;color:#d9eee9;text-shadow:0 1px 8px #000}.hud button{border:1px solid var(--line);background:#081216aa;color:inherit;padding:7px 9px;cursor:pointer}.veil{position:absolute;z-index:6;inset:0;background:rgba(3,10,12,.58);backdrop-filter:blur(4px)}.choice{position:absolute;z-index:7;width:min(620px,86%);left:50%;top:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,rgba(11,28,32,.95),rgba(22,24,35,.94));border:1px solid rgba(168,224,215,.42);padding:28px;box-shadow:0 20px 80px #000c}.choice small,.eyebrow{font:10px ui-monospace,monospace;letter-spacing:.22em;color:var(--amber)}h1,h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:.02em}.choice h2{font-size:34px;margin:8px 0}.choice p{color:#c8d3d1}.opts{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:20px}.opts button,.primary{padding:13px 15px;border:1px solid var(--line);background:rgba(168,224,215,.06);color:var(--ink);font:11px ui-monospace,monospace;letter-spacing:.1em;cursor:pointer;transition:.2s}.opts button:hover,.primary:hover{background:rgba(168,224,215,.15);border-color:var(--aqua);transform:translateY(-1px)}.side{padding:24px;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(15px);display:flex;flex-direction:column;justify-content:space-between}.side h1{font-size:42px;line-height:.95;margin:12px 0 18px}.side p{font-family:Georgia,serif;font-size:16px;line-height:1.55;color:#c7d0cf}.sig{font:10px ui-monospace,monospace;color:var(--muted);line-height:1.8}.intro{position:absolute;z-index:8;inset:0;display:grid;place-items:center;background:radial-gradient(circle,rgba(26,54,59,.55),rgba(3,8,10,.94))}.intro>div{text-align:center;max-width:560px;padding:30px}.intro h1{font-size:clamp(42px,7vw,82px);margin:4px}.intro p{color:#bdc9c7}.primary{margin-top:18px;background:rgba(227,189,121,.11);border-color:rgba(227,189,121,.5)}.ending{margin-top:22px;padding:28px;border:1px solid var(--line);background:var(--glass);text-align:center}.code{font:clamp(28px,5vw,52px) ui-monospace,monospace;letter-spacing:.16em;color:var(--amber);margin:12px}.foot{display:flex;justify-content:space-between;margin-top:18px;color:var(--muted);font:10px ui-monospace,monospace}.foot a{color:var(--aqua)}[hidden]{display:none!important}@media(max-width:900px){.hero{grid-template-columns:1fr}.side{min-height:240px}.opts{grid-template-columns:1fr}.shell{width:96vw;padding-top:12px}.top{margin-bottom:12px}.screen{aspect-ratio:16/9}.side h1{font-size:34px}}

/* Mobile / touch layout */
@media (max-width: 700px){
  html{-webkit-text-size-adjust:100%}
  body{min-width:0}
  .shell{width:100%;padding:0 0 28px;margin:0}
  .top{padding:14px 14px 12px;margin:0;gap:10px;align-items:flex-start}
  .brand{font-size:11px;letter-spacing:.20em;white-space:nowrap}
  .meta{font-size:9px;letter-spacing:.06em;text-align:right;line-height:1.35}
  .hero{display:flex;flex-direction:column;gap:0}
  .screen{width:100%;aspect-ratio:16/9;border-left:0;border-right:0;border-radius:0;box-shadow:0 12px 42px #0008;min-height:0}
  video{width:100%;height:100%;object-fit:fill}
  .hud{inset:8px 9px auto;font-size:8px;letter-spacing:.07em;align-items:center}
  .hud button{font-size:9px;padding:6px 8px;min-height:32px}
  .intro{overflow:auto;-webkit-overflow-scrolling:touch}
  .intro>div{max-width:none;width:100%;padding:22px 18px 18px}
  .intro h1{font-size:clamp(32px,12vw,54px);line-height:.95;margin:4px 0 8px}
  .intro p{font-size:13px;line-height:1.42;margin:8px auto;max-width:38em}
  .eyebrow,.choice small{font-size:8px;letter-spacing:.14em}
  .primary{margin-top:10px;padding:11px 13px;font-size:9px;min-height:40px}
  .choice{width:calc(100% - 20px);max-height:calc(100% - 16px);overflow:auto;padding:14px;top:50%;border-radius:2px;-webkit-overflow-scrolling:touch}
  .choice h2{font-size:24px;line-height:1;margin:5px 0 7px}
  .choice p{font-size:12px;line-height:1.35;margin:0}
  .opts{grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
  .opts button{font-size:9px;line-height:1.2;padding:9px 7px;min-height:42px;touch-action:manipulation}
  .side{min-height:0;border-left:0;border-right:0;border-top:1px solid var(--line);padding:20px 16px;gap:18px;backdrop-filter:none}
  .side h1{font-size:30px;line-height:1;margin:8px 0 12px}
  .side p{font-size:15px;line-height:1.5;margin:0}
  .sig{font-size:9px;line-height:1.65}
  .ending{margin:14px 12px 0;padding:20px 12px}
  .ending h2{font-size:26px;margin:8px 0}
  .ending p{font-size:14px}
  .code{font-size:clamp(22px,8vw,38px);letter-spacing:.09em;overflow-wrap:anywhere}
  .foot{padding:0 14px;flex-direction:column;gap:8px;line-height:1.5;font-size:9px}
}

@media (max-width: 390px){
  .top{padding-inline:10px}
  .brand{font-size:10px;letter-spacing:.14em}
  .meta{font-size:8px}
  .intro>div{padding:18px 12px 12px}
  .intro p{font-size:12px;line-height:1.34}
  .intro h1{font-size:34px}
  .primary{min-height:36px;padding:8px 10px}
  .choice{width:calc(100% - 12px);padding:10px}
  .choice h2{font-size:21px}
  .opts{gap:5px}
  .opts button{font-size:8px;padding:7px 5px;min-height:38px}
}

@media (max-width: 700px) and (orientation: landscape){
  .top,.side,.foot{display:none}
  .shell{padding:0;width:100vw}
  .hero{display:block}
  .screen{height:100dvh;aspect-ratio:auto;border:0}
  .intro>div{max-width:650px;padding:14px 24px}
  .intro h1{font-size:38px}
  .intro p{font-size:12px;line-height:1.3}
  .choice{width:min(620px,92vw);max-height:92dvh}
}

@media (hover:none){
  .opts button:hover,.primary:hover{transform:none}
}


/* Phone-first experience: give the intro and decision UI enough physical space.
   The film returns to cinematic 16:9 as soon as playback begins. */
@media (max-width:700px) and (orientation:portrait){
  .screen{aspect-ratio:auto;min-height:520px;height:min(72svh,620px)}
  .screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62}
  .intro{align-items:center;overflow:visible}
  .intro>div{padding:28px 20px 24px}
  .intro p{font-size:14px;line-height:1.5;max-width:34em}
  .primary{width:100%;max-width:340px;min-height:48px;font-size:10px}
  body.journey-started:not(.decision-open) .screen{height:auto;min-height:0;aspect-ratio:16/9}
  body.journey-started:not(.decision-open) .screen video{position:static;opacity:1;object-fit:fill}
  body.decision-open .screen{height:min(76svh,650px);min-height:520px;aspect-ratio:auto}
  body.decision-open .screen video{position:absolute;opacity:.42;object-fit:cover}
  body.decision-open .choice{width:calc(100% - 28px);max-height:none;overflow:visible;padding:20px 16px}
  body.decision-open .opts{grid-template-columns:1fr;gap:8px}
  body.decision-open .opts button{min-height:46px;font-size:10px}
}

@media (max-width:390px) and (orientation:portrait){
  .screen{height:min(76svh,570px);min-height:500px}
  .intro>div{padding:22px 14px 18px}
  .intro p{font-size:13px;line-height:1.42}
  body.decision-open .screen{height:min(80svh,590px);min-height:510px}
}