/* Word Repeater: сайт. Кольори й шрифт ті самі, що в застосунку (docs/design/system.md застосунку). */
@font-face{font-family:"Source Sans 3";src:url(fonts/SourceSans3-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(fonts/SourceSans3-SemiBold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(fonts/SourceSans3-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  color-scheme:dark;
  /* палітра: у кожного кольору своя роль */
  --bg:#1B1D21;          /* тло сторінки */
  --surface:#23262B;     /* смуги й рядки */
  --raised:#2B2F35;      /* меню, підсвітка */
  --selected:#343940;
  --line:#3A3F46;        /* тонкі межі */
  --line-strong:#515861; /* межі полів і прозорих кнопок */
  --text:#ECEEF1;
  --muted:#A9B0BA;       /* другорядний текст */
  --teal:#2CC1D3; --teal-text:#5FD3E0; --teal-bg:#173A3F; --on-teal:#0B1E21;      /* навчання, головна дія */
  --purple:#A57BF0; --purple-text:#BC9BF8; --purple-bg:#2E2742;                    /* ШІ-помічник */
  --g1:#FF9D98; --g1-bg:#3E2427; --g2:#FBC184; --g2-bg:#3B2D1D;                    /* кнопки оцінки */
  --g3:#7ED9A8; --g3-bg:#1E3529; --g4:#7FE0EA; --g4-bg:#173A3F;
  --ok:#5FCB92;
  /* відступи */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px; --s9:112px;
  --r1:10px; --r2:16px; --r3:26px;
  --gut:clamp(16px,4vw,32px);
  --font:"Source Sans 3","Noto Sans SC","Microsoft YaHei","PingFang SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 18px/1.55 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
img{height:auto}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0}
a{color:var(--teal-text);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:#fff}
:focus-visible{outline:3px solid var(--teal-text);outline-offset:3px;border-radius:6px}
[lang="zh-Hans"]{font-family:"Noto Sans SC","Microsoft YaHei","PingFang SC","Source Sans 3",sans-serif}
code{font-family:inherit;font-weight:600;color:var(--text);background:var(--raised);padding:1px 7px;border-radius:6px;white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[hidden]{display:none!important}
.skip{position:absolute;left:-999px;top:8px;z-index:50;background:var(--teal);color:var(--on-teal);padding:12px 18px;border-radius:10px;font-weight:600}
.skip:focus{left:8px}
.wrap{width:min(1160px,100% - 2*var(--gut));margin-inline:auto}
.band{padding-block:var(--s9)}
.band-surface{background:var(--surface)}
.band-teal{background:var(--teal-bg)}
.band-purple{background:var(--purple-bg)}
#safe,#download{margin-top:var(--s9)}
/* the sticky header (68 px) must not cover the heading of a block the anchors jump to */
section,details[id]{scroll-margin-top:84px}
h2{font-size:clamp(2rem,1.3rem + 2.4vw,3.1rem);line-height:1.08;letter-spacing:-.012em;font-weight:700;text-wrap:balance}
h3{font-size:1.35rem;line-height:1.25;font-weight:700}
.lead{margin-top:var(--s4);max-width:40em;color:var(--muted);font-size:1.15rem}
.lead b{color:var(--text);font-weight:600}
.small{font-size:15px;line-height:1.5;color:var(--muted)}
.todo{background:#3A3220;color:#F5D07E;padding:1px 8px;border-radius:6px;font-weight:600;font-size:.95em}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 var(--s5);border-radius:14px;font:600 17px/1.2 var(--font);text-decoration:none;border:1px solid transparent;cursor:pointer;text-align:center;transition:transform .15s var(--ease),background-color .15s,border-color .15s}
.btn-primary{background:var(--teal);color:var(--on-teal)}
.btn-primary:hover{background:#4fd2e2;color:var(--on-teal)}
.btn-primary:active{transform:translateY(1px)}
.btn-quiet{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn-quiet:hover{background:var(--raised);color:var(--text)}
.btn-sm{min-height:48px;padding:0 var(--s4);font-size:16px;border-radius:12px}
/* пристрій відвідувача підсвічує свою кнопку (скрипт ставить data-platform) */
html[data-platform="android"] .btn-win,html[data-platform="windows"] .btn-and{background:transparent;color:var(--text);border-color:var(--line-strong)}
html[data-platform="android"] .btn-win:hover,html[data-platform="windows"] .btn-and:hover{background:var(--raised)}
.btn-down{padding:0 var(--s6)}
.arrow{display:inline-block;margin-left:10px;font-weight:700;animation:nudge 1.9s var(--ease) infinite}
@keyframes nudge{0%,55%,100%{transform:translateY(0)}28%{transform:translateY(5px)}}
.stores{display:flex;flex-wrap:wrap;gap:var(--s3)}
.store{display:inline-flex}
.btn-store{flex-direction:column;gap:1px;padding:6px 20px;background:transparent;border:1px dashed var(--line-strong);color:#8d949e;line-height:1.15;cursor:not-allowed}
.btn-store:disabled{opacity:1}
.btn-store:hover{background:transparent;color:#8d949e}
.store-name{font-weight:600}
.store-note{font-size:12px;font-weight:400;color:var(--muted)}
.noversion{display:none;margin-top:var(--s3);padding:var(--s3) var(--s4);border:1px solid #4a3d70;background:var(--purple-bg);border-radius:var(--r1);color:#e1d6fa;font-size:16px}
html[data-platform="ios"] .noversion,html[data-platform="mac"] .noversion{display:block}

/* шапка */
.top{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:var(--s4);min-height:68px}
.brand{display:flex;align-items:center;gap:var(--s3);min-height:48px;color:var(--text);text-decoration:none;font-weight:700;font-size:20px}
.brand:hover{color:var(--text)}
.brand img{width:40px;height:40px;border-radius:11px}
.nav-wide{margin-left:auto;display:flex;align-items:center}
.nav-wide a{display:inline-flex;align-items:center;min-height:48px;padding:0 12px;color:var(--muted);text-decoration:none;font-size:16px;border-radius:8px}
.nav-wide a:hover{color:var(--text)}
.top .btn{margin-left:var(--s2)}
.menu{display:none;margin-left:auto;position:relative}
.menu summary{list-style:none;min-height:48px;padding:0 var(--s4);display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line-strong);border-radius:12px;cursor:pointer;font-weight:600;font-size:16px}
.menu summary::-webkit-details-marker{display:none}
.menu summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.menu[open] summary{background:var(--raised)}
.menu[open] summary::after{transform:translateY(2px) rotate(225deg)}
.menu nav{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;background:var(--raised);border:1px solid var(--line-strong);border-radius:14px;padding:var(--s2);display:grid;box-shadow:0 20px 40px -20px rgba(0,0,0,.7)}
.menu nav a{min-height:48px;display:flex;align-items:center;padding:0 var(--s3);color:var(--text);text-decoration:none;border-radius:8px}
.menu nav a:hover{background:var(--selected)}

/* перший екран */
.hero{padding:var(--s8) 0;overflow-x:clip}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);column-gap:var(--s8);align-items:center;grid-template-areas:"head stage" "cta stage" "notes stage"}
.hero-head{grid-area:head}
.hero-cta{grid-area:cta;display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--s3);margin-top:var(--s6)}
.hero-notes{grid-area:notes;margin-top:var(--s4)}
.hero-head h1{font-size:clamp(2.1rem,1rem + 3.5vw,3.9rem);line-height:1.04;letter-spacing:-.016em;font-weight:700;text-wrap:balance}
.hero-head h1 .soft{color:var(--teal-text)}
.hero-head .lede{margin-top:var(--s5);font-size:clamp(1.1rem,1rem + .5vw,1.3rem);line-height:1.5;max-width:34em}
.hero-notes .for{color:var(--muted);max-width:34em}
.hero-notes .fine{margin-top:var(--s3);color:var(--muted);font-size:15px;line-height:1.55;max-width:38em}
.hero-notes .fine b{color:var(--text);font-weight:600}

/* жива картка */
.stage{grid-area:stage;width:min(100%,520px);margin-inline:auto}
.deck{position:relative;aspect-ratio:4/3;margin-top:36px}
.behind{position:absolute;inset:0;transform:translate(30px,-34px) rotate(4.5deg);transform-origin:50% 100%;background:var(--purple-bg);border:1px solid #4a3d70;border-radius:var(--r3);padding:9px 26px;display:flex;align-items:flex-start;gap:12px;color:var(--purple-text);transition:transform .5s var(--ease)}
.behind b{font-size:1.7rem;line-height:1.1}
.behind span{font-size:1rem;line-height:1.9;opacity:.85}
.flip{position:absolute;inset:0;display:block;width:100%;padding:0;margin:0;border:0;background:none;color:inherit;font:inherit;text-align:center;cursor:pointer;perspective:1400px;-webkit-tap-highlight-color:transparent}
.flip-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .65s var(--ease)}
.flip.is-back .flip-inner{transform:rotateY(180deg)}
.flip.peek .flip-inner{animation:peek 1.1s var(--ease) 1}
@keyframes peek{0%{transform:rotateY(0)}35%{transform:rotateY(-14deg)}70%{transform:rotateY(6deg)}100%{transform:rotateY(0)}}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:var(--s5);background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);box-shadow:0 24px 60px -26px rgba(0,0,0,.75)}
.face.back{transform:rotateY(180deg)}
.flip:hover .face{border-color:var(--line-strong)}
.tag{position:absolute;top:16px;left:18px;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--purple-text);background:var(--purple-bg);border:1px solid #4a3d70;border-radius:999px;padding:2px 10px}
.word{font-size:clamp(2.2rem,1.5rem + 2.2vw,3.3rem);font-weight:700;line-height:1.1;color:var(--teal-text)}
.word-sm{font-size:1.5rem;font-weight:700;color:var(--teal-text);line-height:1.15}
.ts{color:var(--muted);font-size:1.1rem}
.tr{font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem);font-weight:700;line-height:1.2;margin-top:6px}
.hint{position:absolute;left:0;right:0;bottom:18px;color:var(--muted);font-size:14px}
.grades{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);margin-top:var(--s4)}
.gcol{display:flex;flex-direction:column;align-items:center;gap:6px}
.grade{width:100%;min-height:52px;padding:0 4px;border-radius:12px;border:1px solid transparent;font:600 15px/1.1 var(--font);display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:filter .15s,transform .1s}
.grade i{font-style:normal;font-size:11px;border:1px solid currentColor;border-radius:4px;min-width:17px;height:17px;display:inline-grid;place-items:center;opacity:.9}
.grade:hover{filter:brightness(1.25)}
.grade:active{transform:translateY(1px)}
.g1{background:var(--g1-bg);color:var(--g1)}.g2{background:var(--g2-bg);color:var(--g2)}.g3{background:var(--g3-bg);color:var(--g3)}.g4{background:var(--g4-bg);color:var(--g4)}
.cap{font-size:13px;color:var(--muted);text-align:center;line-height:1.2}
.rated{list-style:none;margin:var(--s4) 0 0;display:grid;gap:6px}
.rated li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3);align-items:baseline;padding:9px 14px;border:1px solid var(--line);border-left-width:4px;border-radius:12px;background:var(--surface);animation:slidein .4s var(--ease)}
.rated .rw{font-weight:600}
.rated .rt{color:var(--text);font-weight:600;text-align:right;font-size:16px}
.rated li.g1{border-left-color:var(--g1)}.rated li.g2{border-left-color:var(--g2)}.rated li.g3{border-left-color:var(--g3)}.rated li.g4{border-left-color:var(--g4)}
.rated li.g1,.rated li.g2,.rated li.g3,.rated li.g4{color:var(--text)}
@keyframes slidein{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.stage-note{margin-top:var(--s3);color:var(--muted);font-size:14px;line-height:1.45;text-align:center;min-height:2.9em}
.no-js .deck,.no-js .grades,.no-js .rated,.no-js .stage-note{display:none}
.stage .fallback{display:none}
.no-js .stage .fallback{display:block}

.facts{background:var(--surface);border-block:1px solid var(--line)}
.facts ul{list-style:none;margin:0 auto;display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:var(--s4)}
.facts li{padding:var(--s4) 0;color:var(--muted);font-size:16px}
.facts b{color:var(--text);font-weight:600}

/* як це працює: великі цифри інтервалів */
.how-head{padding-top:var(--s9)}
.nums{background:var(--surface);margin-top:var(--s8);padding:var(--s8) 0 var(--s7);overflow:hidden}
.nums h3{font-size:1.1rem;color:var(--muted);font-weight:600;margin-bottom:var(--s7)}
.num-row{--nb:clamp(.62rem,1.12vw,1rem);list-style:none;margin:0;display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s5)}
.num-row li{position:relative;flex:0 0 auto;padding-bottom:var(--s5);display:flex;flex-direction:column;align-items:flex-start}
.num-row li::after{content:"";position:absolute;left:0;right:calc(-1*var(--s5));bottom:0;height:3px;background:var(--teal)}
.num-row li:nth-child(n+4)::after{background:var(--purple)}
.num-row li:last-child::after{right:0}
.num-row li::before{content:"";position:absolute;left:0;bottom:-5px;width:13px;height:13px;border-radius:50%;background:var(--bg);border:3px solid var(--teal);z-index:1}
.num-row li:nth-child(n+4)::before{border-color:var(--purple)}
.num-row li:last-child::before{background:var(--purple)}
.num-row b{font-weight:700;line-height:.9;letter-spacing:-.04em;font-variant-numeric:lining-nums;font-size:calc(var(--nb)*var(--m))}
.num-row li:nth-child(1){--m:4}.num-row li:nth-child(2){--m:5.25}.num-row li:nth-child(3){--m:6.75}.num-row li:nth-child(4){--m:8.75}.num-row li:nth-child(5){--m:11.25}.num-row li:nth-child(6){--m:14.5}
.num-row li:nth-child(n+4) b{color:var(--purple-text)}
.num-row i{font-style:normal;font-size:1.15rem;font-weight:600;margin-top:var(--s3)}
.num-row span{color:var(--muted);font-size:14px;line-height:1.3;min-height:1.3em;margin-top:2px}
.nums .cap-line{margin-top:var(--s7);color:var(--muted);max-width:42em}

.how-split{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:var(--s8);align-items:start;padding-top:var(--s8)}
.shots{display:grid;gap:var(--s6)}
.shot img{border-radius:14px;border:1px solid var(--line);box-shadow:0 30px 70px -34px rgba(0,0,0,.85)}
.shot figcaption{margin-top:var(--s3);color:var(--muted);font-size:15px}
.notes{display:grid;gap:var(--s7)}
.notes article{border-top:2px solid var(--line);padding-top:var(--s4)}
.notes h3{font-size:1.5rem;margin-bottom:var(--s2)}
.notes p{color:var(--muted)}
.notes p b{color:var(--text);font-weight:600}

/* що вміє застосунок */
.feat{padding-top:var(--s9)}
.feat-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--s8);align-items:end;margin-bottom:var(--s7)}
.feat-head .lead{margin-top:0}
.rows{display:grid}
.rows>div{display:grid;grid-template-columns:minmax(150px,.34fr) 1fr;gap:var(--s5);padding:var(--s5) 0;border-top:1px solid var(--line)}
.rows>div:last-child{border-bottom:1px solid var(--line)}
.rows dt{font-size:1.3rem;font-weight:700}
.rows dd{color:var(--muted)}
.rows dd b{color:var(--text);font-weight:600}

/* китайська: клітинка */
.zh{margin-top:var(--s9)}
.zh-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--s8);align-items:center}
.zh h3{font-size:clamp(1.7rem,1.2rem + 1.6vw,2.4rem);line-height:1.1;margin-bottom:var(--s4)}
.zh p{color:#c6dadd;max-width:36em}
.zh p+p{margin-top:var(--s4)}
.zh p b{color:#fff;font-weight:600}
.zh .zh-facts{list-style:none;margin:var(--s5) 0 0;display:grid;gap:var(--s2);color:#c6dadd}
.zh .zh-facts li{padding-left:22px;position:relative}
.zh .zh-facts li::before{content:"";position:absolute;left:0;top:.7em;width:10px;height:2px;background:var(--teal)}
.zh figure{width:min(100%,380px);margin-inline:auto}
.writing{background:var(--bg);border:1px solid #2c6b73;border-radius:24px;padding:var(--s5);box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.writing .wtitle{font-size:1.2rem;font-weight:700;margin-bottom:var(--s4)}
.writing .wcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s3) var(--s4);display:flex;justify-content:space-between;align-items:center}
.writing .wcard b{font-size:1.5rem;line-height:1.1;display:block}
.writing .wcard span{color:var(--muted);font-size:1rem}
.writing .wask{margin:var(--s4) 0 var(--s3);color:var(--muted);font-size:15px;line-height:1.4}
.cell{width:min(100%,240px);margin-inline:auto;aspect-ratio:1}
.cell svg{width:100%;height:100%}
.cell .box{fill:none;stroke:var(--line-strong);stroke-width:2;animation:okb 9s linear infinite}
.cell .guide{stroke:#59616c;stroke-width:1.5;stroke-dasharray:7 7}
.cell .stroke{fill:none;stroke:var(--text);stroke-width:12;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.cell .s1{animation:d1 9s linear infinite}.cell .s2{animation:d2 9s linear infinite}.cell .s3{animation:d3 9s linear infinite}
@keyframes d1{0%,4.9%{stroke-dashoffset:1;opacity:0}5%{stroke-dashoffset:1;opacity:1}13%,90%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes d2{0%,15.9%{stroke-dashoffset:1;opacity:0}16%{stroke-dashoffset:1;opacity:1}30%,90%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes d3{0%,32.9%{stroke-dashoffset:1;opacity:0}33%{stroke-dashoffset:1;opacity:1}41%,90%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes okb{0%,43%{stroke:var(--line-strong)}47%,90%{stroke:var(--ok)}96%,100%{stroke:var(--line-strong)}}
@keyframes okt{0%,43%{opacity:0}47%,90%{opacity:1}96%,100%{opacity:0}}
.writing .wok{margin-top:var(--s3);text-align:center;color:var(--ok);font-weight:600;font-size:15px;min-height:1.6em;animation:okt 9s linear infinite}
.writing .wbtns{margin-top:var(--s4);display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.writing .wbtns span{display:grid;place-items:center;min-height:44px;border-radius:12px;font-size:14px;font-weight:600;border:1px solid var(--line-strong);color:var(--muted)}
.writing .wbtns .main{background:var(--ok);border-color:var(--ok);color:#0C2017}
.zh figcaption{margin-top:var(--s3);color:#a9c6ca;font-size:14px;text-align:center}

/* ШІ і чого немає */
.ai-no{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--s8);padding-top:var(--s9);align-items:start}
.ai{background:var(--purple-bg);border:1px solid #4a3d70;border-radius:var(--r2);padding:var(--s6)}
.ai h3{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.2rem);line-height:1.12;margin-bottom:var(--s4)}
.ai p{color:var(--muted)}
.ai p+p{margin-top:var(--s3)}
.ai b{color:var(--text);font-weight:600}
.readings{display:inline-flex;align-items:baseline;gap:var(--s3);margin-top:var(--s5);padding:var(--s3) var(--s4);border:1px solid #4a3d70;background:var(--purple-bg);border-radius:var(--r2)}
.readings b{font-size:2.2rem;line-height:1;color:var(--purple-text)}
.readings span{color:#d9cbf7;font-size:1.15rem;font-weight:600}
.readings small{color:#b9a8dd;font-size:13px;display:block;font-weight:400}
.none h3{font-size:1.35rem;margin-bottom:var(--s4)}
.none ul{list-style:none;display:grid}
.none li{padding:var(--s3) 0;border-top:1px solid var(--line);color:var(--muted);display:grid;grid-template-columns:1.6em 1fr}
.none li:last-child{border-bottom:1px solid var(--line)}
.none li::before{content:"–";color:var(--teal-text);font-weight:700}
.none li b{color:var(--text);font-weight:600}

/* без реклами, дані у вас */
.safe-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s8);margin-top:var(--s7);align-items:start}
.says{display:grid;gap:var(--s6)}
.says div{border-top:2px solid var(--line-strong);padding-top:var(--s4)}
.says b{display:block;font-size:clamp(1.5rem,1.2rem + 1vw,2rem);line-height:1.12;margin-bottom:var(--s2)}
.says p{color:var(--muted)}
.net h3{font-size:1.25rem;margin-bottom:var(--s3)}
.net .small{margin-top:var(--s4)}
.data{width:100%;border-collapse:collapse;font-size:16px}
.data th,.data td{text-align:left;vertical-align:top;padding:var(--s3) var(--s3) var(--s3) 0;border-top:1px solid var(--line)}
.data thead th{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;border-top:0;padding-top:0}
.data td:first-child{font-weight:600;width:30%}
.data td:nth-child(2){color:var(--muted)}
.data tbody tr:last-child td{border-bottom:1px solid var(--line)}
.warn{margin-top:var(--s7);max-width:52em;display:grid;grid-template-columns:auto 1fr;gap:var(--s4) var(--s5);align-items:start}
.warn b{font-size:1.2rem}
.warn p{color:var(--muted)}

/* встановлення */
.dl-row{display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--s3);margin-top:var(--s6)}
.dl-fine{margin-top:var(--s3);color:var(--muted);font-size:15px;line-height:1.5;max-width:46em}
.dl-fine b{color:var(--text);font-weight:600}
.download .sha{background:var(--bg);border-color:var(--line-strong)}
.download .sha .hash code{background:var(--raised)}
.os-cols{display:grid;grid-template-columns:1fr 1fr;margin-top:var(--s7)}
.os{padding:0 var(--s7)}
.os:first-child{padding-left:0}
.os:last-child{padding-right:0;border-left:1px solid var(--line)}
.os h3{font-size:2rem;line-height:1.1}
.os .sub{margin:4px 0 var(--s5);color:var(--muted);font-size:15px}
.steps{list-style:none;counter-reset:s;display:grid;gap:var(--s5)}
.steps li{counter-increment:s;display:grid;grid-template-columns:48px 1fr;gap:var(--s4);align-items:start}
.steps li::before{content:counter(s);font-size:2.6rem;line-height:1;font-weight:700;color:var(--teal-text);letter-spacing:-.03em}
.steps li p+p{margin-top:6px}
.sha{margin-top:var(--s7);border:1px solid var(--line);border-radius:var(--r2);background:var(--surface)}
.sha summary{list-style:none;cursor:pointer;min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:0 var(--s5);font-weight:600}
.sha summary::-webkit-details-marker{display:none}
.sha summary::after{content:"+";font-size:1.6rem;color:var(--teal-text);line-height:1}
.sha[open] summary::after{content:"–"}
.sha .in{padding:0 var(--s5) var(--s5);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4)}
.sha code{white-space:normal;overflow-wrap:anywhere}
.sha .hash{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3);align-items:center}
.sha .hash small{display:block;color:var(--muted);font-size:14px}
.sha .hash code{display:block;white-space:normal;word-break:break-all;background:var(--bg);padding:10px 12px;border-radius:10px;font-size:15px;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.btn-copy{min-height:48px;padding:0 var(--s4);border-radius:12px;border:1px solid var(--line-strong);background:transparent;color:var(--text);font:600 15px/1 var(--font);cursor:pointer}
.btn-copy:hover{background:var(--raised)}
.copied{color:var(--ok)}

/* запитання */
.faq{padding-top:var(--s9)}
.faq-list{margin-top:var(--s7);display:grid}
.faq-list details{border-top:1px solid var(--line)}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;min-height:64px;padding:var(--s3) 0;display:flex;align-items:center;justify-content:space-between;gap:var(--s5);font-size:1.3rem;font-weight:600;line-height:1.25}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";flex:0 0 auto;font-size:2rem;font-weight:400;color:var(--teal-text);line-height:1}
.faq-list details[open] summary::after{content:"–"}
.faq-list summary:hover{color:#fff}
.faq-list .ans{padding:0 0 var(--s5);max-width:46em;color:var(--muted)}
.faq-list .ans p+p,.faq-list .ans p+pre{margin-top:var(--s3)}
.faq-list .ans b{color:var(--text);font-weight:600}
pre.sample{margin:0;padding:var(--s3) var(--s4);background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow-x:auto;font:600 16px/1.6 var(--font);color:var(--text)}

/* про застосунок */
.about .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s8);align-items:center}
.about h2{margin-bottom:var(--s5)}
.about p{font-size:1.2rem;color:#e1d6fa;max-width:34em}
.about p+p{margin-top:var(--s4)}
.contact{border:1px solid #4a3d70;background:var(--bg);border-radius:var(--r2);padding:var(--s6)}
.contact p{font-size:1.2rem;line-height:1.4;color:var(--text);max-width:none}
.contact-actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.contact-actions .btn{flex:1 1 auto}
.contact-actions .btn-quiet{min-width:11.5rem}
.contact .addr{display:block;margin-top:var(--s5);font-size:clamp(1.1rem,1rem + .6vw,1.4rem);font-weight:700;overflow-wrap:anywhere;color:var(--purple-text);user-select:all}

footer{border-top:1px solid var(--line);padding:var(--s6) 0 var(--s7);color:var(--muted);font-size:15px}
footer .wrap{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);justify-content:space-between;align-items:center}
footer a{color:var(--teal-text)}

/* текстова сторінка (політика) і 404 */
.page{padding:var(--s8) 0 var(--s9)}
.prose{max-width:46rem}
.prose h1{font-size:clamp(2.1rem,1.4rem + 2.4vw,3.2rem);line-height:1.08;letter-spacing:-.014em;margin-bottom:var(--s5)}
.prose h2{font-size:1.7rem;margin:var(--s8) 0 var(--s3);letter-spacing:-.005em}
.prose h3{font-size:1.2rem;margin:var(--s6) 0 var(--s2)}
.prose p,.prose li{color:#d3d8de}
.prose p+p{margin-top:var(--s3)}
.prose ul{margin:var(--s3) 0 0;padding-left:1.2em}
.prose li{margin-top:6px}
.prose b{color:var(--text);font-weight:600}
.prose .draft{padding:var(--s4) var(--s5);border:1px solid var(--g2);background:var(--g2-bg);border-radius:var(--r2);color:var(--g2);margin:var(--s5) 0 var(--s6)}
.prose .draft b{color:#fff}
.prose .summary{padding:var(--s4) var(--s5);border:1px solid var(--line);background:var(--surface);border-radius:var(--r2);margin-bottom:var(--s5)}
.prose .summary ul{margin-top:var(--s2)}
.prose table{width:100%;border-collapse:collapse;font-size:16px;margin:var(--s4) 0}
.prose th,.prose td{text-align:left;vertical-align:top;padding:var(--s3) var(--s3) var(--s3) 0;border-top:1px solid var(--line)}
.prose thead th{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-top:0;font-weight:600}
.prose tbody tr:last-child td{border-bottom:1px solid var(--line)}
.err{min-height:60vh;display:grid;align-content:center;padding:var(--s9) 0}
.err .big{font-size:clamp(5rem,3rem + 12vw,12rem);line-height:.9;font-weight:700;letter-spacing:-.05em;color:var(--teal-text)}
.err h1{font-size:clamp(1.8rem,1.2rem + 2vw,2.6rem);margin:var(--s4) 0}
.err p{color:var(--muted);max-width:34em}
.err .row{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}

/* вузькі екрани */
@media (max-width:1000px){
  .nav-wide{display:none}.menu{display:block}.top .btn{display:none}
  .hero{padding-top:var(--s7);padding-bottom:var(--s7)}
  .hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "cta" "stage" "notes";row-gap:0}
  .stage{margin-top:var(--s7)}
  .hero-notes{margin-top:var(--s6)}
  .facts ul{grid-template-columns:1fr 1fr}
  .how-split,.zh-grid,.ai-no,.safe-grid,.about .wrap,.feat-head{grid-template-columns:minmax(0,1fr);gap:var(--s7)}
  .os-cols{grid-template-columns:1fr}
  .os{padding:0}
  .os:last-child{border-left:0;border-top:1px solid var(--line);padding-top:var(--s7);margin-top:var(--s7)}
  .rows>div{grid-template-columns:1fr;gap:var(--s2)}
  .band{padding-block:var(--s8)}
  .zh{margin-top:var(--s8)}
  /* интервали: стовпчиком, цифри ростуть донизу */
  .num-row{--nb:clamp(.5rem,1.7vw + .25rem,.74rem);flex-direction:column;align-items:stretch;gap:0;margin-left:11px}
  .num-row li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr);grid-template-areas:"n u" "n c";align-items:end;column-gap:var(--s5);padding:var(--s3) 0 var(--s3) var(--s6);margin:0;border-left:3px solid var(--teal)}
  .num-row li:nth-child(n+4){border-left-color:var(--purple)}
  .num-row li::after{display:none}
  .num-row li::before{left:-11px;top:calc(var(--nb)*var(--m)*.38);bottom:auto}
  .num-row b{grid-area:n;align-self:end}
  .num-row i{grid-area:u;align-self:end;margin-top:0}
  .num-row span{grid-area:c;align-self:start}
}
@media (max-width:560px){
  body{font-size:17px}
  .band{padding-block:var(--s7)}
  .hero-cta .btn,.dl-row .btn{width:100%}
  .stores{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .store{display:block}
  .hero-head h1{font-size:clamp(2rem,9.4vw,2.5rem)}
  .hero-head .lede{margin-top:var(--s4)}
  .deck{aspect-ratio:3/2;width:calc(100% - 22px)}
  .behind{transform:translate(18px,-26px) rotate(4deg);padding:7px 18px}
  .behind b{font-size:1.3rem}.behind span{font-size:.9rem;line-height:1.7}
  .grade{font-size:14px;min-height:56px;flex-direction:column;gap:2px}
  .grades{gap:6px}
  .cap{font-size:12px}
  .face{padding:var(--s4)}
  .hint{bottom:12px;font-size:13px}
  .tag{top:12px;left:14px}
  .how-head{padding-top:var(--s8)}
  .nums{margin-top:var(--s7);padding-top:var(--s7)}
  .notes h3{font-size:1.35rem}
  .writing{padding:var(--s4)}
  .data thead{display:none}
  .data,.data tbody,.data tr,.data td{display:block;width:100%}
  .data tr{padding:var(--s3) 0;border-top:1px solid var(--line)}
  .data td{border:0;padding:2px 0;width:100%!important}
  .data tbody tr:last-child td{border-bottom:0}
  .data td::before{content:attr(data-label);display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:6px}
  .warn{grid-template-columns:1fr}
  .steps li{grid-template-columns:36px 1fr;gap:var(--s3)}
  .steps li::before{font-size:2.1rem}
  .sha .hash{grid-template-columns:1fr}
  .btn-copy{width:100%}
  .faq-list summary{font-size:1.15rem}
  .contact{padding:var(--s5)}
  .contact-actions .btn{width:100%}
  .prose table,.prose thead,.prose tbody,.prose tr,.prose td,.prose th{display:block}
  .prose thead{display:none}
  .prose tr{padding:var(--s3) 0;border-top:1px solid var(--line)}
  .prose td{border:0;padding:2px 0}
  .prose td::before{content:attr(data-label);display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:6px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .flip-inner,.behind,.btn,.grade{transition:none}
  .flip.peek .flip-inner,.rated li,.arrow{animation:none}
  .cell .box{animation:none;stroke:var(--ok)}
  .cell .stroke{animation:none;stroke-dashoffset:0;opacity:1}
  .writing .wok{animation:none;opacity:1}
  .flip.is-back .flip-inner{transform:none}
  .flip .face.front{transition:none}
  .flip.is-back .face.front{visibility:hidden}
  .flip:not(.is-back) .face.back{visibility:hidden}
  .face.back{transform:none}
}