*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0d0d0f;--s:#141418;--p:#1a1a20;--b:#252530;
  --a:#d4923a;--a2:#f5b85a;--a3:#8a5e20;
  --t:#e8e2d9;--m:#6a6468;--d:#2a2830;
  --g:#4adc6a;--r:#dc4a4a;--bl:#4a8adc;
}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--t);min-height:100vh;overflow-x:hidden}
header{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;border-bottom:1px solid var(--b);background:rgba(13,13,15,.96);backdrop-filter:blur(16px);position:sticky;top:0;z-index:200}
.logo{font-family:'Playfair Display',serif;font-size:1.1rem;color:var(--a);line-height:1}
.logo small{display:block;font-family:'JetBrains Mono',monospace;font-size:.58rem;color:var(--m);letter-spacing:.12em;margin-top:1px}
nav{display:flex;gap:3px}
nav button{background:none;border:none;color:var(--m);font-family:'JetBrains Mono',monospace;font-size:.63rem;letter-spacing:.09em;text-transform:uppercase;padding:6px 13px;border-radius:6px;cursor:pointer;transition:.18s}
nav button:hover{color:var(--t);background:var(--p)}
nav button.on{color:var(--a);background:var(--p)}
main{max-width:1360px;margin:0 auto;padding:20px 20px 70px}
.tab{display:none}.tab.on{display:block}
.row{display:grid;gap:14px}
.row2{grid-template-columns:1fr 320px}
.row2b{grid-template-columns:1fr 1fr}
.row3{grid-template-columns:repeat(3,1fr)}
@media(max-width:880px){.row2,.row2b,.row3{grid-template-columns:1fr}}
.card{background:var(--s);border:1px solid var(--b);border-radius:8px;padding:18px}
.lbl{font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:var(--a);display:flex;align-items:center;gap:7px;margin-bottom:11px}
.lbl::after{content:'';flex:1;height:1px;background:var(--b)}
.ctrl{margin-bottom:14px}
.cr{display:flex;justify-content:space-between;margin-bottom:5px;font-size:.76rem}
.cr .k{color:var(--m)}.cr .v{font-family:'JetBrains Mono',monospace;color:var(--a2);font-size:.73rem}
input[type=range]{-webkit-appearance:none;width:100%;height:2px;background:var(--d);border-radius:2px;outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--a);border:2px solid var(--bg);box-shadow:0 0 8px rgba(212,146,58,.55);cursor:pointer;transition:transform .12s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.3)}
select{width:100%;background:var(--p);border:1px solid var(--b);color:var(--t);padding:6px 9px;border-radius:6px;font-family:'JetBrains Mono',monospace;font-size:.7rem;outline:none;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236a6468'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}
.stat{background:var(--p);border:1px solid var(--b);border-radius:6px;padding:9px 7px;text-align:center}
.stat .v{font-family:'JetBrains Mono',monospace;font-size:.9rem;color:var(--a2);display:block;margin-bottom:2px}
.stat .k{font-size:.56rem;color:var(--m);text-transform:uppercase;letter-spacing:.08em}
.pills{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:12px}
.pill{padding:4px 10px;border-radius:20px;border:1px solid var(--b);background:none;color:var(--m);font-family:'JetBrains Mono',monospace;font-size:.6rem;cursor:pointer;transition:.18s}
.pill:hover{border-color:var(--a3);color:var(--t)}.pill.on{border-color:var(--a);background:rgba(212,146,58,.1);color:var(--a)}
.tag{display:inline-block;font-size:.57rem;padding:2px 6px;border-radius:10px;font-family:'JetBrains Mono',monospace}
.tg{background:rgba(74,220,106,.12);color:#4adc6a;border:1px solid rgba(74,220,106,.22)}
.ty{background:rgba(212,146,58,.12);color:var(--a);border:1px solid rgba(212,146,58,.22)}
.tr{background:rgba(220,74,74,.12);color:#dc4a4a;border:1px solid rgba(220,74,74,.22)}
/* CANVAS WRAPPERS */
.cw{position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--b);background:#000;width:100%}
.cw canvas{display:block;width:100%}
/* VF frame corners */
.vc{position:absolute;width:13px;height:13px;border-color:rgba(212,146,58,.75);border-style:solid}
.vtl{top:7px;left:7px;border-width:2px 0 0 2px}
.vtr{top:7px;right:7px;border-width:2px 2px 0 0}
.vbl{bottom:7px;left:7px;border-width:0 0 2px 2px}
.vbr{bottom:7px;right:7px;border-width:0 2px 2px 0}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}
.rec{width:7px;height:7px;border-radius:50%;background:#e04040;box-shadow:0 0 5px #e04040;animation:blink 1.1s infinite;display:inline-block}
/* Table */
table{width:100%;border-collapse:collapse}
th{font-family:'JetBrains Mono',monospace;font-size:.57rem;letter-spacing:.1em;text-transform:uppercase;color:var(--m);padding:7px 9px;border-bottom:1px solid var(--b);text-align:left}
td{padding:6px 9px;font-size:.74rem;border-bottom:1px solid var(--b);font-family:'JetBrains Mono',monospace;color:var(--t)}
tr:hover td{background:var(--p)}tr.hl td{color:var(--a2)}
/* Tips */
.tips{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:11px}
.tip{background:var(--s);border:1px solid var(--b);border-left:3px solid var(--a3);border-radius:8px;padding:13px 15px}
.tip .badge{display:inline-block;background:rgba(212,146,58,.1);border:1px solid var(--a3);color:var(--a);font-family:'JetBrains Mono',monospace;font-size:.55rem;padding:2px 6px;border-radius:10px;margin-bottom:5px;text-transform:uppercase;letter-spacing:.07em}
.tip h3{font-size:.76rem;color:var(--t);margin-bottom:3px}.tip p{font-size:.7rem;color:var(--m);line-height:1.5}
.sbtn{width:100%;padding:10px;background:rgba(212,146,58,.1);border:1px solid var(--a3);color:var(--a);border-radius:6px;font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.1em;cursor:pointer;transition:.18s;margin-top:9px}
.sbtn:hover{background:rgba(212,146,58,.22);border-color:var(--a)}
footer{text-align:center;padding:18px;color:var(--m);font-size:.62rem;font-family:'JetBrains Mono',monospace;border-top:1px solid var(--b);letter-spacing:.05em}
/* Meter */
.meter{flex:1;height:3px;background:var(--d);border-radius:2px;position:relative;margin:0 8px}
.needle{position:absolute;top:-4px;width:2px;height:11px;background:var(--a);border-radius:1px;transition:left .25s}