/* Eva Web — стили десктопной раскладки (фаза В4).
 *
 * Единицы — rem/em: базовый кегль текучий (см. :root ниже), поэтому на
 * широком мониторе крупнеет весь интерфейс, а не только текст.
 * Палитра повторяет www/static/theme.css — веб должен читаться как то же
 * приложение; здесь она продублирована токенами под светлую и тёмную тему.
 * Шрифт берём из бандла приложения через /shared (сервер отдаёт www/static).
 */
@font-face{font-family:Nunito;font-style:normal;font-weight:200 1000;font-display:swap;
  src:url(/shared/vendor/fonts/nunito-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Nunito;font-style:normal;font-weight:200 1000;font-display:swap;
  src:url(/shared/vendor/fonts/nunito-cyrillic.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

:root{
  font-size:clamp(1rem, 0.78rem + 0.34vw, 1.375rem);
  --fs-scale:1;
  --ground:#fff; --canvas:#fff; --surface:#fff; --surface-2:#f4f5f8;
  --ink:#151a24; --muted:#646c86; --line:#e4e9f2;
  --pink:#fa3373; --purple:#7d2ae8; --emerald:#00a884; --amber:#f59e0b; --blue:#0ea5e9;
  --ok:#22c55e; --tint:.10; --glow:0; --ring:rgba(21,26,36,.09);
  --prime:var(--pink); --prime-rgb:250,51,115;
  --rail:17rem; --av:11rem;
  --r-lg:1.75rem; --r-md:1.15rem;
  --shadow-base:0 .1rem .3rem rgba(21,26,36,.05); --shadow-a:.07;
  /* Запасной вариант для блоков вне холста (экран входа, панель настроек):
     там раздела нет, поэтому тень несёт брендовый розовый. */
  --shadow:var(--shadow-base), 0 .9rem 2.2rem rgba(var(--prime-rgb),var(--shadow-a));
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0d0b14; --canvas:#12101b; --surface:#1a1726; --surface-2:#241f33;
    --ink:#f4f2fa; --muted:#9c96b3; --line:#2b2639;
    --pink:#ff2e6e; --emerald:#00cba2; --tint:.20; --glow:.26; --ring:rgba(255,255,255,.07);
    --shadow-base:0 .1rem .3rem rgba(0,0,0,.35); --shadow-a:.16;
  }
}
:root[data-theme="dark"]{
  --ground:#0d0b14; --canvas:#12101b; --surface:#1a1726; --surface-2:#241f33;
  --ink:#f4f2fa; --muted:#9c96b3; --line:#2b2639;
  --pink:#ff2e6e; --emerald:#00cba2; --tint:.20; --glow:.26; --ring:rgba(255,255,255,.07);
  --shadow-base:0 .1rem .3rem rgba(0,0,0,.35); --shadow-a:.16;
}
/* Прайм раздела — как класс tab-* в приложении: один экран, один акцент. */
[data-screen="talk"]{--prime:var(--pink);--prime-rgb:250,51,115}
[data-screen="learn"]{--prime:var(--purple);--prime-rgb:125,42,232}
[data-screen="read"]{--prime:var(--emerald);--prime-rgb:0,168,132}
[data-screen="progress"]{--prime:var(--amber);--prime-rgb:245,158,11}
[data-screen="profile"]{--prime:var(--blue);--prime-rgb:14,165,233}
:root[data-theme="dark"] [data-screen="talk"]{--prime-rgb:255,46,110}
:root[data-theme="dark"] [data-screen="read"]{--prime-rgb:0,203,162}

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font:400 1rem/1.55 Nunito,-apple-system,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.022em;text-wrap:balance;line-height:1.16}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
input,select{font:inherit}
input[type=range]{accent-color:var(--prime);width:100%}
:focus-visible{outline:.14em solid var(--prime);outline-offset:.2em;border-radius:.4em}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
[hidden]{display:none!important}

/* ---------------------------------------------------------------- каркас */
.canvas{--shadow:var(--shadow-base), 0 .9rem 2.2rem rgba(var(--prime-rgb),var(--shadow-a));
  max-width:2560px;margin-inline:auto;background:var(--canvas);position:relative;
  height:100vh;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) var(--rail)}
.canvas::before{content:"";position:absolute;inset:0 0 auto 0;height:34rem;pointer-events:none;
  background:radial-gradient(80% 100% at 62% -18%, rgba(var(--prime-rgb),var(--glow)), transparent 68%);
  transition:background .4s ease}
.work{position:relative;min-width:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;
  padding:clamp(1rem,1.3vw,1.7rem) clamp(1.4rem,3.4vw,4.5rem) clamp(1.2rem,1.6vw,2rem)}
.wrap{max-width:72rem;width:100%;margin-inline:auto;font-size:calc(1em*var(--fs-scale));
  flex:1;min-height:0;display:flex;flex-direction:column}

.rail{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:.4rem;
  padding:clamp(1.2rem,1.6vw,2rem) .85rem;background:var(--surface);
  border-left:.06rem solid var(--line);z-index:3}
.brand{display:flex;align-items:center;gap:.7rem;padding:.2rem .35rem 1.4rem}
.brand img{width:2.4rem;height:2.4rem;border-radius:.75rem}
.brand b{flex:1;font-size:1.2rem;font-weight:800;letter-spacing:-.03em}
.rail-toggle{width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;
  color:var(--muted);transition:background .18s,color .18s,transform .24s}
.rail-toggle:hover{background:var(--surface-2);color:var(--ink)}
.rail-toggle svg{width:1.1rem;height:1.1rem}
.rail-min .rail-toggle{transform:rotate(180deg)}
.nav{display:flex;flex-direction:column;gap:.2rem}
.nav button{display:flex;align-items:center;gap:.8rem;width:100%;padding:.72rem .8rem;
  border-radius:var(--r-md);color:var(--muted);font-weight:600;font-size:.98rem;text-align:left;
  transition:background .18s,color .18s,box-shadow .18s}
.nav button:hover{background:var(--surface-2);color:var(--ink)}
.nav button svg{width:1.32rem;height:1.32rem;flex:none}
.nav button.on{background:rgba(var(--nav-rgb),var(--tint));color:rgb(var(--nav-rgb));
  box-shadow:inset 0 0 0 .06rem rgba(var(--nav-rgb),.28)}
.rail-foot{margin-top:auto;display:flex;align-items:center;gap:.35rem;padding:.5rem .55rem;
  border:.06rem solid var(--line);border-radius:var(--r-md);width:100%}
.rail-acc{display:flex;align-items:center;gap:.7rem;flex:1;min-width:0;text-align:left;
  padding:.2rem;border-radius:calc(var(--r-md) - .3rem);transition:background .18s}
.rail-acc:hover{background:var(--surface-2)}
.ini{width:2.3rem;height:2.3rem;border-radius:50%;display:grid;place-items:center;color:#fff;
  font-weight:800;font-size:.95rem;background:linear-gradient(135deg,#0284c7,#38bdf8);flex:none}
.rail-acc-txt{min-width:0}
.rail-foot small{display:block;color:var(--muted);font-size:.78rem;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-foot b{display:block;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Выход живёт здесь, а не на странице профиля: одно постоянное место. */
.rail-out{width:2.2rem;height:2.2rem;flex:none;border-radius:50%;display:grid;place-items:center;
  color:var(--muted);transition:background .18s,color .18s}
.rail-out:hover{background:rgba(250,51,115,.12);color:var(--pink)}
.rail-out svg{width:1.15rem;height:1.15rem}

/* ---------------------------------------------------------------- шапка */
.head{display:grid;grid-template-columns:minmax(15rem,21rem) minmax(0,1fr);
  gap:.6rem clamp(1rem,1.6vw,1.8rem);align-items:end;margin-bottom:clamp(.7rem,1.1vw,1.2rem)}
.eyebrow{margin:0 0 .35rem;color:var(--prime);font-size:.82rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase}
h1{font-size:clamp(1.3rem,0.85rem + 1.05vw,1.95rem)}
.head-right{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding-bottom:.3rem}
.head-tools{display:flex;gap:.6rem;align-items:center;margin-left:auto}
.icon-btn{width:2.7rem;height:2.7rem;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);box-shadow:inset 0 0 0 .06rem var(--line);color:var(--muted);
  transition:color .18s,box-shadow .18s}
.icon-btn:hover{color:var(--prime);box-shadow:inset 0 0 0 .06rem rgba(var(--prime-rgb),.4)}
.icon-btn svg{width:1.2rem;height:1.2rem}

/* ---------------------------------------------------------------- общее */
.card{background:var(--surface);border-radius:var(--r-lg);padding:clamp(1.1rem,1.4vw,1.7rem);
  box-shadow:inset 0 0 0 .06rem var(--ring),var(--shadow)}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
.pill{display:inline-flex;align-items:center;gap:.4rem;padding:.28rem .75rem;border-radius:999em;
  background:var(--surface-2);color:var(--muted);font-size:.82rem;font-weight:700}
.pill.prime{background:rgba(var(--prime-rgb),var(--tint));color:var(--prime)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.8rem 1.4rem;
  border-radius:var(--r-md);font-weight:700;background:var(--prime);color:#fff;
  box-shadow:0 .5rem 1.4rem rgba(var(--prime-rgb),.30);transition:transform .16s,box-shadow .16s}
.btn:hover{transform:translateY(-.08rem)}
.btn[disabled]{opacity:.6;pointer-events:none}
.btn.quiet{background:var(--surface-2);color:var(--ink);box-shadow:none}
.tile-ic{width:3.1rem;height:3.1rem;border-radius:var(--r-md);display:grid;place-items:center;flex:none;
  background:rgba(var(--prime-rgb),var(--tint));color:var(--prime)}
.tile-ic svg{width:1.5rem;height:1.5rem}
.tile{display:flex;gap:1rem;align-items:flex-start;text-align:left;width:100%;transition:transform .18s}
.tile:hover{transform:translateY(-.15rem)}
.tile h3{font-size:1.08rem;margin-bottom:.15rem}
.tile p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.4}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:clamp(.8rem,1.2vw,1.3rem)}
.rowline{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.62rem 0;
  border-top:.06rem solid var(--line);font-size:.92rem}
.rowline:first-child{border-top:0}
h4.sec{font-size:.8rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.8rem}
.bar{height:.5rem;border-radius:999em;background:var(--surface-2);overflow:hidden;margin:.6rem 0 .35rem}
.bar i{display:block;height:100%;border-radius:999em;
  background:linear-gradient(90deg,var(--prime),rgba(var(--prime-rgb),.55))}
.stack{display:flex;flex-direction:column;gap:clamp(.8rem,1.2vw,1.3rem)}
.screen{display:none}
.screen.on{display:block;animation:rise .34s ease}
@keyframes rise{from{opacity:0;transform:translateY(.6rem)}to{opacity:1;transform:none}}
#s-talk.on{flex:1;min-height:0;display:flex;flex-direction:column}

/* ------------------------------------------------------------- Общаемся */
.stage{display:grid;grid-template-columns:minmax(15rem,21rem) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) auto;
  gap:clamp(1.3rem,2.2vw,2.4rem) clamp(1rem,1.6vw,1.8rem);align-items:stretch;flex:1;min-height:0}
.eva-panel{grid-column:1;grid-row:1;display:flex;flex-direction:column;
  gap:clamp(1.1rem,1.8vw,1.7rem);overflow:visible;padding-top:.55rem}
.eva-top{display:flex;flex-direction:column;align-items:center;
  gap:clamp(2.6rem,3vw,3.6rem);text-align:center}
.halo{position:relative;flex:none;width:var(--av);height:var(--av);border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 50% 30%, rgba(var(--prime-rgb),.28), transparent 70%)}
.halo img{width:100%;height:100%;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 .3rem rgba(var(--prime-rgb),.14), 0 1rem 2.4rem rgba(var(--prime-rgb),.22)}
/* Ролик лежит ровно поверх портрета и проявляется, когда пришёл первый кадр:
   пока видео грузится, в кружке остаётся портрет, а не чёрный прямоугольник.
   Смена ролика проходит под тем же портретом — швов между состояниями нет. */
.halo video{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;
  opacity:0;transition:opacity .25s}
.halo video.on{opacity:1}
.halo::after{content:"";position:absolute;inset:-.55rem;border-radius:50%;
  border:.09rem solid rgba(var(--prime-rgb),.32);animation:pulse 3.4s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.035);opacity:.35}}
.eva-name{display:flex;align-items:baseline;justify-content:center;gap:.55rem;margin:0;flex-wrap:wrap}
.eva-name b{font-size:1.15rem;font-weight:800;letter-spacing:-.02em}
.state{display:inline-flex;align-items:center;gap:.45rem;color:var(--muted);font-size:.88rem;font-weight:700}
.dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--ok);box-shadow:0 0 0 .2rem rgba(34,197,94,.18)}
.dot.busy{background:var(--amber);box-shadow:0 0 0 .2rem rgba(245,158,11,.18)}
.modes{display:grid;gap:.6rem;margin-top:auto}
.mode{text-align:left;gap:.75rem;align-items:center;padding:.8rem .9rem;border-radius:var(--r-md);
  transition:transform .18s,box-shadow .18s}
.mode:hover{transform:translateY(-.12rem)}
.modes .tile-ic{width:2.3rem;height:2.3rem;border-radius:.7rem}
.modes .tile-ic svg{width:1.1rem;height:1.1rem}
.mode h3{font-size:.95rem;margin-bottom:.1rem}
.mode p{font-size:.8rem;line-height:1.35}
.mode.on{background:linear-gradient(135deg,rgba(var(--prime-rgb),.14),rgba(var(--prime-rgb),.04)),var(--surface);
  box-shadow:inset 0 0 0 .09rem rgba(var(--prime-rgb),.35),var(--shadow)}
.mode.on h3{color:var(--prime)}
.thread{flex:1;display:flex;flex-direction:column;gap:1.15rem;flex:1;min-height:0;
  overflow-y:auto;padding:clamp(1.1rem,1.6vw,1.9rem)}
.daymark{margin-top:auto;display:flex;align-items:center;gap:.8rem;color:var(--muted);
  font-size:.8rem;font-weight:700}
.daymark::before,.daymark::after{content:"";flex:1;height:.06rem;background:var(--line)}
.msg{display:flex;gap:.7rem;align-items:flex-start;max-width:min(46em,100%)}
.msg.me{margin-left:auto;flex-direction:row-reverse}
.bubble{padding:.85rem 1.15rem;border-radius:1.5rem;font-size:1rem;line-height:1.52;
  white-space:pre-wrap;overflow-wrap:anywhere}
.msg.eva .bubble{background:var(--surface-2);border-bottom-left-radius:.45rem}
.msg.me .bubble{background:linear-gradient(135deg,rgba(var(--prime-rgb),.16),rgba(var(--prime-rgb),.07));
  border-bottom-right-radius:.45rem}
.bubble b{color:var(--prime);font-weight:800}
.msg.err .bubble{color:var(--pink);background:rgba(var(--prime-rgb),.08)}
.acts{display:flex;flex-direction:column;gap:.4rem;padding-top:.25rem}
.act{width:2.1rem;height:2.1rem;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-2);color:var(--muted);transition:.18s}
.act:hover{color:var(--prime);background:rgba(var(--prime-rgb),var(--tint))}
.act svg{width:1.05rem;height:1.05rem}
.typing{display:flex;gap:.28rem;align-items:center;padding:.3rem .2rem}
.typing i{width:.4rem;height:.4rem;border-radius:50%;background:var(--prime);opacity:.45;
  animation:blink 1.1s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-.14rem)}}
.composer{grid-column:2;grid-row:2;display:flex;align-items:center;gap:.7rem}
.field{flex:1;display:flex;align-items:center;gap:.7rem;padding:.4rem .4rem .4rem 1.3rem;
  border-radius:999em;background:var(--surface);
  box-shadow:inset 0 0 0 .09rem rgba(var(--prime-rgb),.5)}
.field input{flex:1;border:0;background:none;color:var(--ink);font-size:1rem;padding:.5rem 0;outline:none}
.field input::placeholder{color:var(--muted)}
.send{width:2.9rem;height:2.9rem;border-radius:50%;background:var(--prime);color:#fff;
  display:grid;place-items:center;flex:none;box-shadow:0 .4rem 1.1rem rgba(var(--prime-rgb),.35)}
.send svg{width:1.15rem;height:1.15rem}
.mic{width:3.5rem;height:3.5rem;border-radius:50%;color:var(--prime);display:grid;place-items:center;
  flex:none;background:var(--surface);box-shadow:inset 0 0 0 .09rem rgba(var(--prime-rgb),.5)}
.mic svg{width:1.4rem;height:1.4rem}
.mic:hover{background:rgba(var(--prime-rgb),.08)}
/* Запись: кнопка залита прайм-цветом и пульсирует — иначе непонятно, слушают
   тебя сейчас или уже нет. Расшифровка — та же кнопка, но замерла. */
.mic.rec{background:var(--prime);color:#fff;box-shadow:0 0 0 .35rem rgba(var(--prime-rgb),.18);
  animation:mic-pulse 1.5s ease-in-out infinite}
.mic.busy{opacity:.55;pointer-events:none}
@keyframes mic-pulse{50%{box-shadow:0 0 0 .75rem rgba(var(--prime-rgb),0)}}
@media (prefers-reduced-motion:reduce){ .mic.rec{animation:none} }

/* Кнопка «прослушать» у слова или глагола. */
.say{width:2rem;height:2rem;flex:none;border-radius:50%;display:grid;place-items:center;
  color:var(--muted);transition:background .18s,color .18s}
.say:hover{background:rgba(var(--prime-rgb),.12);color:var(--prime)}
.say.is-busy{color:var(--prime);background:rgba(var(--prime-rgb),.14)}
.say svg{width:1.05rem;height:1.05rem}

/* --------------------------------------------------------------- сообщение */
/* Выше поля ввода: тост про голос приходит ровно в тот момент, когда человек
   собирается писать, и накрывать композер ему нельзя. */
.toast{position:fixed;left:50%;bottom:6.2rem;transform:translate(-50%,.8rem);z-index:9;
  max-width:min(30rem,90vw);padding:.7rem 1.1rem;border-radius:999em;
  background:var(--ink);color:var(--ground);font-size:.92rem;font-weight:600;text-align:center;
  box-shadow:0 .6rem 1.8rem rgba(21,26,36,.28);
  opacity:0;pointer-events:none;transition:opacity .22s,transform .22s}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ------------------------------------------------------------ Запоминаем */
.sub-head{display:flex;align-items:center;gap:.9rem;margin-bottom:clamp(.8rem,1.2vw,1.2rem);flex-wrap:wrap}
.sub-head h3{font-size:1.25rem}
.sub-tools{display:flex;align-items:center;gap:.6rem;margin-left:auto;flex-wrap:wrap}
.verb-search{padding:.55rem .9rem;border-radius:999em;border:0;background:var(--surface-2);
  color:var(--ink);min-width:14rem}
.lvl-head{display:flex;align-items:center;gap:.7rem;margin:1.1rem 0 .6rem}
.lvl-head:first-child{margin-top:0}
.topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:.7rem}
.topic{display:flex;align-items:center;gap:.8rem;text-align:left;padding:.9rem 1rem;
  border-radius:var(--r-md);transition:transform .16s}
.topic:hover{transform:translateY(-.12rem)}
.topic b{font-size:.98rem}
.topic p{margin:.15rem 0 0;font-size:.82rem;line-height:1.35}
.topic .tick{margin-left:auto;color:var(--ok);font-weight:800}
.topic.is-done b{color:var(--ok)}
.topic-head{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}
.topic-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.2rem}
.gr-p{margin:0 0 .9rem;line-height:1.65}
.gr-examples{display:grid;gap:.4rem;margin:0 0 1rem;padding:.9rem 1rem;border-radius:var(--r-md);
  background:var(--surface-2)}
.gr-example{font-size:.95rem;line-height:1.5}
.gr-block{margin:0 0 1rem;padding:.9rem 1rem;border-radius:var(--r-md);background:var(--surface-2)}
.gr-block-label{display:inline-block;margin-bottom:.35rem;font-size:.75rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--prime)}
.gr-block.is-warn{background:rgba(var(--prime-rgb),.10)}
.gr-block-body{line-height:1.6}
.quiz{max-width:44rem;margin-inline:auto}
.quiz-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.quiz-q{font-size:1.15rem;font-weight:700;margin:0 0 1rem;line-height:1.45}
.quiz-opts{display:grid;gap:.5rem}
.quiz-opt{text-align:left;padding:.8rem 1rem;border-radius:var(--r-md);background:var(--surface-2);
  font-weight:600;transition:.16s}
.quiz-opt:hover{background:rgba(var(--prime-rgb),var(--tint))}
.quiz-opt.is-right{background:rgba(34,197,94,.16);color:var(--ok)}
.quiz-opt.is-wrong{background:rgba(var(--prime-rgb),.16);color:var(--prime)}
.quiz-explain{margin:.9rem 0 0;font-size:.92rem;line-height:1.5}
.flash{transform-style:preserve-3d;transition:transform .12s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;
  padding:clamp(1.6rem,3vw,3rem) 1.4rem;min-height:20rem;text-align:center;max-width:44rem;
  margin-inline:auto;cursor:pointer}
.flash .word{font-size:clamp(1.7rem,1rem + 2vw,2.8rem);font-weight:800;letter-spacing:-.03em}
/* Слово и «прослушать» одной строкой: динамик не должен уводить слово с центра. */
.word-line{display:flex;align-items:center;justify-content:center;gap:.55rem}
.word-line .say{width:2.4rem;height:2.4rem}
.word-line .say svg{width:1.25rem;height:1.25rem}
.flash .tr{font-size:clamp(1.35rem,1rem + .7vw,1.75rem);font-weight:800;color:var(--ink);letter-spacing:-.01em}
.flash .ex{max-width:32em;color:var(--muted);font-size:1.05rem;font-weight:600;line-height:1.5;margin:.2rem 0 0}
.flash:active{transform:scale(.994)}
.flash.is-flipping{animation:cardflip .42s ease}
@keyframes cardflip{
  0%{transform:perspective(60rem) rotateY(0)}
  50%{transform:perspective(60rem) rotateY(90deg)}
  100%{transform:perspective(60rem) rotateY(0)}
}
.rates{display:flex;gap:.6rem;margin-top:.5rem;flex-wrap:wrap;justify-content:center}
.rate{padding:.7rem 1.4rem;border-radius:var(--r-md);font-weight:700;font-size:.95rem;
  background:var(--surface-2);transition:.16s}
.rate:hover{transform:translateY(-.1rem)}
.rate.hard{color:var(--pink);box-shadow:inset 0 0 0 .07rem rgba(var(--prime-rgb),.4)}
.rate.ok{color:var(--amber);box-shadow:inset 0 0 0 .07rem rgba(245,158,11,.4)}
.rate.easy{color:var(--ok);box-shadow:inset 0 0 0 .07rem rgba(34,197,94,.4)}
.goal-row{display:flex;align-items:center;gap:clamp(1rem,1.6vw,1.6rem);max-width:44rem;
  margin:0 auto 1rem}
.goal-row .ring{width:4.4rem;height:4.4rem;flex:none}
.goal-row>div{flex:1}
.goal-time{font-size:1.6rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.goal-btn{width:2.8rem;height:2.8rem;border-radius:50%;display:grid;place-items:center;flex:none;
  background:rgba(var(--prime-rgb),var(--tint));color:var(--prime);transition:.16s}
.goal-btn:hover{transform:scale(1.06)}
.goal-btn svg{width:1.15rem;height:1.15rem}
.goal-row.is-paused .ring-val{opacity:.45}
/* «5 шагов»: цепочка из пяти фраз вокруг слова. Полоса точек показывает, где
   мы в цепочке — иначе шаги сливаются в одинаковые экраны. */
.deep{display:flex;flex-direction:column;align-items:center;gap:.9rem;text-align:center;
  min-height:min(60vh,26rem);justify-content:center;cursor:pointer}
.deep-head{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;justify-content:center;
  font-size:.86rem;font-weight:700}
.deep-dots{display:flex;gap:.35rem}
.deep-dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--line)}
.deep-dot.passed{background:rgba(var(--prime-rgb),.45)}
.deep-dot.active{background:var(--prime);transform:scale(1.25)}
.deep-en{font-size:clamp(1.3rem,1rem + 1.2vw,2rem);font-weight:800;letter-spacing:-.02em;
  max-width:24em;line-height:1.25}
.deep-ru{font-size:clamp(1.05rem,.9rem + .5vw,1.35rem);font-weight:700;color:var(--prime);
  max-width:24em;opacity:0;transition:opacity .22s}
.deep-ru.show{opacity:1}
.deep-hint{margin:0;font-size:.86rem}

.word-row{display:flex;align-items:center;gap:.9rem;padding:.6rem 0;border-top:.06rem solid var(--line)}
.word-row:first-of-type{border-top:0}
.word-row>div:first-child{flex:1;min-width:0}
.word-bar{width:5rem;height:.4rem;border-radius:999em;background:var(--surface-2);overflow:hidden;flex:none}
.word-bar i{display:block;height:100%;background:var(--prime)}
.verb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));gap:.6rem}
.verb{padding:.8rem .9rem;border-radius:var(--r-md)}
.verb>small{margin-top:auto}
.verb{display:flex;flex-direction:column;gap:.55rem}
.verb-forms{display:flex;gap:.35rem;flex-wrap:wrap}
.verb-forms .form{display:inline-flex;align-items:baseline;gap:.3rem;padding:.28rem .55rem;
  border-radius:999em;background:var(--surface-2)}
.verb-forms .form i{font-style:normal;font-size:.66rem;font-weight:800;color:var(--muted);
  opacity:.8;line-height:1}
.verb-forms .form b{font-size:.99rem;font-weight:700;letter-spacing:-.015em}
.verb-forms .form.is-first{background:rgba(var(--prime-rgb),var(--tint))}
.verb-forms .form.is-first b{color:var(--prime);font-weight:800}
.verb.is-done{box-shadow:inset 0 0 0 .07rem rgba(34,197,94,.35),var(--shadow)}
.verb.is-done .verb-forms .form.is-first{background:rgba(34,197,94,.14)}
.verb.is-done .verb-forms .form.is-first b{color:var(--ok)}
.verb-task .slots{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin:.4rem 0}
.slot{display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border-radius:var(--r-md);
  background:var(--surface-2);font-weight:700;min-width:8rem;justify-content:center}
.slot i{font-style:normal;font-size:.75rem;font-weight:800;color:var(--muted)}
.slot.is-filled{background:rgba(var(--prime-rgb),var(--tint));color:var(--prime)}
.slot.is-active{box-shadow:inset 0 0 0 .09rem rgba(var(--prime-rgb),.45)}
.slot.is-right{background:rgba(34,197,94,.16);color:var(--ok)}
.verdict{margin:.2rem 0;font-weight:700;font-size:1rem}
.verb-foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:auto}
.verdict.is-right{color:var(--ok)}
.verdict.is-wrong{color:var(--pink)}

/* ---------------------------------------------------------------- Читаем */
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));
  gap:clamp(1rem,1.8vw,2rem);margin-top:clamp(.8rem,1.4vw,1.4rem)}
.book{position:relative;text-align:left}
.book-open{display:block;width:100%;text-align:left;transition:transform .18s}
.book-open:hover{transform:translateY(-.25rem)}
/* Своя книга снимается с полки крестиком — он проявляется на карточке. */
.book-del{position:absolute;top:.45rem;right:.45rem;width:1.7rem;height:1.7rem;border-radius:50%;
  display:grid;place-items:center;background:rgba(21,26,36,.5);color:#fff;
  opacity:0;transition:opacity .18s,background .18s}
.book:hover .book-del,.book-del:focus-visible{opacity:1}
.book-del:hover{background:var(--pink)}
.book-del svg{width:.9rem;height:.9rem}
.book-add{display:block;width:100%;text-align:left}
.add-slot{aspect-ratio:10/14;border-radius:.5rem;display:grid;place-items:center;
  border:.13rem dashed rgba(var(--prime-rgb),.55);color:var(--prime);
  background:rgba(var(--prime-rgb),.06);transition:background .18s,border-color .18s}
.add-slot svg{width:4rem;height:4rem;padding:1rem;border-radius:50%;
  border:.12rem solid rgba(var(--prime-rgb),.55)}
.book-add:hover .add-slot{background:rgba(var(--prime-rgb),.11);border-color:var(--prime)}
.shelf-note{margin:clamp(.9rem,1.4vw,1.4rem) 0 0;font-size:.88rem;font-weight:600}
.cover{aspect-ratio:10/14;border-radius:.5rem;padding:1.1rem 1rem 1.3rem 1.5rem;display:flex;
  flex-direction:column;justify-content:space-between;color:#fff;position:relative;overflow:hidden;
  box-shadow:0 .7rem 1.6rem rgba(21,26,36,.22)}
.cover::before{content:"";position:absolute;inset:0 auto 0 0;width:.62rem;background:rgba(0,0,0,.2)}
.cover::after{content:"";position:absolute;inset:.55rem .5rem .55rem 1.05rem;
  border:.06rem solid rgba(255,255,255,.4);border-radius:.2rem}
.cover .lvl{position:relative;align-self:flex-end;font-size:.7rem;font-weight:800;letter-spacing:.08em;
  padding:.15rem .5rem;border-radius:999em;background:rgba(255,255,255,.22)}
.cover .ttl{position:relative;font-weight:800;font-size:.98rem;line-height:1.25}
.cover .aut{position:relative;font-size:.76rem;opacity:.85;margin-top:.25rem}
.book h4{margin:.6rem 0 .1rem;font-size:.95rem;font-weight:700}
.book small{color:var(--muted);font-size:.82rem}
.continue{display:flex;align-items:center;gap:clamp(1rem,1.6vw,1.8rem);flex-wrap:wrap}
.mini{width:4rem;height:5.6rem;border-radius:.35rem;flex:none;box-shadow:0 .4rem 1rem rgba(21,26,36,.22)}
.reader-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  margin-bottom:.6rem}
/* Типографика ридера — свойство устройства (localStorage), как тема и кегль
   интерфейса: с телефона и с ноутбука читают по-разному. Значения приходят
   переменными на #reader, «бумага» — классом bg-*, поэтому подстраивается и
   страница, и подписи вокруг неё. */
#reader{--rd-font:Georgia,"Times New Roman",serif;--rd-fs:17px;
  --rd-ink:var(--ink);--rd-muted:var(--muted);--rd-paper:var(--surface)}
#reader.bg-paper{--rd-paper:#fff;--rd-ink:#1c2333;--rd-muted:#7b8496}
#reader.bg-sepia{--rd-paper:#f6eedd;--rd-ink:#43351f;--rd-muted:#96825e}
#reader.bg-night{--rd-paper:#12151c;--rd-ink:#e8ecf5;--rd-muted:#8d96ad}
#reader.bg-paper .muted,#reader.bg-sepia .muted,#reader.bg-night .muted{color:var(--rd-muted)}
#reader.bg-paper h3,#reader.bg-sepia h3,#reader.bg-night h3{color:var(--rd-ink)}
.reader-page{margin:.8rem 0;line-height:1.75;max-width:38em;margin-inline:auto;
  padding:clamp(1.4rem,2.4vw,2.6rem);
  font-family:var(--rd-font);font-size:var(--rd-fs);
  background:var(--rd-paper);color:var(--rd-ink)}
.rd-type-pop{position:absolute;right:0;top:3.2rem;z-index:7;width:min(20rem,90vw);
  display:flex;flex-direction:column;gap:1rem;padding:1.1rem}
.rd-type-pop .seg-ctl button{padding:.45rem .6rem;font-size:.82rem}
#s-read #reader{position:relative}
.reader-page p{margin:0 0 1.1em}
.reader-page p:last-child{margin-bottom:0}
.reader-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  max-width:38em;margin-inline:auto}
.bk-ph{cursor:pointer;border-radius:.2em;transition:background .14s}
.bk-ph:hover{background:rgba(var(--prime-rgb),.14)}
.bk-tip{position:fixed;z-index:8;max-width:22rem;padding:.7rem .9rem;border-radius:var(--r-md);
  background:var(--surface);box-shadow:inset 0 0 0 .06rem var(--ring),var(--shadow);font-size:.92rem}
.bk-tip b{display:block;color:var(--prime);margin-bottom:.15rem;font-size:.86rem}

/* ------------------------------------------------- сессия и выбор темы */
.thread-wrap{grid-column:2;grid-row:1;min-height:0;display:flex;flex-direction:column;gap:.7rem}
.session-pill{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.6rem 1rem;border-radius:999em;font-weight:700;font-size:.9rem;
  background:rgba(var(--prime-rgb),var(--tint));color:var(--prime);
  box-shadow:inset 0 0 0 .06rem rgba(var(--prime-rgb),.32);transition:.18s}
.session-pill:hover{background:rgba(var(--prime-rgb),calc(var(--tint) + .06))}
.session-end{font-weight:700;font-size:.82rem;opacity:.75}
.picker-scrim{position:fixed;inset:0;z-index:7;display:grid;place-items:center;padding:2rem 1.2rem;
  background:rgba(10,8,18,.45);backdrop-filter:blur(.18rem)}
.picker{width:min(48rem,100%);max-height:min(80vh,46rem);display:flex;flex-direction:column;gap:1rem}
.picker-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.picker-body{overflow-y:auto;display:grid;gap:.5rem;padding:.2rem}
.pick{display:flex;align-items:center;gap:.9rem;text-align:left;width:100%;padding:.8rem .9rem;
  border-radius:var(--r-md);background:var(--surface-2);transition:.16s}
.pick:hover{background:rgba(var(--prime-rgb),var(--tint))}
.pick b{font-size:.98rem;font-weight:800}
.pick p{margin:.1rem 0 0;font-size:.84rem;color:var(--muted);line-height:1.35}
.pick .lvl{flex:none;min-width:2.4rem;text-align:center;font-size:.75rem;font-weight:800;
  padding:.2rem .5rem;border-radius:999em;background:rgba(var(--prime-rgb),var(--tint));color:var(--prime)}
.pick.locked{opacity:.55}
.pick.locked:hover{background:var(--surface-2)}
.pick .lock{flex:none;margin-left:auto;color:var(--muted)}
.pick .lock svg{width:1.05rem;height:1.05rem}
/* Сетка сценариев с обложками — как каталог в приложении: квадратная
   картинка «Ева в роли», под ней название и описание. Файла может не быть —
   тогда работает фолбэк: градиент прайма и «призрачная» буква. */
.sc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));
  gap:clamp(.7rem,1.2vw,1.1rem)}
.sc-card{text-align:left;display:flex;flex-direction:column;gap:.55rem;transition:transform .18s}
.sc-card:hover{transform:translateY(-.15rem)}
.sc-cover{position:relative;aspect-ratio:1;border-radius:var(--r-md);overflow:hidden;
  display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(var(--prime-rgb),.85),rgba(var(--prime-rgb),.45))}
.sc-letter{font-size:2.6rem;font-weight:800;color:rgba(255,255,255,.55)}
.sc-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sc-card.is-locked .sc-cover img,.sc-card.is-locked .sc-letter{filter:grayscale(.55);opacity:.5}
.sc-lock{position:absolute;top:.45rem;right:.45rem;width:1.9rem;height:1.9rem;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:rgba(20,16,30,.42);
  backdrop-filter:blur(.25rem);box-shadow:inset 0 0 0 .06rem rgba(255,255,255,.35)}
.sc-lock svg{width:1rem;height:1rem}
.sc-done{position:absolute;top:.45rem;left:.45rem;width:1.6rem;height:1.6rem;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:var(--ok)}
.sc-done svg{width:.9rem;height:.9rem}
.sc-name{font-size:.92rem;font-weight:800;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sc-card.is-locked .sc-name{color:var(--muted)}
.sc-desc{margin:0;font-size:.8rem;color:var(--muted);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.pick-group{margin:.6rem 0 .1rem;font-size:.78rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.pick-group:first-child{margin-top:0}

/* ---------------------------------------------------------- Прогресс/др. */
.dash{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.8rem,1.2vw,1.3rem)}
.hero-streak{grid-column:span 7;background:
  linear-gradient(135deg,rgba(var(--prime-rgb),.18),rgba(var(--prime-rgb),.04)),var(--surface)}
.hero-streak .big{font-size:clamp(2.2rem,1.4rem + 2vw,3.4rem);font-weight:800;line-height:1}
.goal{grid-column:span 5;display:flex;align-items:center;gap:clamp(1rem,1.5vw,1.6rem)}
.ring{width:6rem;height:6rem;flex:none}
.dcard{grid-column:span 4}
.dhead{display:flex;align-items:center;gap:.8rem;margin-bottom:.9rem}
.seg{display:flex;height:.55rem;border-radius:999em;overflow:hidden;background:var(--surface-2);margin:.8rem 0 .6rem}
.legend{display:flex;gap:.9rem;flex-wrap:wrap;font-size:.85rem;color:var(--muted);font-weight:600}
.legend b{color:var(--ink)}
.prof{display:grid;grid-template-columns:minmax(0,1fr) minmax(16rem,22rem);
  gap:clamp(.8rem,1.2vw,1.3rem);align-items:start}
.identity{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.identity .ava{width:4.6rem;height:4.6rem;border-radius:50%;display:grid;place-items:center;color:#fff;
  font-size:1.8rem;font-weight:800;background:linear-gradient(135deg,#0284c7,#38bdf8);flex:none}
.plan{background:linear-gradient(135deg,rgba(var(--prime-rgb),.18),rgba(var(--prime-rgb),.04)),var(--surface)}
.danger{color:var(--pink);font-weight:700}
/* «Ваши результаты» — главный блок кабинета: плитка на раздел, цвет свой,
   тонкая полоса показывает долю пройденного (там, где у раздела есть предел). */
.results-head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin-bottom:clamp(.9rem,1.2vw,1.3rem)}
.results-head>div{flex:1 1 14rem;min-width:0}
.results-head .btn{flex:none}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));
  gap:clamp(.6rem,.9vw,1rem)}
.stat{position:relative;overflow:hidden;padding:1rem 1.05rem 1.05rem;border-radius:var(--r-md);
  background:var(--surface-2);display:flex;flex-direction:column;gap:.45rem}
.stat::before{content:"";position:absolute;inset:0 auto 0 0;width:.22rem;background:var(--c)}
.stat .ico{width:2.1rem;height:2.1rem;border-radius:.72rem;display:grid;place-items:center;
  background:rgba(var(--c-rgb),.16);color:var(--c)}
.stat .ico svg{width:1.2rem;height:1.2rem}
.stat b{display:block;font-size:clamp(1.5rem,1.1rem + .7vw,2rem);font-weight:800;line-height:1.05;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat b i{font-style:normal;font-size:.62em;font-weight:700;color:var(--muted)}
.stat small{color:var(--muted);font-size:.82rem;font-weight:600;line-height:1.3}
.stat .bar{margin:.35rem 0 0;height:.32rem;background:rgba(var(--c-rgb),.16)}
.field-row{display:flex;flex-direction:column;gap:.35rem;font-size:.9rem;color:var(--muted);font-weight:600}
.field-row input,.field-row select{padding:.65rem .8rem;border-radius:var(--r-md);border:0;
  background:var(--surface-2);color:var(--ink);font-weight:600}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.8rem}
.empty{display:grid;place-items:center;gap:.6rem;padding:clamp(2rem,4vw,4rem) 1rem;text-align:center;
  color:var(--muted)}

/* ------------------------------------------------------------- Настройки */
.scrim{position:fixed;inset:0;background:rgba(10,8,18,.45);backdrop-filter:blur(.18rem);
  opacity:0;pointer-events:none;transition:opacity .24s;z-index:5}
.scrim.on{opacity:1;pointer-events:auto}
.panel{position:fixed;top:0;right:0;height:100vh;width:min(24rem,92vw);z-index:6;
  background:var(--surface);border-left:.06rem solid var(--line);padding:clamp(1.2rem,1.8vw,2rem);
  display:flex;flex-direction:column;gap:1.1rem;overflow:auto;
  transform:translateX(100%);transition:transform .3s cubic-bezier(.32,.72,.24,1)}
.panel.on{transform:none}
.panel-head{display:flex;align-items:center;justify-content:space-between}
.set{display:flex;flex-direction:column;gap:.5rem}
.set-top{display:flex;align-items:center;justify-content:space-between;font-size:.92rem;font-weight:700}
.set-top span:last-child{color:var(--prime);font-variant-numeric:tabular-nums}
.seg-ctl{display:flex;gap:.3rem;background:var(--surface-2);padding:.25rem;border-radius:999em}
.seg-ctl button{flex:1;padding:.45rem 1.1rem;border-radius:999em;font-size:.85rem;font-weight:700;
  color:var(--muted);white-space:nowrap}
/* В шапке подраздела переключатель стоит рядом с кнопками — ему нужна ширина,
   иначе «Мои слова» ломается на две строки. */
.sub-tools .seg-ctl{min-width:16rem}
.seg-ctl button.on{background:var(--surface);color:var(--prime);box-shadow:var(--shadow)}
.sel{width:100%;padding:.6rem .8rem;border-radius:var(--r-md);background:var(--surface-2);
  color:var(--ink);font-weight:600;border:0}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.7rem 0;border-top:.06rem solid var(--line);font-weight:600;font-size:.95rem}
.switch{width:2.9rem;height:1.7rem;border-radius:999em;background:var(--line);position:relative;flex:none}
.switch.on{background:var(--prime)}
.switch i{position:absolute;top:.2rem;left:.2rem;width:1.3rem;height:1.3rem;border-radius:50%;
  background:#fff;transition:left .18s}
.switch.on i{left:1.4rem}

/* ------------------------------------------------------------------ вход */
.auth{min-height:100vh;display:grid;place-items:center;padding:2rem 1.2rem}
.auth-card{width:min(28rem,100%);display:flex;flex-direction:column;gap:1rem}
.auth-card h1{font-size:1.8rem}
.tabs{display:flex;gap:.3rem;background:var(--surface-2);padding:.25rem;border-radius:999em}
.tabs button{flex:1;padding:.55rem;border-radius:999em;font-weight:700;font-size:.9rem;color:var(--muted)}
.tabs button.on{background:var(--surface);color:var(--prime);box-shadow:var(--shadow)}
.err{color:var(--pink);font-size:.9rem;font-weight:600;margin:0}

/* ------------------------------------------------------------------ адаптив */
@media (min-width:100rem){ :root{--rail:19rem;--av:13rem} .wrap{max-width:76rem} }
@media (max-width:80rem){
  .head{grid-template-columns:minmax(0,1fr)}
  .head-right{padding-bottom:0}
  .prof{grid-template-columns:minmax(0,1fr)}
  .stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}
  .eva-panel,.thread-wrap,.composer{grid-column:1}
  .eva-panel{grid-row:1;padding-top:0;flex-direction:row;align-items:center;
    gap:clamp(1rem,1.6vw,1.8rem)}
  .eva-top{flex:none;gap:.8rem}
  .eva-panel .halo{width:min(var(--av),9rem);height:min(var(--av),9rem)}
  .modes{flex:1;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));margin-top:0}
  .thread-wrap{grid-row:2}
  .composer{grid-row:3}
  .hero-streak,.goal,.dcard{grid-column:span 12}
}
@media (max-width:73rem){ :root{--rail:5rem} }
.rail-min{--rail:5rem}
@media (max-width:73rem){
  .rail-lbl,.brand b,.rail-acc-txt{display:none}
  .rail{padding-inline:.6rem;align-items:center}
  .nav button{justify-content:center;padding:.75rem}
  .brand{padding:.2rem 0 1.2rem;flex-direction:column;gap:.5rem}
  .rail-foot{flex-direction:column;gap:.45rem;padding:.5rem}
  .rail-acc{flex:none;justify-content:center}
}
.rail-min .rail-lbl,.rail-min .brand b,.rail-min .rail-acc-txt{display:none}
.rail-min .rail{padding-inline:.6rem;align-items:center}
.rail-min .nav button{justify-content:center;padding:.75rem}
.rail-min .brand{padding:.2rem 0 1.2rem;flex-direction:column;gap:.5rem}
.rail-min .rail-foot{flex-direction:column;gap:.45rem;padding:.5rem}
  .rail-acc{flex:none;justify-content:center}
.small-note{display:none}
@media (max-width:63.9rem){
  .canvas{display:block;height:auto}
  .rail,.work{display:none}
  .small-note{display:grid;place-items:center;min-height:100vh;padding:2rem;text-align:center}
}