/* exocortex: a quiet product page. One typeface, near-white ground, black type, thin rules; media floats unframed. */
:root{
  --bg:#ffffff; --bg2:#f5f5f3; --ink:#111111; --ink2:#3a3a3a; --muted:#7a7873; --line:#e6e5e0;
  --ok:#2b8a56; --warn:#b07300; --bad:#b3261e;
  --f:"Inter Tight",system-ui,-apple-system,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:64px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--f);-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
img{max-width:100%;display:block}
h1,h2,h3{font-weight:500;letter-spacing:-.035em;line-height:1.02;margin:0;text-wrap:balance}
p{margin:0 0 14px;max-width:62ch}
main{display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}

/* nav */
.top{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.6) blur(14px)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:56px}
.brand{font-weight:600;font-size:17px;letter-spacing:-.02em;text-decoration:none}
.top nav{display:flex;align-items:center;gap:26px;font-size:14px}
.top nav a{text-decoration:none;color:var(--ink2)}
.top nav a:hover,.top nav a[aria-current]{color:var(--ink)}
.top nav a.buy{background:var(--ink);color:#fff;padding:7px 15px;border-radius:999px}

/* buttons */
.cta{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;font-weight:500;font-size:16px;padding:12px 22px;border-radius:999px}
.btn:hover{background:#333}
.link{text-decoration:none;font-weight:500}
.link::after{content:" →"}

/* hero */
.hero{background:var(--bg2);position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;min-height:calc(100vh - 56px);gap:24px}
.hero h1{font-size:clamp(56px,9vw,128px);letter-spacing:-.055em}
.hero .sub{font-size:clamp(20px,2vw,26px);line-height:1.3;color:var(--ink2);max-width:22ch;margin-top:18px;letter-spacing:-.015em}
.hero .status{font-size:13px;color:var(--muted);margin-top:34px}
.stage{position:relative;height:min(82vh,820px);min-height:420px}
.stage canvas{width:100%;height:100%;display:block;touch-action:pan-y;outline:none}
.modes{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:2px;background:rgba(255,255,255,.8);
  backdrop-filter:blur(10px);border-radius:999px;padding:4px;box-shadow:0 6px 24px rgba(0,0,0,.06)}
.modes button{font:500 14px var(--f);border:0;background:transparent;color:var(--muted);padding:8px 16px;border-radius:999px;cursor:pointer}
.modes button[aria-pressed=true]{background:var(--ink);color:#fff}
.nogl{position:absolute;inset:0;display:grid;place-items:center}
.nogl img{max-height:80%}

/* statement + numbers */
.statement{padding:140px 0 110px}
.statement h2{font-size:clamp(34px,4.6vw,64px);max-width:20ch;color:var(--ink)}
.statement h2 span{color:var(--muted)}
.nums{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px;margin-top:90px;border-top:1px solid var(--line);padding-top:28px}
.nums b{display:block;font-weight:500;font-size:clamp(30px,3.4vw,48px);letter-spacing:-.04em;line-height:1}
.nums span{display:block;color:var(--muted);font-size:14px;margin-top:10px;max-width:18ch}

/* sections */
.sec{padding:120px 0}
.sec.alt{background:var(--bg2)}
.sec h2{font-size:clamp(36px,5vw,68px);max-width:16ch}
.sec .lead{font-size:clamp(18px,1.6vw,21px);color:var(--ink2);max-width:46ch;margin-top:22px;line-height:1.45}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:64px;align-items:center}
.split.rev>:first-child{order:2}
.float{mix-blend-mode:multiply}
.figure-frame{width:100%;height:min(86vh,860px);border:0;display:block;background:transparent;margin-top:40px}
.center{text-align:center}.center h2,.center .lead{margin-left:auto;margin-right:auto}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:70px}
.facts h3{font-size:22px;letter-spacing:-.02em;margin-bottom:10px}
.facts p{color:var(--ink2);font-size:16px}

/* build band */
.band{padding:120px 0;border-top:1px solid var(--line)}
.band .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:56px;border-top:1px solid var(--line)}
.band .grid a{display:block;text-decoration:none;padding:28px 28px 28px 0;border-bottom:1px solid var(--line)}
.band .grid a+a{padding-left:28px;border-left:1px solid var(--line)}
.band .grid b{display:block;font-weight:500;font-size:24px;letter-spacing:-.02em}
.band .grid span{display:block;color:var(--muted);font-size:15px;margin-top:6px}
.band .grid a:hover b::after{content:" →"}

/* secondary pages */
.pagehead{padding:96px 0 40px}
.pagehead h1{font-size:clamp(44px,6.5vw,88px)}
.pagehead .lead{font-size:clamp(18px,1.6vw,21px);color:var(--ink2);max-width:52ch;margin-top:20px}
.note,.small{color:var(--muted);font-size:14px}
.toc{display:flex;gap:22px;flex-wrap:wrap;margin-top:34px;font-size:14px}
.toc a{text-decoration:none;color:var(--ink2);border-bottom:1px solid var(--line);padding-bottom:2px}
.toc a:hover{color:var(--ink);border-color:var(--ink)}
.page section{padding:64px 0;border-top:1px solid var(--line)}
.page section h2{font-size:clamp(28px,3.2vw,40px);margin-bottom:18px}
.page h3{font-size:19px;letter-spacing:-.015em;margin:36px 0 12px}

.tw{overflow-x:auto;margin:16px 0 8px}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:500;color:var(--muted);font-size:13px}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td a{text-decoration:none;border-bottom:1px solid var(--line)}
.pill{font-size:13px;font-weight:500;white-space:nowrap}
.pill::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;background:currentColor;vertical-align:1px}
.pill.ok{color:var(--ok)}.pill.warn{color:var(--warn)}.pill.bad{color:var(--bad)}

.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin:22px 0 30px;border-top:1px solid var(--line);padding-top:22px}
.card .k{display:block;font-size:13px;color:var(--muted)}.card b{display:block;font-weight:500;font-size:34px;letter-spacing:-.04em;margin:6px 0 4px}
.card .d{font-size:13px;color:var(--muted)}
.steps{list-style:none;padding:0;margin:10px 0;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:56px 1fr;padding:18px 0;border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s,decimal-leading-zero);color:var(--muted);font-variant-numeric:tabular-nums;grid-row:span 2}
.steps li b{font-weight:500}.steps li span{color:var(--muted);font-size:15px}
.plain{padding-left:20px;display:grid;gap:8px;max-width:78ch;color:var(--ink2)}

.parts{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:36px 28px;margin-top:20px}
.part{margin:0}
.stl{aspect-ratio:4/3;background:var(--bg2);border-radius:14px;display:grid;place-items:center;position:relative;overflow:hidden}
.stl canvas{width:100%;height:100%;display:block;touch-action:none}
.stl .msg{position:absolute;inset:auto 10px 10px;font-size:12px;color:var(--muted);text-align:center}
.load{font:500 14px var(--f);padding:9px 16px;border:0;border-radius:999px;background:#fff;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.part figcaption{padding:12px 2px;display:grid;gap:2px;font-size:15px}
.part figcaption span{font-size:13px;color:var(--muted)}
.part .dl a{font-size:13px;text-decoration:none;border-bottom:1px solid var(--line)}
.boards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:40px}
.board h3{margin-top:8px}.board h3 span{color:var(--muted);font-weight:400}
.files{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.files li{display:flex;gap:12px;flex-wrap:wrap;align-items:baseline;font-size:15px}
.files a{font-family:var(--mono);font-size:13px;text-decoration:none;border-bottom:1px solid var(--line)}
.files span{font-size:13px;color:var(--muted)}
.files.cols{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));margin-top:18px}
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:40px;margin-top:24px}
figure{margin:0}
.figs img,.wide img{mix-blend-mode:multiply}
.figs figcaption,.wide figcaption{font-size:13px;color:var(--muted);margin-top:10px;max-width:60ch}
.studies{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:0 28px;margin-top:10px}
.study{display:block;padding:20px 0;border-bottom:1px solid var(--line);text-decoration:none}
.study b{display:block;font-weight:500;font-size:19px;letter-spacing:-.015em}.study span{display:block;font-size:14px;color:var(--muted);margin-top:4px}
.study:hover b::after{content:" →"}

.docs{display:grid;grid-template-columns:200px minmax(0,1fr);gap:56px;padding:56px 0 96px}
.docs aside{position:sticky;top:80px;align-self:start;display:grid;gap:4px;font-size:14px}
.docs aside a{text-decoration:none;color:var(--ink2);padding:3px 0}
.docs aside a:hover{color:var(--ink)}
.md{min-width:0;max-width:860px;font-size:16px}
.md h1{font-size:clamp(34px,4.4vw,54px);margin-bottom:24px}.md h2{font-size:28px;margin:44px 0 12px}.md h3{font-size:20px;margin:30px 0 10px}
.md table{display:block;overflow-x:auto;margin:16px 0}
.md img{margin:16px 0;mix-blend-mode:multiply}
.md pre{background:var(--bg2);padding:16px 18px;border-radius:12px;overflow-x:auto;font:13px/1.5 var(--mono)}
.md code{font:.88em var(--mono);background:var(--bg2);padding:1px 5px;border-radius:5px}
.md pre code{background:none;padding:0}
.md blockquote{margin:16px 0;padding:2px 18px;border-left:2px solid var(--ink);color:var(--ink2)}
.eyebrow{font-size:13px;color:var(--muted);margin-bottom:14px}

.foot{border-top:1px solid var(--line);padding:36px 0 48px;color:var(--muted);font-size:13px}
.foot .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

@media (max-width:900px){
  .hero .wrap,.split{grid-template-columns:minmax(0,1fr)}
  .hero .wrap{min-height:auto;padding-top:48px}
  .stage{height:70vh}
  .split.rev>:first-child{order:0}
  .nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts,.band .grid,.cards{grid-template-columns:minmax(0,1fr)}
  .band .grid a+a{padding-left:0;border-left:0}
  .docs{grid-template-columns:minmax(0,1fr)}
  .docs aside{position:static;display:flex;flex-wrap:wrap;gap:6px 16px}
  .sec,.statement{padding:80px 0}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .top nav{gap:14px;font-size:13px}
  .top nav a:not(.buy):nth-child(4){display:none}
}

/* ---- the studio look: a warm grey sweep with fine grain, as a path-traced render has, on every page */
:root{--bg:#ecebe8;--bg2:#e4e2de;--line:#d6d4cf}
body{background:radial-gradient(120% 80% at 50% 0%,#f3f2ef 0%,#e9e8e4 55%,#dedcd7 100%) fixed}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.top{background:color-mix(in srgb,#efeeeb 78%,transparent)}
.sec.alt,.hero{background:transparent}
.figs img,.wide img,.md img,.float{mix-blend-mode:multiply}

/* ---- the scroll-driven exploded view */
.explode{height:620vh;position:relative}
.explode .pin{position:sticky;top:0;height:100vh;overflow:hidden}
.stage3d{position:absolute;inset:0}
.stage3d canvas{width:100%;height:100%;display:block;outline:none;touch-action:pan-y}
.labels{position:absolute;inset:0;pointer-events:none}
.labels svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.labels line{stroke:#1a1a1a;stroke-width:1}
.labels circle{fill:#fff;stroke:#1a1a1a;stroke-width:1.2}
.tag{position:absolute;left:0;top:0;max-width:260px;transition:opacity .25s;will-change:transform}
.tag b{display:block;font-weight:500;font-size:15px;letter-spacing:-.01em;color:#111}
.tag span{display:block;font-size:12.5px;line-height:1.35;color:#5d5b56;margin-top:2px}
.intro{position:absolute;left:max(32px,calc((100vw - 1200px)/2 + 32px));top:50%;transform:translateY(-50%);max-width:440px;
  opacity:calc(1 - var(--t,0) * 14);transition:opacity .2s;pointer-events:auto}
.explode.started .intro{pointer-events:none}
.intro h1{font-size:clamp(56px,8vw,118px);letter-spacing:-.055em}
.intro .sub{font-size:clamp(19px,1.8vw,24px);line-height:1.3;color:#3a3a3a;max-width:20ch;margin-top:16px;letter-spacing:-.015em}
.scrollhint{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);font-size:13px;color:#6b6964;opacity:calc(1 - var(--t,0) * 20)}
.scrollhint::after{content:"";display:block;width:1px;height:28px;background:#6b6964;margin:10px auto 0;animation:hint 1.6s ease-in-out infinite}
@keyframes hint{0%,100%{transform:scaleY(.3);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}
.outro{position:absolute;left:50%;bottom:48px;transform:translateX(-50%);text-align:center;opacity:0;transition:opacity .4s;pointer-events:none}
.explode.done .outro{opacity:1;pointer-events:auto}
.outro p{font-size:clamp(22px,2.4vw,32px);letter-spacing:-.03em;margin:0 auto 4px;max-width:none}
.outro .cta{justify-content:center;margin-top:16px}
.progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(0,0,0,.06)}
.progress i{display:block;height:100%;width:0;background:#111}
.nogl{position:absolute;inset:0;display:grid;place-items:center;color:#6b6964}
@media (max-width:760px){.intro{top:auto;bottom:90px;transform:none;left:16px;right:16px}.tag{max-width:150px}.tag span{display:none}}

/* ---- renders: stills of the live scene, edges dissolved into the page */
.shot{margin:0}
.shot img{width:100%;display:block;-webkit-mask-image:radial-gradient(ellipse 60% 58% at 50% 50%,#000 35%,transparent 100%);mask-image:radial-gradient(ellipse 60% 58% at 50% 50%,#000 35%,transparent 100%)}
.shot figcaption{text-align:center;color:#6b6964;font-size:14px;margin-top:-10px}
.gallery{padding:40px 0 60px}
.g-row{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:24px;align-items:center;margin:40px 0}
.g-row.rev .g-text{order:2}
.g-text h2{font-size:clamp(30px,3.8vw,52px);max-width:14ch}
.g-text .lead{font-size:clamp(17px,1.5vw,20px);color:#3a3a3a;max-width:36ch;margin-top:18px;line-height:1.45}
.g-full{margin-top:60px}
.split-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;align-items:center;padding-top:40px}
.wide-shot{margin:10px 0 30px}
@media (max-width:900px){.g-row,.split-head{grid-template-columns:minmax(0,1fr)}.g-row.rev .g-text{order:0}}