/* Psykron — The First Spark Edition. One stylesheet, no build step. */
:root{
  --paper:#e6e3d6; --paper-2:#dcd9ca; --ink:#1d2a26; --muted:#5d665c; --line:#1d2a2622;
  --night:#0f2e31; --night-2:#0a2225; --cream:#f4efe1; --ember:#c8481f; --gold:#e9b96a;
  --rail:168px; --gut:clamp(20px,4vw,56px);
  --sans:"Instrument Sans",system-ui,Arial,sans-serif; --serif:"Instrument Serif",Georgia,serif;
  --tear:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V18L30 12 62 20 95 9 130 16 160 7 196 15 230 10 262 21 300 11 332 17 370 6 402 14 440 9 470 19 508 8 540 15 578 5 610 16 645 10 680 20 712 9 750 14 782 6 820 17 852 11 890 21 925 8 960 15 992 7 1030 18 1062 10 1100 16 1132 6 1168 14 1200 9V40z'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:64px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.5;overflow-x:clip;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ol,dl,dd,figure{margin:0}ol{padding:0;list-style:none}
h1,h2,h3,h4{font-weight:500}
em{font-family:var(--serif);font-style:italic;font-weight:400}
:focus-visible{outline:2px solid var(--ember);outline-offset:4px;border-radius:2px}
::selection{background:var(--gold);color:var(--night)}
.skip{position:fixed;left:14px;top:-80px;background:var(--cream);padding:12px 16px;z-index:200}.skip:focus{top:14px}

/* ── header ── */
.top{position:fixed;inset:0 0 auto;z-index:90;height:60px;padding:0 20px;display:flex;align-items:center;gap:22px;color:var(--cream);transition:background .25s,color .25s}
.top.solid{background:#0f2e31e6;backdrop-filter:blur(14px)}
.top.on-paper.solid{background:#e6e3d6ea;color:var(--ink)}
.brand{display:flex;align-items:center;gap:9px;white-space:nowrap}
.brand img{border-radius:50%}
.brand strong{font-size:22px;font-weight:600;letter-spacing:-.05em}
.brand span{font-size:11px;opacity:.65}
.top-edition{font-size:13px;opacity:.8;margin-right:auto}
@media(min-width:1101px){.top-edition{visibility:hidden}}
.cta{font-size:13px;font-weight:600;padding:9px 16px;border-radius:99px;background:var(--cream);color:var(--night);white-space:nowrap;transition:transform .2s}
.top.on-paper.solid .cta{background:var(--night);color:var(--cream)}
.cta:hover,.button:hover{transform:translateY(-1px)}

/* ── rail ── */
.rail{position:fixed;z-index:80;left:20px;top:84px;bottom:24px;width:calc(var(--rail) - 40px);display:flex;flex-direction:column;justify-content:space-between;color:var(--cream);opacity:0;pointer-events:none;transition:opacity .3s,color .25s}
.rail.show{opacity:1;pointer-events:auto}
.rail.on-paper{color:var(--ink)}
.rail-mark{font-size:17px;line-height:.95;font-weight:600;letter-spacing:-.03em}
.rail-mark em{font-size:20px;letter-spacing:-.01em}
.rail nav{display:grid;gap:1px;font-size:13px;font-weight:600;letter-spacing:-.01em}
.rail nav a{display:flex;justify-content:space-between;align-items:baseline;padding:2px 0;opacity:.45;transition:opacity .2s}
.rail nav a small{font:400 9px var(--sans);opacity:.8}
.rail nav a:hover,.rail nav a.on{opacity:1}
.rail nav a.on{color:var(--ember)}
.rail:not(.on-paper) nav a.on{color:var(--gold)}

/* ── arrival: scroll brings the fingers together ── */
.arrival{height:250svh;position:relative;z-index:4;pointer-events:none}
.arrival-stage{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;color:var(--cream);pointer-events:auto}
.art{position:absolute;inset:0;background:var(--night);opacity:0;transition:opacity 1.3s ease .15s}
.ready .art{opacity:1}
.art img{position:absolute;left:0;top:0;max-width:none;will-change:transform}
.art-bg{width:100%;height:100%;object-fit:cover}
.art-tech{width:90vw;transform:translate(-4.52vw,calc(37svh - 9.42vw))}
.art-mascot{width:80vw;transform:translate(17.65vw,calc(37svh - 25.17vw))}
.cloud{width:100%;height:100%;object-fit:cover;pointer-events:none}
.cloud.far{opacity:.3;mix-blend-mode:screen}
.cloud.near{opacity:.5;-webkit-mask-image:linear-gradient(transparent 45%,#000 86%);mask-image:linear-gradient(transparent 45%,#000 86%)}
.fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.spark{position:absolute;left:0;top:0;width:10px;height:10px;border-radius:50%;background:#fff6d9;box-shadow:0 0 16px 6px #ffcd74,0 0 60px 22px #ff9b4299,0 0 160px 70px #ffd27544;opacity:0;pointer-events:none}
.spark:before,.spark:after{content:"";position:absolute;left:50%;top:50%;width:220px;height:1px;background:linear-gradient(90deg,transparent,#fff7dc,transparent);transform:translate(-50%,-50%) rotate(24deg)}
.spark:after{transform:translate(-50%,-50%) rotate(114deg)}
.emote{position:absolute;left:0;top:0;width:66px;height:84px;opacity:0;pointer-events:none;filter:drop-shadow(0 0 20px #ffb33cb0);transform-origin:center bottom}
.emote svg{width:100%;height:100%}
.arrival-line{position:absolute;left:50%;bottom:15svh;width:92%;margin:0;text-align:center;font-family:var(--serif);font-size:clamp(36px,5vw,84px);line-height:1;letter-spacing:-.02em;opacity:0;text-shadow:0 3px 30px #06181bcc;pointer-events:none}
.frame{position:absolute;left:50%;top:45%;width:min(318px,82vw);transform:translate(-50%,0);padding:26px 24px 22px;background:#08232799;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.frame:before{content:"";position:absolute;inset:0;border:1px solid #f4efe1aa;clip-path:inset(0 100% 0 0);transition:clip-path 1.4s cubic-bezier(.6,0,.2,1) .2s;pointer-events:none}
.ready .frame:before{clip-path:inset(0)}
.js .frame>*{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.1,1)}
.js .ready .frame>*{opacity:1;transform:none}
.frame>:nth-child(1){transition-delay:.5s}.frame>:nth-child(2){transition-delay:.65s}.frame>:nth-child(3){transition-delay:.95s}.frame>:nth-child(4){transition-delay:1.2s}
.tick{display:block;font-size:9px;font-weight:600;letter-spacing:.2em;color:var(--gold);margin-bottom:18px}
.frame h1{font-size:44px;line-height:.9;font-weight:600;letter-spacing:-.05em}
.frame h1 em{font-size:56px;letter-spacing:-.02em;color:var(--gold)}
.frame-line{font-family:var(--serif);font-size:19px;line-height:1.16;margin:16px 0 18px}
.frame-index{border-top:1px solid #f4efe155;padding-top:12px;font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.28}
.frame-index a{display:flex;justify-content:space-between;align-items:baseline;transition:color .2s,padding .25s}
.frame-index a:hover{color:var(--gold);padding-left:6px}
.frame-index small{font:400 9px var(--sans);opacity:.75}
.arrival-foot{position:absolute;left:20px;right:20px;bottom:18px;margin:0;display:flex;justify-content:space-between;align-items:end;font-size:9px;font-weight:600;letter-spacing:.16em}
.arrival-foot i{font-style:normal;display:inline-block;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(5px)}}

/* ── star field + Psy ── */
.sky{position:fixed;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}
.psy{position:fixed;left:0;top:0;width:140px;height:178px;z-index:83;pointer-events:none;opacity:0;visibility:hidden;will-change:transform;transition:opacity .3s,visibility .3s}
.psy.born{opacity:1;visibility:visible}
.psy>img,.psy>canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:rotate(var(--bank,0deg))}
.psy>canvas{display:none}.psy.live>canvas{display:block}.psy.live>img{display:none}
.psy-aura{position:absolute;inset:34% 4% 2%;border-radius:50%;background:radial-gradient(ellipse,#ffbd5b4d,transparent 70%);filter:blur(10px)}
.psy.docked{z-index:45}.psy.docked .psy-aura{opacity:.4}
.psy-ember{position:fixed;left:0;top:0;width:4px;height:4px;border-radius:50%;background:#ffc263;box-shadow:0 0 8px #ff9d3b;z-index:82;opacity:0;pointer-events:none}

/* ── chapter: a moving painted cover, then the paper ── */
.chapter{position:relative;background:var(--night)}
#sidekick{margin-top:-118svh}
.cover{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;color:var(--cream);background:var(--night-2)}
.plate,.plate-back{position:absolute;inset:-5%;will-change:transform}
.plate picture{display:block;width:100%;height:100%}
.plate img,.plate-back img{width:100%;height:100%;object-fit:cover;object-position:70% center}
.cover-clouds{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;pointer-events:none;will-change:transform;-webkit-mask-image:linear-gradient(transparent 48%,#000 90%);mask-image:linear-gradient(transparent 48%,#000 90%)}
.cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#06181b99 0,#06181b00 26%,#06181b00 52%,#06181bb3 100%),linear-gradient(90deg,#06181b80 0,#06181b00 55%);pointer-events:none}
.js .word,.js .promise{opacity:0;will-change:transform,opacity}
.promise{position:absolute;z-index:2;left:calc(var(--rail) + var(--gut));top:calc(60px + 4svh);max-width:min(640px,44vw);font-family:var(--serif);font-size:clamp(26px,3vw,46px);line-height:1.04;letter-spacing:-.015em;text-wrap:balance;text-shadow:0 2px 26px #06181b99}
.promise:first-letter{font-style:italic;font-size:1.55em;line-height:.6;margin-right:.01em}
.word{position:absolute;z-index:2;left:calc(var(--rail) + var(--gut) - .05em);bottom:14svh;font-size:clamp(84px,16.5vw,270px);line-height:.8;font-weight:600;letter-spacing:-.065em;text-shadow:0 4px 60px #06181b66}
.numeral{position:absolute;z-index:2;right:var(--gut);bottom:calc(14svh + 1vw);font-family:var(--serif);font-size:clamp(18px,1.6vw,26px)}
.word.ink,.numeral.ink{color:#173832;text-shadow:none}
.sheet{position:relative;z-index:6;margin-top:22svh;background:var(--paper);padding:clamp(56px,8vw,120px) 0 clamp(80px,10vw,150px)}
.sheet:before,.access:before{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:clamp(18px,2.6vw,40px);background:inherit;-webkit-mask:var(--tear) center/100% 100% no-repeat;mask:var(--tear) center/100% 100% no-repeat}
.sheet.night{background:var(--night);color:var(--cream)}
.wrap{margin:0 var(--gut) 0 calc(var(--rail) + var(--gut));max-width:1180px}

.swash{font-family:var(--serif);font-size:clamp(34px,4.2vw,64px);line-height:1.02;letter-spacing:-.015em;margin-bottom:clamp(36px,5vw,72px);text-wrap:balance}
.swash:first-letter{font-style:italic;font-size:1.6em;line-height:.6}
.big{font-family:var(--serif);font-size:clamp(22px,2.1vw,31px);line-height:1.14;letter-spacing:-.01em;text-wrap:pretty}
.small{font-size:14px;line-height:1.45;color:var(--muted);max-width:44ch;margin-top:16px}
.night .small{color:#f4efe1a6}
.tag{display:inline-flex;align-items:center;gap:9px;font-size:10px;font-weight:600;letter-spacing:.16em;margin-top:26px}
.tag i{width:7px;height:7px;border-radius:50%;background:var(--ember);box-shadow:0 0 0 4px #c8481f33}
.night .tag{margin:0 0 30px;color:var(--gold)}.night .tag i{background:var(--gold);box-shadow:0 0 0 4px #e9b96a33}
.pill{display:inline-block;margin-top:18px;padding:5px 11px;border-radius:99px;background:#1d2a2612;font-size:12px;font-weight:600;transition:background .2s,color .2s}
a.pill:hover,a.card:hover .pill{background:var(--ink);color:var(--paper)}
.lede{max-width:820px;margin-bottom:clamp(48px,6vw,90px)}

/* feature rows */
.row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,90px);align-items:center;margin-bottom:clamp(64px,9vw,140px)}
.row.flip .copy{order:2}
.copy h4{font-size:15px;font-weight:700;letter-spacing:-.01em;margin-bottom:10px}
.visual{display:flex;justify-content:center;align-items:center;min-height:320px;padding:clamp(24px,3vw,44px);background:var(--paper-2);border-radius:4px;position:relative;overflow:hidden}
.visual.pair{gap:clamp(12px,2vw,28px)}
.phone{width:min(46%,250px);aspect-ratio:9/19.2;border-radius:26px;border:6px solid #0b0d0e;background:#0b0d0e;overflow:hidden;box-shadow:0 30px 60px -28px #0b1a1caa,0 2px 0 #ffffff22 inset;flex:none}
.visual:not(.pair) .phone{width:min(62%,280px)}
.phone img{width:100%;height:100%;object-fit:cover;object-position:top}
.phone.light{border-color:#22262a}
.tilt-l{transform:rotate(-2.5deg) translateY(calc(10px + var(--f,0)*-56px))}.tilt-r{transform:rotate(2deg) translateY(calc(-12px + var(--f,0)*56px))}
.visual .snap.a{translate:0 calc(var(--f,0)*-40px)}.visual .snap.b{translate:0 calc(var(--f,0)*50px)}.visual .snap.c{translate:0 calc(var(--f,0)*-24px)}
.film{width:100%;aspect-ratio:16/10;border-radius:4px;overflow:hidden;background:#0a1114}
.film video{width:100%;height:100%;object-fit:cover}
.visual:has(.film){padding:0;background:none}

/* field photos */
.snap{position:absolute;width:34%;padding:7px 7px 26px;background:#fbf8ee;box-shadow:0 18px 40px -20px #0b1a1caa;font-size:10px;font-weight:700;letter-spacing:.12em}
.snap img{width:100%;aspect-ratio:4/3;object-fit:cover}
.snap b{position:absolute;left:8px;bottom:7px}
.snap.a{left:5%;top:9%;transform:rotate(-7deg)}.snap.b{right:4%;top:14%;transform:rotate(6deg)}.snap.c{right:9%;bottom:8%;transform:rotate(-4deg)}
.visual.album{min-height:480px}.visual.album .phone{position:relative;z-index:2;width:min(40%,220px);margin-left:-18%}
.shot.photos{place-items:stretch}.shot.photos .snap img{position:static;width:100%;height:auto;aspect-ratio:4/3;border:0;border-radius:0;box-shadow:none;transform:none}
.card:hover .shot.photos .snap img{transform:none}
.shot.photos .snap{width:52%}.shot.photos .snap.a{left:8%;top:14%}.shot.photos .snap.b{right:7%;top:36%}
/* three-up */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);margin-bottom:clamp(56px,7vw,110px)}
.trio:last-child,.row:last-child,.quad:last-child,.gallery:last-child{margin-bottom:0}
.card h4{font-size:15px;font-weight:700;margin:14px 0 4px}
.card p{font-size:14px;line-height:1.4;color:var(--muted);max-width:34ch}
.shot{aspect-ratio:4/5;border-radius:4px;overflow:hidden;position:relative;display:grid;place-items:end center;background:#16393b var(--bg) center/cover}
.shot:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#06181b22,#06181b77)}
.shot img{position:relative;width:58%;height:auto;aspect-ratio:9/16.5;object-fit:cover;object-position:top;border-radius:20px 20px 0 0;border:5px solid #0b0d0e;border-bottom:0;box-shadow:0 -20px 60px -20px #000a;transform:translateY(calc(8% + var(--f,0)*-12%))}
.shot{--f:0}.card:hover .shot{filter:brightness(1.06)}

/* fine print grid */
.fine{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,5vw,80px);border-top:1px solid var(--line)}
.fine div{display:grid;grid-template-columns:minmax(120px,1fr) 2fr;gap:18px;padding:13px 0;border-bottom:1px solid var(--line);font-size:13px;line-height:1.4}
.fine dt{font-weight:700}.fine dd{color:var(--muted)}

/* inside */
.quad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
.quad img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px}
.quad figcaption,.gallery figcaption{font-size:13px;line-height:1.35;color:var(--muted);margin-top:10px}
.quad b{display:block;color:var(--ink)}

/* horizon */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,40px);counter-reset:s}
.steps li{border-top:1px solid #f4efe140;padding-top:16px}
.steps span{font-size:11px;letter-spacing:.14em;color:var(--gold)}
.steps h4{font-family:var(--serif);font-size:clamp(28px,2.6vw,40px);line-height:1;margin:22px 0 12px}
.steps p{font-size:15px;line-height:1.45;color:#f4efe1c4}

/* origin */
.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;gap:clamp(10px,1.4vw,18px);align-items:start}
.gallery img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px}
.gallery .wide img{aspect-ratio:16/10.1}

/* access */
.access{position:relative;z-index:6;background:var(--paper);padding:clamp(70px,9vw,140px) 0 34px}
.access-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:clamp(28px,6vw,100px);align-items:center;margin-bottom:clamp(70px,9vw,130px)}
.tag.ink{margin:0 0 26px}
.closer{font-size:clamp(52px,7.4vw,118px);line-height:.88;font-weight:600;letter-spacing:-.055em;margin-bottom:30px}
.closer em{letter-spacing:-.02em;font-size:1.12em}
.access .big{max-width:30ch}
.button{display:inline-flex;gap:14px;align-items:center;margin-top:32px;padding:17px 28px;border-radius:99px;background:var(--ink);color:var(--cream);font-weight:600;font-size:17px;transition:transform .2s,background .2s}
.button:hover{background:var(--ember)}
.access-art{text-align:center}
.access-art img{width:min(100%,360px);height:auto;margin:0 auto;filter:drop-shadow(0 30px 40px #1d2a2633)}
.access-art figcaption{font-family:var(--serif);font-style:italic;font-size:26px;margin-top:8px}
.faq{max-width:860px;margin-bottom:clamp(60px,8vw,110px)}
.faq .swash{margin-bottom:26px}
details{border-top:1px solid var(--line)}details:last-of-type{border-bottom:1px solid var(--line)}
summary{display:flex;justify-content:space-between;gap:20px;padding:17px 0;font-weight:600;cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
summary span{font-weight:400;transition:transform .2s}details[open] summary span{transform:rotate(45deg)}
details p{padding:0 0 20px;max-width:64ch;color:var(--muted);font-size:16px}
footer{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:24px}
footer .brand strong{font-size:18px;color:var(--ink)}

/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.1,1)}
.rv.in{opacity:1;transform:none}
@media(max-width:820px){.promise{max-width:none;font-size:27px}}

/* ── smaller screens ── */
@media(max-width:1100px){
  :root{--rail:0px}
  .rail{display:none}
}
@media(max-width:820px){
  body{font-size:16px}
  .top-edition{display:none}.brand{margin-right:auto}
  .row,.access-grid{grid-template-columns:1fr}
  .row.flip .copy{order:0}
  .trio{grid-template-columns:1fr 1fr}.trio .card:last-child{grid-column:1/-1}.trio .card:last-child .shot{aspect-ratio:16/11}.trio .card:last-child .shot img{width:36%}
  .fine,.steps{grid-template-columns:1fr}.steps{gap:26px}
  .quad{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr 1fr}.gallery .wide{grid-column:1/-1}
  .cover img{object-position:72% center}
  .promise{top:76px;max-width:none;right:var(--gut)}
  .word{bottom:13svh}
  .access-art{order:-1}.access-art img{width:200px}
}
@media(max-width:520px){
  .frame{top:47%;padding:20px 18px 18px}
  .frame h1{font-size:34px}.frame h1 em{font-size:43px}
  .trio{grid-template-columns:1fr}.trio .card:last-child .shot{aspect-ratio:4/5}.trio .card:last-child .shot img{width:58%}
  .fine div{grid-template-columns:1fr;gap:2px}
  .phone{border-radius:20px;border-width:5px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cover img{animation:none;transform:none}
  .art-tech,.art-mascot{transition:none;--in:0}
  .spark{animation:none!important;opacity:.9;transform:translate(-50%,-50%) scale(1)}
  .rv{opacity:1;transform:none;transition:none}
  .arrival-foot i{animation:none}
}

/* ── first chapter rides under the opening; Psy's dock ── */
#sidekick .sheet{margin-top:50svh}
.meet{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,90px);align-items:center;margin-bottom:clamp(56px,7vw,110px)}
.meet .lede{margin:0}
.hint{font-style:italic}
.dock-wrap{position:relative;display:grid;place-items:center;min-height:clamp(340px,36vw,520px)}
.dock{position:relative;width:min(72%,320px);aspect-ratio:116/148;background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit}
.dock img{position:relative;width:100%;height:100%;object-fit:contain;transition:opacity .25s;filter:drop-shadow(0 26px 34px #1d2a2630)}
.dock.shared img{opacity:0}
.ring{position:absolute;left:50%;top:54%;width:158%;aspect-ratio:1;border:1px dashed #1d2a2630;border-radius:50%;translate:-50% -50%;animation:spin 70s linear infinite}
.ring.two{width:118%;border-style:solid;border-color:#c8481f40;animation-duration:44s;animation-direction:reverse}
.ring:before{content:"";position:absolute;left:50%;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--ember);box-shadow:0 0 12px var(--ember)}
@keyframes spin{to{rotate:360deg}}
.dock-label{position:absolute;font-size:9px;font-weight:600;letter-spacing:.18em;color:var(--muted)}
.dock-label.one{left:0;top:12%;rotate:-7deg}.dock-label.two{right:0;bottom:12%;rotate:6deg}
.dock-wrap.end{min-height:0;gap:6px}.dock-wrap.end .dock{width:min(70%,270px)}
.dock-quote{font-family:var(--serif);font-style:italic;font-size:26px;margin:0}
.vision{max-width:26em;margin:-20px 0 clamp(44px,6vw,80px);color:#f4efe1e0}
@media(max-width:820px){
  .meet{grid-template-columns:1fr}.dock-wrap{min-height:330px}.dock-wrap.end{order:-1}
  .frame{top:47%}.frame h1{font-size:38px}.frame h1 em{font-size:48px}
  .arrival-line{bottom:20svh}
}
@media(prefers-reduced-motion:reduce){.ring{animation:none}.art{transition:none}.frame:before{transition:none}}
@media(pointer:coarse){.hint{display:none}}

/* ── the 3D world: one fixed stage, shown through the two flight tracks ── */
.world{position:fixed;inset:0;z-index:4;display:none;background:#06141a;opacity:0;transition:opacity .9s ease}
.world.on{display:block}.world.live{opacity:1}
.track{position:relative;height:500svh;background:#06141a}
.track.short{height:190svh}
.world-on .track{background:none}
.track-stage{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;color:var(--cream);z-index:6}
.track-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.42) saturate(.8) blur(6px);transform:scale(1.06);transition:opacity .9s ease}
.world-live .track-poster{opacity:0}
.track-load{position:absolute;left:50%;top:50%;translate:-50% -50%;margin:0;display:flex;align-items:center;gap:12px;padding:12px 20px;border-radius:99px;background:#08232799;backdrop-filter:blur(10px);font-size:13px;font-weight:600;transition:opacity .5s}
.track-load i{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 14px var(--gold);animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.9);opacity:.4}}
.world-live .track-load{opacity:0}
.track-stage:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#06181b80 0,#06181b00 22%,#06181b00 50%,#06181be0 100%);pointer-events:none}
.cap,.nomen{position:absolute;z-index:2;left:calc(var(--rail) + var(--gut));right:var(--gut);bottom:11svh;max-width:760px;opacity:0;transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.1,1);transform:translateY(18px)}
.cap.show,.nomen.show{opacity:1;transform:none}
.cap-k{display:block;font-size:10px;font-weight:600;letter-spacing:.2em;color:var(--gold);margin-bottom:14px}
.cap-t{font-family:var(--serif);font-size:clamp(40px,5.6vw,92px);line-height:.95;letter-spacing:-.02em;text-shadow:0 3px 34px #06181bd0;text-wrap:balance}
.cap-d{font-size:clamp(15px,1.25vw,19px);line-height:1.42;max-width:44ch;margin-top:16px;color:#f4efe1e6;text-shadow:0 1px 16px #06181b}
.nomen{max-width:none}
.nomen-code{display:flex;flex-wrap:wrap;gap:.06em;font-size:clamp(34px,6.6vw,112px);font-weight:600;letter-spacing:-.03em;line-height:1;margin:0;font-variant-numeric:tabular-nums}
.nomen-code span{opacity:.28;transition:opacity .3s,color .3s,transform .4s cubic-bezier(.2,.7,.1,1)}
.nomen-code span.seen{opacity:.6}
.nomen-code span.now{opacity:1;color:var(--gold);transform:translateY(-.08em);text-shadow:0 0 34px #e9b96a88}
.nomen-mean{font-family:var(--serif);font-size:clamp(24px,2.8vw,44px);line-height:1.08;margin:18px 0 12px;min-height:2.2em;max-width:26em;text-shadow:0 2px 22px #06181b}
.nomen-src{font-size:10px;letter-spacing:.14em;opacity:.6}
.track-steps{position:absolute;z-index:2;right:var(--gut);top:50%;translate:0 -50%;display:grid;gap:9px;margin:0}
.track-steps li{width:7px;height:7px;border-radius:50%;background:#f4efe140;transition:background .3s,transform .3s,box-shadow .3s}
.track-steps li.on{background:var(--gold);transform:scale(1.7);box-shadow:0 0 12px var(--gold)}
.track-tag{position:absolute;z-index:2;left:calc(var(--rail) + var(--gut));bottom:18px;font-size:8px;letter-spacing:.16em;opacity:.55}

@media(max-width:820px){.cap,.nomen{bottom:9svh}.track-steps{display:none}.track-tag{right:var(--gut)}}
@media(prefers-reduced-motion:reduce){.track{display:none}}
.world-failed .track{display:none}

/* ── the guide: a deck pinned to the bottom of every walkthrough ── */
.track-stage:after{background:linear-gradient(180deg,#06181b70 0,#06181b00 20%,#06181b00 62%,#06181b66 100%)}
.deck{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:0 var(--gut) 14px calc(var(--rail) + var(--gut));background:linear-gradient(180deg,#071c20f2,#061519fa);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--cream);transform:translateY(102%);transition:transform .7s cubic-bezier(.2,.7,.1,1)}
.deck.show{transform:none}
.deck-bar{position:absolute;left:0;right:0;top:0;height:2px;background:#f4efe11f}
.deck-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--ember),var(--gold));transform-origin:left;transform:scaleX(var(--bar,0))}
.deck-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(18px,4vw,70px);align-items:start;padding:22px 0 16px;min-height:150px}
.deck .cap-k{margin-bottom:10px}
.deck .cap-t{font-size:clamp(30px,3.5vw,56px);line-height:.98;text-shadow:none}
.deck .cap-d{margin:0;font-size:clamp(14px,1.15vw,18px);max-width:52ch;text-shadow:none}
.deck-say{margin:10px 0 0;font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.6vw,26px);color:var(--gold)}
.deck-row.swap>*{animation:deckin .5s cubic-bezier(.2,.7,.1,1) both}.deck-row.swap>:nth-child(2){animation-delay:.07s}
@keyframes deckin{from{opacity:0;transform:translateY(14px)}}
.deck-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;margin:0;border-top:1px solid #f4efe122;padding-top:10px}
.deck-tabs button{all:unset;cursor:pointer;display:block;width:100%;font-size:12px;font-weight:600;color:#f4efe180;padding:4px 0 2px;position:relative;transition:color .25s}
.deck-tabs button:before{content:"";position:absolute;left:0;top:-11px;width:100%;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.deck-tabs button.on{color:var(--cream)}.deck-tabs button.on:before{transform:scaleX(1)}
.deck-tabs button:hover{color:var(--gold)}
.deck-tabs button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.deck-foot{display:flex;justify-content:space-between;gap:16px;margin:12px 0 0;font-size:8px;letter-spacing:.16em;opacity:.55}
.deck .nomen{position:static;opacity:1;transform:none;display:none;padding:18px 0 14px;min-height:150px}
.deck.decode .nomen{display:block}.deck.decode .deck-row{display:none}
.deck .nomen-code{font-size:clamp(30px,5.4vw,88px)}
.deck .nomen-mean{font-size:clamp(20px,2.2vw,34px);margin:12px 0 0;min-height:1.2em;text-shadow:none}

/* ── the timeline: Psy rides the path, four stops ── */
.timeline{position:relative;height:330svh;background:radial-gradient(ellipse at 50% 45%,#1b4a3a,#0d2a26 62%,#081c1c);z-index:6}
.tl-stage{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;color:var(--cream)}
.tl-top{position:absolute;left:calc(var(--rail) + var(--gut));right:var(--gut);top:84px;display:flex;justify-content:space-between;align-items:start;gap:20px}
.tl-head{font-family:var(--serif);font-size:clamp(34px,4.6vw,72px);line-height:1;letter-spacing:-.015em}
.tl-head em{color:#b9d8a8}
.tl-top .tag{margin:8px 0 0;color:var(--gold);white-space:nowrap;border:1px solid #e9b96a66;border-radius:99px;padding:7px 12px}
.tl-top .tag i{background:var(--gold);box-shadow:0 0 0 4px #e9b96a33}
.tl-map{position:absolute;left:calc(var(--rail) + var(--gut));right:var(--gut);top:26svh;height:36svh}
.tl-map svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tl-line{fill:none;stroke:#f4efe14d;stroke-width:1.5;stroke-dasharray:5 9;vector-effect:non-scaling-stroke}
.tl-done{fill:none;stroke:var(--gold);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:var(--len,1) var(--len,1);stroke-dashoffset:calc(var(--len,1)*(1 - var(--t,0)));filter:drop-shadow(0 0 6px #e9b96a)}
.tl-node{all:unset;cursor:pointer;position:absolute;translate:-50% -50%;display:grid;justify-items:center;gap:8px}
.tl-node span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid #f4efe166;background:#0d2a26;font-size:11px;transition:background .3s,color .3s,box-shadow .3s,transform .3s}
.tl-node b{font-family:var(--serif);font-weight:400;font-size:clamp(15px,1.4vw,22px);opacity:.6;transition:opacity .3s;white-space:nowrap}
.tl-node.on span{background:var(--gold);color:var(--night);box-shadow:0 0 0 8px #e9b96a2e,0 0 30px #e9b96a88;transform:scale(1.12)}
.tl-node.on b,.tl-node.seen b{opacity:1}.tl-node.seen span{border-color:var(--gold);color:var(--gold)}
.tl-dock{position:absolute;width:92px;height:118px;translate:-50% -116%;pointer-events:none}
.timeline .deck{transform:none}
@media(max-width:820px){
  .deck-row{grid-template-columns:1fr;gap:8px;min-height:190px;padding-top:16px}
  .deck-tabs button{font-size:10px}.deck-foot span:last-child{display:none}
  .tl-top{flex-direction:column;top:70px}.tl-map{top:30svh;height:28svh}.tl-node b{font-size:13px}
  .tl-dock{width:64px;height:82px}
}
@media(prefers-reduced-motion:reduce){.timeline{height:auto}.tl-stage{position:relative}}
.world{pointer-events:none;clip-path:inset(100% 0 0 0)}
.hold{height:46svh}
.meet{margin-bottom:0}
.deck-foot a{pointer-events:auto}.deck-foot a:hover{color:var(--gold)}

/* Completed handoff: a hidden world keeps its dimensions without drawing. */
.world{display:block;visibility:hidden;clip-path:inset(100% 0 0 0)}
.world.on{visibility:visible}
#motion-toggle{margin-left:auto;border:1px solid currentColor;border-radius:99px;background:transparent;color:inherit;padding:8px 12px;font:500 11px var(--sans);cursor:pointer;opacity:.8}
.motion-paused *,.motion-paused *:before,.motion-paused *:after{animation-play-state:paused!important}
.track-poster{filter:brightness(.66) saturate(.85);transform:scale(1.025)}
.world-failed .track{display:block;height:100svh}
.world-failed .track-load{display:none}.world-failed .track-poster{opacity:1}
.deck{backdrop-filter:none;-webkit-backdrop-filter:none;background:#071c20f5}
.deck-tabs button{min-height:32px}.deck-foot{opacity:.78}
.hold{height:22svh}.sheet{padding-top:clamp(48px,6vw,90px)}
.frame{top:clamp(180px,39svh,440px)}
@media(max-height:700px){.frame-index li:nth-child(n+5){display:none}}
.frame-index a{min-height:38px}
.sheet,.access{overflow:clip}
#sidekick .sheet{margin-top:38svh}
@media(max-width:820px){
 .top{gap:10px}.top-edition{display:none}.brand span{display:none}
 #motion-toggle{font-size:10px;padding:7px 9px}.cta{font-size:11px;padding:9px 12px}
 .track-stage,.tl-stage,.arrival-stage,.cover{min-height:0}
 .deck{padding-bottom:max(12px,env(safe-area-inset-bottom))}
 .deck-row{min-height:0;gap:7px;padding:15px 0 12px}
 .deck .cap-t{font-size:30px}.deck .cap-d{font-size:14px;line-height:1.4}
 .deck-tabs{overflow-x:auto;grid-auto-columns:minmax(68px,1fr);scrollbar-width:thin;padding-bottom:3px}
 .deck-tabs button{font-size:11px;min-height:34px;white-space:nowrap}
 .deck-foot>span:first-child{display:none}.deck-foot{font-size:8px;letter-spacing:.08em}
 .tl-top{top:78px}.tl-head{font-size:34px}.tl-map{top:33svh;height:25svh;left:38px;right:38px}
 .tl-node b{font-family:var(--sans);font-size:10px}.tl-node span{width:28px;height:28px}
 .frame{top:42svh;padding:20px;width:min(310px,84vw)}.frame h1{font-size:38px}.frame h1 em{font-size:46px}.frame-line{font-size:19px}
}
@media(max-height:660px){.frame{top:34svh}.frame-line{font-size:17px}.frame-index{margin-top:12px}.tick{margin-bottom:10px}.frame h1{font-size:34px}.frame h1 em{font-size:40px}.arrival-foot{display:none}.tl-map{top:31svh;height:25svh}.deck .cap-t{font-size:28px}.deck-say{display:none}}
@media(prefers-reduced-motion:reduce){#motion-toggle{display:none}.timeline .tl-stage{min-height:720px}.timeline .tl-map{top:220px;height:200px}.timeline .deck{position:relative;margin-top:460px}.timeline .deck-row{min-height:140px}}

/* opening underdrawing: lines draw first, then the painting rises under them */
.lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:calc(1 - var(--p,0)*2.6);mix-blend-mode:screen}
.lines *{fill:none;stroke:#f4efe1;stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;opacity:.8;transition:stroke-dashoffset 1.5s cubic-bezier(.6,0,.2,1),opacity 1.6s ease 1.9s}
.ready .lines *{stroke-dashoffset:0;opacity:.2}
.lines :nth-child(2){transition-delay:.12s,1.9s}.lines :nth-child(3){transition-delay:.2s,1.9s}.lines :nth-child(4){transition-delay:.28s,1.9s}.lines :nth-child(5){transition-delay:.36s,1.9s}
.lines :nth-child(n+6){transition-delay:.46s,1.9s}.lines :nth-child(n+8){transition-delay:.6s,1.9s}
.ready .art{transition-delay:.75s}
.frame:before{transition-delay:.7s}
.frame>:nth-child(1){transition-delay:1.2s}.frame>:nth-child(2){transition-delay:1.35s}.frame>:nth-child(3){transition-delay:1.65s}.frame>:nth-child(4){transition-delay:1.9s}
/* timeline under its own stars */
.tl-stage:before{content:"";position:absolute;inset:0;background-image:radial-gradient(1.6px 1.6px at 12% 22%,#fff8e0cc,transparent 60%),radial-gradient(1.2px 1.2px at 28% 64%,#fff8e099,transparent 60%),radial-gradient(1.8px 1.8px at 44% 14%,#ffe2a8cc,transparent 60%),radial-gradient(1.1px 1.1px at 58% 48%,#fff8e088,transparent 60%),radial-gradient(1.5px 1.5px at 71% 26%,#fff8e0bb,transparent 60%),radial-gradient(1.2px 1.2px at 86% 58%,#ffe2a899,transparent 60%),radial-gradient(1.4px 1.4px at 93% 12%,#fff8e0aa,transparent 60%),radial-gradient(1px 1px at 6% 78%,#fff8e088,transparent 60%),radial-gradient(1.3px 1.3px at 36% 38%,#fff8e077,transparent 60%),radial-gradient(1.2px 1.2px at 66% 72%,#fff8e088,transparent 60%);animation:tlglint 5s ease-in-out infinite alternate;pointer-events:none}
@keyframes tlglint{from{opacity:.45}to{opacity:1}}
.tl-node.on span{animation:tlpulse 1.8s ease-in-out infinite}
@keyframes tlpulse{50%{box-shadow:0 0 0 14px #e9b96a14,0 0 44px #e9b96aaa}}
@media(prefers-reduced-motion:reduce){.lines *{transition:none;stroke-dashoffset:0;opacity:.2}.tl-stage:before,.tl-node.on span{animation:none}}

/* ── slim guide: a strip over the picture, not a panel under it ── */
.deck{padding:54px var(--gut) 12px calc(var(--rail) + var(--gut));background:linear-gradient(180deg,#06151900 0,#061519b8 46%,#061519f2 100%);backdrop-filter:none;-webkit-backdrop-filter:none}
.timeline .deck{background:linear-gradient(180deg,#081c1c00 0,#081c1cd9 50%,#081c1cf5 100%)}
.deck-bar{top:auto;bottom:0;height:2px}
.deck-row{grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:clamp(16px,2.6vw,44px);align-items:end;min-height:0;padding:0 0 10px}
.deck .cap-k{font-size:9px;margin-bottom:5px}
.deck .cap-t{font-size:clamp(22px,2.1vw,32px);line-height:1;white-space:nowrap}
.deck .cap-d{font-size:13.5px;line-height:1.36;max-width:68ch;color:#f4efe1d9;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.deck-say{display:none}
.deck-tabs{padding-top:7px;border-top-color:#f4efe11a}
.deck-tabs button{font-size:11px;min-height:0;padding:2px 0 0}
.deck-tabs button:before{top:-8px}
.deck-foot{position:absolute;right:var(--gut);top:30px;margin:0;opacity:.7}
.deck-foot span{display:none}
.deck .nomen{display:none;padding:0 0 10px;min-height:0}
.deck.decode .nomen{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:clamp(16px,2.6vw,44px);align-items:end}
.deck .nomen-code{font-size:clamp(24px,3vw,46px)}
.deck .nomen-mean{font-size:clamp(15px,1.5vw,22px);margin:0 0 .2em;min-height:0;max-width:none}
.track-stage:after{background:linear-gradient(180deg,#06181b66 0,#06181b00 16%)}
@media(max-width:820px){
  .deck{padding:44px var(--gut) max(10px,env(safe-area-inset-bottom))}
  .deck-row{grid-template-columns:1fr;gap:4px;padding:0 0 8px}
  .deck .cap-t{font-size:22px;white-space:normal}.deck .cap-d{font-size:12.5px}
  .deck.decode .nomen{grid-template-columns:1fr;gap:4px}.deck .nomen-code{font-size:24px}.deck .nomen-mean{font-size:14px}
  .deck-tabs button{font-size:10px}.deck-foot{display:none}
}

/* ── opening card: small and low, so the two hands own the screen ── */
.frame{top:auto;bottom:6.5svh;width:min(292px,78vw);padding:16px 18px 15px}
.frame h1{font-size:27px;line-height:.94}.frame h1 em{font-size:34px}

.tick{margin-bottom:9px;font-size:8px}
.frame-line{font-size:14.5px;line-height:1.2;margin:9px 0 0}
.frame-index{display:none}
.arrival-foot span:first-child{display:none}
@media(max-width:820px){.frame{top:auto;bottom:5svh;width:min(280px,82vw);padding:14px 16px}.frame h1{font-size:25px}.frame h1 em{font-size:31px}.frame-line{font-size:14px}}
@media(max-height:660px){.frame{top:auto;bottom:4svh}}

/* ── pinned scenes: each painting holds while its own animation plays through ── */
.sheet{margin-top:150svh}
#sidekick .sheet{margin-top:168svh}
.hold{height:120svh}
.cover{--h:0}
.promise .ps{opacity:.14;transition:opacity .55s ease}
.promise .ps.on{opacity:1}
.cover-meter{position:absolute;z-index:3;right:var(--gut);top:50%;width:2px;height:120px;translate:0 -50%;background:#f4efe133;opacity:calc(min(var(--h)*12,(1 - var(--h))*12,1))}
.cover-meter b{display:block;width:100%;height:calc(var(--h)*100%);background:var(--gold);box-shadow:0 0 10px var(--gold)}
.cover-dock{position:absolute;z-index:2;right:13%;bottom:27svh;width:150px;height:190px;display:none;pointer-events:none}
.fx{position:absolute;z-index:2;pointer-events:none}
.fx>span{--t:clamp(0,(var(--h) - var(--at))*7,1);opacity:var(--t);transform:translateY(calc((1 - var(--t))*18px))}
/* Identify: a scan line crosses the plate and the fields lock in */
.fx-scan{inset:0}
.scan{position:absolute;top:18%;bottom:24%;left:calc(18% + var(--h)*66%);width:2px;background:linear-gradient(180deg,transparent,#ffe7b0,transparent);box-shadow:0 0 26px 6px #ffc46a99,0 0 90px 30px #ffb04a40;opacity:calc(min((var(--h) - .12)*8,(.82 - var(--h))*8,1))}
.fx-scan>span{position:absolute;left:calc(var(--rail) + var(--gut));display:inline-flex;gap:10px;align-items:baseline;padding:8px 14px;border-radius:99px;background:#061a1ecc;border:1px solid #e9b96a66;font-size:10px;font-weight:600;letter-spacing:.14em;color:#f4efe1c0}
.fx-scan>span b{font-size:15px;letter-spacing:.02em;color:var(--gold)}
.fx-scan>span:nth-of-type(1){top:34svh}.fx-scan>span:nth-of-type(2){top:calc(34svh + 46px)}.fx-scan>span:nth-of-type(3){top:calc(34svh + 92px)}.fx-scan>span:nth-of-type(4){top:calc(34svh + 138px)}
/* Measure: the readings come up */
.fx-stats{left:calc(var(--rail) + var(--gut));top:33svh;display:grid;grid-template-columns:repeat(2,auto);gap:16px 44px}
.fx-stats>span{display:grid;grid-template-columns:auto auto;align-items:baseline;column-gap:8px}
.fx-stats small{grid-column:1/-1;font-size:9px;font-weight:600;letter-spacing:.18em;color:var(--gold)}
.fx-stats b{font-size:clamp(46px,5.4vw,88px);font-weight:600;letter-spacing:-.04em;line-height:.9;font-variant-numeric:tabular-nums;text-shadow:0 4px 30px #06181bcc}
.fx-stats em{font-size:15px;opacity:.8}
/* Remember: the photos fly in and file themselves */
.fx-snaps{inset:0}
.snapx{position:absolute;width:min(22vw,250px);padding:8px 8px 28px;background:#fbf8ee;box-shadow:0 24px 50px -22px #0b1a1ccc;color:#1d2a26;font-size:10px;font-weight:700;letter-spacing:.12em;--t:clamp(0,(var(--h) - var(--at))*4,1);opacity:var(--t);transform:translate(calc((1 - var(--t))*var(--x)*70vw),calc((1 - var(--t))*-30px)) rotate(calc(var(--r)*(2 - var(--t))))}
.snapx img{width:100%;aspect-ratio:4/3;object-fit:cover}.snapx b{position:absolute;left:9px;bottom:8px}
.snapx:nth-child(1){left:calc(var(--rail) + var(--gut));top:30svh}.snapx:nth-child(2){left:calc(var(--rail) + var(--gut) + 18vw);top:38svh}.snapx:nth-child(3){left:calc(var(--rail) + var(--gut) + 6vw);top:52svh}
/* Horizon: first light rises */
.fx-sun{left:0;right:0;bottom:0;height:70%;background:radial-gradient(ellipse 60% 70% at 30% 100%,#ffcf8acc,#ff9a4a55 38%,transparent 70%);opacity:calc(var(--h)*.95);transform:translateY(calc((1 - var(--h))*34%));mix-blend-mode:screen}
/* Origin: the spark takes shape */
.fx-core{left:62%;top:36%;width:44vmin;height:44vmin;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,#fff6d8 0,#ffc869cc 18%,#ff8a2a66 42%,transparent 70%);opacity:calc(var(--h)*.9);transform:scale(calc(.3 + var(--h)*1.25));mix-blend-mode:screen}
@media(max-width:820px){
  .cover-dock{right:6%;bottom:30svh;width:96px;height:122px}
  .fx-scan>span{font-size:9px;padding:6px 10px}.fx-scan>span b{font-size:12px}.fx-scan>span:nth-of-type(1){top:36svh}.fx-scan>span:nth-of-type(2){top:calc(36svh + 38px)}.fx-scan>span:nth-of-type(3){top:calc(36svh + 76px)}.fx-scan>span:nth-of-type(4){top:calc(36svh + 114px)}
  .fx-stats{top:36svh;gap:12px 26px}.fx-stats b{font-size:44px}
  .snapx{width:38vw}.snapx:nth-child(2){left:44vw}.snapx:nth-child(3){left:20vw;top:54svh}
}
@media(prefers-reduced-motion:reduce){.sheet,#sidekick .sheet{margin-top:22svh}.hold{height:22svh}.promise .ps{opacity:1}.fx,.cover-meter{display:none}}
.cover-dock{right:auto;left:calc(var(--rail) + var(--gut) + 30vw);bottom:15svh}
.fx-scan>span:nth-of-type(1){top:30svh}.fx-scan>span:nth-of-type(2){top:calc(30svh + 50px)}.fx-scan>span:nth-of-type(3){top:calc(30svh + 100px)}.fx-scan>span:nth-of-type(4){top:calc(30svh + 150px)}
.fx-scan>span{font-size:11px;padding:10px 16px}.fx-scan>span b{font-size:18px}
.fx-stats{top:31svh}
@media(max-width:820px){.cover-dock{left:auto;right:6%;bottom:16svh}.fx-scan>span{font-size:9px;padding:6px 10px}.fx-scan>span b{font-size:12px}.fx-scan>span:nth-of-type(1){top:34svh}.fx-scan>span:nth-of-type(2){top:calc(34svh + 38px)}.fx-scan>span:nth-of-type(3){top:calc(34svh + 76px)}.fx-scan>span:nth-of-type(4){top:calc(34svh + 114px)}}
.fx-stats{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:start;gap:22px 56px}
.fx-stats>span{display:block;line-height:1}
.fx-stats small{display:block;margin-bottom:6px}
.fx-stats b{display:inline-block}
.fx-stats em{margin-left:6px;font-family:var(--sans);font-style:normal}
.fx-stats{display:flex;flex-wrap:wrap;gap:20px 0;width:min(520px,calc(100vw - var(--rail) - var(--gut)*2));height:auto}
.fx-stats>span{flex:0 0 50%}
#sidekick .sheet{margin-top:128svh}
.hold{height:70svh}
@media(max-width:820px){.fx-stats{width:calc(100vw - var(--gut)*2)}}
.fx-stats{bottom:auto;align-content:flex-start;align-items:flex-start}

/* ── Sidekick hands straight to the flight ── */
#sidekick .sheet{padding-bottom:clamp(40px,5vw,70px)}

/* ── Remember: a long guided scene ── */
#remember .sheet{margin-top:300svh}
.fx-snaps.guided .snapx{left:calc(var(--rail) + var(--gut));top:24svh;width:min(25vw,290px);opacity:0;transform:none;transform-origin:0 0;will-change:transform}
.scene-cap{position:absolute;z-index:4;left:calc(var(--rail) + var(--gut));right:var(--gut);bottom:8svh;max-width:620px;opacity:0;transform:translateY(14px);transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.1,1);text-shadow:0 2px 24px #06181b}
.scene-cap.show{opacity:1;transform:none}
.scene-cap p{margin:0;font-family:var(--serif);font-size:clamp(24px,2.6vw,40px);line-height:1.06}
.scene-cap.swap>*{animation:deckin .5s cubic-bezier(.2,.7,.1,1) both}
.filed{position:absolute;left:calc(var(--rail) + var(--gut));top:calc(24svh - 44px);padding:8px 14px;border-radius:99px;background:#0b2a2ee6;border:1px solid #e9b96a88;color:var(--gold);font-size:11px;font-weight:700;letter-spacing:.14em;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.filed.show{opacity:1;transform:none}
@media(max-width:820px){.fx-snaps.guided .snapx{width:46vw;top:30svh}.filed{top:calc(30svh - 40px)}.scene-cap p{font-size:22px}}

/* ── the app, drawn in its own liquid glass (illustrations of the HVAI screens) ── */
.gp{position:relative;background:#000;color:#f5f7fb;font-family:var(--sans);isolation:isolate;container-type:inline-size}
.gp>*{position:absolute}
.gp .gp-view{inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 46%;transform:scale(1.5);animation:gpdrift 9s ease-in-out infinite alternate}
@keyframes gpdrift{from{transform:scale(1.5) translate(-1.5%,1%)}to{transform:scale(1.62) translate(1.5%,-1.5%)}}
.gp-cam:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#000a 0,#0000 22%,#0000 62%,#000c 100%);pointer-events:none;z-index:1}
.gp-chip,.gp-mode,.gp-dock,.gp-glass,.gp-hint,.gp-tags{z-index:2;background:linear-gradient(135deg,#ffffff2e,#ffffff0d 45%,#ffffff1c);border:1px solid #ffffff3d;box-shadow:inset 0 1px 0 #ffffff59,inset 0 -1px 0 #0000004d,0 10px 30px -10px #000c;backdrop-filter:blur(16px) saturate(170%);-webkit-backdrop-filter:blur(16px) saturate(170%)}
.gp-chip{left:50%;top:9%;translate:-50% 0;display:flex;align-items:center;gap:1.6cqw;padding:1.8cqw 3.6cqw;border-radius:99px;font-size:3.5cqw;font-weight:600;white-space:nowrap}
.gp-chip .pin{width:2.2cqw;height:2.2cqw;border-radius:50%;background:#00e676;box-shadow:0 0 0 1cqw #00e67633}
.gp-chip.lock{top:6%;color:#ffd600;border-color:#ffd60066;font-size:3cqw;letter-spacing:.1em}
.gp-frame{z-index:2;left:19%;right:19%;top:27%;bottom:33%;background:none;border:0}
.gp-frame b{position:absolute;width:13%;height:10%;border:0 solid #fff;filter:drop-shadow(0 0 6px #ffffffaa)}
.gp-frame b:nth-child(1){left:0;top:0;border-width:2px 0 0 2px;border-top-left-radius:8px}.gp-frame b:nth-child(2){right:0;top:0;border-width:2px 2px 0 0;border-top-right-radius:8px}
.gp-frame b:nth-child(3){left:0;bottom:0;border-width:0 0 2px 2px;border-bottom-left-radius:8px}.gp-frame b:nth-child(4){right:0;bottom:0;border-width:0 2px 2px 0;border-bottom-right-radius:8px}
.gp-frame u{position:absolute;left:3%;right:3%;height:2px;top:0;background:linear-gradient(90deg,transparent,#65b5f4,#fff,#65b5f4,transparent);box-shadow:0 0 18px 4px #65b5f499;animation:gpscan 2.6s cubic-bezier(.5,0,.5,1) infinite alternate}
@keyframes gpscan{to{top:100%}}
.gp-hint{left:50%;bottom:27.5%;translate:-50% 0;padding:1.6cqw 3.4cqw;border-radius:99px;font-size:3.1cqw;white-space:nowrap}
.gp-mode{left:50%;bottom:19.5%;translate:-50% 0;display:flex;gap:1cqw;padding:1cqw;border-radius:99px;font-size:2.9cqw;letter-spacing:.1em}
.gp-mode b,.gp-mode em{padding:1.4cqw 3cqw;border-radius:99px;font-style:normal;font-family:var(--sans);font-weight:700}
.gp-mode b{background:#fff;color:#000}.gp-mode em{opacity:.7}
.gp-dock{left:4%;right:4%;bottom:3%;height:12.5%;border-radius:7cqw;display:flex;align-items:center;justify-content:space-around;font-size:2.4cqw;font-weight:700;letter-spacing:.08em;color:#ffffffb3}
.gp-shutter{width:17cqw;height:17cqw;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#dfe6ee 60%,#aab6c4);box-shadow:0 0 0 1cqw #000c,0 0 0 1.6cqw #ffffffcc,0 0 30px #65b5f499;translate:0 -18%}
.gp-tags{left:5%;right:5%;top:17%;display:flex;gap:1.2cqw;padding:1.2cqw;border-radius:99px;font-size:2.9cqw;font-weight:700}
.gp-tags b,.gp-tags em{flex:1;text-align:center;padding:1.6cqw 0;border-radius:99px;font-style:normal;font-family:var(--sans)}
.gp-tags b{background:#ffd600;color:#000}.gp-tags em{opacity:.8}
.gp-photo .gp-view{object-position:50% 50%;transform:scale(1.15);animation:none}
.gp-card{background:radial-gradient(120% 60% at 20% 0,#0f2b3d,#000 60%)}
.gp-thumb{left:6%;right:6%;top:13.5%;height:20%;border-radius:5cqw;overflow:hidden;border:1px solid #ffffff3d}
.gp-thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 34%;transform:scale(2.3)}
.gp-thumb span{position:absolute;left:3cqw;bottom:2.4cqw;padding:1cqw 2.4cqw;border-radius:99px;background:#000a;font-size:2.8cqw;font-weight:600}
.gp-glass{left:6%;right:6%;top:36%;padding:3.4cqw 4cqw 2cqw;border-radius:5.5cqw}
.gp-glass small{display:block;font-size:2.5cqw;font-weight:700;letter-spacing:.16em;color:#ffd600;margin-bottom:1.6cqw}
.gp-glass p{position:relative;display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2cqw;margin:0;padding:1.9cqw 6cqw 1.9cqw 0;border-top:1px solid #ffffff1f;font-size:2.5cqw;letter-spacing:.1em;color:#a7b4bf}
.gp-glass p b{font-size:3.5cqw;letter-spacing:0;color:#f5f7fb;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.gp-glass p i{position:absolute;right:0;top:50%;width:3.6cqw;height:3.6cqw;translate:0 -50%;border-radius:50%;background:#00e676;box-shadow:0 0 10px #00e67699}
.gp-glass p i:after{content:"";position:absolute;left:30%;top:22%;width:28%;height:46%;border:solid #00210f;border-width:0 .5cqw .5cqw 0;rotate:45deg}
.gp-cta{z-index:2;left:6%;right:6%;bottom:18.5%;padding:3.2cqw 0;border-radius:99px;background:linear-gradient(180deg,#ffe24d,#ffd600);color:#000;font-size:3.6cqw;font-weight:700;text-align:center;box-shadow:0 10px 30px -8px #ffd60088,inset 0 1px 0 #fff9}
@media(prefers-reduced-motion:reduce){.gp .gp-view,.gp-frame u{animation:none}}
.gp .gp-view{transform:scale(1.08);animation-name:gpdrift2}
@keyframes gpdrift2{from{transform:scale(1.06) translate(-1%,.6%)}to{transform:scale(1.14) translate(1%,-1%)}}
.gp-photo .gp-view{transform:scale(1.15);animation:none}
.gp-frame{left:17%;right:17%;top:25%;bottom:31%}
.gp-glass p{font-size:2.8cqw}.gp-glass p b{font-size:3.9cqw}
.gp-thumb img{transform:scale(1.9);object-position:50% 40%}
.fx-snaps .filed{opacity:0;transform:translateY(8px);top:auto;bottom:25svh}
.fx-snaps .filed.show{opacity:1;transform:none}
@media(max-width:820px){.fx-snaps .filed{top:auto;bottom:27svh}}

/* ── the rest of the app in liquid glass ── */
.shot .gp{position:relative;width:58%;aspect-ratio:9/16.5;border-radius:20px 20px 0 0;border:5px solid #0b0d0e;border-bottom:0;overflow:hidden;box-shadow:0 -20px 60px -20px #000a;transform:translateY(calc(8% + var(--f,0)*-12%))}
.gp-live{background:radial-gradient(130% 55% at 15% 0,#12303f,#000 62%)}
.gp-live>*,.gp-oem>*{position:absolute;left:5%;right:5%}
.gl-head{top:8%;display:flex;gap:1.6cqw;height:8%}
.gl-t,.gl-dial,.gl-tile,.gl-health,.gl-air,.gl-chips,.gl-circ,.gl-list li,.gl-split span,.gl-delta{background:linear-gradient(145deg,#ffffff24,#ffffff08 50%,#ffffff14);border:1px solid #ffffff33;box-shadow:inset 0 1px 0 #ffffff4d,inset 0 -1px 0 #00000059,0 8px 24px -10px #000}
.gl-t{flex:1;border-radius:3.6cqw;padding:1.2cqw 2.6cqw;display:flex;flex-direction:column;justify-content:center;line-height:1.15}
.gl-t b{font-size:3.3cqw}.gl-t em{font-family:var(--sans);font-style:normal;font-size:2.3cqw;color:#a7b4bf}
.gl-t.r{flex:0 0 24%;align-items:center}.gl-t.moon{flex:0 0 12%;background:radial-gradient(circle at 50% 50%,#fff 0 18%,transparent 19%),linear-gradient(145deg,#ffffff24,#ffffff08)}
.gl-row{display:grid;grid-template-columns:1fr 1fr;gap:2.4cqw}
.gl-row:nth-of-type(2){top:18%;height:33%}
.gl-dial{position:relative;border-radius:5cqw;display:grid;place-items:center;align-content:center;overflow:hidden}
.gl-dial small{position:absolute;left:3.4cqw;top:2.6cqw;font-size:3cqw;font-weight:700}
.gl-dial svg{position:absolute;inset:8% 6% 2%;width:88%;height:90%;rotate:135deg}
.gl-dial circle{fill:none;stroke-width:5;stroke-linecap:round}
.gl-dial .trk{stroke:#ffffff1f}
.gl-dial.lo .val{stroke:#65b5f4;filter:drop-shadow(0 0 4px #007aff)}.gl-dial.hi .val{stroke:#f08f83;filter:drop-shadow(0 0 4px #ff3b30)}
.gl-dial b{position:relative;font-size:11cqw;font-weight:700;letter-spacing:-.04em;line-height:1;margin-top:5cqw;font-variant-numeric:tabular-nums}
.gl-dial em{position:relative;font-family:var(--sans);font-style:normal;font-size:2.5cqw;color:#a7b4bf}
.gl-dial span{position:relative;font-size:3cqw;font-weight:600;margin-top:1cqw}
.gl-dial.lo span{color:#65b5f4}.gl-dial.hi span{color:#f08f83}
.gl-health{top:53%;height:6.5%;border-radius:4cqw;display:flex;align-items:center;gap:2.4cqw;padding:0 3cqw;font-size:2.4cqw;color:#a7b4bf}
.gl-health b{font-size:4.6cqw;color:#00e676}
.gl-health i{flex:1;height:38%;border-radius:99px;background:repeating-linear-gradient(90deg,#00e676 0 2.2cqw,transparent 2.2cqw 3cqw);opacity:.9;box-shadow:0 0 12px #00e67655}
.gl-row:nth-of-type(4){top:61.5%;height:15%}
.gl-tile{position:relative;border-radius:5cqw;padding:2.4cqw 3.2cqw;display:flex;flex-wrap:wrap;align-items:baseline;align-content:center;column-gap:1cqw}
.gl-tile small{flex:0 0 100%;font-size:2.6cqw;font-weight:700;color:#a7b4bf;letter-spacing:.08em}
.gl-tile b{font-size:8cqw;font-weight:700;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums}
.gl-tile em{font-family:var(--sans);font-style:normal;font-size:3cqw;color:#a7b4bf}
.gl-tile span{flex:0 0 100%;font-size:2.3cqw;color:#a7b4bf}
.gl-tile.lo b{color:#65b5f4}.gl-tile.hi b{color:#f08f83}
.gl-tile.big{padding:3cqw 3.4cqw}.gl-tile.big b{font-size:10cqw}
.gl-air{top:53%;height:10%;border-radius:5cqw;display:grid;grid-template-columns:1fr 1.1fr 1fr;align-items:center;text-align:center}
.gl-air small{display:block;font-size:2.2cqw;font-weight:700;letter-spacing:.1em;color:#a7b4bf}
.gl-air b{font-size:5.4cqw;font-weight:700}.gl-air .lo b{color:#65b5f4}.gl-air .hi b{color:#f08f83}
.gl-air .mid{border-inline:1px solid #ffffff26}.gl-air .mid b{font-size:6.6cqw}
.gp-live:has(.gl-air) .gl-row:nth-of-type(4){top:65.5%;height:13%}
.gl-split{top:9%;height:40%;display:grid;grid-template-columns:1fr 1fr;gap:2.4cqw;background:none;border:0;box-shadow:none}
.gl-split span{border-radius:6cqw;display:grid;place-content:center;text-align:center}
.gl-split small,.gl-delta small{font-size:2.6cqw;font-weight:700;letter-spacing:.14em;color:#a7b4bf}
.gl-split b{font-size:13cqw;font-weight:700;letter-spacing:-.04em;line-height:1}
.gl-split em,.gl-delta em{font-family:var(--sans);font-style:normal;font-size:3.4cqw;color:#a7b4bf}
.gl-split .lo{background:linear-gradient(160deg,#007aff66,#007aff14)}.gl-split .hi{background:linear-gradient(160deg,#ff3b3066,#ff3b3014)}
.gl-delta{top:51.5%;height:24%;border-radius:6cqw;display:grid;place-content:center;text-align:center}
.gl-delta b{font-size:17cqw;font-weight:700;letter-spacing:-.05em;line-height:1}
.gl-chips{top:8%;height:8%;border-radius:99px;display:flex;gap:1cqw;padding:1cqw;font-size:2.3cqw;font-weight:700}
.gl-chips b,.gl-chips em{flex:1 1 auto;display:grid;place-items:center;border-radius:99px;font-family:var(--sans);font-style:normal;white-space:nowrap;padding:0 1.6cqw}
.gl-chips b{background:#fff;color:#000}.gl-chips em{color:#a7b4bf}
.gl-circ{top:18%;height:9%;border-radius:4.5cqw;display:flex;align-items:center;justify-content:space-between;padding:0 3cqw;font-size:2.3cqw;letter-spacing:.12em;color:#a7b4bf}
.gl-circ span{display:flex;gap:1.4cqw}
.gl-circ b,.gl-circ em{width:8cqw;height:6.4cqw;border-radius:2.4cqw;display:grid;place-items:center;font-family:var(--sans);font-style:normal;font-size:3cqw;font-weight:700;letter-spacing:0;border:1px solid #ffffff33}
.gl-circ b{background:#ffd600;color:#000;border-color:#ffd600}
.gp-live:has(.gl-circ) .gl-row{top:29%;height:33%}
.gl-title{top:8%;display:flex;justify-content:space-between;align-items:baseline;font-size:5cqw;font-weight:700}
.gl-title span{font-size:2.6cqw;font-weight:600;color:#a7b4bf}.gl-title span b{color:#ffd600}
.gl-list{top:15%;margin:0;padding:0;list-style:none;display:grid;gap:1.5cqw}
.gl-list li{border-radius:3.6cqw;padding:2.5cqw 3cqw;display:flex;align-items:center;gap:2.4cqw;font-size:3.1cqw;font-weight:600}
.gl-list li i{width:3cqw;height:2.4cqw;background:repeating-linear-gradient(180deg,#a7b4bf 0 1px,transparent 1px 3px);opacity:.7}
.gl-list li u{margin-left:auto;width:8cqw;height:4.4cqw;border-radius:99px;background:#ffffff26;position:relative}
.gl-list li u:after{content:"";position:absolute;left:.5cqw;top:.5cqw;width:3.4cqw;height:3.4cqw;border-radius:50%;background:#fff}
.gl-list li u.on{background:#00e676}.gl-list li u.on:after{left:auto;right:.5cqw}
.gl-list.probes li i{width:2.6cqw;height:2.6cqw;border-radius:50%;background:#00e676;box-shadow:0 0 10px #00e676;opacity:1}
.gl-list.probes li em{margin-left:auto;font-family:var(--sans);font-style:normal;font-size:2.5cqw;color:#a7b4bf}
.gp-analog .gp-view{object-position:58% 40%;transform:scale(1.5);animation:none}
.gp-analog .gp-frame{top:17%;bottom:46%}
.gp-glass.dials{top:55%}
.gp-analog .gp-cta{bottom:18%}
.gp-oem{background:#f5f8fc;color:#101d36}
.oem-head{top:9%;padding:4cqw;border-radius:5cqw;background:linear-gradient(150deg,#0069f7,#0a4fd0);color:#fff;box-shadow:0 14px 30px -14px #0069f7}
.oem-head small{display:block;font-size:2.4cqw;font-weight:700;letter-spacing:.16em;opacity:.8}
.oem-head b{display:block;font-size:6.4cqw;line-height:1.1;margin:1cqw 0}.oem-head em{font-family:var(--sans);font-style:normal;font-size:2.9cqw;opacity:.9}
.oem-cols{top:31%;display:grid;grid-template-columns:1.25fr 1fr 1fr;padding:0 6cqw 0 0;font-size:2.1cqw;font-weight:700;letter-spacing:.1em;color:#415572}
.gp-oem p{margin:0;display:grid;grid-template-columns:1.25fr 1fr 1fr;align-items:center;padding:2.6cqw 6cqw 2.6cqw 3cqw;border-radius:3.4cqw;background:#fff;border:1px solid #dce5f0;font-size:2.6cqw;color:#415572}
.gp-oem p b{font-size:2.9cqw;color:#101d36;font-weight:700}
.gp-oem p i{position:absolute;right:2cqw;top:50%;width:3.4cqw;height:3.4cqw;translate:0 -50%;border-radius:50%;background:#137a53}
.gp-oem p:nth-of-type(1){top:35%}.gp-oem p:nth-of-type(2){top:44.2%}.gp-oem p:nth-of-type(3){top:53.4%}.gp-oem p:nth-of-type(4){top:62.6%}.gp-oem p:nth-of-type(5){top:71.8%}
.oem-foot{top:83%;padding:2.8cqw;border-radius:99px;background:#e7f6ee;color:#137a53;font-size:3cqw;font-weight:700;text-align:center}
.gl-tile.big{font-family:var(--sans);font-size:inherit;line-height:1.2;letter-spacing:0;align-content:center;row-gap:1cqw}
.gl-tile.big b{font-size:13cqw}.gl-tile.big em{font-size:3.6cqw}.gl-tile.big small{font-size:2.5cqw;color:#ffd600;letter-spacing:.14em}.gl-tile.big span{font-size:2.4cqw}

/* ── the film ── */
.film-card,.film-wide{all:unset;box-sizing:border-box;cursor:pointer;display:block;position:relative;overflow:hidden;border-radius:6px;isolation:isolate;box-shadow:0 30px 70px -30px #000d,0 0 0 1px #f4efe140}
.film-card{position:absolute;z-index:3;left:calc(var(--rail) + var(--gut));top:calc(60px + 4svh + 7.2em);width:min(30vw,420px);aspect-ratio:16/9;--t:clamp(0,(var(--h) - .26)*5,1);opacity:calc(var(--t)*min(1,(1 - var(--h))*14));transform:translateY(calc((1 - var(--t))*30px)) scale(calc(.94 + var(--t)*.06));transform-origin:0 0;transition:box-shadow .3s}
.film-card video,.film-wide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.1,1)}
.film-card:hover video,.film-wide:hover img{transform:scale(1.05)}
.film-card:after,.film-wide:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#06181b00 45%,#06181bd9 100%);z-index:1}
.film-play{position:absolute;z-index:2;left:50%;top:46%;width:64px;height:64px;translate:-50% -50%;border-radius:50%;background:linear-gradient(135deg,#ffffff4d,#ffffff14);border:1px solid #ffffff80;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 #fff9,0 0 0 0 #e9b96a66;animation:ring 2.4s ease-out infinite;transition:scale .3s}
.film-play:after{content:"";position:absolute;left:54%;top:50%;translate:-50% -50%;border-left:17px solid #fff;border-block:11px solid transparent}
.film-card:hover .film-play,.film-wide:hover .film-play{scale:1.12}
@keyframes ring{0%{box-shadow:inset 0 1px 0 #fff9,0 0 0 0 #e9b96a80}100%{box-shadow:inset 0 1px 0 #fff9,0 0 0 26px #e9b96a00}}
.film-meta{position:absolute;z-index:2;left:16px;right:16px;bottom:13px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;color:var(--cream)}
.film-meta b{font-size:14px;font-weight:700}.film-meta em{font-family:var(--sans);font-style:normal;font-size:12px;opacity:.85}
.film-card:focus-visible,.film-wide:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.film-wide{width:100%;aspect-ratio:21/9;margin-bottom:clamp(14px,1.6vw,22px)}
.film-wide .film-play{width:92px;height:92px}.film-wide .film-play:after{border-left-width:24px;border-block-width:15px}
.film-wide .film-meta{left:24px;right:24px;bottom:20px;display:block}
.film-wide .film-meta b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.4vw,68px);line-height:1}
.film-wide .film-meta em{display:block;font-size:clamp(13px,1.1vw,16px);margin-top:8px}
.theater{border:0;padding:0;margin:auto;width:min(94vw,calc(86svh*16/9));max-width:none;max-height:none;background:none;overflow:visible}
.theater::backdrop{background:#020b0de6;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:fadein .5s ease both}
@keyframes fadein{from{opacity:0}}
.theater video{display:block;width:100%;aspect-ratio:16/9;background:#000;border-radius:6px;box-shadow:0 50px 120px -30px #000}
.theater-x{all:unset;cursor:pointer;position:absolute;right:0;top:-44px;padding:8px 14px;border-radius:99px;color:var(--cream);font-size:13px;font-weight:600;border:1px solid #f4efe155}
.theater-x:hover{background:var(--cream);color:var(--night)}
.theater-x:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(max-width:820px){
  .film-card{top:auto;bottom:34svh;width:min(64vw,300px)}
  .film-play{width:50px;height:50px}.film-play:after{border-left-width:13px;border-block-width:9px}
  .film-wide{aspect-ratio:16/10}.film-wide .film-play{width:66px;height:66px}
  .theater{width:96vw}
}
@media(prefers-reduced-motion:reduce){.film-play{animation:none}.film-card{opacity:1;transform:none}}