/* Pronunciation with Mary · v3 (BRIEF-V3 §6.4). */
@font-face{font-family:Literata;src:url('assets/fonts/literata-latin-ecb8958d.woff2') format('woff2');font-weight:200 900;font-display:swap;unicode-range:U+0020-007E,U+00A0,U+00A9,U+00AB,U+00B7,U+00BB,U+2018-201E,U+2026,U+203A,U+20AC}
@font-face{font-family:Literata;src:url('assets/fonts/literata-italic-latin-27bb37bd.woff2') format('woff2');font-weight:400 600;font-style:italic;font-display:swap;unicode-range:U+0020-007E,U+00A0,U+00A9,U+00AB,U+00B7,U+00BB,U+2018-201E,U+2026,U+20AC}
@font-face{font-family:Manrope;src:url('assets/fonts/manrope-latin-f1ccea03.woff2') format('woff2');font-weight:200 800;font-display:swap;unicode-range:U+0020-007E,U+00A0,U+00A9,U+00AB,U+00B7,U+00BB,U+2018-201E,U+2026,U+203A,U+20AC}
@font-face{font-family:Manrope;src:url('assets/fonts/manrope-cyrillic-5d12dbca.woff2') format('woff2');font-weight:200 800;font-display:swap;unicode-range:U+0400-052F,U+2DE0-2DFF,U+A640-A69F}
@font-face{font-family:Literata;src:url('assets/fonts/literata-cyrillic-39e36b0c.woff2') format('woff2');font-weight:200 900;font-display:swap;unicode-range:U+0400-052F}
@font-face{font-family:Literata;src:url('assets/fonts/literata-italic-cyrillic-0475b2fc.woff2') format('woff2');font-weight:400 600;font-style:italic;font-display:swap;unicode-range:U+0400-052F,U+0020-002F,U+003A-003F,U+00A0,U+00AB,U+00BB,U+2019,U+2026}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:80px;scroll-padding-bottom:16px}
body{min-height:100vh;overflow-x:clip;background:var(--paper);color:var(--ink);font:400 var(--fs-body)/1.6 var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{display:block;max-width:100%;height:auto}
svg{display:block}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
h3{font-family:var(--font-display);font-weight:500;line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
p,li{text-wrap:wrap}
.lk-lead,.hero__lead,.lk-note__q p,.why__story,.route__res,.demo__chat p,.life__q{text-wrap:pretty}
a{color:inherit}
mark{color:inherit}
:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
a:focus-visible,summary:focus-visible,button:focus-visible{scroll-margin-top:80px}
main:focus,main>section[tabindex="-1"]:focus{outline:none}
[hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:8px;top:-80px;z-index:70;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--r-pill);background:var(--ink);color:var(--paper);font:700 var(--fs-ui)/1 var(--font-body);text-decoration:none}
.skip:focus{top:8px}
p a:not([class]){color:var(--link);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.18em}
/* кнопки: */
.btn-buy{display:inline-flex;align-items:center;justify-content:center;min-height:var(--cta-h-s);padding:12px 26px;border-radius:var(--r-pill);background:var(--cta);color:var(--on-cta);box-shadow:var(--sh-cta);font:700 var(--fs-cta)/1.25 var(--font-body);text-align:center;text-decoration:none}
.btn-buy:hover{background:var(--cta-press)}
.btn-buy:active{scale:.98}
.cta-micro{margin-top:10px;color:var(--ink-2);font:500 var(--fs-meta)/1.45 var(--font-body)}
.cta-micro .seg{white-space:nowrap}
.cta-inapp{display:none;margin-top:6px;color:var(--ink-2);font:500 var(--fs-meta)/1.45 var(--font-body)}
:root:is([data-inapp="ig"],[data-inapp="fb"],[data-inapp="tg"],[data-preview]) .cta-inapp{display:block}
/* смуги: */
.band{padding-block:var(--section-y)}
.band--cream{background:var(--cream)}
.band--paper{background:var(--paper)}
.band--light{position:relative;isolation:isolate;background:var(--grad-world)}
.band--light::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grain);mix-blend-mode:var(--grain-blend);opacity:var(--grain-opacity);pointer-events:none}
.band .lk-h2{margin-bottom:clamp(24px,18px + 1.5vw,40px)}
.lk-wrap{padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right))}
@supports (content-visibility:auto){
.js main>section:not(#hero,#reviews){content-visibility:auto;contain-intrinsic-size:auto var(--cis,880px)}
/* The tail keeps its natural layout: a direct scroll must not replace estimated heights. */
.js main>section:is(#mary,#unique,#faq,#start){content-visibility:visible;contain-intrinsic-size:none}
}
/* шапка: */
@media (max-width:359px){
.lk-head__in{gap:8px}
.lk-pill{padding:0 12px}
}
:root[data-theme="dark"] .lk-head .lk-pill{background:color-mix(in oklab,var(--yellow) 80%,var(--raised));box-shadow:var(--sh-paper)}
:root[data-theme="dark"] .lk-head .lk-pill:hover{background:color-mix(in oklab,var(--yellow-press) 76%,var(--raised))}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .lk-head .lk-pill{background:color-mix(in oklab,var(--yellow) 80%,var(--raised));box-shadow:var(--sh-paper)}
:root:not([data-theme="light"]) .lk-head .lk-pill:hover{background:color-mix(in oklab,var(--yellow-press) 76%,var(--raised))}
}
/* HERO P-1 «Мері в кадрі»: */
html{overflow-x:clip}
@supports not (overflow:clip){
html,body{overflow-x:hidden}
}
.hero{padding:6px var(--gutter) 0;overflow-x:clip}
.hero__plate{display:grid;grid-template-areas:"text" "stage";gap:26px;max-width:calc(var(--content-max) - 2 * var(--gutter));margin-inline:auto;padding:22px 18px 20px;box-shadow:var(--sh-world)}
.hero__field{position:absolute;inset:0;z-index:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.hero__field canvas{border-radius:inherit}
.hero__field[data-gl=fallback]{background:repeating-radial-gradient(circle at 78% 42%,transparent 0 22px,color-mix(in srgb,var(--world-ink) 5%,transparent) 23px 24px,transparent 25px 46px);-webkit-mask:radial-gradient(circle at 78% 42%,var(--ink) 0 30%,transparent 62%);mask:radial-gradient(circle at 78% 42%,var(--ink) 0 30%,transparent 62%)}
.hero__text,.hero .stage{position:relative;z-index:1}
.hero__text{grid-area:text;min-width:0}
.hero__eyebrow{margin-bottom:12px}
.hero__eyebrow .lk-eyebrow__cover{object-position:50% 34%;box-shadow:0 0 0 3px var(--world-deep),var(--sh-paper)}
.hero__eyebrow b{font-size:.9375rem;letter-spacing:0}
.hero h1{font-size:clamp(2.5rem,1.95rem + 2.3vw,4.125rem)}
.hero__name{display:block}
.hero__lead{max-width:27em;margin-top:14px;font-weight:500}
.hero-cta{margin-top:22px}
.hero-cta .lk-cta{display:flex;width:100%}
.stage{grid-area:stage;position:relative;height:clamp(330px,92vw,400px);margin:0 4px 6px 0}
.stage__screen{position:absolute;right:0;bottom:14px;width:68%;border:5px solid var(--raised);border-radius:12px;box-shadow:var(--sh-paper);rotate:4deg;opacity:.92}
.stage__frame{position:absolute;left:4px;bottom:12px;width:min(76%,290px);margin:0;--layer-x:12px;--layer-y:12px;--layer-tilt:3deg;--layer-ground:var(--world-accent)}
.hero__photo{display:block;--frame-pp:8px;rotate:-2.5deg}
.hero__photo img{aspect-ratio:4/5;object-fit:cover}
/* дуги звуку: */
.stage__sound{left:calc(100% - 4px);top:34%;width:60px;height:105px;translate:0 -50%;overflow:visible;--loop-color:var(--world-ink)}
.stage__sound path:nth-child(1){stroke-width:3}
.stage__sound path:nth-child(2){stroke-width:2.2;opacity:.7}
.stage__sound path:nth-child(3){stroke-width:1.6;opacity:.45}
.stage__sound .stage__echo{stroke-width:1.4;opacity:0}
.stage[data-echo] .stage__sound .stage__echo{opacity:.9}
.stage__st1,.stage__st2{font-size:1rem;padding:7px 12px 8px;white-space:nowrap}
.stage__st1{--st-top:6px;--st-left:calc(min(76%,290px) - 112px);--st-tilt:4deg}
.stage__st2{--st-top:auto;bottom:-2px;--st-left:auto;right:6px;--st-tilt:-3deg}
.stage__st2 b{font-style:normal;font-weight:500;font-variant-numeric:lining-nums}
@media (max-width:380px){
.hero h1{font-size:2.375rem}
}
@media (max-width:899px) and (max-height:700px){
.hero-cta{margin-top:16px}
.hero__lead{margin-top:10px}
}
@media (max-width:899px) and (max-height:650px){
.hero__eyebrow{display:none}
.hero h1{font-size:2.25rem}
}
@media (min-width:900px){
.hero__plate{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-areas:"text stage";align-items:center;column-gap:clamp(32px,4vw,64px);padding:clamp(40px,4vw,72px)}
.hero h1 em{display:block}
.hero__text{align-self:center}
.hero__lead{margin-top:28px}
.hero-cta .lk-cta{display:inline-flex;width:auto;min-width:280px}
.stage{height:clamp(470px,40vw,560px);margin:0}
.stage__screen{top:auto;bottom:3%;right:0;width:76%;rotate:3deg}
.stage__frame{left:0;top:2%;bottom:auto;width:min(76%,340px);--layer-x:16px;--layer-y:16px}
.hero__photo{--frame-pp:11px;rotate:-2deg}
.stage__sound{top:39%;width:80px;height:140px}
.stage__st1{--st-top:46%;--st-left:-26px;font-size:var(--fs-hand);--st-tilt:-3deg}
.stage__st2{right:2%;bottom:5%;font-size:var(--fs-hand)}
}
@media (min-width:1200px){
.hero h1{font-size:4.5rem}
}
@media (orientation:landscape) and (max-height:500px) and (max-width:899px){
.hero__plate{grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"text stage";align-items:center;column-gap:24px;padding:16px 22px}
.hero__eyebrow,.hero__lead{display:none}
.hero h1{font-size:2rem}
.hero-cta{margin-top:14px}
.stage{height:230px}
.stage__frame{width:150px}
.stage__sound{width:44px;height:77px}
.stage__st1,.stage__st2{display:none}
}
@media (prefers-reduced-motion:no-preference){
/* Екран і рама сідають раз, коли фото вже декодовано (inline-скрипт у рамі, не довше 400… */
:root:not(.rv-done) .stage__screen{animation:rv-settle 700ms var(--rv-settle) 120ms backwards;--rv-rotate:7deg}
:root:not(.rv-done) .stage__frame{animation:stage-in 760ms var(--rv-settle) 160ms backwards}
:root:not(.rv-done) .stage__st1{animation:rv-settle 700ms var(--rv-settle) 900ms backwards}
:root:not(.rv-done) .stage__st2{animation:rv-settle 700ms var(--rv-settle) 1000ms backwards}
@keyframes stage-in{from{translate:0 18px;rotate:-1.5deg}}
}
:root[data-theme="dark"] :is(.stage__frame,.mary__fig){--layer-ground:color-mix(in oklab,var(--world) 55%,var(--world-ink) 45%)}
:root[data-theme="dark"] .stage__screen{opacity:.82;filter:brightness(.8) saturate(.9)}
:root[data-theme="dark"] .stage__sound{--loop-color:var(--world-accent);filter:drop-shadow(0 0 1px var(--paper)) drop-shadow(0 0 2px var(--paper))}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) :is(.stage__frame,.mary__fig){--layer-ground:color-mix(in oklab,var(--world) 55%,var(--world-ink) 45%)}
:root:not([data-theme="light"]) .stage__screen{opacity:.82;filter:brightness(.8) saturate(.9)}
:root:not([data-theme="light"]) .stage__sound{--loop-color:var(--world-accent);filter:drop-shadow(0 0 1px var(--paper)) drop-shadow(0 0 2px var(--paper))}
}
/* «Струна» (REDESIGN-10 §5.4 hero): */
.hero__text{position:relative}
.hero .lk-ul,.hero__string{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.hero .lk-ul .ch{display:inline-block;font-style:inherit;will-change:transform}
.hero__string{position:absolute;z-index:2;left:0;top:0;height:64px;overflow:visible;fill:none;stroke:var(--world-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;cursor:grab;-webkit-tap-highlight-color:transparent}
.hero__string:active{cursor:grabbing}
.hero__string .hero__bead{fill:var(--world-ink);stroke:none;opacity:0}
.has-string .hero .lk-ul::after{visibility:hidden}
.stage__ring{position:absolute;pointer-events:none;overflow:visible;fill:none;stroke:var(--world-ink);stroke-linecap:round;transform-origin:0 50%;opacity:0}
:root[data-theme="dark"] .stage__ring{stroke:var(--world-accent)}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .stage__ring{stroke:var(--world-accent)}
}
/* lf:reviews · r3 «Що кажуть наші учні» - kit rings: голос «ви» посередині, на колах - де його почули; поруч їхні слова без паперу.
   Телефон: заголовок, кола, цитата. Десктоп: заголовок і цитата ліворуч, кола праворуч (5/6), усе в одному кадрі. */
.lk-notes__in .lk-h2{margin-bottom:0}
.pairs__more{margin-top:-8px;max-width:24em;color:var(--ink-2);font:500 var(--fs-lead)/1.45 var(--font-body)}
.pairs{position:relative;margin:0 0 16px;padding:0 0 10px}
.pairs::after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:16px;border:1px solid var(--world-line);border-radius:0 0 14px 14px;background:var(--world-deep);box-shadow:var(--sh-paper)}
.pairs__card{position:relative;z-index:1;padding:16px 12px 12px;border:1px solid var(--world-line);border-radius:var(--r-card);background:var(--raised);box-shadow:var(--sh-lift)}
.pair{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:10px;width:100%;min-height:60px;margin:0;padding:8px 14px;border:1.5px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink);font:inherit;text-align:start;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pair[aria-expanded="true"]{border-color:var(--world-ink);background:var(--raised);box-shadow:var(--sh-paper)}
.pair__w{display:block;font:500 clamp(1.125rem,1rem + .6vw,1.5rem)/1.15 var(--font-display);letter-spacing:-.02em;white-space:nowrap;color:var(--ink-2)}
.pair__g{display:block;margin-top:3px;color:var(--muted);font:600 var(--fs-meta)/1.3 var(--font-body)}
.why__ava{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--yellow);box-shadow:var(--sh-paper)}
/* бульбашка обіймає свою історію; стос історій тримає висоту найдовшої (detail r3-04) */
.why__say{display:grid;gap:10px;align-items:start;color:var(--ink);font:400 var(--fs-body)/1.55 var(--font-body);transform-origin:0 0}
.why__story{padding:14px 18px;border-radius:4px 18px 18px 18px;background:var(--world)}
.why__dots{position:absolute;left:52px;top:12px;display:flex;align-items:center;gap:6px;padding:16px 18px;border-radius:4px 18px 18px 18px;background:var(--world);opacity:0;scale:.9;transform-origin:0 0;pointer-events:none}
.why__dots i{width:7px;height:7px;border-radius:50%;background:var(--world-ink);opacity:.45}
/* переклад почутого - лише коли слово «приземлилось» (motion r2-03) */
.pairs-on .scene .scene__gloss{opacity:0;translate:0 4px}
.pairs-on .scene[data-landed] .scene__gloss{opacity:1;translate:0 0}
.pairs__next{display:flex;align-items:center;margin-left:auto;min-height:44px;padding:0 4px;border:0;background:none;color:var(--link);font:600 var(--fs-ui)/1.2 var(--font-body);cursor:pointer}
.scene{position:relative;display:grid;place-items:center;gap:6px;min-height:clamp(212px,180px + 9vw,300px);padding:18px 8px 12px;cursor:pointer;-webkit-tap-highlight-color:transparent;overflow:hidden;border-radius:calc(var(--r-card) - 6px);background:radial-gradient(120% 90% at 50% 105%,var(--world) 0 40%,transparent 70%)}
.scene__said{display:flex;align-items:baseline;gap:10px;color:var(--ink-2);font:500 clamp(1.5rem,1.2rem + 1.4vw,2.5rem)/1 var(--font-display);letter-spacing:-.02em}
.scene__said small,.scene__gloss{color:var(--muted);font:600 var(--fs-meta)/1.3 var(--font-body);letter-spacing:0}
.scene__heard{position:relative;display:grid;justify-items:start;color:var(--world-ink);font:italic 600 clamp(3.5rem,2.4rem + 5vw,6.5rem)/1.05 var(--font-display);letter-spacing:-.03em;white-space:pre}
.scene__heard>span{grid-area:1/1;display:flex}
.scene__heard i{display:inline-block;font-style:inherit;white-space:pre}
.scene__from{color:var(--ink-2);font-weight:500}
.scene__sticker{position:absolute;left:0;top:0;z-index:2;width:.92em;height:.92em;pointer-events:none;filter:drop-shadow(0 1px 1px rgb(39 46 42/18%)) drop-shadow(0 8px 14px rgb(39 46 42/18%))}
.scene__sticker path{fill:var(--yellow);stroke:var(--raised);stroke-width:2.2;stroke-linejoin:round;paint-order:stroke}
.scene__sticker path+path{fill:none;stroke:var(--ink);stroke-width:1;opacity:.8}
.scene__dot{position:absolute;left:0;top:.12em;width:.16em;height:.16em;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 .04em var(--world-ink);pointer-events:none}
.scene__flash{position:absolute;left:0;top:0;width:.9em;height:.9em;border-radius:50%;border:3px solid var(--world-accent);pointer-events:none;opacity:0}
@media (min-width:1024px){
.pairs__card{padding:26px 24px 18px}
.pair{min-height:84px;padding:14px 20px}
}
@media (hover:hover) and (pointer:fine){
:is(.pairs__next,.lk-link,.lk-foot a) span[aria-hidden]{display:inline-block}
:is(.pairs__next,.lk-link,.lk-foot a):hover span[aria-hidden]{translate:3px 0}
}
@media (prefers-reduced-motion:no-preference){
.why__dots{transition:opacity 160ms var(--ease-out),scale 220ms var(--ease-out)}
.why__dots i:nth-child(2){--d:1}
.why__dots i:nth-child(3){--d:2}
@keyframes why-type{0%,60%,100%{opacity:.25;translate:0 2px}30%{opacity:1;translate:0 -3px}}
.pairs-on .scene[data-landed] .scene__gloss{transition:opacity 220ms var(--ease-out),translate 450ms var(--ease-settle)}
:is(.pairs__next,.lk-link,.lk-foot a) span[aria-hidden]{transition:translate var(--dur-hover) var(--ease-out)}
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .pairs__card{background:radial-gradient(60% 50% at 50% 40%,color-mix(in oklab,var(--world-accent) 18%,transparent),transparent),color-mix(in oklab,var(--world) 62%,var(--raised));box-shadow:0 0 0 1px color-mix(in srgb,var(--world-accent) 35%,transparent),0 24px 60px -24px rgb(0 0 0/55%)}
}
.course__facts{color:var(--world-ink);font:700 var(--fs-lead)/1.4 var(--font-body)}
.course__path{margin-top:4px;color:var(--ink-2);font:500 var(--fs-body)/1.5 var(--font-body)}
.course__module{display:grid;grid-template-columns:28px minmax(0,1fr);gap:4px 10px;align-content:start;align-items:start;width:100%;min-height:44px;height:100%;padding:12px;border:1px solid var(--world-line);border-radius:var(--r-note);background:var(--raised);color:var(--ink);font:600 1rem/1.35 var(--font-body);text-align:start;cursor:pointer;-webkit-tap-highlight-color:transparent}
.course__module-n{grid-row:1/3;display:grid;place-items:center;min-height:28px;border-radius:50%;background:var(--world);color:var(--world-ink);font:700 var(--fs-meta)/1 var(--font-body)}
.course__module-count{grid-column:2;color:var(--ink-2);font:500 var(--fs-meta)/1.4 var(--font-body)}
.course__module[aria-current="true"]{border-color:var(--world-ink);box-shadow:inset 0 0 0 1px var(--world-ink);background:color-mix(in oklab,var(--world) 55%,var(--raised))}
.course__current{margin-bottom:20px;color:var(--world-ink);font:600 var(--fs-meta)/1.5 var(--font-body)}
.phrase__explain{display:grid;gap:10px;margin-top:16px;max-width:62em;color:var(--ink-2);font:500 1rem/1.5 var(--font-body);text-wrap:pretty}
.phrase__explain>span{display:block}
.phrase__explain b{color:var(--world-ink);font-weight:700;white-space:nowrap}
.phrase__held{text-decoration:line-through;text-decoration-thickness:1px}
.phrase{position:relative;margin:0 0 16px;padding:clamp(20px,16px + 1.4vw,32px) clamp(16px,4vw,64px) clamp(56px,4vw,64px);border-radius:var(--r-card);background:var(--raised);box-shadow:var(--sh-lift);view-timeline:--phrase block}
.phrase__lens{margin:0 0 clamp(36px,24px + 2.4vw,56px)}
.phrase__st{top:auto;left:auto;right:10px;bottom:-26px;max-width:13.5em;--st-tilt:2deg}
.grp{white-space:nowrap}
.phrase__line{position:relative;color:var(--ink);font:500 clamp(2.125rem,1.3rem + 3.4vw,4.75rem)/2 var(--font-display);letter-spacing:-.02em;text-wrap:balance;cursor:pointer}
.beat::before{content:"";position:absolute;left:50%;bottom:-.04em;width:.13em;height:.13em;border-radius:50%;background:var(--world-decor);translate:-50% 0;opacity:.7}
.beat--on::before{width:.24em;height:.24em;bottom:-.1em;background:var(--world-ink);opacity:1}
.an--sound>.beat:first-child::after{content:"";position:absolute;z-index:-1;left:-.12em;right:-.06em;top:calc(50% - .36em);height:.84em;border-radius:48%;background:var(--world-hl);rotate:-4deg;pointer-events:none}
.glue{position:absolute;left:50%;bottom:.74em;translate:-50% -.6em;color:var(--marker);font:italic 600 .55em/1 var(--font-display);opacity:0;scale:.4}
.phrase__ball{position:absolute;left:0;top:0;width:max(12px,.3em);height:max(12px,.3em);border-radius:50%;background:var(--yellow);box-shadow:0 0 0 .05em var(--world-ink),0 .08em .14em color-mix(in srgb,var(--ink) 30%,transparent);opacity:0;pointer-events:none}
.phrase__key{display:flex;align-items:center;gap:10px;margin-top:28px;color:var(--world-ink);font:italic 500 1rem/1.2 var(--font-display)}
/* лінзи */
.phrase:not([data-lens="all"]) :is(.an,.beat)::before,.phrase:not([data-lens="all"]) .an::after{opacity:.12}
.phrase:not([data-lens="all"]) .phrase__line{color:color-mix(in srgb,var(--ink) 34%,transparent)}
.phrase[data-lens="stress"] .phrase__line{color:color-mix(in srgb,var(--ink) 50%,transparent)}
.phrase[data-lens="stress"] .an--sound{scale:.84;opacity:.6}
.phrase[data-lens="stress"] .beat:not(.an--sound .beat,.an--stress .beat){scale:.84;opacity:.6}
.phrase[data-lens="rhythm"] .phrase__line{color:color-mix(in srgb,var(--ink) 55%,transparent)}
.phrase[data-lens="rhythm"] .beat--on{color:var(--ink)}
.phrase[data-lens="rhythm"] .beat--on::before{opacity:1}
.phrase[data-lens="rhythm"] .phrase__ball{opacity:1}
.phrase[data-lens="link"] .glue{opacity:1;scale:1;translate:-50% 0}
@media (max-width:599px){
.phrase__line{line-height:2.1}
.beat--on::before{bottom:.15em}
}
@media (min-width:1024px){
.phrase{max-width:none;padding-bottom:24px}
.phrase__line{font-size:5rem;line-height:1.75;text-align:center}
.phrase__st{top:-20px;right:28px;bottom:auto}
.phrase__lens{margin-bottom:24px}
}
@media (prefers-reduced-motion:no-preference){
.phrase .phrase__line,.phrase .beat,.phrase .an,.phrase .glue,.phrase .an::after,.phrase .an--sound>.beat:first-child::after,.phrase :is(.an,.beat)::before{transition:color 280ms,opacity 280ms,scale var(--spring-paper-dur,520ms) var(--spring-paper,ease),translate var(--spring-paper-dur,520ms) var(--spring-paper,ease)}
.rv-on .phrase:not(.is-in) :is(.an,.beat)::after,.rv-on .phrase:not(.is-in) :is(.an[data-tag],.beat)::before{opacity:0}
.rv-done .phrase :is(.an,.beat)::after,.rv-done .phrase :is(.an,.beat)::before,.phrase[data-touched] :is(.an,.beat)::after,.phrase[data-touched] :is(.an,.beat)::before{animation:none!important}
@keyframes an-in{from{opacity:0;scale:.3}}
@keyframes an-tag{from{opacity:0;translate:-50% .5em}}
@supports (animation-timeline:view()){
:root:not(.rv-done) .phrase[data-lens="all"] :is(.an,.beat)::after,:root:not(.rv-done) .phrase[data-lens="all"] :is(.an[data-tag],.beat)::before{animation:an-scrub linear both;animation-timeline:--phrase}
@keyframes an-scrub{from{opacity:0;scale:.3}to{opacity:1;scale:1}}
@keyframes an-tag-scrub{from{opacity:0;translate:-50% .5em}to{opacity:1;translate:-50% 0}}
}
}
.ticks__chart{position:relative;margin-inline:14px;padding:106px 0 40px;--rv-wipe-bg:var(--paper);touch-action:pan-y;outline:none;-webkit-tap-highlight-color:transparent}
.ticks__bars{fill:none;stroke:var(--world-accent);stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.ticks__avg{fill:none;stroke:var(--world-ink);stroke-width:1.5;stroke-dasharray:3 5;vector-effect:non-scaling-stroke}
.ticks__lens{fill:none;stroke:var(--world-ink);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke}
.ticks__head{position:absolute;left:0;bottom:40px;width:2px;height:calc(100% - 132px);border-radius:2px;background:var(--world-ink);pointer-events:none}
.ticks__head::after{content:"";position:absolute;left:50%;top:-5px;width:10px;height:10px;border-radius:50%;translate:-50% 0;background:var(--yellow);box-shadow:0 0 0 2px var(--world-ink)}
.ticks__grip{position:absolute;left:50%;bottom:-36px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;translate:-50% 0;background:var(--world-ink);color:var(--paper);font:700 .8125rem/1 var(--font-body);letter-spacing:.06em;box-shadow:var(--sh-paper)}
.ticks__grip::before{content:"";position:absolute;inset:-8px}
.ticks__tip{position:absolute;left:0;top:0;width:min(17rem,78vw);padding:9px 13px 10px;border-radius:12px;background:var(--raised);box-shadow:var(--sh-lift);color:var(--ink);pointer-events:none}
.ticks__tip b{display:block;color:var(--world-ink);font:700 var(--fs-meta)/1.3 var(--font-body);font-variant-numeric:tabular-nums}
.ticks__tip span{display:block;margin-top:2px;font:600 var(--fs-small)/1.35 var(--font-body);text-wrap:balance}
.ticks__n{display:block;color:var(--world-ink);font:500 var(--fs-num)/1 var(--font-display);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.03em}
.ticks__t{display:block;margin-top:8px;color:var(--ink);font-weight:600}
.ticks__key{display:block;margin-top:4px;color:var(--muted);font-size:var(--fs-meta)}
@media (max-width:1023px){
.ticks__t{margin-top:0}
.phrase{padding-bottom:48px}
}
@media (min-width:1024px){
.ticks__head{height:calc(100% - 106px)}
}
.lesson{grid-area:lesson}
.demo__lead{max-width:34em;margin-top:-6px;font-size:var(--fs-body);line-height:1.55;color:var(--ink-2)}
.step{position:relative;display:flex;align-items:center;gap:10px;min-width:44px;height:44px;padding:0;border-radius:var(--r-pill);color:var(--ink-2);-webkit-tap-highlight-color:transparent}
.step[role=tab]{cursor:pointer}
.step[aria-selected="true"]{padding-inline-end:14px;background:var(--raised);color:var(--ink);box-shadow:var(--sh-paper)}
.step:focus-visible{outline:var(--focus-ring);outline-offset:2px}
.beats__n{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--world-deep);color:var(--world-ink);font:500 1.125rem/1 var(--font-display)}
.step__cap{min-width:0;font:italic 400 clamp(.9375rem,.85rem + .5vw,var(--fs-hand))/1.15 var(--font-display);text-wrap:balance}
.lesson{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;column-gap:8px;padding:48px 0 0}
.lesson__phone{grid-column:1/-1;--device-w:min(198px,51vw);--device-safe:calc(var(--device-w) * .14);position:relative;z-index:1}
.lesson__st{--st-top:-8px;--st-left:0px;max-width:14em;padding:8px 12px 9px;font-size:.9375rem;--st-tilt:-3deg;z-index:3}
.scr{background:var(--paper)}
.lesson-on .lk-device__screen>.scr{position:relative;z-index:0}
.lesson-on .lk-device__screen>.scr[data-screen-on]{z-index:1;box-shadow:-14px 0 22px -16px rgb(23 28 25/45%)}
.scr__open{display:flex;flex-direction:column;gap:10px;min-height:100%;padding:0 12px 14px;color:var(--ink);text-decoration:none;cursor:pointer;font:500 13px/1.35 var(--font-body)}
.scr__tabs{display:flex;gap:8px;padding-bottom:7px;border-bottom:1px solid var(--line);color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;-webkit-mask:linear-gradient(90deg,var(--ink) 82%,transparent);mask:linear-gradient(90deg,var(--ink) 82%,transparent)}
.scr__tabs b{color:var(--ink)}
.scr__kicker{color:var(--world-ink);font:700 13px/1.2 var(--font-body);letter-spacing:.06em}
.scr__kicker b{color:var(--muted);font-weight:600}
.scr__video,.scr__cam{position:relative;display:block;flex:none;aspect-ratio:16/10;border-radius:10px;overflow:hidden}
.scr__video{display:grid;place-items:center;background:radial-gradient(90% 120% at 30% 20%,var(--raised),var(--world) 70%)}
.scr__slide{display:flex;align-items:baseline;gap:12px;color:var(--world-ink);font:500 46px/1 var(--font-display)}
.scr__pip{position:absolute;right:8px;top:8px;width:34px;height:34px;border-radius:50%;object-fit:cover;object-position:50% 30%;background:var(--yellow);box-shadow:0 0 0 2px var(--raised)}
.scr__play{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--raised);box-shadow:var(--sh-paper)}
.scr__time{color:var(--muted);font:600 13px/1 var(--font-body);font-variant-numeric:tabular-nums}
:is(.scr__video,.scr__cam) .scr__time{position:absolute;right:8px;bottom:12px;padding:2px 5px;border-radius:4px;background:color-mix(in srgb,var(--ink) 55%,transparent);color:var(--on-dark)}
.scr__line{position:absolute;left:8px;right:8px;bottom:6px;height:3px;border-radius:2px;background:color-mix(in srgb,var(--ink) 18%,transparent);overflow:hidden}
.scr__line i{position:absolute;inset:0;background:var(--world-ink);transform-origin:0 50%;scale:.22 1}
.scr__cam{background:var(--yellow)}
.scr__cam img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.scr__loop{display:flex;gap:4px;flex-wrap:wrap;margin-top:auto;padding-top:10px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
.scr__loop>*{padding:4px 7px;border-radius:999px;background:var(--cream)}
.scr__loop b{background:var(--world-ink);color:var(--paper)}
.scr__done,.scr__task{display:inline-flex;align-items:center;gap:8px;align-self:start;padding:8px 12px;border:1px solid var(--line);border-radius:10px;font-weight:600}
.scr__box{display:grid;place-items:center;width:16px;height:16px;border-radius:4px;background:var(--world-ink)}
.scr__task .scr__box,.lesson-on .scr__done:not([data-on]) .scr__box{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-contrast)}
.scr__task .scr__box::after,.lesson-on .scr__done:not([data-on]) .scr__box::after{opacity:0}
.scr__box::after{content:"";width:8px;height:4px;margin-top:-2px;border:solid var(--on-dark);border-width:0 0 2px 2px;rotate:-45deg}
.scr__words{display:flex;flex-wrap:wrap;gap:6px}
.scr__words b{display:inline-block;flex:none;min-height:34px;padding:0 10px;line-height:34px!important;border-radius:10px;background:var(--raised);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font:500 16px/1 var(--font-display)}
.scr__words u{color:var(--world-ink);font-weight:700;text-decoration:underline 2px var(--world-accent);text-underline-offset:3px}
.scr__wave{display:flex;align-items:center;justify-content:center;gap:3px;height:36px;padding:0 12px;border-radius:999px;background:var(--world)}
.scr__wave i,.scr__bars i{flex:1;max-width:4px;height:var(--h,40%);border-radius:2px;background:var(--world-ink)}
.scr__mic{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--raised)}
.scr__dot{flex:none;width:28px;height:28px;border-radius:50%;background:var(--world-ink);box-shadow:0 0 0 4px var(--world-deep),inset 0 0 0 9px var(--world-ink),inset 0 0 0 30px var(--world-accent)}
.scr__bars{display:flex;align-items:center;gap:3px;flex:1;min-width:0;height:32px}
.scr__bars i{background:var(--world-accent)}
.scr__take{display:flex;align-items:center;gap:6px;min-width:0;max-width:100%;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--raised)}
.scr__take b{white-space:nowrap}
.scr__take .scr__time{flex:none;margin-left:auto}
.scr__pill{flex:none;padding:3px 6px;border-radius:999px;background:var(--world);color:var(--world-ink);font:700 13px/1 var(--font-body)}
.scr__rec{display:grid;place-items:center;align-self:center;width:54px;height:54px;margin-top:auto;border-radius:50%;box-shadow:inset 0 0 0 3px var(--world-ink)}
.scr__rec i{width:38px;height:38px;border-radius:50%;background:var(--world-ink)}
/* екран 1: наступний крок уроку піднімається, коли урок позначено (motion r3-03) */
.scr__next{position:relative;display:grid;gap:2px;padding:9px 30px 10px 12px;border-radius:10px;background:var(--world);color:var(--ink-2);font-size:13px;line-height:1.25}
.scr__next b{color:var(--world-ink);font-weight:700}
.scr__next::after{content:"›";position:absolute;right:12px;top:50%;translate:0 -55%;color:var(--world-ink);font:700 18px/1 var(--font-body)}
.scr__ring{position:relative;display:grid;place-items:center;flex:none;width:40px;height:40px}
.scr__ring svg{position:absolute;inset:0;width:100%;height:100%;rotate:-90deg;fill:none;stroke-width:3}
.scr__ring circle{stroke:var(--world-deep)}
.scr__ring .scr__run{stroke:var(--world-ink);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.scr__ring i{width:24px;height:24px;border-radius:50%;background:var(--world-ink)}
/* екран 3: відеорозбір домашки від Мері - те, про що бульбашка поруч (illustrator r3-03) */
.scr__fb{display:flex;align-items:center;gap:8px;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--raised)}
.scr__fbv{position:relative;display:grid;place-items:center;flex:none;width:48px;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:radial-gradient(90% 120% at 30% 20%,var(--raised),var(--world) 70%)}
.scr__fbt{display:grid;min-width:0;line-height:1.2}
.scr__fbt b{font-size:13px;font-weight:700;white-space:normal}
.scr__orig{grid-row:2;grid-column:1;justify-self:start;display:inline-block;min-height:44px;line-height:44px!important;margin-top:6px;padding:0 4px;border:0;background:none;color:var(--link);font:600 .8125rem/1 var(--font-body);white-space:nowrap;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.scr__orig[data-off]{visibility:hidden;opacity:0}
.scr__orig span{display:inline-block}
.demo__chat{grid-row:2;grid-column:2;position:relative;z-index:5;justify-self:end;max-width:13.6em;margin:-16px -2px 0 0;padding:10px 14px 11px;border-radius:18px 4px 18px 18px;background:var(--world);color:var(--ink);box-shadow:var(--sh-paper);rotate:2deg}
@media (max-width:767px){
.scr__loop{flex-wrap:nowrap;gap:3px;font-size:13px}
.scr__loop>*{flex:1 1 0;min-width:0;padding:4px 0;text-align:center;white-space:nowrap}
.scr__take{gap:5px;padding:6px 8px}
.scr__take .scr__time,.scr__next{display:none}
.scr__words{gap:5px}
.scr__words b{min-height:30px;padding:0 7px;line-height:30px!important;font-size:14px}
.scr__fb{gap:6px;padding:5px}
.lesson{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;column-gap:0;padding:0}
.lesson__phone{grid-column:1;grid-row:1/-1;margin:0}
.scr__orig{grid-column:2;grid-row:4;justify-self:start;margin:0 0 0 4px}
}
@media (min-width:768px){
.lesson__phone{--device-w:248px}
}
@media (min-width:1024px){
.step{height:auto;min-height:44px}
.lesson-on .step:not([aria-selected="true"]){padding-inline-end:14px}
.lesson{grid-template-columns:1fr;justify-items:center;padding:0}
.lesson__phone{--device-w:260px}
.scr__orig{position:absolute;left:calc(50% + 142px);bottom:6px;margin:0}
.scr__cam{aspect-ratio:1}
.scr__words{flex-wrap:nowrap;gap:6px}
.scr__words b{min-height:40px;padding:0 8px;line-height:40px!important;font-size:16px}
.scr__wave{height:48px}
.scr__ring{order:1;align-self:center;width:54px;height:54px;margin-top:auto}
.scr__ring i{width:38px;height:38px}
.scr__bars{height:44px}
.scr__fb{flex-direction:column;align-items:stretch;gap:8px;padding:8px}
}
@media (min-width:1024px) and (max-width:1279px){
.scr__orig{left:auto;right:calc(50% - 250px)}
}
@media (hover:hover) and (pointer:fine){
.step:not([aria-selected="true"]):hover{background:var(--raised);box-shadow:var(--sh-paper);translate:0 -1px}
.scr__orig:hover{text-decoration:underline;text-underline-offset:.2em}
.scr__orig:hover span{translate:3px 0}
}
@media (prefers-reduced-motion:no-preference){
.step{transition:background-color var(--dur-ui),color var(--dur-ui),box-shadow var(--dur-ui),translate var(--dur-hover) var(--ease-out)}
.step:active,.scr__orig:active{scale:.98}
.scr__orig{transition:opacity var(--dur-ui),visibility var(--dur-ui),scale var(--dur-press)}
.scr__orig span{transition:translate var(--dur-hover) var(--ease-out)}
}
.scr [data-hit]{box-shadow:0 0 0 2px var(--world-accent),inset 0 0 0 1px var(--line)}
.scr__loop>*,.scr__words b,.scr__take,.scr__rec,.scr__ring{cursor:pointer}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
/* на столі телефон піднімається під курсором (interaction r3-06) */
.lesson__phone{transition:translate var(--spring-paper-dur,520ms) var(--spring-paper,var(--ease-out))}
.lesson__phone:hover{translate:0 -3px}
}
dialog.lb[data-shot=lesson] .lb__img{max-width:min(352px,100%);padding:16px;background:var(--paper)}
.js main>section:not(.is-mounted){min-height:var(--pre,0)}
.mary__intro{max-width:40ch;margin:-12px 0 24px;color:var(--world-ink);font:500 var(--fs-lead)/1.5 var(--font-body);text-wrap:pretty}
.life__pen{position:absolute;left:0;top:10px;bottom:10px;width:24px;height:calc(100% - 20px);overflow:visible;fill:none;stroke:var(--world-accent);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1}
.life__m{position:relative;display:block;min-height:44px;padding-left:4.4rem;color:var(--ink-2);font:400 1.0625rem/1.65 var(--font-body);-webkit-tap-highlight-color:transparent}
.life__at{position:absolute;left:0;top:-.1rem;color:var(--world-ink);white-space:nowrap;font:500 1.25rem/2rem var(--font-display);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.03em;transform-origin:0 60%}
.life__q::after{content:"\A";white-space:pre}
.life__q{font:italic 400 clamp(1.125rem,1.05rem + .4vw,1.3125rem)/1.45 var(--font-display)}
.life__proof{font-weight:600}
.life__dot{position:absolute;left:6px;top:0;width:12px;height:12px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 2.5px var(--world-ink);opacity:0;pointer-events:none}
.mary__sign{position:relative;display:inline-block;margin:16px 0 0 34px;color:var(--ink);font:600 var(--fs-hand)/1 var(--font-display)}
@media (max-width:767px){
.life__q{line-height:1.4}
}
@media (max-width:767px){
.phrase__lens{margin-bottom:28px}
}
@media (max-width:374px){
.phrase__lens{gap:0}
.phrase__lens>button{padding-inline:7px;font-size:.875rem}
}
@media (min-width:1024px){
.life__dot{left:6px}
}
@media (prefers-reduced-motion:no-preference){
@keyframes life-pen{from{stroke-dashoffset:1}}
@keyframes life-m{from{opacity:0;translate:0 10px}}
@keyframes life-stamp{from{scale:1.6;opacity:0;rotate:-12deg}}
}
/* FAQ «Мері, а підкажіть» (kit faq v2 «Мері відповідає»: */
.faq__grid{display:grid;gap:8px}
.lk-faq__a p a{color:var(--link);font-weight:600}
.lk-faq__ava{object-fit:cover}
.lk-faq__line:empty{display:none}
@media (min-width:1024px){
.faq__grid{grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:64px;align-items:start}
}
@media (prefers-reduced-motion:no-preference){
.faq__grid.is-in .lk-faq__item{animation:faq-row 520ms var(--ease-settle) calc(var(--i,0) * 30ms + 120ms) backwards}
.faq__grid.is-in .lk-faq__me{animation:faq-me 700ms var(--ease-settle) backwards}
@keyframes faq-row{from{opacity:0;translate:0 8px}}
@keyframes faq-me{from{opacity:0;translate:0 14px;scale:.92}}
}
.lk-finale .lk-cta{min-width:min(100%,280px)}
/* f2 system: струна - кнопка (44 px, Space/Enter, кільце фокусу кольору світу), хвиля всередині */
.fin__pluck{display:block;min-height:44px;margin:-8px 0 10px;padding:7px 0;border:0;border-radius:12px;background:none;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.fin__pluck:focus-visible{outline:3px solid var(--world-ink);outline-offset:4px}
.fin__wave{display:block;width:var(--pen-w,9rem);height:30px;overflow:visible;fill:none;stroke:var(--world-ink);stroke-width:2.4;stroke-linecap:round;pointer-events:none}
.fin__rings{position:absolute;left:calc(100% - 14px);top:50%;width:88px;height:154px;translate:0 -50%;overflow:visible;fill:none;stroke:var(--world-ink);stroke-linecap:round;pointer-events:none}
.fin__rings .fin__four{stroke-width:1.4;opacity:0}
.fin__rings[data-echo] path{opacity:1;stroke-width:2.6}
.fin__rings[data-echo] .fin__four{opacity:.9;stroke-width:1.6}
@media (max-width:767px){
.fin__rings{left:calc(100% - 16px);width:64px;height:112px}
}
.fin__rings path:nth-child(1){stroke-width:3}
.fin__rings path:nth-child(2){stroke-width:2.2;opacity:.7}
.fin__rings path:nth-child(3){stroke-width:1.6;opacity:.45}
@media (max-width:1023px){
.lk-finale .lk-cta{width:100%}
.fin__pluck{margin-inline:auto}
}
:root[data-theme="dark"] :is(.fin__wave,.fin__rings){stroke:var(--world-accent)}
:root[data-theme="dark"] .fin__pluck:focus-visible{outline-color:var(--world-accent)}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) :is(.fin__wave,.fin__rings){stroke:var(--world-accent)}
:root:not([data-theme="light"]) .fin__pluck:focus-visible{outline-color:var(--world-accent)}
}
@media (prefers-reduced-motion:no-preference){
.fin__pluck{transition:scale var(--dur-press) var(--ease-out)}
.fin__pluck:active{scale:.98}
.lk-finale[data-armed] :is(.fin__wave path:not(.fin__hit),.fin__rings path){stroke-dashoffset:1}
.lk-finale[data-play] .fin__wave path:not(.fin__hit){animation:lk-fin-draw var(--dur-reveal) var(--ease-out) 1950ms backwards}
.lk-finale[data-play] .fin__rings path{animation:lk-fin-draw 420ms var(--ease-out) calc(700ms + var(--i,0) * 120ms) backwards}
}
:is(.pairs__next,.lk-foot a:not(.lk-mark)):active{color:var(--world-ink);text-decoration:underline;text-underline-offset:.2em}
@media (prefers-reduced-motion:no-preference){
:is(.pairs__next,.lk-foot a:not(.lk-mark)){transition:scale var(--dur-press) var(--ease-out),color var(--dur-hover)}
:is(.pairs__next,.lk-foot a:not(.lk-mark)):active{scale:.98}
}
@media (prefers-reduced-motion:no-preference){
.btn-buy{transition:scale var(--dur-press) var(--ease-out),background-color var(--dur-hover)}
}
.fin__wave path:not(.fin__hit),.fin__rings path{stroke-dasharray:1}
.ticks__grip i{position:absolute;top:50%;width:6px;height:6px;border:solid var(--paper);border-width:2px 2px 0 0;translate:0 -50%}
.ticks__grip i:first-child{left:7px;rotate:-135deg}
.ticks__grip i:last-child{right:7px;rotate:45deg}
@media (max-width:767px){
.phrase{padding-inline:12px;padding-top:30px}
.phrase__lens>button{padding-inline:10px}
.phrase__st{top:-20px;right:12px;bottom:auto;max-width:none;padding:6px 12px 7px;font-size:.9375rem;white-space:nowrap;--st-tilt:2deg}
.phrase{padding-bottom:28px}
}
@media (max-width:374px){
.phrase__lens{gap:0}
.phrase__lens>button{padding-inline:7px;font-size:.875rem}
.phrase__st{font-size:.875rem;right:8px}
}
@media (max-width:767px){
.scene{min-height:180px;padding-block:10px 6px}
}
:root[data-theme="dark"] .scene{background:radial-gradient(120% 90% at 50% 105%,color-mix(in oklab,var(--world-accent) 16%,transparent) 0 40%,transparent 70%)}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .scene{background:radial-gradient(120% 90% at 50% 105%,color-mix(in oklab,var(--world-accent) 16%,transparent) 0 40%,transparent 70%)}
}
.offer__ring{position:absolute;left:.62em;top:.5em;width:2.4em;height:2.4em;overflow:visible;fill:none;stroke:var(--world-ink);stroke-width:2;pointer-events:none;transform:translate(-50%,-50%)}
.offer__ring circle+circle{stroke-width:1.4;opacity:.6}
@keyframes tk-swap{from{opacity:0;transform:translateY(8px) rotate(-.6deg)}}
@keyframes tk-tear{from{transform:translate(5px,-2px) rotate(1.6deg)}}
/* платівка однакова в обох темах: власні токени сторінки (hex лише в :root) */
:root{--vinyl:#1D1A20;--vinyl-groove:#28242C;--vinyl-hole:#15121A;--vinyl-print:#FCF7ED;--vinyl-ink:#6B5070;--arm-metal:#E4DFD6;--arm-shade:#9C968D}
/* голка-мітка: коралова риска над платівкою, під нею - номер обраної доріжки */
/* тонарм: опора праворуч угорі, голка сідає на смугу обраної доріжки (кути пораховано для радіусів смуг .88/.70/.54) */
.disc__mark{position:absolute;z-index:3;top:calc((var(--sl) - var(--rec)) / 2);left:calc(var(--sl) - var(--rec) * (1 - var(--peek)));width:var(--rec);aspect-ratio:1;translate:var(--out) 0;pointer-events:none;--px:100%;--py:0%;--len:62.5%;--rest:86.7deg;--t0:97.1deg;--t1:105.3deg;--t2:112.7deg;--arm:var(--rest)}
[data-results][data-arm][data-k="0"] .disc__mark{--arm:var(--t0)}
[data-results][data-arm][data-k="1"] .disc__mark{--arm:var(--t1)}
[data-results][data-arm][data-k="2"] .disc__mark{--arm:var(--t2)}
.disc__mark::before{content:"";position:absolute;z-index:1;left:var(--px);top:var(--py);width:24px;height:24px;margin:-12px;border-radius:50%;background:radial-gradient(circle,var(--arm-shade) 0 26%,var(--arm-metal) 30% 64%,var(--arm-shade) 68% 100%);box-shadow:0 0 0 1px rgb(39 46 42/28%),0 3px 8px rgb(23 34 28/24%)}
.disc__grip{position:absolute;right:-31px;top:50%;width:44px;height:44px;margin-top:-22px;border-radius:50%;pointer-events:auto;touch-action:pan-y;cursor:grab;-webkit-tap-highlight-color:transparent}
[data-results]:not([data-js]) .disc__mark{display:none}
@media (prefers-reduced-motion:no-preference){
.disc__record,.disc__mark{transition:translate 450ms var(--ease-settle,var(--ease-out))}
}
.phrase[data-lens="all"] :is(.phrase__held,.phrase__flap)[data-tag]::before{content:none}
.phrase .phrase__line[role=button]{cursor:pointer;border-radius:12px}
.phrase .phrase__line[role=button]:focus-visible{outline:var(--focus-ring);outline-offset:6px}
@media (prefers-reduced-motion:no-preference){
@keyframes meri-buzz{0%{transform:translateY(0) scaleY(1)}15%{transform:translateY(-3px) scaleY(1.6)}35%{transform:translateY(2px) scaleY(1.3)}55%{transform:translateY(-1.2px)}75%{transform:translateY(.6px)}100%{transform:none}}
}
/* /lf:mary */

/* lf:pol-products */
/* hero: рядки заголовка не залежать від шрифту (CLS 0,248 на телефоні: курсивна Literata доходила пізніше й «ви» перескакувало
   на наступний рядок). «Вимова, якою» / «ви будете» / «пишатися» - так само, як і зі справжнім шрифтом. */
.hero h1 em{display:block}
.hero h1 .lk-ul{display:block;width:fit-content}
/* #pairs: сцена - кнопка «ще раз» (клавіатура: Enter / пробіл) */
.pairs-on .scene:focus-visible{outline:var(--focus-ring);outline-offset:-4px}
.lesson__disc{display:none;position:absolute;z-index:0;left:50%;top:50%;width:min(380px,92%);aspect-ratio:1;border-radius:50%;background:var(--world);box-shadow:inset 0 0 0 1px var(--world-line);transform:translate(-50%,-50%);pointer-events:none}
@media (min-width:768px){
.lesson__disc{display:block}
}
@media (min-width:1024px){
.lesson__phone{--device-w:288px}
.lesson{min-height:100%;align-content:center}
.lesson__disc{width:min(500px,96%)}
.scr__orig{left:calc(50% + 158px)}
}
/* Підвал легший (власник 08.10: «як-то перегружено»): ті самі слова й посилання, але менше рядків і ліній. Знак із «Місцем
   сили» ліворуч, «Ми з командою на зв'язку» стоїть в одному рядку з посиланнями, без лінії над ©; на столі - один рядок. */
.lk-foot{padding-block:32px max(20px,env(safe-area-inset-bottom))}
@media (min-width:768px){
.lk-foot{padding-block:40px max(28px,env(safe-area-inset-bottom))}
}
:is(.phrase[data-lens="all"] [data-for="all"],.phrase[data-lens="sound"] [data-for="sound"],.phrase[data-lens="stress"] [data-for="stress"],.phrase[data-lens="rhythm"] [data-for="rhythm"],.phrase[data-lens="link"] [data-for="link"]){opacity:1!important;visibility:visible!important}
@media (prefers-reduced-motion:no-preference){
:is(.phrase[data-lens="all"] [data-for="all"],.phrase[data-lens="sound"] [data-for="sound"],.phrase[data-lens="stress"] [data-for="stress"],.phrase[data-lens="rhythm"] [data-for="rhythm"],.phrase[data-lens="link"] [data-for="link"]){transition-delay:0s}
}
/* /lf:inside-f2 */

/* lf:recog-f1 · hero: no empty white card (the course screen waits for its decode; the photo frame holds its own tone),
   the string is a button from the keyboard with a ring in the world's colour */
.hero .stage__screen[data-wait]{opacity:0!important}
.hero .stage__screen{transition:opacity 220ms var(--ease-out,ease)}
.hero__photo.lk-frame img{background-color:color-mix(in oklab,var(--world) 70%,var(--world-ink) 12%)}
.hero__string:focus{outline:none}
.hero__string:focus-visible{outline:2px solid var(--world-accent);outline-offset:6px;border-radius:10px}
@media (prefers-reduced-motion:no-preference){
.lesson-on .lk-device__screen>.scr:not([hidden]){animation:scr-in 220ms var(--ease-out) both}
@keyframes scr-in{from{opacity:0;transform:translateY(12px)}}
}
/* /lf:media-f2 */
/* lf:system-f3 · hero (оно, «гуд»): справа один предмет - фото Мері з кільцями звуку; скрин програми прибрано, «Курс-бестселер» і
   «1000+ українців» - одна наклейка у два рядки на куті фото; від щипка струни кільця лише світлішають (220 мс, без масштабу). */
.stage__st1{--st-top:-14px;--st-left:auto;right:4px;--st-tilt:3deg;white-space:normal;line-height:1.2;text-align:right}
.stage__st-n{display:block;margin-top:2px}
.stage__st-n b{font-style:normal;font-weight:500;font-variant-numeric:lining-nums;color:var(--world-ink)}
.stage__st-sep{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.stage__frame{left:calc(50% - min(76%,290px) / 2 - 18px)}
.stage__sound path{transition:opacity 220ms var(--ease-out,ease)}
.stage[data-echo] .stage__sound path{opacity:1}
@media (min-width:900px){
.stage{height:clamp(470px,36vw,520px)}
.stage__frame{left:calc(50% - min(76%,340px) / 2 - 24px);top:4%}
.stage__st1{--st-top:auto;bottom:6%;right:2%;--st-tilt:-3deg}
}
@media (prefers-reduced-motion:reduce){.stage__sound path{transition:none}}
/* /lf:system-f3 */
/* lf:system-f5 · hero (creative.idea 8,5): без WebGL кільця за фото (складене поле) від щипка струни теж розходяться однією хвилею -
   копія кілець виходить назовні й тане (scale/opacity, 450 мс, раз на дотик, лише no-preference; js/v3.js wave). З GL хвилю дає шейдер поля. */
.hero__wave{position:absolute;inset:0;opacity:0;pointer-events:none;transform-origin:78% 42%;background:repeating-radial-gradient(circle at 78% 42%,transparent 0 22px,color-mix(in srgb,var(--world-ink) 16%,transparent) 23px 24.5px,transparent 25.5px 46px)}
/* /lf:system-f5 */
/* lf:fit v3 09.10 · #fit «Вам підійде курс, якщо…» (B2 «Самоперевірка»): аркуш самоперевірки з трьома болями Маші (справжні
   checkbox: поле в увесь рядок, кружечок намальований рукою, позначка - синій маркер логотипа) і бланк відповіді в кольорі світу
   (як конверт «My voice.»). Позначки збирають бланк: заголовок «Тоді цей курс для вас», галочки на модулях програми, які
   працюють саме з цим; внизу «Для кого курс» - чотири аудиторії (radio). Стан - лише :has(), висота бланка не стрибає.
   Секція одразу під hero, тож правила блокувальні (на 1440 її заголовок - у першому екрані). */
/* lf:fit-p1 09.10 · полірування за аудитом (owner.eye 8, creative 8/7, art 8.4/7.8, interaction 8/8, ux 8/7/8). Напрям той самий;
   - ніч: обраний сегмент і заповнена пілюля - піднятий світлий папір, не чорна плашка (DESIGN.md «Never an ink-filled chosen
     segment»); бланк на ~10 % темніший і менш насичений, не світить між hero і відгуками;
   - відповідь з одного погляду: збіглі рядки бланка повні, з пілюлею-папером і тією ж ручною позначкою, що летіла з аркуша;
     решта приглушені; малюнок болю переходить «до → після» (… → рівний рядок, підняті брови → усмішка, шум → три слова);
   - телефон: аркуш і бланк проявляються разом (js/v3.js), рядки щільніші, блок коротший; текст не накладається при зміні. */
.fit{display:grid;grid-template-areas:"head" "sheet" "slip";--fit-pick:var(--world-mat);--fit-pick-ink:var(--world-ink);--fit-pick-icon:var(--world-hl);--fit-pick-sh:0 1px 2px rgb(0 0 0/12%),0 6px 16px rgb(0 0 0/14%);--fit-pen:var(--marker-fill);--fit-slip:var(--world-ink);--fit-from:0 -28px}
.fit__head{grid-area:head;margin-bottom:clamp(22px,14px + 1.8vw,36px)}
.band .fit__head .lk-h2{margin-bottom:10px}
.fit__lead{max-width:32ch;color:var(--ink-2)}
.fit__sheet{grid-area:sheet;position:relative;min-width:0;margin:0;padding:clamp(16px,12px + 1.2vw,26px) var(--sheet-x) clamp(6px,2vw,14px);border:0;border-radius:var(--r-card);background:var(--raised);box-shadow:var(--sh-paper);rotate:-.6deg;--sheet-x:clamp(14px,8px + 1.8vw,32px)}
.fit__sheet::after{content:"";position:absolute;top:0;bottom:0;left:calc(var(--sheet-x) + 53px);width:1.5px;background:color-mix(in srgb,var(--world-accent) 34%,transparent);pointer-events:none}
.fit__legend{float:left;width:100%;padding:0 0 4px 62px;color:var(--world-ink);font:italic 400 var(--fs-hand)/1.3 var(--font-display);letter-spacing:-.01em}
.fit__row{position:relative;clear:both;display:grid;grid-template-columns:44px minmax(0,1fr) 56px;column-gap:18px;align-items:start;padding:16px 0 18px;-webkit-tap-highlight-color:transparent;cursor:pointer}
.fit__row+.fit__row{border-top:1px dashed var(--world-line)}
.fit__box{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.fit__row:has(.fit__box:focus-visible){outline:var(--focus-ring);outline-offset:2px;border-radius:12px}
.fit__mark{width:44px;height:44px;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round}
.fit__ring{stroke:color-mix(in srgb,var(--world-ink) 62%,transparent);stroke-width:2}
.fit__tick{stroke:var(--marker);stroke-width:3.6;stroke-dasharray:1;stroke-dashoffset:1}
.fit__box:checked~.fit__mark .fit__tick{stroke-dashoffset:0}
.fit__box:checked~.fit__mark .fit__ring{stroke:var(--world-ink)}
.fit__t{display:block;color:var(--ink);font:500 clamp(1.1875rem,1.1rem + .38vw,1.4375rem)/1.22 var(--font-display);letter-spacing:-.02em;text-wrap:balance}
.fit__d{display:block;margin-top:6px;color:var(--ink-2);font:400 var(--fs-small)/1.5 var(--font-body);text-wrap:pretty}
/* малюнок болю - предмет рядка: у спокої «до» (… / підняті брови / шум), з позначкою - «після» (рівний рядок / усмішка / три слова) */
.fit__pic{width:56px;height:56px;overflow:visible;fill:none;stroke:var(--world-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.85;transition:opacity var(--dur-ui)}
.fit__pic .fit__fill{fill:var(--world-hl);stroke:none;opacity:.55;transition:opacity var(--dur-ui)}
.fit__pic .fit__dt{fill:var(--world-ink);stroke:none}
.fit__pic :is(.fit__dt,.fit__brow,.fit__bar,.fit__mouth){transform-box:fill-box;transform-origin:50% 50%}
.fit__pic--wave{stroke-width:2.2}
.fit__pic .fit__brow{translate:0 -3px}
.fit__pic .fit__brow+.fit__brow{rotate:-6deg}
.fit__pic .fit__smile{stroke-dasharray:1;stroke-dashoffset:1}
.fit__box:checked~.fit__pic,.fit__row:hover .fit__pic{opacity:1}
.fit__box:checked~.fit__pic .fit__fill{opacity:1}
.fit__box:checked~.fit__pic--talk .fit__dt{scale:2.3 1}
.fit__box:checked~.fit__pic .fit__brow{translate:0 1px;rotate:0deg}
.fit__box:checked~.fit__pic .fit__mouth{opacity:0}
.fit__box:checked~.fit__pic .fit__smile{stroke-dashoffset:0}
.fit__box:checked~.fit__pic--wave .fit__bar{translate:var(--x) 0;scale:1 var(--y)}
.fit__slip{grid-area:slip;position:relative;z-index:1;min-width:0;margin:-10px 8px 0;padding:clamp(22px,16px + 1.4vw,32px) clamp(20px,14px + 1.4vw,32px) clamp(20px,14px + 1vw,28px);border-radius:var(--r-card);background:radial-gradient(120% 90% at 18% 10%,color-mix(in oklab,var(--fit-slip) 82%,var(--world-mat)) 0%,var(--fit-slip) 55%,color-mix(in oklab,var(--fit-slip) 84%,var(--vinyl-hole)) 100%);color:var(--world-mat);box-shadow:var(--sh-lift);rotate:.9deg}
.fit__slip::after{content:"";position:absolute;inset:9px;border:1px solid color-mix(in srgb,var(--world-mat) 26%,transparent);border-radius:calc(var(--r-card) - 6px);pointer-events:none}
.fit__eye{float:left;width:100%;margin:0 0 6px;padding:0;color:color-mix(in srgb,var(--world-mat) 82%,transparent);font:italic 400 1.0625rem/1.3 var(--font-display);letter-spacing:-.01em}
.fit__a{display:grid;clear:both;margin:0 0 14px;color:var(--world-mat);font:500 clamp(1.5rem,1.3rem + .8vw,2rem)/1.15 var(--font-display);letter-spacing:-.03em}
.fit__a>span{grid-area:1/1}
.fit__a em{font-style:italic}
.fit__a1 em{position:relative;display:block;width:fit-content}
.fit__a1 em::after{content:"";position:absolute;left:-.02em;right:-.06em;bottom:-.16em;height:.3em;background:currentColor;opacity:.72;-webkit-mask:var(--lk-arc) 0 50%/100% 100% no-repeat;mask:var(--lk-arc) 0 50%/100% 100% no-repeat;transform-origin:0 50%;scale:0 1}
.fit:has(.fit__box:checked) .fit__a1 em::after{scale:1 1}
.fit__a1{opacity:0;visibility:hidden;translate:0 8px}
.fit:has(.fit__box:checked) .fit__a0{opacity:0;visibility:hidden;translate:0 -6px}
.fit:has(.fit__box:checked) .fit__a1{opacity:1;visibility:visible;translate:none}
/* рядки програми: позначка на аркуші ставить ту саму ручну позначку тут; відповідь читається з одного погляду - збіглі рядки
   повні, з пілюлею-папером, решта притихають. Дотик по рядку бланка ставить ту саму позначку на аркуші (js), пілюля веде до модуля. */
.fit__p{display:grid;grid-template-columns:24px minmax(0,1fr) auto;column-gap:12px;align-items:center;min-height:44px;padding:10px 0;border-top:1px solid color-mix(in srgb,var(--world-mat) 22%,transparent);color:color-mix(in srgb,var(--world-mat) 86%,transparent);font:400 var(--fs-small)/1.45 var(--font-body);transition:opacity var(--dur-ui) var(--ease-out)}
.fit__p>span{display:contents}
.fit__p b{color:var(--world-mat);font:600 1.0625rem/1.3 var(--font-display);letter-spacing:-.01em}
.fit__m{position:relative;isolation:isolate;justify-self:end;display:inline-flex;align-items:center;min-height:44px;margin-block:-10px;padding:0 9px 1px;color:inherit;font:600 .8125rem/1.3 var(--font-body);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;text-decoration:none;transition:color var(--dur-ui)}
.fit__m::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:50%;height:23px;translate:0 -50%;border:1px solid color-mix(in srgb,var(--world-mat) 34%,transparent);border-radius:var(--r-pill);transition:background-color var(--dur-ui),border-color var(--dur-ui),box-shadow var(--dur-ui)}
.fit__m:hover::before{border-color:currentColor}
.fit__pd{width:24px;height:24px;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round}
.fit__pr{stroke:color-mix(in srgb,var(--world-mat) 80%,transparent);stroke-width:1.5;stroke-dasharray:.05 .036;transition:stroke var(--dur-ui)}
.fit__pt{stroke:var(--fit-pen);stroke-width:2.6;stroke-dasharray:1;stroke-dashoffset:1}
.fit:has(.fit__box:checked) .fit__p{opacity:.55}
.fit:has([value=accent]:checked) [data-k=accent],.fit:has([value=clear]:checked) [data-k=clear],.fit:has([value=ear]:checked) [data-k=ear]{opacity:1;color:var(--world-mat)}
.fit:has([value=accent]:checked) [data-k=accent] .fit__pr,.fit:has([value=clear]:checked) [data-k=clear] .fit__pr,.fit:has([value=ear]:checked) [data-k=ear] .fit__pr{stroke:var(--world-mat);stroke-dasharray:none}
.fit:has([value=accent]:checked) [data-k=accent] .fit__pt,.fit:has([value=clear]:checked) [data-k=clear] .fit__pt,.fit:has([value=ear]:checked) [data-k=ear] .fit__pt{stroke-dashoffset:0}
.fit:has([value=accent]:checked) [data-k=accent] .fit__m,.fit:has([value=clear]:checked) [data-k=clear] .fit__m,.fit:has([value=ear]:checked) [data-k=ear] .fit__m{color:var(--fit-pick-ink)}
.fit:has([value=accent]:checked) [data-k=accent] .fit__m::before,.fit:has([value=clear]:checked) [data-k=clear] .fit__m::before,.fit:has([value=ear]:checked) [data-k=ear] .fit__m::before{border-color:transparent;background:var(--fit-pick);box-shadow:var(--fit-pick-sh)}
.fit[data-js] .fit__p{cursor:pointer;-webkit-tap-highlight-color:transparent}
.fit__more{position:absolute;top:calc(clamp(22px,16px + 1.4vw,32px) - 12px);right:clamp(20px,14px + 1.4vw,32px);z-index:1;display:inline-flex;align-items:center;min-height:44px;padding:0 2px;color:var(--world-mat);font:700 var(--fs-ui)/1.2 var(--font-body);text-decoration:none}
.fit__more:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.2em}
.fit__more:focus-visible,.fit__m:focus-visible::before,.fit__w:has(input:focus-visible){outline:3px solid var(--world-mat);outline-offset:3px}
.fit__m:focus-visible{outline:none}
.fit__who{min-width:0;margin:6px 0 0;padding:14px 0 0;border:0;border-top:1px solid color-mix(in srgb,var(--world-mat) 22%,transparent)}
.fit__ws{display:grid;clear:both;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.fit__w{position:relative;display:flex;align-items:center;gap:8px;min-height:50px;padding:6px 10px 6px 6px;border-radius:14px;background:color-mix(in srgb,var(--world-mat) 9%,transparent);color:var(--world-mat);font:600 .875rem/1.2 var(--font-body);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--dur-ui),color var(--dur-ui)}
.fit__w input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.fit__w svg{flex:none;width:34px;height:34px;padding:7px;border-radius:50%;background:color-mix(in srgb,var(--world-mat) 14%,transparent);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fit__w:hover{background:color-mix(in srgb,var(--world-mat) 16%,transparent)}
.fit__w:has(:checked){background:var(--fit-pick);color:var(--fit-pick-ink);box-shadow:var(--fit-pick-sh)}
.fit__w:has(:checked) svg{background:var(--fit-pick-icon)}
/* рядок аудиторії - нагорода за вибір: Literata italic у кольорі бланка; висоту тримає стопка (бланк не стрибає) */
.fit__whys{display:grid;margin-top:12px}
.fit__why{grid-area:1/1;color:var(--world-mat);font:italic 400 1.0625rem/1.35 var(--font-display);letter-spacing:-.01em;text-wrap:pretty}
.fit__why+.fit__why{visibility:hidden}
.fit:has([value=it]:checked) .fit__why:not([data-w=it]),.fit:has([value=abroad]:checked) .fit__why:not([data-w=abroad]),.fit:has([value=teach]:checked) .fit__why:not([data-w=teach]),.fit:has([value=clients]:checked) .fit__why:not([data-w=clients]){visibility:hidden;opacity:0}
.fit:has([value=abroad]:checked) [data-w=abroad],.fit:has([value=teach]:checked) [data-w=teach],.fit:has([value=clients]:checked) [data-w=clients]{visibility:visible;opacity:1}
/* ніч: бланк на тон тихіший за світлий бузок (не світить між hero і відгуками, не яскравіший за конверт «My voice.»);
   обране - піднятий папір, світліший за бланк, з темним текстом */
:root[data-theme="dark"] .fit{--fit-slip:color-mix(in oklab,var(--world-ink) 82%,var(--vinyl-groove));--fit-pick:color-mix(in oklab,var(--world-ink) 26%,var(--vinyl-print));--fit-pick-ink:var(--world-mat);--fit-pick-icon:color-mix(in srgb,var(--world-mat) 12%,transparent);--fit-pick-sh:0 1px 2px rgb(0 0 0/22%),0 6px 16px rgb(0 0 0/20%);--fit-pen:color-mix(in oklab,var(--marker) 48%,var(--world-mat))}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .fit{--fit-slip:color-mix(in oklab,var(--world-ink) 82%,var(--vinyl-groove));--fit-pick:color-mix(in oklab,var(--world-ink) 26%,var(--vinyl-print));--fit-pick-ink:var(--world-mat);--fit-pick-icon:color-mix(in srgb,var(--world-mat) 12%,transparent);--fit-pick-sh:0 1px 2px rgb(0 0 0/22%),0 6px 16px rgb(0 0 0/20%);--fit-pen:color-mix(in oklab,var(--marker) 48%,var(--world-mat))}
}
@media (max-width:599px){
#fit.band{padding-block:var(--section-y-s)}
.fit__row{grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:14px;padding:11px 0 12px}
.fit__t{font-size:1.125rem;line-height:1.18}
.fit__d{margin-top:3px;font-size:.875rem;line-height:1.42}
.fit__p{padding:7px 0;column-gap:10px}
.fit__m{padding-inline:7px}
.fit__slip{margin:-10px 4px 0;padding:20px 18px 18px}
.fit__more{top:8px;right:18px}
.fit__p b{font-size:1rem}
.fit__a{margin-bottom:8px}
.fit__txt{grid-area:1/2/3/3}
.fit__pic{grid-area:2/1;justify-self:center;width:38px;height:38px;margin-top:6px}
.fit__legend{padding-left:60px}
.fit__sheet{padding-top:12px}
.fit__sheet::after{left:calc(var(--sheet-x) + 52px)}
.fit__w{min-height:44px;padding:5px 8px 5px 5px;gap:7px}
.fit__w svg{width:32px;height:32px;padding:6px}
.fit__who{padding-top:12px}
.fit__whys{margin-top:10px}
.fit__why{font-size:1rem}
}
@media (min-width:1024px){
.fit{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto 1fr;grid-template-areas:"head slip" "sheet slip";align-items:start;--fit-from:-44px 0}
.fit__sheet{rotate:-1deg;padding-right:calc(var(--sheet-x) + 52px)}
.fit__slip{margin:-8px 0 0 -36px;rotate:1.4deg}
.fit__row{grid-template-columns:44px minmax(0,1fr) 64px;align-items:center}
.fit__pic{width:64px;height:64px}
.fit__t{text-wrap:pretty}
.fit__d{max-width:58ch;font-size:15px;line-height:1.45}
}
/* рух, наведення й політ позначки - у styles-late.css (lf:fit-p1): лише після першого кадру */
/* /lf:fit v3 */