@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&family=JetBrains+Mono:wght@400;600&display=swap");
:root{
  --abyss:#031018;--teal:#3cf0d4;--gold:#e8c56a;--gold2:#ffe9a6;--foam:#eef7ff;
  --muted:#8fb0c4;--ok:#5dffc4;--bad:#ff7d8d;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --ui:Outfit,system-ui,sans-serif
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  min-height:100vh;color:var(--foam);font-family:var(--ui);
  background:
    radial-gradient(800px 400px at 10% -10%,rgba(60,240,212,.1),transparent 50%),
    #031018
}
nav{display:flex;gap:8px;flex-wrap:wrap;padding:16px 22px;max-width:980px;margin:0 auto;align-items:center}
nav a{color:var(--muted);text-decoration:none;border:1px solid rgba(60,240,212,.18);padding:6px 12px;border-radius:999px;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
nav a.on{color:#140e02;background:linear-gradient(180deg,var(--gold2),var(--gold));border-color:transparent;font-weight:700}
nav .ext{margin-left:auto;border:0;color:var(--gold)}
.wrap{max-width:980px;margin:0 auto;padding:8px 22px 60px}
h1{letter-spacing:.18em;font-size:20px;color:var(--gold2);margin-bottom:6px}
.sub{color:var(--muted);font-size:13px;margin-bottom:16px}
.bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
input,select{background:#010812;border:1px solid rgba(60,240,212,.25);color:var(--foam);border-radius:12px;padding:12px;font:15px var(--mono);min-width:220px;flex:1}
button.go{background:linear-gradient(180deg,#ffe9a6,#c9a227);border:0;border-radius:12px;padding:12px 18px;font-weight:700;cursor:pointer}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0}
.cards div{background:rgba(8,24,48,.7);border:1px solid rgba(60,240,212,.16);border-radius:14px;padding:12px;text-align:center}
.cards small{display:block;color:var(--muted);font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
.cards b{font:18px var(--mono);color:var(--gold2)}
.ok{color:var(--ok)} .bad{color:var(--bad)}
canvas{width:100%;height:140px;background:rgba(1,8,18,.6);border-radius:12px;border:1px solid rgba(60,240,212,.12)}
pre.term{background:#02080c;color:#7CFF9A;font:13px var(--mono);padding:16px;border-radius:12px;min-height:280px;white-space:pre-wrap;border:1px solid #143}
.classic{background:#f4f6f8;color:#111;border-radius:12px;padding:16px;font-family:Arial,sans-serif}
.classic input,.classic button{border-radius:6px;font-family:Arial,sans-serif}
.classic table{width:100%;border-collapse:collapse;margin-top:12px}
.classic th,.classic td{border:1px solid #c9d2db;padding:6px 8px;text-align:left;font-size:13px}
.classic th{background:#e8eef3}
@media(max-width:800px){.cards{grid-template-columns:repeat(2,1fr)}}