:root{--h:min(48vh,calc(78vw * 1.42));--w:calc(var(--h) / 1.42);--bz:14px;--top:74px;--spill:240,200,150;--paper:#f4f1ea}
@media (min-width:900px){:root{--h:min(60vh,560px);--w:calc(var(--h) / 1.4);--bz:18px;--top:86px}}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#0e0e0f;color:var(--paper);font-family:'Jost',system-ui,sans-serif;font-weight:300;overflow:hidden;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
.cabin{position:fixed;inset:0;overflow:hidden;background:radial-gradient(140% 90% at 50% 34%,#2b2927 0%,#1b1a19 42%,#0e0e0f 100%)}
.cabin::before{content:"";position:absolute;inset:0;opacity:.32;mix-blend-mode:overlay;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/></svg>")}
.spill{position:absolute;left:50%;top:calc(var(--top) + var(--bz) + var(--h) / 2);width:calc(var(--w) * 3.4);height:calc(var(--h) * 2.3);transform:translate(-50%,-50%);pointer-events:none;background:radial-gradient(closest-side,rgba(var(--spill),.30),rgba(var(--spill),.10) 50%,rgba(var(--spill),0) 78%)}

.top{position:absolute;left:0;right:0;top:0;z-index:5;display:flex;align-items:center;gap:14px;padding:calc(12px + env(safe-area-inset-top)) 20px 0}
.logo img{display:block;height:34px;width:auto}
.flight{margin-left:auto;font-size:12px;letter-spacing:.1em;color:rgba(244,241,234,.6);white-space:nowrap}
.flight b{font-weight:400;color:var(--paper)}
.sound{min-height:44px;font-size:12px;color:rgba(244,241,234,.55)}
.sound[aria-pressed=true]{color:var(--paper)}

.row{position:absolute;left:50%;top:var(--top);z-index:2;display:flex;gap:120px}
.win{position:relative;flex:0 0 auto;width:calc(var(--w) + var(--bz) * 2);height:calc(var(--h) + var(--bz) * 2)}
.win.side{display:none;opacity:.5;filter:brightness(.6) saturate(.8);cursor:pointer}
.bezel{position:absolute;inset:0;padding:var(--bz);border-radius:42% / 32%;background:linear-gradient(180deg,#3d3b39,#2b2a28 60%,#22211f);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -3px 8px rgba(0,0,0,.45),0 26px 60px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.5)}
.win.main .bezel{animation:bump 14s infinite}
@keyframes bump{0%,89%,100%{transform:none}91%{transform:translateY(1.6px)}93%{transform:translateY(-1px)}95%{transform:translateY(.8px)}}
.glass{position:relative;width:100%;height:100%;border-radius:42% / 32%;overflow:hidden;background:#000;isolation:isolate;transform:translateZ(0);-webkit-mask-image:-webkit-radial-gradient(white,black);touch-action:none;cursor:grab;outline:none}
.glass.grab{cursor:grabbing}
.view{position:absolute;inset:-6%;z-index:0}
.view img,.view video{display:block;width:100%;height:100%;object-fit:cover;animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.07) translate(-1.5%,-1%)}to{transform:scale(1) translate(1.5%,1%)}}
.reflect{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,0) 26%,rgba(255,255,255,0) 64%,rgba(255,255,255,.06) 76%,rgba(255,255,255,0) 86%)}
.glass::after{content:"";position:absolute;inset:8px;z-index:3;border-radius:42% / 32%;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 18px 40px rgba(0,0,0,.35)}
.hole{position:absolute;left:50%;bottom:7%;z-index:3;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:rgba(0,0,0,.55);box-shadow:0 0 0 1px rgba(255,255,255,.22)}
.pull{position:absolute;left:0;right:0;top:30px;z-index:3;text-align:center;font-size:12px;letter-spacing:.06em;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.7);pointer-events:none}
.pull::after{content:"";display:block;width:1px;height:18px;margin:6px auto 0;background:linear-gradient(#fff,rgba(255,255,255,0))}
.shade{position:absolute;left:0;right:0;top:0;height:100%;z-index:4;will-change:transform;box-shadow:0 8px 18px rgba(0,0,0,.35);background:repeating-linear-gradient(180deg,rgba(0,0,0,.028) 0 1px,transparent 1px 9px),linear-gradient(180deg,#efebe3,#e2ddd3 80%,#d6d0c4)}
.lip{position:absolute;left:0;right:0;bottom:0;height:16px;border-top:1px solid rgba(0,0,0,.08);background:linear-gradient(180deg,#d3ccbf,#c1b9aa)}
.lip b{position:absolute;left:50%;top:5px;width:38px;height:5px;margin-left:-19px;border-radius:3px;background:rgba(0,0,0,.18);box-shadow:inset 0 1px 1px rgba(0,0,0,.2)}

.card{position:absolute;left:22px;right:22px;top:calc(var(--top) + var(--h) + var(--bz) * 2 + 22px);z-index:3}
.eyebrow{margin-bottom:8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,241,234,.6)}
.card h1{margin-bottom:6px;font-weight:300;font-size:30px;line-height:1.08;letter-spacing:-.01em}
.line{margin-bottom:10px;font-size:15px;line-height:1.4;color:rgba(244,241,234,.72)}
.facts{margin-bottom:16px;font-size:15px;color:rgba(244,241,234,.85)}
.facts b{font-weight:400;font-size:20px;color:#fff}
.cta{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border:1px solid rgba(244,241,234,.35);border-radius:999px;font-size:15px;font-weight:400}
.btn.solid{background:var(--paper);border-color:var(--paper);color:#141312}
.face{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:13px;line-height:1.35;color:rgba(244,241,234,.68)}
.face img{flex:0 0 auto;width:32px;height:32px;border-radius:50%;object-fit:cover}

.outside{position:absolute;left:0;right:0;bottom:0;z-index:6;padding:26vh 22px calc(24px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.55) 28%,rgba(0,0,0,.86))}
.outside[hidden]{display:none}
.outside h2{margin:6px 0 14px;font-weight:300;font-size:34px;line-height:1.05}
.days{display:grid;gap:8px;margin-bottom:16px;list-style:none;font-size:15px}
.days li{display:grid;grid-template-columns:86px 1fr;gap:10px;color:rgba(244,241,234,.9)}
.days span{padding-top:2px;font-size:13px;color:rgba(244,241,234,.55)}

@media (min-width:900px){
  .top{padding:28px 48px 0}.logo img{height:42px}.flight{font-size:13px}
  .win.side{display:block}
  .card{left:0;right:0;width:min(680px,80vw);margin:0 auto;text-align:center;top:calc(var(--top) + var(--h) + var(--bz) * 2 + 26px)}
  .card h1{font-size:44px}.cta,.face{justify-content:center}
  .outside{padding:30vh 64px 48px}.o-in{max-width:620px}.outside h2{font-size:52px}
}
@media (max-height:700px){.face{display:none}}
@media (prefers-reduced-motion:reduce){.win.main .bezel,.view img,.view video{animation:none}}