/* ═══════════════════════════════════════════════════════════════
   OuRi — чёрно-белая дизайн-система
   ═══════════════════════════════════════════════════════════════ */

/* ---------- токены ---------- */
:root{
  --bg:#08080a; --bg2:#0d0d10; --surface:#111114; --surface2:#17171b;
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.18);
  --text:#f4f4f5; --text2:#c8c8cd; --muted:#8b8b93; --muted2:#5f5f68;
  --inv:#08080a; --inv-text:#fff;
  --ok:#fff; --shadow:0 24px 60px -20px rgba(0,0,0,.85);
  --r:14px; --r-sm:10px; --r-lg:22px;
  --fs:16px; --gap:clamp(16px,2.2vw,28px);
  --maxw:1240px; --nav-h:66px;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --grain:.05; --noise-on:1;
  --font:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-d:"Space Grotesk",-apple-system,"Inter","Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
[data-theme="light"]{
  --bg:#f6f5f3; --bg2:#fff; --surface:#fff; --surface2:#f1f0ee;
  --line:rgba(0,0,0,.10); --line2:rgba(0,0,0,.20);
  --text:#0b0b0d; --text2:#26262b; --muted:#63636b; --muted2:#9a9aa2;
  --inv:#fff; --inv-text:#0b0b0d; --shadow:0 20px 50px -24px rgba(0,0,0,.35);
  --grain:.04;
}
html[data-contrast="high"]{ --line:rgba(255,255,255,.3); --line2:rgba(255,255,255,.5); --muted:#c9c9d0; }
[data-theme="light"][data-contrast="high"]{ --line:rgba(0,0,0,.3); --line2:rgba(0,0,0,.55); --muted:#3a3a40; }
html[data-scale="lg"]{ --fs:18px } html[data-scale="xl"]{ --fs:20px } html[data-scale="sm"]{ --fs:14.5px }
html[data-motion="off"] *{ animation:none!important; transition:none!important }

*,*::before,*::after{ box-sizing:border-box }
html{ font-size:var(--fs); scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:1rem; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; min-height:100vh;
}
body.is-locked{ overflow:hidden }
img,svg{ display:block; max-width:100% }
button,input,select,textarea{ font:inherit; color:inherit }
a{ color:inherit; text-decoration:none }
::selection{ background:var(--text); color:var(--bg) }
:focus-visible{ outline:2px solid var(--text); outline-offset:3px; border-radius:4px }

/* ---------- фон ---------- */
#bg{ position:fixed; inset:0; width:100%; height:100%; z-index:0; opacity:.55; pointer-events:none }
.grid-overlay{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:88px 88px; mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 20%,transparent 78%);
}
.vignette{ position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 120% 80% at 50% -10%,transparent 40%,rgba(0,0,0,.55) 100%); }
[data-theme="light"] .vignette{ background:radial-gradient(ellipse 120% 80% at 50% -10%,transparent 45%,rgba(0,0,0,.07) 100%) }
.grain{
  position:fixed; inset:-50%; z-index:2; pointer-events:none; opacity:calc(var(--grain)*var(--noise-on));
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation:grainShift 6s steps(6) infinite;
}
@keyframes grainShift{ 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)} 80%{transform:translate(3%,1%)} 100%{transform:translate(0,0)} }
html[data-grain="off"] .grain{ display:none }

/* ---------- утилиты ---------- */
[hidden]{ display:none!important }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.skip-link{ position:fixed; top:8px; left:8px; z-index:200; background:var(--text); color:var(--bg); padding:10px 16px; border-radius:10px; transform:translateY(-160%); transition:transform .2s }
.skip-link:focus{ transform:none }
.muted{ color:var(--muted) } .sm{ font-size:.85rem } .num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums }
.kicker{ display:inline-block; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); font-weight:600 }
.h1{ font-family:var(--font-d); font-size:clamp(2.6rem,7vw,5.2rem); line-height:.98; letter-spacing:-.035em; font-weight:700; margin:.1em 0 .3em }
.h1-sm{ font-family:var(--font-d); font-size:clamp(1.7rem,3.6vw,2.6rem); line-height:1.05; letter-spacing:-.03em; font-weight:700; margin:0 }
.h2{ font-family:var(--font-d); font-size:clamp(1.5rem,3vw,2.15rem); line-height:1.1; letter-spacing:-.025em; font-weight:700; margin:0 }
.h3{ font-family:var(--font-d); font-size:1.15rem; letter-spacing:-.01em; font-weight:600; margin:0 }
.lead{ font-size:clamp(1.02rem,1.4vw,1.2rem); color:var(--text2); max-width:62ch; line-height:1.6 }
.sep{ opacity:.35; padding:0 6px }

.screen{ position:relative; z-index:3; max-width:var(--maxw); margin:0 auto; padding:calc(var(--nav-h) + 28px) var(--gap) 90px }
.screen[hidden]{ display:none }
.screen--home{ padding-top:calc(var(--nav-h) + 12px) }
.screen--quiz{ max-width:1060px }
.block{ margin-top:clamp(56px,8vw,104px) }
.block--tight{ margin-top:36px }
.block__head{ margin-bottom:26px; max-width:74ch }
.block__head .h2{ margin-top:8px }
.block__head .muted{ margin-top:10px }
.block--split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:start }

/* ---------- кнопки ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px; justify-content:center;
  padding:12px 20px; border-radius:999px; border:1px solid var(--line2); background:transparent;
  color:var(--text); font-weight:600; font-size:.92rem; letter-spacing:-.01em; cursor:pointer;
  transition:transform .18s var(--ease),background .2s,color .2s,border-color .2s,box-shadow .25s;
  overflow:hidden; isolation:isolate; white-space:nowrap;
}
.btn:hover{ border-color:var(--text) }
.btn:active{ transform:translateY(1px) scale(.99) }
.btn[disabled]{ opacity:.35; pointer-events:none }
.btn--primary{ background:var(--text); color:var(--bg); border-color:var(--text) }
.btn--primary::after{
  content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.45) 50%,transparent 80%);
  transform:translateX(-120%); transition:transform .7s var(--ease-out);
}
[data-theme="light"] .btn--primary::after{ background:linear-gradient(120deg,transparent 20%,rgba(0,0,0,.18) 50%,transparent 80%) }
.btn--primary:hover::after{ transform:translateX(120%) }
.btn--primary:hover{ box-shadow:0 10px 30px -12px rgba(255,255,255,.35) }
[data-theme="light"] .btn--primary:hover{ box-shadow:0 10px 26px -14px rgba(0,0,0,.4) }
.btn--ghost:hover{ background:var(--surface2) }
.btn--sm{ padding:9px 15px; font-size:.83rem }
.btn--xs{ padding:6px 11px; font-size:.76rem; border-radius:8px }
.btn--lg{ padding:15px 26px; font-size:1rem }
.btn--danger:hover{ border-color:#fff; background:#fff; color:#000 }
.icon-btn{
  display:inline-flex; align-items:center; gap:6px; justify-content:center; width:38px; height:38px;
  border-radius:11px; border:1px solid var(--line); background:transparent; cursor:pointer; color:var(--text2);
  transition:.18s var(--ease);
}
.icon-btn .mute-x{ display:none }
body.no-sound .icon-btn .mute-x{ display:inline }
body.no-sound .icon-btn .wave1, body.no-sound .icon-btn .wave2{ display:none }
.icon-btn:hover{ color:var(--text); border-color:var(--line2); background:var(--surface2); transform:translateY(-1px) }
.icon-btn[aria-pressed="false"]{ opacity:.45 }
.icon-btn--wide{ width:auto; padding:0 11px }
.icon-btn kbd{ font-family:var(--font-mono); font-size:.68rem; opacity:.7 }
kbd{ font-family:var(--font-mono); font-size:.74rem; border:1px solid var(--line2); border-bottom-width:2px; padding:1px 6px; border-radius:6px; background:var(--surface2) }

/* ---------- навигация ---------- */
.scroll-progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:60; background:transparent }
.scroll-progress i{ display:block; height:100%; width:0; background:var(--text); transition:width .1s linear }
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50; height:var(--nav-h);
  backdrop-filter:blur(14px) saturate(1.2); background:color-mix(in srgb,var(--bg) 72%,transparent);
  border-bottom:1px solid transparent; transition:border-color .3s,background .3s,height .3s;
}
.nav.is-stuck{ border-bottom-color:var(--line); background:color-mix(in srgb,var(--bg) 88%,transparent) }
.nav__in{ max-width:var(--maxw); margin:0 auto; height:100%; padding:0 var(--gap); display:flex; align-items:center; gap:18px }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-d); font-weight:700; letter-spacing:-.02em }
.brand__logo{ width:34px; height:34px; border-radius:10px; transition:transform .5s var(--ease-out),filter .3s; filter:grayscale(1) contrast(1.05) }
.brand:hover .brand__logo{ transform:rotate(-8deg) scale(1.06) }
.brand__name{ display:flex; font-size:1.16rem; line-height:1; overflow:hidden }
.brand__name .ltr{ display:flex; overflow:hidden; white-space:nowrap; padding-right:0; transition:padding-right .55s var(--ease-out) }
.brand__name .ltr b{ font-weight:700 }
.brand__name .ltr i{ font-style:normal; max-width:0; opacity:0; overflow:hidden;
  transition:max-width .55s var(--ease-out),opacity .35s ease; }
.brand:hover .brand__name .ltr i,.brand:focus-visible .brand__name .ltr i{ max-width:9ch; opacity:1 }
.brand:hover .brand__name .ltr,.brand:focus-visible .brand__name .ltr{ padding-right:.32em }
.brand:hover .brand__name .ltr:last-child,.brand:focus-visible .brand__name .ltr:last-child{ padding-right:0 }
.brand:hover .brand__name .ltr:nth-child(2) i{ transition-delay:.06s }
.brand:hover .brand__name .ltr:nth-child(3) i{ transition-delay:.12s }
@media (hover:none){ .brand__name{ font-size:1.02rem } .brand__name .ltr i{ max-width:0!important; opacity:0!important } }
.brand__dot{ width:5px; height:5px; border-radius:50%; background:var(--text); margin-left:2px; animation:blink 2.6s infinite }
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.15} }
.nav__links{ display:flex; gap:4px; margin-left:auto }
.nav__link{ position:relative; padding:8px 13px; border-radius:999px; font-size:.87rem; color:var(--muted); font-weight:500; transition:.2s }
.nav__link:hover{ color:var(--text); background:var(--surface2) }
.nav__link.is-on{ color:var(--text) }
.nav__link.is-on::after{ content:""; position:absolute; left:13px; right:13px; bottom:3px; height:1.5px; background:var(--text) }
.nav__right{ display:flex; align-items:center; gap:7px; margin-left:8px }
.nav__burger{ display:none }
.xp-pill{ display:flex; align-items:center; gap:8px; padding:5px 12px 5px 5px; border:1px solid var(--line); border-radius:999px; background:var(--surface) }
.xp-ring-wrap{ position:relative; width:30px; height:30px; display:block }
.xp-ring{ width:30px; height:30px; transform:rotate(-90deg) }
.xp-ring circle{ fill:none; stroke-width:3 }
.xp-ring__bg{ stroke:var(--line) }
.xp-ring__fg{ stroke:var(--text); stroke-linecap:round; stroke-dasharray:97.4; stroke-dashoffset:97.4; transition:stroke-dashoffset .8s var(--ease-out) }
.xp-pill__lv{ position:absolute; inset:0; display:grid; place-items:center; font-size:.66rem; font-weight:700; font-family:var(--font-mono); margin:0 }
.xp-pill__txt{ display:flex; flex-direction:column; line-height:1 }
.xp-pill__txt b{ font-size:.82rem; font-family:var(--font-mono) }
.xp-pill__txt i{ font-style:normal; font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
.nav.is-mini .xp-pill__txt{ display:none }

/* ---------- hero ---------- */
.hero{ padding:clamp(28px,6vw,74px) 0 0; position:relative }
.hero__badge{ display:inline-flex; align-items:center; gap:9px; padding:7px 15px; border:1px solid var(--line); border-radius:999px;
  background:var(--surface); font-size:.78rem; color:var(--text2); letter-spacing:.01em }
.dot-live{ width:7px; height:7px; border-radius:50%; background:var(--text); box-shadow:0 0 0 0 var(--text); animation:ping 2s infinite }
@keyframes ping{ 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--text) 60%,transparent)} 70%{box-shadow:0 0 0 9px transparent} 100%{box-shadow:0 0 0 0 transparent} }
.hero__title{ font-family:var(--font-d); font-weight:800; font-size:clamp(3rem,11vw,8.6rem); line-height:.9; letter-spacing:-.045em; margin:22px 0 0 }
.hero__title .line{ display:block; overflow:hidden }
.hero__title .line__in{ display:block; transform:translateY(105%); transition:transform 1s var(--ease-out); transition-delay:var(--d,0s) }
.is-ready .hero__title .line__in{ transform:none }
.line__in--out{ -webkit-text-stroke:1.4px var(--text); color:transparent; padding-left:.06em }
[data-theme="light"] .line__in--out{ -webkit-text-stroke:1.4px var(--text) }
.hero__sub{ max-width:60ch; margin:26px 0 0; color:var(--text2); font-size:clamp(1rem,1.35vw,1.14rem); line-height:1.65 }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px }
.hero__stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:clamp(34px,5vw,58px) 0 0; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden }
.hero__stats>div{ background:var(--bg); padding:18px 16px; transition:background .25s }
.hero__stats>div:hover{ background:var(--surface2) }
.hero__stats dt{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600 }
.hero__stats dd{ margin:6px 0 0; font-family:var(--font-d); font-size:clamp(1.5rem,3.4vw,2.4rem); font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums }

/* ---------- бегущая строка ---------- */
.ticker{ margin-top:clamp(34px,5vw,60px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; padding:13px 0; background:var(--surface) }
.ticker__track{ display:flex; gap:44px; width:max-content; animation:marquee 46s linear infinite }
.ticker:hover .ticker__track{ animation-play-state:paused }
.ticker span{ font-family:var(--font-d); font-size:.9rem; letter-spacing:.02em; color:var(--text2); display:flex; align-items:center; gap:14px; white-space:nowrap }
.ticker span::after{ content:"◆"; font-size:.5rem; opacity:.4; margin-left:30px }
@keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- быстрый старт ---------- */
.quickwrap{ display:grid; grid-template-columns:1.35fr .8fr; gap:var(--gap); margin-top:clamp(34px,5vw,58px); align-items:start }
.quick{ border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(20px,3vw,32px); background:linear-gradient(180deg,var(--surface),transparent 60%),var(--bg) }
.quick__head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px }
.quick__steps{ list-style:none; margin:0 0 24px; padding:0; display:grid; gap:2px; counter-reset:qs }
.quick__steps li{ display:flex; align-items:center; gap:14px; padding:13px 14px; border-radius:var(--r-sm); border:1px solid transparent; transition:.2s; cursor:pointer; background:var(--surface) }
.quick__steps li:hover{ border-color:var(--line2); transform:translateX(3px) }
.quick__steps li.is-on{ border-color:var(--text); background:var(--surface2) }
.quick__steps li::before{ counter-increment:qs; content:"0" counter(qs); font-family:var(--font-mono); font-size:.72rem; color:var(--muted); width:26px }
.quick__steps b{ font-weight:600; font-size:.95rem }
.quick__steps i{ font-style:normal; margin-left:auto; font-size:.82rem; color:var(--muted); font-family:var(--font-mono); text-align:right; max-width:52%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.quick__aside{ display:grid; gap:var(--gap) }
.panel{ border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:20px }
.panel--wide{ margin-top:var(--gap) }
.panel__t{ font-family:var(--font-d); font-size:1rem; font-weight:600; margin:0 0 6px; letter-spacing:-.01em }
.panel__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px }
.panel__foot{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line) }
.daily{ margin-top:14px; display:grid; gap:9px }
.daily__row{ display:flex; align-items:center; gap:11px; padding:11px 13px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg2); transition:.2s }
.daily__row:hover{ border-color:var(--line2) }
.daily__row b{ font-size:.9rem } .daily__row i{ font-style:normal; margin-left:auto; font-family:var(--font-mono); font-size:.75rem; color:var(--muted) }
.recent{ display:grid; gap:7px; margin-top:12px }
.recent__i{ display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:var(--r-sm); background:var(--bg2); border:1px solid var(--line); font-size:.85rem }
.recent__i b{ margin-left:auto; font-family:var(--font-mono) }
.recent__i .bar{ width:44px; height:4px; border-radius:2px; background:var(--line); overflow:hidden }
.recent__i .bar i{ display:block; height:100%; background:var(--text) }
.empty{ color:var(--muted); font-size:.86rem; padding:10px 2px }

/* ---------- блоки «как это работает» / режимы ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden }
.step-card{ background:var(--bg); padding:26px 22px 30px; position:relative; transition:background .3s }
.step-card:hover{ background:var(--surface2) }
.step-card__n{ font-family:var(--font-mono); font-size:.72rem; color:var(--muted); letter-spacing:.14em }
.step-card h4{ font-family:var(--font-d); font-size:1.06rem; margin:12px 0 8px; letter-spacing:-.01em }
.step-card p{ margin:0; color:var(--muted); font-size:.88rem; line-height:1.55 }
.step-card::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--text); transition:width .5s var(--ease-out) }
.step-card:hover::after{ width:100% }

.modes{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap) }
.modes--sm{ grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px }
.mode{ position:relative; border:1px solid var(--line); border-radius:var(--r); padding:20px; background:var(--surface); cursor:pointer; text-align:left;
  transition:.25s var(--ease); overflow:hidden }
.mode:hover{ border-color:var(--line2); transform:translateY(-3px) }
.mode.is-on{ border-color:var(--text); background:var(--surface2) }
.mode.is-on::before{ content:""; position:absolute; top:12px; right:12px; width:8px; height:8px; border-radius:50%; background:var(--text); animation:ping 2s infinite }
.mode__ico{ font-size:1.35rem; margin-bottom:12px; font-family:var(--font-d); font-weight:700; letter-spacing:-.02em; color:var(--text) }
.mode h4{ font-family:var(--font-d); margin:0 0 6px; font-size:1.02rem; letter-spacing:-.01em }
.mode p{ margin:0; color:var(--muted); font-size:.83rem; line-height:1.5 }
.mode__tag{ display:inline-block; margin-top:12px; font-family:var(--font-mono); font-size:.68rem; color:var(--muted); border:1px solid var(--line); padding:2px 8px; border-radius:999px }

.keys{ display:grid; gap:8px }
.key-row{ display:flex; align-items:center; gap:12px; padding:11px 14px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); font-size:.88rem }
.key-row kbd{ min-width:34px; text-align:center }
.key-row span{ margin-left:auto; color:var(--muted) }

/* ---------- предметы на главной ---------- */
.subj-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px }
.subj-card{ position:relative; border:1px solid var(--line); border-radius:var(--r); padding:18px; background:var(--surface); cursor:pointer; overflow:hidden; transition:.25s var(--ease) }
.subj-card:hover{ transform:translateY(-4px); border-color:var(--line2); background:var(--surface2) }
.subj-card__ico{ font-family:var(--font-d); font-size:1.1rem; font-weight:700; opacity:.9; letter-spacing:.02em; border:1px solid var(--line2); border-radius:9px; width:38px; height:38px; display:grid; place-items:center }
.subj-card h4{ font-family:var(--font-d); font-size:1rem; margin:10px 0 4px; letter-spacing:-.01em }
.subj-card p{ margin:0; font-size:.76rem; color:var(--muted); font-family:var(--font-mono) }
.subj-card__grades{ position:absolute; top:14px; right:14px; font-family:var(--font-mono); font-size:.66rem; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:2px 8px }

/* ---------- фичи ---------- */
.feat-filter{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:20px }
.chip{ border:1px solid var(--line); background:transparent; color:var(--muted); border-radius:999px; padding:6px 14px; font-size:.8rem; cursor:pointer; transition:.2s }
.chip:hover{ color:var(--text); border-color:var(--line2) }
.chip.is-on{ background:var(--text); color:var(--bg); border-color:var(--text) }
.feat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:10px }
.feat{ border:1px solid var(--line); border-radius:var(--r-sm); padding:14px 15px; background:var(--surface); display:flex; gap:11px; align-items:flex-start; transition:.2s }
.feat:hover{ border-color:var(--line2); transform:translateY(-2px) }
.feat i{ font-style:normal; font-family:var(--font-mono); font-size:.7rem; color:var(--muted); padding-top:2px; min-width:22px }
.feat b{ display:block; font-size:.9rem; font-weight:600; letter-spacing:-.01em }
.feat span{ display:block; font-size:.78rem; color:var(--muted); line-height:1.45; margin-top:3px }
#featMore{ margin-top:16px }

.cta-band{ margin-top:clamp(56px,8vw,100px); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(30px,5vw,58px);
  background:linear-gradient(160deg,var(--surface),transparent 70%),var(--bg); text-align:center }
.cta-band .h2{ font-size:clamp(1.7rem,4vw,2.8rem) }
.cta-band p{ margin:12px auto 24px; max-width:48ch }

/* ---------- конструктор теста ---------- */
.setup{ display:grid; gap:30px }
.setup__head{ max-width:70ch }
.setup__head .h1-sm{ margin:10px 0 8px }
.stepper{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0 }
.stepper li{ display:flex; align-items:center; gap:9px; padding:8px 14px; border:1px solid var(--line); border-radius:999px; font-size:.8rem; color:var(--muted); background:var(--surface); transition:.25s }
.stepper li b{ font-family:var(--font-mono); font-size:.72rem }
.stepper li.is-on{ color:var(--bg); background:var(--text); border-color:var(--text) }
.stepper li.is-done{ color:var(--text); border-color:var(--line2) }
.step{ border-top:1px solid var(--line); padding-top:22px }
.step__t{ display:flex; align-items:center; gap:12px; font-family:var(--font-d); font-size:1.12rem; font-weight:600; margin:0 0 16px; letter-spacing:-.01em }
.step__n{ font-family:var(--font-mono); font-size:.72rem; color:var(--muted); border:1px solid var(--line); border-radius:6px; padding:2px 7px }
.step__note{ margin-top:12px; font-size:.83rem; color:var(--muted) }
.opt{ font-style:normal; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:2px 8px; margin-left:6px }

.grades{ display:grid; grid-template-columns:repeat(auto-fit,minmax(64px,1fr)); gap:9px }
.grade{ position:relative; aspect-ratio:1/1.05; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; cursor:pointer; transition:.22s var(--ease); overflow:hidden }
.grade:hover{ transform:translateY(-4px); border-color:var(--line2) }
.grade.is-on{ background:var(--text); color:var(--bg); border-color:var(--text) }
.grade b{ font-family:var(--font-d); font-size:1.5rem; font-weight:700; letter-spacing:-.03em; line-height:1 }
.grade i{ font-style:normal; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; opacity:.6 }
.grade::after{ content:""; position:absolute; inset:auto 0 0 0; height:2px; background:currentColor; opacity:0; transition:opacity .2s }
.grade.is-on::after{ opacity:.25 }

.setup__search,.lib__search{ display:flex; align-items:center; gap:9px; border:1px solid var(--line); border-radius:999px; padding:9px 16px; background:var(--surface); margin-bottom:16px; max-width:420px }
.setup__search input,.lib__search input{ border:0; background:transparent; outline:none; width:100%; font-size:.9rem }
.setup__search svg,.lib__search svg{ color:var(--muted); flex:none }

.subjects{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px }
.subj{ border:1px solid var(--line); border-radius:var(--r-sm); padding:14px; background:var(--surface); cursor:pointer; text-align:left; transition:.22s var(--ease); position:relative; overflow:hidden }
.subj:hover{ border-color:var(--line2); transform:translateY(-2px) }
.subj.is-on{ border-color:var(--text); background:var(--surface2) }
.subj__top{ display:flex; align-items:center; gap:10px }
.subj__ico{ width:36px; height:36px; flex:none; border:1px solid var(--line2); border-radius:10px; display:grid; place-items:center; font-family:var(--font-d); font-weight:700; font-size:.78rem; letter-spacing:.03em }
.subj.is-on .subj__ico{ background:var(--text); color:var(--bg); border-color:var(--text) }
.subj b{ display:block; font-size:.9rem; font-weight:600 }
.subj i{ font-style:normal; display:block; font-size:.72rem; color:var(--muted); font-family:var(--font-mono); margin-top:2px }
.subj.is-off{ opacity:.32; pointer-events:none }

.quarters{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px }
.quarter{ border:1px solid var(--line); border-radius:var(--r-sm); padding:16px; background:var(--surface); cursor:pointer; text-align:left; transition:.22s }
.quarter:hover{ border-color:var(--line2); transform:translateY(-2px) }
.quarter.is-on{ border-color:var(--text); background:var(--surface2) }
.quarter b{ display:block; font-family:var(--font-d); font-size:1.02rem }
.quarter i{ font-style:normal; display:block; font-size:.72rem; color:var(--muted); font-family:var(--font-mono); margin-top:5px }
.quarter[disabled]{ opacity:.35; pointer-events:none }

.topics{ display:flex; flex-wrap:wrap; gap:8px }
.topic-chip{ border:1px solid var(--line); border-radius:999px; padding:7px 14px; font-size:.82rem; background:var(--surface); cursor:pointer; transition:.2s; color:var(--text2) }
.topic-chip:hover{ border-color:var(--line2) }
.topic-chip.is-on{ background:var(--text); color:var(--bg); border-color:var(--text) }
.topic-chip i{ font-style:normal; font-family:var(--font-mono); font-size:.68rem; opacity:.6; margin-left:6px }

.counts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px }
.count{ border:1px solid var(--line); border-radius:var(--r-sm); padding:18px 12px; background:var(--surface); cursor:pointer; text-align:center; transition:.22s }
.count:hover{ transform:translateY(-3px); border-color:var(--line2) }
.count.is-on{ border-color:var(--text); background:var(--text); color:var(--bg) }
.count b{ font-family:var(--font-d); font-size:1.9rem; font-weight:700; letter-spacing:-.03em; display:block; line-height:1 }
.count i{ font-style:normal; font-size:.72rem; color:var(--muted); display:block; margin-top:7px }
.count.is-on i{ color:inherit; opacity:.7 }
.count[disabled]{ opacity:.3; pointer-events:none }
.custom-count{ display:flex; align-items:center; gap:14px; margin-top:16px; font-size:.85rem; color:var(--muted) }
.custom-count input[type=range]{ flex:1; accent-color:var(--text); max-width:320px }
.custom-count output{ font-family:var(--font-mono); font-size:1rem; color:var(--text); min-width:34px; text-align:center }

.opts{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; margin-top:18px }
.opt-row{ display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; background:var(--surface); cursor:pointer; transition:.2s }
.opt-row:hover{ border-color:var(--line2) }
.opt-row b{ font-size:.88rem; font-weight:600 }
.opt-row i{ font-style:normal; display:block; font-size:.74rem; color:var(--muted); margin-top:2px }
.switch{ position:relative; display:inline-flex; align-items:center; gap:11px; cursor:pointer; user-select:none }
.switch input{ position:absolute; opacity:0; width:0; height:0 }
.switch__box{ width:42px; height:24px; border-radius:999px; border:1px solid var(--line2); background:var(--surface2); position:relative; transition:.25s; flex:none }
.switch__box::after{ content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--muted); transition:.25s var(--ease) }
.switch input:checked + .switch__box{ background:var(--text); border-color:var(--text) }
.switch input:checked + .switch__box::after{ transform:translateX(18px); background:var(--bg) }
.switch input:focus-visible + .switch__box{ outline:2px solid var(--text); outline-offset:3px }
.switch--inline{ margin-top:14px }
.switch__t{ font-size:.86rem }

.setup__foot{ border-top:1px solid var(--line); padding-top:22px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:space-between; position:sticky; bottom:0; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(10px); margin:0 calc(var(--gap)*-1); padding-left:var(--gap); padding-right:var(--gap); padding-bottom:16px; z-index:5 }
.summary{ display:flex; flex-wrap:wrap; gap:7px; align-items:center; font-size:.82rem }
.summary .tag{ font-family:var(--font-mono); font-size:.72rem }
.setup__acts{ display:flex; gap:9px; flex-wrap:wrap }

.tag{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:999px; padding:4px 11px; font-size:.75rem; color:var(--text2); background:var(--surface) }
.tag--ghost{ color:var(--muted); background:transparent }

/* ---------- тест ---------- */
.quiz{ display:flex; flex-direction:column; min-height:calc(100vh - var(--nav-h) - 60px) }
.quiz__top{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-bottom:14px }
.quiz__meta{ display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.quiz__badge{ font-family:var(--font-d); font-weight:600; font-size:.95rem; letter-spacing:-.01em }
.quiz__counter{ font-family:var(--font-mono); font-size:.82rem; color:var(--muted) }
.quiz__tools{ display:flex; align-items:center; gap:8px }
.timer{ display:flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:999px; padding:7px 13px; font-family:var(--font-mono); font-size:.84rem; background:var(--surface) }
.timer.is-warn{ border-color:var(--text); animation:pulseWarn 1s infinite }
@keyframes pulseWarn{ 50%{ opacity:.5 } }
.streak{ display:flex; align-items:baseline; gap:5px; font-size:.74rem; color:var(--muted) }
.streak b{ font-family:var(--font-d); font-size:1.05rem; color:var(--text) }
.streak.is-hot b{ animation:pop .4s var(--ease-out) }
@keyframes pop{ 0%{transform:scale(.7)} 60%{transform:scale(1.18)} 100%{transform:scale(1)} }
.quiz__progress{ height:2px; background:var(--line); border-radius:2px; overflow:hidden }
.quiz__progress i{ display:block; height:100%; width:0; background:var(--text); transition:width .45s var(--ease-out) }
.quiz__body{ flex:1; display:flex; align-items:center; padding:clamp(18px,3vw,34px) 0 }
.qcard{ width:100%; border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(20px,3.4vw,38px); background:linear-gradient(180deg,var(--surface),transparent 55%),var(--bg); position:relative; overflow:hidden }
.qcard::before{ content:""; position:absolute; inset:0; background:radial-gradient(600px 220px at 12% -10%,color-mix(in srgb,var(--text) 8%,transparent),transparent 70%); pointer-events:none }
.qcard__top{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:20px; position:relative }
.flag{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); background:transparent; border-radius:999px; padding:6px 12px; cursor:pointer; color:var(--muted); font-size:.76rem; transition:.2s }
.flag:hover{ color:var(--text); border-color:var(--line2) }
.flag[aria-pressed="true"]{ background:var(--text); color:var(--bg); border-color:var(--text) }
.qtext{ font-family:var(--font-d); font-size:clamp(1.22rem,2.6vw,1.85rem); line-height:1.34; letter-spacing:-.02em; margin:0 0 26px; font-weight:600; position:relative }
.qtext.is-code{ font-family:var(--font-mono); font-size:clamp(1rem,1.8vw,1.2rem); white-space:pre-wrap; letter-spacing:0 }
.answers{ display:grid; gap:10px; position:relative }
.answers--grid{ grid-template-columns:1fr 1fr }
.ans{ position:relative; display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:16px 18px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface); cursor:pointer; transition:.18s var(--ease); font-size:.96rem; overflow:hidden }
.ans:hover:not([disabled]){ border-color:var(--line2); transform:translateX(4px) }
.ans__k{ flex:none; width:26px; height:26px; border-radius:8px; border:1px solid var(--line2); display:grid; place-items:center;
  font-family:var(--font-mono); font-size:.74rem; color:var(--muted); transition:.18s }
.ans:hover:not([disabled]) .ans__k{ border-color:var(--text); color:var(--text) }
.ans.is-on{ border-color:var(--text); background:var(--surface2) }
.ans.is-on .ans__k{ background:var(--text); color:var(--bg); border-color:var(--text) }
.ans.is-right{ border-color:var(--text); background:var(--text); color:var(--bg) }
.ans.is-right .ans__k{ background:transparent; color:var(--bg); border-color:var(--bg) }
.ans.is-wrong{ border-color:var(--line2); background:var(--surface2); opacity:.55; text-decoration:line-through }
.ans.is-wrong::after{ content:"✕"; position:absolute; right:16px; font-size:.9rem; opacity:.7 }
.ans.is-miss{ border-style:dashed; border-color:var(--line2) }
.ans.is-miss::after{ content:"✓ верный ответ"; position:absolute; right:16px; font-size:.72rem; color:var(--muted); font-family:var(--font-mono) }
.ans[disabled]{ cursor:default }
.ans__t{ flex:1 }
.input-wrap{ display:flex; align-items:center; gap:12px; position:relative }
.input-wrap input{ flex:1; padding:17px 20px; border:1px solid var(--line2); border-radius:var(--r-sm); background:var(--surface);
  font-size:1.05rem; outline:none; transition:.2s; font-family:var(--font-d) }
.input-wrap input:focus{ border-color:var(--text); box-shadow:0 0 0 4px color-mix(in srgb,var(--text) 12%,transparent) }
.input-wrap .unit{ font-size:.85rem; color:var(--muted); font-family:var(--font-mono) }
.input-wrap.is-right input{ border-color:var(--text); background:var(--text); color:var(--bg) }
.input-wrap.is-wrong input{ border-style:dashed; opacity:.6 }

.feedback{ margin-top:22px; border:1px solid var(--line); border-left:3px solid var(--text); border-radius:var(--r-sm); padding:16px 18px; background:var(--surface); animation:fadeUp .35s var(--ease-out) }
.feedback__head{ display:flex; align-items:center; gap:10px; font-family:var(--font-d); font-size:1rem }
.feedback__ico{ width:22px; height:22px; border-radius:50%; border:1.5px solid var(--text); display:grid; place-items:center; font-size:.7rem; flex:none }
.feedback.is-bad{ border-left-style:dashed }
.feedback.is-bad .feedback__ico{ border-style:dashed }
.feedback__exp{ margin:10px 0 0; color:var(--text2); font-size:.9rem; line-height:1.6 }
.feedback__exp .row{ display:flex; gap:10px; margin-bottom:6px; align-items:baseline }
.feedback__exp .row b{ min-width:128px; color:var(--muted); font-weight:600; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase }
.feedback__exp .row span{ font-family:var(--font-mono); font-size:.86rem; color:var(--text) }
.feedback__acts{ display:flex; gap:9px; margin-top:14px; flex-wrap:wrap }
.quiz__foot{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-top:14px; border-top:1px solid var(--line) }
.quiz__nav{ display:flex; gap:9px; flex-wrap:wrap }
.palette-toggle{ position:relative }
.palette{ position:absolute; bottom:calc(100% + 12px); left:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(44px,1fr)); gap:6px;
  padding:14px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); box-shadow:var(--shadow); width:min(420px,88vw); z-index:20; animation:fadeUp .25s var(--ease-out) }
.palette button{ aspect-ratio:1; border:1px solid var(--line); border-radius:8px; background:transparent; cursor:pointer; font-family:var(--font-mono); font-size:.76rem; color:var(--muted); transition:.15s }
.palette button:hover{ border-color:var(--text); color:var(--text) }
.palette button.is-cur{ background:var(--text); color:var(--bg); border-color:var(--text) }
.palette button.is-ans{ border-color:var(--line2); color:var(--text) }
.palette button.is-flag::after{ content:""; display:block; width:4px; height:4px; border-radius:50%; background:var(--text); margin:2px auto 0 }
.palette__legend{ grid-column:1/-1; display:flex; gap:14px; font-size:.7rem; color:var(--muted); padding-top:8px; border-top:1px solid var(--line); margin-top:4px }
.pause-veil{ position:fixed; inset:0; z-index:80; background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(16px); display:grid; place-items:center }
.pause-veil__in{ text-align:center; padding:30px }
.pause-veil h3{ font-family:var(--font-d); font-size:2rem; margin:0 0 8px }

/* ---------- результат ---------- */
.result__hero{ display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,4vw,48px); align-items:center; padding:clamp(18px,3vw,30px) 0 34px; border-bottom:1px solid var(--line) }
.ring{ position:relative; width:clamp(170px,22vw,230px); aspect-ratio:1 }
.ring svg{ width:100%; height:100%; transform:rotate(-90deg) }
.ring circle{ fill:none; stroke-width:7 }
.ring__bg{ stroke:var(--line) }
.ring__fg{ stroke:var(--text); stroke-linecap:round; stroke-dasharray:553; stroke-dashoffset:553; transition:stroke-dashoffset 1.5s var(--ease-out) }
.ring__c{ position:absolute; inset:0; display:grid; place-content:center; text-align:center }
.ring__c b{ font-family:var(--font-d); font-size:clamp(2.1rem,4.6vw,3.2rem); font-weight:700; letter-spacing:-.04em; line-height:1 }
.ring__c span{ display:block; margin-top:8px; font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted) }
.res-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-top:22px }
.res-stats>div{ background:var(--bg); padding:14px }
.res-stats dt{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600 }
.res-stats dd{ margin:6px 0 0; font-family:var(--font-d); font-size:1.35rem; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.res-acts{ display:flex; flex-wrap:wrap; gap:9px; margin-top:22px }
.res-xp{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; border:1px solid var(--line); border-radius:var(--r); padding:16px 20px; background:var(--surface); margin-top:22px; animation:fadeUp .5s var(--ease-out) }
.res-xp__bar{ flex:1; min-width:180px; height:7px; border-radius:4px; background:var(--line); overflow:hidden }
.res-xp__bar i{ display:block; height:100%; width:0; background:var(--text); transition:width 1.1s var(--ease-out) }
.res-xp b{ font-family:var(--font-d); font-size:1.15rem }
.topic-bars{ display:grid; gap:11px }
.topic-bars--sm{ gap:8px }
.tbar{ display:grid; grid-template-columns:minmax(120px,1.1fr) 2.4fr auto; gap:13px; align-items:center; font-size:.86rem }
.tbar__n{ color:var(--text2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.tbar__t{ height:7px; border-radius:4px; background:var(--line); overflow:hidden }
.tbar__t i{ display:block; height:100%; width:0; background:var(--text); transition:width .9s var(--ease-out) }
.tbar__v{ font-family:var(--font-mono); font-size:.78rem; color:var(--muted); min-width:74px; text-align:right }
.topic-bars--sm .tbar{ grid-template-columns:minmax(90px,1fr) 2fr auto }

.seg{ display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:3px; gap:3px; background:var(--surface); margin-left:auto }
.seg__b{ border:0; background:transparent; color:var(--muted); border-radius:999px; padding:6px 13px; font-size:.79rem; cursor:pointer; transition:.2s }
.seg__b:hover{ color:var(--text) }
.seg__b.is-on{ background:var(--text); color:var(--bg) }
.review{ display:grid; gap:9px }
.rev{ border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); overflow:hidden; transition:.2s }
.rev:hover{ border-color:var(--line2) }
.rev__h{ display:flex; align-items:flex-start; gap:13px; padding:14px 16px; cursor:pointer; width:100%; text-align:left; background:transparent; border:0 }
.rev__i{ flex:none; width:24px; height:24px; border-radius:50%; border:1.5px solid var(--line2); display:grid; place-items:center; font-size:.7rem; font-family:var(--font-mono); margin-top:2px }
.rev.is-right .rev__i{ background:var(--text); color:var(--bg); border-color:var(--text) }
.rev.is-wrong .rev__i{ border-style:dashed }
.rev.is-skip .rev__i{ opacity:.4 }
.rev__q{ flex:1; font-size:.92rem; line-height:1.5 }
.rev__a{ font-family:var(--font-mono); font-size:.76rem; color:var(--muted); margin-top:5px; display:block }
.rev__fav{ flex:none; border:1px solid var(--line); background:transparent; border-radius:8px; width:30px; height:30px; cursor:pointer; color:var(--muted); transition:.2s }
.rev__fav:hover{ color:var(--text); border-color:var(--line2) }
.rev__fav.is-on{ background:var(--text); color:var(--bg); border-color:var(--text) }
.rev__b{ display:none; padding:0 16px 16px 53px; font-size:.87rem; color:var(--text2); line-height:1.6 }
.rev.is-open .rev__b{ display:block; animation:fadeUp .3s var(--ease-out) }
.rev__b .row{ display:flex; gap:8px; margin-bottom:7px } .rev__b .row b{ color:var(--text); min-width:104px; font-weight:600; font-size:.82rem }
.rev__b .exp{ border-left:2px solid var(--line2); padding-left:12px; margin-top:10px; color:var(--text2) }

/* ---------- прогресс ---------- */
.dash__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:26px }
.profile-switch{ display:flex; gap:7px; flex-wrap:wrap }
.prof{ border:1px solid var(--line); border-radius:999px; padding:7px 15px; font-size:.83rem; background:var(--surface); cursor:pointer; transition:.2s; color:var(--muted) }
.prof:hover{ color:var(--text); border-color:var(--line2) }
.prof.is-on{ background:var(--text); color:var(--bg); border-color:var(--text) }
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-bottom:var(--gap) }
.stat{ background:var(--bg); padding:20px 18px; transition:background .25s }
.stat:hover{ background:var(--surface2) }
.stat dt{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600 }
.stat dd{ margin:9px 0 0; font-family:var(--font-d); font-size:clamp(1.5rem,3vw,2.1rem); font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums }
.stat dd small{ font-size:.72rem; color:var(--muted); font-family:var(--font-mono); letter-spacing:0; margin-left:5px }
.dash__cols{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); margin-bottom:var(--gap) }
@media (max-width:860px){ .stat-grid{ grid-template-columns:repeat(2,1fr) } }
.dash .panel{ margin-bottom:var(--gap) }
.dash__cols .panel{ margin-bottom:0 }
.heat{ display:grid; grid-template-columns:repeat(auto-fill,minmax(13px,1fr)); gap:3px; margin-top:14px }
.heat i{ aspect-ratio:1; border-radius:3px; background:var(--line); transition:.2s; cursor:default }
.heat i[data-l="1"]{ background:color-mix(in srgb,var(--text) 25%,transparent) }
.heat i[data-l="2"]{ background:color-mix(in srgb,var(--text) 45%,transparent) }
.heat i[data-l="3"]{ background:color-mix(in srgb,var(--text) 70%,transparent) }
.heat i[data-l="4"]{ background:var(--text) }
.heat i:hover{ transform:scale(1.35) }
.heat-legend{ display:flex; align-items:center; gap:5px; margin-top:12px; font-size:.7rem; color:var(--muted) }
.heat-legend i{ width:11px; height:11px; border-radius:3px; background:var(--line) }
.heat-legend i:nth-of-type(2){ background:color-mix(in srgb,var(--text) 25%,transparent) }
.heat-legend i:nth-of-type(3){ background:color-mix(in srgb,var(--text) 45%,transparent) }
.heat-legend i:nth-of-type(4){ background:color-mix(in srgb,var(--text) 70%,transparent) }
.heat-legend i:nth-of-type(5){ background:var(--text) }
.ach{ display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:10px; margin-top:14px }
.ach__i{ border:1px solid var(--line); border-radius:var(--r-sm); padding:14px; background:var(--bg2); display:flex; gap:12px; align-items:flex-start; transition:.22s; position:relative; overflow:hidden }
.ach__i:hover{ transform:translateY(-2px); border-color:var(--line2) }
.ach__i.is-off{ opacity:.42; filter:grayscale(1) }
.ach__ico{ flex:none; width:40px; height:40px; border-radius:12px; border:1px solid var(--line2); display:grid; place-items:center; font-family:var(--font-d); font-weight:700; transition:.25s var(--ease) }
.ach__i:hover .ach__ico{ transform:rotate(-6deg) scale(1.08) }
.ach__ico svg{ width:20px; height:20px }
.ach__i.is-on .ach__ico{ background:var(--text); color:var(--bg); border-color:var(--text) }
.ach__i b{ display:block; font-size:.88rem }
.ach__i span{ display:block; font-size:.76rem; color:var(--muted); margin-top:3px; line-height:1.45 }
.ach__p{ height:3px; background:var(--line); border-radius:2px; margin-top:9px; overflow:hidden }
.ach__p i{ display:block; height:100%; background:var(--text); width:0; transition:width .8s var(--ease-out) }
.hist{ display:grid; gap:8px; margin-top:12px; max-height:430px; overflow:auto; padding-right:4px }
.hist__i{ display:grid; grid-template-columns:auto 1fr auto; gap:13px; align-items:center; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg2); transition:.2s }
.hist__i:hover{ border-color:var(--line2) }
.hist__p{ font-family:var(--font-d); font-weight:700; font-size:1.06rem; min-width:56px; font-variant-numeric:tabular-nums }
.hist__m{ font-size:.85rem } .hist__m i{ font-style:normal; display:block; font-size:.72rem; color:var(--muted); font-family:var(--font-mono); margin-top:3px }
.hist__a{ display:flex; gap:6px }
.board{ display:grid; gap:7px; margin-top:12px }
.board__i{ display:flex; align-items:center; gap:12px; padding:11px 13px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg2); font-size:.88rem }
.board__r{ font-family:var(--font-mono); font-size:.76rem; color:var(--muted); width:22px }
.board__i b{ font-weight:600 } .board__i .xp{ margin-left:auto; font-family:var(--font-mono); font-size:.82rem }
.board__i.is-me{ border-color:var(--text) }
.fav{ display:grid; gap:8px; margin-top:12px }
.fav__i{ display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg2) }
.fav__i p{ margin:0; font-size:.88rem; flex:1 }
.fav__i small{ display:block; color:var(--muted); font-size:.72rem; font-family:var(--font-mono); margin-top:5px }

/* ---------- библиотека ---------- */
.lib__bar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:24px 0 16px }
.lib__sel{ display:flex; gap:6px; flex-wrap:wrap }
.lib__search{ flex:1; min-width:220px; margin:0 }
.lib__meta{ display:flex; gap:12px; flex-wrap:wrap; font-size:.8rem; color:var(--muted); font-family:var(--font-mono); padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:18px }
.lib__list{ display:grid; gap:9px }
.libq{ border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); padding:15px 17px; transition:.2s }
.libq:hover{ border-color:var(--line2) }
.libq__t{ font-size:.94rem; line-height:1.5 }
.libq__m{ display:flex; gap:9px; flex-wrap:wrap; margin-top:11px; align-items:center }
.libq__a{ margin-top:11px; padding-top:11px; border-top:1px dashed var(--line); font-size:.86rem; color:var(--text2) }
.libq__a b{ font-family:var(--font-mono); font-size:.8rem }
.lib__pager{ display:flex; gap:7px; justify-content:center; margin-top:24px; flex-wrap:wrap }

/* ---------- о компании ---------- */
.about .h1{ margin:10px 0 18px }
.about__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--gap); margin:30px 0 }
.about__num{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-bottom:var(--gap) }
.about__num>div{ background:var(--bg); padding:20px 18px }
.about__num b{ display:block; font-family:var(--font-d); font-size:1.8rem; letter-spacing:-.03em }
.about__num span{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
.tick{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:9px }
.tick li{ display:flex; gap:11px; font-size:.9rem; color:var(--text2); line-height:1.5 }
.tick li::before{ content:"→"; color:var(--muted); flex:none }
.contact{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px }
.contact a,.contact span{ border:1px solid var(--line); border-radius:999px; padding:8px 16px; font-size:.85rem; transition:.2s }
.contact a:hover{ border-color:var(--text); background:var(--surface2) }
.contact .soon{ opacity:.55; border-style:dashed; cursor:default }
.contact a svg{ width:15px; height:15px; flex:none }
.contact a,.contact .soon{ display:inline-flex; align-items:center; gap:8px }

/* ---------- подвал ---------- */
.foot{ position:relative; z-index:3; border-top:1px solid var(--line); margin-top:40px; background:var(--bg2) }
.foot__in{ max-width:var(--maxw); margin:0 auto; padding:40px var(--gap); display:grid; gap:24px; grid-template-columns:1.3fr 1fr 1.1fr; align-items:start }
.foot__logo{ display:flex; align-items:center; gap:10px; font-family:var(--font-d); font-size:1.7rem; font-weight:700; letter-spacing:-.04em }
.foot__logo img{ border-radius:9px; filter:grayscale(1) contrast(1.05) }
.foot__contacts{ display:flex; flex-direction:column; gap:8px; align-items:flex-start }
.foot__c{ font-size:.84rem; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:7px 14px; transition:.2s; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.foot__c:hover{ color:var(--text); border-color:var(--line2); background:var(--surface2) }
.foot__c--soon{ opacity:.55; border-style:dashed; cursor:default }
.foot__c--soon:hover{ color:var(--muted); border-color:var(--line); background:transparent }
.foot__nav{ display:flex; gap:18px; flex-wrap:wrap }
.foot__nav a{ font-size:.86rem; color:var(--muted); transition:.2s }
.foot__nav a:hover{ color:var(--text) }
.foot__meta{ font-size:.78rem; color:var(--muted); font-family:var(--font-mono); display:flex; gap:4px; align-items:center; flex-wrap:wrap }

/* ---------- оверлеи ---------- */
.toasts{ position:fixed; z-index:120; bottom:20px; right:20px; display:grid; gap:9px; width:min(360px,calc(100vw - 40px)) }
.toast{ position:relative; border:1px solid var(--line2); border-radius:var(--r-sm); background:var(--bg2); padding:13px 38px 13px 16px;
  box-shadow:0 24px 48px -16px rgba(0,0,0,.6), 0 2px 0 0 var(--line) inset, var(--shadow);
  font-size:.87rem; display:flex; gap:11px; align-items:flex-start; animation:toastIn .4s var(--ease-out) }
.toast::before{ content:""; position:absolute; left:0; top:10px; bottom:10px; width:2px; background:var(--text); border-radius:2px; opacity:.85 }
.toast.is-out{ animation:toastOut .3s var(--ease) forwards }
.toast b{ display:block; font-size:.88rem } .toast span{ display:block; color:var(--muted); font-size:.79rem; margin-top:2px }
.toast__i{ flex:none; width:20px; height:20px; border-radius:50%; border:1.5px solid var(--text); display:grid; place-items:center; font-size:.66rem; font-family:var(--font-mono) }
.toast__x{ position:absolute; top:9px; right:9px; width:22px; height:22px; display:grid; place-items:center; border:0; border-radius:6px;
  background:transparent; color:var(--muted); cursor:pointer; transition:.2s }
.toast__x:hover{ color:var(--text); background:var(--surface2) }
@keyframes toastIn{ from{ opacity:0; transform:translateX(30px) scale(.96) } }
@keyframes toastOut{ to{ opacity:0; transform:translateX(30px) scale(.96) } }
@media (max-width:560px){
  .toasts{ left:0; right:0; bottom:0; width:auto; gap:0; padding-bottom:env(safe-area-inset-bottom,0px) }
  .toast{ border-left:0; border-right:0; border-bottom:0; border-radius:var(--r-sm) var(--r-sm) 0 0; padding:14px 40px 16px 18px }
  .toast::before{ top:14px; bottom:14px; left:0 }
}

/* ---------- переходы экранов и scroll-reveal ---------- */
.screen{ animation:screenIn .42s var(--ease-out) }
@keyframes screenIn{ from{ opacity:0; transform:translateY(12px) } }
.rv{ opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:var(--rvd,0s) }
.rv.is-in{ opacity:1; transform:none }
.fx-conf{ position:fixed; inset:0; z-index:115; pointer-events:none }
.empty .btn{ margin-top:12px }

.modal-root{ position:fixed; inset:0; z-index:110; display:grid; place-items:center; padding:20px; background:color-mix(in srgb,var(--bg) 78%,transparent); backdrop-filter:blur(8px); animation:fadeIn .2s }
.modal{ width:min(560px,100%); max-height:86vh; overflow:auto; border:1px solid var(--line2); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow); animation:modalIn .35s var(--ease-out) }
.modal__h{ display:flex; align-items:center; gap:14px; padding:20px 22px; border-bottom:1px solid var(--line) }
.modal__h h3{ font-family:var(--font-d); margin:0; font-size:1.1rem; flex:1 }
.modal__b{ padding:22px }
.modal__f{ display:flex; gap:9px; justify-content:flex-end; padding:16px 22px; border-top:1px solid var(--line); flex-wrap:wrap }
.modal__b p{ margin:0 0 12px; color:var(--text2); font-size:.92rem; line-height:1.6 }
.modal__b .keys{ gap:7px }
@keyframes modalIn{ from{ opacity:0; transform:translateY(18px) scale(.97) } }
@keyframes fadeIn{ from{ opacity:0 } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px) } }

.cmdk{ position:fixed; inset:0; z-index:115; display:grid; place-items:start center; padding:14vh 20px 20px; background:color-mix(in srgb,var(--bg) 74%,transparent); backdrop-filter:blur(9px); animation:fadeIn .18s }
.cmdk__box{ width:min(620px,100%); border:1px solid var(--line2); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow); overflow:hidden; animation:modalIn .3s var(--ease-out) }
.cmdk__in{ width:100%; border:0; border-bottom:1px solid var(--line); background:transparent; padding:18px 20px; font-size:1rem; outline:none }
.cmdk__list{ max-height:min(420px,52vh); overflow:auto; padding:8px }
.cmdk__i{ display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:var(--r-sm); cursor:pointer; font-size:.9rem }
.cmdk__i.is-sel{ background:var(--text); color:var(--bg) }
.cmdk__i b{ font-weight:600 } .cmdk__i span{ margin-left:auto; font-size:.72rem; opacity:.6; font-family:var(--font-mono) }
.cmdk__i i{ font-style:normal; opacity:.55; font-family:var(--font-mono); font-size:.7rem; min-width:56px }
.cmdk__foot{ display:flex; gap:6px; align-items:center; padding:11px 16px; border-top:1px solid var(--line); font-size:.72rem; color:var(--muted) }
.cmdk__foot span{ margin-right:12px }

#fx{ position:fixed; inset:0; z-index:100; pointer-events:none }

.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease-out),transform .8s var(--ease-out) }
.reveal.is-in{ opacity:1; transform:none }
@keyframes shake{ 10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)} 30%,50%,70%{transform:translateX(-6px)} 40%,60%{transform:translateX(6px)} }
.shake{ animation:shake .5s }

/* ---------- адаптив ---------- */
@media (max-width:1080px){
  .quickwrap{ grid-template-columns:1fr }
  .steps{ grid-template-columns:1fr 1fr }
  .modes{ grid-template-columns:1fr 1fr }
  .block--split{ grid-template-columns:1fr }
  .dash__cols{ grid-template-columns:1fr }
  .foot__in{ grid-template-columns:1fr 1fr }
}
@media (max-width:1180px){
  .nav__links{ position:fixed; left:0; right:0; top:calc(var(--nav-h) + env(safe-area-inset-top,0px)); z-index:95;
    flex-direction:column; gap:0; margin-left:0;
    height:calc(100vh - var(--nav-h) - env(safe-area-inset-top,0px));
    height:calc(100dvh - var(--nav-h) - env(safe-area-inset-top,0px));
    padding:22px var(--gap) 44px; background:var(--bg); display:none; overflow-y:auto; border-top:1px solid var(--line) }
  .nav__links.is-open{ display:flex; animation:sheetIn .38s var(--ease-out) }
  .nav__burger{ display:inline-flex }
  .nav__link{ font-family:var(--font-d); font-size:clamp(1.35rem,5.4vw,1.8rem); font-weight:700; letter-spacing:-.025em;
    color:var(--text2); padding:15px 2px; border-radius:0; border-bottom:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    background:none; animation:itemIn .55s var(--ease-out) backwards }
  .nav__links.is-open .nav__link:nth-child(1){ animation-delay:.06s }
  .nav__links.is-open .nav__link:nth-child(2){ animation-delay:.1s }
  .nav__links.is-open .nav__link:nth-child(3){ animation-delay:.14s }
  .nav__links.is-open .nav__link:nth-child(4){ animation-delay:.18s }
  .nav__links.is-open .nav__link:nth-child(5){ animation-delay:.22s }
  .nav__links.is-open .nav__link:nth-child(6){ animation-delay:.26s }
  .nav__links.is-open .nav__link:nth-child(7){ animation-delay:.3s }
  .nav__links.is-open .nav__link:nth-child(8){ animation-delay:.34s }
  .nav__link:hover{ background:none; color:var(--text) }
  .nav__link::after{ content:"→"; position:static; left:auto; right:auto; bottom:auto; height:auto; background:none;
    font-family:var(--font-mono); font-size:.8em; opacity:0; transform:translateX(-8px); transition:.25s var(--ease-out) }
  .nav__link:hover::after{ opacity:1; transform:none }
  .nav__link.is-on{ color:var(--text) }
  .nav__link.is-on::after{ content:"●"; opacity:1; transform:none; font-size:.5em }
  .nav__link.is-on::before{ content:""; position:absolute; left:-14px; width:3px; top:22%; bottom:22%; background:var(--text); border-radius:3px }
  .nav__link{ position:relative }
}
@keyframes sheetIn{ from{ opacity:0; transform:translateY(-14px) } }
@keyframes itemIn{ from{ opacity:0; transform:translateY(14px) } }
@media (max-width:860px){
  #btnCmd kbd{ display:none }
  .hero__stats{ grid-template-columns:1fr 1fr }
  .result__hero{ grid-template-columns:1fr; justify-items:center; text-align:center }
  .res-acts,.res-stats{ justify-content:center }
  .res-stats{ text-align:left }
  .grades{ grid-template-columns:repeat(6,1fr) }
  .answers--grid{ grid-template-columns:1fr }
  .foot__in{ grid-template-columns:1fr }
  .xp-pill__txt{ display:none }
}
@media (max-width:560px){
  .steps,.modes{ grid-template-columns:1fr }
  .grades{ grid-template-columns:repeat(4,1fr) }
  .tbar{ grid-template-columns:1fr auto; gap:7px }
  .tbar__t{ grid-column:1/-1 }
  .setup__foot{ position:static }
  .seg{ margin-left:0 }
}

/* ---------- печать ---------- */
@media print{
  #bg,.grain,.vignette,.grid-overlay,.nav,.foot,.toasts,.cmdk,.modal-root,#fx,.scroll-progress{ display:none!important }
  body{ background:#fff; color:#000 }
  .screen{ padding:0; max-width:none }
  .panel,.qcard,.rev,.stat{ border-color:#ccc; background:#fff }
  .result__hero{ grid-template-columns:auto 1fr }
}

/* ---------- уважение к reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001s!important; animation-iteration-count:1!important; transition-duration:.001s!important }
  .reveal,.rv{ opacity:1; transform:none }
  .hero__title .line__in{ transform:none }
  .screen,.nav__links.is-open,.nav__link{ animation:none!important }
}


/* ---------- адаптация под все устройства ---------- */
@supports (padding: env(safe-area-inset-top)){
  .nav{ padding-top:env(safe-area-inset-top); height:calc(var(--nav-h) + env(safe-area-inset-top)) }
  .screen{ padding-top:calc(var(--nav-h) + env(safe-area-inset-top) + 28px) }
  .toasts{ padding-bottom:env(safe-area-inset-bottom) }
  .foot__in{ padding-bottom:calc(40px + env(safe-area-inset-bottom)) }
  .setup__foot{ padding-bottom:calc(16px + env(safe-area-inset-bottom)) }
}
@media (min-width:1700px){
  :root{ --maxw:1400px }
  .hero__title{ font-size:clamp(4rem,8.4vw,9.6rem) }
  .subj-grid{ grid-template-columns:repeat(auto-fill,minmax(240px,1fr)) }
}
@media (max-width:400px){
  :root{ --gap:14px }
  .grades{ grid-template-columns:repeat(4,1fr) }
  .hero__cta{ flex-direction:column; align-items:stretch }
  .hero__cta .btn{ width:100% }
  .nav__right .icon-btn--wide{ display:none }
  #btnStreak{ display:none }
  .counts{ grid-template-columns:repeat(3,1fr) }
  .count b{ font-size:1.5rem }
  .quiz__top{ gap:8px }
  .quiz__tools .streak{ display:none }
  .res-stats{ grid-template-columns:1fr 1fr }
  .foot__in{ grid-template-columns:1fr }
  .foot__c{ white-space:normal }
}
@media (max-width:340px){
  .grades{ grid-template-columns:repeat(3,1fr) }
  .brand__name{ display:none }
}
@media (max-height:520px) and (orientation:landscape){
  .hero{ padding-top:6px }
  .hero__title{ font-size:clamp(1.9rem,9vh,4.2rem) }
  .hero__stats{ margin-top:16px }
  .quiz__body{ padding:10px 0 }
  .qcard{ padding:16px 18px }
  .screen{ padding-bottom:40px }
}
@media (pointer:coarse){
  .palette button{ min-height:44px; min-width:44px }
  .ans{ padding:18px 16px }
  .chip{ padding:9px 16px }
  .icon-btn{ width:42px; height:42px }
  .grade{ aspect-ratio:1/1.15 }
  .btn{ padding:13px 20px }
}
@media (prefers-contrast:more){
  :root{ --line:rgba(255,255,255,.34); --line2:rgba(255,255,255,.6); --muted:#d5d5dc }
  [data-theme="light"]{ --line:rgba(0,0,0,.34); --line2:rgba(0,0,0,.6); --muted:#33333a }
}

/* ---------- BETA-чип ---------- */
.beta{
  display:inline-flex; align-items:center; padding:2px 8px; border:1px dashed var(--line2); border-radius:999px;
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.18em; color:var(--muted); text-transform:uppercase; flex:none;
}
.beta-note{ display:flex; gap:12px; align-items:flex-start; margin:18px 0 0; font-size:.95rem }
.beta-note .beta{ margin-top:3px }

/* ---------- программа по классам ---------- */
.prog__head{ max-width:72ch; margin-bottom:22px }
.prog__head .h1-sm{ margin:10px 0 8px }
.prog .lib__sel{ margin:0 0 10px }
.prog__quarters{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--gap); margin-top:22px }
.pq{ border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:18px; display:flex; flex-direction:column; gap:12px }
.pq__h{ display:flex; align-items:center; gap:10px }
.pq__h b{ font-family:var(--font-d); font-size:1.02rem }
.pq__h i{ font-style:normal; margin-left:auto; font-family:var(--font-mono); font-size:.72rem; color:var(--muted) }
.pq__list{ display:grid; gap:10px }
.pq__t{ border-left:2px solid var(--line2); padding-left:12px }
.pq__t b{ display:block; font-size:.9rem; font-weight:600 }
.pq__t span{ display:block; font-size:.8rem; color:var(--muted); line-height:1.5; margin-top:3px }
.pq__t i{ font-style:normal; display:block; font-family:var(--font-mono); font-size:.68rem; color:var(--muted2); margin-top:4px }
.pq .btn{ margin-top:auto; align-self:flex-start }

/* ---------- решатели ---------- */
.solv__head{ max-width:76ch; margin-bottom:24px; display:flex; flex-direction:column; gap:10px; align-items:flex-start }
.solv__head .seg{ margin-left:0; margin-top:6px }
.solv__pane{ display:grid; grid-template-columns:1.5fr 1fr; gap:var(--gap); align-items:start }
.solv__box{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); padding:clamp(18px,2.6vw,28px) }
.solv__label{ display:block; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:12px }
.solv__row{ display:flex; gap:10px; flex-wrap:wrap }
.solv__row input{ flex:1; min-width:200px; padding:15px 18px; border:1px solid var(--line2); border-radius:var(--r-sm); background:var(--bg2); font-family:var(--font-mono); font-size:1.05rem; outline:none; transition:.2s }
.solv__row input:focus{ border-color:var(--text); box-shadow:0 0 0 4px color-mix(in srgb,var(--text) 12%,transparent) }
.solv__hint{ margin:12px 0 0; line-height:1.5 }
.solv__out{ margin-top:18px; display:grid; gap:8px }
.solv__step{ display:flex; gap:12px; align-items:baseline; padding:10px 14px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg2); font-family:var(--font-mono); font-size:.92rem; animation:fadeUp .3s var(--ease-out) }
.solv__step b{ color:var(--muted); font-size:.72rem; min-width:22px }
.solv__step--final{ border-color:var(--text); background:var(--text); color:var(--bg); font-weight:700; font-size:1.05rem }
.solv__step--err{ border-style:dashed; color:var(--muted) }
.solv__examples{ display:flex; flex-direction:column; gap:8px }
.solv__examples .chip{ text-align:left; font-family:var(--font-mono) }
.solv__note{ border:1px dashed var(--line2); border-radius:var(--r-sm); padding:12px 14px; font-size:.8rem; color:var(--muted); line-height:1.5 }
.rus-line{ display:flex; gap:12px; padding:9px 14px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg2); font-size:.9rem; animation:fadeUp .3s var(--ease-out) }
.rus-line b{ min-width:130px; color:var(--muted); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; padding-top:2px }
.rus-line span{ font-family:var(--font-mono) }

/* ---------- форма отзыва ---------- */
.fb{ display:grid; gap:14px; margin-top:16px }
.fb__grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.fb__f{ display:grid; gap:7px }
.fb__f>span{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600 }
.fb__f input,.fb__f select,.fb__f textarea{
  padding:13px 15px; border:1px solid var(--line2); border-radius:var(--r-sm); background:var(--bg2); color:var(--text);
  font-size:.95rem; outline:none; transition:.2s; font-family:inherit; resize:vertical; min-height:48px }
.fb__f input:focus,.fb__f select:focus,.fb__f textarea:focus{ border-color:var(--text); box-shadow:0 0 0 4px color-mix(in srgb,var(--text) 12%,transparent) }
.fb__f select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%; background-size:6px 6px; background-repeat:no-repeat }
.fb__acts{ display:flex; gap:14px; align-items:center; flex-wrap:wrap }
.fb.is-bad input,.fb.is-bad textarea{ border-style:dashed }

/* ---------- адаптив под новые блоки ---------- */
@media (max-width:1080px){ .solv__pane{ grid-template-columns:1fr } .solv__examples{ flex-direction:row; flex-wrap:wrap } }
@media (max-width:700px){ .fb__grid{ grid-template-columns:1fr } .rus-line{ flex-direction:column; gap:4px } .rus-line b{ min-width:0 } }
@media (max-width:1200px) and (min-width:1181px){ .nav__link{ padding:8px 10px; font-size:.82rem } }

.code{ margin:14px 0 0; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg2);
  font-family:var(--font-mono); font-size:.82rem; line-height:1.6; overflow:auto; color:var(--text2) }

/* ---------- каскад слов QKC (тап по логотипу) ---------- */
.brand-drop{
  position:fixed; z-index:120; left:16px; top:calc(var(--nav-h) + 10px);
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  pointer-events:none; opacity:0; visibility:hidden;
}
.brand-drop.is-on{ opacity:1; visibility:visible }
.brand-drop span{
  display:inline-block; padding:7px 14px; border:1px solid var(--line2); border-radius:999px;
  background:var(--bg2); color:var(--text); font-family:var(--font-d); font-weight:600;
  font-size:.86rem; letter-spacing:.02em; box-shadow:var(--shadow);
  opacity:0; transform:translateY(-14px);
}
.brand-drop.is-on span{ animation:dropWord .5s var(--ease-out) forwards }
.brand-drop.is-on span:nth-child(2){ animation-delay:.13s; margin-left:16px }
.brand-drop.is-on span:nth-child(3){ animation-delay:.26s; margin-left:32px }
.brand-drop.is-out span{ animation:dropWordOut .35s var(--ease) forwards }
@keyframes dropWord{ to{ opacity:1; transform:translateY(0) } }
@keyframes dropWordOut{ from{ opacity:1 } to{ opacity:0; transform:translateY(-10px) } }
@media (prefers-reduced-motion:reduce){
  .brand-drop.is-on span{ animation-duration:.01s }
  .brand-drop.is-on span:nth-child(2),.brand-drop.is-on span:nth-child(3){ animation-delay:0s }
}

/* ---------- экран «Открытый проект» ---------- */
.olinks{ display:grid; gap:10px; margin-top:14px }
.olink{
  display:flex; align-items:center; gap:14px; padding:13px 16px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg2);
  transition:border-color .2s, transform .2s var(--ease-out), background .2s;
}
a.olink:hover{ border-color:var(--line2); background:var(--surface2); transform:translateX(4px) }
.olink__ico{ flex:none; width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line); border-radius:9px; background:var(--surface) }
.olink__ico svg{ width:17px; height:17px }
.olink__body{ min-width:0; flex:1 }
.olink__t{ font-weight:600; font-size:.95rem }
.olink__d{ font-size:.82rem; color:var(--muted); margin-top:2px }
.olink__u{ font-family:var(--font-mono); font-size:.72rem; color:var(--muted2); margin-top:3px; word-break:break-all }
.olink__arrow{ flex:none; color:var(--muted); font-size:1rem; transition:transform .2s }
a.olink:hover .olink__arrow{ transform:translate(3px,-3px); color:var(--text) }
.open-corp-btn{ margin-top:16px }
#openMap code,#openRun code{ font-family:var(--font-mono); font-size:.84em; background:var(--surface2); border:1px solid var(--line); border-radius:5px; padding:1px 6px; color:var(--text) }
.olink__t,.olink__d,.olink__u{ display:block }

.nav__link{ white-space:nowrap }
@media (max-width:700px){
  .brand:hover .brand__name .ltr i,.brand:focus-visible .brand__name .ltr i{ max-width:0!important; opacity:0!important }
  .brand:hover .brand__name .ltr,.brand:focus-visible .brand__name .ltr{ padding-right:0 }
}

/* ═══════════════════════════════════════════════════════════════
   ПРЕМИУМ-СЛОЙ 2.0 (монокром): скроллбар, прогресс, spotlight,
   ripple, кроссфейд темы, гигантский вордмарк, поп-анимации
   ═══════════════════════════════════════════════════════════════ */

/* ---------- скроллбар ---------- */
html{ scrollbar-color:var(--muted2) transparent }
::-webkit-scrollbar{ width:10px; height:10px }
::-webkit-scrollbar-track{ background:transparent }
::-webkit-scrollbar-thumb{ background:var(--muted2); border-radius:99px; border:3px solid var(--bg) }
::-webkit-scrollbar-thumb:hover{ background:var(--muted) }

/* ---------- прогресс чтения ---------- */
.fx-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:140; pointer-events:none;
  background:linear-gradient(90deg,var(--muted),var(--text)); transform:scaleX(0); transform-origin:0 50%;
}

/* ---------- spotlight внутри карточек ---------- */
.subj-card,.feat,.panel,.mode,.step-card,.link-card,.qcard,.quick,.hero{ position:relative }
.subj-card::before,.feat::before,.panel::before,.mode::before,.step-card::before,.link-card::before,.quick::before,.hero::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
  transition:opacity .4s var(--ease);
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--text) 9%,transparent),transparent 68%);
  z-index:0;
}
.hero::before{ background:radial-gradient(640px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--text) 6%,transparent),transparent 72%) }
.subj-card:hover::before,.feat:hover::before,.panel:hover::before,.mode:hover::before,
.step-card:hover::before,.link-card:hover::before,.quick:hover::before,.hero:hover::before{ opacity:1 }
/* контент карточек поверх подсветки */
.subj-card>*,.feat>*,.panel>*,.mode>*,.step-card>*,.link-card>*{ position:relative; z-index:1 }

/* ---------- ripple ---------- */
.btn,.icon-btn{ position:relative; overflow:hidden }
.fx-ripple{
  position:absolute; border-radius:50%; pointer-events:none; background:currentColor; opacity:.16;
  transform:scale(0); animation:fxRip .65s var(--ease-out) forwards; z-index:0;
}
@keyframes fxRip{ to{ transform:scale(1); opacity:0 } }

/* ---------- кроссфейд темы ---------- */
.theme-anim,.theme-anim *,.theme-anim *::before,.theme-anim *::after{
  transition:background-color .45s ease,color .45s ease,border-color .45s ease,fill .45s ease,stroke .45s ease,box-shadow .45s ease!important;
}

/* ---------- гигантский вордмарк в подвале ---------- */
.foot__mark{
  font-family:var(--font-d); font-weight:700; letter-spacing:-.06em; line-height:.82;
  font-size:clamp(4.5rem,19vw,16rem); text-align:center; user-select:none; pointer-events:auto;
  color:transparent; -webkit-text-stroke:1px var(--line2);
  margin:clamp(30px,6vw,70px) 0 -0.12em; transition:color .6s var(--ease);
  animation:markUp 1s var(--ease-out) backwards;
}
.foot__mark:hover{ color:var(--text) }
@supports not (-webkit-text-stroke:1px #000){ .foot__mark{ color:var(--muted2) } }
@keyframes markUp{ from{ opacity:0; transform:translateY(26px) } }

/* ---------- поп-анимация ответа ---------- */
.ans.is-right{ animation:ansPop .5s var(--ease-out) }
.ans.is-wrong{ animation:ansShake .4s var(--ease) }
@keyframes ansPop{ 0%{ transform:scale(.97) } 55%{ transform:scale(1.015) } 100%{ transform:scale(1) } }
@keyframes ansShake{ 0%,100%{ transform:translateX(0) } 25%{ transform:translateX(-5px) } 50%{ transform:translateX(4px) } 75%{ transform:translateX(-2px) } }

/* ---------- бегущий блик по главному заголовку ---------- */
.hero__title{ position:relative }
.hero__title .line__in{ background-size:200% 100% }
.hero__title:hover .line__in--out{ animation:outShine 1.1s var(--ease-out) }
@keyframes outShine{ 0%{ filter:brightness(1) } 45%{ filter:brightness(1.9) } 100%{ filter:brightness(1) } }

/* ---------- уголки-«риски» на карточках предметов ---------- */
.subj-card::after{
  content:""; position:absolute; top:10px; right:10px; width:10px; height:10px; opacity:0;
  border-top:1.5px solid var(--text); border-right:1.5px solid var(--text);
  transition:opacity .25s var(--ease),transform .25s var(--ease); transform:translate(4px,-4px);
}
.subj-card:hover::after{ opacity:.7; transform:none }

/* ---------- фокус-ринг премиальнее ---------- */
:focus-visible{ outline:2px solid var(--text); outline-offset:3px; border-radius:6px; transition:outline-offset .15s }

/* ---------- панели быстрого старта: линия сверху ---------- */
.panel{ position:relative; overflow:hidden }
.panel::after{
  content:""; position:absolute; left:0; top:0; height:2px; width:100%; transform:scaleX(0); transform-origin:0 50%;
  background:var(--text); transition:transform .5s var(--ease-out);
}
.panel:hover::after{ transform:scaleX(1) }


/* OuRi unified polish — calmer contrast, consistent controls */
:root{
  --r:15px; --r-sm:11px; --r-lg:22px;
}
.btn{
  border-radius:13px;
  padding:11px 18px;
  font-weight:600;
  box-shadow:none;
}
.btn:hover{border-color:var(--line2);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.99)}
.btn--primary{
  background:var(--surface2);
  color:var(--text);
  border-color:var(--line2);
}
.btn--primary::after{opacity:.18}
.btn--primary:hover{
  background:var(--text);
  color:var(--bg);
  border-color:var(--text);
  box-shadow:0 8px 22px -16px var(--text);
}
.icon-btn{border-radius:12px;background:var(--surface)}
.nav__link{border-radius:11px;transition:background .2s ease,color .2s ease}
.nav__link:hover{background:var(--surface2)}
.nav__link.is-on{background:var(--surface2)}
.panel,.quick,.feat,.subj-card,.step-card,.link-card,.mode,.qcard{
  border-radius:16px;
  box-shadow:0 6px 22px -18px rgba(0,0,0,.6);
}
.panel:hover,.quick:hover,.feat:hover,.subj-card:hover,.step-card:hover,.link-card:hover,.mode:hover{
  border-color:var(--line2);
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea{
  border-radius:11px;
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--muted);
  outline-offset:3px;
}
@media(prefers-reduced-motion:reduce){
  .btn,.icon-btn,.nav__link,.panel,.quick,.feat,.subj-card,.step-card,.link-card,.mode{transition:none!important}
}