:root{--bg:#0b0e13;--panel:#12161f;--panel2:#171c28;--line:#232a3a;--text:#e6edf3;--muted:#9aa7b8;--accent:#22d3ee;--accent-d:#0e7490;--red:#f87171;--radius:12px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.65;font-size:16px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.site-header{position:sticky;top:0;z-index:50;background:rgba(11,14,19,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:1.2rem;padding:.55rem 1rem;flex-wrap:wrap}
.logo{font-weight:800;font-size:1.15rem;color:var(--text);letter-spacing:-.02em}
.logo span{color:var(--accent)}
.site-header nav{display:flex;gap:1rem;flex-wrap:wrap;font-size:.92rem}
.site-header nav a{color:var(--muted)}
.site-header nav a:hover{color:var(--accent);text-decoration:none}
main{max-width:1060px;margin:0 auto;padding:1rem 1rem 3rem}
.crumbs{font-size:.85rem;color:var(--muted);margin:.4rem 0 .8rem}
.crumbs a{color:var(--muted)}
h1{font-size:1.9rem;line-height:1.2;letter-spacing:-.02em;margin:.3rem 0 .5rem}
h2{font-size:1.35rem;margin:2rem 0 .6rem;letter-spacing:-.01em}
h3{font-size:1.08rem;margin:1.4rem 0 .4rem}
.lede{color:var(--muted);font-size:1.05rem;max-width:46rem;margin:.2rem 0 1rem}
section p,section li{max-width:52rem}
.muted{color:var(--muted)}
.btn{display:inline-block;background:var(--accent);color:#06202a;font-weight:700;border:0;border-radius:8px;padding:.55rem 1.1rem;cursor:pointer;font-size:.95rem}
.btn:hover{background:#67e8f9;text-decoration:none}
.btn.alt{background:var(--panel2);color:var(--text);border:1px solid var(--line)}
.btn.alt:hover{border-color:var(--accent);color:var(--accent)}
select,input[type=text]{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:.45rem .6rem;font-size:.95rem}
label{font-size:.9rem;color:var(--muted);display:inline-flex;flex-direction:column;gap:.3rem;margin-right:.8rem}
/* tool */
.fr-tool,.toolbox{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1rem;margin:.6rem 0 1.4rem}
.tool-stage{position:relative;background:#07090d;border-radius:10px;padding:1rem;overflow:hidden}
.tool-stage:fullscreen{padding:2rem;background:#000}
.big-num{font-size:3.4rem;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
.big-label{color:var(--muted);margin-top:.35rem;font-size:.95rem}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.6rem;margin-top:1rem}
.stat-grid>div{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:.55rem .7rem}
.stat-grid span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.stat-grid strong{font-size:1.05rem;font-variant-numeric:tabular-nums}
canvas.graph{width:100%;height:120px;display:block;margin-top:1rem;background:#0a0d13;border-radius:8px}
canvas.lanes{width:100%;display:block;margin-top:1rem;background:#0a0d13;border-radius:8px}
.stress-canvas{position:absolute;inset:auto 0 0 0;width:100%;height:220px;opacity:.9;pointer-events:none}
.controls{display:flex;gap:.5rem;flex-wrap:wrap;align-items:end;margin-top:1rem}
.diagnosis{margin-top:1rem;background:#2a2107;border:1px solid #a16207;color:#fde68a;border-radius:10px;padding:.8rem 1rem;font-size:.93rem}
.sysinfo{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.6rem;margin-top:1rem}
.sysinfo>div{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:.55rem .7rem;word-break:break-word}
.sysinfo span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.htable{width:100%;border-collapse:collapse;font-size:.9rem}
.htable th,.htable td{border-bottom:1px solid var(--line);padding:.4rem .5rem;text-align:left}
/* extra tools */
.pad{border:1px dashed var(--line);border-radius:10px;min-height:180px;display:flex;align-items:center;justify-content:center;text-align:center;padding:1rem;cursor:pointer;user-select:none;background:#0a0d13}
.skip-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;background:#000;padding:8px;border-radius:8px}
.skip-cell{background:#171c28;color:#5b6b82;border-radius:4px;text-align:center;padding:.55rem 0;font-size:.85rem;font-variant-numeric:tabular-nums}
.skip-cell.on{background:var(--accent);color:#06202a;font-weight:700}
.dp-stage{min-height:300px;border-radius:10px;display:flex;align-items:flex-end;justify-content:center;cursor:pointer}
.dp-stage span{background:rgba(0,0,0,.55);color:#fff;padding:.3rem .7rem;border-radius:6px;margin:.7rem;font-size:.85rem}
.calc-big{font-size:2.4rem;font-weight:800;color:var(--accent)}
.calc-big span{font-size:1rem;color:var(--muted);font-weight:400}
.bar-row{display:grid;grid-template-columns:52px 1fr 76px;gap:.6rem;align-items:center;margin:.4rem 0;font-size:.9rem}
.bar-track{background:var(--panel2);border-radius:6px;height:16px;overflow:hidden}
.bar-fill{background:var(--accent);height:100%;width:0;transition:width .3s}
/* content */
.cta-box{background:var(--panel);border:1px solid var(--accent-d);border-radius:var(--radius);padding:1rem 1.2rem;margin:1.6rem 0}
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.7rem 1rem;margin:.5rem 0}
.faq summary{cursor:pointer;font-weight:600}
table.cmp{width:100%;border-collapse:collapse;font-size:.93rem;margin:1rem 0}
table.cmp th,table.cmp td{border:1px solid var(--line);padding:.45rem .6rem;text-align:left}
table.cmp th{background:var(--panel2)}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.8rem;margin:1rem 0}
.tool-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1rem;display:block;color:var(--text)}
.tool-card:hover{border-color:var(--accent);text-decoration:none}
.tool-card strong{display:block;font-size:1.02rem;margin-bottom:.25rem;color:var(--accent)}
.tool-card span{color:var(--muted);font-size:.9rem}
.siblings{display:flex;gap:.5rem;flex-wrap:wrap;margin:1.4rem 0}
.siblings a{background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:.35rem .85rem;font-size:.88rem;color:var(--text)}
.siblings a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.site-footer{border-top:1px solid var(--line);margin-top:2rem;padding:1.6rem 1rem 2.2rem;background:#090b10}
.fcols{max-width:1060px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.2rem}
.fcols h4{margin:.2rem 0 .5rem;font-size:.9rem;color:var(--text)}
.fcols a{display:block;color:var(--muted);font-size:.88rem;padding:.14rem 0}
.fnote{max-width:1060px;margin:1.2rem auto 0;color:var(--muted);font-size:.82rem}
@media (max-width:640px){.big-num{font-size:2.5rem}h1{font-size:1.55rem}.skip-grid{grid-template-columns:repeat(6,1fr)}}