:root{--bg:#0c1024;--panel:#151b38;--text:#f3f5ff;--muted:#b9c0dc;--accent:#8b7cff;--cyan:#54d8e8;--line:#2a3157}
*{box-sizing:border-box}body{margin:0;font:17px/1.65 system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--text)}
a{color:#a9eaf2}header{border-bottom:1px solid var(--line);background:#0f1430;position:sticky;top:0;z-index:5}
.wrap{max-width:1080px;margin:auto;padding:0 22px}.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0}
.brand{font-weight:800;color:white;text-decoration:none;font-size:21px}.brand span{color:var(--cyan)}nav a{margin-left:18px;text-decoration:none;color:var(--muted)}
main{max-width:880px;margin:auto;padding:52px 22px 80px}h1{font-size:clamp(36px,6vw,62px);line-height:1.05;margin:.2em 0}h2{margin-top:2em;font-size:30px}
.lead{font-size:21px;color:var(--muted)}.card,.tool,.note{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px;margin:24px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}.btn{display:inline-block;background:var(--accent);color:white;padding:13px 18px;border-radius:10px;text-decoration:none;font-weight:700;border:0;cursor:pointer}
.btn.secondary{background:transparent;border:1px solid var(--cyan)}label{display:block;margin:12px 0 5px}input{width:100%;max-width:360px;padding:12px;border-radius:9px;border:1px solid var(--line);background:#0c1024;color:white}
.results{margin-top:20px;font-size:19px}.meter{height:9px;background:#252c50;border-radius:9px;overflow:hidden;margin:5px 0 14px}.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--cyan))}
canvas{width:100%;height:280px;background:#0b1026;border-radius:12px;margin-top:18px}footer{border-top:1px solid var(--line);color:var(--muted);padding:35px 0;font-size:14px}
.small{font-size:14px;color:var(--muted)}.crumb{font-size:14px;color:var(--muted);margin-bottom:20px}@media(max-width:720px){nav{display:none}main{padding-top:34px}}