/* Talkvelle — стили сайта.
   Идея: голос превращается в текст. Звуковая волна в четырёх фирменных цветах программы
   (фиолетовый, розовый, янтарный, бирюзовый) проходит через страницу; текст — плотный и крупный.
   Шрифты лежат на самом сайте: страница не обращается к сторонним серверам. */

@font-face { font-family: "Inter Display"; font-weight: 900; font-display: swap; src: url("fonts/InterDisplay-Black.woff") format("woff"); }
@font-face { font-family: "Inter Display"; font-weight: 800; font-display: swap; src: url("fonts/InterDisplay-ExtraBold.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("fonts/Inter-Regular.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("fonts/Inter-Medium.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 600 700; font-display: swap; src: url("fonts/Inter-SemiBold.woff") format("woff"); }

:root {
  --bg: #fbfaff;
  --surface: #ffffff;
  --soft: #f3f0fb;
  --ink: #16121f;
  --muted: #5e5874;
  --line: #e6e2f0;
  --violet: #7c3aed;
  --pink: #e8338a;
  --amber: #c27400;
  --cyan: #0a8fab;
  --green: #15803d;
  --accent: var(--violet);
  --accent-ink: #ffffff;
  --ok: #15803d; --warn: #b45309; --bad: #c81e1e;
  --ok-bg: #ecfdf3; --warn-bg: #fff7e6; --bad-bg: #fef2f2;
  /* тёмная полоса (герой, телефон, финал) — одинаковая в обеих темах */
  --night: #120f1c;
  --night-2: #1d1830;
  --night-ink: #f5f3ff;
  --night-muted: #a7a1c2;
  --m1: #8b5cf6; --m2: #ec4899; --m3: #f59e0b; --m4: #06b6d4;
  --display: "Inter Display", "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --radius: 18px;
  --shadow: 0 1px 2px rgb(22 18 31 / 6%), 0 12px 32px -12px rgb(22 18 31 / 18%);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f0c17; --surface: #18141f; --soft: #1f1a2b; --ink: #f3f0ff; --muted: #a49dc0; --line: #2c2640;
    --violet: #a78bfa; --pink: #f472b6; --amber: #fbbf24; --cyan: #22d3ee; --green: #4ade80;
    --accent: #a78bfa; --accent-ink: #120f1c;
    --ok: #4ade80; --warn: #fbbf24; --bad: #f87171; --ok-bg: #11251a; --warn-bg: #2a2110; --bad-bg: #2c1515;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 16px 40px -16px rgb(0 0 0 / 60%);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; }
.wrap { max-width: 1160px; margin: 0 auto; padding-inline: 20px; }
a { color: var(--accent); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; margin: 0 0 .5em; }
h1 { font-size: clamp(34px, 5.4vw, 64px); font-weight: 900; }
h2 { font-size: clamp(28px, 3.6vw, 44px); }
h3 { font-size: 20px; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
code, kbd, .mono { font-family: var(--mono); font-size: .92em; }
kbd { border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 7px; padding: 1px 8px; background: var(--surface); white-space: nowrap; }
small, .muted { color: var(--muted); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 13px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.eyebrow::before { content: ""; width: 18px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--m1), var(--m2), var(--m3), var(--m4)); }

/* ---------------------------------------------------------------- шапка */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--line); }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; opacity: .9;
  background: linear-gradient(90deg, var(--m1), var(--m2), var(--m3), var(--m4)); }
.top.on-night { background: color-mix(in srgb, var(--night) 80%, transparent); border-bottom-color: rgb(255 255 255 / 8%); }
.top-row { display: flex; align-items: center; gap: 18px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; font: 900 21px var(--display); letter-spacing: -.02em; color: var(--ink); text-decoration: none; flex: none; }
.mark { width: 28px; height: 28px; border-radius: 50%; flex: none; position: relative;
  background: conic-gradient(var(--m1) 0 25%, var(--m2) 0 50%, var(--m3) 0 75%, var(--m4) 0); }
.mark::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--night); }
.nav { display: flex; gap: 4px; align-items: center; margin-left: 18px; }
.nav-link, .dd > summary { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: 10px;
  color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px; cursor: pointer; list-style: none; white-space: nowrap; }
.dd > summary::-webkit-details-marker, .burger > summary::-webkit-details-marker { display: none; }
.nav-link:hover, .dd > summary:hover, .dd[open] > summary { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.chev { transition: transform .2s; opacity: .7; }
.dd[open] .chev { transform: rotate(180deg); }
.dd { position: relative; }
.dd-panel { position: absolute; top: calc(100% + 10px); left: -8px; z-index: 40; min-width: 320px; padding: 10px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 24px 60px -20px rgb(22 18 31 / 35%), 0 2px 6px rgb(22 18 31 / 6%); animation: dd-in .16s ease-out; }
.dd-panel.wide { min-width: 560px; }
.dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
@keyframes dd-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.dd-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; }
.dd-item:hover { background: var(--soft); }
.dd-item b { display: block; font-weight: 600; font-size: 15px; }
.dd-item small { display: block; color: var(--muted); font-size: 13px; line-height: 1.4; margin-top: 2px; }
.dd-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; }
.dd-ico.c3 { color: #16121f; }
.dd-ico svg { width: 19px; height: 19px; }
.dd-cta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; padding: 14px 16px; border-radius: 14px;
  text-decoration: none; color: #fff; background: linear-gradient(110deg, var(--night) 30%, #3b1f63); font-size: 20px; }
.dd-cta b { display: block; font-size: 15px; }
.dd-cta small { display: block; color: var(--night-muted); font-size: 13px; }
.top-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.me { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 999px; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: 15px; }
.me:hover { border-color: var(--accent); }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 800 14px var(--display);
  background: conic-gradient(from 200deg, var(--m1), var(--m2), var(--m3), var(--m4), var(--m1)); }
.top.on-night .brand, .top.on-night .nav-link, .top.on-night .dd > summary { color: var(--night-ink); }
.top.on-night .nav-link:hover, .top.on-night .dd > summary:hover, .top.on-night .dd[open] > summary { background: rgb(255 255 255 / 9%); }
.top.on-night .me { background: rgb(255 255 255 / 7%); border-color: rgb(255 255 255 / 14%); color: var(--night-ink); }
.burger { display: none; position: relative; }
.burger > summary { list-style: none; cursor: pointer; width: 42px; height: 42px; border-radius: 12px; display: grid; place-content: center; gap: 5px;
  border: 1px solid var(--line); }
.burger > summary span { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s, opacity .2s; }
.top.on-night .burger > summary { color: var(--night-ink); border-color: rgb(255 255 255 / 16%); }
.burger[open] > summary span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[open] > summary span:nth-child(2) { opacity: 0; }
.burger[open] > summary span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.burger-panel { position: fixed; left: 12px; right: 12px; top: calc(env(safe-area-inset-top, 0px) + 76px); max-height: calc(100vh - 100px); overflow: auto;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 20px; padding: 10px;
  box-shadow: 0 30px 70px -20px rgb(22 18 31 / 45%); display: grid; gap: 2px; animation: dd-in .16s ease-out; }
.dd > summary::after, .burger > summary::after { content: none; display: none; }
.top .burger-panel .dd > summary, .top .burger-panel .nav-link { color: var(--ink); width: 100%; justify-content: space-between; font-size: 16px; padding: 12px; }
.burger-panel .dd-panel { position: static; min-width: 0; box-shadow: none; border: 0; padding: 0 0 6px; animation: none; background: transparent; }
.burger-panel .dd-grid { grid-template-columns: 1fr; }

/* ---------------------------------------------------------------- кнопки и формы */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 15px var(--font); padding: 12px 20px;
  border-radius: 12px; border: 1px solid transparent; background: var(--ink); color: var(--bg); text-decoration: none; cursor: pointer;
  transition: transform .15s, box-shadow .15s, filter .15s; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.btn.brandbtn { background: linear-gradient(100deg, #7c3aed, #db2777); color: #fff; box-shadow: 0 8px 22px -10px var(--m2); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--ink); }
.btn.light { background: #fff; color: var(--night); }
.btn.outline-light { background: transparent; color: var(--night-ink); border-color: rgb(255 255 255 / 25%); }
.btn.danger { background: transparent; color: var(--bad); border-color: var(--bad); }
.btn.small { padding: 7px 13px; font-size: 14px; border-radius: 10px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.danger-link { color: var(--bad); }
label { display: block; font-weight: 600; margin: 14px 0 6px; }
input[type=email], input[type=password], input[type=text], input[type=search], input[type=date], input[type=number], select, textarea {
  width: 100%; font: 16px var(--font); padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink); }
textarea { line-height: 1.5; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.check input { margin-top: 5px; accent-color: var(--accent); }
.hint { font-size: 14px; color: var(--muted); margin-top: 6px; }
.row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.row > * { flex: 1 1 160px; min-width: 0; }
.row > .btn, .row > button { flex: 0 0 auto; }
.note { padding: 12px 16px; border-radius: 12px; margin: 16px 0; font-size: 15px; border: 1px solid; overflow-wrap: anywhere; }
.note.ok { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.note.error { background: var(--bad-bg); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.note.warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }

/* ---------------------------------------------------------------- звуковая волна (фирменный элемент) */
.wave { display: flex; align-items: center; gap: 5px; height: 64px; }
/* Лёгкая анимация: меняется только transform (видеокарта), без пересчёта страницы; вне экрана — на паузе */
.wave i { flex: none; width: 6px; border-radius: 3px; height: 100%; background: var(--m1); transform: scaleY(.3);
  animation: wave 1.6s ease-in-out infinite; }
.wave i:nth-child(4n+2) { background: var(--m2); animation-delay: -.3s; }
.wave i:nth-child(4n+3) { background: var(--m3); animation-delay: -.65s; }
.wave i:nth-child(4n+4) { background: var(--m4); animation-delay: -1s; }
.wave i:nth-child(3n) { animation-duration: 2s; }
.wave.paused i { animation-play-state: paused; }
@keyframes wave { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }

/* ---------------------------------------------------------------- герой */
.night { background: var(--night); color: var(--night-ink); }
.night .muted, .night small { color: var(--night-muted); }
.hero { position: relative; overflow: hidden; padding-block: 64px 72px; }
.hero::before { content: ""; position: absolute; inset: auto -10% -40% 30%; height: 520px; pointer-events: none;
  background: radial-gradient(closest-side, rgb(236 72 153 / 22%), transparent 70%), radial-gradient(closest-side at 70% 40%, rgb(6 182 212 / 18%), transparent 70%); }
.hero-grid { position: relative; display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; }
.hero-grid > * { min-width: 0; }
.hero h1 { color: #fff; margin-top: 18px; }
.hero h1 .hl { background: linear-gradient(100deg, var(--m1), var(--m2) 45%, var(--m3) 75%, var(--m4)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { font-size: 19px; color: var(--night-muted); max-width: 32em; }
.hero .lead kbd { background: var(--night-2); border-color: #3a3356; color: #fff; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.badge-new { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; font-size: 14px;
  background: rgb(255 255 255 / 7%); border: 1px solid rgb(255 255 255 / 12%); color: var(--night-ink); text-decoration: none; }
.badge-new b { background: linear-gradient(100deg, #db2777, #b45309); color: #fff; border-radius: 999px; padding: 2px 10px; font-size: 12px; }
.facts { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 34px; }
.facts div b { display: block; font: 900 28px var(--display); color: #fff; letter-spacing: -.02em; }
.facts div span { font-size: 14px; color: var(--night-muted); }

.stage { position: relative; }
.bigkey { display: grid; place-items: center; width: 88px; height: 80px; border-radius: 18px; font: 900 26px var(--display); color: var(--night);
  background: linear-gradient(#fff, #e9e5f5); box-shadow: 0 7px 0 #b9b2d3, 0 20px 30px -10px rgb(0 0 0 / 60%); line-height: 1; }
.bigkey small { display: block; font: 600 10px var(--font); letter-spacing: .08em; color: #6b6488; text-transform: uppercase; margin-top: 4px; }
.tag { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 14px; font-weight: 600; font-size: 15px;
  background: #fff; color: var(--night); box-shadow: 0 18px 34px -14px rgb(0 0 0 / 60%); }
.tag .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--m4); }
.tag.pinkish { background: #db2777; color: #fff; }

/* ---------------------------------------------------------------- секции */
.section { padding-block: 88px; }
.section.tight { padding-block: 64px; }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.sec-head h2 { margin: 10px 0 0; max-width: 16em; }
.sec-head p { color: var(--muted); max-width: 30em; margin: 0; font-size: 17px; }
.night .sec-head p { color: var(--night-muted); }
.night h2 { color: #fff; }

.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.step .art { height: 150px; border-radius: 14px; margin-bottom: 18px; display: grid; place-items: center; overflow: hidden; }
.step:nth-child(1) .art { background: color-mix(in srgb, var(--m1) 14%, var(--surface)); }
.step:nth-child(2) .art { background: color-mix(in srgb, var(--m2) 14%, var(--surface)); }
.step:nth-child(3) .art { background: color-mix(in srgb, var(--m4) 14%, var(--surface)); }
.step .num { font: 900 14px var(--display); color: var(--muted); letter-spacing: .04em; }
.step h3 { margin: 4px 0 8px; }
.step p { color: var(--muted); margin: 0; }
.art svg { max-width: 100%; height: auto; }

/* демонстрация умного оформления: вкладки работают без JavaScript (radio + :checked) */
.fmt { display: grid; grid-template-columns: 1fr 1.25fr; gap: 22px; align-items: stretch; }
.fmt > * { min-width: 0; }
.said { background: var(--night); color: var(--night-ink); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 18px;
  overflow: hidden; border: 1px solid rgb(255 255 255 / 9%); }
.wave { max-width: 100%; overflow: hidden; }
.said .wave { height: 46px; }
.said p { font-size: 18px; line-height: 1.55; color: #e9e6f7; margin: 0; }
.said .who { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--night-muted); font-weight: 600; }
.fmt-tabs { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.fmt-tabs input { position: absolute; opacity: 0; pointer-events: none; }
.fmt-tabs .tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.fmt-tabs .tabs label { margin: 0; padding: 8px 14px; border-radius: 999px; background: var(--soft); cursor: pointer; font-weight: 600; font-size: 14px; }
.fmt-tabs .out { display: none; padding: 18px 20px; border-radius: 14px; background: var(--soft); min-height: 230px; white-space: pre-line; font-size: 16px; line-height: 1.6; }
#f-email:checked ~ .tabs label[for=f-email], #f-post:checked ~ .tabs label[for=f-post],
#f-list:checked ~ .tabs label[for=f-list], #f-clean:checked ~ .tabs label[for=f-clean] { background: var(--ink); color: var(--bg); }
#f-email:checked ~ .o-email, #f-post:checked ~ .o-post, #f-list:checked ~ .o-list, #f-clean:checked ~ .o-clean { display: block; }
#f-email:focus-visible ~ .tabs label[for=f-email], #f-post:focus-visible ~ .tabs label[for=f-post],
#f-list:focus-visible ~ .tabs label[for=f-list], #f-clean:focus-visible ~ .tabs label[for=f-clean] { outline: 3px solid var(--accent); outline-offset: 2px; }
.fmt-tabs .meta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--muted); }

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.tile .ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 16px; color: #fff; }
.tile .ico svg { width: 24px; height: 24px; }
.c1 { background: var(--m1); } .c2 { background: var(--m2); } .c3 { background: var(--m3); } .c4 { background: var(--m4); }
.tile h3 { font-size: 17px; margin-bottom: 6px; }
.tile p { color: var(--muted); font-size: 15px; margin: 0; }

/* телефон */
.phone-band { overflow: hidden; }
.phone-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.phone-grid > * { min-width: 0; }
.phone-grid ul { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 12px; }
.phone-grid li { display: flex; gap: 12px; align-items: flex-start; color: var(--night-muted); }
.phone-grid li b { color: var(--night-ink); }
.phone-grid li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 8px; background: var(--m2); }
.phone-grid li:nth-child(2)::before { background: var(--m3); } .phone-grid li:nth-child(3)::before { background: var(--m4); } .phone-grid li:nth-child(4)::before { background: var(--m1); }
.os { display: flex; gap: 10px; flex-wrap: wrap; }
.os span { padding: 8px 14px; border-radius: 12px; border: 1px solid rgb(255 255 255 / 16%); font-weight: 600; font-size: 14px; }
.phone { width: 300px; max-width: 100%; margin-inline: auto; border-radius: 44px; padding: 12px; background: #2a2440;
  box-shadow: 0 0 0 2px #3b3456, 0 50px 90px -30px rgb(0 0 0 / 90%); transform: rotate(-4deg); }
.phone .screen { border-radius: 34px; overflow: hidden; background: #f4f2fb; color: #16121f; height: 560px; display: flex; flex-direction: column; }
.phone .chat { flex: 1; padding: 46px 14px 12px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; font-size: 13.5px; }
.phone .bubble { max-width: 82%; padding: 8px 12px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 8%); }
.phone .bubble.me { align-self: flex-end; background: #7c3aed; color: #fff; }
.phone .input { margin: 0 10px 10px; padding: 10px 12px; border-radius: 18px; background: #fff; font-size: 13.5px; border: 1px solid #e3def0; }
.phone .input::after { content: ""; display: inline-block; width: 2px; height: 1em; background: var(--m2); vertical-align: -2px; margin-left: 2px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.phone .kb { background: #15121f; padding: 10px 10px 14px; color: #f5f3ff; }
.phone .kb .chips { display: flex; gap: 5px; margin-bottom: 8px; }
.phone .kb .chips span { font-size: 11px; padding: 4px 9px; border-radius: 999px; background: #2a2440; white-space: nowrap; }
.phone .kb .chips span.on { background: #7c3aed; }
.phone .kb .st { text-align: center; font-size: 12px; color: #a7a1c2; margin-bottom: 6px; }
.phone .kb .micwrap { display: grid; place-items: center; height: 96px; position: relative; }
.phone .kb .micwrap::before { content: ""; position: absolute; width: 92px; height: 92px; border-radius: 50%; border: 3px solid var(--m3); animation: pulse 1.4s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
.phone .kb .mic { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #f79ac8, var(--m2) 55%, var(--m1)); }
.phone .kb .keys { display: grid; grid-template-columns: 1fr 1fr 4fr 1fr 1.3fr; gap: 5px; margin-top: 4px; }
.phone .kb .keys span { height: 32px; border-radius: 8px; background: #2a2440; display: grid; place-items: center; font-size: 12px; color: #d9d4ee; }

/* команда */
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.team-grid > * { min-width: 0; }
.dict { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 26px; box-shadow: var(--shadow); }
.dict .head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.avatars { display: flex; }
.avatars span { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff;
  border: 3px solid var(--surface); margin-left: -10px; }
.avatars span:first-child { margin-left: 0; }
.avatars span.c3 { color: #16121f; }
.cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.cloud span { padding: 7px 13px; border-radius: 10px; font-weight: 600; font-size: 15px; border: 1.5px solid; }
.cloud span:nth-child(4n+1) { color: var(--violet); border-color: color-mix(in srgb, var(--violet) 40%, transparent); background: color-mix(in srgb, var(--violet) 8%, transparent); }
.cloud span:nth-child(4n+2) { color: var(--pink); border-color: color-mix(in srgb, var(--pink) 40%, transparent); background: color-mix(in srgb, var(--pink) 8%, transparent); }
.cloud span:nth-child(4n+3) { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent); background: color-mix(in srgb, var(--amber) 9%, transparent); }
.cloud span:nth-child(4n+4) { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 40%, transparent); background: color-mix(in srgb, var(--cyan) 8%, transparent); }
.repl { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); display: grid; gap: 8px; font-size: 15px; }
.repl div { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.repl s { color: var(--muted); }
.repl b { color: var(--green); }
.ticks { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; }
.ticks li::before { content: "✓"; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700;
  color: #fff; background: #15803d; margin-top: 1px; }

/* языки */
.langs { display: flex; flex-wrap: wrap; gap: 10px; }
.langs span { padding: 10px 18px; border-radius: 999px; font-weight: 600; background: var(--surface); border: 1px solid var(--line); }
.langs span:nth-child(6n+1) { background: #7c3aed; color: #fff; border-color: transparent; }
.langs span:nth-child(6n+4) { background: var(--m3); color: #16121f; border-color: transparent; }
.langs span:nth-child(9n+6) { background: #0e7490; color: #fff; border-color: transparent; }

/* тарифы */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: 14px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 22px; padding: 26px 22px 22px; overflow: hidden; }
.plan::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--c, var(--line)); }
.plan.spark { --c: #16a34a; } .plan.pro { --c: var(--m4); } .plan.ultra { --c: linear-gradient(90deg, var(--m1), var(--m2), var(--m3)); } .plan.team { --c: var(--m3); }
.plan.ultra { background: var(--night); color: var(--night-ink); border-color: transparent; box-shadow: 0 30px 60px -28px var(--m1); }
.plan.ultra .muted, .plan.ultra li { color: var(--night-muted); }
.plan.ultra .btn { background: #fff; color: var(--night); }
.plan h3 { font-size: 24px; margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plan .ribbon { font: 600 11px var(--font); letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  background: linear-gradient(100deg, #db2777, #b45309); color: #fff; }
.plan .price { font: 900 40px var(--display); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan .price small { font: 500 14px var(--font); letter-spacing: 0; }
.plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; flex: 1; font-size: 15px; align-content: start; }
.plan li { display: flex; gap: 9px; align-items: baseline; }
.plan li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #16a34a; transform: translateY(-2px); }
.plan.ultra li::before { background: var(--m2); }
.plan li.off { opacity: .55; text-decoration: line-through; }
.plan li.off::before { background: var(--muted); }
.plan .btn { width: 100%; }
.plans + .hint { margin-top: 18px; }

/* вопросы и изменения */
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
details { border-bottom: 1px solid var(--line); padding: 16px 0; }
details summary { cursor: pointer; font-weight: 600; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); font-weight: 700; }
details[open] summary::after { content: "−"; background: var(--ink); color: var(--bg); }
details p { margin: 10px 0 0; color: var(--muted); max-width: 46em; }
.timeline { list-style: none; padding: 0; margin: 0 0 0 8px; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 0 26px 28px; }
.timeline li::before { content: ""; position: absolute; left: -9px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--m1); border: 3px solid var(--bg); }
.timeline li:nth-child(2)::before { background: var(--m2); } .timeline li:nth-child(3)::before { background: var(--m3); } .timeline li:nth-child(4)::before { background: var(--m4); }
.timeline h3 { font-size: 18px; margin: 0 0 4px; }
.timeline h3 span { font: 500 14px var(--font); color: var(--muted); letter-spacing: 0; }
.timeline p { margin: 0; color: var(--muted); }

.cta-band { padding-block: 72px; text-align: center; position: relative; overflow: hidden; }
.cta-band h2 { color: #fff; max-width: 15em; margin-inline: auto; }
.cta-band .wave { justify-content: center; margin: 0 auto 26px; }
.cta-band .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }

/* ---------------------------------------------------------------- таблицы */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.yes { color: var(--ok); font-weight: 700; } .no { color: var(--muted); }
.muted-row td { color: var(--muted); }

/* ---------------------------------------------------------------- страницы кабинета */
.page { padding-block: 40px 80px; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.page-head h1 { font-size: clamp(30px, 4vw, 44px); margin: 0; }
.box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; margin: 20px 0; }
.box h2 { font-size: 22px; }
.kv { display: grid; grid-template-columns: 180px 1fr; gap: 8px 16px; margin: 0; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.keyfield { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.keyfield code { flex: 1 1 300px; min-width: 0; padding: 12px 14px; background: var(--soft); border-radius: 11px; overflow-wrap: anywhere; font-size: 13px; user-select: all; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid var(--line); white-space: nowrap; }
.pill.free { color: var(--muted); }
.pill.pro { color: #fff; background: #0e7490; border-color: transparent; }
.pill.ultra { color: #fff; background: linear-gradient(100deg, #7c3aed, #db2777); border-color: transparent; }
.pill.team { color: #16121f; background: var(--m3); border-color: transparent; }
.pill.blocked { color: var(--bad); border-color: var(--bad); }
.pill.admin { color: var(--warn); border-color: var(--warn); }
.danger-zone { border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
.inline { display: inline; margin: 0; }
.actions-cell { white-space: nowrap; }
.actions-cell form + form { margin-left: 12px; }
.pre { white-space: pre-wrap; }
.split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; margin-top: 24px; }
.split > * { min-width: 0; }
.lead-s { font-size: 18px; color: var(--muted); max-width: 40em; }
.plan-hero { border-radius: var(--radius); padding: 26px; margin: 20px 0; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--night) 40%, #2b1f4d); }
.plan-hero .wave { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); height: 60px; opacity: .85; }
.plan-hero .label { color: var(--night-muted); font-size: 14px; position: relative; }
.plan-hero .name { font: 900 36px var(--display); letter-spacing: -.02em; margin: 2px 0 6px; position: relative; }
.plan-hero p { margin: 0; color: var(--night-muted); position: relative; max-width: 34em; }
.plan-hero a { color: #fff; }

/* вход и регистрация: форма на карточке поверх цветного свечения */
.auth-bg { background: radial-gradient(800px 400px at 10% -10%, color-mix(in srgb, var(--m1) 16%, transparent), transparent),
  radial-gradient(700px 400px at 100% 0%, color-mix(in srgb, var(--m2) 12%, transparent), transparent); }
.form-narrow { max-width: 460px; margin: 48px auto 80px; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 32px; box-shadow: var(--shadow); }
.form-narrow h1 { font-size: 32px; }
.form-narrow .btn { width: 100%; margin-top: 20px; }
.form-narrow .wave { height: 34px; margin-bottom: 12px; gap: 4px; }
.form-narrow .wave i { width: 4px; }

/* админка */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 16px 0 22px; }
.stats div { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.stats div b { display: block; font: 900 26px var(--display); font-variant-numeric: tabular-nums; }
.stats div span { color: var(--muted); font-size: 13px; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.filters input { flex: 1 1 240px; width: auto; } .filters select { width: auto; }
.admin-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.admin-actions form { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin: 0; }
.admin-actions h3 { font-size: 15px; margin-bottom: 8px; }
.pager { display: flex; gap: 12px; margin-top: 16px; }
h1.mono { font-family: var(--mono); font-size: clamp(24px, 3.4vw, 34px); letter-spacing: 0; }

.prose { max-width: 46em; padding-block: 40px 72px; }
.prose h2 { font-size: 22px; margin-top: 30px; }

.foot { background: var(--night); color: var(--night-muted); }
.foot .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; padding-block: 48px 36px; font-size: 15px; }
.foot .brand, .foot a.brand { color: #fff; margin-bottom: 12px; display: flex; }
.foot a { color: var(--night-muted); text-decoration: none; display: block; margin: 6px 0; }
.foot a:hover { color: #fff; }
.foot h4 { color: #fff; margin: 0 0 10px; font: 700 14px var(--font); text-transform: uppercase; letter-spacing: .06em; }
.foot .bottom { grid-column: 1 / -1; border-top: 1px solid rgb(255 255 255 / 10%); padding-top: 20px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; }

.mt { margin-top: 22px; } .mt-s { margin-top: 14px; } .narrow { max-width: 440px; }

/* ---------------------------------------------------------------- адаптивность */
@media (max-width: 1080px) {
  .nav { display: none; }
  .burger { display: block; }
}
@media (max-width: 980px) {
  .hero-grid, .fmt, .phone-grid, .team-grid { grid-template-columns: 1fr; }
  .tiles, .plans { grid-template-columns: 1fr 1fr; }
  .stage { max-width: 640px; }
}
@media (max-width: 760px) {
  .steps, .faq { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .foot .wrap { grid-template-columns: 1fr 1fr; }
  .foot .wrap > :first-child { grid-column: 1 / -1; }
  .kv { grid-template-columns: 1fr; } .kv dt { margin-top: 8px; }
  .section { padding-block: 60px; }
  .plan-hero .wave { display: none; }
}
@media (max-width: 600px) {
  .tiles, .plans { grid-template-columns: 1fr; }
  .login-link, .me-label { display: none; }
  .me { padding: 4px; }
  .top-actions .btn.small { padding: 7px 11px; font-size: 13px; }
  .bigkey { width: 64px; height: 60px; font-size: 20px; }
  .phone { transform: none; }
  .form-narrow { padding: 24px 20px; margin-block: 24px 56px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .wave i { height: 60%; }
}
.profile-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.profile-id h1 { margin: 0; }
.profile-id .muted { overflow-wrap: anywhere; }
.avatar.big { width: 64px; height: 64px; font-size: 28px; flex: none; }
.profile-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.form-narrow.wide-form { max-width: 560px; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* админка: вкладки и почта поддержки */
.admin-tabs { display: flex; gap: 4px; flex-wrap: wrap; background: var(--soft); padding: 4px; border-radius: 12px; }
.admin-tabs a { padding: 7px 12px; border-radius: 9px; text-decoration: none; color: var(--ink); font-weight: 500; font-size: 14px; }
.admin-tabs a.on { background: var(--surface); box-shadow: 0 1px 3px rgb(22 18 31 / 12%); }
.count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--m2); color: #fff; font-size: 12px; font-weight: 700; }
.inbox-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin: 18px 0; padding: 14px 18px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.chip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 14px; }
.chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.mail-list { display: grid; gap: 8px; }
.mail-row { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; }
.mail-row:hover { border-color: var(--accent); }
.mail-row.unread { border-left: 4px solid var(--m2); }
.mail-row.unread .mail-subj { font-weight: 700; }
.mail-main { min-width: 0; display: grid; gap: 2px; }
.mail-top { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.mail-subj { overflow-wrap: anywhere; }
.mail-snippet { color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-meta { display: grid; justify-items: end; gap: 4px; text-align: right; }
.pill.st-new { color: #fff; background: var(--m2); border-color: transparent; }
.pill.st-answered { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.pill.st-closed { color: var(--muted); }
.thread-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.thread-head h2 { margin: 0 0 4px; overflow-wrap: anywhere; }
.row-actions { display: flex; gap: 10px; align-items: center; }
.messages { display: grid; gap: 12px; margin: 16px 0; }
.msg { border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; background: var(--surface); max-width: 860px; }
.msg.out { margin-left: auto; background: color-mix(in srgb, var(--m1) 8%, var(--surface)); border-color: color-mix(in srgb, var(--m1) 30%, var(--line)); }
.msg header { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; margin-bottom: 8px; }
.msg-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
@media (max-width: 600px) { .mail-row { grid-template-columns: 1fr; } .mail-row .avatar { display: none; } .mail-meta { justify-items: start; text-align: left; } }
.dl-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; position: relative; }
.os-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.os-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 4px; }
.os-card.current { border: 2px solid var(--accent); box-shadow: var(--shadow); }
.os-card h3 { margin: 10px 0 0; }
.os-card p { margin: 0; }
.os-card .btn { margin-top: 12px; align-self: flex-start; }
.os-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #fff; }
.os-ico svg { width: 24px; height: 24px; }
.os-ico.windows { background: #0e7490; } .os-ico.macos { background: var(--night); } .os-ico.linux { background: var(--m3); color: #16121f; }
.verify > summary { cursor: pointer; font-weight: 600; }
.hashcell { overflow-wrap: anywhere; word-break: break-all; font-size: 13px; }
.install-steps { padding-left: 20px; display: grid; gap: 8px; }
@media (max-width: 760px) { .os-cards { grid-template-columns: 1fr; } }

@media (max-width: 520px) { .top-row .btn { white-space: nowrap; padding: 9px 14px; font-size: 14px; } .brand { font-size: 18px; } }
.os-card.soon { opacity: .6; }
.os-card.soon .os-ico { filter: grayscale(1); }

/* ---------------------------------------------------------------- демо F8 на главной */
.demo { position: relative; display: grid; gap: 14px; }
.demo-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgb(255 255 255 / 7%); border: 1px solid rgb(255 255 255 / 10%); justify-self: start; }
.demo-tab { border: 0; background: transparent; color: var(--night-muted); font: 600 14px var(--font); padding: 8px 14px; border-radius: 10px; cursor: pointer; }
.demo-tab:hover { color: #fff; }
.demo-tab.on { background: #fff; color: var(--night); }
.demo-win { background: #fff; color: var(--night); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; height: 340px;
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / 80%), 0 0 0 1px rgb(255 255 255 / 8%); }
.demo-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid #eee9f8; background: #faf8ff; }
.demo-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ec4899; }
.demo-bar i:nth-child(2) { background: #f59e0b; } .demo-bar i:nth-child(3) { background: #06b6d4; }
.demo-title { margin-left: 8px; font-weight: 600; font-size: 14px; color: #5e5874; }
.demo-body { flex: 1; overflow: hidden; padding: 16px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.msg { max-width: 82%; padding: 9px 13px; border-radius: 16px; font-size: 15px; line-height: 1.4; animation: dd-in .2s ease-out; white-space: pre-line; }
.msg.in { align-self: flex-start; background: #f1eef9; border-bottom-left-radius: 5px; }
.msg.out { align-self: flex-end; background: linear-gradient(120deg, #7c3aed, #db2777); color: #fff; border-bottom-right-radius: 5px; }
.demo-win.doc .demo-body { justify-content: flex-start; }
.doc-text { font-size: 15px; line-height: 1.55; white-space: pre-line; }
.doc-label { align-self: flex-start; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #ecfeff; color: #0e7490; animation: dd-in .2s ease-out; }
.demo-input { margin: 0 12px 12px; min-height: 44px; padding: 11px 14px; border-radius: 14px; background: #f6f4fb; border: 1px solid #ebe7f5; font-size: 15px; display: flex; align-items: center; flex-wrap: wrap; }
.demo-win.doc .demo-input { display: none; }
.demo-ph { color: #a29cb8; }
.demo-typed:not(:empty) ~ .demo-ph { display: none; }
.demo-caret { width: 2px; height: 1.1em; background: var(--m2); margin-left: 1px; visibility: hidden; }
.demo.typing .demo-caret { visibility: visible; }
.demo-ctl { display: flex; align-items: center; gap: 18px; }
.demo-key { border: 0; cursor: pointer; flex: none; transition: transform .08s, box-shadow .08s; }
.demo-key:hover { filter: brightness(1.03); }
.demo-key:active, .demo.listening .demo-key { transform: translateY(5px); box-shadow: 0 2px 0 #b9b2d3, 0 10px 20px -10px rgb(0 0 0 / 60%); }
.demo-status { display: flex; align-items: center; gap: 10px; color: var(--night-muted); font-size: 15px; }
.demo-status kbd { background: var(--night-2); border-color: #3a3356; color: #fff; }
.demo-mic { position: relative; flex: none; width: 12px; height: 12px; border-radius: 50%; background: #5e5874; }
.demo.listening .demo-mic { background: var(--m2); }
.demo.listening .demo-mic::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--m2); animation: pulse 1s ease-out infinite; }
.demo.listening .demo-status { color: #fff; }
@media (max-width: 900px) { .demo-win { height: 300px; } }
@media (max-width: 520px) { .demo-tab { padding: 7px 10px; font-size: 13px; } .demo-key { width: 72px; height: 66px; font-size: 22px; } .demo-status { font-size: 14px; } }