/* OPTIC landing: black, white and one red, the colour of the heart. Red marks only the score and what it pumps out:
   the orb, the zone, the active engine and its wires, the live dot. Everything else is greys. */
:root{
  --bg:#000;--bg2:#0a0a0a;--card:#0d0d0d;--card2:#141414;--line:#232323;--line2:#3a3a3a;
  --text:#fff;--text2:#bdbdbd;--mute:#7a7a7a;--dim:#4a4a4a;
  --heart:#b3203a;--heart2:#d8344f;--heartGlow:rgba(179,32,58,.45);
  --sans:"Geist",system-ui,sans-serif;--mono:"Geist Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;background:var(--bg)}
body{background:var(--bg);color:var(--text);font:400 15px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
::selection{background:var(--heart);color:#fff}
.wrap{max-width:1680px;margin:0 auto;padding:0 clamp(16px,3vw,40px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.eyebrow{font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.mute{color:var(--mute)}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:30;background:rgba(0,0,0,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:60px}
.brand{display:flex;align-items:center;gap:10px;font:600 15px var(--sans);letter-spacing:.28em}
.brand svg{width:22px;height:22px}
.nav nav{display:flex;gap:28px;margin-left:auto}
.nav nav a{font:400 13px var(--sans);color:var(--text2);transition:color .2s}.nav nav a:hover,.nav nav a.on{color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 16px;border:1px solid var(--line2);border-radius:6px;font:500 13px var(--sans);color:#fff;background:transparent;cursor:pointer;transition:background .2s,border-color .2s,color .2s;white-space:nowrap}
.btn:hover{border-color:#fff}
.btn.solid{background:#fff;color:#000;border-color:#fff}.btn.solid:hover{background:var(--heart);border-color:var(--heart);color:#fff}
.ca{display:flex;gap:8px;align-items:center;height:36px;padding:0 12px;border:1px solid var(--line2);border-radius:6px;background:none;color:#fff;font:400 12px var(--mono);cursor:pointer}
.ca span{color:var(--mute)}.ca i{font-style:normal}

/* hero */
.hero{position:relative;padding:60px 0 0;height:100svh;min-height:620px;overflow:hidden;display:flex;flex-direction:column}
.hero::before{content:"";position:absolute;left:50%;top:58%;width:90vw;height:60vh;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(179,32,58,.16),transparent);pointer-events:none}
.hero>.wrap{width:100%}
.hero-head{position:relative;z-index:2;display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:end}
.hero h1{margin-top:10px;font:500 clamp(30px,3.3vw,54px)/1.04 var(--sans);letter-spacing:-.035em}
.hero h1 em{font-style:normal;color:var(--heart2)}
.hero-side p{color:var(--text2);font-size:15px;max-width:520px}
.cta{display:flex;gap:10px;margin-top:14px}
.lights{display:flex;gap:calc(.45*var(--u,1cqw))}.lights i{width:calc(.75*var(--u,1cqw));height:calc(.75*var(--u,1cqw));border-radius:50%;border:1px solid var(--line2)}.lights i:first-child{background:var(--heart);border-color:var(--heart)}
.live{display:flex;align-items:center;gap:calc(.5*var(--u,1cqw));padding:calc(.15*var(--u,1cqw)) calc(.6*var(--u,1cqw));border:1px solid var(--line2);border-radius:99px;color:#fff;text-transform:uppercase;letter-spacing:.12em;font-size:calc(.68*var(--u,1cqw))}
.pulse{width:calc(.45*var(--u,1cqw));height:calc(.45*var(--u,1cqw));border-radius:50%;background:var(--heart2);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.25}}
.led{width:calc(.55*var(--u,1cqw));height:calc(.55*var(--u,1cqw));border-radius:50%;background:var(--heart2);flex:none;animation:pulse .9s infinite}

/* the slab: one glass board tilted in space; everything on it lives in cqw so it scales as one piece */
.stage3d{position:relative;flex:1;min-height:0;margin-top:clamp(10px,1.2vw,20px);padding:0 clamp(10px,1.2vw,20px) clamp(10px,1.2vw,20px);container-type:size}
.slab{--u:min(1.1cqw,2.1cqh);position:relative;width:100%;height:100%;display:grid;grid-template-columns:24% 15% minmax(0,1fr) 19% 27%;grid-template-rows:auto minmax(0,1fr);
  border-radius:calc(1.2*var(--u));background:#070707;border:1px solid #2c2c2c;font:400 calc(.78*var(--u))/1.35 var(--sans);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 calc(4*var(--u)) calc(9*var(--u)) rgba(179,32,58,.16)}
.slab::before{content:"";position:absolute;inset:0;border-radius:inherit;background-image:radial-gradient(circle,#1c1c1c calc(.09*var(--u)),transparent calc(.11*var(--u)));background-size:calc(1.6*var(--u)) calc(1.6*var(--u));opacity:.8;pointer-events:none}
.fan{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:1}
.fan path{fill:none;stroke:#262626;stroke-width:1}
.fan path.o{stroke:#3a3a3a}
.fan path.on{stroke:var(--heart2);stroke-width:1.3;stroke-dasharray:3 4;animation:flow .8s linear infinite}
@keyframes flow{to{stroke-dashoffset:-7}}
.fan circle{fill:#fff}

.bar{position:relative;z-index:2;grid-column:1/-1;height:calc(3.2*var(--u));display:flex;align-items:center;gap:calc(1.1*var(--u));padding:0 calc(1.6*var(--u));border-bottom:1px solid #1c1c1c;font:400 calc(.74*var(--u)) var(--mono);color:var(--mute)}
.fname{color:var(--text2)}.fmeta:first-of-type{margin-left:auto}

/* left: the orb (the score) on its orbits, with the three read engines circling it */
.orbz{position:relative;z-index:2;grid-column:1;grid-row:2}
.orbits{position:absolute;left:4%;width:92%;top:50%;height:calc(calc(22*var(--u)));transform:translateY(-50%);overflow:visible}
.orbits svg{width:100%;height:100%;overflow:visible}.orbits ellipse{fill:none;stroke:#333;stroke-width:1;vector-effect:non-scaling-stroke}
.orbits ellipse:first-child{stroke:#5a1f2c}
.orb{position:absolute;left:50%;top:50%;width:calc(4.8*var(--u));height:calc(4.8*var(--u));margin:calc(-2.4*var(--u)) 0 0 calc(-2.4*var(--u));border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff 0,#ffd6dd 8%,var(--heart2) 30%,#5a0d1b 62%,#120205 100%);
  box-shadow:0 0 calc(2*var(--u)) rgba(216,52,79,.65),0 0 calc(6*var(--u)) rgba(179,32,58,.35)}
.orb i{position:absolute;inset:calc(-1.2*var(--u));border-radius:50%;border:1px solid rgba(216,52,79,.5);animation:ring 2.4s ease-out infinite}
.orb.beat{animation:beat 1.2s ease-out}
@keyframes ring{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.6);opacity:0}}
@keyframes beat{0%{transform:scale(1)}12%{transform:scale(1.14)}24%{transform:scale(1)}36%{transform:scale(1.08)}55%,100%{transform:scale(1)}}
.olbl{position:absolute;left:calc(3*var(--u));top:calc(3*var(--u));display:flex;flex-direction:column;gap:calc(.3*var(--u))}
.olbl small{font:400 calc(.72*var(--u)) var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.olbl b{font:500 calc(3.6*var(--u))/1 var(--mono);letter-spacing:-.05em}.olbl b em{font:400 calc(1*var(--u)) var(--mono);color:var(--mute);font-style:normal;margin-left:calc(.3*var(--u));letter-spacing:0}
.zone{align-self:flex-start;padding:calc(.2*var(--u)) calc(.8*var(--u));border:1px solid var(--heart2);border-radius:99px;font:500 calc(.7*var(--u)) var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--heart2)}
.zone.euphoria,.zone.panic{background:var(--heart);color:#fff}
.sat{position:absolute;display:flex;flex-direction:column;gap:calc(.1*var(--u));padding:calc(.35*var(--u)) calc(.6*var(--u));background:rgba(10,10,10,.92);border:1px solid #2e2e2e;border-radius:calc(.5*var(--u));font:400 calc(.66*var(--u)) var(--mono);white-space:nowrap;transform:translate(-50%,-50%)}
.sat b{font:500 calc(.7*var(--u)) var(--sans);color:#fff}.sat span{color:var(--text2)}
.legend{position:absolute;left:calc(1.6*var(--u));bottom:calc(1.6*var(--u));list-style:none;padding:calc(.8*var(--u)) calc(1*var(--u));border:1px solid #1f1f1f;border-radius:calc(.6*var(--u));background:rgba(8,8,8,.8);display:grid;gap:calc(.25*var(--u));font:400 calc(.64*var(--u)) var(--mono);color:var(--mute)}
.legend li{display:flex;align-items:center;gap:calc(.5*var(--u))}.legend i{width:calc(.45*var(--u));height:calc(.45*var(--u));border-radius:50%;background:#555}
.legend li.on{color:#fff}.legend li.on i{background:var(--heart2)}

/* middle: one card per engine; the active one glows */
.cards{position:relative;z-index:2;grid-column:2;grid-row:2;padding:calc(2*var(--u)) 0;display:flex;flex-direction:column;justify-content:center;gap:calc(1*var(--u))}
.card{position:relative;display:flex;align-items:center;gap:calc(.9*var(--u));height:calc(4.4*var(--u));padding:0 calc(1*var(--u));background:rgba(14,14,14,.95);border:1px solid #2a2a2a;border-radius:calc(.7*var(--u));transition:border-color .4s,box-shadow .4s,transform .4s}
.card b{font:500 calc(1.5*var(--u))/1 var(--mono);min-width:calc(2.2*var(--u))}
.card div{display:flex;flex-direction:column}.card span{font:500 calc(.78*var(--u)) var(--sans)}.card small{font:400 calc(.62*var(--u)) var(--mono);color:var(--mute)}
.card svg{width:calc(1.1*var(--u));height:calc(1.1*var(--u));color:var(--mute);flex:none}
.card.on{border-color:#fff;box-shadow:0 0 0 1px #fff,0 0 calc(2.4*var(--u)) var(--heartGlow),inset 0 0 calc(2*var(--u)) rgba(216,52,79,.18);transform:translateX(calc(.6*var(--u)))}
.card.on svg{color:var(--heart2)}

/* the list: every item every engine is holding right now */
.items{position:relative;z-index:2;grid-column:4;grid-row:2;margin:0;padding:calc(1.4*var(--u)) 0!important;list-style:none;padding:0;display:flex;flex-direction:column;justify-content:center;gap:calc(.12*var(--u))}
.items li{display:flex;align-items:center;gap:calc(.5*var(--u));height:calc(1.36*var(--u));padding:0 calc(.4*var(--u));border-radius:calc(.3*var(--u));font:400 calc(.68*var(--u)) var(--mono);color:#6a6a6a;white-space:nowrap;transition:color .4s,background .4s}
.items li .n{overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.items li .c{flex:none;padding:0 calc(.35*var(--u));border-radius:calc(.25*var(--u));background:#161616;color:#777;font-size:calc(.58*var(--u));line-height:1.5}
.items li .c.r{background:#3a0f18;color:#ff9aa9}.items li .c.w{background:#e9e9e9;color:#000}
.items li.on{color:#fff;background:rgba(255,255,255,.04)}
.items li.on .c{background:#262626;color:#ddd}.items li.on .c.r{background:var(--heart);color:#fff}.items li.on .c.w{background:#fff}
.items li.hd{height:auto;margin-top:calc(.35*var(--u));font-size:calc(.56*var(--u));letter-spacing:.14em;text-transform:uppercase;color:#444}
.items li.hd:first-child{margin-top:0}
.items li.hd.on{background:none;color:var(--heart2)}

/* right: the detail panel */
.detail{position:relative;z-index:2;grid-column:5;grid-row:2;margin:calc(1.6*var(--u)) calc(1.6*var(--u)) calc(1.6*var(--u)) calc(1.4*var(--u));display:flex;flex-direction:column;gap:calc(.9*var(--u));padding:calc(1.3*var(--u));background:rgba(12,12,12,.94);border:1px solid #2c2c2c;border-radius:calc(1.1*var(--u));box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.dh{display:flex;justify-content:space-between;align-items:center;font:400 calc(.66*var(--u)) var(--mono)}
.chip{padding:calc(.2*var(--u)) calc(.6*var(--u));border:1px solid #333;border-radius:99px;color:var(--text2)}
.detail h3{font:500 calc(1.25*var(--u))/1.25 var(--sans);letter-spacing:-.01em}
.dmetric{display:grid;grid-template-columns:auto 1fr;gap:calc(1*var(--u));align-items:end;padding:calc(.9*var(--u));border:1px solid #222;border-radius:calc(.7*var(--u));background:#0a0a0a}
.dmetric small{display:block;font:400 calc(.6*var(--u)) var(--mono);color:var(--mute)}
.dmetric b{font:500 calc(2.6*var(--u))/1 var(--mono);letter-spacing:-.04em}
.dmetric svg{width:100%;height:calc(3.4*var(--u))}
.dstats{display:grid;grid-template-columns:1fr 1fr;gap:calc(.6*var(--u))}
.dstats div{padding:calc(.6*var(--u)) calc(.8*var(--u));border:1px solid #1f1f1f;border-radius:calc(.6*var(--u))}
.dstats b{display:block;font:500 calc(1.05*var(--u)) var(--mono)}.dstats small{font:400 calc(.6*var(--u)) var(--mono);color:var(--mute)}
.dnote{flex:1;min-height:0;overflow:hidden}
.dnote small{font:400 calc(.6*var(--u)) var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.dnote p{margin-top:calc(.3*var(--u));color:var(--text2);font-size:calc(.74*var(--u));line-height:1.45;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.drun{display:flex;align-items:center;gap:calc(.6*var(--u));font:400 calc(.66*var(--u)) var(--mono);color:var(--text2);white-space:nowrap;overflow:hidden}
.drun span{overflow:hidden;text-overflow:ellipsis}
.dgo{display:flex;justify-content:space-between;align-items:center;height:calc(2.6*var(--u));padding:0 calc(.5*var(--u)) 0 calc(1*var(--u));border:1px solid #333;border-radius:99px;background:#111;font:400 calc(.72*var(--u)) var(--mono);color:var(--text2);transition:border-color .2s,color .2s}
.dgo i{display:grid;place-items:center;width:calc(1.8*var(--u));height:calc(1.8*var(--u));border-radius:50%;background:#fff;color:#000;font-style:normal}
.dgo:hover{border-color:var(--heart2);color:#fff}.dgo:hover i{background:var(--heart2);color:#fff}

/* sections */
.sec{padding:clamp(72px,9vw,120px) 0;border-top:1px solid var(--line)}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:12px 48px;align-items:end;margin-bottom:40px}
.sec-head .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.eyebrow{grid-column:1/-1}
.sec h2{font:500 clamp(30px,3.4vw,48px)/1.05 var(--sans);letter-spacing:-.03em}
.lede{color:var(--text2);max-width:540px}
.books{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.book{background:var(--bg);padding:20px}
.book h3{font:500 14px var(--sans)}.book p{color:var(--mute);font-size:12.5px;min-height:38px}
.book .v{margin-top:14px;font:500 28px var(--mono);letter-spacing:-.03em}
.book .eq{font:400 12px var(--mono);color:var(--mute)}
.book svg{width:100%;height:70px;margin-top:12px}.book svg text{display:none}.book svg line{stroke:#555}
.book.lead{background:#fff;color:#000}.book.lead p,.book.lead .eq{color:#555}
.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.rule{background:var(--bg);padding:24px}
.rng{font:500 13px var(--mono);color:var(--heart2)}.rule h3{font:500 22px var(--sans);margin:8px 0 10px}.rule p{color:var(--text2);font-size:14px}
.weights{margin-top:28px;display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.weights div{border-top:1px solid #fff;padding-top:10px;font:400 12px var(--mono);color:var(--text2)}
.weights b{display:block;font:500 22px var(--mono);color:#fff}
.limits{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 40px}
.limits p{color:var(--text2);font-size:14px;border-top:1px solid var(--line2);padding-top:14px}
.limits b{display:block;color:#fff;font-weight:500;margin-bottom:4px}
.foot{border-top:1px solid var(--line);padding:22px 0;font:400 12px var(--mono);color:var(--mute)}
.foot .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#fff;color:#000;padding:10px 16px;border-radius:6px;font:500 13px var(--sans);z-index:99}

/* 2K and up: header and board grow together */
@media (min-width:1900px){ .wrap{max-width:none} .hero-side p{font-size:17px;max-width:620px} }
/* phones and narrow tablets: the board lies flat and its pieces stack */
@media (max-width:900px){
  .nav nav{display:none}.nav .btn{margin-left:auto}
  .hero{padding-top:84px}
  .hero-head{grid-template-columns:1fr;gap:14px}
  .hero{height:auto}
  .stage3d{padding:20px 12px 40px;margin:0;container-type:inline-size}
  .slab{--u:1cqw;width:100%;height:auto;display:flex;flex-direction:column;padding:calc(12*var(--u)) calc(3*var(--u)) calc(4*var(--u));font-size:calc(3*var(--u));box-shadow:0 calc(4*var(--u)) calc(10*var(--u)) rgba(179,32,58,.2)}
  .bar{height:calc(9*var(--u));font-size:calc(2.6*var(--u));gap:calc(3*var(--u));padding:0 calc(4*var(--u))}.bar .fname,.bar #fClock{display:none}
  .lights{gap:calc(1.5*var(--u))}.lights i{width:calc(2.2*var(--u));height:calc(2.2*var(--u))}.live{font-size:calc(2.2*var(--u));padding:calc(.5*var(--u)) calc(2*var(--u));gap:calc(1.5*var(--u))}.pulse{width:calc(1.4*var(--u));height:calc(1.4*var(--u))}
  .orbz{position:relative;inset:auto;width:100%;height:calc(62*var(--u))}
  .orbits{left:2%;top:54%;width:96%;height:calc(56*var(--u))}
  .orb{left:50%;top:54%;width:calc(16*var(--u));height:calc(16*var(--u));margin:calc(-8*var(--u)) 0 0 calc(-8*var(--u))}
  .orb i{inset:calc(-4*var(--u))}
  .olbl{left:calc(2*var(--u));top:0;gap:calc(1*var(--u))}.olbl small{font-size:calc(2.4*var(--u))}.olbl b{font-size:calc(10*var(--u))}.olbl b em{font-size:calc(3*var(--u))}.zone{font-size:calc(2.3*var(--u));padding:calc(.6*var(--u)) calc(2.4*var(--u))}
  .sat{font-size:calc(2.2*var(--u));padding:calc(1*var(--u)) calc(1.8*var(--u));border-radius:calc(1.6*var(--u))}.sat b{font-size:calc(2.4*var(--u))}
  .legend{display:none}
  .cards{position:relative;inset:auto;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:calc(2.4*var(--u));margin-top:calc(2*var(--u))}
  .card{height:calc(13*var(--u));gap:calc(2.4*var(--u));padding:0 calc(3*var(--u));border-radius:calc(2.4*var(--u))}.card b{font-size:calc(5*var(--u));min-width:calc(6*var(--u))}.card span{font-size:calc(2.8*var(--u))}.card small{font-size:calc(2.2*var(--u))}.card svg{width:calc(3.4*var(--u));height:calc(3.4*var(--u))}
  .card.on{transform:none}
  .items{position:relative;inset:auto;width:100%;margin-top:calc(4*var(--u));gap:calc(.6*var(--u))}
  .items li{height:calc(6*var(--u));font-size:calc(2.7*var(--u));gap:calc(2*var(--u));padding:0 calc(1.6*var(--u));border-radius:calc(1*var(--u))}.items li .c{font-size:calc(2.3*var(--u));padding:0 calc(1.4*var(--u));border-radius:calc(.8*var(--u))}
  .items li.hd{font-size:calc(2.2*var(--u));margin-top:calc(2*var(--u))}
  .items li:not(.on){display:none}
  .fan{display:none}
  .detail{position:relative;inset:auto;width:100%;margin:calc(4*var(--u)) 0 0;padding:calc(4*var(--u));gap:calc(3*var(--u));border-radius:calc(3*var(--u))}
  .dh{font-size:calc(2.4*var(--u))}.chip{padding:calc(.6*var(--u)) calc(2*var(--u))}.detail h3{font-size:calc(4.4*var(--u))}
  .dmetric{padding:calc(3*var(--u));gap:calc(3*var(--u));border-radius:calc(2*var(--u))}.dmetric small{font-size:calc(2.2*var(--u))}.dmetric b{font-size:calc(9*var(--u))}.dmetric svg{height:calc(11*var(--u))}
  .dstats{gap:calc(2*var(--u))}.dstats div{padding:calc(2*var(--u)) calc(2.6*var(--u));border-radius:calc(2*var(--u))}.dstats b{font-size:calc(4*var(--u))}.dstats small{font-size:calc(2.2*var(--u))}
  .dnote small{font-size:calc(2.2*var(--u))}.dnote p{font-size:calc(3*var(--u))}
  .drun{font-size:calc(2.4*var(--u));gap:calc(2*var(--u))}.led{width:calc(1.8*var(--u));height:calc(1.8*var(--u))}
  .dgo{height:calc(10*var(--u));font-size:calc(2.8*var(--u));padding:0 calc(1.6*var(--u)) 0 calc(4*var(--u))}.dgo i{width:calc(7*var(--u));height:calc(7*var(--u))}
  .sec-head,.books,.rules,.limits{grid-template-columns:1fr}
  .weights{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.brand .mark{height:20px;width:auto}