/* NZT. Black and white, no brand color: the habitnex system, with Telegram's pieces (chat, keyboard, poll, player)
   drawn in the same ink. Every page uses this file; the web app adds app.css. */
@font-face { font-family: "Onest"; font-weight: 800; font-display: swap; src: url("../fonts/onest-latin-800.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-weight: 800; font-display: swap; src: url("../fonts/onest-latin-ext-800.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest"; font-weight: 800; font-display: swap; src: url("../fonts/onest-cyrillic-800.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  color-scheme: light;
  --paper: #ffffff; --ink: #0a0a0a; --soft: #5f5f66; --line: #e5e5ea; --chip: #f4f4f6; --band: #0a0a0a; --ev: #d1d1d6;
  --canvas: #f2f2f7; --card: #ffffff; --a-ink: #000000; --a-paper: #ffffff; --a-chip: #f4f4f6; --emph: #0a0a0a;
  --sec: rgba(60, 60, 67, 0.6); --hair: rgba(60, 60, 67, 0.145); --gray: #8e8e93; --gray3: #c7c7cc; --gray5: #e5e5ea;
  --habit-fill: #ffffff; --habit-line: #0a0a0a; --notif: rgba(250, 250, 252, 0.97); --notif-ink: #0a0a0a; --notif-soft: #6b6b72;
  --display: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --spring: cubic-bezier(0.3, 1.25, 0.4, 1); --pop: cubic-bezier(0.3, 1.7, 0.45, 1); --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l2.9 2.8 5.9-6.3' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --moon: 1; --sun: 0;
}
/* The page is white for everyone; it turns dark only when the visitor picks dark with the switch in the nav. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0a0a0a; --ink: #ffffff; --soft: #a1a1a8; --line: #2c2c2e; --chip: #1c1c1e; --band: #1c1c1e; --ev: #48484a;
  --canvas: #000000; --card: #1c1c1e; --a-ink: #ffffff; --a-paper: #000000; --a-chip: #2c2c2e; --emph: #343436;
  --sec: rgba(235, 235, 245, 0.6); --hair: rgba(84, 84, 88, 0.6); --gray3: #48484a; --gray5: #2c2c2e;
  --habit-fill: #2c2c2e; --habit-line: #6b6b6b; --notif: rgba(44, 44, 46, 0.97); --notif-ink: #ffffff; --notif-soft: #a1a1a8;
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l2.9 2.8 5.9-6.3' fill='none' stroke='%230a0a0a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --moon: 0; --sun: 1;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: var(--display); font-weight: 800; letter-spacing: -0.045em; line-height: 1.06; text-wrap: balance; }
h1 { font-size: clamp(40px, 12.4vw, 88px); }
h2 { font-size: clamp(34px, 5.4vw, 64px); }
@media (min-width: 961px) { h1 { font-size: clamp(60px, 6.6vw, 92px); } }
:lang(ru) :is(h1, h2) { letter-spacing: -0.035em; }
h3 { font-size: 20px; letter-spacing: -0.01em; line-height: 1.25; }
a { color: inherit; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; text-align: inherit; -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* Controls and the mock screens behave like interface, not like text: they can't be selected. */
button, .btn, .nav, .ticker, .phone, .panel, .lock, .prog-wrap, .cell .art, .flags, .player { -webkit-user-select: none; user-select: none; }
section[id], .doc h2[id] { scroll-margin-top: 72px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.sec { padding: clamp(72px, 10vw, 136px) 0; }
.sec.top0 { padding-top: 0; }
.lede { font-size: clamp(19px, 2.1vw, 23px); line-height: 1.45; color: var(--soft); max-width: 34em; }
.eyebrow { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--soft); }
.fine { font-size: 14px; color: var(--soft); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
kbd, code { font-family: var(--mono); font-size: 0.88em; }
mark.em { display: inline-block; color: #fff; margin-top: 0.13em; padding: 0 0.14em 0.125em; border-radius: 0.14em; line-height: 1; background: linear-gradient(var(--emph), var(--emph)) no-repeat 0 0 / 100% 100%; }

/* Things arrive as you scroll; the highlight wipes in like the second half of the capsule sliding home. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease) var(--d, 0s), transform 0.8s var(--ease) var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal mark.em { background-size: 0 100%; color: inherit; transition: background-size 0.6s var(--ease) 0.25s, color 0.3s 0.4s; }
.js .reveal.in mark.em { background-size: 100% 100%; color: #fff; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 28px; border-radius: 999px; font-size: 17px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform 0.25s var(--spring), background 0.25s, color 0.25s; }
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.ghost { background: var(--chip); color: var(--ink); }
.btn.sm { min-height: 40px; padding: 0 18px; font-size: 15px; }
.btn.wide { width: 100%; }
.btn[disabled] { background: var(--gray5); color: var(--sec); cursor: default; }
.btn[aria-busy="true"] { opacity: 0.6; pointer-events: none; }
.btn svg { width: 16px; height: 16px; flex: none; }

/* The capsule: two halves, the dark one slides home. */
.brand { display: inline-flex; align-items: center; gap: 7px; font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: -0.05em; text-decoration: none; color: var(--ink); }
.brand svg { width: 34px; height: 34px; flex: none; }
.brand .e { fill: var(--ev); }
.brand .h { fill: var(--ink); animation: capIn 0.7s var(--spring) 0.25s both; }
.brand:hover .h { animation: capAgain 0.7s var(--spring); }
@keyframes capIn { from { transform: translate(7px, -7px); } to { transform: none; } }
@keyframes capAgain { from { transform: translate(7px, -7px); } to { transform: none; } }

/* Nav */
.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 96%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); border-bottom: 1px solid transparent; transition: border-color 0.3s; }
.nav.scrolled { border-color: var(--line); }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.nav nav { display: flex; gap: 2px; }
.nav nav a { font-size: 15px; font-weight: 600; text-decoration: none; padding: 8px 11px; border-radius: 999px; color: var(--soft); white-space: nowrap; transition: background 0.2s, color 0.2s; }
.nav nav a:hover, .nav nav a[aria-current] { background: var(--chip); color: var(--ink); }
.nav-end { display: flex; align-items: center; gap: 8px; }
.nav .login { font-size: 15px; font-weight: 600; text-decoration: none; padding: 0 12px; height: 40px; display: inline-flex; align-items: center; border-radius: 999px; color: var(--soft); white-space: nowrap; }
.nav .login:hover { color: var(--ink); background: var(--chip); }
.lang { position: relative; }
.lang summary { list-style: none; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 999px; background: var(--chip); font-size: 13px; font-weight: 700; letter-spacing: 0.03em; cursor: pointer; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary svg { width: 17px; height: 17px; }
.lang-menu { position: absolute; right: 0; top: 48px; z-index: 60; min-width: 200px; padding: 6px; border-radius: 18px; background: var(--card); box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--line); display: grid; }
.lang[open] .lang-menu { animation: fadeUp 0.25s var(--ease); }
.lang-menu a { padding: 9px 12px; border-radius: 12px; font-size: 15px; font-weight: 600; text-decoration: none; }
.lang-menu a:hover { background: var(--chip); }
.lang-menu a[aria-current] { background: var(--ink); color: var(--paper); }
.theme { display: none; width: 40px; height: 40px; border-radius: 50%; background: var(--chip); place-items: center; transition: transform 0.25s var(--spring); }
.js .theme { display: grid; }
.theme:active { transform: scale(0.9); }
.theme svg { grid-area: 1 / 1; width: 18px; height: 18px; transition: opacity 0.3s, transform 0.6s var(--spring); }
.theme .moon { opacity: var(--moon); transform: rotate(calc(var(--sun) * 90deg)) scale(calc(0.4 + var(--moon) * 0.6)); }
.theme .sun { opacity: var(--sun); transform: rotate(calc(var(--moon) * -90deg)) scale(calc(0.4 + var(--sun) * 0.6)); }
@media (max-width: 1180px) { .nav nav { display: none; } }
@media (max-width: 640px) { .nav .login { display: none; } }
@media (max-width: 480px) { .nav-in { gap: 8px; } .lang summary { width: 40px; padding: 0; justify-content: center; } .lang summary span { display: none; } .nav .btn.sm { padding: 0 14px; font-size: 14px; } }
@media (max-width: 360px) { .nav .wrap { padding: 0 14px; } .nav .brand { font-size: 0; gap: 0; } }
/* Set by the script when the bar's button has long words: the logo stands without its name. */
.nav.tight .brand { font-size: 0; gap: 0; }
.nav.tight .btn.sm { padding: 0 12px; font-size: 13px; }

/* Hero */
.hero { position: relative; overflow: hidden; }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.8fr); gap: 40px; align-items: center; padding-top: clamp(40px, 6vw, 84px); padding-bottom: clamp(64px, 8vw, 112px); }
.hero-text { display: flex; flex-direction: column; gap: 26px; align-items: flex-start; position: relative; z-index: 2; }
.hero h1 .ln { display: block; overflow: hidden; padding: 0.1em 0.04em; margin: -0.1em -0.04em; }
.hero h1 .ln > span { display: inline-block; animation: rise 0.9s var(--ease) both; }
.hero h1 .ln:nth-child(2) > span { animation-delay: 0.12s; }
.hero h1 mark.em { margin-top: 0; animation: wipe 0.7s var(--ease) 0.55s both; }
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes wipe { from { background-size: 0 100%; color: var(--ink); } to { background-size: 100% 100%; color: #fff; } }
.hero .fade { animation: fadeUp 0.8s var(--ease) both; animation-delay: var(--d, 0.3s); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; }
.btn .eq { display: none; gap: 2px; align-items: flex-end; height: 14px; }
.btn .eq i { width: 3px; border-radius: 2px; background: currentColor; animation: eq 0.9s ease-in-out infinite alternate; }
.btn .eq i:nth-child(2) { animation-delay: 0.2s; } .btn .eq i:nth-child(3) { animation-delay: 0.4s; }
@keyframes eq { from { height: 4px; } to { height: 14px; } }
.btn.speaking .eq { display: inline-flex; }
.btn.speaking .ic-play { display: none; }
.hero-art { position: relative; display: flex; justify-content: center; }
.float { position: absolute; border-radius: 14px; animation: drift var(--t, 9s) ease-in-out infinite alternate; translate: calc(var(--mx, 0) * var(--z, 10) * 1px) calc(var(--my, 0) * var(--z, 10) * 1px); transition: translate 0.6s var(--ease); }
.float.gapf { border: 1.5px dashed var(--gray3); }
.float.evf { background: var(--chip); }
@keyframes drift { from { transform: translateY(-10px); } to { transform: translateY(12px); } }

/* The phone */
.phone { position: relative; z-index: 1; width: min(330px, 100%); height: 680px; padding: 8px; border-radius: 54px; background: #050506; box-shadow: 0 0 0 1.5px #4a4a4e, 0 0 0 3.5px #1b1b1d, 0 50px 90px -30px rgba(0, 0, 0, 0.45); animation: fadeUp 1s var(--ease) 0.2s both; }
.screen { position: relative; height: 100%; border-radius: 46px; overflow: hidden; background: var(--canvas); color: var(--a-ink); display: flex; flex-direction: column; }
.screen::after { content: ""; position: absolute; inset: 0; z-index: 10; background: var(--canvas); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.phone.resetting .screen::after { opacity: 1; }
.island { position: absolute; left: 50%; top: 9px; width: 86px; height: 25px; margin-left: -43px; border-radius: 13px; background: #000; z-index: 4; }
.status { height: 46px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 4px 22px 0 28px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.batt { width: 23px; height: 11px; border-radius: 3.5px; box-shadow: inset 0 0 0 1px var(--sec); padding: 2px; }
.batt::after { content: ""; display: block; height: 100%; width: 78%; border-radius: 1.5px; background: var(--a-ink); }
.swap { display: inline-grid; }
.swap > * { grid-area: 1 / 1; font-style: normal; transition: opacity 0.3s; }
.swap > :last-child { opacity: 0; }

/* Telegram, in ink */
.tg-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 4px 14px 10px; border-bottom: 1px solid var(--hair); }
.tg-back { font-size: 26px; line-height: 1; font-weight: 300; margin-right: -2px; }
.tg-ava { width: 38px; height: 38px; border-radius: 50%; background: var(--a-ink); display: grid; place-items: center; flex: none; }
.tg-ava svg { width: 26px; height: 26px; }
.tg-ava svg { --ce: #6b6b70; --ch: var(--a-paper); }
.tg-who { flex: 1; min-width: 0; line-height: 1.2; }
.tg-who b { display: block; font-size: 16px; }
.tg-who span { font-size: 13px; color: var(--sec); }
.pill { height: 32px; padding: 0 12px; border-radius: 16px; background: var(--card); display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.roll { display: inline-block; height: 20px; line-height: 20px; overflow: hidden; }
.roll > span { display: block; transition: transform 0.6s var(--spring); }
.roll i { display: block; font-style: normal; }
.is-up .roll > span { transform: translateY(-20px); }
.tg-chat { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 10px 10px 8px; }
.msg { max-width: 88%; padding: 7px 11px 6px; border-radius: 17px; background: var(--card); font-size: 13.5px; line-height: 1.38; position: relative; transform-origin: 0 100%; transition: opacity 0.3s, transform 0.45s var(--spring); }
.msg.out { align-self: flex-end; background: var(--a-ink); color: var(--a-paper); border-bottom-right-radius: 6px; transform-origin: 100% 100%; }
.msg.in { align-self: flex-start; border-bottom-left-radius: 6px; }
.msg .t { float: right; margin: 6px 0 -3px 10px; font-size: 11px; opacity: 0.55; font-variant-numeric: tabular-nums; }
.msg b { font-weight: 700; }
.msg .q { font-style: italic; }
/* A bot message with its inline button under it, arriving as one. */
.tg-grp { align-self: flex-start; max-width: 88%; display: flex; flex-direction: column; gap: 4px; transform-origin: 0 100%; transition: opacity 0.3s, transform 0.45s var(--spring); }
.tg-grp .msg { max-width: 100%; }
.tg-grp.gone { display: none; }
.tg-grp.hide { opacity: 0; transform: scale(0.9) translateY(10px); }
.tg-list { display: block; margin: 3px 0; }
.tg-list > span { display: block; }
.tg-ik { position: relative; display: grid; place-items: center; min-height: 36px; padding: 0 22px; border-radius: 12px; background: var(--card); font-size: 13.5px; font-weight: 700; text-align: center; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12); transition: transform 0.2s var(--spring), background 0.2s, color 0.2s; }
.tg-ik svg { position: absolute; right: 7px; top: 7px; width: 9px; height: 9px; }
.tg-ik.pressed { transform: scale(0.96); background: var(--a-ink); color: var(--a-paper); }
.dots::after { content: ""; animation: dots3 1.2s steps(4) infinite; }
@keyframes dots3 { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.voice { display: flex; align-items: center; gap: 9px; min-width: 210px; padding: 8px 10px 8px 8px; }
.voice .pb { width: 38px; height: 38px; border-radius: 50%; background: var(--a-ink); color: var(--a-paper); display: grid; place-items: center; flex: none; }
.voice .pb svg { width: 16px; height: 16px; }
.voice .vx { flex: 1; min-width: 0; }
.voice .vx b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voice .vx span { font-size: 12px; color: var(--sec); font-variant-numeric: tabular-nums; }
.wave { display: flex; align-items: center; gap: 2px; height: 22px; margin: 2px 0; }
.wave i { flex: 1; max-width: 3px; min-width: 2px; border-radius: 2px; background: var(--gray3); height: calc(var(--h, 0.5) * 100%); transition: background 0.2s; }
.wave i.on { background: var(--a-ink); }
.msg.out .wave i { background: rgba(255, 255, 255, 0.35); }
.msg.out .wave i.on { background: var(--a-paper); }
:root[data-theme="dark"] .msg.out .wave i { background: rgba(0, 0, 0, 0.3); }
.aprog { display: block; height: 3px; border-radius: 2px; background: var(--gray5); margin-top: 6px; overflow: hidden; }
.aprog i { display: block; height: 100%; width: 0; background: var(--a-ink); }
.tg-input { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-top: 1px solid var(--hair); background: var(--canvas); }
.tg-input span { flex: 1; height: 34px; border-radius: 17px; background: var(--card); display: flex; align-items: center; padding: 0 14px; font-size: 14px; color: var(--gray); }
.tg-input i { width: 34px; height: 34px; display: grid; place-items: center; color: var(--sec); }
.tg-input svg { width: 20px; height: 20px; }
.tg-input .tg-menu { flex: none; padding: 0 14px; background: var(--a-ink); color: var(--a-paper); font-size: 14px; font-weight: 700; }
.phone .tg-input { padding-bottom: 24px; }
/* The Mini App: a sheet that slides up over the chat, with Telegram's own bar on top. */
.tg-dim { position: absolute; inset: 0; z-index: 4; background: rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity 0.4s; pointer-events: none; }
.tg-sheet { position: absolute; left: 0; right: 0; top: 100px; bottom: 0; z-index: 5; display: flex; flex-direction: column; overflow: hidden; border-radius: 18px 18px 0 0; background: var(--paper); box-shadow: 0 -12px 40px -16px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--line); transform: translateY(103%); transition: transform 0.55s var(--ease); }
.is-open .tg-dim { opacity: 1; }
.is-open .tg-sheet { transform: none; }
.tg-bar { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; height: 48px; padding: 0 14px; border-bottom: 1px solid var(--hair); }
.tg-bar b { font-size: 16px; }
.tg-x { justify-self: start; font-size: 15px; font-weight: 500; transition: opacity 0.2s; }
.tg-x.pressed { opacity: 0.4; }
.tg-more { justify-self: end; width: 28px; height: 28px; border-radius: 50%; background: var(--chip); display: flex; align-items: center; justify-content: center; gap: 2.5px; }
.tg-more i { width: 3.5px; height: 3.5px; border-radius: 50%; background: currentColor; }
.tg-sheet .ap-body { padding-top: 10px; }
.kb { flex: none; display: grid; gap: 5px; padding: 6px 6px 22px; background: var(--gray5); }
.kb .row { display: flex; gap: 5px; }
.kb .key { flex: 1; height: 38px; border-radius: 8px; background: var(--card); display: grid; place-items: center; font-size: 13px; font-weight: 600; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; transition: transform 0.2s var(--spring), background 0.2s, color 0.2s; }
.kb .key.pressed, .kb button.key:active { transform: scale(0.94); background: var(--a-ink); color: var(--a-paper); }
.tap { position: absolute; left: 0; top: 0; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; z-index: 6; background: rgba(150, 150, 158, 0.42); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.75), 0 2px 10px rgba(0, 0, 0, 0.18); opacity: 0; pointer-events: none; }
.tap.on { animation: tap 0.62s var(--ease); }
@keyframes tap { 0% { opacity: 0; transform: scale(1.5); } 35% { opacity: 1; transform: scale(1); } 55% { opacity: 1; transform: scale(0.82); } 100% { opacity: 0; transform: scale(1.1); } }

/* Ticker: the /start quotes, then what NZT is made of */
.ticker { background: var(--band); color: #fff; overflow: hidden; padding: 22px 0; display: flex; flex-direction: column; gap: 20px; }
.track { display: flex; width: max-content; animation: tick 90s linear infinite; }
.ticker:hover .track { animation-play-state: paused; }
.track > div { display: flex; align-items: center; gap: 28px; padding-right: 28px; }
.track .q { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -0.04em; white-space: nowrap; }
.track .who { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.55); white-space: nowrap; }
.track svg.cap { width: 30px; height: 30px; flex: none; }
.track svg.cap { --ce: #48484a; --ch: #fff; }
.track.rev { animation-direction: reverse; animation-duration: 64s; }
.track.rev > div { gap: 20px; padding-right: 20px; }
.tool { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px 0 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); font-size: 16px; font-weight: 600; white-space: nowrap; }
.tool i { width: 30px; height: 30px; flex: none; border-radius: 50%; background: #fff; color: #0a0a0a; display: grid; place-items: center; font-style: normal; font-size: 15px; }
.tool i svg { width: 16px; height: 16px; }
.tool.us { background: #fff; color: #0a0a0a; padding: 0 20px 0 8px; gap: 6px; font-family: var(--display); font-weight: 800; font-size: 21px; letter-spacing: -0.05em; }
.tool.us svg { width: 30px; height: 30px; }
.tool.us svg { --ce: #c7c7cc; --ch: #0a0a0a; }
@keyframes tick { to { transform: translateX(-50%); } }

/* Sections */
.head { display: flex; flex-direction: column; gap: 20px; max-width: 840px; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 56px; }
.principle { border-top: 2px solid var(--ink); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.principle p { color: var(--soft); font-size: 16px; }
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.feature.flip .f-text { order: 2; }
.f-text { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ticks li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; font-size: 16px; }
.ticks li::before { content: ""; width: 26px; height: 26px; border-radius: 50%; background: var(--ink) var(--tick) center / 13px no-repeat; }
.panel { background: var(--canvas); color: var(--a-ink); border-radius: 30px; padding: 18px; box-shadow: inset 0 0 0 1px var(--line); }
.hint { font-size: 13px; font-weight: 600; color: var(--sec); margin: 2px 4px 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chipb { min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--card); font-size: 14px; font-weight: 600; white-space: nowrap; transition: background 0.2s, color 0.2s, transform 0.25s var(--spring); }
.chipb:active { transform: scale(0.95); }
.chipb[aria-pressed="true"], .chipb[aria-checked="true"], .chipb.on { background: var(--a-ink); color: var(--a-paper); }
.chipb svg { width: 16px; height: 16px; vertical-align: -3px; }
.note { font-size: 13px; color: var(--sec); margin: 12px 4px 0; }

/* Word card: the bot's message, field for field */
.wcard { border-radius: 22px; background: var(--card); padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.wc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.wc-top small { font-size: 13px; font-weight: 700; color: var(--sec); }
.wc-word { font-family: var(--display); font-weight: 800; font-size: clamp(32px, 4vw, 42px); letter-spacing: -0.04em; line-height: 1.05; overflow-wrap: anywhere; }
.wc-ipa { font-size: 16px; font-style: italic; color: var(--sec); margin-top: 4px; }
.wc-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tag { height: 28px; padding: 0 11px; border-radius: 14px; background: var(--a-chip); display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; white-space: nowrap; }
.play { width: 52px; height: 52px; border-radius: 50%; background: var(--a-ink); color: var(--a-paper); display: grid; place-items: center; flex: none; transition: transform 0.25s var(--spring); }
.play:active { transform: scale(0.9); }
.play svg { width: 20px; height: 20px; grid-area: 1 / 1; transition: opacity 0.2s, transform 0.3s var(--spring); }
.play .i-pause, .play.on .i-play { opacity: 0; transform: scale(0.5); }
.play.on .i-pause { opacity: 1; transform: none; }
.spell { display: flex; flex-wrap: wrap; gap: 4px; min-height: 34px; align-items: center; }
.spell span { min-width: 26px; height: 32px; padding: 0 6px; border-radius: 8px; background: var(--a-chip); display: grid; place-items: center; font-weight: 700; font-size: 15px; text-transform: uppercase; color: var(--sec); transition: background 0.15s, color 0.15s, transform 0.25s var(--pop); }
.spell span.on { background: var(--a-ink); color: var(--a-paper); transform: translateY(-3px); }
.spell span.done { color: var(--a-ink); }
.spell span.stage { min-width: 0; height: auto; padding: 0; background: none; text-transform: none; transform: none; font-size: 13px; font-weight: 600; color: var(--sec); margin-left: 6px; }
.wc-groups { display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.45; }
.wc-groups > div { display: flex; flex-direction: column; gap: 3px; padding-top: 12px; border-top: 1px solid var(--hair); }
.wc-groups b { font-weight: 700; }
.wc-groups i { font-style: italic; }
.wc-groups .said { background: var(--a-ink); color: var(--a-paper); border-radius: 4px; box-shadow: 0 0 0 2px var(--a-ink); }
.wc-foot { font-size: 12.5px; font-style: italic; color: var(--sec); }

/* Speaking audio: the bot's interactive player, monochrome. Phrase kinds are told apart by their underline. */
.player { border-radius: 30px; background: linear-gradient(170deg, #121214 0%, #1e1e21 60%, #2b2b2f 100%); color: #fff; padding: 18px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.08); --muted: rgba(255, 255, 255, 0.6); --dim: rgba(255, 255, 255, 0.32); }
.pl-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pl-top small { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.pl-top b { font-size: 15px; }
.lyrics { height: 200px; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 16%, #000 78%, transparent); }
.lyrics-in { position: absolute; left: 0; right: 0; top: 0; padding: 70px 0 120px; transition: transform 0.6s var(--ease); }
.cue { font-family: var(--display); font-weight: 800; font-size: clamp(19px, 2.2vw, 23px); line-height: 1.25; letter-spacing: -0.02em; padding: 5px 0; color: var(--dim); cursor: pointer; transition: color 0.25s; }
.cue.past { color: rgba(255, 255, 255, 0.45); }
.w { border-radius: 5px; transition: color 0.12s, background 0.12s; }
.w.said { color: #fff; }
.w.now { color: #000; background: #fff; box-shadow: 0 0 0 3px #fff; }
.w.hl { text-decoration-line: underline; text-decoration-thickness: 2.5px; text-underline-offset: 5px; text-decoration-color: currentColor; }
.k-idiom { --ul: wavy; } .k-collocation { --ul: solid; } .k-grammar { --ul: double; } .k-linker { --ul: dashed; } .k-vocab { --ul: dotted; }
.w.hl { text-decoration-style: var(--ul, solid); }
.w.hl.now { text-decoration-color: #000; }
.pl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pl-card { border-radius: 16px; background: rgba(255, 255, 255, 0.08); padding: 12px 14px; height: 196px; display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.pl-card h4 { margin: 0 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 700; }
.pl-word { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -0.03em; line-height: 1.15; overflow-wrap: anywhere; }
.pl-pos { font-size: 13px; font-style: italic; color: var(--muted); }
.pl-mean { font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, 0.86); }
.pl-uz { font-size: 13px; font-weight: 700; }
.legend-k { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); flex: none; }
.legend-k span { text-decoration-line: underline; text-decoration-style: var(--ul); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.phr { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; margin-top: 6px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.3) transparent; }
.phr button { display: flex; gap: 8px; align-items: baseline; text-align: left; font-size: 13.5px; font-weight: 600; line-height: 1.3; padding: 4px 0; }
.phr button span:first-child { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 700; flex: none; }
.phr button span:last-child { text-decoration-line: underline; text-decoration-style: var(--ul); text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, 0.5); }
.phr button:hover span:last-child { text-decoration-color: #fff; }
.pl-bar { display: grid; gap: 8px; }
.pl-controls { display: flex; align-items: center; justify-content: center; gap: 22px; }
.pl-controls button { color: var(--muted); transition: color 0.15s, transform 0.15s; position: relative; }
.pl-controls button:hover { color: #fff; }
.pl-controls .skip svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pl-controls .skip span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 9px; font-weight: 800; padding-top: 2px; }
.pl-play { width: 44px; height: 44px; border-radius: 35%; background: #fff; color: #000 !important; display: grid; place-items: center; }
.pl-play svg { width: 20px; height: 20px; fill: currentColor; }
.pl-speed { font-size: 12px; font-weight: 800; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; padding: 3px 10px; min-width: 50px; text-align: center !important; }
.seekrow { display: flex; align-items: center; gap: 10px; }
.seekrow span { font-size: 12px; color: var(--muted); width: 34px; font-variant-numeric: tabular-nums; }
.seekrow span:first-child { text-align: right; }
.player input[type=range] { -webkit-appearance: none; appearance: none; flex: 1; height: 5px; border-radius: 3px; background: linear-gradient(to right, #fff var(--p, 0%), rgba(255, 255, 255, 0.25) var(--p, 0%)); outline: none; cursor: pointer; margin: 0; }
.player input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.player input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; }

/* Speaking practice: the examiner's question on a dark screen, the voice answer, the verdict */
.opts { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.opt { display: flex; flex-direction: column; justify-content: center; gap: 2px; width: 100%; min-height: 60px; padding: 13px 18px; border-radius: 16px; background: var(--chip); transition: background 0.2s, color 0.2s, transform 0.25s var(--spring); }
.opt:active { transform: scale(0.97); }
.opt b { font-size: 17px; font-weight: 600; }
.opt span { font-size: 15px; opacity: 0.72; }
.opt[aria-checked="true"] { background: var(--ink); color: var(--paper); }
.panel .opt { background: var(--card); }
.sheet .opt { background: var(--a-chip); }
.panel .qbox { background: var(--card); }
.panel .btn.ghost { background: var(--card); }
.panel .opt[aria-checked="true"], .sheet .opt[aria-checked="true"] { background: var(--a-ink); color: var(--a-paper); }
.lock { width: 100%; max-width: 420px; justify-self: center; border-radius: 40px; padding: 22px 14px 16px; background: linear-gradient(170deg, #161618 0%, #2a2a2d 55%, #4a4a4d 100%); display: flex; flex-direction: column; gap: 8px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.lock .lk-head { color: rgba(255, 255, 255, 0.92); text-align: center; margin: 0 0 12px; }
.lock .lk-head b { display: block; font-size: 15px; }
.lock .lk-head span { font-size: 13px; color: rgba(255, 255, 255, 0.55); }
.notif { border-radius: 22px; background: var(--notif); color: var(--notif-ink); padding: 12px; display: grid; grid-template-columns: 36px 1fr; gap: 10px; text-align: left; }
.notif .nicon { width: 36px; height: 36px; border-radius: 9px; background: #0a0a0a; display: grid; place-items: center; }
.notif .nicon svg { width: 26px; height: 26px; }
.notif .nicon svg { --ce: #6b6b70; --ch: #fff; }
.notif .top { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.notif .top span { font-size: 13px; color: var(--notif-soft); }
.notif .body { font-size: 14px; line-height: 19px; letter-spacing: -0.01em; white-space: pre-line; min-height: 38px; }
.notif .body::after { content: ""; display: inline-block; width: 2px; height: 14px; margin-left: 2px; vertical-align: -2px; background: currentColor; animation: caret 0.9s steps(2) infinite; }
.notif.typed .body::after { display: none; }
@keyframes caret { 50% { opacity: 0; } }
.actions { border-radius: 16px; overflow: hidden; background: var(--notif); color: var(--notif-ink); }
.actions button { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; font-size: 15px; border-top: 1px solid var(--hair); transition: background 0.2s; }
.actions button:first-child { border-top: 0; }
.actions button:hover, .actions button.on { background: rgba(120, 120, 128, 0.2); }
.actions button.on { font-weight: 600; }
.actions svg { width: 20px; height: 20px; flex: none; }
.result { margin-top: 6px; border-radius: 20px; background: var(--canvas); color: var(--a-ink); padding: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 156px; }
.result .steps-live { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--sec); }
.result .steps-live span { display: flex; align-items: center; gap: 8px; transition: color 0.2s; }
.result .steps-live span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gray3); flex: none; transition: background 0.2s; }
.result .steps-live span.on { color: var(--a-ink); font-weight: 600; }
.result .steps-live span.on::before { background: var(--a-ink); animation: pulse 1s ease-in-out infinite; }
.result .steps-live span.done::before { background: var(--a-ink); }
.result p { font-size: 13px; color: var(--sec); }
.verdict { display: flex; flex-direction: column; gap: 10px; animation: fadeUp 0.5s var(--ease); }
.v-band { display: flex; align-items: baseline; gap: 10px; }
.v-band b { font-family: var(--display); font-size: 46px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.v-band span { font-size: 14px; font-weight: 600; color: var(--sec); }
.crit { display: grid; gap: 7px; }
.crit div { display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 4px 10px; align-items: center; font-size: 13px; }
.crit div span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crit div b { text-align: right; font-variant-numeric: tabular-nums; }
.crit div i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--gray5); overflow: hidden; }
.crit div i::after { content: ""; display: block; height: 100%; width: calc(var(--v) / 9 * 100%); background: var(--a-ink); border-radius: 3px; animation: grow 0.9s var(--spring) both; transform-origin: 0 50%; }
@keyframes grow { from { transform: scaleX(0); } }
.fb { display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.45; }
.fb b { font-size: 13px; }
.fb q { quotes: "“" "”"; }

/* Writing review sheet and the tutor chat */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 56px; align-items: start; }
.sheet { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 16px; padding: 22px; background: var(--card); }
.sheet h3 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.s-eye { font-size: 13px; font-weight: 600; color: var(--sec); }
.qbox { border-radius: 16px; background: var(--a-chip); padding: 14px 16px; font-size: 15px; line-height: 1.45; white-space: pre-line; }
.qbox small { display: block; font-size: 12px; font-weight: 700; color: var(--sec); margin-bottom: 4px; }
.essay { border-radius: 16px; box-shadow: inset 0 0 0 1.5px var(--line); padding: 14px 16px; font-size: 14.5px; line-height: 1.55; max-height: 190px; overflow: auto; color: var(--a-ink); white-space: pre-line; }
.meter { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--sec); }
.pips { display: flex; gap: 4px; }
.pips i { flex: 1; height: 8px; border-radius: 4px; background: var(--gray5); transition: background 0.25s; }
.pips i.on { background: var(--a-ink); }
.s-note { font-size: 13px; color: var(--sec); text-align: center; }
.c-dim { position: absolute; inset: 0; z-index: 3; background: rgba(0, 0, 0, 0.32); opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0s 0.35s; }
.c-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; max-height: 94%; overflow: auto; border-radius: 30px 30px 0 0; background: var(--card); padding: 26px 20px 20px; display: flex; flex-direction: column; gap: 14px; transform: translateY(104%); visibility: hidden; transition: transform 0.5s var(--ease), visibility 0s 0.5s; }
.previewing .c-dim { opacity: 1; visibility: visible; transition-delay: 0s; }
.previewing .c-sheet { transform: none; visibility: visible; transition-delay: 0s; }
.c-sheet .grab { position: absolute; left: 50%; top: 8px; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--gray3); }
.cs-top { display: flex; align-items: center; justify-content: space-between; }
.cs-x { width: 36px; height: 36px; border-radius: 50%; background: var(--a-chip); display: grid; place-items: center; transition: transform 0.25s var(--spring); flex: none; }
.cs-x:active { transform: scale(0.9); }
.cs-x svg { width: 13px; height: 13px; }
.c-sheet h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.cs-rows { border-radius: 16px; background: var(--a-chip); padding: 0 14px; }
.cs-rows div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 11px 0; font-size: 14.5px; border-top: 1px solid var(--hair); }
.cs-rows div:first-child { border-top: 0; }
.cs-rows s { color: var(--sec); }
.cs-rows svg { width: 11px; height: 11px; color: var(--sec); transform: rotate(-90deg); align-self: center; }
.chat { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: 22px; min-height: 100%; }
.chat .title { font-size: 30px; font-weight: 700; letter-spacing: -0.01em; }
.c-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.c-voice { display: flex; flex-wrap: wrap; gap: 6px; }
.c-voice button { height: 32px; padding: 0 12px; border-radius: 16px; font-size: 13px; font-weight: 600; color: var(--sec); box-shadow: inset 0 0 0 1.5px var(--gray3); transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.25s var(--spring); }
.c-voice button:active { transform: scale(0.94); }
.c-voice button[aria-checked="true"] { background: var(--a-ink); color: var(--a-paper); box-shadow: none; }
.retone { animation: retone 0.4s var(--ease); }
@keyframes retone { from { opacity: 0.15; transform: translateY(5px); } }
.c-list { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.bub { font-size: 16px; line-height: 21px; padding: 10px 14px; border-radius: 20px; background: var(--card); max-width: 320px; white-space: pre-line; }
.bub.user { align-self: flex-end; background: var(--a-ink); color: var(--a-paper); transform-origin: 100% 100%; }
.bub small { display: block; margin-top: 8px; font-size: 12px; font-style: italic; color: var(--sec); }
.c-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.c-chips button { height: 38px; padding: 0 14px; border-radius: 19px; background: var(--card); display: flex; align-items: center; font-size: 14px; font-weight: 600; white-space: nowrap; transition: background 0.2s, color 0.2s, transform 0.25s var(--spring); }
.c-chips button:active { transform: scale(0.95); }
.c-chips button[aria-pressed="true"] { background: var(--a-ink); color: var(--a-paper); }
.c-thread { align-self: stretch; min-height: 300px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.c-slot { position: relative; align-self: stretch; }
.typing { position: absolute; left: 0; top: 0; display: flex; gap: 5px; padding: 14px 16px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--a-ink); animation: dots 1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; } .typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dots { 0%, 60%, 100% { opacity: 0.25; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.c-input { margin-top: auto; display: flex; gap: 10px; align-items: center; }
.c-input span { flex: 1; height: 46px; border-radius: 23px; background: var(--card); padding: 0 16px; display: flex; align-items: center; color: var(--gray); }
.c-input i { width: 44px; height: 44px; border-radius: 50%; background: var(--gray3); color: #fff; display: grid; place-items: center; }
.c-input svg { width: 18px; height: 18px; transform: rotate(180deg); }
.js .chat .seq { opacity: 0; transform: translateY(10px) scale(0.98); transition: opacity 0.35s, transform 0.5s var(--spring); }
.js .chat .seq.show { opacity: 1; transform: none; }

/* Every day: the bot's own timetable, on the habitnex day view */
.daycard { border-radius: 22px; background: var(--card); padding: 14px; }
.day-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-size: 16px; font-weight: 600; }
.legend { display: flex; gap: 10px; font-size: 12px; font-weight: 400; color: var(--sec); }
.legend span { display: flex; align-items: center; gap: 4px; }
.legend i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.legend .o i { background: none; box-shadow: inset 0 0 0 1.6px currentColor; }
.tl { position: relative; }
.hr { position: absolute; left: 0; right: 0; height: 0; display: flex; align-items: center; gap: 8px; }
.hr span { width: 42px; text-align: right; font-size: 11px; font-weight: 600; color: var(--sec); white-space: nowrap; }
.hr i { flex: 1; height: 1px; background: var(--hair); }
.ev { position: absolute; left: 50px; right: 0; border-radius: 10px; background: var(--a-chip); padding: 4px 10px; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 8px; transition: top 0.6s var(--spring), opacity 0.3s; }
.ev .t { position: relative; padding-left: 15px; font-size: 13.5px; font-weight: 600; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev .t::before { content: ""; position: absolute; left: 0; top: 5.5px; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ev.rand .t::before { background: none; box-shadow: inset 0 0 0 1.6px currentColor; }
.ev .s { font-size: 12px; color: var(--sec); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ev.done { background: var(--emph); color: #fff; }
.ev.done .s { color: rgba(255, 255, 255, 0.7); }
.gap { position: absolute; left: 50px; right: 0; border-radius: 12px; border: 1.5px dashed var(--gray3); background: var(--card); display: flex; align-items: flex-end; justify-content: flex-end; padding: 0 10px 3px; font-size: 11px; font-weight: 600; color: var(--sec); white-space: nowrap; overflow: hidden; }
.tl .now { position: absolute; left: 45px; right: 0; height: 10px; margin-top: -5px; z-index: 1; display: flex; align-items: center; pointer-events: none; transition: top 0.6s var(--ease); }
.tl .now::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--a-ink); flex: none; }
.tl .now::after { content: ""; flex: 1; height: 2px; background: var(--a-ink); }
.coach { border-radius: 22px; background: var(--emph); color: #fff; padding: 16px; display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.coach small { font-size: 13px; font-weight: 600; opacity: 0.65; line-height: 18px; }
.coach p { font-size: 16px; font-weight: 600; line-height: 21px; letter-spacing: -0.01em; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.poll { border-radius: 22px; background: var(--card); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.poll-q { font-size: 16px; font-weight: 700; line-height: 1.35; }
.poll small { font-size: 13px; color: var(--sec); }
.poll-o { display: flex; flex-direction: column; gap: 6px; }
.poll-o button { position: relative; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--gray3); font-size: 15px; overflow: hidden; transition: box-shadow 0.2s; }
.poll-o button:not([disabled]):hover { box-shadow: inset 0 0 0 1.5px var(--a-ink); }
.poll-o .r { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.8px var(--gray); display: grid; place-items: center; z-index: 1; }
.poll-o .r svg { width: 11px; height: 11px; opacity: 0; }
.poll-o .pc { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; opacity: 0; z-index: 1; }
.poll-o .tx { z-index: 1; }
.poll-o .bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--a-chip); transition: width 0.8s var(--spring); }
.poll.voted .poll-o button { box-shadow: none; cursor: default; }
.poll.voted .poll-o .pc { opacity: 1; transition: opacity 0.3s 0.3s; }
.poll.voted .poll-o .bar { width: var(--pct); }
.poll-o .right .r { background: var(--a-ink); box-shadow: none; color: var(--a-paper); }
.poll-o .right .r svg { opacity: 1; }
.poll-o .right .bar { background: var(--gray5); }
.poll-o .wrong .r { outline: 1.8px dashed var(--gray); outline-offset: -1.8px; box-shadow: none; color: var(--gray); }
.poll-o .wrong .r svg { opacity: 1; }
.explain { display: flex; gap: 10px; align-items: flex-start; border-radius: 14px; background: var(--emph); color: #fff; padding: 10px 12px; font-size: 14px; line-height: 1.4; animation: fadeUp 0.4s var(--ease); }
.explain svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.poll-f { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hackc { border-radius: 22px; background: var(--card); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.hackc .chips { margin: 0; }
.hk-top { display: flex; justify-content: space-between; align-items: center; }
.hk-top .chipb { min-height: 34px; padding: 0 10px; }
.hackc h4 { margin: 0; font-size: 17px; line-height: 1.3; }
.hackc p { font-size: 15px; color: var(--soft); }

/* Progress */
.prog-wrap { background: var(--canvas); color: var(--a-ink); border-radius: 34px; padding: 18px; box-shadow: inset 0 0 0 1px var(--line); margin-top: 56px; }
.prog { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tile { border-radius: 22px; background: var(--card); padding: 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tile .k { font-size: 13px; font-weight: 600; color: var(--sec); }
.tile .v { display: flex; align-items: baseline; gap: 4px; margin-top: auto; }
.tile .v b { font-size: 64px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tile .v span { font-size: 17px; font-weight: 600; color: var(--sec); }
.tile .f { font-size: 13px; color: var(--sec); }
.tile.chart { grid-column: span 2; gap: 12px; }
.tile.year { grid-column: 1 / -1; gap: 14px; }
.tile h3 { font-size: 17px; font-weight: 600; }
.plot { height: 150px; display: flex; }
.col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 11px; color: var(--gray); }
.col div { position: relative; flex: 1; width: 55%; max-width: 44px; }
.col i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 6px; }
.col .pl { background: var(--gray5); height: calc(var(--p) * 100%); }
.col .kp { background: var(--a-ink); height: calc(var(--k) * 100%); }
.js .reveal .col .kp { height: 0; transition: height 0.9s var(--spring) calc(0.3s + var(--i) * 0.07s); }
.js .reveal.in .col .kp { height: calc(var(--k) * 100%); }
.lg { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--sec); }
.lg span { display: flex; align-items: center; gap: 5px; }
.lg i { width: 10px; height: 10px; border-radius: 3px; }
.y-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.y-head b { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.y-tot { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; font-weight: 600; color: var(--sec); }
.y-tot b { display: block; font-size: 24px; font-weight: 800; color: var(--a-ink); font-variant-numeric: tabular-nums; }
.y-grid { display: grid; grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; grid-auto-columns: 1fr; gap: clamp(1px, 0.25vw, 3px); }
.y-grid i { aspect-ratio: 1; border-radius: 22%; background: var(--c); }
.y-grid i.x { background: none; }
.js .reveal .y-grid i:not(.x) { background: var(--gray5); transition: background 0.35s linear calc(0.3s + var(--w) * 0.028s); }
.js .reveal.in .y-grid i:not(.x) { background: var(--c); }

/* More: the small things */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 56px; }
.cell { border-radius: 26px; background: var(--chip); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.cell p { font-size: 15px; color: var(--soft); }
.cell .art { height: 140px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.cell .msg { max-width: 100%; transition: none; }
.art .voice { width: 100%; max-width: 250px; border-radius: 18px; background: var(--card); color: var(--a-ink); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.25); }
.art .kb { width: 100%; max-width: 270px; border-radius: 16px; padding: 6px; }
.art .kb .key { height: 34px; font-size: 12px; }
.phmsg { width: 100%; max-width: 250px; border-radius: 18px; background: var(--card); color: var(--a-ink); padding: 12px 14px; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.25); font-size: 14px; min-height: 64px; display: grid; }
.phmsg > span { grid-area: 1 / 1; transition: opacity 0.35s, transform 0.45s var(--spring); }
.phmsg > span.off { opacity: 0; transform: translateY(6px); }
.phmsg b { font-family: var(--display); font-size: 22px; letter-spacing: -0.03em; display: block; }
.used { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 260px; }
.used span { height: 30px; padding: 0 11px; border-radius: 15px; background: var(--card); display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--sec); text-decoration: line-through; }
.used span.new { background: var(--ink); color: var(--paper); text-decoration: none; animation: popIn 0.5s var(--pop) both; }
.tri { display: grid; width: 100%; max-width: 250px; text-align: center; }
.tri > div { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 4px; align-items: center; transition: opacity 0.4s, transform 0.5s var(--spring); }
.tri > div.off { opacity: 0; transform: translateY(10px); }
.tri b { font-family: var(--display); font-size: 30px; letter-spacing: -0.04em; line-height: 1.1; }
.tri span { font-size: 13px; font-weight: 600; color: var(--sec); }
.quote-art { max-width: 250px; border-radius: 18px; background: var(--card); color: var(--a-ink); padding: 14px 16px; font-size: 14px; line-height: 1.4; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.25); transition: opacity 0.35s; }
.quote-art i { display: block; }
.quote-art span { display: block; margin-top: 8px; font-size: 13px; color: var(--sec); }
.quote-art.off { opacity: 0; }

/* Inside, and languages */
.works { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 56px; }
.work { border-radius: 26px; background: var(--chip); padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.work .ic { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; margin-bottom: 10px; }
.work .ic svg { width: 21px; height: 21px; }
.work p { font-size: 15px; color: var(--soft); }
.langbox { margin-top: 14px; border-radius: 26px; background: var(--band); color: #fff; padding: clamp(22px, 4vw, 44px); display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.6fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.lb-num { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(96px, 13vw, 160px); letter-spacing: -0.05em; line-height: 0.86; }
.langbox h3 { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.04em; margin: 4px 0 10px; }
.langbox p { color: rgba(255, 255, 255, 0.62); font-size: 16px; max-width: 24em; }
.flags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.flags li { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); font-size: 16px; font-weight: 600; white-space: nowrap; }
.flags li.cmd { font-size: 15px; padding: 0 14px; background: rgba(255, 255, 255, 0.06); }
.flags span { font: 20px/1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.js .reveal .flags li { opacity: 0; transform: scale(0.8); transition: opacity 0.3s calc(0.25s + var(--i) * 0.045s), transform 0.5s var(--pop) calc(0.25s + var(--i) * 0.045s); }
.js .reveal.in .flags li { opacity: 1; transform: none; }

/* Everywhere: a browser window, a home screen, a Telegram chat */
.trio .cell .art { height: 160px; }
.win { width: 100%; max-width: 250px; border-radius: 16px; background: var(--paper); color: var(--a-ink); overflow: hidden; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.25); }
.win-bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; background: var(--a-chip); }
.win-bar > i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gray3); }
.win-bar span { flex: 1; min-width: 0; margin-left: 6px; height: 22px; border-radius: 11px; background: var(--card); display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--sec); }
.win-bar svg { width: 9px; height: 9px; }
.win-body { display: flex; flex-direction: column; gap: 7px; padding: 10px 12px 12px; }
.win-body > span { display: flex; align-items: center; gap: 8px; }
.win-body i { flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--a-chip); color: var(--a-paper); display: grid; place-items: center; transition: background 0.3s; }
.win-body i svg { width: 9px; height: 9px; opacity: 0; transform: scale(0.4); transition: opacity 0.25s, transform 0.4s var(--pop); }
.win-body b { width: var(--w, 70%); height: 8px; border-radius: 4px; background: var(--gray5); }
.win-body .on i { background: var(--a-ink); }
.win-body .on i svg { opacity: 1; transform: none; }
.home { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.home-grid { display: grid; grid-template-columns: repeat(4, 34px); gap: 10px; }
.home-grid i, .home-grid b { width: 34px; height: 34px; border-radius: 9px; background: var(--gray5); }
.home-grid b { background: #0a0a0a; display: grid; place-items: center; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.45); transition: transform 0.5s var(--pop), opacity 0.3s; }
:root[data-theme="dark"] .home-grid b { box-shadow: inset 0 0 0 1px #3a3a3c; }
.home-grid b svg { width: 26px; height: 26px; --ce: #6b6b70; --ch: #fff; }
.home.waiting .home-grid b { opacity: 0; transform: scale(0.3); }
.home-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 16px; background: var(--paper); color: var(--a-ink); font-size: 13px; font-weight: 700; white-space: nowrap; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.25); transition: transform 0.2s var(--spring), background 0.2s, color 0.2s; }
.home-pill svg { width: 14px; height: 14px; }
.home-pill.pressed { transform: scale(0.94); background: var(--a-ink); color: var(--a-paper); }
.tgmini { width: 100%; max-width: 260px; border-radius: 18px; background: var(--canvas); color: var(--a-ink); padding: 10px 10px 0; display: flex; flex-direction: column; gap: 5px; overflow: hidden; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.25); }
.tgmini .msg { max-width: 100%; }
.tgmini .tg-input { margin: 3px -10px 0; padding: 6px 8px; }
.apps-cta { margin-top: 28px; }
@media (max-width: 960px) { .bento.trio { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .bento.trio { grid-template-columns: 1fr; } }

/* Segmented tabs, shared with the web app */
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--chip); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.panel .seg { background: var(--card); }
.seg::-webkit-scrollbar { display: none; }
.seg > a, .seg > button { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--soft); text-decoration: none; white-space: nowrap; transition: background 0.2s, color 0.2s; }
.seg > [aria-selected="true"], .seg > [aria-current="page"] { background: var(--ink); color: var(--paper); }
.seg.wide { display: flex; margin-bottom: 18px; }
.seg.wide > * { flex: 1; }

/* Test pieces, shared with the web app: answer chips, gap inputs, the tape */
.para { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 8px; border-radius: 8px; background: var(--ink); color: var(--paper); font-size: 13px; vertical-align: 2px; }
.tfng { display: flex; flex-wrap: wrap; gap: 6px; }
.pickc, .pickr { position: relative; cursor: pointer; }
.pickc input, .pickr input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pickc span { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 18px; background: var(--chip); font-size: 13.5px; font-weight: 700; letter-spacing: 0.02em; transition: background 0.15s, color 0.15s; }
.panel .pickc span { background: var(--card); }
.pickc input:checked + span { background: var(--a-ink); color: var(--a-paper); }
.pickc input:focus-visible + span, .pickr input:focus-visible ~ span { outline: 2px solid var(--ink); outline-offset: 2px; }
.gap-in { font: inherit; font-weight: 600; width: 150px; max-width: 60%; height: 34px; margin: 0 4px; padding: 0 10px; border: 0; border-radius: 10px; background: var(--card); color: var(--a-ink); box-shadow: inset 0 0 0 1.5px var(--gray3); outline: none; vertical-align: baseline; }
.gap-in:focus { box-shadow: inset 0 0 0 2px var(--a-ink); }
.tape { display: flex; align-items: center; gap: 14px; border-radius: 22px; background: linear-gradient(170deg, #121214 0%, #26262a 100%); color: #fff; padding: 14px; }
.tape .pl-play.big { width: 56px; height: 56px; border-radius: 35%; background: #fff; color: #000; display: grid; place-items: center; flex: none; }
.tape .pl-play svg { width: 22px; height: 22px; fill: currentColor; }
.tape .pl-play[disabled] { opacity: 0.4; cursor: default; }
.tape-bar { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tape-bar .fine { color: rgba(255, 255, 255, 0.65); font-size: 13px; font-variant-numeric: tabular-nums; }
.seek { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.25); overflow: hidden; }
.seek i { display: block; height: 100%; width: 0; background: #fff; transition: width 0.25s linear; }

/* Hero: the app's Today screen */
.app-phone .screen { background: var(--paper); }
.ap-top { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 2px 16px 8px; border-bottom: 1px solid var(--hair); }
.ap-brand { display: inline-flex; align-items: center; gap: 4px; font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: -0.05em; }
.ap-brand svg { width: 26px; height: 26px; --ce: var(--ev); --ch: var(--a-ink); }
.ap-ava { width: 28px; height: 28px; border-radius: 50%; background: var(--chip); color: var(--sec); display: grid; place-items: center; }
.ap-ava svg { width: 15px; height: 15px; }
.ap-body { flex: 1; min-height: 0; padding: 12px 12px 0; display: flex; flex-direction: column; gap: 9px; position: relative; }
.ap-eye { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sec); padding: 0 4px; }
.ap-hello { font-family: var(--display); font-size: 25px; letter-spacing: -0.045em; line-height: 1.05; padding: 0 4px; }
.ap-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ap-tiles > div { border-radius: 14px; background: var(--chip); padding: 8px 9px; display: flex; flex-direction: column; gap: 2px; }
.ap-tiles span { font-size: 10.5px; font-weight: 600; color: var(--sec); }
.ap-tiles b { font-size: 22px; font-weight: 800; line-height: 26px; font-variant-numeric: tabular-nums; }
.ap-tiles .roll { height: 26px; line-height: 26px; }
.ap-tiles .roll i { font-size: 22px; color: var(--ink); }
.is-up .ap-tiles .roll > span { transform: translateY(-26px); }
.ap-plan { border-radius: 18px; background: var(--canvas); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.ap-ph { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; padding: 0 2px; }
.ap-ph > span { font-size: 12px; font-weight: 700; color: var(--sec); font-variant-numeric: tabular-nums; }
.ap-bar { height: 4px; border-radius: 2px; background: var(--gray5); overflow: hidden; }
.ap-bar i { display: block; height: 100%; width: 0; background: var(--a-ink); transition: width 0.6s var(--spring); }
.ap-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.ap-tasks li { display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 13px; background: var(--card); transition: transform 0.2s var(--spring); }
.ap-tasks li.pressed { transform: scale(0.96); }
.ap-tasks .t-ic { width: 30px; height: 30px; border-radius: 50%; background: var(--a-chip); display: grid; place-items: center; transition: background 0.3s, color 0.3s; }
.ap-tasks .t-ic svg { grid-area: 1 / 1; width: 14px; height: 14px; transition: opacity 0.25s, transform 0.4s var(--pop); }
.ap-tasks .t-ic .b { opacity: 0; transform: scale(0.4); }
.ap-tasks .done .t-ic { background: var(--a-ink); color: var(--a-paper); }
.ap-tasks .done .t-ic .a { opacity: 0; transform: scale(0.4); }
.ap-tasks .done .t-ic .b { opacity: 1; transform: none; }
.ap-tasks .t-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ap-tasks .t-tx b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-tasks .t-tx span { font-size: 10.5px; color: var(--sec); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-tasks .done .t-tx b { color: var(--sec); }
.ap-word { border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ap-word small { display: block; font-size: 10px; font-weight: 700; color: var(--sec); }
.ap-word b { font-family: var(--display); font-size: 20px; letter-spacing: -0.04em; line-height: 1.1; }
.ap-word i { display: block; font-size: 11px; color: var(--sec); }
.ap-word .pb { width: 32px; height: 32px; border-radius: 50%; background: var(--a-ink); color: var(--a-paper); display: grid; place-items: center; flex: none; }
.ap-word .pb svg { width: 13px; height: 13px; }
.ap-result { position: absolute; left: 14px; right: 14px; bottom: 10px; border-radius: 16px; background: var(--emph); color: #fff; padding: 10px 14px; display: flex; flex-direction: column; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.45); transform: translateY(14px); opacity: 0; transition: opacity 0.3s, transform 0.45s var(--spring); }
.ap-result.on { opacity: 1; transform: none; }
.ap-result small { font-size: 11px; opacity: 0.7; font-weight: 600; }
.ap-result b { font-size: 16px; }
.ap-tabs { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); padding: 8px 10px 18px; border-top: 1px solid var(--hair); color: var(--gray); }
.ap-tabs span { display: grid; place-items: center; }
.ap-tabs svg { width: 20px; height: 20px; }
.ap-tabs .on { color: var(--a-ink); }
.app-phone.resetting .screen::after { opacity: 1; }
.tg-art { justify-self: center; width: 100%; }

/* Reading and Listening */
.tst { display: flex; flex-direction: column; gap: 14px; }
.tst .seg.wide { margin-bottom: 0; }
.tst-pane { display: flex; flex-direction: column; gap: 14px; }
.tst-pass { border-radius: 18px; background: var(--card); padding: 14px 16px; font-size: 15px; line-height: 1.65; }
.tst-q { display: flex; flex-direction: column; gap: 8px; border-radius: 18px; padding: 12px 14px; background: var(--card); transition: box-shadow 0.2s; }
.tst-q p { font-size: 15px; line-height: 1.6; }
.tst-q p b { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 6px; border-radius: 50%; background: var(--a-chip); font-size: 12.5px; vertical-align: 1px; }
.tst-q.ok { box-shadow: inset 0 0 0 2px var(--a-ink); }
.tst-q.ok p b { background: var(--a-ink); color: var(--a-paper); }
.tst-q.no { box-shadow: inset 0 0 0 1.5px var(--gray3); }
.tst-x { font-size: 13.5px !important; color: var(--sec); font-style: italic; }
.tst .pickc span { background: var(--chip); }
.tst-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.tst-table { display: flex; flex-direction: column; gap: 6px; }
.tst-table > div { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.tst-table > div span { display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-radius: 10px; background: var(--card); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tst-table > div b { font-size: 11px; font-weight: 600; color: var(--sec); }

/* Pricing: Free on the grouped background, Premium inverted like the privacy band */
.tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 56px; }
.tier { border-radius: 30px; background: var(--canvas); color: var(--a-ink); box-shadow: inset 0 0 0 1px var(--line); padding: clamp(22px, 3.2vw, 36px); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tier h3 { font-family: var(--display); font-weight: 800; font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -0.035em; line-height: 1.1; }
.tier-price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; font-size: 17px; font-weight: 600; color: var(--sec); }
.tier-price strong { font-family: var(--display); font-weight: 800; font-size: clamp(56px, 7vw, 84px); line-height: 1; letter-spacing: -0.05em; color: var(--a-ink); white-space: nowrap; }
.tier-sub { font-size: 16px; color: var(--soft); }
.tier .btn { margin-top: auto; }
.tier .btn.ghost { background: var(--card); }
.tier.pro { background: var(--band); color: #fff; box-shadow: none; }
:root[data-theme="dark"] .tier.pro { box-shadow: inset 0 0 0 1px #3a3a3c; }
.tier.pro .tier-price, .tier.pro .tier-sub, .tier.pro .tier-per small { color: rgba(255, 255, 255, 0.62); }
.tier.pro .tier-price strong { color: #fff; }
.tier.pro .btn { background: #fff; color: #0a0a0a; }
.tier-terms { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tier-terms li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 10px 16px; border-radius: 18px; background: var(--card); }
.tier.pro .tier-terms li { background: rgba(255, 255, 255, 0.08); }
.tier-per { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; min-width: 0; }
.tier-per b { font-size: 16px; font-weight: 700; }
.tier-per small { flex-basis: 100%; font-size: 13px; color: var(--sec); }
.tier-save { display: inline-block; line-height: 22px; height: 22px; padding: 0 8px; border-radius: 11px; background: #fff; color: #0a0a0a; font-size: 12px; font-style: normal; font-weight: 700; white-space: nowrap; }
.tier-sum { flex: none; font-size: 17px; font-weight: 700; white-space: nowrap; }
.tier-pay { font-size: 14px; color: rgba(255, 255, 255, 0.62); }
.tier-pay b { display: block; margin-bottom: 4px; font-size: 15.5px; font-weight: 600; color: #fff; }
.tier-pay span { display: block; }
@media (max-width: 820px) { .tiers { grid-template-columns: 1fr; } }

/* Questions people ask */
.faq-wrap { max-width: 860px; }
.faq { margin-top: 40px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 2px; font-size: 18px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--chip) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5v9M3.5 8h9' stroke='%238e8e93' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform 0.3s var(--spring); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 2px 22px; color: var(--soft); font-size: 16.5px; max-width: 46em; }
.start-card { display: flex; flex-direction: column; gap: 14px; }
.start-card .ticks li { font-size: 15.5px; }

/* Privacy band */
.band { background: var(--band); color: #fff; }
.band .lede, .band .eyebrow { color: rgba(255, 255, 255, 0.62); }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 56px 0 40px; }
.fact { border-top: 2px solid #fff; padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.fact p { font-size: 15px; color: rgba(255, 255, 255, 0.62); }
.band a.link { font-weight: 600; text-underline-offset: 4px; }

/* Get in */
.trial { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding-bottom: 26px; position: relative; }
.steps li:last-child { padding-bottom: 0; }
.steps li:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; background: var(--line); }
.steps li:first-child::before { background: var(--ink); }
.steps .ic { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; }
.steps .ic svg { width: 18px; height: 18px; }
.steps b { display: block; font-size: 17px; font-weight: 600; }
.steps span { font-size: 15px; color: var(--soft); }
.get { display: flex; flex-direction: column; gap: 16px; }
.get .fine { text-align: center; }
.wl { padding: 22px; -webkit-user-select: auto; user-select: auto; }
.wl form, .wl-done { display: flex; flex-direction: column; gap: 14px; }
.wl h3 { font-family: var(--display); font-weight: 800; font-size: clamp(24px, 3vw, 30px); letter-spacing: -0.035em; line-height: 1.1; text-wrap: balance; }
.wl-soon { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--sec); }
.wl-soon i { width: 8px; height: 8px; border-radius: 50%; background: var(--a-ink); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.25; transform: scale(0.8); } }
.wl-row { display: flex; gap: 8px; }
.field { font: inherit; color: var(--a-ink); background: var(--card); border: 0; box-shadow: inset 0 0 0 1.5px var(--line); outline: none; transition: box-shadow 0.2s; }
.field.pill-in { flex: 1; min-width: 0; height: 56px; padding: 0 20px; border-radius: 999px; }
textarea.field { width: 100%; padding: 12px 16px; border-radius: 16px; resize: vertical; min-height: 64px; line-height: 1.4; }
.field:focus { box-shadow: inset 0 0 0 2px var(--a-ink); }
.field:focus-visible { outline: none; }
.field::placeholder { color: var(--gray); }
.field[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--a-ink); }
.wl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.wl-error { font-size: 15px; font-weight: 600; }
.wl-ok { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: clamp(24px, 3vw, 30px); letter-spacing: -0.035em; line-height: 1.1; }
.wl-ok .ic { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--a-ink); color: var(--a-paper); display: grid; place-items: center; animation: popIn 0.5s var(--pop) both; }
.wl-ok svg { width: 15px; height: 15px; }
@keyframes popIn { from { transform: scale(0); } }
.wl-sub, .wl-ask { font-size: 15px; color: var(--sec); }
.wl-ask { padding-top: 14px; border-top: 1px solid var(--line); }
.wl-q { display: flex; flex-direction: column; gap: 8px; }
.wl-label { font-size: 15px; font-weight: 600; }
.wl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wl-thanks { font-size: 15px; font-weight: 600; }
@media (max-width: 520px) { .wl-row { flex-direction: column; } .wl-row .field { flex: none; width: 100%; } .wl { padding: 18px; } }

/* Text pages: privacy, terms */
.doc { max-width: 720px; padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(72px, 10vw, 120px); }
.doc h1 { font-size: clamp(40px, 7vw, 64px); margin: 10px 0 18px; }
.doc h2 { font-size: clamp(24px, 3vw, 30px); letter-spacing: -0.03em; margin: 40px 0 12px; }
.doc p, .doc li { color: var(--soft); font-size: 17px; }
.doc p + p { margin-top: 12px; }
.doc ul { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; }
.doc strong { color: var(--ink); }
.doc .updated { font-size: 14px; color: var(--sec); }

/* 404 */
.lost { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 60px 20px; }
.lost > div { display: flex; flex-direction: column; gap: 20px; align-items: center; }

footer { border-top: 1px solid var(--line); padding: 36px 0 56px; }
.foot { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; color: var(--soft); font-size: 15px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot nav a { text-decoration: none; }
.foot nav a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 960px) {
  .hero-in, .feature, .trial { grid-template-columns: 1fr; }
  .hero-in { gap: 56px; }
  .feature.flip .f-text { order: 0; }
  .three, .facts { grid-template-columns: 1fr 1fr; }
  .prog { grid-template-columns: 1fr 1fr; }
  .bento, .works { grid-template-columns: 1fr 1fr; }
  .langbox { grid-template-columns: 1fr; }
  .lock, .feature .panel, .feature .player { max-width: 520px; width: 100%; margin: 0 auto; }
}
@media (max-width: 760px) { .duo { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .three, .facts, .bento, .works { grid-template-columns: 1fr; }
  .hero .btn { width: 100%; }
  .cta-row { width: 100%; }
  .tile .v b { font-size: 48px; }
  .panel, .prog-wrap { border-radius: 26px; padding: 12px; }
  .sheet, .chat { padding: 18px; }
  .pl-grid { grid-template-columns: 1fr; }
  .pl-card { height: auto; min-height: 104px; }
  .phr { max-height: 150px; flex: none; }
  .player { padding: 14px; border-radius: 26px; }
}
@media (max-width: 380px) { .phone { height: 640px; } .kb .key { font-size: 12px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01s !important; transition-delay: 0s !important; }
  .js .reveal { opacity: 1; transform: none; }
  .notif .body::after { display: none; }
}

/* The terms and privacy pages opened from inside Telegram (?tg=1): just the text, and Telegram's way of paying. */
[data-tg] { display: none; }
.in-tg [data-tg] { display: block; }
.in-tg #nav, .in-tg footer, .in-tg [data-web] { display: none; }
/* The landing's numbers that follow the admin's prices (site.js) look like the words around them. */
strong[data-per], strong[data-save], strong[data-stars], .tier-sum strong[data-sum] { font-weight: inherit; }