:root{
  --bg:#0a0a0a; --bg-2:#101214; --panel:rgba(16,18,20,.72);
  --ink:#e5e4e2; --dim:#9aa5ad; --mute:#6a7681;
  --green:#6fc23d; --green-hi:#8fd64e; --green-deep:#3e7c26;
  --grad:linear-gradient(105deg,#9ade57 0%,#6fc23d 45%,#3e7c26 100%);
  --glow:radial-gradient(circle at 50% 50%,#6fc23d1f,transparent 60%);
  --line:rgba(229,228,226,.09);
  --slate:#536878;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --body:'Inter','Archivo',sans-serif;
  --disp:'Archivo',sans-serif;
  --radius:.5rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit}

/* ── textures ─────────────────────────────────────────── */
.grain-overlay{
  position:fixed; inset:-50%; width:200%; height:200%;
  pointer-events:none; z-index:2000; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain-shift 8s steps(10,end) infinite;
}
@keyframes grain-shift{0%,100%{transform:translate(0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,3%)}}
.grid-bg{
  background-image:linear-gradient(#e5e4e20b 1px,transparent 1px),
                   linear-gradient(90deg,#e5e4e20b 1px,transparent 1px);
  background-size:88px 88px;
}
.noise{position:relative}
.noise::before{content:"";position:absolute;inset:0;background:var(--glow);opacity:.55;pointer-events:none}
@keyframes blob{0%,100%{border-radius:42% 58% 70% 30%/45% 40% 60% 55%}50%{border-radius:70% 30% 40% 60%/60% 55% 45% 40%}}
.blob{
  position:absolute; top:-14rem; right:-14rem; width:600px; height:600px;
  background:var(--green); opacity:.07; filter:blur(80px);
  animation:blob 12s ease-in-out infinite; pointer-events:none;
}

/* ── nav ──────────────────────────────────────────────── */
.nav-wrap{position:fixed; inset-inline:0; top:22px; z-index:40; display:flex; justify-content:center; padding:0 20px}
nav{
  display:flex; align-items:center; gap:4px;
  border:1px solid var(--line); border-radius:999px;
  background:var(--panel); backdrop-filter:blur(20px);
  padding:8px 8px 8px 24px;
}
.brand{margin-right:16px; font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.14em; text-decoration:none}
.brand span{color:var(--green)}
.nav-links{display:none; align-items:center; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.16em}
.nav-links a{padding:11px 16px; border-radius:999px; color:var(--dim); text-decoration:none; transition:color .2s,background .2s}
.nav-links a:hover{background:rgba(255,255,255,.05); color:var(--ink)}
.nav-cta{
  border-radius:999px; background:var(--green); color:#0b0e08;
  padding:11px 22px; font-family:var(--mono); font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:.16em; text-decoration:none; transition:background .2s;
}
.nav-cta:hover{background:var(--green-hi)}
@media(min-width:640px){.nav-links{display:flex}}

/* ── layout ───────────────────────────────────────────── */
.wrap{max-width:1180px; margin:0 auto; padding:0 24px}
section{position:relative}
.hero{overflow:hidden; padding:150px 0 64px}
.back{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:12px; text-transform:uppercase;
  letter-spacing:.14em; color:var(--dim); text-decoration:none; transition:color .2s;
}
.back:hover{color:var(--ink)}
.badge{
  display:inline-flex; align-items:center; gap:10px; margin-top:40px;
  border:1px solid var(--line); border-radius:999px;
  background:rgba(10,12,9,.4); backdrop-filter:blur(8px);
  padding:11px 20px; font-family:var(--mono); font-size:11px;
  text-transform:uppercase; letter-spacing:.22em; color:var(--dim);
}
.dot{width:7px;height:7px;border-radius:999px;background:var(--green);box-shadow:0 0 10px var(--green)}
h1{
  font-family:var(--disp); font-weight:900; font-size:clamp(2.6rem,7.8vw,6.4rem);
  line-height:.92; letter-spacing:-.03em; text-transform:uppercase;
  margin:28px 0 0;
}
h1 em{
  font-style:italic; background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lede{max-width:52ch; margin-top:24px; color:var(--dim); font-size:1.06rem; font-weight:300}

/* ── console ──────────────────────────────────────────── */
.console{
  margin-top:52px; border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(180deg,rgba(16,18,20,.9),rgba(10,10,10,.9));
  backdrop-filter:blur(12px); overflow:hidden;
}
.console-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:14px 22px; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.18em; color:var(--mute);
}
.console-head .live{color:var(--green)}
.console-body{display:grid; grid-template-columns:1fr; gap:32px; padding:32px 22px}
@media(min-width:900px){
  .console-body{grid-template-columns:minmax(0,1fr) 300px; gap:44px; padding:38px 34px}
}
.field-label{font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.2em; color:var(--mute)}

.bpm-row{display:flex; align-items:flex-end; gap:18px; margin-top:14px; flex-wrap:wrap}
#bpm{
  width:3ch; background:none; border:none; padding:0; margin:0;
  font-family:var(--disp); font-weight:900; font-size:clamp(4rem,13vw,7rem);
  line-height:.85; letter-spacing:-.04em; color:var(--ink);
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
#bpm:focus{outline:none}
#bpm::-webkit-outer-spin-button,#bpm::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#bpm{-moz-appearance:textfield}
.bpm-unit{font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--mute); padding-bottom:14px}
.steppers{display:flex; gap:8px; padding-bottom:12px}
.btn{
  font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.14em;
  color:var(--dim); background:rgba(255,255,255,.03);
  border:1px solid var(--line); border-radius:999px;
  padding:9px 15px; cursor:pointer; transition:all .18s;
}
.btn:hover{background:rgba(111,194,61,.1); border-color:rgba(111,194,61,.4); color:var(--ink)}
.btn:active{transform:translateY(1px)}
.btn-tap{padding:9px 22px; color:var(--ink); border-color:rgba(111,194,61,.35)}
.btn-tap.armed{background:var(--green); color:#0b0e08; border-color:var(--green)}

input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:2px; margin-top:26px;
  background:linear-gradient(90deg,var(--green) var(--pct,25%),rgba(229,228,226,.12) var(--pct,25%));
  border-radius:2px; cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; border-radius:999px;
  background:var(--green); box-shadow:0 0 14px rgba(111,194,61,.6); cursor:grab;
}
input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border:none;border-radius:999px;background:var(--green);
  box-shadow:0 0 14px rgba(111,194,61,.6); cursor:grab;
}
.range-scale{display:flex; justify-content:space-between; margin-top:10px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--mute)}

.side{display:flex; flex-direction:column; gap:26px}
.readout{border-left:2px solid var(--green); padding-left:16px}
.readout .val{font-family:var(--mono); font-size:1.55rem; color:var(--ink); margin-top:6px; letter-spacing:-.01em}
.readout .val small{font-size:.75rem; color:var(--mute); letter-spacing:.14em; margin-left:4px}
.sig-row{display:flex; gap:6px; margin-top:12px; flex-wrap:wrap}
.sig{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  padding:8px 13px; border-radius:8px; cursor:pointer;
  border:1px solid var(--line); background:rgba(255,255,255,.02); color:var(--dim);
  transition:all .18s;
}
.sig:hover{color:var(--ink); border-color:rgba(111,194,61,.35)}
.sig.on{background:rgba(111,194,61,.14); border-color:var(--green); color:var(--green-hi)}
.presets{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}

/* ── tables ───────────────────────────────────────────── */
.block{padding:78px 0 0}
.block-head{display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; margin-bottom:8px}
.ch{font-family:var(--mono); font-size:11px; letter-spacing:.22em; color:var(--green); text-transform:uppercase}
h2{
  font-family:var(--disp); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.5rem,3.4vw,2.2rem); letter-spacing:-.02em; margin:0; line-height:1.05;
}
.block-sub{color:var(--mute); font-size:.92rem; max-width:60ch; margin:14px 0 26px; font-weight:300}
.table-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:rgba(16,18,20,.5)}
table{width:100%; border-collapse:collapse; min-width:600px; font-variant-numeric:tabular-nums}
thead th{
  font-family:var(--mono); font-size:10px; font-weight:500; text-transform:uppercase;
  letter-spacing:.18em; color:var(--mute); text-align:right;
  padding:16px 20px; border-bottom:1px solid var(--line); white-space:nowrap;
}
thead th:first-child{text-align:left}
tbody td{padding:0; border-bottom:1px solid rgba(229,228,226,.05)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:rgba(111,194,61,.035)}
.note-cell{
  padding:15px 20px; font-family:var(--mono); font-size:.86rem; color:var(--ink);
  letter-spacing:.04em; white-space:nowrap;
}
.note-cell b{font-weight:500}
.note-cell i{font-style:normal; color:var(--mute); font-size:.74rem; margin-left:8px; letter-spacing:.12em}
.cell{
  width:100%; height:100%; display:block; text-align:right;
  padding:15px 20px; background:none; border:none; cursor:pointer;
  font-family:var(--mono); font-size:.86rem; color:var(--ink);
  letter-spacing:.02em; transition:color .15s;
}
.cell:hover{color:var(--green-hi)}
.cell .hz{display:block; font-size:.7rem; color:var(--mute); margin-top:3px; letter-spacing:.1em}
.cell.copied{color:var(--green)}
td.primary .cell{color:var(--green-hi)}
.rv-name{padding:15px 20px; font-family:var(--mono); font-size:.86rem; letter-spacing:.03em; white-space:nowrap}
.rv-name i{font-style:normal; color:var(--mute); font-size:.74rem; margin-left:8px; letter-spacing:.12em}

/* ── notes ────────────────────────────────────────────── */
.notes{display:grid; gap:26px; grid-template-columns:1fr; margin-top:26px}
@media(min-width:820px){.notes{grid-template-columns:repeat(3,1fr); gap:34px}}
.note{border-top:1px solid var(--line); padding-top:20px}
.note h3{
  font-family:var(--mono); font-size:11px; font-weight:500; text-transform:uppercase;
  letter-spacing:.18em; color:var(--green); margin:0 0 12px;
}
.note p{margin:0; color:var(--dim); font-size:.92rem; font-weight:300}
.note p + p{margin-top:10px}
.note code{
  font-family:var(--mono); font-size:.82rem; color:var(--ink);
  background:rgba(255,255,255,.05); padding:2px 6px; border-radius:4px;
  white-space:nowrap; display:inline-block;
}

footer{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
  border-top:1px solid var(--line); margin-top:96px; padding:28px 40px;
  font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.16em; color:var(--mute);
}
footer b{font-weight:400; color:var(--ink)}
footer .tag{color:var(--green)}
@media(max-width:767px){footer{padding:28px 20px}}

/* ── toast ────────────────────────────────────────────── */
#toast{
  position:fixed; left:50%; bottom:34px; transform:translate(-50%,24px);
  background:var(--green); color:#0b0e08; border-radius:999px;
  padding:11px 24px; font-family:var(--mono); font-size:11px;
  text-transform:uppercase; letter-spacing:.16em; z-index:3000;
  opacity:0; pointer-events:none; transition:opacity .2s,transform .2s;
  box-shadow:0 0 24px rgba(111,194,61,.4);
}
#toast.show{opacity:1; transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}