/* Pan0rama Labs: tokens, base, type, shared components */
:root{
  --jet:#0B0C0F; --graphite:#1A1D23; --steel:#3A3F47; --silver:#8A8F98; --platinum:#D6D9DE; --mist:#F5F6F8; --white:#FFFFFF;
  --surface-1:#0E1013; --surface-2:#121419; --surface-3:#1A1D23;
  --ink-1:var(--mist); --ink-2:var(--platinum); --ink-3:var(--silver);
  --line-1:rgba(214,217,222,.08); --line-2:rgba(214,217,222,.14); --line-3:rgba(214,217,222,.28);
  --glow:205 218 255;
  --chrome:linear-gradient(180deg,#FFFFFF 0%,#D6D9DE 58%,#B4B9C1 100%);
  --chrome-text:linear-gradient(180deg,#F5F6F8 0%,#D6D9DE 40%,#8A8F98 56%,#5B616B 62%,#A9AEB6 78%,#F5F6F8 100%);
  --sheen-layer:linear-gradient(100deg,transparent 0 38%,rgba(255,255,255,.95) 47%,rgba(255,255,255,0) 56%);
  --font-display:"Sora",ui-sans-serif,system-ui,sans-serif;
  --font-ui:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-ui:cubic-bezier(.33,1,.68,1); --ease-inout:cubic-bezier(.45,0,.55,1);
  --ease-scene:cubic-bezier(.87,0,.13,1); --ease-snap:cubic-bezier(.34,1.56,.64,1);
  --r-panel:22px; --r-card:14px; --r-input:14px; --r-thumb:8px; --r-pill:999px;
  --margin:clamp(20px,4.5vw,72px); --gutter:clamp(12px,1.6vw,24px); --maxw:1360px;
  --edge:max(var(--margin),calc((100% - var(--maxw)) / 2));
  --section-y:clamp(112px,16vh,200px); --nav-h:64px;
}
@media (max-width:767px){ :root{ --nav-h:56px } }

*,*::before,*::after{box-sizing:border-box}
html{background:var(--jet);color-scheme:dark;-webkit-text-size-adjust:100%;text-size-adjust:100%}
main,.finale{overflow-x:clip}
body{margin:0;min-height:100%;background:var(--jet);color:var(--ink-1);font:400 16px/1.6 var(--font-ui);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,svg,canvas,video{display:block;max-width:100%}
a{color:inherit}
button,input{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--platinum);color:var(--jet)}
:focus-visible{outline:2px solid var(--mist);outline-offset:3px}
section[tabindex="-1"]:focus{outline:none}   /* in-page link targets take programmatic focus; they are not controls */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* Pre-intro: hidden only while JS is alive (failsafe timer in <head> removes the class). */
html.intro-pending [data-intro]{opacity:0}

.skip{position:fixed;z-index:60;left:var(--margin);top:10px;padding:10px 16px;border-radius:var(--r-pill);background:var(--mist);color:var(--jet);
  font:600 14px/1 var(--font-ui);text-decoration:none;transform:translateY(-160%);transition:transform .25s var(--ease-ui)}
.skip:focus{transform:none}

.wrap{width:min(100% - 2 * var(--margin),var(--maxw));margin-inline:auto}

/* Type */
.display{font:600 clamp(44px,6.2vw,108px)/.98 var(--font-display);letter-spacing:-.038em;max-width:11.5ch}
.h2{font:600 clamp(32px,4.2vw,64px)/1.04 var(--font-display);letter-spacing:-.03em;max-width:18ch}
.h3{font:600 clamp(22px,2.1vw,32px)/1.15 var(--font-display);letter-spacing:-.018em}
.lead{font:400 clamp(17px,1.3vw,20px)/1.5 var(--font-ui);letter-spacing:-.006em;color:var(--silver);max-width:46ch}
.body{font-size:16px;line-height:1.6;color:var(--silver);max-width:60ch}
.tc{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap}
.tagline{font:400 clamp(11px,.85vw,13px)/1.6 var(--font-ui);letter-spacing:.42em;text-transform:uppercase;color:var(--platinum)}
.eyebrow{display:flex;align-items:center;gap:10px;font:500 14px/1.3 var(--font-ui);letter-spacing:-.003em;color:var(--silver)}
.eyebrow::before{content:"";flex:none;width:9px;height:10px;background:var(--chrome);clip-path:polygon(0 0,100% 0,100% 58%,50% 100%,0 58%)}
.ln-mask{padding:.04em 0 .14em;margin:-.04em 0 -.14em}

/* Chrome text: sheen layer over the chrome gradient, clipped to the glyphs */
.chrome{background-image:var(--sheen-layer),var(--chrome-text);background-size:260% 100%,100% 100%;background-repeat:no-repeat;
  background-position:calc(var(--sheen,120%) + var(--sheen-offset,0%)) 0,0 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* Brand */
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--mist);text-decoration:none;font:600 17px/1 var(--font-display);letter-spacing:-.012em;white-space:nowrap;
  font-feature-settings:"tnum"} /* Sora's tabular zero is narrow, so "Pan0rama" reads with a zero, never a letter O */
.brand svg{width:24px;height:24px;flex:none}
.brand .labs{font-weight:300;color:var(--platinum);margin-left:.28em}

/* Icons: 24px line set, inherited stroke so <use> symbols can draw in */
.ic{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* Buttons */
.btn{--h:48px;position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:var(--h);padding:0 22px;border:0;border-radius:var(--r-pill);font:600 15px/1 var(--font-ui);letter-spacing:-.003em;
  text-decoration:none;white-space:nowrap;cursor:pointer;transition:box-shadow .35s var(--ease-ui),background-color .3s,transform .12s}
.btn .lbl{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--chrome);color:var(--jet);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(0,0,0,.2),0 8px 24px -10px rgb(var(--glow)/.35)}
.btn-primary::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--sheen-layer);
  background-size:260% 100%;background-repeat:no-repeat;background-position:130% 0;opacity:.6}
.btn-primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(0,0,0,.2),0 10px 32px -10px rgb(var(--glow)/.55)}
.btn-primary:hover::after{animation:sheen .9s var(--ease-inout) both}
.btn-ghost{background:rgba(26,29,35,.5);color:var(--mist);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 0 0 1px rgba(214,217,222,.18)}
.btn-ghost:hover{background:rgba(35,39,46,.6);box-shadow:inset 0 0 0 1px rgba(214,217,222,.32)}
.btn-sm{--h:36px;padding:0 16px;font-size:13px}
.btn:focus-visible{outline:2px solid var(--mist);outline-offset:3px}
@keyframes sheen{from{background-position:130% 0}to{background-position:-30% 0}}

/* Chips */
.chip{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px 0 10px;border-radius:var(--r-pill);
  font:500 13px/1 var(--font-ui);color:var(--platinum);background:rgba(255,255,255,.035);border:1px solid var(--line-2);white-space:nowrap}
.chip .ic{width:14px;height:14px;color:var(--silver)}
.chip .hint{color:var(--silver);font-weight:400}
.status{height:26px;gap:8px;padding:0 11px 0 10px;font-size:12px;color:var(--platinum)}
.status .dot{width:6px;height:6px;border-radius:50%;background:var(--mist);animation:breathe 1.6s ease-in-out infinite alternate}
@keyframes breathe{from{opacity:.35}to{opacity:1}}
.concept{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--r-pill);border:1px dashed rgba(214,217,222,.35);
  font:500 11px/1 var(--font-ui);letter-spacing:.02em;color:var(--silver);white-space:nowrap}

/* Nav */
.nav{position:fixed;z-index:40;top:0;left:0;right:0;height:var(--nav-h);padding-inline:var(--edge);display:flex;align-items:center;gap:24px;
  border-bottom:1px solid transparent;transition:background-color .3s,border-color .3s,-webkit-backdrop-filter .3s,backdrop-filter .3s}
.nav.is-scrolled{background:rgba(11,12,15,.55);-webkit-backdrop-filter:saturate(140%) blur(16px);backdrop-filter:saturate(140%) blur(16px);border-bottom-color:var(--line-1)}
.nav-links{display:flex;align-items:center;gap:clamp(18px,2.2vw,32px);margin-left:auto}
.nav-links a{font:500 14px/1 var(--font-ui);color:var(--silver);text-decoration:none;transition:color .2s;padding:8px 0}
.nav-links a:hover{color:var(--mist)}
.nav .btn-sm{margin-left:8px}
@media (max-width:899px){ .nav-links{display:none} .nav .btn-sm{margin-left:auto} }
/* Touch: 44px targets without moving anything (text links get an invisible hit area) */
@media (pointer:coarse){
  .btn-sm{--h:44px}
  .brand,.foot-links a,a.src{position:relative}
  .brand::after,.foot-links a::after,a.src::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
}

/* Film grain (static, normal blending; background set from JS) */
.grain{position:fixed;inset:0;z-index:50;pointer-events:none;background-size:160px 160px}

/* HUD timecode (desktop only) */
.hud{position:fixed;z-index:41;left:var(--edge);bottom:22px;display:flex;align-items:center;gap:12px;pointer-events:none;
  font:500 12px/1 var(--font-mono);font-variant-numeric:tabular-nums;color:rgba(138,143,152,.7)}
.hud .trk{position:relative;width:72px;height:1px;background:var(--line-2)}
.hud .ph{position:absolute;left:0;top:-3px;width:1px;height:7px;background:var(--mist)}
.hud > *{transition:opacity .25s}
.hud.is-off > *{opacity:0}   /* set from main.js while content crosses the HUD's corner */
@media (max-width:1023px),(hover:none){ .hud{display:none} }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .status .dot{opacity:1}
}