:root{--fg:#1b1b1b;--bg:#f6f8fb;--mut:#566170;--acc:#1f4e8c;--line:#8884;--card:#fff;--warn:#9a3b00;--b0:#9ec9a8;--b1:#e3d27a;--b2:#e9a45f;--b3:#d9776a}
@media(prefers-color-scheme:dark){:root{--fg:#eee;--bg:#12161c;--mut:#a9b3c0;--acc:#8fb8ee;--card:#1b2129;--warn:#ffb27a;--b0:#4f8a60;--b1:#9c8f3c;--b2:#b4753a;--b3:#a64f44}}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,sans-serif}
main{max-width:820px;margin:0 auto;padding:20px 16px 48px}h1{font-size:1.6rem;margin:.2em 0}h2{font-size:1.2rem;margin:1.4em 0 .4em}h3{margin:.2em 0}
a{color:var(--acc)}.mut{color:var(--mut);font-size:.92rem}.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:12px 0}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:end}label{display:flex;flex-direction:column;font-size:.85rem;color:var(--mut);gap:3px;min-width:0}
input,select,button{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--fg);min-height:42px;max-width:100%}
button,.btn{background:var(--acc);color:var(--bg);border-color:var(--acc);cursor:pointer;text-decoration:none;display:inline-block;border-radius:8px;padding:9px 16px}
.err{color:var(--warn)}.note{border-left:4px solid var(--acc);padding:6px 12px;margin:14px 0;background:var(--card)}
.big{font-size:1.5rem;font-weight:700;line-height:1.2}.strip{display:flex;align-items:flex-end;height:64px;gap:1px;margin:10px 0 2px}
.strip i{flex:1;display:block;min-width:2px;border-radius:2px 2px 0 0}.b0{background:var(--b0)}.b1{background:var(--b1)}.b2{background:var(--b2)}.b3{background:var(--b3)}
.axis{display:flex;justify-content:space-between;font-size:.8rem;color:var(--mut)}.legend span{display:inline-block;margin-right:12px;font-size:.85rem}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:4px;vertical-align:-1px}
footer{margin-top:32px;font-size:.88rem;color:var(--mut)}