/* audiator.site (AUD-73). A light page with dark blocks and one accent colour, and the
   same page in other dresses: dark, and four of the colours fashion names for 2026 —
   teal, nude, grey, orange (white, the colour of the year, is the page as it comes).
   A dress is put on in place, without loading the page again. No fonts or scripts
   from other sites: everything the page needs is served with it. */
:root {
  --bg: #f8f6f1; --card: #ffffff; --soft: #efece5; --ink: #141416; --muted: #5d5d68;
  --line: rgba(20, 20, 22, .11); --accent: #5b45e0; --accent-soft: rgba(91, 69, 224, .12); --on-accent: #ffffff;
  --block: #141416; --block-ink: #f6f5f1; --block-muted: #b4b3bd; --wave1: #a79bff; --wave2: #7fd1c4;
  --btn: #141416; --on-btn: #ffffff; --shadow: 0 24px 60px rgba(20, 20, 22, .12);
  --sans: "Segoe UI", system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans", sans-serif;
  --serif: Georgia, "Times New Roman", "Noto Serif", serif;
}
html[data-theme="dark"] {
  --bg: #0c0c0f; --card: #17171c; --soft: #15151a; --ink: #f4f3ef; --muted: #a5a4ae;
  --line: rgba(255, 255, 255, .13); --accent: #a79bff; --accent-soft: rgba(167, 155, 255, .16); --on-accent: #0c0c0f;
  --block: #1d1d24; --block-ink: #f6f5f1; --block-muted: #a5a4ae; --wave1: #a79bff; --wave2: #7fd1c4;
  --btn: #f4f3ef; --on-btn: #0c0c0f; --shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
html[data-theme="teal"] {
  --bg: #eef5f4; --card: #ffffff; --soft: #dcecea; --ink: #0d2a2c; --muted: #4b6466;
  --line: rgba(13, 42, 44, .13); --accent: #0f7a80; --accent-soft: rgba(15, 122, 128, .13); --on-accent: #ffffff;
  --block: #0e3b40; --block-ink: #ecfaf8; --block-muted: #a9cdcb; --wave1: #7fe0d6; --wave2: #f2c66d;
  --btn: #0e3b40; --on-btn: #ffffff; --shadow: 0 24px 60px rgba(14, 59, 64, .18);
}
html[data-theme="nude"] {
  --bg: #f7eee5; --card: #fffaf5; --soft: #eedfd0; --ink: #38281f; --muted: #7a6558;
  --line: rgba(56, 40, 31, .13); --accent: #a8613c; --accent-soft: rgba(168, 97, 60, .13); --on-accent: #ffffff;
  --block: #4a3428; --block-ink: #fbf1e8; --block-muted: #d9bfad; --wave1: #f0c39a; --wave2: #f7e3b5;
  --btn: #4a3428; --on-btn: #ffffff; --shadow: 0 24px 60px rgba(74, 52, 40, .16);
}
html[data-theme="grey"] {
  --bg: #eeeef1; --card: #ffffff; --soft: #e1e2e7; --ink: #1c1d22; --muted: #5c5f6a;
  --line: rgba(28, 29, 34, .13); --accent: #4c5364; --accent-soft: rgba(76, 83, 100, .14); --on-accent: #ffffff;
  --block: #25272e; --block-ink: #f1f2f5; --block-muted: #aeb1bc; --wave1: #c9ccd6; --wave2: #8fb7ff;
  --btn: #25272e; --on-btn: #ffffff; --shadow: 0 24px 60px rgba(37, 39, 46, .16);
}
html[data-theme="orange"] {
  --bg: #fff6ec; --card: #ffffff; --soft: #ffe8d0; --ink: #2b1a0c; --muted: #7b5d45;
  --line: rgba(43, 26, 12, .13); --accent: #e3560b; --accent-soft: rgba(227, 86, 11, .13); --on-accent: #ffffff;
  --block: #3b1f0b; --block-ink: #fff3e6; --block-muted: #e6c3a3; --wave1: #ffb06b; --wave2: #ffe08a;
  --btn: #3b1f0b; --on-btn: #ffffff; --shadow: 0 24px 60px rgba(227, 86, 11, .16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 var(--sans); transition: background .35s, color .35s; }
main, .nav, .foot { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
h1, h2, h3, p, ul { margin: 0; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; line-height: 1.1; }
html[lang^="zh"] h1, html[lang^="zh"] h2 { font-family: var(--sans); font-weight: 600; letter-spacing: 0; line-height: 1.22; }
h1 { font-size: clamp(38px, 4.7vw, 66px); }
h2 { font-size: clamp(28px, 3.7vw, 48px); }
h3 { font-size: 20px; font-weight: 600; line-height: 1.3; }
em { font-style: italic; color: var(--accent); }
html[lang^="zh"] em { font-style: normal; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
section { padding: 52px 0; scroll-margin-top: 78px; }
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico.big { width: 30px; height: 30px; color: var(--accent); }

/* --- the top bar --- */
.nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 26px; height: 66px; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 19px; text-decoration: none; }
.brand .ico { color: var(--accent); width: 22px; height: 22px; }
.links { display: flex; gap: 22px; margin-right: auto; font-size: 15px; }
.links a { text-decoration: none; color: var(--muted); transition: color .2s; white-space: nowrap; }
.links a:hover { color: var(--ink); }
.tools { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.themes { display: flex; gap: 7px; }
.themes button { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); padding: 0; cursor: pointer; outline-offset: 3px; transition: transform .15s; }
.themes button:hover { transform: scale(1.18); }
.themes button[data-theme-pick="light"] { background: #f8f6f1; }
.themes button[data-theme-pick="dark"] { background: #17171c; }
.themes button[data-theme-pick="teal"] { background: #0f7a80; }
.themes button[data-theme-pick="nude"] { background: #d9b99b; }
.themes button[data-theme-pick="grey"] { background: #9a9ca6; }
.themes button[data-theme-pick="orange"] { background: #f2711c; }
.themes button.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.langs { display: flex; gap: 10px; font-size: 14px; }
.langs a { text-decoration: none; color: var(--muted); }
.langs a.on { color: var(--ink); font-weight: 600; }

.btn { display: inline-flex; align-items: center; gap: 9px; background: var(--btn); color: var(--on-btn); border: 1px solid var(--btn); border-radius: 999px; padding: 13px 24px; font: 600 16px/1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .15s, box-shadow .2s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px var(--accent-soft); }
.btn.small { padding: 9px 16px; font-size: 14px; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.light { background: var(--block-ink); color: var(--block); border-color: var(--block-ink); }

/* --- the first screen: the words and the living picture side by side, both in view at once --- */
.hero { display: grid; grid-template-columns: 1.02fr 1fr; gap: 52px; align-items: center; padding-top: 34px; padding-bottom: 44px; }
.badge { display: inline-block; background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 6px 16px; font-size: 14px; font-weight: 600; letter-spacing: .02em; margin-bottom: 20px; }
.sub { max-width: 560px; margin: 20px 0 26px; color: var(--muted); font-size: 19px; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; }
.facts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 26px; color: var(--muted); font-size: 15px; }
.facts li { display: flex; align-items: center; gap: 6px; }
.facts .ico { width: 17px; height: 17px; color: var(--accent); stroke-width: 2.4; }
.stage { position: relative; margin-bottom: 24px; }
.stage img { width: 100%; border-radius: 28px; box-shadow: var(--shadow); aspect-ratio: 3 / 2; object-fit: cover; }
/* The typed text sits over the wall of the room, to the left: never over a face. */
.typed { position: absolute; left: -18px; top: 7%; width: min(270px, 44%); text-align: left; background: color-mix(in srgb, var(--card) 95%, transparent); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; font-size: 15px; line-height: 1.45; min-height: 88px; box-shadow: var(--shadow); backdrop-filter: blur(8px); }
.caret { display: inline-block; width: 2px; height: 1.05em; background: var(--accent); margin-left: 2px; vertical-align: -3px; animation: blink 1s steps(2) infinite; }
.bar { position: absolute; left: 50%; bottom: -24px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 12px; background: #141416; color: #f6f5f1; border-radius: 999px; padding: 13px 22px; font-size: 15px; font-weight: 600; white-space: nowrap; box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 70%, transparent), 0 14px 44px color-mix(in srgb, var(--accent) 45%, transparent); transition: box-shadow .4s; }
.bar .ico { color: #ff6b6b; transition: color .3s; }
.bar.done { box-shadow: 0 0 0 1px rgba(92, 214, 150, .8), 0 14px 44px rgba(92, 214, 150, .35); }
.bar.done .ico { color: #5cd696; }
.bar.idle .ico { color: #b4b3bd; }
.wave { display: inline-flex; align-items: center; gap: 3px; height: 22px; }
.wave i { width: 3px; height: 100%; border-radius: 2px; background: currentColor; transform: scaleY(.25); animation: eq 1.1s ease-in-out infinite; }
.wave i:nth-child(2n) { animation-delay: -.35s; } .wave i:nth-child(3n) { animation-delay: -.7s; } .wave i:nth-child(4n+1) { animation-delay: -.15s; } .wave i:nth-child(5n) { animation-delay: -.9s; }
.bar.done .wave i, .bar.idle .wave i { animation: none; transform: scaleY(.18); }

/* --- the running lines --- */
.marquee { overflow: hidden; padding: 10px 0; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.track { display: flex; width: max-content; animation: slide 46s linear infinite; }
.track.back { animation-direction: reverse; animation-duration: 54s; }
.track span { font-family: var(--serif); font-size: 24px; color: var(--muted); padding: 0 24px; white-space: nowrap; }
.track span::after { content: "·"; margin-left: 48px; color: var(--accent); }
html[lang^="zh"] .track span { font-family: var(--sans); }
.track.chips span { font: 500 16px/1 var(--sans); color: var(--ink); border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 11px 18px; margin: 0 6px; }
.track.chips span::after { content: none; }
.jobs { margin-top: 22px; display: grid; gap: 2px; }

/* --- "Just Ctrl + Space": how it works --- */
.keys { text-align: center; padding-top: 60px; }
kbd { display: inline-block; font: 600 .5em/1 var(--sans); letter-spacing: 0; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-bottom-width: 5px; border-radius: 14px; padding: .55em .8em; margin: 0 .12em; vertical-align: .22em; cursor: pointer; user-select: none; transition: transform .08s, border-bottom-width .08s, background .2s; }
kbd.wide { padding-left: 2.1em; padding-right: 2.1em; }
kbd.down { transform: translateY(3px); border-bottom-width: 2px; background: var(--accent-soft); }
.plus { font-size: .55em; color: var(--muted); vertical-align: .3em; margin: 0 .1em; }
.keys-lines { margin: 28px auto 0; max-width: 660px; display: grid; gap: 8px; }
.line { color: var(--muted); font-size: 20px; opacity: .45; transition: opacity .3s, color .3s; }
.line .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: currentColor; margin-right: 12px; vertical-align: 1px; }
.line.on { color: var(--ink); opacity: 1; }
.line.on .dot { background: var(--accent); }
.bar.demo { position: static; transform: none; margin-top: 28px; }
.try { display: flex; align-items: center; gap: 12px; margin: 26px auto 0; background: var(--accent); color: var(--on-accent); border: 0; border-radius: 999px; padding: 15px 28px; font: 600 18px/1 var(--sans); cursor: pointer; box-shadow: 0 12px 34px var(--accent-soft); transition: transform .15s; }
.try:hover { transform: translateY(-2px) scale(1.02); }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: currentColor; animation: pulse 1.6s ease-out infinite; }
.hint { margin-top: 12px; color: var(--muted); font-size: 15px; }
.steps { margin-top: 44px; text-align: left; }

/* --- the voice and the computer's sound: both, or either --- */
.both { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; background: var(--block); color: var(--block-ink); border-radius: 34px; padding: 52px; margin-top: 28px; }
.both em { color: var(--wave2); }
.both p { color: var(--block-muted); margin-top: 18px; }
.both p.pick { color: var(--block-ink); font-weight: 600; margin-top: 24px; }
.modes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.modes button { border: 1px solid rgba(255, 255, 255, .26); background: transparent; border-radius: 999px; padding: 9px 16px; font: 500 15px/1 var(--sans); color: var(--block-muted); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.modes button:hover { border-color: var(--block-ink); color: var(--block-ink); }
.modes button.on { background: var(--block-ink); color: var(--block); border-color: var(--block-ink); font-weight: 600; }
.both-vis { display: grid; gap: 14px; }
.src { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 14px; background: rgba(255, 255, 255, .07); border-radius: 18px; padding: 16px 20px; transition: opacity .35s; }
.src b { font-size: 14px; font-weight: 600; color: var(--block-muted); }
.wave.big { height: 40px; gap: 5px; color: var(--wave1); }
.wave.big i { width: 4px; }
.wave.big.alt { color: var(--wave2); }
.wave.big.alt i { animation-duration: 1.5s; }
.both[data-mode="mic"] .src[data-src="sys"], .both[data-mode="sys"] .src[data-src="mic"] { opacity: .3; }
.both[data-mode="mic"] .src[data-src="sys"] .wave i, .both[data-mode="sys"] .src[data-src="mic"] .wave i { animation: none; transform: scaleY(.1); }
.lines { background: var(--block-ink); color: var(--block); border-radius: 18px; padding: 18px 22px; font-size: 15px; display: grid; gap: 4px; min-height: 116px; }
.lines span { opacity: 0; animation: say 9s infinite; }
.lines span:nth-child(2) { animation-delay: 1.6s; } .lines span:nth-child(3) { animation-delay: 3.2s; }

/* --- cards, tiles, numbers, plans --- */
.feat h2, .who h2, .lang h2, .faq h2, .plans h2 { margin-bottom: 30px; }
.who h2 { margin-bottom: 14px; }
.lead { max-width: 760px; color: var(--muted); font-size: 20px; margin-bottom: 30px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card { background: var(--soft); border-radius: 26px; padding: 28px; display: grid; gap: 10px; align-content: start; }
.card p, .tile p, .stat p, .plan p { color: var(--muted); }
.card.dark { background: var(--block); color: var(--block-ink); }
.card.dark p { color: var(--block-muted); }
.card.dark .ico.big { color: var(--wave2); }
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.tile { border-radius: 28px; overflow: hidden; background: var(--soft); grid-column: span 6; }
/* A photo is shown whole, as tall as its tile: its width follows from its own shape, nothing is cut off. */
.tile.photo { display: grid; grid-template-columns: auto 1fr; }
.tile.photo img { height: 420px; width: auto; max-width: none; }
.tile .cap { padding: 28px; display: grid; gap: 10px; align-content: center; }
.tile.dark { background: var(--block); color: var(--block-ink); }
.tile.dark p { color: var(--block-muted); }
.tile.plain { padding: 28px; display: grid; gap: 10px; align-content: start; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.stat { background: var(--soft); border-radius: 28px; padding: 36px; }
.stat b { display: block; font: 400 clamp(84px, 12vw, 160px)/.95 var(--serif); letter-spacing: -.04em; color: var(--accent); }
.stat p { font-size: 19px; max-width: 400px; margin-top: 12px; }
.stat.dark { background: var(--block); }
.stat.dark b { color: var(--block-ink); }
.stat.dark p { color: var(--block-muted); }
.note { margin-top: 20px; color: var(--muted); font-size: 17px; }
.plans-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: stretch; }
.plan-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: start; }
.plan-cards .note { grid-column: 1 / -1; margin-top: 4px; }
.plan { position: relative; background: var(--soft); border-radius: 26px; padding: 28px; display: grid; gap: 8px; align-content: start; }
.plan.best { background: var(--block); color: var(--block-ink); }
.plan.best p { color: var(--block-muted); }
.price { font: 400 58px/1 var(--serif); letter-spacing: -.03em; margin: 4px 0 8px; }
.price small { font: 500 16px/1 var(--sans); letter-spacing: 0; opacity: .75; }
.tag { position: absolute; top: 20px; right: 20px; background: var(--wave2); color: #141416; border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 700; }
.plans-grid img { width: 100%; height: 100%; min-height: 260px; border-radius: 28px; box-shadow: var(--shadow); object-fit: cover; }

/* --- the questions, the last call --- */
.qa { max-width: 840px; border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; font-size: 20px; font-weight: 600; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 28px; font-weight: 300; color: var(--accent); transition: transform .25s; }
details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
details p { padding: 0 44px 22px 0; color: var(--muted); font-size: 18px; }
.last { text-align: center; background: var(--block); color: var(--block-ink); border-radius: 34px; padding: 72px 24px; margin: 24px 0 52px; }
.last .btn { margin-top: 28px; }
.last p { margin-top: 16px; color: var(--block-muted); font-size: 15px; }
.foot { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 22px; padding-bottom: 40px; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); }

/* --- movement: things come in as the page is scrolled --- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }
.grid3 .reveal:nth-child(3n+2), .bento .reveal:nth-child(2), .stats .reveal:nth-child(2), .plan-cards .reveal:nth-child(2) { transition-delay: .12s; }
.grid3 .reveal:nth-child(3n), .bento .reveal:nth-child(3) { transition-delay: .24s; }
.bento .reveal:nth-child(4) { transition-delay: .36s; }
@keyframes eq { 0%, 100% { transform: scaleY(.22); } 50% { transform: scaleY(1); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes slide { to { transform: translateX(-50%); } }
@keyframes say { 0%, 4% { opacity: 0; transform: translateY(6px); } 10%, 78% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 currentColor; } 70%, 100% { box-shadow: 0 0 0 12px transparent; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .wave i, .track, .caret, .pulse { animation: none; }
  .wave i { transform: scaleY(.6); }
  .lines span { animation: none; opacity: 1; }
}

@media (max-width: 1080px) {
  .links { display: none; }
  .hero { grid-template-columns: 1fr 1fr; gap: 32px; }
  .plans-grid { grid-template-columns: 1fr; }
  .plans-grid img { height: auto; aspect-ratio: 16 / 9; }
}
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; gap: 26px; padding-top: 22px; }
  .hero-text { text-align: center; }
  .sub { margin-left: auto; margin-right: auto; }
  .cta, .facts { justify-content: center; }
  .typed { left: 8px; top: 8px; font-size: 14px; padding: 12px 14px; min-height: 0; }
  .both { grid-template-columns: 1fr; padding: 34px 26px; }
  .grid3, .stats { grid-template-columns: 1fr; }
  .tile { grid-column: span 12; }
  .sub, .line, .stat p, .lead { font-size: 18px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  main, .nav, .foot { padding-left: 16px; padding-right: 16px; }
  .nav { gap: 10px; }
  .themes { gap: 5px; }
  .themes button { width: 16px; height: 16px; }
  .langs { gap: 7px; font-size: 13px; }
  .tools { gap: 10px; }
  .tools .btn { display: none; }
  h1 { font-size: 34px; }
  .badge { margin-bottom: 12px; }
  .sub { font-size: 16px; margin: 12px auto 16px; }
  .btn { padding: 12px 18px; font-size: 15px; }
  .facts { margin-top: 14px; font-size: 13px; gap: 4px 12px; }
  .stage img { border-radius: 20px; }
  .typed { position: static; width: auto; margin-top: 34px; font-size: 14px; min-height: 66px; }
  .bar { padding: 10px 15px; font-size: 13px; gap: 9px; bottom: -18px; }
  /* On a phone the typed text goes under the photo; the bar stays on the photo's lower edge (the photo is two thirds as tall as it is wide). */
  .stage .bar { bottom: auto; top: calc((100vw - 32px) * 2 / 3 - 24px); }
  .both { padding: 28px 20px; border-radius: 24px; }
  .src { grid-template-columns: 76px 1fr; }
  .tile.photo img { height: 300px; }
  .tile .cap, .tile.plain, .card, .stat, .plan { padding: 22px; }
  .plan-cards { grid-template-columns: 1fr; }
  .try { font-size: 16px; padding: 14px 20px; }
  summary { font-size: 18px; }
  kbd.wide { padding-left: 1.3em; padding-right: 1.3em; }
  .track.chips span { font-size: 14px; padding: 9px 14px; }
}