:root{
  color-scheme: dark;
  --navy:#050818; --line:#2a3a7a; --blue:#2a74ff; --cyan:#46f4ff; --magenta:#ff4fdc; --violet:#8a48ff;
  --text:#eef2ff; --muted:#9aa6cc; --glass:rgba(5,8,24,.84);
  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --sans:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{height:100%;margin:0;background:#000;color:var(--text);font-family:var(--sans)}
body{display:grid;place-items:center;overflow:hidden}
#stage{position:relative;height:100%;width:100%;max-width:calc(100vh * 9 / 16);max-height:100%;overflow:hidden;background:var(--navy);container-type:inline-size}
@media (min-aspect-ratio: 9/16){ #stage{height:100vh;width:calc(100vh * 9 / 16)} }
#media,#ui{position:absolute;inset:0}
#media img,#media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fade-in{animation:fadeIn .5s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.kb{animation:kb 4.5s ease-out both}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.14)}}
@media (prefers-reduced-motion: reduce){ .kb,.fade-in{animation:none} }

/* lines over the opener (placeholder until the titles pass) */
.line{position:absolute;left:8%;right:8%;bottom:15%;font-weight:300;font-size:8.4cqw;line-height:1.08;text-shadow:0 2px 18px rgba(0,0,0,.6);text-wrap:balance}
.top{position:absolute;left:8%;right:8%;top:calc(7% + env(safe-area-inset-top,0px));font-weight:400;font-size:6.2cqw;line-height:1.15;text-shadow:0 2px 14px rgba(0,0,0,.6);text-wrap:balance}

/* buttons */
.btn{appearance:none;border:0;font:600 4.4cqw/1 var(--sans);color:#050818;background:var(--cyan);border-radius:999px;padding:4cqw 8cqw;cursor:pointer}
.btn.ghost{background:rgba(5,8,24,.45);color:#fff;border:1.5px solid rgba(255,255,255,.85);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.btn:focus-visible,.chip:focus-visible,input:focus-visible,.spot:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.center{position:absolute;left:50%;bottom:calc(10% + env(safe-area-inset-bottom,0px));transform:translateX(-50%);white-space:nowrap}
.skip{position:absolute;right:5%;top:calc(4% + env(safe-area-inset-top,0px));font:500 3.2cqw var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.8);background:none;border:0;padding:2cqw;cursor:pointer}

/* panorama */
.pano{position:absolute;inset:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;touch-action:pan-x;cursor:grab}
.pano::-webkit-scrollbar{display:none}
.pano .wide{position:relative;height:100%;aspect-ratio:2/1}
.pano .wide img,.pano .wide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.spot{position:absolute;transform:translate(-50%,-50%);border:0;background:none;padding:0;cursor:pointer}
.spot i{position:absolute;left:50%;top:22%;width:6cqw;height:6cqw;margin-left:-3cqw;border-radius:50%;border:.6cqw solid #fff;box-shadow:0 0 0 1.4cqw rgba(255,255,255,.18);animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}70%{box-shadow:0 0 0 3.4cqw rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.hint{position:absolute;left:50%;top:calc(21% + env(safe-area-inset-top,0px));transform:translateX(-50%);font:500 3cqw var(--mono);letter-spacing:.1em;text-transform:uppercase;background:rgba(5,8,24,.6);border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:1.4cqw 3.6cqw;white-space:nowrap;pointer-events:none}

/* sheet */
.sheet{position:absolute;left:4%;right:4%;bottom:calc(3.5% + env(safe-area-inset-bottom,0px));background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(160,190,255,.18);border-radius:4cqw;padding:4.6cqw;display:grid;gap:2.8cqw;max-height:62%;overflow:auto}
.sheet .k{font:500 3cqw var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sheet .q{font-size:5.6cqw;font-weight:500;line-height:1.15}
.chips{display:flex;flex-wrap:wrap;gap:1.8cqw}
.chip{appearance:none;font:400 3.6cqw/1.2 var(--sans);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:1.6cqw 3.2cqw;color:rgba(255,255,255,.88);background:none;cursor:pointer;text-align:left}
.chip.on{border-color:var(--cyan);color:var(--cyan);background:rgba(70,244,255,.1)}
.field{width:100%;font:400 4cqw var(--sans);color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(160,190,255,.3);border-radius:2.6cqw;padding:2.8cqw 3.2cqw}
.field::placeholder{color:#8090b8}
.row{display:flex;gap:2.4cqw;align-items:center;justify-content:space-between}
.first{font:400 3cqw var(--mono);color:var(--muted)}
.nudge{font-size:3.8cqw;line-height:1.3;color:var(--cyan);border-left:.7cqw solid var(--cyan);padding-left:2.6cqw}
.err{font-size:3.4cqw;color:var(--magenta)}

/* visor */
#chrome{position:absolute;inset:0;pointer-events:none}
#chrome .br{position:absolute;inset:4.5% 5%;--c:rgba(200,214,255,.6);--t:.45cqw;
  background:linear-gradient(var(--c),var(--c)) top left/22% var(--t) no-repeat,linear-gradient(var(--c),var(--c)) top left/var(--t) 22% no-repeat,
  linear-gradient(var(--c),var(--c)) top right/22% var(--t) no-repeat,linear-gradient(var(--c),var(--c)) top right/var(--t) 22% no-repeat,
  linear-gradient(var(--c),var(--c)) bottom left/22% var(--t) no-repeat,linear-gradient(var(--c),var(--c)) bottom left/var(--t) 22% no-repeat,
  linear-gradient(var(--c),var(--c)) bottom right/22% var(--t) no-repeat,linear-gradient(var(--c),var(--c)) bottom right/var(--t) 22% no-repeat}
#chrome .status{position:absolute;top:calc(6% + env(safe-area-inset-top,0px));left:9%;right:9%;display:flex;justify-content:space-between;font:500 3.1cqw var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(200,214,255,.7)}
#status-r{color:var(--cyan)}
.wire{position:absolute;inset:0;background:var(--navy)}
.wire img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sweep{--p:0%;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 var(--p),transparent calc(var(--p) + 4%));mask-image:linear-gradient(180deg,#000 0,#000 var(--p),transparent calc(var(--p) + 4%))}
.scanline{position:absolute;left:5%;right:5%;height:.6cqw;background:linear-gradient(90deg,transparent,rgba(70,244,255,.95),transparent);box-shadow:0 0 3cqw rgba(70,244,255,.7)}
.rims{position:absolute;inset:0;box-shadow:inset 0 0 0 0 #000;transition:box-shadow .7s ease-in}
.rims.on{box-shadow:inset 0 0 0 60cqw #000}
.tags{position:absolute;left:6%;top:calc(14% + env(safe-area-inset-top,0px));display:grid;gap:1.4cqw;justify-items:start}
.tags span{font:400 3cqw var(--mono);color:var(--cyan);background:rgba(5,8,24,.8);border-left:.7cqw solid var(--cyan);padding:1cqw 2.4cqw}
.pin{position:absolute;display:flex;align-items:center;gap:2cqw;transform:translate(-2.2cqw,-50%);border:0;background:none;padding:0;cursor:pointer;color:#fff}
.pin i{width:4.4cqw;height:4.4cqw;border-radius:50%;background:transparent;border:.6cqw solid var(--cyan);box-shadow:0 0 3cqw rgba(70,244,255,.5);flex:none}
.pin.on i{background:var(--cyan);box-shadow:0 0 0 1.6cqw rgba(70,244,255,.25),0 0 4cqw rgba(70,244,255,.8)}
.pin span{font:400 3.2cqw var(--mono);background:rgba(5,8,24,.82);padding:1cqw 2.4cqw;white-space:nowrap}

/* dots */
.dots{position:absolute;inset:0;background:var(--navy);display:grid;place-content:center;gap:7cqw}
.dots .r{display:flex;gap:7cqw;justify-content:center}
.dots i{width:7.5cqw;height:7.5cqw;border-radius:50%;display:block;opacity:0;animation:dotIn .7s ease-out forwards}
@keyframes dotIn{from{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.4)}to{opacity:var(--o,.45);transform:none}}
.dots .glow i{box-shadow:0 0 4cqw rgba(70,244,255,.85);--o:1}
.dots .label{position:absolute;left:0;right:0;bottom:10%;text-align:center;font:500 3.2cqw var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}

/* card */
.card{position:absolute;inset:0;overflow:auto;background:linear-gradient(180deg,#0b1338,#050818);padding:calc(7cqw + env(safe-area-inset-top,0px)) 6cqw calc(8cqw + env(safe-area-inset-bottom,0px));display:grid;align-content:start;gap:3.6cqw}
.card .k{font:500 2.9cqw var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.8cqw}
.card h1{margin:0;font:800 10cqw/.95 var(--display);text-transform:uppercase;letter-spacing:.01em}
.card p{margin:0;font-size:3.9cqw;line-height:1.4}
.card .sent{font-size:4.6cqw;line-height:1.3}
.card ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:1.6cqw}
.card li{font:400 3.1cqw var(--mono);color:var(--cyan);border:1px solid rgba(70,244,255,.45);border-radius:999px;padding:.8cqw 2.6cqw}
.lock{display:grid;gap:1.6cqw}
.lock div{display:flex;align-items:center;gap:2.4cqw;font-size:3.7cqw;color:rgba(255,255,255,.55);border:1px dashed rgba(255,255,255,.24);border-radius:2cqw;padding:2cqw 2.8cqw}
.lock svg{width:3.8cqw;height:3.8cqw;flex:none}
.seat{display:block;text-align:center;text-decoration:none;color:#fff;font-weight:600;font-size:4.4cqw;border-radius:2.6cqw;padding:3.4cqw;background:linear-gradient(90deg,var(--magenta),var(--violet) 55%,var(--blue))}
.fine{font-size:3.1cqw!important;color:var(--muted)}
.ok{font-size:3.8cqw;color:var(--cyan)}

#loading{position:absolute;inset:0;display:grid;place-items:center;background:rgba(5,8,24,.3)}
#loading i{width:9cqw;height:9cqw;border-radius:50%;border:.6cqw solid rgba(70,244,255,.25);border-top-color:var(--cyan);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}