:root{
  --bg:#0a0b0c;
  --panel:#131517;
  --panel-line:#232629;
  --ink:#eef0ef;
  --ink-dim:#9aa1a0;
  --ink-faint:#5f6666;
  --accent:#e2543b;
  --accent-dim:#7a3327;
  --focus:#f2b134;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
}

*{box-sizing:border-box;}
html{background:var(--bg);}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:720px;margin:0 auto;padding:0 24px;}

a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px;}
a:hover{color:var(--focus);}

.top{padding:22px 24px;}
.top a{font-family:var(--mono);font-size:13px;color:var(--ink-dim);text-decoration:none;letter-spacing:.02em;}
.top a:hover{color:var(--accent);}

.langbar{font-family:var(--mono);font-size:13px;color:var(--ink-faint);margin:8px 0 30px;}
.langbar .current{color:var(--ink-dim);}
.langbar a{color:var(--ink-dim);text-decoration:none;border-bottom:1px solid var(--panel-line);}
.langbar a:hover{color:var(--accent);border-color:var(--accent);}

.masthead{margin-bottom:34px;}
.kicker{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 14px;}
h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.1rem,5.5vw,3rem);line-height:1.12;margin:0 0 18px;color:var(--ink);}
.deck{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.2rem;line-height:1.5;color:var(--ink-dim);margin:0;}

article h2{font-family:var(--serif);font-weight:600;font-size:1.5rem;margin:2.2em 0 .6em;color:var(--ink);}
article p{margin:0 0 1.1em;}
.lede{font-size:1.08rem;color:var(--ink);}

/* the instrument */
.instrument{
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:10px;
  padding:26px 22px 22px;
  margin:2em 0;
}
.instrument-label{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 4px;}
.instrument-title{font-family:var(--serif);font-weight:600;font-size:1.15rem;margin:0 0 16px;color:var(--ink);}

.field{background:#050606;border:1px solid var(--panel-line);border-radius:8px;height:150px;position:relative;overflow:hidden;margin-bottom:16px;}
.field::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--panel-line) 1px,transparent 1px),linear-gradient(90deg,var(--panel-line) 1px,transparent 1px);
  background-size:24px 24px;opacity:.35;
}
.cross{
  position:absolute;left:28px;top:50%;transform:translate(-50%,-50%);
  width:22px;height:22px;
}
.cross::before,.cross::after{content:"";position:absolute;background:var(--ink);}
.cross::before{left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);}
.cross::after{top:50%;left:0;right:0;height:2px;transform:translateY(-50%);}
.dot{
  position:absolute;top:50%;width:16px;height:16px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 14px 2px var(--accent-dim);
  transform:translate(-50%,-50%);
  left:28px;
}
.dot.is-hidden{opacity:0;}
@media (prefers-reduced-motion:no-preference){
  .dot{transition:opacity .08s linear;}
}

.slider-row{display:flex;align-items:center;gap:12px;margin-bottom:6px;}
.slider-row input[type=range]{flex:1;accent-color:var(--accent);}
.angle-readout{font-family:var(--mono);font-size:15px;color:var(--focus);min-width:64px;text-align:right;}

.instrument-actions{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 4px;}
button{
  font-family:var(--mono);font-size:13px;letter-spacing:.02em;
  background:var(--panel);border:1px solid var(--panel-line);color:var(--ink);
  padding:9px 14px;border-radius:7px;cursor:pointer;
}
button:hover{border-color:var(--accent);color:var(--accent);}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
button.primary{background:var(--accent-dim);border-color:var(--accent);color:#fff;}
button.primary:hover{background:var(--accent);}
button:disabled{opacity:.35;cursor:not-allowed;}
button:disabled:hover{border-color:var(--panel-line);color:var(--ink);}

.readout-line{font-family:var(--mono);font-size:14px;color:var(--ink-dim);margin:4px 0;min-height:1.4em;}
.readout-line strong{color:var(--ink);font-weight:600;}

.result-box{
  margin-top:16px;padding:16px;border-radius:8px;
  background:#0d1210;border:1px solid #294a3a;
  font-family:var(--mono);font-size:14px;color:var(--ink);
  display:none;
}
.result-box.is-visible{display:block;}
.result-box .big{font-size:1.6rem;color:var(--focus);display:block;margin-bottom:6px;}

.calib{margin-top:20px;padding-top:18px;border-top:1px dashed var(--panel-line);}
.calib summary{cursor:pointer;font-family:var(--mono);font-size:13px;color:var(--ink-dim);}
.calib summary:hover{color:var(--accent);}
.calib-body{margin-top:14px;}
.card-calib{background:#050606;border:1px solid var(--panel-line);border-radius:8px;height:70px;position:relative;margin-bottom:10px;overflow:hidden;}
.card-rect{position:absolute;left:8px;top:8px;bottom:8px;background:rgba(226,84,59,.18);border:1.5px solid var(--accent);border-radius:4px;}
.field-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
.field-row label{font-family:var(--mono);font-size:13px;color:var(--ink-dim);flex:0 0 auto;}
.field-row input[type=number]{
  width:80px;background:var(--panel);border:1px solid var(--panel-line);color:var(--ink);
  font-family:var(--mono);font-size:14px;padding:6px 8px;border-radius:6px;
}
.hint{font-size:13px;color:var(--ink-faint);margin:6px 0 0;}

.compare-table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:.95rem;}
.compare-table th,.compare-table td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--panel-line);}
.compare-table th{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);font-weight:500;}
.compare-table td.num{font-family:var(--mono);color:var(--focus);white-space:nowrap;}
.compare-table tr.mine td{color:var(--ink);font-weight:600;}
.compare-table tr.mine td.num{color:var(--accent);}

.method{margin-top:2.4em;padding-top:1.6em;border-top:1px solid var(--panel-line);}
.method h2{font-size:1.15rem;}
.method p{color:var(--ink-dim);font-size:.96rem;}

.limits{background:var(--panel);border:1px solid var(--panel-line);border-radius:8px;padding:16px 18px;margin:1.6em 0;font-size:.95rem;color:var(--ink-dim);}
.limits strong{color:var(--ink);}

footer{padding:40px 24px 60px;}
footer a{font-family:var(--mono);font-size:13px;color:var(--ink-faint);text-decoration:none;}
footer a:hover{color:var(--accent);}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

@media (max-width:480px){
  body{font-size:16.5px;}
  .field{height:130px;}
  .instrument{padding:20px 16px 18px;}
}