:root{
  --bg:#0B1720;
  --ink:#F2F6F8;
  --ink-2:#C7D6DE;
  --muted:#93A6B1;
  --dim:#7C93A0;
  --faint:#6F8794;
  --assess:#F8A455;  --assess-rgb:248,164,85;
  --adjust:#79CFD8;  --adjust-rgb:121,207,216;
  --sans:'Jost',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.6,.05,.2,1);
  --dial-scale:1;
}
html[data-product="assess"]{--acc:var(--assess);--acc-rgb:var(--assess-rgb);--needle:202deg;--arc-rot:175deg;--axis-left:0%;--axis-dir:90deg}
html[data-product="adjust"]{--acc:var(--adjust);--acc-rgb:var(--adjust-rgb);--needle:338deg;--arc-rot:311deg;--axis-left:54%;--axis-dir:270deg}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg)}
a{text-decoration:none}

@keyframes tl-spin{to{transform:rotate(360deg)}}
@keyframes tl-pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.22);opacity:.35}}

.stage{
  position:relative;min-height:100vh;overflow:hidden;font-family:var(--sans);
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 56px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 56px),
    var(--bg);
}
.wash{position:absolute;inset:0;pointer-events:none;transition:background .6s ease;
  background:radial-gradient(72% 58% at 50% 44%,rgba(var(--acc-rgb),.08),transparent 70%)}

.axis{position:absolute;left:0;right:0;top:55%;height:1px;background:rgba(255,255,255,.07)}
.axis-glow{position:absolute;top:55%;height:1px;width:46%;left:var(--axis-left);
  background:linear-gradient(var(--axis-dir),rgba(var(--acc-rgb),0),rgba(var(--acc-rgb),.55));
  transition:left .6s var(--ease),background .4s ease}

.crop{position:absolute;width:20px;height:20px}
.crop.tl{top:28px;left:28px;border-left:1px solid rgba(255,255,255,.16);border-top:1px solid rgba(255,255,255,.16)}
.crop.tr{top:28px;right:28px;border-right:1px solid rgba(255,255,255,.16);border-top:1px solid rgba(255,255,255,.16)}
.crop.bl{bottom:28px;left:28px;border-left:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16)}
.crop.br{bottom:28px;right:28px;border-right:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16)}

.bar{position:absolute;left:56px;right:56px;display:flex;justify-content:space-between}
.bar.top{top:42px;align-items:flex-end}
.bar.bottom{bottom:46px;align-items:center;gap:24px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--faint)}
.bar.bottom a{color:var(--muted)}
.lockup{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.lockup .rule{width:58px;height:2px;background:linear-gradient(90deg,var(--assess),var(--adjust))}
.lockup .word{font-weight:700;font-size:22px;letter-spacing:-.03em;color:var(--ink);line-height:1}
.parent{font-family:var(--mono);font-size:9.5px;letter-spacing:.32em;color:var(--dim)}

.dial{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%) scale(var(--dial-scale));width:700px;height:700px}
.dial svg{position:absolute;inset:0;width:700px;height:700px}
.sweep{position:absolute;left:350px;top:350px;width:330px;height:1px;transform-origin:0 50%;
  pointer-events:none;animation:tl-spin 14s linear infinite;transition:background .5s ease;
  background:linear-gradient(90deg,rgba(var(--acc-rgb),0) 40%,rgba(var(--acc-rgb),.22))}
.needle{position:absolute;left:350px;top:350px;width:250px;height:2px;transform-origin:0 50%;
  transform:rotate(var(--needle));
  background:linear-gradient(90deg,rgba(var(--acc-rgb),0),rgba(var(--acc-rgb),.8));
  transition:transform .6s var(--ease),background .4s ease}
.arc{transform-origin:350px 350px;transform:rotate(var(--arc-rot));
  transition:transform .6s var(--ease),stroke .4s ease;stroke:rgba(var(--acc-rgb),.5)}
.reticle{position:absolute;left:350px;top:350px;width:250px;height:0;transform-origin:0 50%;
  transform:rotate(var(--needle));transition:transform .6s var(--ease)}
.reticle .halo{position:absolute;right:-17px;top:-17px;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--acc);animation:tl-pulse 2.4s ease-in-out infinite;transition:border-color .4s ease}
.reticle .dot{position:absolute;right:-4px;top:-4px;width:8px;height:8px;border-radius:50%;
  background:var(--acc);box-shadow:0 0 14px 2px rgba(var(--acc-rgb),.5);transition:background .4s ease}

.node-slot{position:absolute;top:100px;width:250px}
.node-slot.left{left:-70px}
.node-slot.right{right:-70px}
.node{display:flex;flex-direction:column;gap:11px;transition:opacity .4s ease,transform .4s ease;
  border-radius:2px}
.node.left{align-items:flex-start}
.node.right{align-items:flex-end;text-align:right}
.node:focus-visible{outline:1px solid var(--acc);outline-offset:6px}
.node .rule{height:2px;width:34px;transition:width .45s var(--ease)}
.node.left .rule{background:var(--assess)}
.node.right .rule{background:var(--adjust)}
.node .name{font-size:31px;line-height:1;letter-spacing:-.025em}
.node .name b{font-weight:700;color:var(--ink)}
.node.left .name i{font-style:normal;font-weight:400;color:var(--assess)}
.node.right .name i{font-style:normal;font-weight:400;color:var(--adjust)}
.node .disc{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--dim);transition:color .4s ease}

html[data-product="assess"] .node.left {opacity:1;transform:none}
html[data-product="assess"] .node.left .rule{width:96px}
html[data-product="assess"] .node.left .disc{color:var(--ink-2)}
html[data-product="assess"] .node.right{opacity:.42;transform:translateX(10px)}
html[data-product="adjust"] .node.right{opacity:1;transform:none}
html[data-product="adjust"] .node.right .rule{width:96px}
html[data-product="adjust"] .node.right .disc{color:var(--ink-2)}
html[data-product="adjust"] .node.left {opacity:.42;transform:translateX(-10px)}

.core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:16px;width:290px;text-align:center}
.core .eyebrow{font-family:var(--mono);font-size:9.5px;letter-spacing:.28em;color:var(--dim)}
.cta{display:flex;align-items:center;justify-content:center;min-width:320px;padding:19px 24px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;
  background:var(--acc);color:var(--bg);transition:background .35s ease,filter .2s ease}
.cta:hover{filter:brightness(1.1)}
.cta:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.core .host{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--faint)}

@media (max-width:1180px){:root{--dial-scale:.84}}
@media (max-width:980px){:root{--dial-scale:.70}}
@media (max-height:880px){:root{--dial-scale:.84}}
@media (max-height:760px){:root{--dial-scale:.70}}
@media (max-height:640px){:root{--dial-scale:.56}}
@media (max-width:820px){.bar{left:28px;right:28px}}
@media (prefers-reduced-motion:reduce){
  .sweep,.reticle .halo{animation:none}
}