:root{
  --bg:#0a0e17; --bg2:#0d1220; --card:#111725; --card2:#0f1420;
  --line:#1c2434; --line2:#28324a;
  --text:#e8ecf4; --muted:#8792a8; --faint:#5b6579;
  --accent:#e8697a; --accent2:#f0808f;
  --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--text);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.5;
  padding-bottom:env(safe-area-inset-bottom);
}
.wrap{max-width:1040px; margin:0 auto; padding:0 20px}
a{color:inherit; text-decoration:none}
.dot{color:var(--accent)}

/* nav */
.nav{border-bottom:1px solid var(--line); background:rgba(10,14,23,.85); backdrop-filter:blur(8px); position:sticky; top:0; z-index:5}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:56px}
.brand{font-weight:700; letter-spacing:.22em; font-size:14px}
.nav-links{display:flex; gap:26px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.nav-links a.active{color:var(--text)}
.nav-links a[data-x]{opacity:.55}

/* header */
.kicker{margin:34px 0 0; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted)}
.title{margin:.15em 0 0; font-size:clamp(38px,7vw,64px); font-weight:600; letter-spacing:-.01em}
.lede{margin:14px 0 0; color:var(--muted); font-size:14px; max-width:640px}

/* callout */
.callout{border:1px solid rgba(232,105,122,.4); border-radius:var(--radius); padding:16px 20px; margin:26px 0 30px; background:rgba(232,105,122,.04)}
.callout-title{margin:0 0 12px; color:var(--accent); font-size:11px; letter-spacing:.24em; text-transform:uppercase; font-weight:600}
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; font-size:13px; color:var(--text)}
.steps .num{color:var(--muted); margin-right:10px; font-size:11px; letter-spacing:.1em}

/* tabs */
.tabs{display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line); margin-bottom:8px}
.tab{background:none; border:0; color:var(--muted); padding:16px 8px 14px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px; border-bottom:2px solid transparent; margin-bottom:-1px; font-family:inherit}
.tab .tnum{font-size:10px; letter-spacing:.2em}
.tab span:last-child{font-size:12px; letter-spacing:.22em; text-transform:uppercase}
.tab.active{color:var(--text); border-bottom-color:var(--accent)}

/* panels */
.panel{display:none; padding:28px 0 60px}
.panel.active{display:block}
.step{margin:0; font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--muted)}
.h2{margin:.2em 0 22px; font-size:clamp(24px,4vw,32px); font-weight:600}

/* card + fields */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; display:grid; gap:22px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.field{display:grid; gap:10px; min-width:0}
.field label{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.row-between{display:flex; align-items:center; justify-content:space-between}
.iso-readout{font-size:12px; color:var(--text); letter-spacing:.08em}

/* segmented */
.seg{display:grid; grid-template-columns:1fr 1fr; gap:6px; background:var(--card2); border:1px solid var(--line); border-radius:8px; padding:5px}
.seg button{background:none; border:0; color:var(--muted); padding:11px; border-radius:5px; cursor:pointer; font-family:inherit; font-size:14px; transition:.15s}
.seg button.on{background:#f2f4fa; color:#0a0e17; font-weight:600}

/* range */
.range{position:relative; height:26px; margin-top:2px}
.range-track,.range-fill{position:absolute; top:11px; height:4px; border-radius:3px}
.range-track{left:0; right:0; background:var(--line2)}
.range-fill{background:var(--accent)}
.range input[type=range]{position:absolute; top:0; left:0; width:100%; height:26px; margin:0; background:none; pointer-events:none; -webkit-appearance:none; appearance:none}
.range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; pointer-events:auto; width:18px; height:18px; border-radius:50%; background:#f2f4fa; border:2px solid #0a0e17; box-shadow:0 0 0 1px var(--line2); cursor:pointer}
.range input[type=range]::-moz-range-thumb{pointer-events:auto; width:18px; height:18px; border-radius:50%; background:#f2f4fa; border:2px solid #0a0e17; cursor:pointer}
.ticks{display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-top:2px}

/* select */
.select{position:relative}
.select::after{content:"\25be"; position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; font-size:12px}
.select select{width:100%; appearance:none; -webkit-appearance:none; background:var(--card2); border:1px solid var(--line); color:var(--text); padding:12px 34px 12px 14px; border-radius:8px; font-family:inherit; font-size:14px; cursor:pointer}
.select select:focus{outline:none; border-color:var(--line2)}

/* qr */
.qr-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin-top:22px}
.qr-head{display:flex; align-items:center; justify-content:space-between; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:16px}
.qr-head .live{width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent)}
.qr{background:#fff; border-radius:8px; padding:22px; display:flex; justify-content:center; align-items:center; min-height:240px}
.qr svg{width:100%; max-width:300px; height:auto; display:block}
.qr-actions{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:16px; flex-wrap:wrap}
.cmd{font-family:ui-monospace,"Cascadia Code",Consolas,monospace; font-size:12px; color:var(--muted); word-break:break-all; flex:1; min-width:0}
.ghost{background:none; border:1px solid var(--line2); color:var(--text); padding:9px 16px; border-radius:7px; cursor:pointer; font-family:inherit; font-size:12px; letter-spacing:.08em; white-space:nowrap}
.ghost:hover{border-color:var(--accent); color:var(--accent)}

/* subtabs */
.subtabs{display:grid; grid-template-columns:1fr 1fr; gap:0; background:var(--card2); border:1px solid var(--line); border-radius:8px; overflow:hidden; margin-bottom:18px}
.subtab{background:none; border:0; color:var(--muted); padding:15px; cursor:pointer; font-family:inherit; font-size:12px; letter-spacing:.16em; text-transform:uppercase; border-bottom:2px solid transparent}
.subtab.active{color:var(--text); border-bottom-color:var(--accent)}
.reset-note{color:var(--muted); font-size:13px; margin:0 0 18px}

/* cta */
.cta{width:100%; background:var(--accent); border:0; color:#1a0a0d; font-weight:600; padding:16px; border-radius:8px; cursor:pointer; font-family:inherit; font-size:12px; letter-spacing:.16em; text-transform:uppercase; transition:.15s}
.cta:hover{background:var(--accent2)}
.cta.done{background:#2b8a5f; color:#eafff4}

/* toast */
.toast{position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); background:#f2f4fa; color:#0a0e17; padding:11px 20px; border-radius:8px; font-size:13px; font-weight:500; opacity:0; pointer-events:none; transition:.25s; z-index:20}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

@media (max-width:640px){
  .grid2,.grid3,.steps{grid-template-columns:1fr}
  .title{font-size:44px}
}