@font-face{font-family:"Plex";src:url(/fonts/ibm-plex-sans-cyrillic-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Plex";src:url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212,U+2215}
@font-face{font-family:"Plex";src:url(/fonts/ibm-plex-sans-cyrillic-600-normal.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Plex";src:url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212,U+2215}
@font-face{font-family:"JBMono";src:url(/fonts/jetbrains-mono-cyrillic-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"JBMono";src:url(/fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2190-2199,U+2212}
@font-face{font-family:"JBMono";src:url(/fonts/jetbrains-mono-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2190-2199,U+2212}
@font-face{font-family:"JBMono";src:url(/fonts/jetbrains-mono-cyrillic-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

:root{
  /* корпус связного приёмника: графит, лампа подсветки шкалы — янтарь */
  --bg:#0f1113; --panel:#171a1d; --panel-2:#1d2125; --line:#2a2f34;
  --text:#ece9e2; --muted:#a3aab1; --amber:#ffb02e; --amber-dim:#7a5516; --brand:#3ddc84; --warn:#ff6b4a;
  --sans:"Plex",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JBMono",ui-monospace,"DejaVu Sans Mono",monospace;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;
  --r:6px; --wrap:1240px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.5 var(--sans)}
a{color:var(--amber)}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.mono{font-family:var(--mono)}

.top{max-width:var(--wrap);margin:0 auto;padding:var(--s3) var(--s4);display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.brand{display:flex;align-items:center;gap:var(--s2);text-decoration:none;color:var(--text);font:700 18px/1 var(--mono);letter-spacing:.04em}
.brand-mark{width:28px;height:28px}
.brand-host{font:400 13px/1 var(--mono);color:var(--muted);letter-spacing:0}
.top-status{display:flex;align-items:center;gap:var(--s2);font:400 13px/1 var(--mono);color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;background:#555}
.dot.ok{background:var(--brand);box-shadow:0 0 6px var(--brand)}
.dot.bad{background:var(--warn)}

main{max-width:var(--wrap);margin:0 auto;padding:0 var(--s4)}
.intro{padding:var(--s2) 0 var(--s4)}
h1{font:600 clamp(20px,2.4vw,28px)/1.2 var(--sans);margin:0 0 var(--s2);letter-spacing:-.01em}
.lede{margin:0;color:var(--muted);max-width:70ch}
h2{font:600 18px/1.3 var(--sans);margin:0 0 var(--s3)}

.rx{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);position:relative}
.rx-head{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s5);align-items:end;margin-bottom:var(--s4)}
.lbl{font:400 12px/1.2 var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.08em;display:block;margin-bottom:var(--s1)}
.freq-row{display:flex;align-items:baseline;gap:var(--s3)}
.freq{background:#0a0b0c;border:1px solid var(--line);border-radius:var(--r);color:var(--amber);font:700 clamp(30px,4vw,44px)/1 var(--mono);width:8.6ch;padding:6px 10px;text-shadow:0 0 12px rgba(255,176,46,.35);letter-spacing:.02em}
.freq:focus{border-color:var(--amber);outline:none}
.mode-tag{font:700 14px/1 var(--mono);color:var(--bg);background:var(--amber);padding:5px 7px;border-radius:3px}
.steps{display:flex;gap:var(--s2);margin-top:var(--s2);align-items:center}
.steps select{min-height:36px}
select{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);padding:6px 8px;min-height:40px}

.meter{min-width:0}
.meter-scale{position:relative;height:14px;background:#0a0b0c;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.meter-bar{height:100%;width:0;background:linear-gradient(90deg,#5a7d3a,var(--amber) 70%,var(--warn));transition:width .12s linear}
.meter-ticks{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(15,17,19,.9) calc(10% - 1px) 10%)}
.meter-num{font:400 13px/1.4 var(--mono);color:var(--muted);margin-top:var(--s1)}
.meter-num span{color:var(--text)}
.clip{font:400 12px/1.3 var(--mono);color:var(--warn);margin-top:2px}

.btn{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);padding:8px 14px;min-height:44px;cursor:pointer;transition:background .15s,border-color .15s}
.btn:hover{border-color:#4a525a;background:#23282d}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sm{min-width:40px;min-height:36px;padding:4px 10px;font-family:var(--mono)}
.play{background:var(--amber);color:#1a1205;border-color:var(--amber);font-weight:600;padding:10px 20px;min-height:48px}
.play:hover{background:#ffc25c;border-color:#ffc25c}
.play.on{background:transparent;color:var(--amber)}

.scope{position:relative;background:#06080a;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;touch-action:none;user-select:none;cursor:crosshair}
.scope canvas{display:block;width:100%}
.spec{height:110px}
.axis{height:22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel-2)}
.wf{height:min(46vh,380px)}
.wf-msg{position:absolute;left:0;right:0;bottom:40%;text-align:center;color:var(--muted);font:400 14px/1.4 var(--mono);pointer-events:none}
.scope-bar{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s2) 0 0;font:400 13px/1.3 var(--mono);color:var(--muted);flex-wrap:wrap}
.scope-bar b{color:var(--text);font-weight:400}
.zoom{display:flex;align-items:center;gap:var(--s2)}
.zoom .lbl{margin:0}

.controls{display:grid;grid-template-columns:auto auto 1fr;gap:var(--s4);margin-top:var(--s4)}
.group{border:0;margin:0;padding:0;min-width:0}
.group legend{font:400 12px/1.2 var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--s2);padding:0}
.seg{display:flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;width:max-content;max-width:100%}
.seg button{background:var(--panel-2);border:0;border-right:1px solid var(--line);padding:8px 12px;min-height:44px;min-width:52px;font:700 14px/1 var(--mono);cursor:pointer}
.seg button:last-child{border-right:0}
.seg button:hover{background:#23282d}
.seg button.on{background:var(--amber);color:#1a1205}
.sliders{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.slider{display:flex;flex-direction:column;gap:var(--s1);font-size:14px;color:var(--muted)}
.slider output{color:var(--text);font-family:var(--mono);font-size:13px}
input[type=range]{accent-color:var(--amber);width:100%;min-height:32px}

.shared{margin-top:var(--s5);padding-top:var(--s4);border-top:1px dashed var(--line)}
.shared-head{display:flex;gap:var(--s4);align-items:baseline;flex-wrap:wrap}
.shared-head h2{margin:0}
.note{margin:0;color:var(--muted);font-size:14px}
.presets{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s3) 0}
.preset{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;min-height:44px;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:2px}
.preset:hover{border-color:#4a525a}
.preset b{font-weight:600;font-size:14px}
.preset small{font:400 12px/1.2 var(--mono);color:var(--muted)}
.preset.on{border-color:var(--amber)}
.preset.on small{color:var(--amber)}
.shared-row{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap}
.shift{display:flex;gap:var(--s2)}
.gain{display:flex;align-items:center;gap:var(--s2);font-size:14px;color:var(--muted)}

.toast{position:absolute;left:50%;top:var(--s3);transform:translateX(-50%);background:#2b1d0c;border:1px solid var(--amber-dim);color:var(--text);padding:8px 14px;border-radius:var(--r);font-size:14px;z-index:5;max-width:90%}

.about{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);padding:var(--s7) 0 var(--s6)}
.about p,.about li{color:#cfd3d6;font-size:15px}
.about p{margin:0 0 var(--s3)}
.how,.limits{margin:0;padding:0;list-style:none;counter-reset:n}
.how li,.limits li{position:relative;padding-left:28px;margin-bottom:var(--s3)}
.how li::before{counter-increment:n;content:counter(n);position:absolute;left:0;top:1px;font:700 13px/20px var(--mono);color:var(--amber);width:20px;text-align:center;border:1px solid var(--amber-dim);border-radius:3px}
.limits li::before{content:"";position:absolute;left:4px;top:4px;width:2px;height:14px;background:var(--amber);box-shadow:5px 4px 0 -0px var(--amber-dim),10px 2px 0 var(--amber-dim)}

.foot{max-width:var(--wrap);margin:0 auto;padding:var(--s5) var(--s4) var(--s6);display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;border-top:1px solid var(--line);font-size:14px}
.back{color:var(--brand);text-decoration:none;font-family:var(--mono);padding:10px 0}
.back:hover{text-decoration:underline}
.foot-note{color:var(--muted);font-family:var(--mono);font-size:13px;padding:10px 0}

@media (max-width:900px){
  .controls{grid-template-columns:1fr}
  .about{grid-template-columns:1fr;gap:var(--s4)}
}
@media (max-width:640px){
  main{padding:0 var(--s2)}
  .top{padding:var(--s2) var(--s3)}
  .brand-host{display:none}
  .intro{padding:0 var(--s1) var(--s3)}
  .lede{font-size:14px}
  .rx{padding:var(--s3)}
  .rx-head{grid-template-columns:1fr auto;gap:var(--s3)}
  .meter{grid-column:1/-1;grid-row:2}
  .play{align-self:start}
  .spec{height:80px}
  .wf{height:42vh}
  .sliders{grid-template-columns:1fr}
  .seg{width:100%}
  .seg button{flex:1 1 0;min-width:0;padding:8px 4px}
  .shift{width:100%}.shift .btn{flex:1}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}