:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Kaku Gothic ProN",sans-serif;color:#eef4f8;background:#0a101b;font-synthesis:none}*{box-sizing:border-box}body{margin:0}a{color:inherit}button,input{font:inherit}header{max-width:1360px;margin:auto;padding:28px 32px;display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #253041;font-size:14px;letter-spacing:.08em}header a{text-decoration:none}header b{color:#78d8ff}header>span{color:#8798ac}main{max-width:1360px;margin:auto;padding:32px}.heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:28px}.eyebrow{font-size:14px;color:#8eb4cc;letter-spacing:.12em}h1{font-size:clamp(30px,4vw,46px);letter-spacing:-.035em;margin:8px 0 12px}p{line-height:1.8;color:#b0becf;margin:8px 0}.pill{padding:10px 16px;border:1px solid #354253;border-radius:30px;white-space:nowrap;font-size:14px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px}.bench{min-width:0;background:#101c2a;border:1px solid #2a394b;border-radius:20px;overflow:hidden}.bench-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:22px 24px;font-size:14px;letter-spacing:.08em}.bench-top>span{color:#8ba0b9}.bench-top strong{color:#f4d2de;background:#302536;padding:8px 12px;border-radius:8px;letter-spacing:0}svg{display:block;width:100%;height:auto}svg text{font-family:inherit;font-size:16px;fill:#c2d1e0}.legend{display:flex;justify-content:center;gap:24px;font-size:14px}.legend span{display:flex;align-items:center;gap:7px}i{width:15px;height:3px;display:inline-block}.blue{background:#7addff}.pink{background:#fb99b6}.white{background:#fff}.diagram-note{padding:8px 24px;font-size:13px;color:#8b9eb3}.metrics{display:grid;grid-template-columns:1fr 1fr;margin:16px 24px 24px;border-top:1px solid #304052;padding-top:20px;gap:20px}.metrics span,.formula span{font-size:14px;color:#adc0d4;display:block}.metrics strong,.formula strong{display:block;font-size:28px;font-variant-numeric:tabular-nums;margin:8px 0}.metrics small,.formula small{display:block;color:#8fa2b8;font-size:13px;line-height:1.6}.controls{border:1px solid #303c4d;border-radius:20px;padding:24px;background:#141e2c}.section-label{font-size:13px;letter-spacing:.1em;color:#8da6bc;margin-bottom:16px}.presets{display:flex;gap:8px;margin-bottom:24px}button{cursor:pointer;border:1px solid #3e5067;border-radius:10px;min-height:44px;color:#e8f2ff;background:#1a293b}button:hover{background:#2b4058}.presets button{flex:1}.presets button[aria-pressed=true]{color:#072130;background:#8ae1ff;border-color:#8ae1ff}label{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:14px}output{font-size:18px;font-weight:650;font-variant-numeric:tabular-nums;color:#89dfff}input[type=range]{width:100%;margin:13px 0 4px;height:30px;accent-color:#80dcff;cursor:pointer}.ends{display:flex;justify-content:space-between;color:#8c9eb4;font-size:12px;gap:10px}.separated{padding-top:24px;border-top:1px solid #2e3b4e;margin-top:26px}.distance-label{margin-top:25px}.primary{background:#87dfff;color:#082231;width:100%;margin-top:26px;font-weight:700;display:flex;justify-content:space-between;align-items:center;padding:12px 18px}.primary:hover{background:#b4ecff}.secondary{width:100%;margin-top:10px;background:transparent}.control-note{font-size:12px;margin-top:12px}.explanation{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:40px;padding:28px 8px;margin-top:14px}h2{font-size:24px;margin:8px 0}.formula{border-left:2px solid #71cbec;padding:12px 24px;align-self:center}details{border-top:1px solid #2b3748;padding:20px 8px}summary{cursor:pointer;font-size:14px;color:#9db0c5;min-height:32px}details p{font-size:14px;max-width:1000px}footer{font-size:13px;line-height:1.8;color:#8193a9;padding:20px 8px}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #ffe49c;outline-offset:4px}@media(max-width:950px){.workspace{grid-template-columns:1fr}.controls{display:block}.explanation{grid-template-columns:1fr;gap:16px}}@media(max-width:540px){header{padding:20px 16px;font-size:12px}main{padding:22px 12px}.heading{display:block}.pill{display:inline-block;margin-top:12px}.bench-top{padding:16px 12px;font-size:12px;flex-wrap:wrap}.metrics{margin:16px 14px;gap:12px}.metrics strong{font-size:23px}.diagram-note{padding:8px 14px}.controls{padding:20px}.explanation{padding:22px 8px}.legend{gap:16px}}