@layer pages {
/* Офтальмоленька — направление A «Клиника будущего» (25.09.2026).
   Тёмный первый экран от фото Ольги (синий, голографическая радужка, стекло), ниже светлая часть.
   Цвета и шрифты живут в sites/ophthalmolenka/tokens.json (→ static/tokens.css, подключён раньше этого файла).
   Здесь — старые имена как алиасы на роли: [data-scope] нужен, чтобы алиасы пересчитывались внутри scope. */
:root,[data-scope]{
  --bg:var(--surface); --paper:var(--surface-2); --ink:var(--text); --ink-2:var(--text-2); --muted:var(--text-muted);
  --line:var(--border); --line-2:var(--border-strong);
  --navy:var(--color-navy); --navy-2:var(--color-navy-2); --navy-deep:var(--color-navy-deep);
  --iris:var(--accent); --iris-hover:var(--accent-hover); --iris-soft:var(--accent-soft); --iris-ink:var(--accent-ink); --cyan:var(--color-cyan);
  --amber:var(--note); --amber-soft:var(--highlight);
  --display:var(--font-display);
  --body:var(--font-body);
  --mono:var(--font-mono);
  --btn-ink:var(--on-accent);
}
:root{--shadow:var(--shadow-md)}
[hidden]{display:none!important} /* stylelint-disable-line declaration-no-important -- существующий !important (до DS-3), перенесён без изменений */
html{scroll-behavior:smooth;color-scheme:var(--color-scheme,light)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:calc(17px*var(--text-scale,1));line-height:var(--text-line-height,1.55);letter-spacing:var(--text-tracking,normal);-webkit-font-smoothing:antialiased}
a{color:var(--iris)} a:hover{color:var(--iris-hover)}
.wrap{max-width:1160px;margin:0 auto;padding-inline:20px}
.wrap.narrow{max-width:820px}
.reveal{transition:transform .5s ease}
.js .reveal:not(.in){transform:translateY(10px)}
.js .reveal.in{transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .reveal{transform:none;transition:none}}

/* ── типографика ── */
h1,h2,h3,.serif{font-family:var(--display);font-weight:600;letter-spacing:-.01em}
h1{font-size:clamp(32px,4.4vw,60px);line-height:1.04;margin:0 0 16px;text-wrap:balance;overflow-wrap:anywhere}
h2{font-size:clamp(26px,3.4vw,40px);line-height:1.12;margin:0 0 14px;text-wrap:balance}
h3{font-size:22px;margin:24px 0 8px}
p{margin:0 0 14px}
.lede{font-size:clamp(17px,1.5vw,20px);color:var(--ink-2);max-width:60ch}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--iris);font-weight:600;margin:0 0 10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 22px;border-radius:10px;font-weight:600;font-size:16px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .15s ease,background .15s ease,box-shadow .15s ease}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--iris);color:var(--btn-ink);border-color:var(--iris)}
.btn-primary:hover{background:var(--iris-hover);color:var(--btn-ink)}
.btn-white{background:var(--btn-on-accent-bg);color:var(--btn-on-accent-text);box-shadow:var(--btn-shadow)}
.btn-white:hover{background:var(--color-cyan-soft);color:var(--btn-on-accent-text)}
.btn-outline{border-color:var(--alpha-line-40);color:var(--text)}
.btn-outline:hover{background:var(--alpha-surface-10);color:var(--text)}
.btn-ghost{border-color:var(--iris);color:var(--iris);background:transparent}
.btn-ghost:hover{background:var(--iris-soft);color:var(--iris-ink)}
.btn-cyan{background:var(--cyan);color:var(--navy)}
.btn-cyan:hover{background:var(--color-cyan-2);color:var(--navy)}
.btn svg{flex-shrink:0}
.btn-primary,.btn-white,.btn-cyan{position:relative;overflow:hidden}
.btn-primary::after,.btn-white::after,.btn-cyan::after{content:"";position:absolute;top:0;left:-70%;width:50%;height:100%;background:linear-gradient(100deg,transparent,var(--alpha-surface-55),transparent);transform:skewX(-20deg);transition:left .6s ease}
.btn-primary:hover::after,.btn-white:hover::after,.btn-cyan:hover::after{left:120%}
.crumbs{font-size:13.5px;color:var(--muted);margin:0 0 18px}
.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--iris)}

/* ── шапка (тёмная на всех страницах) ── */
.site-head{background:var(--head-bg);backdrop-filter:blur(var(--head-blur));-webkit-backdrop-filter:blur(var(--head-blur));color:var(--head-text);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--alpha-line-10)}
.site-head .row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px 8px}
.site-head .row2{display:flex;align-items:center;gap:2px 22px;padding-block:0 10px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.site-head .row2::-webkit-scrollbar{display:none}
.site-head .row2 a{white-space:nowrap;color:var(--alpha-text-80);text-decoration:none;font-size:14.5px;padding:6px 0;border-bottom:2px solid transparent}
.site-head .row2 a:hover,.site-head .row2 a.on{color:var(--text);border-color:var(--cyan)}
.logo{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--text)}
.opt{font-family:var(--mono);letter-spacing:.2em;display:inline-flex;align-items:baseline;gap:2px;color:var(--color-cyan-mist)}
.opt b:nth-child(1){font-size:22px;color:var(--text);font-weight:500}.opt b:nth-child(2){font-size:16px;font-weight:500}.opt b:nth-child(3){font-size:12px;font-weight:500}
.logo-name{font-family:var(--display);font-weight:600;font-size:23px;letter-spacing:-.01em}
/* логотип: вторая «О» — кольцо Ландольта (templates/base.html, logo_name) */
.logo-name{display:inline-flex;align-items:baseline;white-space:nowrap}
/* кольцо = высота заглавной «О»: внешний диаметр 35/40 бокса, низ на базовой линии */
.logo-ring{width:.8em;height:.8em;margin:0 .015em -.05em;color:var(--accent);flex:none}
.nav{display:flex;align-items:center;gap:4px 22px;flex-wrap:wrap;font-size:15px}
.nav a{color:var(--alpha-text-85);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--text);border-color:var(--cyan)}
.nav a.btn{height:42px;padding:0 16px;font-size:14.5px;border-bottom:0;color:var(--navy)}
.nav a.btn:hover{color:var(--navy);border-color:transparent}
.nav-toggle{display:none;background:none;border:1px solid var(--alpha-line-30);color:var(--text);border-radius:8px;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer}

/* ── герой ── */
.hero{position:relative;overflow:hidden;color:var(--hero-text);background:var(--hero-bg)}
.hero .iris{position:absolute;right:-6%;top:-40px;width:min(760px,80vw);height:auto;opacity:.9;pointer-events:none}
.iris-rot{transform-origin:50% 50%;animation:iris-spin 70s linear infinite}
.iris-glow{animation:iris-pulse 6s ease-in-out infinite}
@keyframes iris-spin{to{transform:rotate(360deg)}}
@keyframes iris-pulse{0%,100%{opacity:.55}50%{opacity:.95}}
@media (prefers-reduced-motion:reduce){.iris-rot,.iris-glow{animation:none}}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:40px;align-items:end;padding-block:64px 40px}
.hero-text{display:flex;flex-direction:column;gap:6px;padding-bottom:28px;min-width:0;position:relative;z-index:2}
.hero .eyebrow{color:var(--cyan)}
.hero .lede{color:var(--alpha-text-84);max-width:560px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px}
.hero-marks{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:22px;font-size:14px;color:var(--alpha-text-72)}
.hero-marks span{display:inline-flex;align-items:center;gap:8px}
.hero-marks svg{color:var(--cyan)}
.hero-photo{position:relative;display:flex;justify-content:center;align-items:flex-end;min-width:0}
.hero-photo::before{content:"";position:absolute;inset:10% 5% 0;border-radius:50%;background:var(--hero-photo-glow);filter:blur(30px);z-index:0}
.hero-photo img{position:relative;z-index:1;max-width:100%;animation:float 7s ease-in-out infinite;filter:drop-shadow(var(--shadow-deep))}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){.hero-photo img{animation:none}}
/* литерал: маска, цвет не важен — используется только альфа-канал (маска, не заливка) */
/* stylelint-disable-next-line color-no-hex -- единственный допустимый литерал цвета (DS-3): маска использует только альфа-канал */
.hero-photo img{width:min(470px,100%);border-radius:28px 28px 0 0;-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,#000 82%,transparent 100%)}
.hero-badge{position:absolute;left:50%;transform:translateX(-50%);width:max-content;max-width:90%;z-index:2;bottom:28px;display:flex;flex-direction:column;gap:3px;padding:14px 18px;border-radius:14px}
.hero-badge small{font-size:12px;color:var(--cyan);letter-spacing:.1em;text-transform:uppercase}
.glass{position:relative;background:var(--hero-entry-bg);border:var(--hero-entry-border);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));box-shadow:var(--shadow-inner-35),var(--shadow-glass-outer)}
.entries{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;padding-block:0 60px}
.entry{border-radius:18px;padding:22px 24px;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--text);transition:transform .2s ease,background .2s ease}
.entry:hover{transform:translateY(-3px);background:var(--alpha-text-14);color:var(--text)}
.entry svg{color:var(--cyan)}
.entry-k{font-family:var(--display);font-size:26px;font-weight:600}
.entry-d{font-size:15px;color:var(--alpha-text-75)}

/* ── секции: светлая часть с глубиной ── */
main{position:relative}
.light-zone{position:relative;overflow:hidden;overflow:clip;background:radial-gradient(900px 500px at 12% 0%,var(--color-mist-2) 0%,var(--bg) 55%),radial-gradient(700px 500px at 95% 40%,var(--color-mist-3) 0%,transparent 60%),var(--bg)}
.orbs{position:absolute;inset:0;pointer-events:none;z-index:0}
.orbs span{position:absolute;border-radius:50%;filter:blur(60px);opacity:.6;animation:orb 22s ease-in-out infinite;will-change:transform}
.orbs span:nth-child(1){width:420px;height:420px;left:-120px;top:120px;background:var(--color-orb-1)}
.orbs span:nth-child(2){width:360px;height:360px;right:-100px;top:900px;background:var(--color-orb-2);animation-delay:-8s}
.orbs span:nth-child(3){width:300px;height:300px;left:40%;top:1700px;background:var(--color-orb-3);animation-delay:-15s}
@keyframes orb{0%,100%{transform:translate(0,0)}33%{transform:translate(40px,-30px)}66%{transform:translate(-30px,40px)}}
@media (prefers-reduced-motion:reduce){.orbs span{animation:none}}
.light-zone > .sec,.light-zone > .article-grid{position:relative;z-index:1}
.sec{padding-block:56px}
.sec-first{padding-top:36px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:22px}
.sec-head a{font-size:15px;text-decoration:none;white-space:nowrap}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.card-lite{position:relative;background:var(--glass-bg-fallback);background:var(--glass-bg);border:var(--glass-border);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border-radius:24px;padding:32px 34px;box-shadow:var(--shadow-inner-highlight),var(--shadow-panel);display:flex;flex-direction:column;gap:14px}
.tilt{transform-style:preserve-3d;transition:transform .25s ease,box-shadow .25s ease;will-change:transform}
.card-navy{position:relative;background:var(--surface-accent);color:var(--text);border-radius:24px;padding:32px 34px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-inner-18),var(--shadow-navy-panel)}
.card-navy .eyebrow{color:var(--cyan)}
.card-navy .muted{color:var(--alpha-text-60);font-size:13px}

/* проверка зрения */
.sivtsev{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 0 6px;font-family:var(--mono);color:var(--ink);user-select:none;max-width:100%;overflow:hidden}
.sivtsev button{font:inherit;background:none;border:0;border-radius:10px;padding:4px 10px;color:inherit;cursor:pointer;line-height:1.1;white-space:nowrap;letter-spacing:.3em}
.sivtsev button:hover{background:var(--iris-soft)}
.sivtsev button.on{background:var(--iris);color:var(--btn-ink)}
.calib{display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--ink-2)}
.calib-card{height:157px;width:250px;max-width:100%;border:2px solid var(--iris);border-radius:10px;background:var(--iris-soft);display:flex;align-items:flex-end;justify-content:flex-end;padding:8px 12px;font-size:12px;color:var(--iris-ink);box-sizing:border-box}
.calib label{display:flex;flex-direction:column;gap:4px}
.calib input[type=range]{width:100%}
.check-note{font-size:13px;color:var(--muted)}

/* чат-блок */
.chat{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.bubble{border-radius:14px 14px 14px 4px;padding:12px 16px;font-size:15px;max-width:88%;align-self:flex-start}
.bubble.me{background:var(--surface-2);color:var(--ink);border-radius:14px 14px 4px 14px;align-self:flex-end}

/* бенто разделов */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.bento .card{display:flex;flex-direction:column;gap:8px;padding:24px;background:var(--alpha-surface-62);border:1px solid var(--alpha-surface-90);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border-radius:20px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-inner-highlight),var(--shadow-card);transition:box-shadow .25s ease}
.bento .card:hover{box-shadow:var(--shadow-inner-highlight),var(--shadow-lg);color:var(--ink)}
.bento .card svg{color:var(--iris)}
.bento .card.big{grid-column:span 2;grid-row:span 2;background:var(--card-hover-bg);color:var(--text);justify-content:flex-end;min-height:260px;overflow:hidden;box-shadow:var(--shadow-inner-highlight),var(--shadow-lg)}
.bento .card.big::after{content:"";position:absolute;right:-80px;top:-80px;width:320px;height:320px;border-radius:50%;border:24px solid color-mix(in srgb,var(--color-cyan) 12%,transparent);box-shadow:0 0 0 40px color-mix(in srgb,var(--color-cyan) 5%,transparent)}
.bento .card.big .eyebrow{color:var(--cyan)}
.bento .card.big .card-t{font-size:32px}
.bento .card.big .card-d{color:var(--alpha-text-80)}
.card-t{font-family:var(--display);font-size:22px;font-weight:600;line-height:1.2}
.card-d{font-size:14px;color:var(--ink-2)}
.cnt{margin-top:auto;padding-top:8px;font-family:var(--mono);font-size:12px;color:var(--iris)}
.cnt.soon{color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.card.big .cnt{color:var(--cyan)}

/* свежие разборы + врач */
.fresh-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:32px;align-items:start}
.alist{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.aitem{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink)}
.aitem .cover{aspect-ratio:4/3;border-radius:16px;background:linear-gradient(160deg,var(--color-cover-1),var(--color-cover-2));overflow:hidden}
.aitem .cover img{width:100%;height:100%;object-fit:cover}
.aitem-s{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--iris);font-weight:600}
.aitem-t{font-family:var(--display);font-size:20px;font-weight:600;line-height:1.25}
.aitem:hover .aitem-t{color:var(--iris)}
.aitem-x{font-size:14px;color:var(--ink-2)}
.aitem-d{font-size:13px;color:var(--muted)}
.doc-card{position:relative;background:var(--glass-bg-fallback);background:var(--glass-bg);border:var(--glass-border);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border-radius:24px;padding:28px;box-shadow:var(--shadow-inner-highlight),var(--shadow-panel);display:flex;flex-direction:column;gap:12px}
.doc-card img{box-shadow:var(--shadow-sm)}
.doc-card img{width:96px;height:96px;border-radius:50%;object-fit:cover}
.doc-card .name{font-family:var(--display);font-size:26px;font-weight:600}
.placeholder{border:2px dashed var(--line-2);background:var(--paper);color:var(--muted);display:flex;align-items:center;justify-content:center;text-align:center;padding:14px;font-size:13.5px;line-height:1.4;border-radius:12px}
.ph-text{min-height:100px}

/* где лечить */
.band{background:var(--surface-accent);box-shadow:var(--shadow-inner-18),var(--shadow-ambient);color:var(--text);border-radius:24px;padding:40px 44px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:center}
.band .eyebrow{color:var(--cyan)}
.band p{color:var(--alpha-text-78)}
.prices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.price{border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:4px}
.price small{font-size:13px;color:var(--cyan)}
.price b{font-family:var(--display);font-size:24px;font-weight:600}

/* хабы и списки статей */
.hub-list{display:flex;flex-direction:column;margin-top:18px}
.hub-list .row{display:grid;grid-template-columns:110px 1fr;gap:4px 16px;padding:16px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--ink)}
.hub-list .row:last-child{border-bottom:1px solid var(--line)}
.hub-list .row:hover .aitem-t{color:var(--iris)}
.hub-list .aitem-x{grid-column:2}
.soon-box{background:var(--glass-bg-fallback);background:var(--glass-bg);border:var(--glass-border);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border-radius:20px;padding:24px 26px;margin-top:22px;max-width:64ch;box-shadow:var(--shadow-inner-highlight),var(--shadow-soft)}
.soon-box ul{padding-left:20px}.soon-box li{margin-bottom:6px}

/* статья */
/* Статья «резиновая» (27.09, Роман: текст не должен собираться рывками при смене ширины окна): боковые колонки
   и шрифт плавно следуют за окном, текст забирает остальное; строка до 84 знаков (русские слова длиннее английских). */
.article-grid{display:grid;grid-template-columns:clamp(170px,13vw,250px) minmax(0,1fr) clamp(250px,19vw,340px);gap:clamp(28px,3vw,56px);justify-content:center;padding-block:40px 64px}
.wrap.article-grid{max-width:1560px}
body:has(.article-grid) .site-head .wrap{max-width:1560px} /* шапка статьи — по ширине статьи */
@media (max-width:1180px){.article-grid{grid-template-columns:minmax(0,1fr) clamp(240px,26vw,300px)}.article-grid .toc{grid-column:1/-1;position:static;flex-direction:row;flex-wrap:wrap;gap:6px 18px}}
.toc{position:sticky;top:128px;align-self:start;display:flex;flex-direction:column;gap:12px;font-size:14px;color:var(--ink-2)}
.toc a{color:var(--ink-2);text-decoration:none;padding-left:12px;border-left:2px solid transparent}
.toc a:hover,.toc a.on{color:var(--iris);border-color:var(--iris);font-weight:600}
.aside{position:sticky;top:128px;align-self:start;display:flex;flex-direction:column;gap:16px}
.aside .doc-card{padding:22px}.aside .doc-card img{width:72px;height:72px}.aside .doc-card .name{font-size:20px}
/* 03.10 Ольга: на ноутбуке нижняя карточка правой колонки обрезалась — колонка «прилеплена» к экрану и выше него.
   Не выше экрана (иначе прокрутка внутри), а на невысоких экранах карточка врача компактнее — обе помещаются. */
@media (min-width:981px){.aside{max-height:calc(100vh - 140px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}}
@media (min-width:981px) and (max-height:920px){.aside .doc-card{padding:16px 18px;gap:8px}.aside .doc-card>img,.article-grid .aside .doc-card img{width:56px;height:56px}.aside .doc-card .name{font-size:18px}.aside .doc-card span{font-size:14px;line-height:1.45}.aside .card-navy{padding:18px 20px}}
.aside .card-navy{padding:22px;gap:10px}
.aside .more{display:flex;flex-direction:column;gap:10px}
.aside .more a{font-family:var(--display);font-size:17px;font-weight:600;line-height:1.3;text-decoration:none;color:var(--ink)}
.aside .more a:hover{color:var(--iris)}
.meta{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:14px;color:var(--muted);margin:8px 0 22px}
.meta img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.meta .who{display:flex;flex-direction:column;gap:2px}.meta .who b{color:var(--ink);font-size:15px}
.check{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--iris);background:var(--iris-soft);border-radius:999px;padding:6px 12px}
.prose{max-width:84ch;font-size:clamp(17px,calc(11px + .55vw),20px);line-height:1.65}
.prose h2{font-size:clamp(26px,calc(14px + 1.1vw),34px);margin:34px 0 12px}
.prose h3{font-size:23px}
.prose ul,.prose ol{padding-left:22px}
.prose blockquote{margin:18px 0;padding:18px 24px;border-radius:18px;background:var(--navy);color:var(--on-accent);font-size:17px}
.prose blockquote::before{content:"Перевожу с медицинского";display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);font-weight:600;margin-bottom:6px}
.tbl{overflow-x:auto;margin:16px 0;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{text-align:left;padding:12px 16px;border-top:1px solid var(--line);vertical-align:top}
thead th{border-top:0;background:var(--iris-soft);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
/* таблицы в статье: слова переносятся по слогам с дефисом, а не режутся по буквам (.prose ставит overflow-wrap:anywhere
   ради длинных ссылок; в узкой колонке это рвало «ВИРУСН/ЫЙ» — Ольга 30.09); на телефоне шрифт и поля меньше */
.prose .tbl table{overflow-wrap:normal;word-break:normal;-webkit-hyphens:auto;hyphens:auto}
@media (max-width:640px){.tbl table{font-size:13.5px;line-height:1.4}.tbl th,.tbl td{padding:9px 8px}.tbl thead th{font-size:10.5px;letter-spacing:.02em}}
.contra{background:var(--amber-soft);border-left:3px solid var(--amber);border-radius:0 12px 12px 0;padding:14px 18px;font-size:15px;max-width:68ch;margin-top:28px;color:var(--ink-2)}
.ctas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}
.ctas .card-lite{padding:20px;gap:8px;border-radius:16px;box-shadow:none}
.ctas .card-t{font-size:20px}
.ctas .btn{align-self:flex-start;height:42px;font-size:14.5px;margin-top:4px}
.cite{font-size:.68em;line-height:0;margin-left:1px}.cite a{color:var(--iris);text-decoration:none;font-weight:600;padding:0 1px}.cite a:hover,.cite a:focus-visible{text-decoration:underline}.sources li:target{background:var(--iris-soft);border-radius:6px}
.sources{margin-top:28px;scroll-margin-top:90px;font-size:14.5px;color:var(--ink-2)}.sources h2{font-size:22px}

/* врезки в тексте статьи: цитата с жирной меткой → .callout, обычная — как раньше .prose blockquote */
.callout{margin:18px 0;padding:16px 20px;border-radius:14px;font-size:16.5px;border-left:4px solid var(--line-2);background:var(--paper);max-width:68ch}
.callout p{margin:0}.callout p+p{margin-top:6px}
.callout-label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-bottom:4px !important} /* stylelint-disable-line declaration-no-important -- существующий !important (до DS-3), перенесён без изменений */
.callout-short{border-color:var(--iris);background:var(--iris-soft);color:var(--iris-ink)}
.callout-short .callout-label{color:var(--iris)}
.callout-important{border-color:var(--navy-2);background:var(--color-paper-blue);color:var(--ink)}
.callout-important .callout-label{color:var(--navy-2)}
.callout-urgent{border-color:var(--color-rust);background:var(--color-rust-soft);color:var(--color-rust-ink)}
.callout-urgent .callout-label{color:var(--color-rust)}

/* конец статьи: похожие материалы того же раздела + финальный призыв спросить врача */
.art-end{margin-top:36px;display:flex;flex-direction:column;gap:24px}
.similar .alist{margin-top:14px}
.end-ask{padding:26px 30px}
/* .card-d глобально — цвет для СВЕТЛЫХ карточек (var(--ink-2)); внутри .end-ask (data-scope="inverse") роль
   text-2 пересчиталась бы на светлый текст inverse-скоупа и текст стал бы заметно ярче, чем было (литерал
   не менялся) — фиксируем прежний (некоскоупленный) цвет явно, вид не меняется */
.end-ask .card-d{color:var(--color-ink-2)}

/* правая колонка «по ходу чтения»: три варианта карточки лежат друг на друге, активный —
   в потоке (задаёт высоту), остальные — оверлеем с opacity:0, крестфейд ≤200мс */
.aside-context{position:relative}
.aside .card-lite{padding:22px}
.aside-card{display:flex;flex-direction:column;gap:12px;opacity:0;visibility:hidden;position:absolute;inset:0;pointer-events:none;transition:opacity .18s ease}
.aside-context[data-active="default"] .aside-card-default,
.aside-context[data-active="urgent"] .aside-card-urgent,
.aside-context[data-active="child"] .aside-card-child{opacity:1;visibility:visible;position:relative;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.aside-card{transition:none}}
.aside-slot[hidden]{display:none}

/* о враче */
.about-grid{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:40px;margin-top:26px;align-items:start}
.about-grid img{border-radius:24px}
.about-grid h2{font-size:24px;margin-top:8px}

/* подвал */
.site-foot{background:var(--navy-deep);color:var(--alpha-text-80);padding-block:44px 28px;font-size:14.5px;margin-top:40px}
.fgrid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px}
.fcol{display:flex;flex-direction:column;gap:6px}
.fcol a{color:var(--alpha-text-75);text-decoration:none}.fcol a:hover{color:var(--text)}
.fhead{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);margin-bottom:4px}
.fabout .logo-name{color:var(--text);font-size:22px;margin-bottom:6px}
.fabout p{max-width:32ch;color:var(--alpha-text-70)}
.fabout .btn{align-self:flex-start;height:44px;font-size:14.5px;border-color:var(--alpha-line-35);color:var(--text)}
.disclaimer{margin-top:32px;padding-top:18px;border-top:1px solid var(--alpha-line-12);color:var(--alpha-text-55);font-size:13.5px;max-width:80ch}
.legal{color:var(--alpha-text-50);font-size:13px}.legal a{color:var(--alpha-text-60)}

/* мобильная липкая кнопка */
.sticky-cta{display:none}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:16px;padding-block:40px 24px}
  .hero-photo{order:-1}.hero-photo img{width:min(300px,70%)}.hero-badge{display:none}
  .article-grid{grid-template-columns:minmax(0,1fr);gap:24px;padding-block:24px 48px}
  .article-grid > *{min-width:0}
  .toc{position:static;order:0;gap:6px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--alpha-surface-70)}
  .toc a{white-space:normal;border-left:2px solid var(--line);padding:3px 0 3px 10px}
  .aside{position:static}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fresh-grid,.two,.band{grid-template-columns:1fr}
  .band{padding:28px}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  /* Ольга 02.10: на телефоне шапка не едет за статьёй — остаётся наверху страницы; за читателем идёт только «Спросить» внизу (.sticky-cta) */
  .site-head{position:relative}
  body{font-size:16px}
  .nav a:not(.btn){display:none}
  .nav a.btn{height:38px;padding:0 12px;font-size:14px}
  .opt{display:none}.logo-name{font-size:19px}
  .site-head .row2{gap:2px 16px}
  .calib-card{width:200px;height:126px}
  .bento{grid-template-columns:1fr}.bento .card.big{grid-column:auto;grid-row:auto;min-height:200px}
  .prices,.ctas{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .hub-list .row{grid-template-columns:1fr}.hub-list .aitem-x{grid-column:1}
  .sec{padding-block:40px}
  .card-lite,.card-navy{padding:24px 22px}
  .sticky-cta{display:block;position:sticky;bottom:0;z-index:9;padding:10px 20px calc(12px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
  .sticky-cta .btn{width:100%}
}

/* проверка зрения — шаги и результат */
.vsteps{display:flex;gap:6px;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.vsteps li{font-size:12.5px;padding:5px 10px;border-radius:999px;background:var(--iris-soft);color:var(--muted)}
.vsteps li.on{background:var(--iris);color:var(--btn-ink)}
.vsteps li.ok{color:var(--iris-ink)}
.vpane{display:flex;flex-direction:column;gap:14px}
.vpane[hidden],[data-copied][hidden]{display:none}
.vpane p{margin:0;color:var(--ink-2)}
.vrow{display:flex;flex-wrap:wrap;gap:10px}
.vrow .btn{height:46px;font-size:15px}
.vresult{border-radius:18px;padding:20px 22px;background:var(--surface-accent);color:var(--text);display:flex;flex-direction:column;gap:12px}
.vres-eyes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.vres-eyes div{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:12px;background:var(--alpha-text-8);border:1px solid var(--alpha-line-25)}
.vres-eyes small{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}
.vres-eyes b{font-family:var(--display);font-size:34px;font-weight:600}
.vresult .vres-text{color:var(--alpha-text-88);font-size:16px;margin:0}
#check .two{align-items:start} /* stylelint-disable-line selector-max-id -- существующий якорь #check (id="check" в разметке блока проверки зрения), перенесён без изменений */

/* форма «Спросить Оленьку» и страницы вопросов */
.askform{display:flex;flex-direction:column;gap:8px}
.askform label{font-size:14px;color:var(--alpha-text-80)}
.askform textarea,.askform select{font:inherit;font-size:16px;border-radius:12px;border:1px solid var(--alpha-line-25);background:var(--alpha-text-8);color:var(--text);padding:12px 14px;width:100%;box-sizing:border-box}
.askform select option{color:var(--color-ink)}
.askform textarea::placeholder{color:var(--alpha-text-50)}
.askform .consent{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;margin-top:4px}
.askform .consent input{margin-top:3px;width:18px;height:18px;flex-shrink:0}
.askform .btn{align-self:flex-start;margin-top:6px}
.askform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.askform-msg{min-height:22px;margin:0;font-size:15px;color:var(--cyan)}
.askform-msg.err{color:var(--color-salmon)}
.qa-q{background:var(--iris-soft);border-left:3px solid var(--iris);border-radius:0 14px 14px 0;padding:16px 20px;margin:8px 0 18px;font-size:18px}
.qa-q p{margin:0 0 8px}.qa-q p:last-child{margin:0}

/* обложки статей */
.art-cover{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:20px;margin:6px 0 22px;box-shadow:var(--shadow-cover)}

/* страховки от горизонтальной прокрутки на телефоне */
html,body{overflow-x:clip}
.prose,.crumbs,.lede,h1,h2{overflow-wrap:anywhere}
.prose img,.prose table{max-width:100%}

/* партнёрский блок в статье (medengine/partners.py) — нативно, без баннеров и анимаций */
.partner{margin:22px 0;padding:18px 20px;border:1px solid var(--line-2);border-radius:14px;background:var(--color-paper-grey);max-width:68ch}
.partner-label{margin:0 0 8px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.partner-title{margin:0 0 6px;font-size:17px;font-weight:700;color:var(--ink)}
.partner-text{margin:0 0 12px;font-size:15.5px;color:var(--ink-2)}
.partner-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:0 0 14px}
.partner-option{padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.partner-option.is-partner{border-color:var(--iris);background:var(--iris-soft)}
.partner-option-label{margin:0 0 6px;font-size:14.5px;font-weight:600;color:var(--ink)}
.partner-option ul{margin:0;padding-left:18px;font-size:13.5px;color:var(--ink-2)}
.partner-option li{margin:2px 0}
.partner-price{margin:8px 0 0;font-size:13.5px;font-weight:600;color:var(--iris-ink)}
.partner-cta{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;border-radius:10px;font-weight:600;font-size:15px;text-decoration:none;border:1px solid var(--iris);color:var(--iris);background:transparent}
.partner-cta:hover{background:var(--iris-soft);color:var(--iris-ink)}
.partner-disclaimer{margin:10px 0 0;font-size:12px;color:var(--muted)}
@media (max-width:640px){.hero-marks{gap:8px 16px}.meta{gap:10px}.check{margin-left:0}.article-grid .toc{display:none}}
/* иллюстрации к разделам (конвейер, medengine/illustrations.py) */
.art-illus{margin:10px 0 26px}
.art-illus img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:18px;box-shadow:var(--shadow-illus)}
.art-anim img{max-width:640px;border:1px solid var(--line);border-radius:12px;margin-inline:auto;display:block;aspect-ratio:auto;object-fit:contain;box-shadow:none}
.art-illus figcaption{margin-top:8px;font-size:14px;line-height:1.45;color:var(--muted)}

/* ── проверка зрения дома (/proverka-zreniya/) и блок «Проверьте себя» в статье, 28.09 ── */
.test-chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 22px}
.test-chips a{padding:8px 14px;border-radius:999px;background:var(--paper);border:1px solid var(--line);text-decoration:none;font-size:15px;font-weight:500}
.test-chips a:hover{border-color:var(--iris)}
.selftest-sec{padding-block:14px;scroll-margin-top:84px}
.selftest-sec h3{font-size:19px;margin:6px 0 0}
.howto{margin:0;padding-left:22px;display:grid;gap:6px;color:var(--ink-2)}
.stest{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.stest-stage{min-height:120px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:18px;padding:22px 12px;background:var(--paper);border:1px solid var(--line);border-radius:18px;color:var(--color-jet);overflow:hidden}
.stest-status{margin:0;font-size:16px;color:var(--ink)}
.landolt{width:40px;height:40px;display:block}
.dirs{display:grid;grid-template-columns:repeat(4,56px);gap:8px}
.dirs .btn{height:52px;padding:0;font-size:22px}
.dirs .btn:disabled{opacity:.45;cursor:default}
.orlova-know{display:flex;flex-direction:column;gap:10px}
.orlova-know p{margin:0;color:var(--ink-2)}
.orlova-icons{display:flex;flex-wrap:wrap;gap:14px;color:var(--navy)}
.orlova-icons svg{width:56px;height:56px}
.orlova-row svg{display:block}
.radial{width:min(320px,100%);height:auto;display:block}
.amsler{width:min(378px,100%);height:auto;display:block}
.amsler-q{display:grid;gap:8px;font-size:15px}
.amsler-q label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.amsler-q input{width:20px;height:20px;margin-top:1px;accent-color:var(--iris)}
.calib-hub h2{font-size:clamp(22px,2.6vw,30px)}
.selftest{margin:28px 0;padding:22px 24px;border-radius:18px;background:var(--iris-soft);border:1px solid var(--line-2)}
.selftest .eyebrow{margin-bottom:12px}
.selftest-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.selftest-card{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:14px;background:var(--paper);border:1px solid var(--line);text-decoration:none;color:var(--ink)}
.selftest-card b{font-family:var(--display);font-size:19px;color:var(--iris-ink)}
.selftest-card span{font-size:14px;color:var(--ink-2)}
.selftest-card:hover{border-color:var(--iris)}
.selftest .check-note{margin:12px 0 0}
.hub-tests{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:28px 0}
.hub-tests .card-lite{padding:22px}
@media (max-width:640px){.hub-tests{grid-template-columns:1fr}}
@media (max-width:640px){.dirs{grid-template-columns:repeat(4,1fr)}.stest-stage{padding:16px 8px}}

/* ── «Что вас беспокоит?» — цели хаба (Роман 03.10.2026, docs/design/SELFTESTS.md): без JS все 11 целей —
   секции подряд (h2 + карточки), ничего не скрыто; JS (main.js) добавляет ряд чипов-кнопок над секциями и
   показывает только выбранную, состояние — в #goal-<id>. ── */
.urgent-line{margin:14px 0 6px;padding:10px 14px;border-radius:10px;background:var(--color-cream);color:var(--color-amber-ink);font-size:14.5px;line-height:1.5}
.urgent-line a{color:var(--color-coral);font-weight:600;text-decoration:none;white-space:nowrap}
.urgent-line a:hover{text-decoration:underline}
.goal-hub{margin:8px 0 6px}
.goal-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 24px}
.goal-chips button{font:inherit;font-size:14.5px;font-weight:500;cursor:pointer;padding:8px 14px;border-radius:999px;background:var(--paper);border:1px solid var(--line);color:var(--ink)}
.goal-chips button:hover{border-color:var(--iris)}
.goal-chips button[aria-pressed="true"]{background:var(--iris);border-color:var(--iris);color:var(--color-white)}
.goal-section{scroll-margin-top:84px}
.goal-h{font-size:clamp(20px,2.4vw,26px);margin:18px 0 10px}
.goal-card{position:relative}
.goal-start{align-self:flex-start}
.kind-badge{font-size:12px;font-weight:600;letter-spacing:.03em;color:var(--muted)}
@media (max-width:640px){.goal-chips{gap:6px}.goal-chips button{font-size:13.5px;padding:7px 12px}}

/* ── «Все тесты по видам» — прежний хаб (до 03.10.2026), свёрнут, не спрятан совсем ── */
.hub-groups{margin:32px 0}
.hub-groups>summary{cursor:pointer;font-weight:600;color:var(--iris);font-size:15px;padding:10px 0;list-style:none}
.hub-groups>summary::-webkit-details-marker{display:none}
.hub-groups>summary::after{content:" →"}
.hub-groups[open]>summary::after{content:" ↓"}

/* картинки для детей: выбор показа, «завершить», итог по двум глазам (29.09) */
.orlova-mode{border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:4px 0;display:grid;gap:6px}
.orlova-mode legend{font-size:13px;color:var(--muted);padding:0 6px}
.orlova-mode label{display:flex;gap:10px;align-items:center;cursor:pointer;font-size:15.5px}
.orlova-mode input{width:20px;height:20px;accent-color:var(--iris);flex-shrink:0}
.stest .btn-link{background:none;border:0;padding:8px 0;font:inherit;font-size:14.5px;color:var(--ink-2);text-decoration:underline;cursor:pointer;align-self:flex-start;min-height:44px}
.orlova-result{display:flex;flex-direction:column;gap:12px}
.orlova-result .vres-eyes div{background:var(--iris-soft);border-color:var(--line)}
.orlova-result .vres-eyes small{color:var(--iris-ink)}
.orlova-result .vres-eyes b{color:var(--ink)}
.orlova-result .vres-eyes span{font-size:13px;color:var(--muted)}
.amsler-q .amsler-ok{font-weight:600;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.amsler-q .check-note{margin:2px 0 0}
.stest .btn[disabled]{opacity:.5;cursor:not-allowed}
.stest .vres-eyes b{font-size:clamp(18px,4.6vw,24px)}

/* «Вы знали?» (29.09) */
.fact-level{display:inline-block;font-size:12.5px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--iris-soft);color:var(--iris-ink)}
.fact-proof{margin:18px 0;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--paper);display:flex;flex-direction:column;gap:6px}
.fact-proof p{margin:0;color:var(--ink-2);font-size:15px}
.fact-src-h{font-size:12px!important;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)!important;margin-top:6px!important} /* stylelint-disable-line declaration-no-important -- существующий !important (до DS-3), перенесён без изменений */
.fact-src{margin:0;padding-left:20px;font-size:14.5px}
.fact-src a{overflow-wrap:anywhere}
.hub-list .row .fact-level{justify-self:start}
/* Вы знали?: хаб по темам и плашка в статьях/тестах (30.09) */
.fact-three{margin:22px 0;padding:18px 22px;border-radius:18px;background:var(--iris-soft);border:1px solid var(--line-2)}
.fact-three h2{margin:0 0 10px}
.fact-three ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:10px}
.fact-group{margin-top:30px}
.fact-card{padding:16px 0;border-top:1px solid var(--line)}
.fact-card h3{margin:0 0 6px;font-size:19px}
.fact-card h3 a{color:var(--ink);text-decoration:none}
.fact-card h3 a:hover{color:var(--iris)}
.fact-card p{margin:0 0 8px;color:var(--ink-2)}
.fact-card .fact-card-x{margin:0}
.fact-aside{margin:28px 0;padding:20px 24px;border-radius:18px;background:var(--iris-soft);border:1px solid var(--line-2)}
.fact-aside .eyebrow{margin-bottom:10px}
.fact-aside-i+.fact-aside-i{margin-top:16px;padding-top:16px;border-top:1px solid var(--line-2)}
.fact-aside-t{font-family:var(--display);font-size:19px;color:var(--iris-ink);margin:0 0 6px}
.fact-aside-i p{margin:0 0 8px}
.fact-aside-i a{font-size:14.5px}

/* колокольчик «Что нового» (engine/static/news.css): на телефоне ссылки меню прячутся (.nav a:not(.btn)) — колокольчик оставляем */
@media (max-width:640px){.nav a.news-bell{display:inline-flex}}


/* ── Главная «авторское медиа» (утверждена Ольгой 29.09.2026): меню 5 пунктов, лента, тест, мифы, объяснения ── */
.wd{--wbg:var(--color-white);--wfg:var(--color-jet);--wacc:var(--color-wd-accent);--wonacc:var(--color-white);--wline:var(--wd-line);--wmut:var(--wd-mut);--wr:14px;background:var(--wbg);color:var(--wfg);border-radius:var(--wr);padding:20px;display:flex;flex-direction:column;gap:12px;position:relative}
.wd-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}.wd-h b{font-size:1.05em}
.wd .disc,.disc{font-size:12px;color:var(--wmut)}
.wd-i{margin:0;font-size:14px;line-height:1.5;color:var(--wmut)}
.wd button,.wd select{font:inherit;font-size:14px;cursor:pointer;border:1.5px solid var(--wline);background:transparent;color:inherit;border-radius:calc(var(--wr)*.6);padding:8px 12px;transition:transform .15s,background .15s,border-color .15s}
.wd button:hover{border-color:var(--wacc)}.wd button:active{transform:scale(.95)}
.wd button.on{background:var(--wacc);border-color:var(--wacc);color:var(--wonacc)}
.wd a.pri,.sb a.pri{background:var(--wacc);color:var(--wonacc);padding:10px 14px;border-radius:calc(var(--wr)*.6);text-decoration:none;font-weight:600}
.wd-next{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.wd-next a:not(.pri){font-size:14px}
.lt-stage{display:grid;place-items:center;height:130px}
.lt-ring{width:72px;height:72px;transition:transform .45s cubic-bezier(.3,1.5,.5,1),width .35s,height .35s}
.lt-pad{display:grid;grid-template-columns:repeat(3,46px);gap:6px;justify-content:center;align-items:center}
.lt-pad button{padding:8px 0;font-size:18px}.lt-n{text-align:center;font-size:12px;color:var(--wmut)}
.lt-dots{display:flex;gap:6px;justify-content:center}.lt-dots i{width:10px;height:10px;border-radius:50%;background:var(--wline);transition:background .3s,transform .3s}
.lt-dots i.ok{background:var(--wacc);transform:scale(1.2)}.lt-dots i.bad{background:var(--color-coral)}
.lt-res p{margin:0}.lt-rt{font-weight:700;font-size:1.1em}
.lt-shake{animation:ltS .35s}@keyframes ltS{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.as-box{position:relative;aspect-ratio:1/1;max-height:300px;width:100%;overflow:hidden;border-radius:10px;background:var(--color-white);color:var(--color-jet);--x:50%}
.as-a,.as-b{position:absolute;inset:0;display:grid;place-items:center}.as-svg{width:88%;height:88%}
.as-b{clip-path:inset(0 0 0 var(--x))}.as-b svg{filter:url(#astF)}
.as-bar{position:absolute;top:0;bottom:0;left:var(--x);width:2px;background:var(--wacc);box-shadow:0 0 0 3px var(--fixed-white-60)}
.as-l{position:absolute;top:8px;font:600 11px system-ui;letter-spacing:.08em;text-transform:uppercase;background:var(--color-jet);color:var(--color-white);padding:3px 7px;border-radius:4px}
.as-a .as-l{left:8px}.as-b .as-l{right:8px}.as-rg{width:100%;accent-color:var(--wacc)}
.rf-svg{width:100%;height:auto}.rf-eye{fill:none;stroke:var(--wline);stroke-width:2}.rf-cornea{fill:none;stroke:var(--wfg);stroke-width:3}
.rf-lens{fill:var(--wacc);opacity:.25;stroke:var(--wacc)}.rf-ret{fill:none;stroke:var(--color-coral);stroke-width:4}
.rf-rays path{fill:none;stroke:var(--wacc);stroke-width:2}.rf-f{fill:var(--wacc)}.rf-t{font:11px system-ui;fill:var(--wmut)}
.rf-btns,.ok-steps,.cm-t{display:flex;flex-wrap:wrap;gap:6px}
.rf-see{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.rf-cap{font-size:12px;color:var(--wmut)}
.rf-sample{font:800 22px/1 system-ui;letter-spacing:.12em;transition:filter .5s}
.rf-txt{min-height:3em}
.site-head .row{padding-block:10px;flex-wrap:nowrap}.site-head .nav{flex-wrap:nowrap!important;gap:6px}.site-head .nav>.btn{white-space:nowrap} /* stylelint-disable-line declaration-no-important -- существующий !important (до DS-3), перенесён без изменений */
.mnav{display:flex;align-items:center;gap:0;flex-wrap:nowrap}
.mnav .mi{position:relative}.mrow{display:none!important} /* stylelint-disable-line declaration-no-important -- существующий !important (до DS-3), перенесён без изменений */
.mnav .mt{display:inline-flex;align-items:center;gap:4px;color:var(--fixed-white-90);text-decoration:none;font-size:14.5px;font-weight:500;padding:9px 8px;border-radius:10px;white-space:nowrap}
.mnav .mt i{font-style:normal;font-size:10px;opacity:.6}.mnav .mt:hover,.mnav .mi:focus-within .mt{background:var(--fixed-white-10);color:var(--color-white)}
.mnav .srch{opacity:.85}
.mega{display:none;position:absolute;top:100%;left:0;z-index:60;min-width:280px;background:var(--color-white);color:var(--ink);border-radius:16px;padding:18px 22px;box-shadow:var(--shadow-mega);grid-auto-flow:column;gap:0 30px}
.mnav .mi:hover .mega,.mnav .mi:focus-within .mega,.mnav .mi.open .mega{display:grid}
/* 03.10.2026 (Роман): «Проверить зрение» — 2 колонки («Что беспокоит» — 11 целей, «Все тесты»), но длинные
   подписи целей («Плохо вижу ночью, ореолы») всё равно уводят меню, прижатое к пункту слева, за правый край
   на 1100/990px — пункт четвёртый из пяти, свободного места справа от него меньше ширины меню. Прижимаем
   меню этого пункта к правому краю контентной колонки шапки (1120px), а не к самому пункту. Прежнее правило
   «широкого меню» (:has(nth-child(5)), для 5+ колонок, когда групп было 7) больше не нужно — колонок теперь
   всегда 2, но признак переносим на явный класс, а не на число колонок. */
.mnav .mi.mi-vision{position:static}
.mnav .mi.mi-vision > .mega{left:auto;right:max(12px,calc((100% - 1120px) / 2))}
/* 01.10: панель белая, а шапка — data-scope="inverse" (--text белый) → пункты были белыми на белом. Внутри панели — светлая палитра */
.mega{--ink:var(--color-ink);--muted:var(--color-ink-2);--iris:var(--color-iris)}
.mega .mh{margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mega a{display:block;padding:5px 0;color:var(--ink)!important;text-decoration:none;white-space:nowrap}.mega a:hover{color:var(--iris)!important} /* stylelint-disable-line declaration-no-important -- существующий !important (до DS-3), перенесён без изменений */
.fx{transition:filter .9s ease,opacity .9s ease}.js .fx:not(.in){filter:blur(7px);opacity:.3}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.sec-head .more{white-space:nowrap}
.more{font-weight:600;color:var(--iris);text-decoration:none}.secsub{margin:-8px 0 18px;color:var(--ink-2)}
.lab,.tagx{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--iris)}
.av{--s:44px;width:var(--s);height:var(--s);flex:none;border-radius:50%;overflow:hidden;display:inline-block;box-shadow:0 0 0 2px var(--color-white),0 0 0 3.5px var(--cyan)}
.av img{width:100%;height:100%;object-fit:cover;object-position:50% 15%;display:block}
.byo{display:inline-flex;align-items:center;gap:8px;font-size:14px}.byo b{font-weight:600}
.today{display:grid;grid-template-columns:1.35fr 1fr;gap:20px;align-items:stretch}
.today .lead{min-height:440px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:30px 32px;border-radius:24px;text-decoration:none;color:var(--color-white);position:relative;overflow:hidden;background:radial-gradient(circle at 78% 30%,var(--color-abyss) 0 7%,var(--color-iris) 7.5% 10%,var(--color-cyan) 10.5% 12%,var(--color-navy-2-a90) 12.5% 20%,transparent 20.5%),linear-gradient(135deg,var(--navy-2),var(--navy));box-shadow:var(--shadow-today)}.today .lead .card-t{font:600 clamp(1.7rem,2.6vw,2.3rem)/1.12 var(--display);max-width:22ch}.today .lead .card-d{color:var(--color-pale-blue);font-size:1.05rem;max-width:40ch}.today .lead .eyebrow{color:var(--cyan)}.today .lead .rd{font-weight:600;color:var(--cyan)}.today .lead .byo b{color:var(--color-white)}.today .lead:hover{transform:translateY(-3px)}.today .lead{transition:transform .3s}
.leadc{display:flex;gap:10px;align-items:flex-start;background:var(--fixed-white-10);border-radius:14px;padding:12px 14px;margin-top:6px;font-style:italic}.leadc .byo{flex:none;font-style:normal}
.nowbox{display:flex;flex-direction:column;gap:6px}.nowh{margin:0;font-weight:700;display:flex;align-items:center;gap:8px;font-size:1.1rem}
.live-dot{width:9px;height:9px;border-radius:50%;background:var(--color-coral);animation:pl 1.4s infinite}@keyframes pl{50%{opacity:.25}}
.feedx{list-style:none;margin:0;padding:0}.feedx li{display:grid;grid-template-columns:52px 1fr;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.feedx time{font-variant-numeric:tabular-nums;font-weight:600;font-size:13px;color:var(--iris);padding-top:2px}.feedx a{display:block;color:var(--ink);font-weight:500;text-decoration:none;line-height:1.35}
.feedx .brk{background:var(--color-cyan-a18);border-radius:8px}.feedx .brk time{color:var(--color-coral)}
.why{margin-top:6px}.why summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--iris);list-style:none}.why summary::-webkit-details-marker{display:none}.why summary::after{content:" →"}
.why[open] summary::after{content:" ↓"}.why p{margin:6px 0 0;font-size:14px;font-style:italic;color:var(--ink-2);border-left:3px solid var(--cyan);padding-left:10px}
.auth{display:grid;grid-template-columns:1.1fr 1fr;gap:20px}
.big-auth{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--color-white)}.big-auth h3{margin:0;font-family:var(--display);font-size:1.7rem;line-height:1.2}.big-auth p{margin:0;color:var(--color-pale-blue)}.big-auth .btn{align-self:flex-start}
.shorts{display:grid;gap:14px}
.short{display:flex;flex-direction:column;gap:6px;background:var(--paper,var(--color-white));border:1px solid var(--line);border-radius:18px;padding:16px 18px;text-decoration:none;color:var(--ink)}
.short b{font-family:var(--display);font-size:1.12rem}.short p{margin:0;color:var(--ink-2)}.short small{color:var(--muted)}.short .go{font-weight:600;color:var(--iris)}
.note p{font-family:var(--display);font-size:1.12rem;color:var(--ink)}.attn{background:var(--color-cream);border-color:var(--color-sand)}.attn .lab{color:var(--color-amber)}
.chk{display:grid;grid-template-columns:1fr 1.05fr;gap:22px;align-items:start}
.chk h3{font-family:var(--display);font-size:1.9rem;margin:6px 0 12px;line-height:1.15}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}.steps li{display:flex;gap:12px;align-items:center}
.steps b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--iris-soft,var(--color-iris-soft));color:var(--navy);flex:none}
.warn{margin:14px 0;padding:10px 14px;border-radius:12px;background:var(--color-cream);color:var(--color-amber-ink);font-size:14px}
.more-tests{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:14px}.more-tests span{color:var(--muted)}.more-tests a{color:var(--iris);font-weight:600}
.wd{--wbg:var(--color-white);--wfg:var(--ink);--wacc:var(--iris);--wline:var(--line);--wmut:var(--muted);--wr:22px;border:1px solid var(--line);box-shadow:var(--shadow-subtle)}
.know{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;background:linear-gradient(135deg,var(--navy-2),var(--navy));color:var(--color-white);border-radius:24px;padding:30px 34px}
.know .kcnt{font:600 clamp(3.4rem,7vw,5.6rem)/1 var(--display);color:var(--cyan);font-variant-numeric:tabular-nums}.know .suf{font:600 1.8rem var(--display);margin-left:8px;color:var(--cyan)}.know .wc p,.know .wc small{display:none}
.know .kt{margin:6px 0;font-size:1.2rem;font-family:var(--display)}.know small{color:var(--color-steel-blue)}.know .more{color:var(--cyan)}.know .eyebrow{color:var(--cyan)}
.newg{display:grid;grid-template-columns:1.2fr 1fr 1fr;grid-template-rows:auto auto;gap:16px}
.newg>a{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink);background:var(--paper,var(--color-white));border:1px solid var(--line);border-radius:18px;padding:16px 18px}
.newg b{font-family:var(--display);font-size:1.12rem;line-height:1.25}.newg .meta{margin-top:auto;font-size:13px;color:var(--muted)}
.n-art{grid-row:span 2}.n-art b{font-size:1.4rem}.thumb{display:block;aspect-ratio:16/10;border-radius:12px;margin-bottom:6px;background:radial-gradient(circle at 50% 50%,var(--color-midnight) 0 13%,var(--color-iris) 14% 20%,var(--color-cyan) 21% 27%,var(--color-navy-2) 28% 42%,var(--color-navy) 43%)}
.n-line{border-left:4px solid var(--iris)!important}.n-note{background:var(--color-frost)!important}.n-note p{margin:0;font-family:var(--display);font-size:1.05rem;font-style:italic} /* stylelint-disable-line declaration-no-important -- существующий !important (до DS-3), перенесён без изменений */
.lvl{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:3px}.lvl i{width:8px;height:8px;border-radius:50%;background:var(--line)}.lvl i.f{background:var(--iris)}
.n-mini{background:var(--navy)!important;color:var(--color-white)!important}.n-mini .lab{color:var(--cyan)}.n-mini .meta{color:var(--color-steel-blue)} /* stylelint-disable-line declaration-no-important -- существующий !important (до DS-3), перенесён без изменений */
.bento .card{background:var(--color-white);transition:background .35s ease,color .35s ease,transform .25s,box-shadow .35s}
.bento .card .card-t,.bento .card .card-d,.bento .card svg,.bento .card .soonx{transition:color .35s ease}
.bento .card:hover,.bento .card:focus-visible{background:linear-gradient(135deg,var(--navy-2),var(--navy));color:var(--color-white);box-shadow:var(--shadow-hover)}
.bento .card:hover .card-t{color:var(--color-white)}.bento .card:hover .card-d{color:var(--color-pale-blue)}.bento .card:hover svg{color:var(--cyan)}.bento .card:hover .soonx{color:var(--cyan)}
.soonx{margin-top:auto;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.myths{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.myth{font:inherit;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:8px;min-height:190px;padding:18px;border-radius:18px;border:1px solid var(--line);background:var(--paper,var(--color-white));color:var(--ink)}
.myth b{font-family:var(--display);font-size:1.2rem;line-height:1.25}.myth .ans{display:none;color:var(--ink-2);font-size:15px}.myth .ans em{font-style:normal;font-weight:700;color:var(--color-red)}
.myth .tap{margin-top:auto;font-size:13px;font-weight:600;color:var(--iris)}.myth.open{background:linear-gradient(135deg,var(--navy-2),var(--navy));color:var(--color-white);border-color:transparent}
.myth.open .ans{display:block;color:var(--color-mist-5);animation:mf .45s ease}.myth.open .ans em{color:var(--color-blush)}.myth.open .tap{display:none}.myth.open .lab{color:var(--cyan)}@keyframes mf{from{opacity:0;transform:translateY(6px)}}
.mfoot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:16px 0 0;color:var(--ink-2)}
.look{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.faq{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;align-items:start}.faq-l{display:grid;gap:10px}
.qa{background:var(--paper,var(--color-white));border:1px solid var(--line);border-radius:16px;padding:14px 18px}.qa summary{cursor:pointer;font-family:var(--display);font-size:1.15rem;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}
.qa summary::-webkit-details-marker{display:none}.qa summary::after{content:"+";color:var(--iris);font-size:1.4rem;line-height:1;transition:transform .3s}.qa[open] summary::after{transform:rotate(45deg)}
.qa p{margin:10px 0 6px;color:var(--ink-2)}.qa a{font-weight:600;color:var(--iris)}
.faq-side{display:flex;flex-direction:column;gap:12px;align-items:flex-start}.faq-side p{margin:0;font-family:var(--display);font-size:1.2rem}
.res{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rs{display:flex;flex-direction:column;gap:8px;background:var(--paper,var(--color-white));border:1px solid var(--line);border-radius:18px;padding:18px}
.rs>svg{color:var(--iris)}.rs h3{margin:0;font-family:var(--display);font-size:1.2rem;line-height:1.25}
.rs dl{margin:0;font-size:14px}.rs dt{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.rs dd{margin:2px 0 0;color:var(--ink-2)}
.rsc{display:flex;gap:10px;align-items:flex-start;background:var(--color-frost);border-radius:12px;padding:10px 12px;margin-top:auto}.rsc p{margin:0;font-style:italic;font-size:14px}
.help .price{text-decoration:none;color:var(--color-white)}.help .price b{font-size:1rem}
.tomorrow h3{font-family:var(--display);font-size:1.5rem;margin:6px 0 10px}.tomorrow ul{margin:0 0 14px;padding-left:1.1em}.tomorrow li{margin:4px 0}
.tomorrow .sub{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.tomorrow .sub a:not(.btn){color:var(--iris);font-weight:600}
.lead .cnt,.leadc{position:relative}
@media(max-width:980px){.site-head .nav .mnav{display:none}.mrow{display:flex!important;overflow-x:auto;scrollbar-width:none;padding-bottom:6px}.mrow::-webkit-scrollbar{display:none}.mrow a.mt{font-size:14px;padding:8px 10px}.mega{position:fixed;left:12px;right:12px;top:130px;max-height:60vh;overflow:auto;grid-auto-flow:row}.hvbar{bottom:86px;right:10px;font-size:12px}.myths{grid-template-columns:1fr 1fr}.today,.auth,.chk,.look,.faq,.res,.newg{grid-template-columns:1fr}.n-art{grid-row:auto}.know{grid-template-columns:1fr}} /* stylelint-disable-line declaration-no-important -- существующий !important (до DS-3), перенесён без изменений */
/* 01.10 Роман: на телефоне меню было одной строкой с невидимой прокруткой — «Проверить зрение» обрезался, «Найти помощь»
   не видно. Теперь пункты переносятся (2 строки), все видны сразу; фото в первом экране меньше — заголовок поднимается. */
@media (max-width:980px){.mrow{flex-wrap:wrap;overflow-x:visible;gap:0 2px;padding-bottom:8px}.mrow a.mt{font-size:13.5px;padding:7px 9px}.mega{top:150px}}
@media (max-width:640px){.hero-grid{padding-block:20px 24px;gap:12px}.hero-photo img{width:min(170px,46%)}}
@media (prefers-reduced-motion:reduce){.js .fx:not(.in){filter:none;opacity:1}.live-dot{animation:none}}
.today.solo{grid-template-columns:1fr;max-width:720px}
.shorts3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.home-evo .bento .card.big{grid-column:auto;grid-row:auto}
.thumbimg{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px;margin-bottom:6px}
@media(max-width:980px){.shorts3{grid-template-columns:1fr}}
/* Решение Романа 2.10.2026 (примерочная ?fx-preview&variant=mix, sites/ophthalmolenka/docs/DECISIONS.md):
   плашки «пластик» — на весь сайт, не только в варианте mix. Перенесено из variants/mix/variant.css без
   изменений (тот же набор целей, те же --shadow-neo/--shadow-neo-in, sites/ophthalmolenka/tokens.json).
   variants/mix остаётся как есть (docs/design/VARIANTS.md) — дублирование намеренное, оверлей токенов
   варианта не умеет писать правила сайта по умолчанию. */
.card-lite,.doc-card,.soon-box,.bento .card,.short,.newg>a,.rs,.qa,.myth,.selftest-card,.partner,.fact-proof,.stest-stage,.wd,.orlova-mode,.toc,.know,.today .lead{background:var(--surface);border:0;border-radius:24px;box-shadow:var(--shadow-neo);backdrop-filter:none;-webkit-backdrop-filter:none}
.bento{gap:28px}
.bento .card:hover,.bento .card:focus-visible{background:var(--surface);color:var(--text);box-shadow:var(--shadow-neo-in)}
.bento .card:hover .card-t{color:var(--text)}
.bento .card:hover .card-d{color:var(--text-2)}
.bento .card:hover svg,.bento .card:hover .soonx{color:var(--accent)}
.bento .card svg{background:var(--surface);border-radius:50%;padding:10px;box-shadow:var(--shadow-neo-in);color:var(--accent)}
/* 2.10.2026: «Стекло» 200 % поверх плашек — ровно как Роман видел в примерочной. Там fx-preview.css красит
   фон/рамку/тень стекла непослойным !important (сильнее плашек); на рабочей странице fx.css живёт в слое
   components и проигрывает плашкам слоя pages — без этого правила стекло на «О чём здесь» почти не видно
   (приёмка «примерочная ↔ рабочая»: 7.4 % отличий на главной 1440). */
.fx-glass .bento .card[data-fx="glass"]{background:var(--glass-bg);border:var(--glass-border);color:var(--glass-text);box-shadow:var(--glass-highlight),var(--shadow-deep)}
}
/* 03.10 Ольга: «Проверить зрение ребёнку» — полоса в тексте раздела о детском зрении (build.insert_child_strip) */
.child-strip{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin:18px 0 24px;padding:18px 22px;border-radius:20px;background:var(--iris-soft);border:1px solid var(--line-2);color:var(--ink);text-decoration:none}
.child-strip-t{display:flex;flex-direction:column;gap:4px;flex:1 1 280px}
.child-strip-t b{font-family:var(--display);font-size:20px;font-weight:600}
.child-strip-t span:last-child{color:var(--ink-2);font-size:15px}
.child-strip:hover .btn,.child-strip:focus-visible .btn{filter:brightness(1.08)}
/* 03.10: «Спросить Оленьку» в шапке на компьютере; где тесно — подпись «Что нового» у колокольчика прячется (счётчик
   остаётся), а на узкой шапке кнопка короткая «Спросить» (на телефоне внизу и так полоса «Спросить Оленьку») */
.nav-ask{white-space:nowrap}
.site-head .news-bell__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* шапка ограничена 1160px — подпись всегда переносилась; для экранного чтения остаётся */
@media (max-width:1180px){.nav-ask-name{display:none}}