/* ========== ТОКЕНЫ (из ui-kit RTR, без изменений) ========== */
:root{
  --ground:#FFFFFF;
  --surface:#F3F6FD;
  --surface-2:#E9EEFB;
  --line:#E1E7F6;
  --ink:#0B1020;
  --ink-2:#4A5474;
  --ink-3:#7B87A8;

  --blue:#2B54FF;          /* 1064 nm Nd:YAG */
  --blue-ink:#1B3AD1;
  --blue-soft:#E7ECFF;
  --green:#12B76A;         /* 532 nm KTP */
  --green-ink:#0A7C47;
  --green-soft:#DDF7EA;
  --ruby:#F0405A;          /* 694 nm рубин */
  --ruby-soft:#FFE4E8;
  --violet:#8B5CF6;        /* 755 nm александрит */
  --violet-soft:#EFE7FF;
  --amber:#F59E0B;
  --amber-soft:#FFF2D6;

  --on-accent:#FFFFFF;
  --skin:#E9C7AE;
  --skin-2:#D8AE92;

  --shadow-s:0 2px 8px rgba(11,16,32,.05);
  --shadow-m:0 10px 30px -12px rgba(27,58,209,.22);
  --shadow-l:0 28px 60px -30px rgba(27,58,209,.40);

  --card:#FFFFFF;
  --r-s:12px; --r-m:18px; --r-l:28px; --r-xl:36px;
  --pad-card:clamp(20px,2.4vw,30px);
  /* материалы: не зависят от темы */
  --scr-bg:#05070E; --scr-cell:#0E1322; --scr-track:#141B2E; --scr-line:#2F3A5C; --scr-ink:#7784A5;
  --pigment:#14141C; --doc-bg:#FFFFFF; --doc-line:#E7ECF7; --doc-box:#C9D3EE; --doc-border:#E1E7F6;
  --maxw:1180px;

  --f-display:"Unbounded","Trebuchet MS",sans-serif;
  --f-body:"Onest","Helvetica Neue",Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
}



/* ========== БАЗА ========== */
*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--f-body); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--f-display); font-weight:600; line-height:1.1; letter-spacing:-.02em; text-wrap:balance; margin:0}
h1{font-size:clamp(32px,4.4vw,54px); line-height:1.04}
h2{font-size:clamp(25px,3vw,36px)}
h3{font-size:21px; letter-spacing:-.01em}
h4{font-size:17px}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:6px}
button{font:inherit; cursor:pointer}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.lead{color:var(--ink-2); font-size:clamp(17px,1.5vw,20px)}
.num{font-family:var(--f-mono); font-variant-numeric:tabular-nums; white-space:nowrap}
.panel-hint{font-size:15px; color:var(--ink-2); max-width:58ch}
.toc-title{display:block; font-family:var(--f-body); font-size:13px; font-weight:600; color:var(--ink-3);
  padding:0 10px; margin-bottom:10px}
.calc-label{font-size:14px; color:var(--ink-3); margin-bottom:10px}
.calc-form-note{grid-column:1/-1; font-size:13px; color:var(--ink-3); margin-top:2px}
.sim-count{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.sim-of{font-size:15px; color:var(--ink-3)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; border:0; border-radius:999px;
  padding:15px 28px; font-weight:600; font-size:16px; text-decoration:none; white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease}
.btn-primary{background:var(--blue); color:var(--on-accent); box-shadow:var(--shadow-m)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:var(--shadow-l)}
.btn-ghost{background:var(--surface); color:var(--ink); border:1px solid var(--line)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-sm{padding:10px 18px; font-size:14px}

.chip{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px;
  font-size:13px; font-weight:600; background:var(--surface-2); color:var(--ink-2); white-space:nowrap}
.chip-mono{font-family:var(--f-mono); font-size:12px}
.chip.g{background:var(--green-soft); color:var(--green-ink)}
.chip.r{background:var(--ruby-soft); color:var(--ruby)}
.chip.v{background:var(--violet-soft); color:var(--violet)}
.chip.b{background:var(--blue-soft); color:var(--blue-ink)}
.chip.a{background:var(--amber-soft); color:var(--amber)}

/* ========== ШАПКА ========== */
header.site{position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--ground) 84%, transparent);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; gap:32px; height:68px}
.logo{display:flex; flex:0 0 auto; white-space:nowrap; align-items:center; gap:10px; font-family:var(--f-display); font-weight:700; font-size:18px; letter-spacing:-.03em; text-decoration:none}
.logo-mark{width:32px; height:32px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--blue),var(--violet)); color:#fff;
  font-family:var(--f-mono); font-size:11px; font-weight:600; letter-spacing:-.04em}
.nav-links{display:flex; gap:24px; margin-left:auto; font-size:15px; font-weight:500; color:var(--ink-2)}
.nav-links a{text-decoration:none}
.nav-links a:hover{color:var(--blue)}
.nav .btn{padding:13px 18px; font-size:15px}
@media (max-width:1000px){.nav-links{display:none}.nav .btn{margin-left:auto}}
@media (max-width:600px){.logo-text{display:none}.nav{gap:14px}}
.progress{position:absolute; left:0; bottom:-1px; height:2px; width:0;
  background:linear-gradient(90deg,var(--green),var(--blue),var(--violet)); transition:width .1s linear}