/* styles-late.css · f2 system (09.10): the rules of the sections below the first screen, split out of styles.css so the blocking CSS fits its budget (styles + kit <= 31 KB gz; FCP was 2,57 s on 393 slow4g). Loaded media=print > all after styles.css, so the cascade order is the same. A rule moved here only when every selector is scoped to a late section: by #id (#change … #start, #reviews), or by a class used only there with no later same-specificity rule in styles.css. New rules for these sections can go here or to styles.css (both work). */ @supports (content-visibility:auto){ .js #change{--cis:880px} .js #pairs{--cis:653px} .js #course{--cis:722px} .js #demo{--cis:884px} .js #meri{--cis:569px} .js #price{--cis:1014px} .js #mary{--cis:825px} .js #faq{--cis:704px} .js #start{--cis:657px} @media (min-width:1024px){ .js #change{--cis:680px} .js #pairs{--cis:513px} .js #course{--cis:711px} .js #demo{--cis:557px} .js #meri{--cis:533px} .js #price{--cis:565px} .js #mary{--cis:553px} .js #faq{--cis:586px} .js #start{--cis:398px} } } #reviews .lk-notes__lead{margin:12px 0 0;max-width:24em;color:var(--ink-2);font:400 1rem/1.55 var(--font-body);text-wrap:pretty} #reviews .lk-world--rings{margin:4px -4px 0} @media (min-width:1024px){ #reviews .lk-world--rings{margin:0} } /* /lf:reviews */ /* «Хотіли сказати - а почули» - машина пар (D06-44, D06-40): */ .pairs__grid{display:grid;gap:18px;grid-template-areas:"head" "card" "tabs"} .pairs__head{grid-area:head} .pairs{grid-area:card} .pairs__list{grid-area:tabs} .pairs__list{display:grid;gap:10px} .pair:active{scale:.98} .pair:focus-visible{outline:var(--focus-ring);outline-offset:2px} .pair__heard .pair__w{font:italic 600 clamp(1.5rem,1.2rem + 1.4vw,2.25rem)/1.1 var(--font-display);letter-spacing:-.025em;color:var(--world-ink)} .why{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start;margin-top:6px;padding-top:12px;border-top:1.5px dashed var(--world-line)} .pairs-on .why__say>*{grid-area:1/1} .pairs-on .why__say>:not([data-on]){visibility:hidden} .pairs-on .why[data-wait] .why__say{opacity:0;scale:.96} /* «Мері друкує…» - поки слово летить (motion r2-04) */ .why{position:relative} .pairs-on .why[data-wait] .why__dots{opacity:1;scale:1} .pairs__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px} .pairs__next:focus-visible{outline:var(--focus-ring);outline-offset:2px;border-radius:6px} /* JS: */ .pairs-on .pairs__list{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border-radius:var(--r-pill);background:color-mix(in oklab,var(--cream) 78%,var(--world))} .pairs-on .pair{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px;min-height:52px;padding:6px 8px;border:0;border-radius:var(--r-pill);background:transparent;text-align:center} .pairs-on .pair .pair__heard{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .pairs-on .pair .pair__said .pair__w{font-size:1.0625rem;color:var(--ink)} .pairs-on .pair .pair__said .pair__g{margin-top:0;font-size:.8125rem} .pairs-on .pair[aria-expanded="true"]{background:var(--raised);box-shadow:var(--shadow-e1)} .pairs-on .pair[aria-expanded="true"] .pair__w{font-weight:700} @media (min-width:1024px){ .pairs__grid{grid-template-columns:minmax(0,4fr) minmax(0,7fr);grid-template-areas:"head card" "tabs card";align-items:start;column-gap:64px;row-gap:24px} .pairs__head{align-self:end} .pairs-on .pairs__list{grid-template-columns:1fr;max-width:22rem;border-radius:26px;padding:6px} .pairs-on .pair{flex-direction:row;justify-content:flex-start;gap:12px;min-height:56px;padding:8px 18px;border-radius:22px} .pairs-on .pair .pair__said{display:flex;align-items:baseline;gap:12px} } @media (hover:hover) and (pointer:fine){ .pair:hover{border-color:var(--world-accent)} .pairs-on .pair:not([aria-expanded="true"]):hover{background:color-mix(in oklab,var(--raised) 70%,transparent);translate:0 -1px} } @media (prefers-reduced-motion:no-preference){ .pair{transition:border-color var(--dur-hover),background-color var(--dur-hover),color var(--dur-hover),box-shadow var(--dur-ui),translate var(--dur-hover) var(--ease-out),scale var(--dur-press)} .why__say{transition:opacity 450ms var(--ease-out),scale 450ms var(--ease-settle)} .pairs-on .why[data-wait] .why__say{transition:opacity 120ms var(--ease-out),scale 120ms var(--ease-out)} .pairs-on .why[data-wait] .why__dots{transition-delay:120ms} .pairs-on .why[data-wait] .why__dots i{animation:why-type 900ms var(--ease-inout) calc(var(--d,0) * 120ms) 3} } :root[data-theme="dark"] .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%)} :root[data-theme="dark"].pairs-on .pairs__list{background:color-mix(in oklab,var(--world-accent) 20%,var(--raised) 80%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--world-accent) 30%,transparent)} :root[data-theme="dark"].pairs-on .pair[aria-expanded="true"]{background:color-mix(in oklab,var(--world-accent) 42%,var(--raised) 58%)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]).pairs-on .pairs__list{background:color-mix(in oklab,var(--world-accent) 20%,var(--raised) 80%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--world-accent) 30%,transparent)} :root:not([data-theme="light"]).pairs-on .pair[aria-expanded="true"]{background:color-mix(in oklab,var(--world-accent) 42%,var(--raised) 58%)} } /* Програма відкрита повністю; діал лишається деталями кожного уроку. */ #course .course__title{margin-bottom:12px} .course__modules{margin:24px 0 16px} .course__module-list{display:grid;gap:8px} .course__module-list>li{min-width:0} .course__module:focus-visible{outline:var(--focus-ring);outline-offset:3px} .phrase__flap{font-style:italic} @media (min-width:768px){ .phrase__explain{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 32px} } @media (min-width:768px){ .course__module-list{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:1200px){ .course__module-list{grid-template-columns:repeat(4,minmax(0,1fr))} } @media (hover:hover) and (pointer:fine){ .course__module:hover{border-color:var(--world-ink)} } /* «Від звуку до connected speech» «Рентген фрази»: */ .course__title{max-width:15em} .beat,.an{position:relative;display:inline-block} .an[data-tag]::before{content:attr(data-tag);position:absolute;z-index:1;left:50%;bottom:calc(100% - .32em);translate:-50% 0;padding:4px 11px 5px;border-radius:var(--r-pill);background:var(--world);color:var(--world-ink);font:italic 500 max(.875rem,.26em)/1.2 var(--font-display);letter-spacing:0;white-space:nowrap;box-shadow:var(--sh-paper)} .an--sound{isolation:isolate} .an--sound>.beat:first-child{color:var(--world-ink)} .an--sound::after{content:none} .phrase:not([data-lens="all"]):not([data-lens="sound"]) .an--sound>.beat:first-child::after{opacity:.12} .an--stress::after{content:"";position:absolute;left:-.04em;right:-.04em;top:.28em;height:.22em;background:var(--world-ink);-webkit-mask:var(--lk-arc) center/100% 100% no-repeat;mask:var(--lk-arc) center/100% 100% no-repeat} .an--link{width:.34em} .an--link{isolation:isolate} .an--link::after{content:"";position:absolute;left:.03em;right:.03em;bottom:.3em;height:.2em;border:2.5px solid var(--marker);border-top:0;border-radius:0 0 .5em .5em} .an--link[data-tag]::before{background:var(--blue-wash);color:var(--link)} .phrase__rhythm::before{content:"";display:inline-block;width:42px;height:10px;margin-right:10px;vertical-align:middle;background:radial-gradient(circle,var(--world-ink) 3.5px,transparent 4px) 0 50%/14px 10px repeat-x} .phrase:not([data-lens="all"]) .an[data-tag]::before{opacity:0} .phrase[data-lens="sound"] .an--sound{color:var(--ink)} .phrase[data-lens="sound"] .an--sound>.beat:first-child::after,.phrase[data-lens="sound"] .an--sound[data-tag]::before{opacity:1} .phrase[data-lens="stress"] .an--stress .beat{scale:1.14;translate:0 -.06em;color:var(--world-ink)} .phrase[data-lens="stress"] .an--stress::after,.phrase[data-lens="stress"] .an--stress[data-tag]::before{opacity:1} .phrase[data-lens="rhythm"] .beat::before{opacity:.8} .phrase[data-lens="link"] .grp{color:var(--ink)} .phrase[data-lens="link"] .an--link::after,.phrase[data-lens="link"] .an--link[data-tag]::before{opacity:1} .phrase[data-lens="link"] .an--link{width:.56em;margin-inline:.04em} @media (max-width:599px){ .an[data-tag]::before{bottom:calc(100% - .32em);font-size:.8125rem} .beat::before{bottom:.2em} /* «наголос» - праворуч від «later.» на своєму рядку, не між рядками (creative/art r2) */ .an--stress[data-tag]::before{left:calc(100% + 98px);bottom:auto;top:50%;margin-top:-13px} } @media (min-width:1024px){ #course.band{padding-block:48px} .phrase__key{margin-top:14px} .ticks__svg{height:84px} } @media (prefers-reduced-motion:no-preference){ .phrase[data-lens="link"] .glue{transition-delay:120ms} .phrase.is-in[data-lens="all"] .an::after{animation:an-in var(--dur-reveal) var(--ease-out) calc(450ms + var(--i) * 450ms) backwards} .phrase.is-in[data-lens="all"] .an--sound>.beat:first-child::after{animation:an-in var(--dur-reveal) var(--ease-out) 450ms backwards} .phrase.is-in[data-lens="all"] .an[data-tag]::before{animation:an-tag 380ms var(--ease-out) calc(560ms + var(--i) * 450ms) backwards} .phrase.is-in[data-lens="all"] .beat::before{animation:an-in 300ms var(--ease-out) 1350ms backwards} @supports (animation-timeline:view()){ :root:not(.rv-done) .phrase[data-lens="all"] .an[data-tag]::before{animation-name:an-tag-scrub} :root:not(.rv-done) .phrase[data-lens="all"] .an--sound>.beat:first-child::after,:root:not(.rv-done) .phrase[data-lens="all"] .an--sound[data-tag]::before{animation-range:cover 20% cover 28%} :root:not(.rv-done) .phrase[data-lens="all"] .an--stress::after,:root:not(.rv-done) .phrase[data-lens="all"] .an--stress[data-tag]::before{animation-range:cover 27% cover 35%} :root:not(.rv-done) .phrase[data-lens="all"] .beat::before{animation-range:cover 34% cover 41%} :root:not(.rv-done) .phrase[data-lens="all"] .an--link::after,:root:not(.rv-done) .phrase[data-lens="all"] .an--link[data-tag]::before{animation-range:cover 40% cover 48%} } } /* «Курс як звукова доріжка»: */ .ticks{display:grid;gap:14px;margin:24px 0 0} .ticks__chart[role=slider]{cursor:ew-resize} .ticks__chart:focus-visible{outline:var(--focus-ring);outline-offset:6px;border-radius:8px} .ticks__svg{width:100%;height:clamp(64px,52px + 3vw,104px);overflow:visible} .ticks-on .ticks__key{display:none} @media (max-width:1023px){ /* «116» і підпис поруч (art r2-05) */ .ticks__cap{display:flex;align-items:baseline;gap:12px} .ticks__chart{padding-top:96px} .phrase__key{margin-top:16px} } @media (min-width:1024px){ .ticks{grid-template-columns:minmax(0,1fr) 15rem;align-items:end;column-gap:48px} #course .lk-h2{margin-bottom:24px} .ticks__chart{padding-top:80px} .ticks__cap{padding-bottom:40px} .ticks__bars{stroke-width:2.6} } /* «Як проходять уроки» «Урок у кишені»: */ .demo__grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "beats" "lesson" "try";gap:18px;align-items:start} .demo__text{grid-area:text} .beats{grid-area:beats} .how__try{grid-area:try} .beats{display:flex;flex-wrap:nowrap;justify-content:center;gap:6px;min-height:44px} .step[aria-selected="true"] .beats__n{background:var(--world-ink);color:var(--paper)} .lesson-on .step:not([aria-selected="true"]) .step__cap{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .scr__title{font:500 16px/1.2 var(--font-display);letter-spacing:-.01em} .scr__slide s{color:var(--muted);font-size:24px;text-decoration-thickness:2px} .scr__play::before{content:"";width:0;height:0;margin-left:3px;border-left:9px solid var(--world-ink);border-block:6px solid transparent} .scr__take .scr__play{flex:none;width:26px;height:26px;background:var(--world)} .scr__say{display:flex;align-items:center;gap:8px} .scr__say .scr__wave{flex:1;min-width:0} .scr__fbv img{position:absolute;left:4px;bottom:3px;width:18px;height:18px;border-radius:50%;object-fit:cover;background:var(--yellow)} .scr__fbv .scr__play{width:18px;height:18px;margin-left:10px} .scr__fbv .scr__play::before{margin-left:2px;border-left-width:6px;border-block-width:4px} .scr__fbt span{color:var(--muted);font-size:13px;white-space:nowrap} .demo__chat blockquote{margin:0;font:italic 400 .9375rem/1.4 var(--font-display)} .demo__chat figcaption{margin-top:4px;color:var(--world-ink);font:700 var(--fs-meta)/1.2 var(--font-body)} .how__try{margin-top:0} #demo .cta-inapp{display:none} @media (max-width:767px){ #demo{--section-y:40px} .demo__grid{gap:16px} .scr__fbv{width:40px} .scr__fbv img{left:2px;width:14px;height:14px} #demo .how__try .cta-micro{margin-top:4px} .lesson__st{position:relative;top:auto;left:auto;grid-column:2;grid-row:1;justify-self:start;margin:22px 0 0 -6px;max-width:none;padding:8px 11px 9px;font-size:.9375rem;line-height:1.25;--st-tilt:3deg} .demo__chat{grid-column:2;grid-row:3;justify-self:stretch;margin:0 0 6px -8px;max-width:none;rotate:-2deg;border-radius:18px 18px 18px 4px} .demo__chat blockquote{font-size:.875rem} } @media (min-width:768px){ .lesson__st{--st-left:calc(50% - 250px);max-width:11em} .scr__fbv{width:64px} } @media (min-width:768px) and (max-width:1023px){ .beats{justify-content:flex-start} } @media (min-width:1024px){ #demo{--section-y:64px} .demo__grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"text lesson" "beats lesson" "try lesson";column-gap:64px;row-gap:24px;align-content:start} .demo__text{padding-top:24px} .beats{flex-direction:column;align-items:flex-start;gap:10px} .lesson-on .step:not([aria-selected="true"]) .step__cap{position:static;width:auto;height:auto;clip:auto;white-space:normal} .lesson__st{--st-top:30%;--st-left:calc(50% + 122px);font-size:var(--fs-hand);max-width:9em;--st-tilt:4deg} .demo__chat{position:absolute;grid-row:auto;grid-column:auto;left:auto;right:calc(50% + 140px);bottom:96px;margin:0;max-width:14em;rotate:-2deg;border-radius:18px 18px 4px 18px} .scr__video{aspect-ratio:4/3} .scr__say .scr__wave{flex:none} .scr__say{display:contents} .scr--mary .scr__loop{order:2;margin-top:12px} .scr__mic{padding:14px 12px} .scr__fbv{width:100%} .scr__fbv img{left:10px;bottom:8px;width:36px;height:36px;box-shadow:0 0 0 2px var(--raised)} .scr__fbv .scr__play{width:38px;height:38px;margin:0} .scr__fbv .scr__play::before{margin-left:3px;border-left-width:11px;border-block-width:7px} .scr__fbt{grid-template-columns:auto 1fr;align-items:baseline;gap:6px;padding:0 4px 2px} .demo__chat blockquote{font-size:1rem} } @media (min-width:1024px) and (max-width:1279px){ .lesson__st{--st-left:calc(50% + 112px);max-width:8em} } :root[data-theme="dark"] .scr__video{background:radial-gradient(90% 120% at 30% 20%,var(--world-deep),var(--world))} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .scr__video{background:radial-gradient(90% 120% at 30% 20%,var(--world-deep),var(--world))} } /* MERI: */ .meri__lead{margin:-8px 0 12px;max-width:30em} #meri .lk-h2{margin-bottom:20px} #meri .lk-meri__spine{background:var(--meri);box-shadow:inset 1px 0 0 color-mix(in srgb,var(--raised) 45%,transparent),inset 0 2px 0 color-mix(in srgb,var(--meri-ink) 22%,transparent),inset 0 -2px 0 color-mix(in srgb,var(--meri-ink) 22%,transparent),0 6px 14px -6px color-mix(in srgb,var(--meri-ink) 40%,transparent)} #meri .lk-meri__spine::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--grain);mix-blend-mode:var(--grain-blend);opacity:calc(var(--grain-opacity) * 1.4);pointer-events:none} #meri .lk-meri__leaf i:first-child{background:var(--meri)} :root[data-theme="dark"] #meri .lk-meri__leaf i:last-child{background:radial-gradient(circle at 30% 25%,color-mix(in oklab,var(--meri) 44%,var(--raised)),transparent 70%),linear-gradient(90deg,color-mix(in oklab,var(--meri) 34%,var(--raised)) 82%,color-mix(in oklab,var(--meri) 24%,var(--raised)));box-shadow:inset -1px 0 0 color-mix(in srgb,var(--ink) 16%,transparent);color:color-mix(in srgb,var(--meri) 70%,var(--ink) 30%)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) #meri .lk-meri__leaf i:last-child{background:radial-gradient(circle at 30% 25%,color-mix(in oklab,var(--meri) 44%,var(--raised)),transparent 70%),linear-gradient(90deg,color-mix(in oklab,var(--meri) 34%,var(--raised)) 82%,color-mix(in oklab,var(--meri) 24%,var(--raised)));box-shadow:inset -1px 0 0 color-mix(in srgb,var(--ink) 16%,transparent);color:color-mix(in srgb,var(--meri) 70%,var(--ink) 30%)} } #meri .lk-meri__leaf i:first-child span,#meri .lk-meri__leaf i:last-child::after{display:none} #meri .lk-meri[data-shelf] .lk-meri__name{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} @media (max-width:1023px){ #meri .lk-meri__row{display:grid;grid-template-columns:minmax(0,1fr) repeat(4,64px) minmax(0,1fr);column-gap:12px;row-gap:0;align-items:end} #meri .lk-meri__spine[data-l=m]{grid-column:2} #meri .lk-meri__spine[data-l=e]{grid-column:3} #meri .lk-meri__spine[data-l=r]{grid-column:4} #meri .lk-meri__spine[data-l=i]{grid-column:5} #meri .lk-meri__row::after{content:"";grid-column:2/6;grid-row:2;height:8px;margin:-2px -22px 0;border-radius:2px;background:color-mix(in oklab,var(--world) 70%,var(--world-ink) 30%);box-shadow:0 6px 12px -6px rgb(39 46 42/30%)} #meri .lk-meri__spine{grid-row:1;flex-direction:column;justify-content:space-between;width:auto;height:178px;overflow:hidden;min-height:0;padding:12px 0 10px;border-radius:5px 5px 2px 2px;translate:none;rotate:var(--lean,0deg);transform-origin:50% 100%} #meri .lk-meri__spine[data-l=m]{--lean:-1.5deg} #meri .lk-meri__spine[data-l=e]{--lean:1deg;height:168px} #meri .lk-meri__spine[data-l=r]{--lean:-.8deg;height:174px} #meri .lk-meri__spine[data-l=i]{--lean:1.5deg;height:164px} #meri .lk-meri__spine b{width:auto;font-size:1.625rem} #meri .lk-meri__spine span{flex:none;writing-mode:vertical-rl;rotate:180deg;letter-spacing:.04em;font-size:.8125rem} #meri .lk-meri__spine::after{content:none} #meri .lk-meri__spine[aria-expanded=true]{rotate:0deg;translate:0 -8px;box-shadow:inset 1px 0 0 color-mix(in srgb,var(--raised) 45%,transparent),0 10px 18px -8px color-mix(in srgb,var(--meri-ink) 55%,transparent)} #meri .lk-meri[data-shelf] .lk-meri__book{grid-column:1/-1;grid-row:3;margin:8px 0 0;padding:16px 22px 16px 28px;border-radius:4px var(--r-card) var(--r-card) var(--r-card);border-top:5px solid var(--meri);line-height:1.45} } @media (min-width:1024px){ #meri.band{padding-block:40px} #meri .lk-meri{--shelf-h:336px} #meri .lk-meri[data-shelf] .lk-meri__book::after{border-radius:0 var(--r-card) var(--r-card) 0} #meri .lk-meri__leaf{inset:8px 0 8px 50%;transform-origin:0 50%} #meri .lk-meri__leaf i{border-radius:var(--r-card) 0 0 var(--r-card)} #meri .lk-meri[data-shelf] .lk-meri__book{perspective:2600px;perspective-origin:50% 50%} } /* lf:mary f6 (motion.choreo): тап по букві - один раз, текст сторінки проступає одразу (kit data-turn, 220 мс), без закритої обкладинки й порожньої картки; колишні data-turning / data-early прибрано. */ .js #meri:not(.is-mounted) .lk-meri__book:not(#meri-m),.js #pairs:not(.is-mounted) .why__story:not(#why-dad){display:none} .js #pairs{--pre:781px} .js #course{--pre:760px} .js #meri{--pre:520px} @media (min-width:1024px){ .js #pairs{--pre:737px} .js #course{--pre:720px} .js #meri{--pre:560px} } /* «Привіт, я Мері» «Лінія життя»: */ .mary__grid{display:grid;gap:30px;align-items:center} #meri .lk-meri__book p{text-wrap:pretty} .mary__fig{width:min(70vw,276px);margin:0 18px 22px 0;--layer-tilt:-3deg;--layer-ground:var(--world-accent)} .mary__photo{padding:10px 10px 14px;--frame-tilt:2deg} .mary__img{display:block} .mary__photo img{aspect-ratio:16/10;object-fit:cover;object-position:30% 30%} /* ml-small 09.10 (Маша, ce79cc07: «с цветокоррекцией фото что-то не так, я желтая»): без sepia/saturate - кадр у природних кольорах в обох темах */ /* маркер на ліловій смузі - справді ліловий, і вдень, і вночі (art r3-07, creative r3-04) */ #mary{--world-hl:color-mix(in oklab,var(--world-accent) 48%,var(--world))} :root[data-theme="dark"] #mary{--world-hl:color-mix(in oklab,var(--world-accent) 44%,transparent)} :root[data-theme="dark"] #mary .lk-hl{color:var(--ink)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) #mary{--world-hl:color-mix(in oklab,var(--world-accent) 44%,transparent)} :root:not([data-theme="light"]) #mary .lk-hl{color:var(--ink)} } .life{position:relative;padding-left:34px} .life__list{display:grid;gap:22px} .life__m::before{content:"";position:absolute;left:-28px;top:.55rem;width:12px;height:12px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 2.5px var(--world-ink)} .life__at[role=button]{cursor:pointer;min-height:44px;min-width:44px} .life__at:focus-visible{outline:var(--focus-ring);outline-offset:4px;border-radius:6px} .life__m p{display:inline;margin:0} .life[data-pick] .life__m:not([data-on]) .life__at{color:var(--muted)} .life__m[data-on]{color:var(--ink)} .life__hl{background:linear-gradient(var(--world-hl),var(--world-hl)) 0 var(--hl-y,64%)/0% var(--hl-h,.82em) no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone} .life__m[data-on] .life__hl{background-size:100% var(--hl-h,.82em)} .life__go{margin:14px 0 0 34px} .life__m[data-on]::before{background:var(--world-ink)} .mary__sign::after{content:"";position:absolute;left:-6%;right:-10%;bottom:-.3em;height:.3em;background:var(--marker);rotate:-4deg;-webkit-mask:var(--lk-arc) center/100% 100% no-repeat;mask:var(--lk-arc) center/100% 100% no-repeat} @media (max-width:767px){ #mary .life__m{padding-left:3.9rem;font-size:1rem;line-height:1.5} .mary__grid{gap:16px} .mary__sign{margin-top:12px} } @media (max-width:767px){ #change,#pairs,#course,#mary,#faq,#start{--section-y:48px} #mary{--section-y:32px} #mary .mary__fig{margin-bottom:16px} #reviews{--section-y:40px} #course{--section-y:40px} #course .lk-h2{margin-bottom:16px} #meri{--section-y:16px} #meri .lk-h2{margin-bottom:8px} #meri .lk-meri[data-shelf] .lk-meri__book{padding-block:12px} #meri .lk-meri__line{margin-bottom:8px} #meri .lk-meri__feel{margin-bottom:4px} #meri .lk-meri__spine{height:150px;gap:6px;padding-block:8px} #meri .lk-meri__spine span{font-size:.875rem} #meri .lk-meri__spine[data-l=e]{height:auto;min-height:140px} #meri .lk-meri__spine[data-l=r]{height:auto;min-height:146px} #meri .lk-meri__spine[data-l=i]{height:136px} .ticks__chart{padding-top:84px} } @media (min-width:768px) and (max-width:1023px){ #meri .lk-meri{max-width:560px;margin-inline:auto} } @media (min-width:1024px){ #change,#pairs,#course,#meri,#mary,#faq{--section-y:64px} #reviews{--section-y:64px} #course{--section-y:48px} #faq .lk-faq__q{padding-block:10px} } @media (min-width:1024px){ .mary__grid{grid-template-columns:minmax(0,4.5fr) minmax(0,7.5fr);column-gap:72px} .mary__fig{width:auto;max-width:340px} .mary__photo img{aspect-ratio:3/4;object-position:38% 40%} .life__go{margin-left:40px} .life{padding-left:40px} .life__m{padding-left:7rem} .life__m::before{left:-34px;top:.9rem} .life__at{top:-.1rem;font-size:1.75rem;line-height:2.25rem} .mary__sign{margin-left:40px} } @media (hover:hover) and (pointer:fine){ .life__at[role=button]:hover{scale:1.08} } @media (prefers-reduced-motion:no-preference){ .life__m{transition:opacity var(--dur-ui)} .life__at{transition:scale var(--spring-paper-dur,520ms) var(--spring-paper,var(--ease-out)),color var(--dur-ui)} .life__at:active{scale:1.08} /* Ink selects at once; mountLife keeps the existing 450ms opacity response and paper spring. */ .life__m{transition:color var(--dur-ui)} :root.rv-on:not(.rv-done) .life:not(.is-in) .life__pen{stroke-dashoffset:1} :root.rv-on:not(.rv-done) .life:not(.is-in) .life__m{opacity:0;translate:0 10px} .life.is-in .life__pen{animation:life-pen 1500ms var(--ease-inout) backwards} .life.is-in .life__m{animation:life-m 520ms var(--ease-settle) calc(var(--k,0) * 330ms + 120ms) backwards} .life.is-in .life__m::before,.life.is-in .life__at{animation:life-stamp 320ms var(--ease-stone) calc(var(--k,0) * 330ms + 60ms) backwards} .rv-done .life .life__pen,.rv-done .life .life__m,.rv-done .life .life__m::before,.rv-done .life .life__at{animation:none} } .lk-faq__q:active{color:var(--world-ink);background:color-mix(in oklab,var(--world-deep) 35%,transparent)} #faq .lk-faq__say{position:relative} #faq .lk-faq__say[data-typing]>.lk-faq__words{display:block!important;visibility:hidden} #faq .lk-faq__say[data-typing]>.lk-faq__dots{position:absolute;left:18px;top:14px} @media (min-width:1024px){ .faq__head{position:sticky;top:calc(var(--head-h,64px) + 24px);align-self:start} .faq__head .lk-faq__room{position:static} } @media (hover:hover) and (pointer:fine){ .lk-faq__q:hover{color:var(--world-ink)} } @media (prefers-reduced-motion:no-preference){ .lk-faq__q{transition:color var(--dur-hover),background-color var(--dur-press),translate var(--dur-press) var(--ease-out)} .lk-faq__q:active{translate:0 1px} } /* фінал (kit finale): */ .final__ask{margin:0} #start .lk-finale__say{color:var(--world-ink)} #start .lk-finale__photo img{object-position:50% 6%} #start .lk-finale__photo::before{translate:8px 8px} #start .lk-finale__photo{cursor:pointer;-webkit-tap-highlight-color:transparent} #start .lk-fin__string,#start .lk-fin__arc{display:none} #start .lk-finale__sign[data-pen]{margin-bottom:4px} /* Reserve the pen and its 30px wave before the offscreen enhancement mounts. */ html.js #start .lk-finale__sign:not([data-pen]){height:1.42em;margin:4px 0 50px;font:italic 500 clamp(2.5rem,2.2rem + 1.2vw,3.25rem)/1 var(--font-display);letter-spacing:-.02em} #start{overflow-x:clip} #start .cta-micro{margin-top:8px} :root[data-theme="dark"] #start .lk-finale__say{color:var(--world-accent)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) #start .lk-finale__say{color:var(--world-accent)} } @media (prefers-reduced-motion:no-preference){ #start .lk-finale__photo:active{scale:.98} #start .lk-finale__photo{transition:scale var(--dur-press) var(--ease-out)} } .lk-foot__links{row-gap:8px} @media (max-width:767px){ .why__say{font-size:.9375rem} .why__story{padding:11px 14px} .pairs__next{font-size:.875rem} .pairs__grid{gap:14px} } @media (max-width:599px){ .an--link::after{bottom:.46em} .glue{bottom:.9em} } @media (max-width:767px){ #course{--section-y:16px} #course .course__title{margin-bottom:8px} #course .course__modules{margin:12px 0 16px} #course .course__module-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px} #course .course__module{grid-template-columns:20px minmax(0,1fr);gap:4px 6px;padding:4px 4px;border:0;border-bottom:1px solid var(--world-line);border-radius:0;background:transparent;box-shadow:none;min-height:44px;font-size:1rem;line-height:1.35} #course .course__module-name{grid-column:1/-1;grid-row:1} #course .course__module-n{grid-row:2;min-height:20px;align-self:start} #course .course__module-count{grid-column:2;grid-row:2;align-self:center} #course .course__module[aria-current="true"]{border-color:var(--world-ink);background:color-mix(in oklab,var(--world) 55%,var(--raised))} #course :is(.course__module-prefix,.course__current){position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap} #course .phrase{margin-bottom:12px;padding:20px 12px 12px} #course .phrase__lens{margin-bottom:12px} #course .phrase__lens>button{min-height:44px} #course .phrase__line{font-size:1.875rem;line-height:1.9} #course .an[data-tag]::before{font-size:.875rem} #course .phrase__key{margin-top:8px} #course .phrase__explain{gap:4px;margin-top:8px;font-size:1rem;line-height:1.45} #course .ticks{gap:4px;margin-top:12px} #course .ticks__chart{display:grid;grid-template-rows:auto 52px;gap:4px;padding:0} #course .ticks__svg{grid-row:2;display:block;height:52px} #course .ticks__tip{position:static;grid-row:1;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;width:auto;margin:0;padding:2px 0;border-radius:0;background:transparent;box-shadow:none;transform:none!important} #course .ticks__tip span{margin:0;font-size:1rem;line-height:1.35;text-wrap:pretty} #course .ticks__head{bottom:0;height:52px} #course .ticks__grip{bottom:6px} #course .ticks__cap{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:12px;align-items:center} #course .ticks__n{font-size:3rem} #course .ticks__t{margin:0;font-size:1rem;line-height:1.4} #course .ticks__key{grid-column:1/-1} } /* lf:offers — «Формати й ціни» (offers r1 + r2: owner 08.10 «ступеньки не оч, слишком много пустоты» - три квитки однієї висоти в один ряд, ціна під назвою, корінці на одній лінії; квиток називає лише своє: «Усе з «Хочу сам»» + що додає. offers r1; Д1/Д2 Маші, owner-eye «один предмет із перемиканням, одна головна кнопка»). Три квитки з корінцем: склад за каталогом, замість закреслень - «+ що додає ментор / ментор і заняття» (невключене лишається для читалки екрана). Коралова кнопка одна - на обраному квитку (за замовчуванням «Хочу більше»). Телефон/планшет: перемикач із трьома цінами над одним квитком, квиток змінюється з «відривом» корінця (≤ 280 мс). Стіл: три квитки поруч, обраний піднятий; дотик, наведення чи фокус на квитку переносить на нього вибір і коралову кнопку. */ #price{--section-y:clamp(28px,4vw,64px)} #price .lk-h2{margin-bottom:clamp(14px,2vw,28px)} .price__formats{display:none} #price .offers{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:stretch} #price .lk-ticket{min-width:0;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;--tk-notch:12px; --tk-cut-a:radial-gradient(circle at 0 100%,transparent var(--tk-notch),var(--ink) calc(var(--tk-notch) + .5px)) 0 0/51% 100% no-repeat,radial-gradient(circle at 100% 100%,transparent var(--tk-notch),var(--ink) calc(var(--tk-notch) + .5px)) 100% 0/51% 100% no-repeat; --tk-cut-b:radial-gradient(circle at 0 0,transparent var(--tk-notch),var(--ink) calc(var(--tk-notch) + .5px)) 0 0/51% 100% no-repeat,radial-gradient(circle at 100% 0,transparent var(--tk-notch),var(--ink) calc(var(--tk-notch) + .5px)) 100% 0/51% 100% no-repeat} #price .lk-ticket__main{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:2px 12px;min-width:0;padding:22px 22px 18px;border-radius:var(--tk-r) var(--tk-r) 0 0} #price .lk-ticket__stub{display:grid;align-content:start;gap:8px;min-width:0;padding:16px 22px 22px;border-radius:0 0 var(--tk-r) var(--tk-r)} #price .lk-ticket__stub::before{top:-2px;bottom:auto;left:calc(var(--tk-notch) + 5px);right:calc(var(--tk-notch) + 5px);width:auto;height:4px;background:radial-gradient(circle,var(--tk-perf) 1.6px,transparent 2.1px) 0 50%/9px 4px repeat-x} #price .offer h3{grid-column:1;font-size:clamp(1.5rem,1.25rem + .8vw,1.875rem);line-height:1.15} .offer__format{grid-column:1;margin:0;color:var(--ink-2);font:600 .9375rem/1.4 var(--font-body)} .offer__price{position:relative;grid-column:1;justify-self:start;margin:10px 0 0;color:var(--ink);font:500 clamp(2.75rem,2.2rem + 1.4vw,3.75rem)/1 var(--font-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap} .offer__price[data-ring]{text-shadow:0 0 .3em color-mix(in srgb,var(--world-accent) 60%,transparent)} #price .offer__list{grid-column:1/-1;display:grid;gap:6px;margin:16px 0 0;padding:0;list-style:none} #price .offer__list li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;padding:0;color:var(--ink);font:500 .9375rem/1.4 var(--font-body)} #price .offer__list li::before{content:none} .offer__list svg{width:18px;height:18px;margin-top:1px;fill:none;stroke:var(--world-ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round} .offer__status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* невключене - для читалки екрана («Не включено: …»), на око його показує «+ що додає» сусіднього квитка */ #price .offer__list .offer__excluded{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* «Усе з «…»» замінює повтор основи: рядки основи лишаються для читалки (data-base), на око - одна тиха строка; далі «+» - що додає саме цей формат, чорнилом світу (головне - заняття - Literata) */ #price .offer__list [data-base]{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} #price .offer__list .offer__all{color:var(--ink-2);font-weight:600} #price .offer__list .offer__all svg{stroke:var(--ink-2)} #price .offer__list [data-add]{color:var(--world-ink);font-weight:700} #price .offer__list [data-add] strong{font-weight:inherit} #price .offer__list [data-add] svg{stroke:var(--world-ink);stroke-width:2.6} #price .offer__list [data-add=main] strong{font:500 1.1875rem/1.3 var(--font-display);letter-spacing:-.01em;text-wrap:balance} #price .offer__path{margin:10px 0 0;color:var(--ink-2);font:500 .8125rem/1.45 var(--font-body);text-wrap:pretty} #price .offer__list .offer__all+[data-base]+[data-add],#price .offer__list .offer__all+[data-add]{margin-top:4px;padding-top:10px;border-top:1px dashed var(--world-line)} .offer__parts{color:var(--world-ink)} .offer__once{color:var(--ink-2);font:600 var(--fs-meta)/1.4 var(--font-body)} #price .offer__once:has(>[data-parts][hidden]){display:none} #price .offer__buy,#price .closed{margin:0;padding:0;border:0} #price .offer__buy .btn-buy,#price .closed .btn-buy{width:100%;min-height:52px;margin:0;padding:12px 16px;font-size:1rem;white-space:normal;text-wrap:balance} /* одна коралова: на обраному квитку; на інших - паперова пілюля з чорнильною лінією */ #price .offers[data-js] .offer:not([data-on]) .btn-buy{background:var(--raised);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)} #price .offers[data-js] .offer:not([data-on]) .btn-buy:hover{background:var(--cream,var(--raised))} #price .offer__terms{max-width:58em;margin-top:4px;color:var(--ink-2);font:500 var(--fs-meta)/1.5 var(--font-body)} .price__closed{max-width:46em;margin-top:18px} .closed__text{color:var(--ink);font:500 1rem/1.5 var(--font-body);text-wrap:pretty} .closed__hint{margin-top:2px;color:var(--ink-2);font:500 var(--fs-meta)/1.4 var(--font-body)} .closed__try{margin-top:2px} .closed__try .lk-link{min-height:44px} .price__combine{display:grid;gap:4px;margin-top:6px;color:var(--ink-2);font:500 1rem/1.5 var(--font-body)} .price__with .lk-link{font-weight:700} .offer__refund{max-width:44em;margin:8px 0 12px;color:var(--ink-2);font:500 var(--fs-meta)/1.5 var(--font-body)} .offer__refund a{color:var(--link);font-weight:600;text-decoration:underline;text-underline-offset:.18em} .price__terms{max-width:58em;margin-top:12px;border-top:1px solid var(--world-line)} .price__terms>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;padding-block:8px;color:var(--ink-2);font:600 1rem/1.4 var(--font-body);cursor:pointer;list-style:none} .price__terms>summary::-webkit-details-marker{display:none} .price__terms>summary>span{font-size:1.5rem;rotate:90deg} .price__terms[open]>summary>span{rotate:-90deg} .price__terms>summary:focus-visible{outline:var(--focus-ring);outline-offset:2px} @media (max-width:1023px){ .price__formats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:0 0 14px;padding:4px;border-radius:var(--r-pill,999px);background:color-mix(in oklab,var(--world-line) 45%,var(--cream,var(--paper)))} .price__formats a{display:grid;justify-items:center;align-content:center;gap:1px;min-height:56px;padding:6px 4px;border-radius:var(--r-pill,999px);color:var(--ink-2);font:600 .8125rem/1.2 var(--font-body);text-align:center;text-decoration:none;-webkit-tap-highlight-color:transparent} .price__formats a b{font-weight:600} .price__formats a span{color:var(--ink);font:500 1.25rem/1.1 var(--font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums} .price__formats a[aria-current]{background:var(--raised);color:var(--ink);box-shadow:var(--shadow-e1,0 1px 2px rgb(39 46 42/6%),0 6px 18px rgb(39 46 42/6%))} .price__formats a[aria-current] b{font-weight:700} .price__formats a:focus-visible{outline:var(--focus-ring);outline-offset:2px} #price .offers[data-js]>.offer:not([data-on]){display:none} #price .offers:not([data-js]){gap:18px} } @media (max-width:767px){ .price__closed{margin-top:14px} .closed__text{font-size:.9375rem;line-height:1.45} #price .offer__list{margin-top:12px;gap:4px} .price__combine{margin-top:2px} #price .lk-ticket__main{padding:16px 18px 12px} #price .lk-ticket__stub{padding:14px 18px 18px} } @media (max-width:374px){ .price__formats a{font-size:.75rem} .price__formats a span{font-size:1.125rem} } @media (min-width:1024px){ #price .offers{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch} #price .offers[data-js] .offer{cursor:pointer} #price .offers[data-js] .offer[data-on]{cursor:auto} /* обраний не стрибає вгору (без «сходинок»): лише тінь e1 і чорнильний кант по краю квитка */ #price .offers[data-js] .offer[data-on]{filter:drop-shadow(0 0 0 transparent) drop-shadow(0 0 1.5px color-mix(in srgb,var(--world-ink) 70%,transparent)) drop-shadow(0 16px 28px color-mix(in srgb,var(--world-ink) 16%,transparent))} #price .offers[data-js] .offer:not([data-on]) .lk-ticket__main{--tk-main:color-mix(in oklab,var(--raised) 82%,var(--cream,var(--paper)))} #price .lk-ticket__main{padding:24px 24px 18px} #price .lk-ticket__stub{padding:16px 24px 22px} #price .offer__price{margin-top:12px} .price__combine{grid-auto-flow:column;justify-content:start;align-items:baseline;column-gap:18px} } @media (prefers-reduced-motion:no-preference){ #price .offers[data-js] .btn-buy{transition:background-color 220ms var(--ease-standard,ease),color 220ms var(--ease-standard,ease),box-shadow 220ms var(--ease-standard,ease),scale var(--dur-press,120ms) var(--ease-out,ease)} #price .offer[data-swap]{animation:tk-swap 260ms var(--ease-emphasized,cubic-bezier(.2,.7,.3,1)) both} #price .offer[data-swap] .lk-ticket__stub{animation:tk-tear 280ms var(--ease-emphasized,cubic-bezier(.2,.7,.3,1)) both} .price__formats a{transition:background-color 220ms var(--ease-standard,ease),box-shadow 220ms var(--ease-standard,ease),color 220ms var(--ease-standard,ease)} } :root[data-theme="dark"] #price .lk-ticket{--tk-main:color-mix(in oklab,var(--raised) 86%,var(--world-ink) 14%);--tk-stub:color-mix(in oklab,var(--raised) 72%,var(--world-ink) 28%);filter:drop-shadow(0 0 1px color-mix(in srgb,var(--world-ink) 40%,transparent)) drop-shadow(0 18px 32px rgb(0 0 0/45%))} :root[data-theme="dark"] #price .lk-ticket__stub{box-shadow:inset 0 0 0 1px var(--border-subtle,var(--line))} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) #price .lk-ticket{--tk-main:color-mix(in oklab,var(--raised) 86%,var(--world-ink) 14%);--tk-stub:color-mix(in oklab,var(--raised) 72%,var(--world-ink) 28%);filter:drop-shadow(0 0 1px color-mix(in srgb,var(--world-ink) 40%,transparent)) drop-shadow(0 18px 32px rgb(0 0 0/45%))} :root:not([data-theme="light"]) #price .lk-ticket__stub{box-shadow:inset 0 0 0 1px var(--border-subtle,var(--line))} } /* /lf:offers */ /* lf:results r3 08.10 - #change «глобус» і #results «платівка My voice.» (власник: r1 струна «говно», r2 шкала «хуита» й «мех, на 6»). Один предмет у фокусі, рух лише від руки людини: transform і прозорість; глобус малює canvas тільки після дії. */ .change__grid{display:grid;gap:18px;grid-template-areas:"head" "globe" "route"} .change__head{grid-area:head} .change__head .lk-h2{margin-bottom:12px} .change__gives{max-width:26ch} .change__gives em{display:block;margin-top:4px;color:var(--world-ink);font-family:var(--font-display);font-style:italic} .globe{grid-area:globe;position:relative;isolation:isolate;justify-self:center;width:min(100%,560px);aspect-ratio:1;margin:0;touch-action:pan-y;cursor:grab;-webkit-tap-highlight-color:transparent; --g-sea:var(--world);--g-deep:var(--world-deep);--g-dot:var(--world-ink);--g-arc:var(--marker);--g-you:var(--ink);--g-ring:var(--raised);--g-rim:var(--world-line)} .globe[hidden]{display:none} .globe:active{cursor:grabbing} .globe__c{display:block;width:100%;height:100%} /* атмосфера (м'яка куля світла позаду, ElevenLabs «gradient orb») і тінь кулі на папері */ .globe::before{content:"";position:absolute;inset:-8%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--world-accent) 26%,transparent),transparent);pointer-events:none} .globe::after{content:"";position:absolute;left:18%;right:18%;bottom:-3%;height:7%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgb(39 46 42/18%),transparent);pointer-events:none} .route{grid-area:route;display:grid;gap:14px;align-content:start} .route__picks{display:flex;width:fit-content;max-width:100%;padding:4px;border-radius:var(--r-pill);background:var(--world)} [data-route]:not([data-js]) .route__picks{display:none} .route__pick{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink-2);font:italic 400 clamp(1.0625rem,.98rem + .4vw,1.375rem)/1.2 var(--font-display);cursor:pointer;-webkit-tap-highlight-color:transparent} .route__pick[hidden]{display:none} .route__pick[aria-pressed="true"]{background:var(--raised);color:var(--ink);font-weight:600;box-shadow:var(--sh-paper)} .route__pick:focus-visible{outline:var(--focus-ring);outline-offset:3px} /* два етапи видно завжди (Маша F78: «не развилка, это этапы»); обраний - чорнилом світу, інший тихіше */ .route__shelf{display:grid;gap:14px} .route__ch{display:grid;align-content:start;gap:2px;padding-left:16px;border-left:3px solid var(--world-line)} .route__res{margin:0;color:var(--world-ink);font:500 clamp(1.375rem,1.2rem + .8vw,1.875rem)/1.15 var(--font-display);letter-spacing:-.03em;text-wrap:balance} .route__ch>p{max-width:40ch;color:var(--ink-2);font:400 1rem/1.5 var(--font-body);text-wrap:pretty} [data-route][data-js][data-pick="a"] .route__ch--a,[data-route][data-js][data-pick="b"] .route__ch--b{border-left-color:var(--world-ink)} [data-route][data-js][data-pick="a"] .route__ch--b .route__res,[data-route][data-js][data-pick="b"] .route__ch--a .route__res{color:var(--ink-2)} [data-route][data-js][data-pick="a"] .route__ch--b>p,[data-route][data-js][data-pick="b"] .route__ch--a>p{color:var(--muted)} .change__same{max-width:42ch;padding-top:12px;border-top:1px solid var(--world-line);color:var(--muted);font:500 .875rem/1.5 var(--font-body);text-wrap:pretty} /* #results: конверт (аркуш Codex «My voice.») і платівка, що визирає справа; три доріжки = три результати */ .results__grid{display:grid;gap:20px;grid-template-areas:"head" "disc" "list"} .results__head{grid-area:head} .results__head .lk-h2{margin-bottom:12px} .results__intro{max-width:40ch;color:var(--ink);font:500 var(--fs-lead)/1.45 var(--font-body);text-wrap:pretty} .disc{grid-area:disc;position:relative;isolation:isolate;justify-self:start;width:calc(var(--sl) + var(--rec) * var(--peek) + 12px);margin:8px 0 0;--sl:min(calc((100vw - 46px) / 1.376),300px);--rec:calc(var(--sl) * .94);--peek:.4;--a:0deg;--out:0px} .disc__sleeve{position:relative;z-index:2;display:grid;align-content:space-between;gap:12px;width:var(--sl);aspect-ratio:1;padding:clamp(18px,4vw,30px);border-radius:6px;background:radial-gradient(120% 90% at 18% 10%,color-mix(in oklab,var(--world-ink) 82%,var(--world-mat)) 0%,var(--world-ink) 55%,color-mix(in oklab,var(--world-ink) 84%,var(--vinyl-hole)) 100%);color:var(--world-mat);box-shadow:var(--sh-lift);rotate:-1.5deg} .disc__sleeve::after{content:"";position:absolute;inset:9px;border:1px solid color-mix(in srgb,var(--world-mat) 28%,transparent);border-radius:3px;pointer-events:none} .disc__word{color:var(--world-mat);font:500 calc(var(--sl) * .22)/.92 var(--font-display);letter-spacing:-.045em} .disc__word em{display:block;font-weight:500} .results__proofs{display:grid} .results__proof{margin:0;padding-left:12px;border-left:3px solid var(--world-accent)} .results__proof p{color:var(--world-mat);font:italic 400 clamp(1rem,.94rem + .3vw,1.1875rem)/1.38 var(--font-display);text-wrap:pretty} [data-results][data-js] .results__proof{grid-area:1/1} [data-results][data-js] .results__proof[hidden]{display:block;visibility:hidden;opacity:0} [data-results]:not([data-js]) .results__proofs{gap:10px} .disc__sleeve figcaption{color:color-mix(in srgb,var(--world-mat) 78%,transparent);font:600 .8125rem/1.3 var(--font-body)} /* платівка: борозни, наклейка з трьома номерами; повертається від руки до трьох положень (120°) */ .disc__record{position:absolute;z-index:1;top:calc((var(--sl) - var(--rec)) / 2);left:calc(var(--sl) - var(--rec) * (1 - var(--peek)));width:var(--rec);aspect-ratio:1;border-radius:50%;translate:var(--out) 0;box-shadow:0 18px 40px rgb(23 34 28/28%);touch-action:pan-y;cursor:grab;-webkit-tap-highlight-color:transparent} [data-results]:not([data-js]) .disc__record{display:none} .disc__record{cursor:pointer} .disc__record:focus-visible{outline:var(--focus-ring);outline-offset:6px} .disc__spin{position:absolute;inset:0;border-radius:50%;rotate:var(--a);background:radial-gradient(circle closest-side,transparent 0 60.4%,var(--vinyl) 60.6% 61.8%,transparent 62% 78.4%,var(--vinyl) 78.6% 79.8%,transparent 80% 96.6%,var(--vinyl) 96.8%),radial-gradient(circle,transparent 0 31%,var(--vinyl-hole) 31.5% 33%,transparent 33.2%),repeating-radial-gradient(circle,var(--vinyl) 0 1.6px,var(--vinyl-groove) 1.6px 2.6px,var(--vinyl-hole) 2.6px 3.4px)} .disc__label{position:absolute;inset:30%;border-radius:50%;background:radial-gradient(circle,var(--vinyl-hole) 0 6%,color-mix(in oklab,var(--w-pronunciation-accent) 88%,var(--vinyl-print)) 6.5% 40%,var(--w-pronunciation-accent) 41% 100%);box-shadow:inset 0 0 0 2px rgb(255 255 255/18%)} .disc__ns{position:absolute;inset:0;pointer-events:none} .disc__n{position:absolute;left:50%;top:50%;width:1.6em;margin:-.8em;border-radius:50%;color:var(--vinyl-print);font:600 max(13px,calc(var(--rec) * .062))/1.6 var(--font-display);font-variant-numeric:lining-nums;text-align:center;opacity:.55} .disc__n--0{transform:translate(calc(var(--rec) * .311),calc(var(--rec) * .311))} .disc__n--1{transform:translate(calc(var(--rec) * .247),calc(var(--rec) * .247))} .disc__n--2{transform:translate(calc(var(--rec) * .191),calc(var(--rec) * .191))} /* смуга обраної доріжки світліша; наведення на рядок списку чи смугу - ледь світліша */ .disc__band{position:absolute;inset:0;border-radius:50%;opacity:0;pointer-events:none} .disc__band--0{background:radial-gradient(circle closest-side,transparent 0 80.2%,rgb(255 255 255/11%) 80.6% 96.4%,transparent 96.8%)} .disc__band--1{background:radial-gradient(circle closest-side,transparent 0 62.2%,rgb(255 255 255/11%) 62.6% 78.2%,transparent 78.6%)} .disc__band--2{background:radial-gradient(circle closest-side,transparent 0 47.2%,rgb(255 255 255/11%) 47.6% 60.2%,transparent 60.6%)} [data-results][data-k="0"] .disc__band--0,[data-results][data-k="1"] .disc__band--1,[data-results][data-k="2"] .disc__band--2{opacity:1} [data-results][data-k="0"] .disc__n--0,[data-results][data-k="1"] .disc__n--1,[data-results][data-k="2"] .disc__n--2{opacity:1;background:var(--vinyl-print);color:var(--vinyl-ink);box-shadow:0 2px 6px rgb(0 0 0/35%)} /* блік стоїть, платівка під ним крутиться - тому поворот видно */ .disc__label::before{content:"";position:absolute;inset:14%;border-radius:50%;border:2px solid transparent;border-top-color:rgb(252 247 237/62%);border-right-color:rgb(252 247 237/22%)} .disc__label::after{content:"";position:absolute;left:50%;bottom:9%;width:7%;aspect-ratio:1;margin-left:-3.5%;border-radius:50%;background:rgb(252 247 237/70%)} .disc__shine{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,transparent 0 8%,rgb(255 255 255/14%) 13%,transparent 20% 52%,rgb(255 255 255/10%) 58%,transparent 66%);pointer-events:none} .disc__arm{position:absolute;left:var(--px);top:var(--py);width:var(--len);height:4px;margin-top:-2px;border-radius:2px;background:linear-gradient(var(--arm-metal),var(--arm-shade));box-shadow:0 0 0 .5px rgb(39 46 42/40%),0 5px 6px rgb(23 34 28/26%);transform-origin:0 50%;rotate:var(--arm)} .disc__arm::before{content:"";position:absolute;left:-24px;top:50%;width:13px;height:10px;margin-top:-5px;border-radius:3px;background:linear-gradient(var(--arm-shade),var(--arm-metal) 45%,var(--arm-shade));box-shadow:0 0 0 .5px rgb(39 46 42/40%)} .disc__arm::after{content:"";position:absolute;right:-9px;top:50%;width:18px;height:10px;margin-top:-5px;border-radius:2px 4px 4px 2px;background:var(--ink);box-shadow:0 0 0 1px rgb(255 255 255/22%),0 3px 5px rgb(23 34 28/30%)} .disc[data-mode="needle"] .disc__grip{cursor:grabbing} .results__list{grid-area:list;display:grid;gap:2px;margin:0;padding:0;list-style:none;counter-reset:none} .results__card{position:relative;display:grid;grid-template-columns:2.2rem 1fr;column-gap:10px;align-content:start;padding:12px 14px;border-radius:var(--r-s)} .results__n{grid-row:1/span 2;color:var(--world-accent);font:500 1.5rem/1.15 var(--font-display);font-variant-numeric:lining-nums} .results__card h3{color:var(--ink);font:500 clamp(1.375rem,1.2rem + .8vw,2rem)/1.15 var(--font-display);letter-spacing:-.03em} .results__card h3 em{color:var(--world-ink);font-weight:500} .results__card p{max-width:40ch;margin-top:4px;color:var(--ink-2);font:400 1rem/1.5 var(--font-body);text-wrap:pretty} [data-results][data-js] .results__card:not([data-on]) p{display:none} .results__card[data-on]{background:var(--raised);box-shadow:var(--sh-paper)} .results__card[data-on] .results__n{color:var(--world-ink)} .results__tap{position:absolute;inset:0;width:100%;padding:0;border:0;border-radius:inherit;background:transparent;color:transparent;font-size:0;cursor:pointer;-webkit-tap-highlight-color:transparent} .results__tap[hidden]{display:none} .results__tap:focus-visible{outline:var(--focus-ring);outline-offset:2px} .js #results{--cis:770px} @media (max-width:767px){ .route__pick{padding:0 14px;font-size:1rem} } @media (min-width:768px){ .disc{--sl:330px;--peek:.62} [data-results][data-js]:not([data-in]) .disc.disc{--out:calc(var(--rec) * -.36)} } @media (min-width:1024px){ .change__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:". globe" "head globe" "route globe" ". globe";grid-template-rows:1fr auto auto 1fr;column-gap:56px;row-gap:28px;align-items:start} .globe{width:min(100%,600px);margin-block:-24px} .results__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"disc head" "disc list";grid-template-rows:auto 1fr;column-gap:56px;row-gap:22px;align-items:start} .results__head{align-self:end} .disc{--sl:380px;align-self:center} .js #results{--cis:660px} } /* вхід у 2 такти: конверт уже лежить, платівка виїжджає з-під нього (один раз), потім проступає фраза */ [data-results][data-js]:not([data-in]) .disc{--out:calc(var(--rec) * -.3)} [data-results]:not([data-js]) .disc__sleeve{aspect-ratio:auto;margin-top:0} @media (hover:hover) and (pointer:fine){ .route__pick:not([aria-pressed="true"]):hover{color:var(--ink);background:color-mix(in srgb,var(--raised) 55%,transparent)} .results__card:not([data-on]):has(.results__tap:not([hidden]):hover){background:color-mix(in srgb,var(--raised) 55%,transparent)} .disc__record:hover .disc__shine{rotate:38deg} [data-results]:has(.results__card[data-k="0"]:hover) .disc__band--0,[data-results]:has(.results__card[data-k="1"]:hover) .disc__band--1,[data-results]:has(.results__card[data-k="2"]:hover) .disc__band--2{opacity:.6} } @media (prefers-reduced-motion:no-preference){ .route__pick{transition:background-color var(--dur-ui),color var(--dur-ui),box-shadow var(--dur-ui)} .route__pick:active,.results__tap:active{scale:.98} [data-route][data-js] .route__ch,.route__res,.route__ch>p{transition:color var(--dur-ui),border-color var(--dur-ui)} .globe{transition:opacity 450ms var(--ease-out),scale 450ms var(--ease-settle,var(--ease-out))} .globe[data-wait]{opacity:0;scale:.96} .route__picks{transition:opacity 260ms var(--ease-out),translate 260ms var(--ease-out)} [data-route][data-wait] .route__picks{opacity:0;translate:0 6px} .disc__spin{transition:rotate 1100ms cubic-bezier(.45,.05,.15,1)} .disc__n{transition:opacity var(--dur-ui),background-color var(--dur-ui),color var(--dur-ui)} .disc__arm{transition:rotate 320ms var(--ease-out)} .disc__band{transition:opacity 260ms var(--ease-out)} .disc__shine{transition:rotate 900ms var(--ease-out)} .disc[data-mode="scrub"] .disc__spin{transition:rotate 140ms linear} .disc[data-mode="spin"] .disc__spin{transition:none} .disc[data-mode="spin"] .disc__arm{transition:rotate 140ms linear} .disc[data-mode="needle"] .disc__arm{transition:none} .disc[data-mode="snap"] .disc__spin,.disc[data-mode="snap"] .disc__arm{transition-duration:220ms;transition-timing-function:var(--ease-out)} [data-results][data-js] .results__proof{transition:opacity 260ms var(--ease-out),translate 260ms var(--ease-out),visibility 0s} [data-results][data-js] .results__proof[hidden]{translate:0 6px;transition:opacity 120ms var(--ease-out),translate 120ms var(--ease-out),visibility 0s 120ms} .results__card{transition:background-color var(--dur-ui),box-shadow var(--dur-ui)} } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .globe::after{background:radial-gradient(closest-side,rgb(0 0 0/45%),transparent)} :root:not([data-theme="light"]) .disc__record{box-shadow:0 0 0 1px rgb(255 255 255/8%),0 18px 40px rgb(0 0 0/55%)} } :root[data-theme="dark"] .globe::after{background:radial-gradient(closest-side,rgb(0 0 0/45%),transparent)} :root[data-theme="dark"] .disc__record{box-shadow:0 0 0 1px rgb(255 255 255/8%),0 18px 40px rgb(0 0 0/55%)} /* /lf:results */ /* lf:inside - «Програма курсу» (#course): одна доріжка. 116 рисок - мікроуроки; під нею лінійка 8 модулів (ширина відрізка = його мікроуроки); обраний модуль підсвічує свої риски й розгортає картку з назвою, відеоуроками та першими темами. Таблиці над сценою більше немає; у шарі «Усе» на фразі три мітки, без накладання. */ #course .course__facts{margin-top:4px} #course .course__units{max-width:44ch} #course .ticks{row-gap:0} #course .ticks__mod{fill:none;stroke:var(--world-ink);stroke-width:2.2;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.9} #course .course__modules{margin:6px 14px 0} #course .course__module-list{display:flex;gap:3px;margin:0;padding:0} #course .course__module-list>li{flex:1 1 0;min-width:0} #course .course__module{position:relative;display:grid;place-items:center;grid-template-columns:none;width:100%;height:auto;min-height:44px;padding:10px 0 4px;border:0;border-radius:0;background:none;box-shadow:none;color:var(--ink-2);cursor:pointer} #course .course__module::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;border-radius:3px;background:color-mix(in oklab,var(--world) 70%,var(--world-accent))} #course .course__module-n{grid-row:auto;min-height:0;width:auto;background:none;color:inherit;font:700 var(--fs-meta)/1 var(--font-body)} #course .course__module-name,#course .course__module-count{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} #course .course__module[aria-current="true"]{border:0;box-shadow:none;background:none;color:var(--world-ink)} #course .course__module[aria-current="true"]::before{background:var(--world-ink);height:6px} #course .course__module[aria-current="true"] .course__module-n{font-size:var(--fs-body)} #course .course__module:focus-visible{outline:var(--focus-ring);outline-offset:2px;border-radius:6px} @media (hover:hover) and (pointer:fine){ #course .course__module:hover{color:var(--world-ink)} #course .course__module:hover::before{background:color-mix(in oklab,var(--world-ink) 55%,var(--world))} } #course .course__open{position:relative;margin-top:12px;padding:14px 18px 14px;border-radius:var(--r-note);background:var(--raised);box-shadow:var(--sh-paper);max-width:560px} #course .course__open-name{color:var(--world-ink);font:500 1.25rem/1.25 var(--font-display);letter-spacing:-.01em} #course .course__open-meta{margin-top:2px;color:var(--ink-2);font:600 var(--fs-meta)/1.4 var(--font-body)} #course .course__open-list{display:grid;gap:4px;margin:10px 0 0;padding:0;list-style:none;counter-reset:mk} #course .course__open-list li{position:relative;padding-left:18px;color:var(--ink);font:500 var(--fs-small)/1.4 var(--font-body);text-wrap:pretty} #course .course__open-list li::before{content:"";position:absolute;left:2px;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--world-accent)} #course .course__open-list .course__open-more{color:var(--muted)} #course .course__open-list .course__open-more::before{background:none;box-shadow:inset 0 0 0 1.5px var(--world-accent)} @media (min-width:1024px){ #course .ticks{grid-template-columns:minmax(0,1fr) 15rem;grid-template-areas:"chart cap" "list cap" "open open";align-items:start;column-gap:48px} #course .ticks__chart{grid-area:chart;padding-top:72px} #course .course__modules{display:contents} #course .course__module-list{grid-area:list;margin:6px 14px 0} #course .course__open{grid-area:open;display:grid;grid-template-columns:minmax(0,18rem) minmax(0,1fr);column-gap:32px;align-items:start;margin:14px 14px 0;max-width:none;padding:16px 22px} #course .course__open-list{grid-column:2;grid-row:1/3;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;margin:2px 0 0} #course .ticks__cap{grid-area:cap;align-self:end;padding-bottom:24px} #course .ticks__head{height:calc(100% - 98px)} } @media (max-width:767px){ #course .course__modules{margin:4px 0 0} #course .course__module-list{gap:1px} #course .course__module-list>li{flex:1 1 44px!important;min-width:44px} #course .course__open{margin-top:10px;padding:12px 14px} #course .course__open-name{font-size:1.125rem} #course .ticks__cap{margin-top:14px} } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) #course .course__module::before{background:color-mix(in oklab,var(--world-accent) 45%,var(--raised))} } :root[data-theme="dark"] #course .course__module::before{background:color-mix(in oklab,var(--world-accent) 45%,var(--raised))} /* /lf:inside */ /* lf:mary · «Привіт, я Мері» (owner-eye 08.10, 07.10 volume): чотири вехи по одному рядку; повний текст Мері - дотиком по вехі, слова не скорочено. Мітки в один рядок. Без JS видно все. */ .life__m p.life__short,.life__m p.life__full{display:block} .life__short{color:var(--ink);font-weight:500} .life__full{margin-top:6px} .life[data-live] .life__m:not([data-on]) .life__full{display:none} .life[data-live] .life__m[data-on] .life__short{display:none} .life[data-live] .life__m[data-on] .life__full{margin-top:0} .life[data-live] .life__m{cursor:pointer} .life__list{gap:16px} #mary .life__at{white-space:nowrap} @media (max-width:767px){ #mary .life__m{padding-left:4.6rem} #mary .life__at{font-size:1.0625rem} } @media (hover:hover){ .life[data-live] .life__m:not([data-on]):hover .life__short{text-decoration:underline 1.5px color-mix(in srgb,var(--world-accent) 60%,transparent);text-underline-offset:.2em} } /* /lf:mary */ /* lf:mary · #meri у світі Вимови - чотири струни (owner-eye 08.10: свій предмет, а не копія полиці головної). Кілок із літерою, назва, струна; дотик - струна дзвенить (≤ 450 мс, лише transform) і відкриває свою сторінку. На 1440 струни ліворуч, сторінка праворуч з цитатою учня замість порожньої книги. Kit meri не змінено: перевдягнено на сторінці (mountMeriTurn ставить data-strings). */ #meri .lk-meri[data-strings]{--shelf-h:auto;padding:0;max-width:none} #meri .lk-meri[data-strings]::after,#meri .lk-meri[data-strings] .lk-meri__row::after{content:none} #meri .lk-meri[data-strings] .lk-meri__row{display:grid;grid-template-columns:minmax(0,1fr);gap:0;min-height:0;clip-path:none;align-items:stretch} #meri .lk-meri[data-strings] .lk-meri__spine{--lean:0deg;grid-column:1;grid-row:auto;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;width:100%;height:auto;min-height:60px;margin:0;padding:8px 2px;overflow:visible;border-radius:12px;background:none;box-shadow:none;color:var(--meri-ink);translate:none;rotate:none;writing-mode:horizontal-tb} #meri .lk-meri[data-strings] .lk-meri__spine::before{content:none} #meri .lk-meri[data-strings] .lk-meri__spine b{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in oklab,var(--meri) 55%,var(--raised)),var(--meri) 60%);box-shadow:inset 0 -3px 0 color-mix(in oklab,var(--meri) 70%,var(--meri-ink)),0 2px 6px color-mix(in srgb,var(--meri-ink) 25%,transparent);color:var(--meri-ink);font:500 1.5rem/1 var(--font-display)} #meri .lk-meri[data-strings] .lk-meri__spine span{flex:none;width:8.6em;writing-mode:horizontal-tb;rotate:none;color:var(--meri-ink);font:700 .8125rem/1.2 var(--font-body);letter-spacing:.08em;text-transform:uppercase} #meri .lk-meri[data-strings] .lk-meri__spine::after{content:"";flex:1;align-self:center;height:2px;margin-right:6px;border-radius:2px;background:linear-gradient(90deg,var(--meri-ink),color-mix(in srgb,var(--meri-ink) 55%,transparent));opacity:.55;rotate:none;font:0/0 a;transform-origin:0 50%} #meri .lk-meri[data-strings] .lk-meri__spine[aria-expanded=true]{background:color-mix(in srgb,var(--meri) 26%,transparent)} #meri .lk-meri[data-strings] .lk-meri__spine[aria-expanded=true]::after{height:3px;opacity:1} #meri .lk-meri[data-strings] .lk-meri__spine:focus-visible{outline:var(--focus-ring);outline-offset:2px} #meri .lk-meri[data-strings] .lk-meri__book{display:none;grid-column:1;grid-row:auto;flex:none;height:auto;margin:4px 0 10px;padding:18px 20px 18px 24px;border:0;border-radius:var(--r-card);background:var(--raised);box-shadow:var(--sh-paper);perspective:none} #meri .lk-meri[data-strings] .lk-meri__book[data-on]{display:block} #meri .lk-meri[data-strings] .lk-meri__book::before{content:none} #meri .lk-meri[data-strings] .lk-meri__book::after{inset:12px auto 12px 0;width:4px;border-radius:0 3px 3px 0;background:var(--meri)} #meri .lk-meri[data-strings] .lk-meri__leaf{display:none} #meri .lk-meri[data-strings] .lk-meri__line{margin:0 0 10px;color:var(--ink);font:italic 400 1.125rem/1.45 var(--font-display)} #meri .meri-quote{display:none;margin:16px 0 0;padding-top:14px;border-top:1px dashed color-mix(in srgb,var(--meri-ink) 35%,transparent)} #meri .meri-quote p{margin:0;color:var(--ink);font:italic 400 1.0625rem/1.5 var(--font-display)} #meri .meri-quote footer{margin-top:6px;color:var(--muted);font:600 .8125rem/1.3 var(--font-body)} @media (min-width:1024px){ #meri .lk-meri[data-strings] .lk-meri__row{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:48px;align-items:center} #meri .lk-meri[data-strings] .lk-meri__spine{min-height:72px} #meri .lk-meri[data-strings] .lk-meri__spine[data-l=m]{grid-row:1} #meri .lk-meri[data-strings] .lk-meri__spine[data-l=e]{grid-row:2} #meri .lk-meri[data-strings] .lk-meri__spine[data-l=r]{grid-row:3} #meri .lk-meri[data-strings] .lk-meri__spine[data-l=i]{grid-row:4} #meri .lk-meri[data-strings] .lk-meri__book{grid-column:2;grid-row:1/5;align-self:center;margin:0;padding:26px 30px} #meri .meri-quote{display:block} } @media (prefers-reduced-motion:no-preference){ #meri .lk-meri[data-strings] .lk-meri__spine[data-buzz]::after{animation:meri-buzz 420ms var(--ease-standard,cubic-bezier(.2,.7,.3,1))} #meri .lk-meri[data-strings] .lk-meri__spine:active b{scale:.94} #meri .lk-meri[data-strings] .lk-meri__spine b{transition:scale var(--dur-press) var(--ease-out)} @media (hover:hover){ #meri .lk-meri[data-strings] .lk-meri__spine:hover b{translate:0 -2px} } } @media (min-width:1024px){ .pairs__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:56px} .pairs-on .pairs__list{grid-template-columns:1fr;max-width:none;gap:0;padding:0;border-radius:0;background:none;box-shadow:none;counter-reset:pair} .pairs-on .pairs__list li{border-top:1px solid var(--line)} .pairs-on .pairs__list li:last-child{border-bottom:1px solid var(--line)} .pairs-on .pair{position:relative;display:grid;grid-template-columns:2.25rem auto minmax(28px,1fr) auto;align-items:baseline;gap:0 14px;min-height:92px;padding:22px 6px 20px 2px;border:0;border-radius:0;background:none;box-shadow:none;text-align:start;counter-increment:pair} .pairs-on .pair::before{content:counter(pair,decimal-leading-zero);grid-area:1/1;color:var(--muted);font:600 var(--fs-meta)/1 var(--font-body);font-variant-numeric:tabular-nums lining-nums} .pairs-on .pair::after{content:"";grid-area:1/3;align-self:center;height:3px;margin-top:.5em;background:radial-gradient(circle,var(--world-ink) 0 1.2px,transparent 1.6px) 0 50%/9px 3px repeat-x;opacity:.4;transform:scaleX(0);transform-origin:0 50%} .pairs-on .pair .pair__said{grid-area:1/2;display:flex;align-items:baseline;gap:12px;min-width:0} .pairs-on .pair .pair__said .pair__w{font:500 2.375rem/1.05 var(--font-display);letter-spacing:-.03em;color:var(--ink-2)} .pairs-on .pair .pair__said .pair__g{margin:0;font-size:var(--fs-meta)} .pairs-on .pair .pair__heard{grid-area:1/4;position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:nowrap;opacity:0;transform:translateX(-6px)} .pairs-on .pair .pair__heard .pair__w{font:italic 600 1.875rem/1.05 var(--font-display);letter-spacing:-.025em;color:var(--world-ink)} .pairs-on .pair .pair__heard .pair__g{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .pairs-on .pair[aria-expanded="true"]{background:none;box-shadow:none} .pairs-on .pair[aria-expanded="true"] .pair__said .pair__w{font-weight:600;color:var(--ink)} .pairs-on .pair[aria-expanded="true"]::before{color:var(--world-ink)} .pairs-on .pair[aria-expanded="true"]::after{transform:scaleX(1);opacity:.55} .pairs-on .pairs__grid:has(.scene[data-landed]) .pair[aria-expanded="true"] .pair__heard{opacity:1;transform:none} .pairs-on .pair:focus-visible{outline-offset:-2px;border-radius:10px} .pairs-on .pairs__list li:has(.pair[aria-expanded="true"]){border-color:var(--world-ink)} .pairs-on .pairs__list li:has(.pair[aria-expanded="true"])+li{border-top-color:var(--world-ink)} } @media (min-width:1024px) and (hover:hover) and (pointer:fine){ .pairs-on .pairs__list:hover .pair:not(:hover,[aria-expanded="true"]) .pair__said .pair__w{color:var(--muted)} .pairs-on .pair:not([aria-expanded="true"]):hover{background:none;translate:none} .pairs-on .pair:not([aria-expanded="true"]):hover::after{transform:scaleX(.35);opacity:.4} .pairs-on .pair:not([aria-expanded="true"]):hover .pair__said{translate:6px 0} } @media (min-width:1024px) and (prefers-reduced-motion:no-preference){ .pairs-on .pair::after{transition:transform 450ms var(--ease-settle),opacity 220ms var(--ease-out)} .pairs-on .pair .pair__heard{transition:opacity 220ms var(--ease-out),transform 450ms var(--ease-settle)} .pairs-on .pair .pair__said{transition:translate 220ms var(--ease-out)} .pairs-on .pair .pair__w{transition:color 200ms var(--ease-out)} } /* #start: фото Мері відповідає луною на дотик, але це прикраса, а не кнопка: без «руки»-курсора (функцій без клавіатури немає) */ #start .lk-finale__photo{cursor:auto} @media (min-width:1024px){ :root[data-theme="dark"].pairs-on .pairs__list,:root[data-theme="dark"].pairs-on .pair[aria-expanded="true"]{background:none;box-shadow:none} } @media (min-width:1024px) and (prefers-color-scheme:dark){ :root:not([data-theme="light"]).pairs-on .pairs__list,:root:not([data-theme="light"]).pairs-on .pair[aria-expanded="true"]{background:none;box-shadow:none} } /* #demo «Як проходять уроки» (власник 08.10: «на 7, можна сильно краще»). Телефон стоїть на своєму колі світу Вимови (як Мері на жовтому колі), на столі він більший; три кроки - одна доріжка: пройдені кроки позначені, лінія між ними доходить до поточного. Перемикання екрана - один такт «осідання» кола. Екрани, жести в склі, лайтбокс, наліпка й цитата - як були (Codex). */ #demo{overflow-x:clip} .lesson-on .step[data-done]:not([aria-selected="true"]) .beats__n{background:var(--world);box-shadow:inset 0 0 0 2px var(--world-ink);color:var(--world-ink)} @media (min-width:1024px){ .lesson__st{--st-left:calc(50% + 138px)} .demo__chat{right:calc(50% + 156px);bottom:110px} .lesson-on .beats{position:relative;gap:14px} .lesson-on .beats::before,.lesson-on .beats::after{content:"";position:absolute;z-index:0;left:21px;top:22px;bottom:22px;width:2px;border-radius:2px;background:var(--world-deep)} .lesson-on .beats::after{background:var(--world-ink);transform-origin:50% 0;transform:scaleY(var(--lp,0))} .lesson-on .beats__n{position:relative;z-index:1} .lesson-on .step .step__cap{font-size:1.3125rem} .lesson-on .step:not([aria-selected="true"]) .step__cap{color:var(--ink-2)} } @media (min-width:1024px) and (hover:hover) and (pointer:fine){ .lesson-on .step:not([aria-selected="true"]):hover .beats__n{background:var(--world-ink);color:var(--paper)} } @media (min-width:1024px) and (prefers-reduced-motion:no-preference){ .lesson-on .beats::after{transition:transform 450ms var(--ease-settle)} .lesson-on .beats__n{transition:background-color var(--dur-hover) var(--ease-out),color var(--dur-hover) var(--ease-out)} } .lk-foot__in.footer__inner{gap:14px} .lk-foot__place{margin-top:2px;color:var(--ink-2);font-size:1.0625rem} .lk-foot__help.footer__help{display:flex;flex-wrap:wrap;align-items:center;gap:0 18px} .footer__team{margin:0!important;color:var(--muted);font-size:var(--fs-meta)} .lk-foot__copy{padding-top:2px;border-top:0} @media (min-width:768px){ .lk-foot__in.footer__inner{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px 48px} .lk-foot__help.footer__help{justify-content:end} } /* /lf:pol-products */ /* lf:inside-f1 · #course (власник: «неплох! чутка дополировать»). CLS 0: картка модуля завжди 4 рядки по одному рядку тексту (3 теми + «і ще N»), назва в один рядок - висота не залежить від модуля. 360: лінійка 1-8 не ширша за екран (два ряди по 4, цілі 44 px із зазором 8 px). Стікер не наїжджає на підзаголовок. */ #course .course__open{contain:layout} #course .course__open-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #course .course__open-list li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.4em} #course .course__open-list .course__open-pad::before{content:none} @media (max-width:767px){ #course .course__units{margin-bottom:6px} #course .phrase{margin-top:30px} #course .course__modules,#course .course__module-list,#course .course__open,#course .ticks__chart{min-width:0;max-width:100%} } @media (max-width:375px){ #course .course__module-list{flex-wrap:wrap;gap:8px} #course .course__module-list>li{flex:1 1 calc(25% - 6px)!important;min-width:0} } /* /lf:inside-f1 */ /* lf:inside-f2 · власник 09.10: «модуль программы перегружен визуально, надо его пополам разбить в два блока». #layers «Не тільки звуки» (ґрунт світу) - фраза й шари, один рядок розбору на дотик; #course «Програма курсу» (папір) - доріжка 116 рисок і лінійка 8 модулів, картка модуля в один рядок, теми - розкриттям. CLS 0 в обох. */ .band--world{background:var(--world)} #layers .layers__title{max-width:16em;margin-bottom:clamp(16px,12px + 1vw,24px)} #layers .layers__title em{color:var(--world-ink)} #layers .phrase{margin:0;box-shadow:var(--sh-lift)} #layers .phrase__lens{margin-bottom:32px} .js #layers .phrase__lens[hidden]{display:flex!important;visibility:hidden} #layers .phrase__lens>button{min-height:44px} .phrase[data-live] .phrase__explain{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-top:12px} .phrase[data-live] .phrase__explain>span{grid-area:1/1;opacity:0;visibility:hidden} .phrase[data-live] .phrase__explain>span[data-for="link"]{display:flex;flex-wrap:wrap;column-gap:.35em} .phrase[data-live] .phrase__explain b{color:var(--world-ink)} @media (prefers-reduced-motion:no-preference){ .phrase[data-live] .phrase__explain>span{transition:opacity 220ms var(--ease-out,ease),visibility 0s 220ms} } @media (max-width:767px){ #layers{--section-y:40px} #layers .phrase{padding:14px 12px 16px} #layers .phrase__lens{margin-bottom:30px} #layers .phrase__line{font-size:1.875rem;line-height:1.9} #layers .an[data-tag]::before{font-size:.875rem} #layers .phrase__key{margin-top:6px} #layers .phrase__explain{font-size:1rem;line-height:1.45} } @media (min-width:1024px){ #layers{--section-y:48px} #layers .phrase{padding:28px clamp(24px,4vw,64px) 24px} #layers .phrase__lens{display:flex;margin:0 auto 34px;width:max-content} #layers .phrase__line{font-size:4.5rem;line-height:1.7} #layers .phrase__key{justify-content:center;margin-top:10px} #layers .phrase__explain{max-width:none;justify-items:center;text-align:center;font-size:1.0625rem} } #course .course__facts{max-width:none;font-size:var(--fs-body)} #course .ticks__cap{color:var(--muted)} .ticks-on #course .ticks__cap{display:none} #course :is(.course__module-name,.course__module-count){clip-path:inset(50%)} #course .course__open{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;max-width:none} #course .course__open-head{flex:1 1 0;min-width:0;margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px} #course .course__open-name{flex:none;max-width:100%} #course .course__open-meta{margin:0} #course .course__open-toggle{display:inline-flex;align-items:center;gap:4px;min-height:44px;margin:-6px -8px -6px 0;padding:0 8px;border:0;border-radius:var(--r-pill);background:none;color:var(--link);font:600 var(--fs-small)/1 var(--font-body);cursor:pointer;-webkit-tap-highlight-color:transparent} #course .course__open-toggle[hidden]{display:none} #course .course__open-toggle span{display:inline-block;transition:rotate 220ms var(--ease-out,ease)} #course .course__open-toggle[aria-expanded="true"] span{rotate:90deg} #course .course__open-toggle:focus-visible{outline:var(--focus-ring);outline-offset:2px} #course .course__open-list{flex:1 1 100%;margin-top:10px} #course .course__open-list li{white-space:normal;overflow:visible;text-overflow:clip} .js #course .course__open:not([data-more]) .course__open-list{display:none} @media (max-width:767px){ #course{--section-y:40px} #course .ticks__chart{grid-template-rows:calc(1.3em + 2*1.35em + 6px) 52px} #course .ticks__tip{align-content:start;overflow:hidden} #course .ticks__tip span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} #course .course__open{padding:8px 14px} } @media (min-width:1024px){ #course .ticks{grid-template-columns:minmax(0,1fr) 19rem;grid-template-areas:"chart open" "list open";align-items:end;column-gap:40px} #course .course__open{grid-area:open;align-self:end;display:flex;margin:0 0 4px;padding:16px 20px} #course .course__open-head{flex-direction:column;gap:2px} #course .course__open-list{grid-column:auto;grid-row:auto;grid-template-columns:minmax(0,1fr)} #course .course__open-toggle{align-self:flex-start;margin:4px 0 -10px -8px} } @supports (content-visibility:auto){ .js #layers{--cis:560px} .js #course{--cis:520px} @media (min-width:1024px){ .js #layers{--cis:520px} .js #course{--cis:460px} } } .js #layers,.js #course{--pre:0px} @media (min-width:1024px){ .js #layers,.js #course{--pre:0px} } /* /lf:recog-f1 */ /* lf:offers-f2 Вимова #price (оно, «заебись»): рекомендована «Хочу більше» не порожня - два правдиві рядки про ментора (FAQ «Хто перевірятиме мої записи?», «А якщо я знову закину…»); рядки-плюси однією гарнітурою; підписи формату на 360 - 13 px; на столі картка підіймається під курсором, натиск - scale(.98) */ #price .offer__list [data-add=main] strong,#price .offer__list strong{font:700 var(--fs-ui,.9375rem)/1.4 var(--font-body);letter-spacing:0;color:var(--world-ink)} #price .offer__path--mentor{margin-top:12px;padding-top:10px;border-top:1px dashed var(--world-line,var(--line));color:var(--ink);font-size:.875rem} @media (max-width:374px){ .price__formats a{font-size:.8125rem} } @media (hover:hover) and (min-width:1024px) and (prefers-reduced-motion:no-preference){ #price .offers .offer{transition:translate 220ms var(--ease-out,ease)} #price .offers .offer:hover{translate:0 -3px} #price .offers .offer:active{scale:.98} } /* /lf:offers-f2 */ /* lf:mary-f2 · #mary: текст цитати - --ink-2, виділення «американський акцент…» - чорнилом на підсвітці світу (контраст ≥ 4.5:1). */ .life__full{color:var(--ink-2)} .life__full .life__hl{color:var(--ink)} /* /lf:mary-f2 */ /* lf:media-f2 · #demo: перемикання кроків 1-3 - екран телефона змінюється помітним переходом 220 мс (зсув 12 px + opacity); лайтбокса на екрані немає, дотик оживляє крок (js/v3.js mountLesson). Reduce - миттєво. */ #demo .scr__open:focus-visible{outline:var(--focus-ring);outline-offset:-3px} /* lf:inside-f3 · #course (власник 09.10: «Программа курса… малоинформативная. справа нихуя нет. Модули должны быть справа и должны быть красивыми»). Ліворуч - доріжка 116 мікроуроків і лінійка; праворуч - стос із восьми зошитів-модулів світу Вимови: номер Literata, назва одною мовою (англійський оригінал - у title), відеоуроки й мікроуроки, власні риски модуля; відкритий зошит висувається зі стосу і показує звуки й перші теми з програми (lessons.js). Відкритий завжди один - висота стала, CLS 0. */ #course .course__grid{display:grid;gap:24px} #course .course__way{min-width:0} #course .course__books{display:grid;gap:6px;margin:0;padding:0 0 4px;list-style:none} #course .cbook{position:relative;min-width:0;border-radius:4px 14px 14px 4px;background:var(--world);box-shadow:inset 6px 0 0 var(--world-ink),0 1px 0 var(--world-line),0 3px 0 -1px var(--raised),0 4px 0 -1px var(--world-line);rotate:-.25deg} #course .cbook:nth-child(even){rotate:.3deg;translate:3px 0} #course .cbook::before{content:"";position:absolute;left:13px;top:9px;bottom:9px;border-left:1.5px dashed color-mix(in srgb,var(--world-ink) 40%,transparent);pointer-events:none} #course .cbook__h{margin:0;font:inherit} #course .cbook__head{display:grid;grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"n name bars" "n meta bars";align-items:center;column-gap:12px;width:100%;min-height:58px;padding:8px 14px 8px 24px;border:0;border-radius:inherit;background:none;color:var(--ink);font:inherit;text-align:start;cursor:pointer;-webkit-tap-highlight-color:transparent} #course .cbook__head:focus-visible{outline:var(--focus-ring);outline-offset:2px} #course .cbook__n{grid-area:n;color:var(--world-ink);font:500 2rem/1 var(--font-display);letter-spacing:-.03em;font-variant-numeric:lining-nums tabular-nums;text-align:center} #course .cbook__name{grid-area:name;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:600 1rem/1.3 var(--font-body)} #course .cbook__meta{grid-area:meta;color:var(--ink-2);font:500 .8125rem/1.35 var(--font-body);font-variant-numeric:tabular-nums} #course .cbook__bars{grid-area:bars;width:64px;height:28px;overflow:visible} #course .cbook__bars path{fill:none;stroke:var(--world-ink);stroke-width:2.2;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.45} #course .cbook__body{padding:0 16px 14px 76px} .js #course .cbook:not([data-open]) .cbook__body{display:none} #course .cbook__tags{margin:0 0 8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--world-ink);font:700 .8125rem/1.35 var(--font-body);letter-spacing:.02em} #course .cbook__topics{display:grid;gap:4px;margin:0;padding:0;list-style:none} #course .cbook__topics li{position:relative;min-height:1.4em;padding-left:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--ink);font:500 .9375rem/1.4 var(--font-body)} #course .cbook__topics li::before{content:"";position:absolute;left:1px;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--world-accent)} #course .cbook__topics .cbook__more{color:var(--muted)} #course .cbook__topics .cbook__more::before{background:none;box-shadow:inset 0 0 0 1.5px var(--world-accent)} #course .cbook[data-open]{z-index:1;background:var(--raised);box-shadow:inset 6px 0 0 var(--world-ink),0 1px 2px rgb(39 46 42/8%),0 10px 24px rgb(39 46 42/10%);rotate:0deg;translate:-8px -2px} #course .cbook[data-open] .cbook__bars path{opacity:1} #course .cbook[data-open] .cbook__n{font-size:2.5rem} #course .ticks__tip::after{content:"";position:absolute;left:var(--tail,24px);bottom:-5px;width:10px;height:10px;border-radius:2px;background:inherit;rotate:45deg;translate:-50% 0} #course .course__module-n{font-size:.8125rem} @media (prefers-reduced-motion:no-preference){ #course .cbook{transition:translate 220ms cubic-bezier(.2,.7,.3,1),rotate 220ms cubic-bezier(.2,.7,.3,1),background-color 220ms} #course .cbook__head:active{scale:.99} #course .ticks__chart[data-glide] :is(.ticks__head,.ticks__tip){transition:transform 280ms cubic-bezier(.2,.7,.3,1)} } @media (hover:hover) and (pointer:fine){ #course .cbook:not([data-open]):hover{translate:-4px 0;rotate:0deg} #course .cbook:not([data-open]):hover .cbook__bars path{opacity:.8} } @media (max-width:767px){ #course .course__grid{gap:18px} /* full-3 integration (path-check: сегменти 1, 3, 7 були 19-42 px на 393): кожен сегмент - ціль ≥ 44 px (ширину пропорційно числу мікроуроків ставить v3.js), ряд вміщається з зазором 1 px; ≤ 375 - сегменти переносяться у другий ряд */ #course .course__module-list{flex-wrap:nowrap;gap:1px} #course .course__module-list>li{min-width:44px} #course .course__module{padding:9px 0 2px} #course .course__module-n,#course .course__module[aria-current="true"] .course__module-n{font-size:.75rem} #course .cbook__head{min-height:54px;padding:6px 12px 6px 22px;column-gap:10px;grid-template-columns:34px minmax(0,1fr) auto} #course .cbook__n{font-size:1.75rem} #course .cbook[data-open] .cbook__n{font-size:2rem} #course .cbook__bars{width:48px;height:24px} #course .cbook__body{padding:0 12px 12px 66px} #course .cbook[data-open]{translate:0 -2px} #course .cbook:nth-child(even){translate:2px 0} } @media (max-width:375px){#course .course__module-list{flex-wrap:wrap;gap:8px}} @media (min-width:1024px){ #course .course__grid{grid-template-columns:minmax(0,1fr) minmax(0,26rem);column-gap:clamp(40px,4.5vw,72px);align-items:stretch} #course .course__way{display:flex;flex-direction:column;padding-top:8px} #course .course__way>.ticks{margin-top:auto;padding-top:24px} #course .course__way .ticks__svg{height:clamp(140px,10vw + 40px,200px)} #course .ticks{grid-template-columns:minmax(0,1fr);grid-template-areas:"chart" "list"} #course .course__books{gap:7px} } /* /lf:inside-f3 */ /* lf:offers-f3 #price (оно, «заебись»; full2 owner.eye 8.5, interaction.touch 8). Справжня прокрутка (scrollIntoView + 2,6 с) на 1440 показує всі три квитки повністю видимими - бліді бокові були артефактом --full (f2). Тут лише вёрстка: абзац PR-T-09 (слова Маші, без змін) - одна компактна колонка 14 px під квитками, «Спробувати перші уроки ›» поруч праворуч; на телефоні квиток не ховається під шапкою-доком (scroll-margin). */ #price .offers .offer,#price{scroll-margin-top:calc(var(--head-h,64px) + 16px)} #price .closed__text{font-size:.875rem;line-height:1.5} #price .closed__hint{font-size:.8125rem} @media (min-width:1024px){ #price .price__closed{display:grid;grid-template-columns:minmax(0,40rem) auto;column-gap:40px;align-items:center;max-width:none;margin-top:20px} #price .price__closed>:not(.closed__try){grid-column:1} #price .price__closed>.closed__try{grid-column:2;grid-row:1/span 2;margin:0;justify-self:start}} /* /lf:offers-f3 */ /* lf:mary-f3 · #mary: лінія таймлайну дорисовується чорнилом світу до вибраної вехи (v3.js mountLife, stroke-dashoffset 220 мс). */ .life__ink{position:absolute;left:0;top:10px;bottom:10px;width:24px;height:calc(100% - 20px);overflow:visible;fill:none;stroke:var(--world-ink);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;pointer-events:none} /* /lf:mary-f3 */ /* lf:inside-f4 · #course (власник f2: yes; аудит full3: «зошити читаються як рядки списку», «на 393 назви з „…“», «на 360 лінійка 6 + 2», «на 1440 над доріжкою 150 px порожньо», «вхід стоїть»). Той самий стос і та сама доріжка, дополіровано: зошит - предмет: корінець чорнилом світу з прострочкою, обріз сторінок знизу (тим товщий, чим більше мікроуроків), розкид ±0,6° і ±5 px; відкритий - розворот: ліворуч обкладинка з номером, праворуч сторінка в лінійку з темами; уночі - своя обкладинка. Назви й теми без «…» (два рядки). Лінійка на 360 - один ряд (ціль - висота смуги 44 px). На столі доріжка ближче до підзаголовка і вища. Вхід у 2 такти: риски виростають зліва направо (560 мс), потім лінза сідає на модуль 1 і зошит розгортається (+120 мс). */ #course .cbook{--edge:calc(2px + var(--c,12) * .14px);--cover:var(--world);margin-bottom:var(--edge); background:linear-gradient(90deg,color-mix(in oklab,var(--world-ink) 80%,var(--ink-press)) 0 2px,var(--world-ink) 2px 8px,color-mix(in oklab,var(--world-ink) 55%,var(--cover)) 8px 9px,transparent 9px),var(--cover); box-shadow:0 1px 0 var(--world-line),0 2px 3px -1px color-mix(in srgb,var(--ink-press) 14%,transparent)} #course .cbook::after{content:"";position:absolute;left:10px;right:6px;bottom:calc(-1 * var(--edge));height:var(--edge);border-radius:0 0 8px 2px;pointer-events:none; background:repeating-linear-gradient(180deg,var(--raised) 0 1px,color-mix(in srgb,var(--world-line) 90%,var(--ink-2)) 1px 2px);box-shadow:0 2px 3px -2px color-mix(in srgb,var(--ink-press) 30%,transparent)} #course .cbook::before{left:14px;border-left-color:color-mix(in srgb,var(--world-ink) 34%,transparent)} #course .cbook:nth-child(4n+1){rotate:-.5deg;translate:0 0} #course .cbook:nth-child(4n+2){rotate:.6deg;translate:5px 0} #course .cbook:nth-child(4n+3){rotate:-.3deg;translate:-3px 0} #course .cbook:nth-child(4n){rotate:.4deg;translate:3px 0} #course .cbook__n{font-size:1.75rem} /* відкритий зошит - розворот: обкладинка з номером ліворуч, згин, сторінка в лінійку */ #course .cbook[data-open]{rotate:0deg;translate:-8px -4px; background:linear-gradient(90deg,color-mix(in oklab,var(--world-ink) 80%,var(--ink-press)) 0 2px,var(--world-ink) 2px 8px,var(--cover) 8px 66px,color-mix(in srgb,var(--ink-press) 16%,transparent) 66px,transparent 76px),var(--raised); box-shadow:0 1px 2px rgb(39 46 42/8%),0 14px 28px -10px rgb(39 46 42/22%)} #course .cbook[data-open]::before{display:none} #course .cbook[data-open] .cbook__n{font-size:2.5rem} #course .cbook[data-open] .cbook__body{background:repeating-linear-gradient(180deg,transparent 0 24px,color-mix(in srgb,var(--world-ink) 16%,transparent) 24px 25px) 0 22px/100% calc(100% - 22px) no-repeat} #course .cbook__topics{gap:0} #course .cbook__topics li{min-height:25px;line-height:25px} #course .cbook__topics li::before{top:9px} /* без «…»: назва й теми переносяться на другий рядок */ #course :is(.cbook__name,.cbook__tags,.cbook__topics li){overflow:visible;white-space:normal;text-overflow:clip;text-wrap:pretty} #course .cbook__name{line-height:1.25} #course .cbook__topics li{line-height:1.35;padding-block:3px 2px} @media (prefers-color-scheme:dark){:root:not([data-theme=light]) #course .cbook{--cover:color-mix(in oklab,var(--world-ink) 30%,var(--raised))}} :root[data-theme=dark] #course .cbook{--cover:color-mix(in oklab,var(--world-ink) 30%,var(--raised))} @media (max-width:767px){#course .cbook:not([data-open]) .cbook__head{min-height:48px;padding-block:4px}} /* integration-4 (path-check, DESIGN §8 «цілі ≥ 44 × 44 на телефоні»): вісім сегментів по 44 px у 300-328 px ряду не стають (на 360 виходило 30-39 px). На ≤ 375 - дві рівні четвірки, як у inside f1; від 376 лінійка знову одна, пропорційна. Сітка, а не flex: v3.js ставить сегментам пропорційний inline flex !important, у сітці він не діє. */ @media (max-width:375px){ #course .course__module-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} #course .course__module-list>li{min-width:44px} #course .course__module{min-height:44px} } @media (min-width:1024px){ #course .course__way>.ticks{margin-top:32px;padding-top:0} #course .course__way .ticks__svg{height:clamp(200px,14vw + 40px,260px)} } @media (prefers-reduced-motion:no-preference){ #course .ticks__bars.rv-arc{animation:none} #course .ticks__chart:is([data-armed],[data-play]) .ticks__bars{stroke-dasharray:1;vector-effect:none} #course .ticks__chart[data-armed] .ticks__bars{stroke-dashoffset:1} #course .ticks__chart[data-armed] :is(.ticks__head,.ticks__tip,.ticks__lens,.ticks__mod){opacity:0} #course .ticks__chart[data-play] .ticks__bars{animation:ticks-grow 560ms cubic-bezier(.3,.6,.35,1) both} #course .ticks__chart[data-play] :is(.ticks__head,.ticks__tip,.ticks__lens,.ticks__mod){animation:ticks-land 220ms cubic-bezier(.2,.7,.3,1) 600ms both} @keyframes ticks-grow{from{stroke-dashoffset:1}to{stroke-dashoffset:0}} @keyframes ticks-land{from{opacity:0}to{opacity:1}} } /* /lf:inside-f4 */ /* lf:inside-f4 · #layers (аудит full3: «біла картка беднее всех рядом со струной», «вхід ~4,5 с, вкладки самі перемикаються», «на 393 в „Усе“ немає підписів і дуг, зазор 40 px»). Без білої картки: фраза крупно прямо на ґрунті світу, kit-сегменти над нею. Вхід ≤ 1,2 с: звук › наголос › ритм › зв'язки кроком 150 мс, один раз, коли фраза в кадрі (без прокрутного скрабу на 14 анімацій), автопоказу вкладок немає. Шари відповідають дотику: «Звук» - Sh розкривається в /ʃ/, «Ритм» - долі по черзі пульсують, «Зв'язки» - дуги промальовуються (transform 220 мс). Запису цієї фрази в репозиторії немає - кнопки ▶ немає, нічого не вигадано. */ #layers .phrase{background:none;box-shadow:none;padding-inline:0} #layers .phrase.lk-grain::before,#layers .phrase.lk-grain::after{content:none} #layers .phrase__lens{box-shadow:0 1px 2px rgb(39 46 42/6%)} @media (max-width:599px){ #layers .phrase__line{line-height:1.72} #layers .an[data-tag]::before{font-size:.8125rem} /* фраза тепер у рядок на ґрунті (без картки): «наголос» - над своїм словом, як на столі, а не праворуч за краєм екрана */ #layers .an--stress[data-tag]::before{left:50%;top:auto;bottom:calc(100% - .32em);margin-top:0} } /* «Звук»: Sh - транскрипція /ʃ/ */ #layers .phrase[data-lens="sound"] .an--sound:not(.phrase__held):not(.phrase__flap)[data-tag]::before{content:"/ʃ/";font-style:normal;letter-spacing:.02em} /* без прокрутного скрабу: один вхід за часом */ #layers .phrase[data-lens="all"] :is(.an,.beat)::after,#layers .phrase[data-lens="all"] :is(.an[data-tag],.beat)::before{animation-timeline:auto} @media (prefers-reduced-motion:no-preference){ .js #layers .phrase:not(.is-in)[data-lens="all"] .an::after,.js #layers .phrase:not(.is-in)[data-lens="all"] .an[data-tag]::before,.js #layers .phrase:not(.is-in)[data-lens="all"] .beat::before,.js #layers .phrase:not(.is-in)[data-lens="all"] .an--sound>.beat:first-child::after{opacity:0} #layers .phrase.is-in[data-lens="all"] .an::after{animation:an-in 300ms var(--ease-out) calc(var(--i) * 150ms) backwards;animation-timeline:auto} #layers .phrase.is-in[data-lens="all"] .an--sound>.beat:first-child::after{animation:an-in 300ms var(--ease-out) 0ms backwards;animation-timeline:auto} #layers .phrase.is-in[data-lens="all"] .an[data-tag]::before{animation:an-tag 300ms var(--ease-out) calc(80ms + var(--i) * 150ms) backwards;animation-timeline:auto} #layers .phrase.is-in[data-lens="all"] .beat::before{animation:an-in 300ms var(--ease-out) 300ms backwards;animation-timeline:auto} #layers .phrase[data-lens="rhythm"] .beat--on::before{animation:beat-pulse 300ms var(--ease-out) calc(var(--b,0) * 150ms) both} #layers .phrase[data-lens="link"] .an--link::after{transform-origin:0 50%;animation:link-draw 220ms var(--ease-out) both} #layers .phrase[data-lens="sound"] .an--sound[data-tag]::before{animation:an-tag 220ms var(--ease-out) both} @keyframes beat-pulse{0%{scale:1}45%{scale:1.7}100%{scale:1}} @keyframes link-draw{from{transform:scaleX(0)}to{transform:none}} } /* /lf:inside-f4 */ /* lf:offers-f4 #price (оно, f2 yes; r2 «заебись»; full3 owner.eye 8.5). На столі обраний квиток - посередині, бокові на 8 % менші (від низу корінця, назва й ціна повним чорнилом, ≥ 3 : 1), дотик чи фокус бокового ставить його в центр (js/v3.js, FLIP translate 280 мс). Абзац PR-T-09 - слова канону без змін (тест і правило «авторські рядки не чіпати»), але одним тихим блоком 14 px: текст, «Відкриється бот школи в Telegram» і «Спробувати перші уроки ›» - одним потоком. */ @media (min-width:1024px){ #price .offers[data-js]{align-items:end} #price .offers[data-js] .offer{transform-origin:50% 100%} #price .offers[data-js] .offer:not([data-on]){scale:.92} #price .offers[data-js] .offer:not([data-on]) :is(h3,.offer__price){color:var(--ink)}} @media (prefers-reduced-motion:no-preference) and (min-width:1024px){#price .offers[data-js] .offer{transition:scale 280ms var(--ease-out,ease),translate 220ms var(--ease-out,ease)}} #price .price__closed[data-sale-off]:not([hidden]){display:block;max-width:58rem;margin-top:18px;color:var(--ink-2);font:500 .875rem/1.55 var(--font-body)} #price .price__closed :is(.closed__text,.closed__hint,.closed__try){display:inline;margin:0;color:inherit;font:inherit} #price .price__closed .closed__hint::before{content:" "} #price .price__closed .closed__try{margin-left:12px;white-space:nowrap} #price .price__closed .closed__try .lk-link{display:inline;min-height:0;font-size:.9375rem;font-weight:600} @media (max-width:767px){#price .price__closed .closed__try{display:block;margin:2px 0 0}#price .price__closed .closed__try .lk-link{display:inline-flex;align-items:center;min-height:44px}} /* /lf:offers-f4 */ /* lf:mary-f4 · #meri (оно, «Хорошо!», «гуд», «норм»; аудит full3: «біла картка з рожевою смугою на 2/3 порожня»). Картка - папір світу з корінцем кольору букви (як книжки полиці MERI на головній), нахил 1,2°, тінь e1, висота за змістом. На столі струни букв ідуть до 60 % колонки й сходяться до картки, струна відкритої букви входить у картку хвилею до мікрофона (v3.js mountMeriWires). */ #meri .lk-meri[data-strings] .lk-meri__book{--grain-dot:color-mix(in srgb,var(--meri-ink) 9%,transparent); background:radial-gradient(circle at 30% 40%,var(--grain-dot) 0 .6px,transparent 1px) 0 0/5px 5px,linear-gradient(180deg,color-mix(in oklab,var(--world) 60%,var(--raised)),var(--world)); border-radius:3px var(--r-card) var(--r-card) 3px;box-shadow:var(--sh-paper);padding-left:30px} #meri .lk-meri[data-strings] .lk-meri__book::after{inset:0 auto 0 0;width:14px;border-radius:3px 0 0 3px; background:linear-gradient(180deg,transparent 14px,color-mix(in srgb,var(--meri-ink) 34%,transparent) 14px 16px,transparent 16px 19px,color-mix(in srgb,var(--meri-ink) 34%,transparent) 19px 20px,transparent 20px calc(100% - 20px),color-mix(in srgb,var(--meri-ink) 34%,transparent) calc(100% - 20px) calc(100% - 18px),transparent calc(100% - 18px)), linear-gradient(90deg,color-mix(in oklab,var(--meri) 80%,var(--meri-ink)),var(--meri) 30%,color-mix(in oklab,var(--meri) 70%,var(--raised)) 55%,var(--meri) 80%,color-mix(in oklab,var(--meri) 82%,var(--meri-ink)))} #meri .lk-meri[data-strings] .lk-meri__line{color:var(--ink)} #meri .meri-wires{display:none;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2} #meri .meri-wire{fill:none;stroke:var(--meri-ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.42} #meri .meri-wire[data-on]{stroke-width:2.5;opacity:1} #meri .meri-mic{fill:none;stroke:var(--meri-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} #meri .meri-mic rect{fill:color-mix(in oklab,var(--meri) 70%,var(--raised))} #meri .meri-mic__grill{stroke-width:1.2;opacity:.7} @media (min-width:1024px){ #meri .lk-meri[data-strings] .lk-meri__row{position:relative} #meri .meri-wires{display:block} #meri .lk-meri[data-strings][data-wires] .lk-meri__spine::after{opacity:0} #meri .lk-meri[data-strings][data-wires] .lk-meri__spine[aria-expanded=true]{background:color-mix(in srgb,var(--meri) 22%,transparent)} #meri .lk-meri[data-strings] .lk-meri__book{max-width:none;padding:14px 22px 14px 80px;rotate:-1.2deg;transform-origin:0 50%} #meri .lk-meri[data-strings] .lk-meri__line{margin-bottom:6px;font-size:1.0625rem;line-height:1.35} #meri .lk-meri[data-strings] .lk-meri__feel{margin-bottom:2px} #meri .lk-meri[data-strings] .lk-meri__book>p:not([class]){font-size:.9375rem;line-height:1.45} #meri .meri-quote{margin-top:8px;padding-top:6px} #meri .meri-quote p{display:inline;font-size:.9375rem;line-height:1.45} #meri .meri-quote footer{display:inline;margin:0 0 0 .4em} #meri .meri-quote footer::before{content:"- "} } @media (max-width:1023px){ #meri .lk-meri[data-strings] .lk-meri__book{rotate:-.6deg;padding-left:30px} } /* /lf:mary-f4 */ /* lf:media-f4 · #demo (власник «заебись», телефон - еталон, рамку не чіпаємо). Крок 1 - справжній кадр мікроуроку з Мері, крок 2 - хвиля повторення на весь екран (камера переїхала в крок 1, без повтору кадру); екрани - справжні