:root {
  --cream: #fff0b5;
  --paper: #fffdf7;
  --ink: #292a28;
  --red: #df1715;
  --muted: #746f64;
  --line: #d9cfae;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #20211f; color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
.stage { position: relative; width: min(100vw, 177.78vh); aspect-ratio: 16 / 9; min-height: 100vh; overflow: hidden; background: var(--cream); isolation: isolate; }
.grain { position: absolute; inset: 0; z-index: 1; opacity: .18; pointer-events: none; background-image: radial-gradient(rgba(41,42,40,.16) .65px, transparent .7px); background-size: 6px 6px; mix-blend-mode: multiply; }
.brand { position: absolute; z-index: 15; top: 4.5%; left: 5.2%; color: rgba(255,255,255,.95); font-weight: 900; font-size: clamp(1.15rem, 2.15vw, 2.45rem); letter-spacing: -.08em; line-height: 1; }
.brand b { color: var(--red); font-size: 1.35em; padding: 0 .03em; }
.film-status { position: absolute; z-index: 15; top: 5.3%; right: 5.2%; color: var(--muted); font: 700 clamp(.42rem, .68vw, .75rem)/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .18em; }
.live-dot { display:inline-block; width:.7em; height:.7em; margin-right:.55em; border-radius:50%; background:var(--red); animation:pulse 2.8s ease-in-out infinite; }
.dot { position: absolute; z-index: 2; border-radius: 50%; background: var(--red); pointer-events: none; }
.dot-a { width: clamp(15px,2.35vw,42px); height: clamp(15px,2.35vw,42px); right: 10%; top: 15%; animation: float 12s ease-in-out infinite; }
.dot-b { width: clamp(8px,1.1vw,18px); height: clamp(8px,1.1vw,18px); left: 48%; bottom: 13%; opacity: .7; animation: float 10s 1.2s ease-in-out infinite reverse; }
.scene { position:absolute; z-index:3; inset: 0; display:flex; flex-direction:column; justify-content:center; padding: 12% 10%; opacity:0; transform:scale(1.02); pointer-events:none; transition:opacity .8s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.scene.active { opacity:1; transform:scale(1); pointer-events:auto; }
.eyebrow { margin:0 0 1.2vw; color:var(--muted); font:700 clamp(.55rem,1.05vw,1.2rem)/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing:.42em; }
h1,h2 { margin:0; max-width: 12ch; color:var(--ink); font-weight:900; font-size:clamp(2.4rem,6.7vw,8rem); letter-spacing:-.075em; line-height:.9; }
h1 em,h2 em { color:rgba(255,255,255,.96); font-style:normal; }
.sub { max-width:42ch; margin:2.2vw 0 0; color:var(--muted); font-size:clamp(.78rem,1.35vw,1.5rem); line-height:1.4; }
.intro { justify-content:flex-end; padding-bottom:13%; }
.maze { align-items:flex-start; }
.maze h2 { position:relative; z-index:5; }
.maze-form { position:absolute; right:9%; top:18%; width:31%; min-width:250px; height:63%; display:grid; grid-template-columns:1fr 1fr; gap:.65vw; padding:2.2vw; background:rgba(255,253,247,.55); border:1px solid rgba(41,42,40,.12); transform:rotate(4deg); }
.maze-form span { position:relative; z-index:2; height:min-content; padding:.8em 1em; background:var(--paper); border:1px solid var(--line); color:var(--muted); font:700 clamp(.4rem,.75vw,.85rem) ui-monospace, monospace; letter-spacing:.12em; }
.maze-form i { display:block; width:100%; height:1px; background:var(--red); transform:rotate(-24deg); opacity:.55; }
.widget { padding-left:10%; }
.checkout-card { position:absolute; right:9%; top:17%; width:34%; min-width:300px; padding:2.3vw; background:var(--paper); border-radius:1.1vw; box-shadow:18px 18px 0 rgba(41,42,40,.08); }
.shop-line { display:flex; justify-content:space-between; color:var(--ink); font:700 clamp(.5rem,.9vw,1rem) ui-monospace,monospace; letter-spacing:.08em; }.shop-line b { font-size:1.35em; }.divider { border-top:1px solid var(--line); margin:1.6vw 0; }.pay-option { position:relative; padding:1vw 0 1vw 2.2em; }.pay-option strong { display:block; font-size:clamp(.75rem,1.25vw,1.35rem); }.pay-option small { color:var(--muted); font-size:clamp(.5rem,.8vw,.9rem); }.radio { position:absolute; left:0; top:1.15em; width:1.2em;height:1.2em;border:1px solid var(--ink);border-radius:50%; }.radio::after { content:"";position:absolute;inset:27%;border-radius:50%;background:var(--red); }.checkout-card button,.controls button { border:0; padding:1em 1.2em; background:var(--ink); color:white; font:700 clamp(.5rem,.75vw,.85rem) ui-monospace,monospace; letter-spacing:.12em; }.checkout-card button { width:100%;margin-top:1vw; }.concept { display:block;margin-top:1vw;color:var(--muted);font:600 clamp(.37rem,.55vw,.65rem) ui-monospace,monospace;letter-spacing:.09em; }
.wallet { align-items:flex-end; text-align:right; }.wallet h2 { margin-right:0; }.wallet-card { position:absolute; left:11%; top:25%; width:28%; min-width:255px; padding:2.7vw; text-align:left; color:white; background:var(--ink); border-radius:1.2vw; transform:rotate(-3deg); box-shadow:16px 16px 0 rgba(223,23,21,.2); }.wallet-mark { color:var(--red);font-size:2.4em; }.wallet-card p { margin:3vw 0 .5vw;color:#d3cbb9;font:700 clamp(.45rem,.75vw,.85rem) ui-monospace,monospace;letter-spacing:.14em; }.wallet-card strong { font-size:clamp(1.2rem,2.4vw,2.8rem); }.wallet-rule { margin:2vw 0;border-top:1px solid rgba(255,255,255,.35); }.wallet-card small { color:#d3cbb9;font:700 clamp(.43rem,.65vw,.75rem) ui-monospace,monospace;letter-spacing:.08em; }.bubble { position:absolute; padding:1.1em 1.3em; background:var(--paper); border:2px solid var(--ink); border-radius:1.4em; color:var(--ink); box-shadow:5px 5px 0 var(--red); font:800 clamp(.55rem,1.05vw,1.2rem)/1.05 ui-monospace,monospace; letter-spacing:.06em; text-align:left; }.bubble::after { content:"";position:absolute; width:1em;height:1em;background:var(--paper);border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg); }.bubble-one { right:23%;top:39%; }.bubble-one::after{ bottom:-.58em;left:1.5em; }.bubble-two { right:11%;bottom:17%; }.bubble-two::after{ top:-.58em;right:1.4em; }.control { align-items:center; text-align:center; }.control h2 { max-width:20ch; }.rail { display:flex; width:82%; margin:5vw 0 2vw; padding:0; list-style:none; justify-content:center; align-items:center; }.rail li { position:relative; flex:1; padding:1.15em .6em; background:var(--paper); border:1px solid var(--line); color:var(--ink); font:800 clamp(.42rem,.78vw,.9rem)/1.15 ui-monospace,monospace; letter-spacing:.07em; }.rail li+li::before { content:"→"; position:absolute; left:-.7em; top:50%; z-index:3; color:var(--red); transform:translateY(-50%); font:bold 2em Arial; }.micro { margin:0;color:var(--red);font:800 clamp(.55rem,.9vw,1.05rem) ui-monospace,monospace;letter-spacing:.18em; }.proof { padding-left:10%; }.proof-card { position:absolute;right:8%;top:19%;width:38%;min-width:325px;padding:1.6vw 2vw;background:var(--paper);box-shadow:13px 13px 0 rgba(41,42,40,.08); }.proof-card div { display:flex;justify-content:space-between;gap:1em;padding:1.05vw 0;border-bottom:1px solid var(--line); }.proof-card span,.proof-card b,.proof-card a { font:700 clamp(.42rem,.72vw,.8rem) ui-monospace,monospace;letter-spacing:.08em; }.proof-card span{ color:var(--muted); }.proof-card b{ color:var(--ink); }.red-text{ color:var(--red)!important; }.proof-card a{ display:block;margin-top:1.2vw;color:var(--red);text-decoration:none; }.bubble-proof{ right:12%;bottom:10%; }.bubble-proof::after{ left:2em;top:-.58em; }.mission { justify-content:center; }.mission-copy { max-width:40ch;margin:2.5vw 0 0;color:var(--muted);font-size:clamp(.75rem,1.35vw,1.55rem);line-height:1.4; }.joke { align-items:center;text-align:center; }.joke .eyebrow{ margin-bottom:2vw; }.comic-star{ color:var(--red);font-size:clamp(3rem,9vw,10rem);line-height:.5;animation:spin 10s linear infinite; }.final-bubble{ position:relative;margin:2vw 0 1.5vw; }.final-bubble::after{ left:48%;bottom:-.58em; }.joke-copy{ margin:0;color:var(--ink);font-size:clamp(.9rem,2vw,2.35rem);font-weight:900;letter-spacing:-.035em;line-height:1.1; }.joke-copy em{ color:var(--muted);font-style:normal; }.tiny{ margin:2vw 0 0;color:var(--red);font:800 clamp(.48rem,.75vw,.85rem) ui-monospace,monospace;letter-spacing:.2em; }.end { align-items:center;text-align:center; }.end h2{ max-width:15ch; }.controls { position:absolute; z-index:18; left:5.2%; right:5.2%; bottom:4.5%; display:flex; align-items:center; gap:1vw; color:var(--muted); font:700 clamp(.38rem,.63vw,.72rem) ui-monospace,monospace; letter-spacing:.12em; }.controls button { padding:.8em 1em; cursor:pointer; }.controls #restart{ background:transparent;color:var(--ink);border:1px solid var(--ink); }.controls span:last-child{ margin-left:auto; }
.mission-detail { align-items:flex-end; text-align:right; }
.mission-detail h2 { max-width:13ch; font-size:clamp(2.1rem,5vw,6rem); }
.mission-detail .mission-copy { max-width:31ch; }
.mission-marker { display:flex; align-items:center; gap:1em; margin-top:3vw; color:var(--red); font:800 clamp(.5rem,.85vw,1rem) ui-monospace,monospace; letter-spacing:.2em; }
.mission-marker i { width:clamp(42px,7vw,120px); height:1px; background:var(--red); }
html.embedded, html.embedded body { width:100%; height:100%; min-height:0; overflow:hidden; }
html.embedded .stage { width:100%; height:100%; min-height:0; aspect-ratio:auto; }
@keyframes float { 50%{ transform:translate(2.5vw,-2vw); } } @keyframes pulse { 50%{ opacity:.25;transform:scale(.72); } } @keyframes spin { to{transform:rotate(360deg);} }
@media (max-width:700px) { .stage{ width:100vw; min-height:100vh; aspect-ratio:auto; }.scene{ padding:23% 7% 18%; }.brand{ top:4%; }.film-status{ display:none; }.maze-form,.checkout-card,.wallet-card,.proof-card{ transform:scale(.78); transform-origin:top right; right:-6%; top:52%; }.wallet{ align-items:flex-start;text-align:left; }.wallet-card{ left:4%;right:auto;transform:scale(.75) rotate(-3deg);transform-origin:top left;top:47%; }.bubble-one{right:7%;top:43%;}.bubble-two{right:5%;bottom:19%;}.rail{ width:112%;margin-left:-6%; }.rail li{ padding:.9em .2em; }.proof-card{ min-width:290px; }.bubble-proof{right:5%;bottom:14%;}.controls{ bottom:2.5%;left:5%;right:5%;gap:.6em; }.controls span:last-child{display:none;} }