:root { --ink:#171b32; --muted:#70748a; --paper:#f8f7f4; --line:#d9dae0; --nick:#5d5ee7; --turner:#ec6a50; --kirsten:#169d91; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; }
body::before { content:""; position:fixed; inset:0; opacity:.28; pointer-events:none; background-image:radial-gradient(#a8a7a4 .55px,transparent .55px); background-size:5px 5px; }
.app-shell { width:min(100%,1120px); margin:auto; padding:31px 40px 45px; position:relative; }
.topbar { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); padding-bottom:20px; }
.brand { color:var(--ink); text-decoration:none; letter-spacing:.085em; font-family:"DM Mono",monospace; font-size:12px; font-weight:500; display:flex; align-items:center; gap:9px; }
.brand-mark { display:inline-block; width:12px; height:12px; border:2px solid var(--ink); transform:rotate(45deg); }
.live-status { font:500 11px "DM Mono",monospace; letter-spacing:.1em; color:#4b5066; display:flex; gap:7px; align-items:center; }
.pulse { width:7px; height:7px; border-radius:50%; background:#f05f52; box-shadow:0 0 0 4px #f9dcd8; }
.intro { padding:64px 0 33px; }
.eyebrow { margin:0 0 11px; color:#73778b; font:500 11px "DM Mono",monospace; letter-spacing:.12em; }
h1,h2 { margin:0; letter-spacing:-.055em; line-height:.94; }
h1 { font-size:clamp(48px,7vw,76px); font-weight:600; }
.subtitle { margin:17px 0 0; color:var(--muted); font-size:17px; }
.control-card { background:#fff; border:1px solid var(--line); border-radius:4px; padding:29px 34px 20px; box-shadow:0 17px 45px rgba(26,31,59,.06); }
.card-heading { display:flex; align-items:flex-start; justify-content:space-between; }
h2 { font-size:28px; font-weight:600; }
.readout { text-align:right; padding-top:2px; }.readout-label { display:block; color:#85899b; font:500 10px "DM Mono",monospace; letter-spacing:.1em; margin-bottom:5px; }.readout strong { font-size:17px; font-weight:600; }
.triangle-wrap { width:min(100%,640px); margin:9px auto 0; position:relative; }
.triangle { display:block; width:100%; overflow:visible; }
.triangle-fill { fill:url(#triangle-fill); }.triangle-edge { fill:none; stroke:#434865; stroke-width:1.4; }.guide-line { stroke:#babdca; stroke-width:.8; stroke-dasharray:4 7; }
.vertex circle:first-child { fill:#fff; stroke-width:2; }.vertex-nick circle:first-child { stroke:var(--nick); }.vertex-turner circle:first-child { stroke:var(--turner); }.vertex-kirsten circle:first-child { stroke:var(--kirsten); }.vertex-nick .vertex-inner { fill:var(--nick); }.vertex-turner .vertex-inner { fill:var(--turner); }.vertex-kirsten .vertex-inner { fill:var(--kirsten); }
.vertex text { fill:#292e48; font:500 13px "DM Mono",monospace; letter-spacing:.08em; }.vertex-turner text,.vertex-kirsten text { font-size:12px; }
#control-dot { transition:transform 850ms cubic-bezier(.2,.85,.25,1); }.dot-halo { fill:#171b32; opacity:.08; }.dot-ring { fill:#fff; stroke:#171b32; stroke-width:1.5; }.dot-core { fill:#f5be4d; }
.center-label { position:absolute; left:50%; top:61%; transform:translate(-50%,-50%); text-align:center; color:#4b5067; font:500 11px/1.35 "DM Mono",monospace; transition:opacity .2s; pointer-events:none; }
.legend { display:flex; justify-content:center; align-items:center; gap:8px; border-top:1px solid #ececf0; padding-top:17px; color:#717589; font-size:12px; }.legend-dot { width:7px; height:7px; border-radius:50%; background:#f5be4d; }
.actions { margin-top:38px; }.button-row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.person-button { height:76px; border:1px solid #cfd1d9; border-radius:3px; color:var(--ink); cursor:pointer; background:#fff; display:grid; grid-template-columns:26px 1fr 24px; align-items:center; padding:0 17px; font:600 18px "DM Sans",sans-serif; text-align:left; transition:transform .18s, color .18s, border-color .18s, background .18s,box-shadow .18s; }.button-index { color:#8a8d9d; font:500 10px "DM Mono",monospace; }.arrow { font-size:20px; justify-self:end; }.person-button:hover { transform:translateY(-3px); box-shadow:0 8px 15px rgba(26,31,59,.1); }.person-button:focus-visible { outline:3px solid #92a8ee; outline-offset:3px; }.person-button.active { color:#fff; border-color:transparent; }.person-button.active .button-index { color:rgba(255,255,255,.68); }.nick.active { background:var(--nick); }.turner.active { background:var(--turner); }.kirsten.active { background:var(--kirsten); }
@media (max-width:650px) { .app-shell { padding:23px 19px 35px; }.intro { padding:48px 0 29px; }.control-card { padding:23px 16px 17px; }.triangle-wrap { margin-top:16px; }.button-row { grid-template-columns:1fr; gap:8px; }.person-button { height:61px; }.legend { font-size:11px; text-align:center; }.center-label { font-size:9px; }.vertex text { font-size:11px; } }