/* Ink on pearl, frosted-glass panels, one saffron (kesri) accent. */
:root {
  --bg: #f6f6fa;
  --ink: #0d0f1c;
  --soft: #2a2e45;
  --muted: #62677c;
  --line: rgba(13, 15, 28, .1);
  --accent: #d97706;
  --accent-soft: rgba(217, 119, 6, .12);
  --royal: #27348b;
  --royal-soft: rgba(39, 52, 139, .1);
  --glass: rgba(255, 255, 255, .58);
  --glass-edge: rgba(255, 255, 255, .85);
  --shadow: 0 1px 1px rgba(13, 15, 28, .04), 0 24px 60px -28px rgba(20, 24, 60, .28);
  --radius: 22px;
  --sans: "Inter", "Noto Sans Gurmukhi", "Noto Sans Devanagari", system-ui, sans-serif;
  --serif: "Instrument Serif", "Noto Serif Gurmukhi", "Noto Serif Devanagari", Georgia, serif;
}
:root:lang(pa) {
  --sans: "Noto Sans Gurmukhi", "Inter", "Noto Sans Devanagari", system-ui, sans-serif;
  --serif: "Noto Serif Gurmukhi", "Instrument Serif", serif;
}
:root:lang(hi) {
  --sans: "Noto Sans Devanagari", "Inter", "Noto Sans Gurmukhi", system-ui, sans-serif;
  --serif: "Noto Serif Devanagari", "Instrument Serif", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: var(--serif); font-weight: 400; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; }
:lang(pa) h1, :lang(pa) h2, :lang(hi) h1, :lang(hi) h2 { font-weight: 500; line-height: 1.4; letter-spacing: 0; }
h3 { font-size: 1.06rem; font-weight: 600; line-height: 1.5; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

.wrap { width: min(1120px, 100% - 36px); margin-inline: auto; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 50; background: #fff; padding: 12px 16px; border-radius: 10px; }

/* Soft colour behind everything, so the glass has something to blur. */
.glow {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 34% at 86% 8%, rgba(245, 158, 11, .22), transparent 72%),
    radial-gradient(40% 40% at 6% 30%, rgba(79, 97, 220, .16), transparent 72%),
    radial-gradient(45% 40% at 70% 96%, rgba(236, 110, 60, .12), transparent 72%),
    var(--bg);
}

.glass {
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  border-radius: var(--radius);
}

/* Header */
.top { position: sticky; top: 0; z-index: 20; padding-top: 12px; }
.top .wrap {
  display: flex; align-items: center; gap: 14px; min-height: 62px; padding: 8px 10px 8px 20px;
  background: rgba(255, 255, 255, .62); border: 1px solid var(--glass-edge); border-radius: 999px;
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: 0 10px 40px -22px rgba(20, 24, 60, .35);
}
.brand { text-decoration: none; margin-right: auto; display: inline-block; }
.brand-mark { display: flex; align-items: baseline; gap: 8px; font-family: "Noto Serif Gurmukhi", serif; }
.brand-mark b { font-size: 1.35rem; font-weight: 600; line-height: 1.3; }
.brand-mark i { font-style: normal; font-size: .95rem; color: var(--accent); font-weight: 500; }
.nav { display: none; gap: 26px; }
.nav a { text-decoration: none; font-size: .93rem; color: var(--muted); }
.nav a:hover { color: var(--ink); }
.lang { display: flex; border-radius: 999px; padding: 3px; background: rgba(13, 15, 28, .06); }
.lang a { padding: 5px 11px; border-radius: 999px; text-decoration: none; color: var(--muted); font-size: .84rem; line-height: 1.6; font-weight: 500; }
.lang a[aria-current] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(13, 15, 28, .16); }
.top .btn { display: none; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 12px 28px; border-radius: 999px;
  background: var(--ink); color: #fff;
  font: inherit; font-weight: 500; font-size: 1.04rem; text-decoration: none;
  box-shadow: 0 14px 30px -14px rgba(13, 15, 28, .7), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -14px rgba(13, 15, 28, .75), inset 0 1px 0 rgba(255, 255, 255, .18); }
.btn svg { width: 22px; height: 22px; flex: none; }
.btn.small { min-height: 44px; padding: 8px 20px; font-size: .92rem; box-shadow: none; }
.btn.ghost { background: rgba(255, 255, 255, .55); color: var(--ink); border: 1px solid var(--glass-edge); box-shadow: 0 8px 24px -16px rgba(20, 24, 60, .4); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.btn.light { background: #fff; color: var(--ink); }

/* Hero */
.hero { position: relative; padding: 56px 0 0; text-align: center; }
.hero .wrap { position: relative; z-index: 2; }
.greet {
  display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px;
  padding: 7px 20px; border-radius: 999px; font-size: 1rem; color: var(--soft);
  background: rgba(255, 255, 255, .6); border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px -18px rgba(20, 24, 60, .5);
}
.greet span[lang="pa"] { font-family: "Noto Sans Gurmukhi", sans-serif; }
.greet span[lang="hi"] { font-family: "Noto Sans Devanagari", sans-serif; }
.greet i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.hero h1 { margin-top: 26px; }
.hero .name {
  display: block; font-family: "Noto Serif Gurmukhi", serif; font-weight: 600;
  font-size: clamp(2.5rem, 9vw, 5.4rem); line-height: 1.3; letter-spacing: 0;
  background: linear-gradient(180deg, #0d0f1c 30%, #343a6e); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .tagline { display: block; margin-top: 6px; font-size: clamp(1.6rem, 4.6vw, 2.7rem); color: var(--soft); }
.lead { margin: 20px auto 0; font-size: 1.08rem; color: var(--muted); max-width: 35em; }
.actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.chips { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; color: var(--muted); font-size: .93rem; }
.chips li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: middle; }

/* Globe, its light, the sound waves and the sparkles are drawn by site.js.
   What is drawn behind the globe fades out towards every edge, so it melts
   into the page with no hard line. */
.globe { position: relative; height: clamp(440px, 54vw, 700px); margin-top: 6px; z-index: 1; display: grid; place-items: center; }
.globe canvas { display: block; }
.globe .waves {
  position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 2%, #000 30%, #000 70%, transparent 98%);
  mask-image: linear-gradient(to bottom, transparent 2%, #000 30%, #000 70%, transparent 98%);
}
.globe .ball { position: relative; }

/* Sections */
section { padding: 56px 0; position: relative; }
.intro { padding-top: 0; margin-top: -30px; z-index: 3; }
.head { max-width: 38em; margin-bottom: 34px; }
.head.center { margin-inline: auto; text-align: center; }
.head h2, .panel-head h2 { font-size: clamp(1.9rem, 4.6vw, 2.9rem); }
.head p { margin-top: 12px; color: var(--muted); }
.eyebrow { display: block; font-size: .76rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
:lang(pa) .eyebrow, :lang(hi) .eyebrow { letter-spacing: .04em; font-size: .9rem; }
.grid { display: grid; gap: 16px; }

.panel { padding: 30px 22px; border-radius: 28px; }
.panel-head { display: grid; gap: 14px; padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
.panel-head p { color: var(--muted); align-self: end; }
.cell { background: rgba(13, 15, 28, .035); border: 1px solid rgba(13, 15, 28, .05); border-radius: 16px; padding: 20px; transition: background .2s ease, transform .2s ease; }
.cell:hover { background: rgba(255, 255, 255, .8); transform: translateY(-3px); }
.cell-top { display: flex; justify-content: space-between; align-items: center; font-size: .86rem; color: var(--ink); margin-bottom: 26px; }
.cell-top b { font-weight: 500; color: var(--muted); }
.cell-top svg { width: 18px; height: 18px; }
.cell p, .card p { color: var(--muted); margin-top: 6px; font-size: .96rem; }

.card { padding: 24px; transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-4px); }
.ico { width: 48px; height: 48px; border-radius: 14px; margin-bottom: 18px; background: var(--royal-soft); color: var(--royal); display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .8); }
.ico svg { width: 24px; height: 24px; }
.ico.warm { background: var(--accent-soft); color: var(--accent); }

/* Languages + sample */
.split { display: grid; gap: 36px; align-items: center; }
.langcard { display: flex; gap: 18px; align-items: center; text-decoration: none; }
.glyph { flex: none; width: 70px; height: 70px; border-radius: 20px; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 1.8rem; font-weight: 600; font-family: "Noto Sans Gurmukhi", "Noto Sans Devanagari", sans-serif; }
.langcard:nth-child(2) .glyph { background: linear-gradient(135deg, #f59e0b, #d9620a); }
.tag { font-size: .72rem; letter-spacing: .16em; color: var(--muted); }
.note { margin-top: 16px; color: var(--muted); font-size: .92rem; }

.phone { justify-self: center; width: min(350px, 100%); border-radius: 38px; padding: 18px; }
.phone-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px 12px; }
.phone-head b { font-family: "Noto Serif Gurmukhi", serif; font-size: 1rem; font-weight: 600; }
.phone-head span { font-size: .72rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 10px; }
.paper { background: rgba(255, 255, 255, .8); border: 1px solid var(--line); border-radius: 22px; min-height: 250px; padding: 18px; font-family: "Noto Sans Gurmukhi", "Noto Sans Devanagari", sans-serif; font-size: 1.3rem; line-height: 1.8; }
.paper p + p { margin-top: 6px; }
.caret { display: inline-block; width: 2px; height: 1.2em; background: var(--accent); vertical-align: -0.2em; margin-left: 2px; animation: blink 1s steps(2) infinite; }
.phone-foot { display: flex; align-items: center; gap: 14px; padding: 16px 6px 4px; }
.mic { flex: none; width: 60px; height: 60px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; animation: pulse 1.8s ease-out infinite; }
.mic svg { width: 28px; height: 28px; }
.status { font-size: .92rem; color: var(--accent); font-weight: 600; }
.bars { display: flex; align-items: center; gap: 4px; height: 26px; margin-top: 4px; }
.bars i { width: 3px; border-radius: 2px; background: var(--ink); height: 30%; animation: bar 1s ease-in-out infinite; }
.bars i:nth-child(2) { animation-delay: .1s; } .bars i:nth-child(3) { animation-delay: .25s; }
.bars i:nth-child(4) { animation-delay: .4s; } .bars i:nth-child(5) { animation-delay: .15s; }
.bars i:nth-child(6) { animation-delay: .5s; } .bars i:nth-child(7) { animation-delay: .3s; }
.bars i:nth-child(8) { animation-delay: .05s; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(217, 119, 6, .45); } 100% { box-shadow: 0 0 0 22px transparent; } }
@keyframes bar { 50% { height: 100%; } }

/* Tips */
.tips { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px 40px; }
.tips li { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.tips b { font-family: "Instrument Serif", serif; font-weight: 400; font-size: 1.5rem; line-height: 1.2; color: var(--accent); min-width: 1.6em; }
.tips p { color: var(--muted); font-size: .96rem; }

/* Availability */
.badge { display: inline-block; font-size: .78rem; font-weight: 600; border-radius: 999px; padding: 3px 12px; margin-bottom: 12px; }
.ready .badge { background: rgba(22, 130, 90, .12); color: #0f7a53; }
.soon .badge { background: var(--accent-soft); color: var(--accent); }
.later .badge { background: rgba(13, 15, 28, .06); color: var(--muted); }
.card .more { display: inline-block; margin-top: 14px; font-weight: 600; text-decoration: none; }

/* Privacy band */
.deep { margin: 24px 0; }
.deep .wrap { background: radial-gradient(60% 80% at 90% 0%, #2b3270, transparent 70%), #0d0f1c; color: #f2f2f7; border-radius: 32px; padding: 48px 22px; box-shadow: 0 40px 80px -40px rgba(13, 15, 28, .6); }
.deep .eyebrow { color: #fbbf5c; }
.deep .card { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.deep .card p { color: rgba(242, 242, 247, .72); }

/* FAQ */
.faq { max-width: 780px; margin-inline: auto; }
.faq details { border-radius: 18px; margin-bottom: 10px; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 56px 18px 22px; font-weight: 600; font-size: 1.02rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; translate: 0 -50%; font-size: 1.5rem; font-weight: 300; color: var(--accent); font-family: system-ui, sans-serif; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 22px 20px; color: var(--muted); }

/* Final call */
.final { text-align: center; }
.final .box { border-radius: 36px; padding: 60px 24px; color: #fff; background: radial-gradient(70% 90% at 50% 0%, #323a80, transparent 70%), #0d0f1c; box-shadow: 0 40px 80px -40px rgba(13, 15, 28, .7); }
.final .kicker { font-family: "Noto Serif Gurmukhi", serif; color: #fbbf5c; font-size: 1.15rem; }
.final h2 { font-size: clamp(1.8rem, 4.6vw, 2.9rem); margin: 12px auto 30px; max-width: 18em; }

footer { padding: 28px 0 48px; color: var(--muted); font-size: .9rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 28px; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--ink); }

.reveal { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (min-width: 640px) {
  .top .btn { display: inline-flex; }
  .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .tips { grid-template-columns: repeat(2, 1fr); }
  .panel { padding: 40px; }
  .deep .wrap { padding: 56px 40px; }
}
@media (min-width: 960px) {
  body { font-size: 18px; }
  .nav { display: flex; }
  .hero { padding-top: 72px; }
  section { padding: 76px 0; }
  .intro { margin-top: -50px; }
  .panel-head { grid-template-columns: 1fr 1fr; gap: 40px; }
  .cols-3 { grid-template-columns: repeat(3, 1fr); }
  .cols-4 { grid-template-columns: repeat(4, 1fr); }
  .split { grid-template-columns: 1.1fr .9fr; gap: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Keep the pearl-white identity and original animated globe, with a shorter
   path from the first screen to the working Flutter app. */
.hero { padding: 48px 0 36px; }
.hero-layout { display: grid; align-items: center; gap: 8px; }
.hero-copy { min-width: 0; }
.hero-eyebrow { margin: 24px 0 0; }
.hero h1 { margin-top: 12px; }
.search-title { display: block; font-family: var(--sans); font-weight: 600; font-size: clamp(2.5rem, 4.8vw, 3.8rem); line-height: 1.18; letter-spacing: -.025em; }
.hero .search-title + .name { font-size: clamp(1.45rem, 3vw, 2.2rem); margin-top: 18px; background: none; color: var(--soft); }
.hero .name { font-size: clamp(2rem, 5vw, 3.4rem); }
.hero .tagline { font-size: clamp(1.5rem, 3vw, 2rem); }
.hero .lead { max-width: 32em; }
.hero-art { min-width: 0; }
.hero .waves { -webkit-mask-image: radial-gradient(ellipse at center, #000 28%, rgba(0,0,0,.75) 48%, transparent 72%); mask-image: radial-gradient(ellipse at center, #000 28%, rgba(0,0,0,.75) 48%, transparent 72%); }
.hero .globe { height: clamp(330px, 47vw, 530px); margin: 0; }
.hero .quick-start { margin-top: 8px; }
.quick-panel { display: grid; gap: 20px; padding: 24px; text-align: left; border-radius: 28px; align-items: center; }
.quick-heading h2 { font-size: 1.9rem; }
.quick-heading .eyebrow { margin-bottom: 8px; }
.sample-languages { display: flex; gap: 6px; flex-wrap: wrap; }
.sample-languages button { font: inherit; font-size: .88rem; min-height: 44px; padding: 7px 16px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.8); color: var(--soft); cursor: pointer; }
.sample-languages button[aria-pressed="true"] { color: #fff; background: var(--ink); border-color: var(--ink); }
[data-quick-sample] { margin-top: 14px; font-size: 1.15rem; color: var(--soft); min-height: 2em; }
.quick-action p { font-size: .8rem; color: var(--muted); margin-top: 10px; }
.quick-action .btn { width: 100%; padding-inline: 20px; }
.privacy-note { color: var(--muted); font-size: .78rem; max-width: 68em; margin: 16px auto 0; }
.privacy-note a { white-space: nowrap; text-underline-offset: 3px; }
.intro { margin-top: 0; padding-top: 20px; }
@media (min-width: 720px) {
  .quick-panel { grid-template-columns: 1fr 1.3fr; gap: 28px; padding: 28px; }
  .quick-action { grid-column: 1 / -1; text-align: center; }
  .quick-action .btn { width: auto; }
}
@media (min-width: 960px) {
  .hero { padding-top: 40px; }
  .hero-layout { grid-template-columns: 1.05fr 1fr; gap: 0; }
  .hero-copy { text-align: left; padding-block: 22px; }
  .hero-copy .lead { margin-left: 0; font-size: 1rem; }
  .hero-copy .actions, .hero-copy .chips { justify-content: flex-start; }
  .hero-copy .greet { font-size: .88rem; }
  .hero .globe { height: 550px; }
  .quick-panel { grid-template-columns: .85fr 1.1fr .85fr; gap: 28px; padding: 30px; }
  .quick-action { grid-column: auto; text-align: center; }
  .quick-action .btn { width: 100%; }
}
@media (max-width: 400px) {
  .top .wrap { padding-left: 12px; gap: 6px; }
  .brand-mark { gap: 4px; flex-direction: column; }
  .brand-mark b { font-size: 1.05rem; }
  .brand-mark i { font-size: .78rem; }
  .lang a { padding-inline: 8px; }
  .quick-panel { padding: 20px; }
}
/* A calm, readable privacy section and a clean charcoal closing panel. */
.deep .wrap { background: #f0f3ef; color: var(--ink); border: 1px solid #dce3da; box-shadow: 0 24px 60px -40px rgba(13,15,28,.25); }
.deep .eyebrow { color: #98601b; }
.deep .card { background: rgba(255,255,255,.8); border-color: #dce3da; }
.deep .card p { color: var(--muted); }
.final .box { background: #12141c; }
.contact-page { min-height: 65vh; padding: 80px 0; }
.contact-card { max-width: 760px; margin: auto; padding: clamp(28px,5vw,64px); border-radius: 28px; }
.contact-card h1 { font-family: var(--sans); font-weight: 600; font-size: clamp(2rem,4vw,3rem); line-height: 1.3; margin: 16px 0; }
.contact-card p { color: var(--muted); }
.contact-email { display: inline-block; font-size: clamp(1.35rem,3vw,2rem); margin: 28px 0; text-underline-offset: 6px; overflow-wrap: anywhere; }
.developer-credit { margin-bottom: 28px; }
/* The homepage writer: language tabs, an open paper surface and a control dock. */
.writer-section { padding: 12px 0 48px; scroll-margin-top: 104px; }
.writer-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.writer-heading h2 { font-size: clamp(1.8rem,3vw,2.6rem); margin-top: 9px; }
.writer-free { padding: 8px 14px; border-radius: 999px; background: #e8eee5; color: #456044; font-size: .78rem; white-space: nowrap; }
.writer { border-radius: 28px; overflow: hidden; text-align: left; border: 1px solid rgba(255,255,255,.9); }
.writer-tools { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 24px 28px; background: rgba(241,240,248,.6); border-bottom: 1px solid var(--line); }
.writer-label, .writer-font { color: var(--muted); font-size: .78rem; }
.writer-languages { display: flex; gap: 8px; margin-top: 9px; }
.writer button, .writer select { font-family: var(--sans); }
.writer-languages button { display: flex; align-items: center; gap: 12px; border-radius: 14px; border: 1px solid transparent; min-height: 48px; padding: 10px 18px; font-size: 1rem; background: transparent; color: var(--soft); cursor: pointer; }
.writer-languages button span { font-family: Inter,sans-serif; font-size: .76rem; color: var(--muted); }
.writer-languages button[aria-pressed=true] { background: #fff; border-color: #e0deed; box-shadow: 0 3px 12px rgba(20,24,60,.06); }
.writer-font { display: flex; align-items: center; gap: 12px; }
.writer-font select { border: 1px solid #dedde8; background: white; border-radius: 12px; padding: 12px; min-height: 44px; font-size: .88rem; color: var(--ink); }
.writer-paper { padding: 24px 28px 12px; background: rgba(255,255,255,.75); }
.writer textarea { display: block; width: 100%; min-height: 280px; resize: vertical; border: 0; background: transparent; color: var(--ink); font-size: clamp(1.15rem,2vw,1.45rem); line-height: 1.85; padding: 8px 0; border-radius: 8px; }
.writer textarea::placeholder { color: #9293a6; opacity: 1; }
.writer textarea:focus { outline: 2px solid #a8abd0; outline-offset: 8px; }
.writer-interim { color: var(--muted); font-size: 1.05rem; min-height: 1.7em; margin-top: 12px; }
.writer-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 20px 28px; border-top: 1px solid var(--line); }
.writer .writer-mic { border: 0; background: #27348b; color: white; cursor: pointer; border-radius: 16px; box-shadow: none; }
.writer[data-listening=true] .writer-mic { background: #a23232; }
.writer-status { flex: 1; min-width: 120px; font-size: .8rem; color: var(--muted); }
.writer-exports { display: flex; flex-wrap: wrap; gap: 4px; }
.writer-exports button { cursor: pointer; color: var(--soft); padding: 10px 12px; border: 1px solid transparent; background: transparent; border-radius: 10px; font-size: .78rem; min-height: 44px; }
.writer-exports button:hover { background: #eeedf5; }
.writer button:disabled { cursor: default; opacity: .55; }
.writer button:focus-visible, .writer select:focus-visible { outline: 2px solid var(--royal); outline-offset: 3px; }
.writer-meta { padding: 13px 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); color: var(--muted); font-size: .72rem; }
.writer-hint { text-align: center; max-width: 72em; margin: 18px auto 0; color: var(--muted); font-size: .78rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
#writer-print { display: none; }
@media (max-width: 640px) {
  .writer-heading { align-items: start; }
  .writer-free { display: none; }
  .writer-tools { flex-direction: column; align-items: stretch; gap: 18px; padding: 20px; }
  .writer-languages button { flex: 1; justify-content: center; gap: 8px; padding-inline: 12px; }
  .writer-font { justify-content: space-between; }
  .writer-paper { padding: 20px; }
  .writer textarea { min-height: 240px; }
  .writer-bottom { padding: 20px; }
  .writer-mic { width: 100%; justify-content: center; }
  .writer-status { flex-basis: 100%; }
  .writer-exports { width: 100%; }
  .writer-meta { padding-inline: 20px; }
}
@media print {
  body > * { display: none !important; }
  body > #writer-print { display: block !important; white-space: pre-wrap; overflow-wrap: anywhere; color: #000; font-size: 14pt; line-height: 1.7; margin: 0; }
  body { background: #fff; }
  @page { margin: 20mm; }
}