@import url("styles/tokens.css");
*{box-sizing:border-box}
body{font:14px/1.5 var(--font-sans);margin:0;background:var(--color-bg);color:var(--color-text);min-height:100vh}
header{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding:12px 24px;background:rgba(14,13,26,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-border)}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;color:var(--color-text);text-decoration:none}
.logo b{color:var(--color-primary-text)}
header small{font:500 11px var(--font-mono);color:var(--color-accent);border:1px solid rgba(255,176,32,.35);border-radius:999px;padding:2px 8px;text-transform:uppercase;letter-spacing:.06em}
nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-left:auto}
nav a{color:var(--color-muted);text-decoration:none;padding:6px 10px;border-radius:var(--radius-sm);font-weight:600}
nav a:hover{color:var(--color-text);background:var(--color-surface)}
main{padding:28px 24px;max-width:1200px;margin:0 auto}
h2{font-weight:800;font-size:22px;margin:28px 0 12px;letter-spacing:-.01em}h3{font-weight:700;color:var(--color-primary-text);margin:22px 0 10px}
a{color:var(--color-primary-text)}a:hover{color:var(--color-accent)}
code{font-family:var(--font-mono);color:var(--color-accent);font-size:.92em}
table{border-collapse:separate;border-spacing:0;width:100%;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden;font-size:13px}
th{background:var(--color-surface-2);color:var(--color-muted);font:600 11px var(--font-mono);text-transform:uppercase;letter-spacing:.05em}
td,th{padding:8px 10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--color-border)}
tr:last-child td{border-bottom:0}tbody tr:hover td,tr:hover td{background:rgba(124,58,237,.06)}
td{word-break:break-word}
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:18px 20px;margin-bottom:16px;box-shadow:var(--shadow-glow)}
.card b{color:var(--color-accent);font-size:1.15em}
.err{color:var(--color-danger)}small{color:var(--color-muted)}
button{cursor:pointer;font:600 13px var(--font-sans);color:var(--color-on-primary);background:var(--color-primary);border:0;border-radius:var(--radius-sm);padding:6px 12px;margin:2px 0;transition:filter .15s}
button:hover{filter:brightness(1.15)}
#out{background:transparent;color:var(--color-muted);border:1px solid var(--color-border)}
input,select{font:13px var(--font-sans);color:var(--color-text);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:6px 9px;max-width:100%}
input:focus,select:focus{outline:2px solid var(--color-primary);outline-offset:1px}
input[type=radio],input[type=range]{accent-color:var(--color-primary)}
form{margin:10px 0}form p{margin:8px 0}
.chart{margin:10px 0}.chart svg{background:var(--color-bg);border-radius:var(--radius-sm);display:block;margin:4px 0}