@font-face{font-family:Mulish;src:url('/cards/assets/mulish-900.woff2?v=38cabfccde');font-weight:900;font-display:swap}
@font-face{font-family:Nunito;src:url('/cards/assets/nunito-400.woff2?v=54c9bffd6e');font-weight:400;font-display:swap}
@font-face{font-family:Nunito;src:url('/cards/assets/nunito-700.woff2?v=5fb1d80c10');font-weight:700;font-display:swap}
@font-face{font-family:Nunito;src:url('/cards/assets/nunito-800.woff2?v=0b6d53ddd9');font-weight:800;font-display:swap}
:root{color-scheme:light;--blue:#4120f8;--ink:#191920;--muted:#5a5a6b;--line:#dfe2ee;--tint:#f1f4ff;--paper:#fbfaf7;--ef-w:min(300px,calc(100vw - 72px))}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 Nunito,system-ui,sans-serif;overflow-x:hidden}
h1,h2{font-family:Mulish,Nunito,sans-serif;font-weight:900;letter-spacing:-.025em;text-wrap:balance}
h1{font-size:clamp(36px,9.5vw,60px);line-height:1.06;margin:0 0 14px}
h2{font-size:clamp(26px,6.6vw,36px);line-height:1.14;margin:0 0 14px}
h3{font-size:17px;line-height:1.3;font-weight:800;margin:0 0 4px}
p{margin:0 0 14px}
a{color:inherit;text-underline-offset:4px}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #8f7dff;outline-offset:3px}
a,summary,button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
strong{font-weight:800}
.wrap{max-width:680px;margin:0 auto;padding:0 20px}
.lead{font-size:18px;color:var(--ink)}

.cta{display:inline-flex;align-items:center;justify-content:center;min-height:56px;min-width:220px;padding:14px 32px;border-radius:28px;background:var(--blue);color:#fff;font-weight:800;font-size:19px;text-decoration:none}
.cta:active{transform:scale(.98)}
.ghost{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:12px 26px;border-radius:25px;border:2px solid var(--ink);font-weight:800;text-decoration:none}
.more{display:inline-block;min-height:44px;padding:10px 0;font-weight:800}

.top{position:absolute;inset:var(--sat,0px) 0 auto;z-index:2;display:flex;align-items:center;justify-content:space-between;max-width:1080px;margin:0 auto;padding:10px 20px}
.brand{display:flex;min-height:44px;align-items:center}
.brand img{display:block;width:78px;height:auto}
.top-play,body:has(.page) .top-login{display:none}
.top-login{display:flex;align-items:center;min-height:44px;padding:0 18px;border-radius:22px;background:rgba(255,255,255,.16);color:#fff;font-weight:800;text-decoration:none}
body:has(.page) .top-play{display:flex;align-items:center;min-height:44px;padding:0 4px;color:#fff;font-weight:800;text-decoration:none}

/* Перший екран = екран гри, лише тло синє (Влад 31.10.2026). Віяло й плашка — із flash-landing-hero.css; тут тільки те, що на синьому має бути інакше. */
.hero2{--ios-glass-fill:rgba(255,255,255,.14);--ios-glass-fill-pressed:rgba(255,255,255,.24);position:relative;display:flex;flex-direction:column;--wave-h:clamp(30px,6vw,52px);height:calc(100vh + var(--wave-h));height:calc(min(var(--hero-vh,100svh),100svh) + var(--wave-h));min-height:calc(620px + var(--wave-h));max-height:calc(980px + var(--wave-h));padding:calc(72px + var(--sat,0px)) max(20px,calc(50% - 220px)) calc(var(--wave-h) + 18px);color:#fff;text-align:center;background:linear-gradient(180deg,#5b3bff 0%,#4120f8 42%,#2810b4 100%);overflow:hidden}
.hero2 h1{flex:none;margin:0;font:800 clamp(28px,8.2vw,36px)/1.08 Nunito,system-ui,sans-serif;letter-spacing:-.03em}
.hero2 h1 span{display:block}
.hero2 .welcome-hero{position:relative;flex:1;min-height:0;margin:14px -20px 0;perspective:1200px}
.hero2 .ww-name p{color:rgba(255,255,255,.84)}
.hero2 .wf-glow{background:radial-gradient(closest-side,rgba(255,255,255,.24),rgba(255,255,255,.06) 55%,transparent)}
.hero2 .ww-arrow{background:rgba(255,255,255,.16);color:#fff}
.hero2 .ww-dots button{background:rgba(255,255,255,.14);color:#fff}
.hero2 .ww-dots button[aria-selected=true]{background:#fff;color:var(--c);box-shadow:0 0 0 3px rgba(255,255,255,.3)}
.hero2 .first-game{flex:none;margin-top:18px;text-align:left;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24)}
.hero2 .cta.is-channel{gap:10px;padding-left:12px;padding-right:12px;font-size:clamp(16px,4.7vw,20px)}
.hero-short a{display:inline-block;margin:-10px 0;padding:10px 14px;color:#fff;font-size:15px;font-weight:700;text-underline-offset:3px}
.hero2 .hero-short{display:block;text-align:center}
/* Розкладка першого екрана однакова в усіх предметах. Висота кнопки стала, щоб картка й плашка не зсувались. */
.hero2 .cta{height:56px;min-height:0;padding-top:0;padding-bottom:0}
.hero2 .fg-icon{background:rgba(255,255,255,.18);color:#fff}
.hero2 .fg-text small{color:rgba(255,255,255,.84)}
.hero2 .fg-count,.hero2 .first-game.is-soon .fg-count{background:rgba(255,255,255,.18);color:#fff}
.hero2 .ww-stage{touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:pointer}
.hero2 .ww-stage img{-webkit-user-drag:none;pointer-events:none}
.hero2 .wf .ef-bhead{display:flex}
.hero2 .wf .ef-xp{display:flex}
.hero2 .wf .ef-star{display:none}
.hero2 .wf-card{outline:0}
.hero2 .wf-card:focus-visible .wf-face{outline:3px solid #fff;outline-offset:2px}
/* Гортання — карусель по колу: положення задає скрипт, анімуються лише transform і opacity. */
.hero2 .wf-cards{perspective:none;transform-style:flat}
.hero2 .wf-card{transform-style:flat;will-change:transform,opacity;transition:transform .72s cubic-bezier(.22,1,.36,1),opacity .45s ease}
.hero2 .wf-cards.dragging .wf-card,.hero2 .wf-cards.still .wf-card,.hero2 .wf-cards.dragging .wf-float::after,.hero2 .wf-cards.still .wf-float::after{transition:none}
/* Паріння окремим шаром: не сперечається ні з каруселлю, ні з переворотом і не зупиняється, тому не смикається при зміні місця. */
.wf-float{position:absolute;inset:0;will-change:transform;animation:fan-float 3.4s ease-in-out infinite alternate}
.hero2 .wf-card:nth-child(2) .wf-float{animation-duration:4.2s;animation-delay:-1.3s}
.hero2 .wf-card:nth-child(3) .wf-float{animation-duration:3.8s;animation-delay:-2.6s}
.hero2 .wf-card:nth-child(4) .wf-float{animation-duration:4s;animation-delay:-.7s}
@keyframes fan-float{to{transform:translateY(-8px) rotate(.5deg)}}
.hero2 .wf-card::after{display:none}
.wf-float::after{content:"";position:absolute;inset:0;z-index:2;border-radius:calc(var(--cw,200px)*30/344);background:#0c0b11;opacity:var(--dim,0);pointer-events:none;transition:opacity .5s ease}
.hero2 .wf-face{backface-visibility:visible;-webkit-backface-visibility:visible;box-shadow:0 10px 22px rgba(10,21,77,.34)}
/* Переворот рівний: 90° припадає рівно на половину часу, і саме тоді змінюється сторона, тому дзеркальних кадрів немає. */
.hero2 .wf-flip{transform-style:flat;will-change:transform;transform:perspective(900px) rotateY(0deg);transition:transform .5s cubic-bezier(.45,.05,.55,.95)}
.hero2 .wf-card.is-flipped .wf-flip{transform:perspective(900px) rotateY(180deg)}
.hero2 .wf-face.ef-back{visibility:hidden;transition:visibility 0s linear .25s}
.hero2 .wf-card.is-flipped .wf-face.ef-back{visibility:visible}
.hero2 .wf-face.ef-front{visibility:visible;transition:visibility 0s linear .25s}
.hero2 .wf-card.is-flipped .wf-face.ef-front{visibility:hidden}
.hero2 .wf-card:not([data-slot="0"]){pointer-events:none}
.hero2 .wf-card.is-flipped .ef-front,.hero2 .wf-card:not(.is-flipped) .ef-back{pointer-events:none}
/* Пояснення на всю картку. */
.hero2 .ef-xp-body{display:none}
.fan-explain{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;padding:calc(var(--u)*20) calc(var(--u)*20) 0;background:#fff;color:var(--ink);text-align:left;cursor:default;visibility:hidden;opacity:0;pointer-events:none;will-change:opacity;transition:opacity .18s ease,visibility 0s linear .18s}
.fan-explain.is-open{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .24s ease,visibility 0s}
.fan-explain-x{position:absolute;top:calc(var(--u)*29 - 22px);right:calc(var(--u)*20 - 12px);display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;padding:0;background:none;color:var(--ink);cursor:pointer}
.fan-explain-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:calc(var(--u)*14) 0 calc(var(--u)*20);font-size:14px;line-height:1.45;font-weight:600;user-select:text;-webkit-user-select:text;will-change:transform;transform:translateY(6px);transition:transform .18s ease}
.fan-explain.is-open .fan-explain-body{transform:none;transition:transform .32s cubic-bezier(.22,1,.36,1)}
.fan-explain-body p{margin:0 0 8px}
/* Кружечки предметів стоять на місці: без пружинного збільшення під пальцем, вибір змінюється одразу. */
.hero2 .ww-dots button:not(#_),.hero2 .ww-dots button:not(#_):not(:disabled):active{transition:none;scale:none;transform:none;touch-action:manipulation}
.hero2 .ww-dots button svg,.hero2 .ww-dots button .glyph{transition:none}
.hero2 .ww-dots{min-height:60px}
.hero2 .ww-arrow{z-index:20}
.fan-end{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:16px;color:var(--ink);text-align:center}
.fan-end b{font:900 calc(var(--cw,200px)*.2)/1.05 Mulish,Nunito,sans-serif;letter-spacing:-.03em}
.fan-end span{font-weight:800;font-size:calc(var(--cw,200px)*.085)}
.hero2 .wf-card:not([data-slot="0"]) .fan-end>*{visibility:hidden}
.hero2 .wf-card[data-end]{cursor:default}
.wf-cards .live-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);--ef-w:200px}
.hero-short{display:none;flex:none;margin:6px 0 0;font-size:14px;line-height:1.2}
/* На реальній висоті телефона (Safari ~664) плашка з’їдала картку, з якою тут треба взаємодіяти: її зміст — рядком під кнопкою.
   Низький екран вирішується раз, за висотою вікна при відкритті (клас hero-low і --hero-vh ставить flash-landing-boot.js), а не @media(max-height):
   у Safari й Telegram висота вікна змінюється, коли під час гортання ховаються панелі, і плашка то з’являлась, то зникала (Влад 02.11.2026). */
:where(html.hero-low) .hero2{min-height:calc(600px + var(--wave-h));padding-top:calc(62px + var(--sat,0px))}:where(html.hero-low) .hero2 h1{font-size:clamp(25px,7.2vw,30px)}:where(html.hero-low) .hero2 .first-game{display:none}:where(html.hero-low) .hero-short{display:block}:where(html.hero-low) .hero2 .welcome-hero{margin-top:6px}:where(html.hero-low) .hero2 .ww-dots{min-height:52px;padding-top:6px}
/* Комп’ютер: перший екран не займає всю висоту, під ним видно наступний блок. */
@media(min-width:1024px){.hero2{height:calc(min(100vh,800px) + var(--wave-h));height:calc(min(var(--hero-vh,100svh),100svh,800px) + var(--wave-h))}}
.hero2 .cta{flex:none;width:100%;margin-top:12px;background:#fff;color:var(--blue);font-size:20px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.live-card{position:relative;width:var(--ef-w);background:#fff;color:var(--ink);border-radius:26px;box-shadow:0 22px 44px #0a154d40;overflow:hidden;text-align:center}
.live-card summary{position:relative;height:calc(var(--ef-w)*1.29);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px}
.live-card summary.ef{padding:13px 14px 0}
.live-card[open] summary{height:44px;padding:10px;font-size:14px;color:var(--muted)}
.live-card[open] summary>*{display:none}
.live-card[open] summary::after{content:'Повернутися до запитання'}
.prompt,.hint{font-size:15px;color:var(--muted)}
.word{font-size:34px;font-weight:800}
.hint{position:absolute;bottom:18px;font-size:13px}
.answer:not(.ef){font-size:36px;font-weight:800;min-height:300px;display:grid;place-items:center;padding:24px 12px}
.answer strong{color:var(--blue)}
.answer.ef-back{position:relative;height:calc(var(--ef-w)*1.29 - 44px)}
.answer .ef-star{display:none}
.ef .ef-hint{font-size:calc(var(--u)*11)}


.tabs{position:relative;display:flex;gap:8px;margin:0 -20px 14px;padding:0 20px 2px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border:1px solid var(--line);border-radius:22px;font-weight:700;font-size:15px;text-decoration:none}
/* Список тем — значення зі світлих вікон гри (flash-win-light.css, ios-tokens.css): блок 16, рядок від 52, тонкі роздільники, відступ 16. */
/* «Як це працює?»: на телефоні кроки шахом — картка то зліва, то справа, а стрілка живе у вільному місці збоку й не додає висоти; на комп’ютері картки в ряд зі стрілками, підписи під ними. Білий аркуш наїжджає на перший екран, як вікно в грі. */
/* Хвилі на стиках: кожна намальована кольором наступного блоку. */
.wave{position:absolute;left:0;right:0;z-index:1;display:block;width:100%;height:clamp(30px,6vw,52px);pointer-events:none}
.wave-bottom{bottom:-1px;fill:var(--paper)}
.wave-white{fill:#f2f2f7;transform:scaleX(-1)}
.wave-top{top:calc(-1*clamp(30px,6vw,52px) + 1px)}
.how{position:relative;padding:22px 0 calc(clamp(30px,6vw,52px) + 22px);background:var(--paper)}
.how-in{max-width:1060px;margin:0 auto;padding:0 20px}
.how h2{margin:0 0 20px}
/* Шах навколо центру екрана: картка зміщена від середини на --how-shift, а не притиснута до краю, тож погляд лишається посередині. */
.how-steps{--how-w:min(60vw,230px);--how-shift:9vw;--how-free:calc(100vw - 40px - var(--how-w));--how-in:calc(var(--how-free)/2 - var(--how-shift));--how-arrow:clamp(54px,17vw,72px);list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:26px}
.how-step{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding-left:var(--how-in);text-align:left}
.how-step:nth-child(2){align-items:flex-end;padding:0 var(--how-in) 0 0;text-align:right}
/* На правому кроці номер теж справа: край тексту, номер і картка на одній лінії. */
.how-step:nth-child(2) h3{flex-direction:row-reverse}
.how-step h3{display:flex;align-items:center;gap:9px;margin:0 0 4px;font:900 20px/1.2 Mulish,Nunito,sans-serif;letter-spacing:-.02em}
.how-step h3 i{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--blue);color:#fff;font-style:normal;font-size:14px}
.how-step>p{margin:0 0 16px;max-width:21em;font-size:16px;line-height:22px;color:var(--muted)}
.how-card{--ef-w:var(--how-w);position:relative;width:var(--ef-w);height:calc(var(--ef-w)*1.3);overflow:hidden;display:flex;background:#fff;border-radius:calc(var(--ef-w)*.087);box-shadow:0 14px 28px rgba(10,21,77,.14),0 0 0 .5px rgba(10,21,77,.05)}
.how-step:nth-child(1) .how-card{transform:rotate(-3deg)}
.how-step:nth-child(2) .how-card{transform:rotate(2deg)}
.how-step:nth-child(3) .how-card{transform:rotate(-2deg)}
.how-card:not(.ef){align-items:center;justify-content:center;font-size:20px;font-weight:700}
.how-card strong{color:var(--blue)}
.how-card .ef-star,.how-card .ef-xp-body{display:none}
.how-card .ef-xp-btn{pointer-events:none}
/* Картки тут такі самі, як у грі: той самий заголовок на тому самому місці, пояснення текстом без підкладки. */
.how-text{margin-top:calc(var(--u)*14);font-size:calc(var(--u)*21);line-height:1.45;font-weight:600;text-align:left;color:var(--ink)}
.how-text p{margin:0 0 calc(var(--u)*12)}
.how-arrow{display:none;color:var(--blue)}
.how-arrow-m{--side:calc((var(--how-free)/2 + var(--how-shift) - var(--how-arrow))/2);position:absolute;right:var(--side);bottom:-18px;width:var(--how-arrow);height:auto;color:var(--blue)}
.how-step:nth-child(2) .how-arrow-m{right:auto;left:var(--side);transform:scaleX(-1)}
/* Комп’ютер і планшет: картка зверху, підпис під нею, стрілка між картками. */
@media(min-width:700px){
 .how h2{margin-bottom:30px}
 .how-step,.how-step:nth-child(2){align-items:center;padding:0;text-align:center}
 .how-step h3,.how-step:nth-child(2) h3{flex-direction:row;justify-content:center}
 .how-arrow-m{display:none}
 .how-steps{grid-template-columns:repeat(3,1fr);gap:clamp(32px,6vw,72px)}
 .how-card{--ef-w:min(250px,calc((100vw - 40px - 2*clamp(32px,6vw,72px))/3 - 16px));order:-1;margin-bottom:24px}
 .how-step>p{margin:0;font-size:15.5px;line-height:21px}
 .how-arrow{display:block;position:absolute;left:100%;top:calc(var(--how-mid,150px));width:clamp(30px,5vw,56px);height:auto;margin:0;transform:translate(-50%,-50%) translateX(clamp(16px,3vw,36px))}
}
.program{--ios-label:#000;--ios-secondary-label:rgba(60,60,67,.76);--ios-tertiary-label:rgba(60,60,67,.42);--ios-separator:rgba(0,0,0,.12);--ios-cell-bg:#fff;--ios-cell-highlight:#e5e5ea;--ios-fill:rgba(118,118,128,.12);position:relative}
.program .tab[aria-current]{background:color-mix(in srgb,var(--c) 14%,#fff);box-shadow:inset 0 0 0 1.5px var(--c);color:var(--ink)}
.m-author{--ios-label:#000;--ios-secondary-label:rgba(60,60,67,.76);--ios-tertiary-label:rgba(60,60,67,.42);--ios-cell-highlight:#e5e5ea;--ios-fill:rgba(118,118,128,.12);margin:0 0 4px;border-radius:16px;background:#fff;color:var(--ios-label);overflow:clip}
.m-author>summary,.m-author.is-none{display:flex;align-items:center;gap:14px;min-height:96px;padding:12px 14px 12px 12px}
.m-author>summary:active{background:var(--tint)}
.m-author[open] .m-chev{color:var(--blue);transform:rotate(180deg)}
.page .m-author{margin:16px 0 0;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12)}
.m-photo{position:relative;flex:none;display:grid;place-items:center;width:76px;height:76px;border-radius:50%;overflow:hidden;background:var(--ios-fill);color:var(--ios-secondary-label)}
.m-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
/* Подробиці автора: цифри, уроки, мережі. */
.a-more{padding:2px 14px 14px;border-top:.5px solid var(--ios-separator,rgba(0,0,0,.12))}
.a-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 14px}
.a-stats>div{padding:12px 14px;border-radius:14px;background:var(--tint)}
.a-stats dt{font:900 clamp(22px,6vw,28px)/1.1 Mulish,Nunito,sans-serif;letter-spacing:-.02em;color:var(--ink)}
.a-stats dd{margin:2px 0 0;font-size:14px;line-height:18px;color:var(--ios-secondary-label)}
.a-lessons{display:flex;width:100%;min-height:52px;padding:10px 14px;font-size:clamp(14.5px,4.4vw,17px);text-align:center}
.a-note{margin:8px 0 14px;font-size:14px;line-height:18px;text-align:center;color:var(--ios-secondary-label)}
.a-socials{display:flex;justify-content:center;gap:10px;margin:0}
.a-socials a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--tint);color:var(--ink)}
.a-socials a:active{background:var(--line)}
.m-role{font-size:13px;line-height:17px;font-weight:800;color:var(--blue)}
.m-person{margin-top:1px;font-size:20px;line-height:25px;font-weight:800;letter-spacing:-.3px}
.m-author .m-t small{margin-top:2px;font-size:14px;line-height:19px}
.m-t{flex:1;min-width:0;display:flex;flex-direction:column}
.m-t small{margin-top:2px;font-size:13px;line-height:18px;color:var(--ios-secondary-label)}
.m-body ul{list-style:none;margin:0;padding:0}
.t-chev{flex:none;color:var(--ios-tertiary-label)}
.program .tabs{margin-bottom:14px}
/* Програма — за макетом Влада: білий блок, окремі рядки з рамкою, значок у кружечку, у відкритого розділу синій акцент. Значення кольорів ті самі, що в грі. */
.program{max-width:1060px;padding-top:26px;padding-bottom:clamp(30px,6vw,52px)}
.program::before{content:"";position:absolute;z-index:-1;inset:0 calc(50% - 50vw);background:#f2f2f7}
.program .tab{background:var(--ios-cell-bg);border-color:transparent}
.program>h2{margin:0 0 12px}
.program .tabs{margin-bottom:14px}
.panel-head{display:flex;flex-direction:column;gap:8px;margin:20px 0 10px}
.panel-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 4px}
.panel-title h3{min-width:0;margin:0;font-size:15px;line-height:20px;font-weight:700;color:var(--ios-label)}
.panel-title span{flex:none;font-size:13px;line-height:18px;color:var(--ios-secondary-label)}
.topic-find{position:relative;display:block;margin:0;color:var(--ios-secondary-label)}
.topic-find svg{position:absolute;left:12px;top:50%;margin-top:-10px;pointer-events:none}
.find.topic-find input{display:block;width:100%;min-height:44px;margin:0;padding:8px 14px 8px 40px;border:0;border-radius:12px;background:var(--ios-fill);color:var(--ios-label);font:400 17px Nunito,system-ui,sans-serif;-webkit-appearance:none;appearance:none}
.find.topic-find input::placeholder{color:var(--ios-secondary-label)}
.modules{margin:0 0 16px;background:#fff;border-radius:16px;overflow:clip}
.page .modules{margin:24px 0 34px;--ios-label:#000;--ios-secondary-label:rgba(60,60,67,.76);--ios-tertiary-label:rgba(60,60,67,.42);--ios-separator:rgba(0,0,0,.12);--ios-cell-highlight:#e5e5ea;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12)}
.module{position:relative}
.module+.module::before{content:"";position:absolute;z-index:1;top:0;left:60px;right:16px;border-top:.5px solid var(--ios-separator)}
.module>summary{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 16px;color:var(--ios-label)}
.module>summary:active{background:var(--ios-cell-highlight)}
.m-ico{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--ios-fill);color:var(--ios-label);font-style:normal;font-size:14px;font-weight:700}
.m-ico svg{width:18px;height:18px}
.m-name{font-size:17px;line-height:22px;font-weight:400;letter-spacing:-.43px}
.m-chev{flex:none;color:var(--ios-tertiary-label);transition:transform .2s ease}
.module[open] .m-chev{transform:rotate(180deg)}
.m-body{padding:0 16px 6px 60px}
.m-group{margin:12px 0 2px;font-size:13px;line-height:18px;font-weight:700;color:var(--ios-secondary-label)}
.t{position:relative;display:flex;align-items:center;gap:12px;min-height:44px;padding:9px 0;font-size:15px;line-height:20px;color:var(--ios-secondary-label)}
.t+.t::before{content:"";position:absolute;top:0;left:0;right:0;border-top:.5px solid var(--ios-separator)}
.t.is-live{min-height:60px;padding:0;color:var(--ios-label)}
.t-link{flex:1;min-width:0;display:flex;align-items:center;gap:8px;min-height:60px;text-decoration:none}
.t-text{flex:1;min-width:0;display:flex;flex-direction:column}
.t-link .t-name{font-size:17px;line-height:22px;font-weight:600;letter-spacing:-.43px}
.t-link small{font-size:13px;line-height:17px;color:var(--ios-secondary-label)}
.panel{margin:0 0 26px}



/* Блок каналу синім, у тому самому кольорі, що й перший екран; літачок намальований раз і не рухається. */
/* Блок каналу з двох частин: на синьому причини, у білому вікні впізнавана шапка Telegram і дія. Усе по одному лівому краю. */
.channel-card{display:grid;gap:18px}
.channel-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.channel-list li{display:flex;align-items:center;gap:10px;font-size:16.5px;line-height:22px;font-weight:600;color:#fff}
.channel-list svg{flex:none}
.channel-window{display:grid;gap:12px;padding:14px;border-radius:22px;background:#fff;box-shadow:0 14px 30px rgba(10,21,77,.28)}
.channel-profile{display:flex;align-items:center;gap:12px;text-align:left}
.channel-avatar{flex:none;display:block;width:52px;height:52px;border-radius:50%}
.channel-profile h3{margin:0;font:900 19px/1.2 Mulish,Nunito,sans-serif;letter-spacing:-.02em;color:var(--ink)}
.channel-profile p{margin:1px 0 0;font-size:14px;line-height:18px;color:var(--muted)}
.channel-title{margin:0;font-size:clamp(26px,7vw,36px);line-height:1.12;color:#fff}
.channel-btn{position:relative;font-weight:800;display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:12px 14px;border-radius:28px;background:var(--blue);color:#fff;font-size:clamp(16px,4.6vw,18px);white-space:nowrap;font-weight:800;text-decoration:none}
.channel-btn:active{transform:scale(.98)}
.channel-btn svg{flex:none}



/* Внутрішні сторінки: синя шапка лише під логотипом. */
body:has(.page) .top{position:static;max-width:none;background:var(--blue)}
.page{padding-top:calc(18px + var(--sat,0px));padding-bottom:44px}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:14px;color:var(--muted);margin-bottom:18px}
.crumbs a{min-height:24px}
.note-dark{color:var(--muted);font-size:15px}
.sources,.links{margin:0 0 30px}
.sources h2,.links h2{font-size:22px}
.sources p{font-size:15px;color:var(--muted)}
.links ul{list-style:none;margin:0;padding:0}
.links li a{display:flex;align-items:center;min-height:44px;font-weight:700}

.rule{margin:6px 0 30px;padding:18px 20px;background:var(--tint);border-radius:18px}
.rule p{margin:0 0 12px}
.rule p:last-child{margin:0}
.lang{color:var(--blue)}
.library{margin:0 0 34px}
.library h2{font-size:22px}
.find{display:block;margin:0 0 14px;font-weight:800;font-size:15px}
.find input{display:block;width:100%;min-height:50px;margin-top:6px;padding:10px 16px;border:2px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);font:400 17px Nunito,system-ui,sans-serif}
.empty{color:var(--muted)}
.words{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.w{border-bottom:1px solid var(--line)}
.w>span,.w>a,.w>details>summary{display:block;min-height:46px;padding:11px 0}
.w>a{text-decoration:none;font-weight:700}
.w>a::after{content:'правило';float:right;margin-left:12px;font-size:13px;line-height:24px;font-weight:400;color:var(--muted);text-decoration:underline}
.w>details p{margin:0 0 12px;font-size:15px;color:var(--muted)}
.w strong{color:var(--blue)}
.w small{color:var(--muted);font-size:14px;font-weight:400}
.locked{display:flex;align-items:center;gap:8px;color:var(--muted)}
.lock{flex:none;order:2;margin-left:auto}
.after{margin:0 0 34px;padding:22px 20px 24px;background:var(--tint);border-radius:18px}
.after h2{font-size:24px}
.author-page>img{display:block;width:132px;height:132px;border-radius:50%;object-fit:cover;object-position:50% 34%;margin:0 0 16px}
.plain{margin:0 0 26px;padding:0 0 0 20px}
.plain li{margin:0 0 10px}

@media(min-width:900px){
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
/* Футер один на всю сторінку, синій: канал, мережі, контакти. Градієнт той самий, що на першому екрані. */
.foot{position:relative;padding:22px 0 16px;background:linear-gradient(180deg,#5b3bff 0%,#4120f8 45%,#2810b4 100%);color:#fff}
.foot .wave{fill:#5b3bff}
.foot-in{position:relative;z-index:1;max-width:1060px;margin:0 auto;padding:0 20px;display:grid;gap:22px}
.foot-links{padding-top:20px;border-top:1px solid rgba(255,255,255,.2)}
/* Кнопка вгору прив’язана до екрана; мітка висотою в екран каже, коли її показати. */
.to-top-mark{position:absolute;top:0;left:0;width:1px;height:100vh;height:100svh;pointer-events:none}
.to-top{position:fixed;z-index:30;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#fff;color:var(--blue);box-shadow:0 6px 18px rgba(10,21,77,.24),0 0 0 .5px rgba(10,21,77,.08);visibility:hidden;opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
.to-top.is-on{visibility:visible;opacity:1;transform:none;transition:opacity .2s ease,transform .2s ease}
.to-top:active{background:#e5e5ea}
.foot-socials{display:flex;gap:10px;margin:0 0 12px}
.foot-socials a{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;transition:background-color .15s ease}
.foot-socials a:hover,.foot-socials a:active{background:rgba(255,255,255,.26)}
.foot ul.foot-contacts{list-style:none;margin:0;padding:0}
.foot-contacts a{display:flex;align-items:center;min-height:38px;font-size:16px;color:#fff;text-decoration:none}
.foot-contacts a:hover{text-decoration:underline}
.foot-end{position:relative;z-index:1;display:flex;flex-direction:column-reverse;align-items:flex-start;max-width:1060px;margin:0 auto;padding:0 20px;font-size:14px;line-height:38px;color:rgba(255,255,255,.72)}
.foot-end a{font-size:16px;color:#fff;text-decoration:none}
.foot-end a:hover{text-decoration:underline}
.foot-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
/* Логотип великий, у правому нижньому куті, усі літери видно. Зсув прибирає порожні поля у файлі логотипа. */
.foot-mark{position:absolute;right:0;bottom:0;width:70vw;height:auto;max-width:none;opacity:.1;transform:translate(12%,20%)}
@media(min-width:700px){
 .hero2{padding-top:calc(54px + var(--sat,0px))}
 .panel-head{flex-direction:row;align-items:center;justify-content:space-between;gap:24px}
 .panel-title{flex:1;justify-content:flex-start;gap:14px;padding:0}
 .panel-title h3{font-size:22px;line-height:28px;font-weight:800}
 .topic-find{flex:none;width:300px}
 .a-more{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"stats lessons" "stats note" "socials socials";column-gap:24px;align-items:center;padding:14px 18px 14px}
 .a-stats{grid-area:stats;margin:0;align-self:stretch}
 .a-stats>div{display:flex;flex-direction:column;justify-content:center}
 .a-lessons{grid-area:lessons;align-self:end}
 .a-note{grid-area:note;margin:8px 0 0;align-self:start}
 .a-socials{grid-area:socials;justify-content:center;margin:12px 0 0}
 .channel-card{grid-template-columns:minmax(0,1fr) 340px;align-items:center;column-gap:clamp(32px,6vw,72px)}
 .tabs{flex-wrap:wrap;overflow:visible;margin-left:0;margin-right:0;padding:0}
 /* Комп’ютер: зверху канал, далі мережі й контакти, унизу правовий рядок по обох краях. Логотип великий і лежить у фоні. */
 .foot{padding:30px 0 28px}
 .foot-in{gap:36px}
 .foot-links{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:28px}
 .foot-socials{margin:0}
 .foot ul.foot-contacts{display:flex;gap:32px}
 .foot-end{flex-direction:row;justify-content:space-between;gap:24px;margin-top:24px;padding-right:max(20px,calc(84px - max(0px,(100vw - 1060px)/2)));line-height:24px}
 .foot-end a{font-size:14px;color:inherit}
 .foot-mark{width:clamp(360px,32vw,520px)}
}
.panel>.more{display:block;width:max-content;max-width:100%;margin:0 auto;text-align:center}
@media(max-width:350px){.hero2 .cta.is-channel svg{display:none}}
/* Стиль каруселей. Фон першого екрана — суцільний колір центральної картки, текст, логотип і кнопка — темний тон того самого кольору. Колір міняється плавно й разом. */
:root{--hero-bg:#3fcee0;--hero-tone:#034248;--foot-bg:#fac740;--foot-tone:#4f3500}
.brand{background:var(--hero-tone);-webkit-mask:url(/cards/assets/logo-white.png?v=57d08798fd) center/contain no-repeat;mask:url(/cards/assets/logo-white.png?v=57d08798fd) center/contain no-repeat;transition:background-color .45s ease}
.brand img{opacity:0}
.top-login{background:rgba(255,255,255,.4);color:var(--hero-tone);transition:color .45s ease}
.hero2:not(#_){--ios-glass-fill:rgba(255,255,255,.4);--ios-glass-fill-pressed:rgba(255,255,255,.6);--ios-vibrant-label:var(--hero-tone);isolation:isolate;color:var(--hero-tone);background:var(--hero-bg);transition:color .45s ease}
/* Зміна кольору фону (Влад 02.11.2026: хвиля внизу смикалась). Раніше весь перший екран перемальовувався кожен кадр (transition background-color), і на iPhone
   низ екрана з хвилею відставав від верху. Тепер новий колір стає одразу, а над ним згасає шар попереднього (--hero-was) — лише прозорість, без перемальовування. */
.hero2::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--hero-was,transparent);opacity:0;pointer-events:none}
.hero2.hero-fade::before{animation:hero-fade .45s ease forwards}
@keyframes hero-fade{from{opacity:1}to{opacity:0}}
.hero2:not(#_) h1,.hero2:not(#_) .ww-name h2,.hero2:not(#_) .ww-name p,.hero2:not(#_) .hero-short a{color:var(--hero-tone);transition:color .45s ease}
.hero2:not(#_) .ww-arrow{background:rgba(255,255,255,.45);color:var(--hero-tone)}
.hero2:not(#_) .ww-dots button:not(#_){background:rgba(255,255,255,.4);color:var(--hero-tone);box-shadow:none}
.hero2:not(#_) .ww-dots button[aria-selected=true]:not(#_){background:#fff;color:var(--hero-tone);box-shadow:0 0 0 3px rgba(255,255,255,.45)}
.hero2:not(#_) .first-game{background:rgba(255,255,255,.4);border:0;box-shadow:none}
.hero2:not(#_) .fg-icon{background:rgba(255,255,255,.55);color:var(--hero-tone)}
.hero2:not(#_) .fg-text small,.hero2:not(#_) .fg-text b{color:var(--hero-tone)}
.hero2:not(#_) .fg-count,.hero2:not(#_) .first-game.is-soon .fg-count{background:rgba(255,255,255,.55);color:var(--hero-tone)}
.hero2:not(#_) .cta{background:var(--hero-tone);color:#fff;transition:background-color .45s ease}
.hero2:not(#_) .cta.is-channel{background:#4120f8}   /* закритий предмет: усе сіре, синя лише кнопка каналу (Влад 02.11.2026) */
.hero2:not(#_) .wf-face{box-shadow:0 10px 22px color-mix(in srgb,var(--hero-tone) 42%,transparent)}
.hero2:not(#_) .wf-glow{display:none}
.hero2:not(#_) .wf-floor{background:radial-gradient(closest-side,color-mix(in srgb,var(--hero-tone) 62%,transparent),transparent)}
.hero2:not(#_) .wf-float::after{background:var(--hero-bg);transition:opacity .5s ease,background-color .45s ease}
.hero2:not(#_) .wf-card:focus-visible .wf-face{outline-color:var(--hero-tone)}
/* Футер усіх сторінок — як останній слайд каруселі. */
.foot{background:var(--foot-bg);color:var(--foot-tone)}
.foot .wave{fill:var(--foot-bg)}
.foot .channel-title,.foot .channel-list li,.foot-contacts a,.foot-end,.foot-end a{color:var(--foot-tone)}
.foot-socials a{background:rgba(255,255,255,.45);color:var(--foot-tone)}
.foot-socials a:hover,.foot-socials a:active{background:rgba(255,255,255,.65)}
.foot-links{border-top-color:color-mix(in srgb,var(--foot-tone) 22%,transparent)}
.foot-mark{filter:brightness(0);opacity:.09}
/* Сторінки предметів, тем і автора: та сама шапка й той самий футер, що на лендінгу */
body:has(.page) .top:not(#_){background:var(--hero-bg)}
body:has(.page) .top-play{color:var(--hero-tone)}
/* Переходи між сторінками лендінга й гри — плавне перетікання браузером, без порожнього кадру (Chrome 126+, Safari 18.2+; деінде як було) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.26s;animation-timing-function:ease}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
/* Поки сторінка догружається, спрощена картка без JS не показується, бо її одразу підмінила б карусель (ривок). Карусель проявляється сама; якщо JS так і не спрацював, картка з’являється за 4 с. */
@media (scripting:enabled){.wf-cards .live-card{visibility:hidden;animation:lc-late 0s 4s forwards}}
@keyframes lc-late{to{visibility:visible}}
/* Повернення на лендінг в іншому предметі: його тексти не показуються, доки JS не поставить свої (без підміни на очах); запобіжник — 4 с. */
html.hero-wait .hero2 :is(.ww-name,.first-game,.cta,.hero-short){visibility:hidden;animation:lc-late 0s 4s forwards}
/* «Як це працює?»: зворот і пояснення — як у грі в темі «Хамелеон» (Влад 02.11.2026). Колір — пара з фону картинки «багаторазовий». */
.how-steps{--g-bg:#3e8bfe;--g-tone:#04142d}
.how-card :is(.ef-q .ef-w,.ef-blabel,.ef-xp-btn){color:var(--g-tone)!important}
.how-card .ef-xp-btn{font-weight:800;opacity:1}
.how-card.ef-back .ef-ans .ef-ln{font-size:calc(var(--u) * 34)!important;font-weight:800;line-height:1.3}
.how-card.gs-fit.ef-back .ef-ans .ef-ln{font-size:calc(var(--u) * 26)!important}
.how-card.ef-back .ef-ans .ef-ch{font-size:inherit!important;font-weight:inherit}
.how-card.ef-back .ef-ans .ef-ch.ef-color-black{color:#191920}
.how-card.ef-back .ef-st{color:var(--g-tone)!important;background:var(--g-bg);border-radius:.2em;padding:0 .1em;margin:0 .03em;font-size:inherit!important;font-weight:800}
.how-card.ef-back .ef-st .ef-acc{color:var(--g-tone)!important}
.how-card .ef-mk{color:var(--g-tone)!important;background:color-mix(in srgb,var(--g-bg) 45%,#fff);border-radius:.18em;padding:0 .1em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.how-card .how-text .ef-mk:not(#_){color:#191920!important;background:none;padding:0}   /* пояснення — чорним, без плашки, як у грі (02.11.2026) */
.how-card .how-text .ef-i:not(#_){font-style:normal}   /* приклади звичайним, без курсиву (02.11.2026) */
.how-card .ef-stx .ef-sti-m{color:var(--g-tone)}
/* Віяло першого екрана — як картка в грі (game-theme.css), у кольорі своєї картки --g-bg/--g-tone (flash-landing.js) (Влад 02.11.2026: «не синхронізовані вигляди картки») */
.wf-card :is(.ef-q .ef-w,.ef-blabel,.ef-xp-btn){color:var(--g-tone)!important}
.wf-back .ef-ans .ef-ln{font-size:calc(var(--u) * 34)!important;font-weight:800;line-height:1.3}
.wf-card.gs-fit .wf-back .ef-ans .ef-ln{font-size:calc(var(--u) * 26)!important}
.wf-back .ef-ans .ef-ch{font-size:inherit!important;font-weight:inherit}
.wf-back .ef-ans .ef-ch.ef-color-black{color:#191920}
.wf-back .ef-st{color:var(--g-tone)!important;background:var(--g-bg);border-radius:.2em;padding:0 .1em;margin:0 .03em;font-size:inherit!important;font-weight:800}
.wf-back .ef-st .ef-acc{color:var(--g-tone)!important}
.wf-back .ef-mk{color:var(--g-tone)!important;background:color-mix(in srgb,var(--g-bg) 45%,#fff);border-radius:.18em;padding:0 .1em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.wf-back :is(.ef-color-blue,.ef-color-blue .ef-stx):not(#_){color:var(--g-tone)!important}
.wf-back .ef-stx .ef-sti-m{color:var(--g-tone)}
/* Пояснення (віяло й «Як це працює?») — як у грі: виділення чорне без плашки, приклади прямим шрифтом, наголошена буква жирна */
:is(.fan-explain-body,.how-card .how-text) :is(.ef-mk,.ef-color-blue,.ef-color-blue .ef-stx,.ef-stx .ef-sti-m):not(#_){color:#191920!important;background:none;padding:0}
:is(.fan-explain-body,.how-card .how-text) .ef-mk{font-weight:800}
:is(.fan-explain-body,.how-card .how-text) .ef-i:not(#_){font-style:normal}
:is(.fan-explain-body,.how-card .how-text) .ef-sti:not(#_){font-weight:800;color:#191920}
.how-card .how-ctx{align-self:stretch;margin:calc(var(--u)*14) 0 calc(var(--u)*10);font-size:calc(var(--u)*15);line-height:1.35;font-weight:600;color:#5a5a6b;text-align:left}
.how-card .how-ctx+.how-text{align-self:stretch;margin-top:0;font-size:calc(var(--u)*20);line-height:1.5;color:#191920}
/* Вхід прямо на лендінгу (Влад 02.11.2026): екран у кольорі лендінга, розміри й вигляд — як форма входу в грі («Хамелеон»). */
html.la-open{overflow:hidden}
.la{position:fixed;inset:0;z-index:200;overflow-y:auto;overscroll-behavior:contain;background:var(--hero-bg);color:var(--hero-tone);font-family:Nunito,system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
.la[hidden]{display:none}
.la-in{position:relative;max-width:420px;margin:0 auto;padding:var(--sat,env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom))}
.la-back{position:absolute;top:calc(22px + var(--sat,env(safe-area-inset-top)));left:16px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.5);color:var(--hero-tone);cursor:pointer}
.la-back:active{background:rgba(255,255,255,.7)}
.la h1{margin:0 36px 28px;padding-top:28px;font:600 17px/32px Nunito,system-ui,sans-serif;letter-spacing:0;text-align:center;color:var(--hero-tone)}
.la .google-auth{margin:0 auto;text-align:center}
.la .google-button{display:flex;justify-content:center;min-height:40px}
.la .google-status{margin:6px 0 0;font-size:14px;color:color-mix(in srgb,var(--hero-tone) 80%,transparent)}
.la .google-status:empty{display:none}
.la .google-or{margin:12px 0 16px;font-size:14px;line-height:1.4;color:var(--hero-tone)}
.la-form{display:flex;flex-direction:column;margin:0}
.la p{margin:0}   /* загальний відступ абзаців лендінга тут не діє: відступи — свої, як у грі */
.la .pill{display:block;width:100%;height:54px;margin:0;padding:0 22px;border:1px solid transparent;border-radius:999px;background:rgba(255,255,255,.55);color:var(--hero-tone);-webkit-text-fill-color:var(--hero-tone);caret-color:var(--hero-tone);font:700 17px Nunito,system-ui,sans-serif;-webkit-appearance:none;appearance:none}
.la .pill::placeholder{color:color-mix(in srgb,var(--hero-tone) 62%,transparent);-webkit-text-fill-color:color-mix(in srgb,var(--hero-tone) 62%,transparent)}
.la .pill:focus{outline:2px solid var(--hero-tone);outline-offset:0}
.la .domains{display:flex;gap:8px;margin:10px 0 0;overflow-x:auto;scrollbar-width:none}
.la .domains[hidden]{display:none}
.la .domains::-webkit-scrollbar{display:none}
.la .domain{flex:none;min-height:44px;padding:0 14px;border:0;border-radius:999px;background:rgba(255,255,255,.5);color:var(--hero-tone);font:700 14px Nunito,system-ui,sans-serif}
.la .domain:active{background:rgba(255,255,255,.7)}
.la .error{margin:12px 0 0;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.6);color:var(--hero-tone);font-size:14px;line-height:21px;font-weight:800}
.la .error:empty{display:none}
.la .inline-link{min-height:44px;padding:0;border:0;background:none;color:var(--hero-tone);font:700 15px Nunito,system-ui,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.la .error .inline-link{min-height:0;font-size:14px;font-weight:800}
.la-primary{min-height:54px;margin:12px 0 0;padding:14px;border:0;border-radius:999px;background:var(--hero-tone);color:#fff;font:800 17px Nunito,system-ui,sans-serif;cursor:pointer}
.la-primary:disabled{opacity:.55}
.la-primary:active{opacity:.85}
.la .note,.la .intro,.la .switch,.la .hint,.la .wait,.la .sent,.la .auth-privacy a{color:color-mix(in srgb,var(--hero-tone) 80%,transparent)}
.la .note{margin:12px 0 0;font-size:13px;line-height:19.5px;text-align:center}
.la .switch{display:flex;align-items:center;justify-content:center;gap:5px;margin:12px 0 0;font-size:15px}
.la .auth-privacy{margin:0;text-align:center}
.la .auth-privacy a{display:inline-flex;align-items:center;min-height:44px;font-size:14px}
.la .intro{margin:0 0 8px;font-size:16px;line-height:23.2px;text-align:center}
.la .email-chip{display:flex;align-items:center;gap:8px;max-width:100%;height:40px;margin:0 auto 22px;padding:0 14px 0 16px;border:0;border-radius:999px;background:rgba(255,255,255,.5);color:var(--hero-tone);font:15px Nunito,system-ui,sans-serif;cursor:pointer}
.la .email-chip .email{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.la .email-chip svg{flex:none;width:16px;height:16px;color:color-mix(in srgb,var(--hero-tone) 70%,transparent)}
.la .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.la .otp{position:relative;display:block}
.la .otp input{position:absolute;inset:0;z-index:1;width:100%;height:100%;padding:0;border:0;background:transparent;color:transparent;-webkit-text-fill-color:transparent;caret-color:transparent;font-size:16px;outline:none}
.la .otp-cells{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.la .otp-cells span{display:grid;place-items:center;height:60px;border:1px solid transparent;border-radius:16px;background:rgba(255,255,255,.55);color:var(--hero-tone);font-size:27px;font-weight:800;font-variant-numeric:tabular-nums;transition:border-color .15s,box-shadow .15s,background-color .15s}
.la .otp-cells span.is-filled{background:rgba(255,255,255,.75)}
.la .otp.is-focus .otp-cells span.is-active{border-color:var(--hero-tone);box-shadow:0 0 0 3px color-mix(in srgb,var(--hero-tone) 22%,transparent)}
.la .otp.is-invalid .otp-cells span{border-color:var(--hero-tone)}
.la .hint{position:static;bottom:auto;margin:16px 0 0;font-size:14px;line-height:20.3px;text-align:center}
.la .wait{margin:6px 0 0;font-size:14px;text-align:center}
.la .wait[hidden]{display:none}
.la .sent{margin:12px 0 0;font-size:14px;text-align:center}
.la .sent:empty{display:none}
.la .resend{align-self:center;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:10px;padding:0 18px;border:1px solid color-mix(in srgb,var(--hero-tone) 28%,transparent);border-radius:999px;background:none;color:var(--hero-tone);font:800 15px Nunito,system-ui,sans-serif;cursor:pointer}
.la .resend[hidden]{display:none}
.la .resend svg{width:18px;height:18px}
/* Вхід у Telegram (02.11.2026): одна кнопка «Продовжити як …» зі значком Telegram, пошта — посиланням під нею. */
.la-tg{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:0}
.la-tg svg{width:22px;height:22px;flex:none}
.la-tg span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.la .error:not(:empty)+.la-tg{margin-top:12px}
/* Весь екран у Telegram (02.11.2026): --sat — місце під годинником і кнопками Telegram; у браузері його немає. */
/* Рамка фокусу лише з клавіатури (02.11.2026): після дотику чи програмного фокусу (вікно входу ставить фокус на «Назад») її немає. Поле пошти — своя рамка. */
html:not(.kbd) :focus-visible:not(input,textarea,select){outline:none!important}
/* TikTok (02.11.2026): сторінки сайту поверх лендінга, у рамці на весь екран (flash-host.js) — його браузер не відкриває інших адрес. */
.host-frame{position:fixed;inset:0;z-index:1000;background:var(--hero-bg,#16151a)}
.host-frame iframe{display:block;width:100%;height:100%;border:0}
html.host-framed,html.host-framed body{overflow:hidden}