/* Vak: a white day desk. White paper, one steel-blue ink for links, soft sky for buttons, a clay red used only for
   what changed. Three pen marks (tick, wave, strike) carry meaning. There is no dark mode on purpose.
   One stylesheet, one set of tokens: change the palette here. */
:root {
  --paper: #FFFFFF; --paper-2: #F5F8FA; --paper-3: #E6EEF3;
  --ink: #1C2A33; --ink-2: #4F6070; --ink-3: #5A6B78;
  --rule: rgb(28 42 51 / .11); --rule-strong: #7D8D99;
  --accent: #A8432F;      /* the pen: what changed, and nothing else */
  --held: #3A7360;        /* a tick */
  --wobble: #8A6516;      /* a wave */
  --primary: #2F6288;     /* links, focus, progress */
  --btn: #D3E6F3; --btn-hover: #BFD9EB; --on-btn: #1C2A33;
  --sky: #E4EFF6; --sky-line: #C4D9E7; --sage: #E3EFE7; --clay: #F8E4DC; --sandal: #F1DFC6;
  --sans: "Anek", "Noto Naskh Arabic", "Noto Sans Meetei Mayek", "Noto Sans Ol Chiki", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: var(--sans);
  --r: 8px; --gutter: clamp(1.1rem, 4vw, 2.5rem); --max: 72rem; --ease: cubic-bezier(.2, 0, 0, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.65 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
:lang(te) body, :lang(hi) body, :lang(ta) body, :lang(kn) body, :lang(ml) body, :lang(bn) body, :lang(mr) body, :lang(gu) body, :lang(pa) body, :lang(od) body { line-height: 1.85; }
:lang(ur) body, :lang(ks) body { line-height: 2.1; }
h1, h2, h3, h4 { margin: 0; font-weight: 540; letter-spacing: -.015em; line-height: 1.18; text-wrap: balance; }
:lang(te) :is(h1,h2,h3,h4), :lang(hi) :is(h1,h2,h3,h4), :lang(ta) :is(h1,h2,h3,h4), :lang(kn) :is(h1,h2,h3,h4), :lang(ml) :is(h1,h2,h3,h4), :lang(bn) :is(h1,h2,h3,h4) { letter-spacing: 0; line-height: 1.4; font-weight: 600; }
p { margin: 0; text-wrap: pretty; } a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; } [hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--clay); color: var(--ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.h1 { font-size: clamp(2rem, 1.2rem + 3vw, 3.2rem); } .h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); } .h3 { font-size: clamp(1.2rem, 1rem + .8vw, 1.5rem); }
.lede { font-size: clamp(1.02rem, .95rem + .35vw, 1.18rem); color: var(--ink-2); max-width: 34rem; }
.muted { color: var(--ink-2); } .hint { color: var(--ink-3); font-size: .875rem; } .center { text-align: center; }
.eyebrow { font-size: .875rem; color: var(--ink-3); font-weight: 500; }
em { font-style: normal; background: linear-gradient(transparent 62%, var(--clay) 62% 90%, transparent 90%); }

/* header: a line of text, not a floating pill */
.hdr { display: flex; align-items: center; gap: 1.2rem 2rem; flex-wrap: wrap; padding: 1.1rem var(--gutter); max-width: var(--max); margin-inline: auto; border-bottom: 1px solid var(--rule); }
.logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; font-weight: 600; font-size: 1.25rem; letter-spacing: -.02em; color: var(--ink); }
.logo small { font: 450 .95rem var(--sans); color: var(--ink-3); letter-spacing: 0; }
.nav { display: flex; gap: .3rem 1.4rem; flex-wrap: wrap; } .nav a { text-decoration: none; color: var(--ink-2); padding: .3rem 0; border-bottom: 2px solid transparent; font-weight: 500; }
.nav a:hover { color: var(--ink); } .nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.hdr-end { margin-inline-start: auto; display: flex; gap: .4rem 1rem; align-items: center; }
.link { background: none; border: 0; padding: .3rem 0; cursor: pointer; color: var(--ink-2); font-weight: 500; text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: .3em; }
.link:hover { color: var(--ink); text-decoration-color: var(--accent); }

/* buttons: one solid action, the rest are text */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: var(--btn); color: var(--on-btn); border: 0; border-radius: var(--r); padding: .7rem 1.25rem; font-weight: 550; cursor: pointer; text-decoration: none; min-height: 2.75rem; transition: filter .2s, transform .2s var(--ease); }
.btn:hover { background: var(--btn-hover); } .btn:active { transform: translateY(1px); }
.btn.sm { min-height: 2.25rem; padding: .35rem .9rem; font-size: .92rem; }
.btn.line, .btn.dark { background: none; color: var(--ink); border-radius: 0; padding-inline: .1rem; min-height: auto; text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: .35em; }
.btn.line:hover, .btn.dark:hover { filter: none; text-decoration-color: var(--accent); } .btn.go { background: var(--btn); color: var(--on-btn); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.icon-btn { width: 2.5rem; height: 2.5rem; border: 1px solid var(--rule-strong); border-radius: 50%; background: none; display: inline-grid; place-items: center; cursor: pointer; color: var(--ink); } .icon-btn:hover { border-color: var(--ink); }
.ic { flex: none; }

/* fields: an underline, not a box */
.field { display: grid; gap: .35rem; font-size: .875rem; font-weight: 500; color: var(--ink-3); }
.input, select.input, textarea.input { width: 100%; background: none; border: 0; border-bottom: 1.5px solid var(--rule-strong); border-radius: 0; padding: .55rem .1rem; font-size: 1.02rem; color: var(--ink); } select.input { cursor: pointer; padding-inline-end: 1.4rem; }
.input:focus, textarea.input:focus { outline: 0; border-bottom-color: var(--primary); box-shadow: 0 1.5px 0 var(--primary); }
textarea.input { resize: vertical; min-height: 6.5rem; font-size: 1.3rem; line-height: 1.6; background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r); padding: .9rem 1rem; } textarea.input:focus { box-shadow: inset 0 0 0 1.5px var(--primary); }
label.chip input { accent-color: var(--primary); }

/* small things */
.stack { display: grid; gap: 1.2rem; } .row { display: flex; gap: .6rem 1rem; flex-wrap: wrap; align-items: center; } .grow { flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .12rem .55rem; border: 1px solid var(--rule-strong); border-radius: 3px; font-size: .84rem; color: var(--ink-2); background: none; }
button.chip { cursor: pointer; } button.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.on { background: var(--sky); color: var(--ink); border-color: var(--sky-line); }
.chip.ok { color: var(--held); border-color: currentColor; } .chip.wobble { color: var(--wobble); border-color: currentColor; } .chip.broke { color: var(--accent); border-color: currentColor; } .chip.err { color: var(--ink-3); border-style: dashed; }
.seg { display: inline-flex; gap: 1.2rem; flex-wrap: wrap; } .seg > a, .seg > button { background: none; border: 0; border-bottom: 2px solid transparent; padding: .25rem 0; cursor: pointer; color: var(--ink-2); text-decoration: none; font-weight: 500; }
.seg > .on { color: var(--ink); border-bottom-color: var(--accent); }
.card { border-top: 1px solid var(--rule); padding-top: 1rem; } .grid2 { display: grid; gap: 1.6rem 2.4rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.err-box { border-inline-start: 3px solid var(--accent); padding: .5rem 1rem; background: var(--clay); border-radius: 0 var(--r) var(--r) 0; }
.meter { height: 4px; background: var(--paper-3); border-radius: 2px; overflow: hidden; } .meter > i { display: block; height: 100%; background: var(--primary); transition: width .6s var(--ease); }
.diff mark, mark { background: none; color: inherit; text-decoration: underline wavy var(--accent) 1.5px; text-underline-offset: .28em; }
.mk { display: inline-block; vertical-align: -.2em; } .mk.ok { color: var(--held); } .mk.wobble { color: var(--wobble); } .mk.broke { color: var(--accent); } .mk.error { color: var(--ink-3); }

/* the desk: where the tools live; flat on the page */
.sheet { padding: clamp(2.2rem, 5vw, 4.5rem) 0; }
.bench { width: min(100% - 2 * var(--gutter), 56rem); margin-inline: auto; } .bench-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; } .bench-head h2 { font-size: clamp(1.4rem, 1rem + 1.4vw, 1.9rem); }
.mic { width: 3.4rem; height: 3.4rem; border-radius: 50%; border: 1.5px solid var(--ink); background: none; color: var(--ink); display: inline-grid; place-items: center; cursor: pointer; flex: none; transition: background .25s, color .25s; } .mic:hover { background: var(--paper-2); }
.mic.rec { background: var(--sandal); border-color: #E2C79F; color: #1C2A33; animation: breathe 2.4s ease-in-out infinite; } .mic[disabled] { opacity: .4; pointer-events: none; }
@keyframes breathe { 50% { box-shadow: 0 0 0 .8rem color-mix(in srgb, var(--sandal) 55%, transparent); } }
.say { font-size: 1.2rem; line-height: 1.75; } .say s { text-decoration: none; transition: background .25s; border-radius: 3px; } .say s.now { background: var(--sky); }
.heat span { background: color-mix(in srgb, var(--accent) calc(var(--w) * 38%), transparent); border-radius: 3px; padding: 0 .12em; }

/* home */
.hero3 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem); align-items: start; }
.hero3 .lead { grid-column: 1 / span 5; } .hero3 #spec { grid-column: 7 / -1; margin-top: clamp(1rem, 5vw, 4rem); min-width: 0; }
.hero3 h1 { font-size: clamp(2.1rem, 1rem + 3.4vw, 3.5rem); } .hero3 .lede { margin-top: 1.3rem; } .hero3 .acts { margin-top: 1.8rem; display: flex; gap: .8rem 1.6rem; flex-wrap: wrap; align-items: center; }
.specimen { border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule); padding: 1rem 0 1.3rem; position: relative; }
.specimen .q { font-size: clamp(1.35rem, 1rem + 1.2vw, 1.9rem); line-height: 1.5; margin: .7rem 0 .9rem; font-weight: 450; }
.specimen .pair { display: grid; gap: .25rem; margin-bottom: .8rem; } .specimen .pair b { font-weight: 500; color: var(--ink-3); font-size: .82rem; }
.specimen .note { color: var(--accent); font-size: .92rem; padding-inline-start: 1.6rem; position: relative; margin-top: .4rem; } .specimen .note::before { content: ""; position: absolute; inset-inline-start: 0; top: .8em; width: 1.1rem; border-top: 1.5px solid currentColor; }
.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-strong); }
.index li { display: grid; grid-template-columns: 3rem minmax(7rem, 14rem) 1fr auto; gap: 1rem; align-items: baseline; padding: 1.25rem 0; border-bottom: 1px solid var(--rule); }
.index li:first-child { padding-block: 1.9rem; } .index b { color: var(--ink-3); font-weight: 450; } .index h3 { font-size: 1.5rem; } .index li:first-child h3 { font-size: 2rem; } .index p { color: var(--ink-2); max-width: 32rem; }
.steps { display: grid; gap: 2rem 3rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-top: 2rem; } .step { border-top: 1px solid var(--rule-strong); padding-top: 1rem; display: grid; gap: .5rem; } .step b { color: var(--accent); font-weight: 500; } .step h3 { font-size: 1.3rem; }
.faq details { border-top: 1px solid var(--rule); padding: 1rem 0; } .faq details:last-child { border-bottom: 1px solid var(--rule); } .faq summary { cursor: pointer; font-size: 1.1rem; font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: 1rem; } .faq summary::after { content: "+"; color: var(--ink-3); } .faq details[open] summary::after { content: "–"; } .faq p { margin-top: .6rem; color: var(--ink-2); max-width: 44rem; }
.foot { border-top: 1px solid var(--rule); padding: 2.2rem 0 3rem; color: var(--ink-2); font-size: .92rem; } .foot .row { justify-content: space-between; }

/* running and result */
.progress { display: grid; gap: .6rem; } .progress .meter { height: 3px; }
.run-grid { display: grid; gap: 0; border-top: 1px solid var(--rule); } .run-card { display: flex; gap: 1rem; justify-content: space-between; align-items: baseline; padding: .55rem 0; border-bottom: 1px solid var(--rule); font-size: .94rem; animation: rise .35s var(--ease) both; } .run-card.standby { opacity: .5; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.verdict { font-size: clamp(1.7rem, 1rem + 2.4vw, 2.6rem); line-height: 1.2; font-weight: 540; max-width: 40rem; }
.marks { display: flex; flex-wrap: wrap; gap: .25rem .45rem; margin: 1.1rem 0 .4rem; } .marks .mk { width: 1.5rem; height: 1.5rem; }
.result { display: grid; grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr); gap: 2.4rem 3.5rem; align-items: start; } .result > aside { position: sticky; top: 1rem; display: grid; gap: 1rem; font-size: .92rem; color: var(--ink-2); } .result > aside b { display: block; color: var(--ink); font-size: 1.5rem; font-weight: 520; }
.bar-row { display: grid; grid-template-columns: 11rem 1fr 2.6rem; gap: .8rem; align-items: center; font-size: .93rem; } .bar-row b { text-align: end; font-weight: 500; }
.tests { border-top: 1px solid var(--rule); } .test { border-bottom: 1px solid var(--rule); } .test > summary { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; cursor: pointer; list-style: none; align-items: center; } .test .body { padding: 0 0 1rem; display: grid; gap: .6rem; font-size: .95rem; } .test q { display: block; quotes: none; padding: .55rem .8rem; background: var(--paper-2); border-radius: var(--r); white-space: pre-wrap; }
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in { opacity: 1; transform: none; }

/* translate: two columns on one sheet of paper, split by a single line */
.tr-top { display: flex; align-items: baseline; gap: .6rem 1.2rem; flex-wrap: wrap; margin-bottom: 1.2rem; font-size: 1.25rem; font-weight: 500; }
.tr-top .input { width: auto; font-size: 1.25rem; font-weight: 560; padding-inline-end: 1.6rem; color: var(--primary); }
.tr-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule-strong); } .tr-pane { display: flex; flex-direction: column; min-height: 17rem; padding: 1rem 0; } .tr-pane + .tr-pane { border-inline-start: 1px solid var(--rule); padding-inline-start: 1.6rem; } .tr-pane:first-child { padding-inline-end: 1.6rem; }
.tr-text { flex: 1; width: 100%; border: 0; background: none; padding: 0; font: 450 1.35rem/1.75 var(--sans); resize: none; min-height: 10rem; outline: none; white-space: pre-wrap; color: var(--ink); } .tr-text:lang(te), .tr-text:lang(hi) { font-size: 1.45rem; }
.tr-foot { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; align-items: center; padding-top: .8rem; border-top: 1px solid var(--rule); margin-top: .8rem; color: var(--ink-2); font-size: .9rem; }
.tr-bar { height: 2px; margin-bottom: .6rem; } .tr-bar.on { background: linear-gradient(90deg, transparent 0 30%, var(--primary) 30% 60%, transparent 60%) 0 0 / 200% 100%; animation: slide 1.1s linear infinite; } @keyframes slide { to { background-position: -200% 0; } }
.tr-back { margin-top: .8rem; border-top: 1px dashed var(--rule-strong); padding-top: .8rem; }

/* overlays */
.toast { position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%); background: var(--paper); color: var(--ink); border: 1px solid var(--rule-strong); box-shadow: 0 12px 30px -14px rgb(28 42 51 / .3); padding: .7rem 1.2rem; border-radius: var(--r); z-index: 90; max-width: min(92vw, 30rem); animation: rise .3s var(--ease); }
.modal-back { position: fixed; inset: 0; background: rgb(28 42 51 / .14); z-index: 80; display: grid; place-items: center; padding: 1rem; } .modal { background: var(--paper); border-radius: 8px; padding: 1.6rem; width: min(100%, 30rem); max-height: 90vh; overflow: auto; }
.lang-menu { position: absolute; z-index: 70; width: min(19rem, 92vw); max-height: 23rem; overflow: auto; background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 6px; padding: .3rem; box-shadow: 0 14px 40px -18px rgb(28 42 51 / .28); }
.lang-menu button { display: flex; width: 100%; justify-content: space-between; align-items: baseline; gap: .8rem; padding: .5rem .7rem; border: 0; background: none; border-radius: 4px; cursor: pointer; text-align: start; } .lang-menu button:hover, .lang-menu button[aria-selected="true"] { background: var(--paper-2); } .lang-menu small { color: var(--ink-3); font-size: .78rem; text-align: end; }

@media (max-width: 860px) {
  .hero3 .lead, .hero3 #spec { grid-column: 1 / -1; } .hero3 #spec { margin-top: 0; }
  .index li { grid-template-columns: 2rem 1fr; } .index li p { grid-column: 2; } .index li a { grid-column: 2; }
  .result { grid-template-columns: 1fr; } .result > aside { position: static; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }
}
@media (max-width: 700px) { .tr-grid { grid-template-columns: 1fr; } .tr-pane + .tr-pane { border-inline-start: 0; border-top: 1px solid var(--rule); padding-inline-start: 0; } .tr-pane:first-child { padding-inline-end: 0; } .bar-row { grid-template-columns: 7rem 1fr 2.4rem; } }
[dir="rtl"] .tr-text, [dir="rtl"] .say { text-align: start; }
:lang(ur) .say, :lang(ur) .tr-text, :lang(ur) .input { font-family: "Noto Nastaliq Urdu", "Noto Naskh Arabic", var(--sans); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } }