/* ============================================================ Clinidict v2 Light: bone ground, deep clinical teal. Dark: carried over from v1 — navy ground, blue accent, violet secondary, and the two radial glows. ============================================================ */ :root{--paper:#F6F8F6;--surface:#FFF;--ink:#0F1613;--ink-soft:#35443E;--muted:#5A6B65;--faint:#8A9993; --rule:#DCE3E0;--rule-soft:#E9EEEB;--accent:#0E5C52;--accent-ink:#FFF;--accent-dim:#E3EFEC; --live:#8C2F2A;--live-dim:#F3E4E2;--flag:#8A6212;--flag-dim:#F5EBD6;--flag-line:#C69A38; --wa:#1E7A4B;--wa-dim:#E2F0E8;--link:#0E5C52; --shadow:0 1px 2px rgba(15,22,19,.05),0 8px 24px -12px rgba(15,22,19,.14); --s--1:.8125rem;--s0:.9375rem;--s1:1.0625rem;--s3:1.9rem;--speak:2.55rem} @media(prefers-color-scheme:dark){:root:not([data-theme=light]){ --paper:#0a0f1e;--surface:#1b2433;--ink:#e9eefb;--ink-soft:#cfd6e3;--muted:#a9b3c7; --faint:#7d89a6;--rule:#2a3550;--rule-soft:#212b3b;--accent:#7a9dff;--accent-ink:#0a0f1e; --accent-dim:#1e2a5a;--live:#ff6b6b;--live-dim:#2e1a24;--flag:#ffcc33;--flag-dim:#2b2416; --flag-line:#a88bff;--wa:#28d07f;--wa-dim:#122a1f;--link:#5FC4B0; --shadow:0 10px 25px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.35)}} :root[data-theme=dark]{ --paper:#0a0f1e;--surface:#1b2433;--ink:#e9eefb;--ink-soft:#cfd6e3;--muted:#a9b3c7; --faint:#7d89a6;--rule:#2a3550;--rule-soft:#212b3b;--accent:#7a9dff;--accent-ink:#0a0f1e; --accent-dim:#1e2a5a;--live:#ff6b6b;--live-dim:#2e1a24;--flag:#ffcc33;--flag-dim:#2b2416; --flag-line:#a88bff;--wa:#28d07f;--wa-dim:#122a1f;--link:#5FC4B0; --shadow:0 10px 25px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.35)} *{box-sizing:border-box} body{margin:0;background:var(--paper);color:var(--ink);min-height:100vh; font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;font-size:var(--s0);line-height:1.5; -webkit-font-smoothing:antialiased} /* v1's radial swarm, dark only */ @media(prefers-color-scheme:dark){:root:not([data-theme=light]) body{background: radial-gradient(80vw 70vh at 18% -12%,#1e2a5a66,transparent 68%), radial-gradient(62vw 55vh at 118% 6%,#7834ff33,transparent 60%), linear-gradient(180deg,#0a0f1e 0%,#0b1020 45%,#0a0f1e 100%) fixed}} :root[data-theme=dark] body{background: radial-gradient(80vw 70vh at 18% -12%,#1e2a5a66,transparent 68%), radial-gradient(62vw 55vh at 118% 6%,#7834ff33,transparent 60%), linear-gradient(180deg,#0a0f1e 0%,#0b1020 45%,#0a0f1e 100%) fixed} .shell{max-width:62rem;margin:0 auto;padding:0 1.75rem 4rem} .shell.wide{max-width:76rem} /* Content links — anything in prose, on About, Privacy and Terms. There was no rule for these at all, so they fell back to the browser's blue (purple once visited) with a solid underline, which looks nothing like the rest of the page. Teal with a dotted underline, matching the "whatever*" treatment in the hero; the underline goes solid on hover so the affordance is still obvious. Every navigational and chrome link is class-scoped and beats this on specificity, so the wordmark, masthead and footer are untouched. --link, not --accent: the DARK theme's accent is periwinkle blue (#7a9dff), so accent-coloured links there still read as a default browser link, which is the whole complaint. --link stays teal in both themes. */ a{color:var(--link);text-decoration:underline dotted;text-underline-offset:.2em; text-decoration-thickness:1px} a:visited{color:var(--link)} a:hover{text-decoration-style:solid} :where(a,button,select,[contenteditable]):focus-visible{outline:2px solid var(--accent); outline-offset:3px;border-radius:3px} .hidden{display:none!important} /* ---------- masthead ---------- */ .masthead{display:flex;align-items:center;justify-content:space-between;gap:1.5rem; padding:1.25rem 0 1.1rem;border-bottom:1px solid var(--rule)} /* A logo, not a link: clickable to go home, but never wearing link styling. `color` is pinned on every state because an unstyled falls back to the browser's purple visited colour and an underline — which is exactly what shipped for an hour when the HTML updated before the cached CSS did. */ .wordmark{display:flex;align-items:baseline;gap:.5rem;color:var(--ink);text-decoration:none; cursor:pointer;transition:color .18s ease} .wordmark:link,.wordmark:visited,.wordmark:active{color:var(--ink);text-decoration:none} /* Colour and transition BOTH live on the anchor; only inherits. Putting the transition on , which has no colour of its own, left it stuck on the old theme's ink when the theme changed — a white wordmark on the bone ground. */ .wordmark:hover{color:var(--accent)} @media(prefers-reduced-motion:reduce){.wordmark{transition:none}} .wordmark:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px} .wordmark b{font-weight:600;font-size:1.0625rem;letter-spacing:.085em;text-transform:uppercase} .wordmark .dot{width:5px;height:5px;border-radius:50%;background:var(--accent);align-self:center} .mast-right{display:flex;align-items:center;gap:1.4rem} .mast-nav{display:flex;gap:1.4rem} .mast-nav a{color:var(--muted);text-decoration:none;font-size:var(--s--1);padding-bottom:2px; border-bottom:1px solid transparent;cursor:pointer;background:none;border-width:0 0 1px;font-family:inherit} .mast-nav a:hover{color:var(--ink);border-bottom-color:var(--accent)} .theme-btn{background:none;border:1px solid var(--rule);color:var(--muted);width:30px;height:30px; border-radius:50%;cursor:pointer;display:grid;place-items:center} .theme-btn:hover{color:var(--ink);border-color:var(--accent)} .theme-btn svg{width:14px;height:14px} .state{display:none}.state.is-active{display:block} /* ---------- hero ---------- */ .hero{padding:3.4rem 0 1.8rem;max-width:40rem} .speakline{font-family:Newsreader,Georgia,serif;font-weight:300;font-size:var(--speak); line-height:1.12;letter-spacing:-.02em;margin:0;text-wrap:balance} /* inline-grid stacks every language in one cell, so the line sizes to the widest script and never reflows as they cycle */ .rotator{display:inline-grid;vertical-align:baseline;text-align:left} .rotator span{grid-area:1/1;color:var(--accent);font-weight:400;opacity:0; transform:translateY(.3em);animation:cycle 22s infinite;white-space:nowrap} @keyframes cycle{0%{opacity:0;transform:translateY(.3em)}1.6%{opacity:1;transform:translateY(0)} 8%{opacity:1;transform:translateY(0)}9.6%{opacity:0;transform:translateY(-.3em)}100%{opacity:0}} .rotator span:nth-child(1){animation-delay:0s} .rotator span:nth-child(2){animation-delay:2s;font-family:"Noto Sans Devanagari",serif} .rotator span:nth-child(3){animation-delay:4s;font-family:"Noto Sans Devanagari",serif} .rotator span:nth-child(4){animation-delay:6s;font-family:"Noto Sans Tamil",serif} .rotator span:nth-child(5){animation-delay:8s;font-family:"Noto Sans Bengali",serif} .rotator span:nth-child(6){animation-delay:10s;font-family:"Noto Sans Telugu",serif} .rotator span:nth-child(7){animation-delay:12s;font-family:"Noto Sans Kannada",serif} .rotator span:nth-child(8){animation-delay:14s;font-family:"Noto Sans Malayalam",serif} .rotator span:nth-child(9){animation-delay:16s;font-family:"Noto Sans Gujarati",serif} .rotator span:nth-child(10){animation-delay:18s;font-family:"Noto Sans Gurmukhi",serif} .rotator span:nth-child(11){animation-delay:20s;font-family:"Noto Naskh Arabic",serif;direction:rtl} .hero h1{font-family:Newsreader,Georgia,serif;font-weight:300;font-size:var(--s3);line-height:1.2; margin:1rem 0 .75rem;letter-spacing:-.012em;text-wrap:balance} .hero p.lede{margin:0;color:var(--muted);font-size:var(--s1);max-width:32rem;line-height:1.55} .hero p.lede + p.lede{margin-top:.45rem} /* Phone: the two sentences run on as continuous text, which saves a whole line of vertical space above the fold. Desktop keeps them as separate lines. */ @media(max-width:34rem){ .hero p.lede{display:inline} .hero p.lede + p.lede{margin-top:0} } /* The popup anchors to the WRAPPER, not the word and not the paragraph. Anchored to the word it ran 44px off the left edge at 375px; anchored to the paragraph it would move again on a phone, where the two paragraphs run together inline. The wrapper is full content width in both layouts. */ .lede-wrap{position:relative} .hero .keep{color:var(--ink)} /* "whatever*" — the eleven languages, on hover, focus or tap. Focusable so it works from the keyboard and so a tap opens it on touch, where hover does not exist. The list is the same eleven the rotator cycles and language_hints sends (§4.3a-ii); if one changes they all change. */ .tip{color:var(--ink);text-decoration:underline dotted; text-underline-offset:.22em;cursor:help} .tip sup{font-size:.62em;color:var(--accent);margin-left:.05em} .tip:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px} .tip-pop{position:absolute;left:0;top:calc(100% + .45rem);z-index:30;width:max-content; max-width:min(21rem,80vw);padding:.6rem .7rem;border:1px solid var(--rule);border-radius:6px; background:var(--surface);box-shadow:0 8px 24px rgba(0,0,0,.13); font-size:var(--s--1);line-height:1.5;color:var(--muted); opacity:0;visibility:hidden;transform:translateY(-3px); transition:opacity .16s ease,transform .16s ease,visibility .16s} .tip-pop i{display:block;font-style:normal;font-size:var(--s--1);letter-spacing:.04em; text-transform:uppercase;color:var(--faint);margin-bottom:.15rem} .tip-pop b{display:inline-block;margin:.28rem .55rem 0 0;font-weight:500;color:var(--ink)} .tip:hover .tip-pop,.tip:focus .tip-pop,.tip:focus-within .tip-pop{ opacity:1;visibility:visible;transform:none} @media (prefers-reduced-motion:reduce){.tip-pop{transition:none}} @media (max-width:32rem){.tip-pop{max-width:calc(100vw - 2.5rem)}} /* ---------- console ---------- */ .console{position:relative;margin-top:2.3rem;padding:1.9rem 1.75rem 1.4rem;border-radius:18px; background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 94%,var(--ink)) 0%,var(--surface) 45%); border:1px solid var(--rule);overflow:hidden; box-shadow:0 1px 0 color-mix(in srgb,var(--surface) 72%,#fff) inset,0 1px 2px rgba(0,0,0,.05), 0 6px 14px -8px rgba(0,0,0,.16),0 26px 50px -30px rgba(0,0,0,.38); display:grid;justify-items:center;gap:1.15rem} .console::before{content:"";position:absolute;inset:0 0 auto;height:1px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 45%,transparent),transparent)} .console-sep{width:min(100%,21rem);height:1px;background:var(--rule);opacity:.75} :root[data-theme=dark] .console{border-color:color-mix(in srgb,var(--rule) 80%,var(--accent))} @media(prefers-color-scheme:dark){:root:not([data-theme=light]) .console{ border-color:color-mix(in srgb,var(--rule) 80%,var(--accent))}} .rec-btn{display:inline-flex;align-items:center;gap:.65rem;border:none;border-radius:100px; padding:.9rem 1.9rem;cursor:pointer;font-family:inherit;font-size:var(--s1);font-weight:500; background:var(--accent);color:var(--accent-ink); box-shadow:0 1px 2px rgba(0,0,0,.12),0 8px 20px -10px color-mix(in srgb,var(--accent) 70%,transparent); transition:transform .12s ease,box-shadow .12s ease} .rec-btn:hover{transform:translateY(-1px); box-shadow:0 2px 4px rgba(0,0,0,.14),0 14px 28px -12px color-mix(in srgb,var(--accent) 80%,transparent)} .rec-btn:active{transform:translateY(0)} .rec-btn[disabled]{opacity:.5;cursor:progress} .rec-btn.stop{background:var(--live);color:#fff;font-size:var(--s0);padding:.75rem 1.4rem; box-shadow:0 1px 2px rgba(0,0,0,.12),0 8px 20px -10px color-mix(in srgb,var(--live) 70%,transparent)} .rec-dot{width:8px;height:8px;border-radius:50%;background:currentColor} .rec-dot.pulse{animation:breathe 2.4s ease-in-out infinite} @keyframes breathe{0%,100%{opacity:1}50%{opacity:.35}} .console-row{display:flex;align-items:center;gap:.5rem 1rem;flex-wrap:wrap;justify-content:center; font-size:var(--s--1);color:var(--faint)} .sel-label{display:inline-flex;align-items:center;gap:.55rem;font-family:"IBM Plex Mono",monospace; font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)} select{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:var(--s--1);letter-spacing:0; text-transform:none;background-color:var(--paper);color:var(--ink);border:1px solid var(--rule); border-radius:9px;padding:.44rem 2rem .44rem .72rem;cursor:pointer;appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%), linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 15px) 53%,calc(100% - 10px) 53%; background-size:5px 5px,5px 5px;background-repeat:no-repeat;transition:border-color .15s} select:hover{border-color:var(--accent)} .dotsep{color:var(--faint);opacity:.55} .linkish{background:none;border:none;color:var(--muted);font-family:inherit;font-size:var(--s--1); cursor:pointer;border-bottom:1px solid var(--rule);padding:0 0 1px} .linkish:hover{color:var(--ink);border-bottom-color:var(--accent)} /* ---------- motion: idle attract on start, sheen on hover elsewhere ---------- */ .fx-hover,.fx-idle{position:relative;overflow:hidden} .fx-hover::after,.fx-idle::after{content:"";position:absolute;top:0;bottom:0;width:38%;left:-45%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-18deg)} .fx-hover:hover::after{animation:sweep 720ms ease-out} .fx-idle.attract::after{animation:sweep 820ms ease-out} @keyframes sweep{from{left:-45%}to{left:120%}} /* ---------- why blocks ---------- */ .why{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem;margin-top:4rem; padding-top:2.2rem;border-top:1px solid var(--rule)} .why.one{grid-template-columns:1fr;max-width:34rem} .why h3{font-family:"IBM Plex Mono",monospace;font-size:.6875rem;letter-spacing:.13em; text-transform:uppercase;color:var(--accent);font-weight:500;margin:0 0 .6rem} .why p{margin:0;font-size:var(--s--1);line-height:1.62;color:var(--muted)} /* ---------- bands & buttons ---------- */ .band{display:flex;align-items:baseline;gap:1rem;margin:2.6rem 0 1.4rem} .band .lbl,.rail-head .lbl{font-family:"IBM Plex Mono",monospace;font-size:.6875rem;letter-spacing:.14em; text-transform:uppercase;color:var(--faint);white-space:nowrap} .band .line,.rail-head .line{flex:1;height:1px;background:var(--rule)} .band .note{font-family:"IBM Plex Mono",monospace;font-size:.6875rem;color:var(--flag);white-space:nowrap} .band .note.calm{color:var(--faint)} .btn{position:relative;overflow:hidden;font-family:inherit;font-size:var(--s--1);border-radius:8px; padding:.5rem .85rem;cursor:pointer;border:1px solid var(--rule);background:transparent; color:var(--muted);transition:color .15s,border-color .15s} .btn:hover{color:var(--ink);border-color:var(--ink)} .btn[disabled]{opacity:.45;cursor:not-allowed} .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:500} .btn.wa{border-color:var(--wa);color:var(--wa);background:var(--wa-dim);font-weight:500} .btn.danger{color:var(--live);border-color:var(--live-dim)} .btn.danger:hover{border-color:var(--live);color:var(--live)} /* ---------- recording ---------- */ .rec-wrap{display:grid;justify-items:center;gap:1.2rem;text-align:center;background:var(--surface); border:1px solid var(--rule);border-radius:18px;box-shadow:var(--shadow);padding:2.6rem 1.5rem} .tc{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;font-size:2.6rem} .tc-lbl{font-family:"IBM Plex Mono",monospace;font-size:.625rem;letter-spacing:.12em; text-transform:uppercase;color:var(--live)} .scope{width:100%;height:76px}canvas{display:block;width:100%;height:100%} .ctl-row{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center} .cap-warn{font-family:"IBM Plex Mono",monospace;font-size:.6875rem;color:var(--flag); background:var(--flag-dim);border:1px solid var(--flag-line);border-radius:8px;padding:.45rem .75rem;margin:0} /* ---------- processing ---------- */ .steps{list-style:none;padding:0;margin:0;display:grid;gap:.875rem;max-width:24rem;width:100%;text-align:left} .steps li{display:flex;align-items:center;gap:.75rem;font-size:var(--s--1);color:var(--faint)} .steps li::before{content:"";width:14px;height:14px;border-radius:50%;border:1.5px solid var(--rule);flex:none} .steps li.done{color:var(--muted)} .steps li.done::before{border-color:var(--accent);background:var(--accent)} .steps li.now{color:var(--ink);font-weight:500} .steps li.now::before{border-color:var(--accent);border-right-color:transparent;animation:spin .9s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .steps .el{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:.6875rem;color:var(--faint)} /* ---------- review ---------- */ .review-grid{display:grid;grid-template-columns:minmax(0,1fr) 21rem;gap:2.4rem;align-items:start} .rail{position:sticky;top:1.5rem;display:grid;gap:.9rem} .rail-head{display:flex;align-items:baseline;gap:.75rem} .rail-head .n{font-family:"IBM Plex Mono",monospace;font-size:.6875rem;color:var(--flag)} .note-body{font-family:Newsreader,Georgia,serif;font-size:1.3125rem;line-height:1.62;color:var(--ink-soft); outline:none;border-radius:3px;padding:.25rem;margin-left:-.25rem;min-height:6rem;transition:background .15s} .note-body:hover{background:var(--rule-soft)} .note-body:focus{background:var(--surface);box-shadow:0 0 0 1px var(--rule),var(--shadow)} .note-body p{margin:0 0 1.1rem}.note-body p:last-child{margin-bottom:0} .sec{display:block;font-family:"IBM Plex Mono",monospace;font-size:.6875rem;letter-spacing:.14em; text-transform:uppercase;color:var(--accent);font-weight:500;margin:1.4rem 0 .4rem;font-style:normal} .rx{display:block;padding-left:1.35em;text-indent:-1.35em;margin:.15em 0} .rx::before{content:"—";color:var(--faint);margin-right:.5em} .edit-hint{font-family:"IBM Plex Mono",monospace;font-size:.625rem;letter-spacing:.1em; text-transform:uppercase;color:var(--faint);margin:.7rem 0 0} /* flag weight follows how much attention each deserves */ .lowconf{background:var(--flag-dim);border-bottom:2px solid var(--flag);padding:1px 3px; border-radius:2px 2px 0 0;font-weight:500;cursor:help;scroll-margin-top:5rem} .review-span{border-bottom:1px dotted var(--faint);padding-bottom:1px;cursor:help;scroll-margin-top:5rem} .review-span.name{border-bottom:2px solid var(--flag-line);color:var(--ink)} .review-span.numeric{border-bottom:1px dashed var(--flag-line);color:var(--ink)} .review-span.translated{border-bottom:1px dashed var(--accent);color:var(--ink)} /* Nothing recognised this word and the ASR itself doubted it — the strongest mark of the four, because it is the only one with no proposed fix. */ .review-span.uncertain{border-bottom:2px dotted var(--flag-line);color:var(--ink)} .located{background:var(--flag-line)!important;color:#fff!important;box-shadow:0 0 0 3px var(--flag-dim)} .toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap; margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--rule)} .toolgroup{display:flex;gap:.45rem;flex-wrap:wrap} .counts{font-family:"IBM Plex Mono",monospace;font-size:var(--s--1);color:var(--faint)} .counts b{color:var(--flag);font-weight:500} .cleaned{font:inherit;color:var(--accent);background:none;border:none;padding:0;cursor:pointer; border-bottom:1px dotted var(--accent)} .cleaned-list{margin:.75rem 0 0;padding:.8rem .95rem;border:1px solid var(--rule); border-left:2px solid var(--accent);border-radius:3px;background:var(--surface); font-size:var(--s--1);color:var(--muted);line-height:1.7} .cleaned-list b{color:var(--ink);font-weight:500} .cleaned-list code{font-family:"IBM Plex Mono",monospace;font-size:.9em} .anon{display:flex;align-items:center;gap:.5rem;margin-top:.9rem;font-size:var(--s--1);color:var(--muted)} .anon code{font-family:"IBM Plex Mono",monospace} .queue{display:grid;gap:.5rem} .item{display:grid;gap:.55rem;background:var(--surface);border:1px solid var(--rule); border-left:2px solid var(--flag-line);border-radius:3px;padding:.8rem .95rem;cursor:pointer; transition:border-color .15s,box-shadow .15s} .item:hover{border-color:var(--flag-line);box-shadow:var(--shadow)} .item.linked{box-shadow:0 0 0 2px var(--flag-dim),var(--shadow)} .item.done{border-left-color:var(--accent);opacity:.5} .item .kind{font-family:"IBM Plex Mono",monospace;font-size:.625rem;letter-spacing:.1em; text-transform:uppercase;color:var(--flag)} .item.done .kind{color:var(--accent)} .item .body{font-size:var(--s--1);color:var(--muted);line-height:1.5} .item .body strong{color:var(--ink);font-weight:500} .item .now{font-family:"IBM Plex Mono",monospace;color:var(--accent)} .item .ctl{display:flex;gap:.375rem;flex-wrap:wrap} .mini{font-family:inherit;font-size:.75rem;border:1px solid var(--rule);background:transparent; color:var(--muted);border-radius:6px;padding:.28rem .6rem;cursor:pointer} .mini:hover{color:var(--ink);border-color:var(--ink)} .mini.ok{border-color:var(--accent);color:var(--accent)} .mini.ok:hover{background:var(--accent);color:var(--accent-ink)} .rail-note{margin:0;padding:.7rem .85rem;font-size:var(--s--1);line-height:1.5;color:var(--muted); background:var(--surface);border:1px solid var(--rule);border-left:2px solid var(--flag-line);border-radius:3px} .rail-note.tr{border-left-color:var(--accent)} .rail-link{display:inline-block;margin-top:.5rem;font:inherit;font-size:var(--s--1);color:var(--accent); background:none;border:none;padding:0;cursor:pointer; border-bottom:1px solid color-mix(in srgb,var(--accent) 45%,transparent)} .rail-link:hover{border-bottom-color:var(--accent)} .verbatim{margin:.5rem 0 0;padding:.7rem .8rem;border:1px solid var(--rule);border-radius:3px; background:var(--paper);font-size:var(--s--1);line-height:1.75;color:var(--ink-soft)} /* A script-agnostic stack. This used to be "Noto Sans Devanagari",serif — the same Devanagari-only assumption that broke the stream merge, so Tamil and the rest fell back to a generic serif that may not carry the glyphs. Webfonts we actually load come first, then the fonts macOS/Windows/Android ship for each script, so a language we have no webfont for still renders rather than showing tofu. */ .said{margin:0;font-family:"Noto Sans Devanagari","Noto Sans Tamil","Noto Sans Bengali", "Noto Sans Telugu","Noto Sans Kannada","Noto Sans Malayalam","Noto Sans Gujarati", "Noto Sans Gurmukhi","Noto Naskh Arabic", "Nirmala UI","Kohinoor Devanagari","Tamil Sangam MN","Bangla Sangam MN","Telugu Sangam MN", "Kannada Sangam MN","Malayalam Sangam MN","Gujarati Sangam MN","Gurmukhi MN","Oriya Sangam MN", "Noto Sans","Segoe UI",system-ui,sans-serif; font-size:var(--s-0);line-height:1.7;color:var(--ink);white-space:pre-wrap} .became{margin:.15rem 0 0;font-size:var(--s--1);line-height:1.6;color:var(--muted)} .pair{padding:.55rem 0;border-bottom:1px solid var(--rule-soft)} /* the same said/became pair, inside a review card */ .card-pair{display:block;margin-top:.5rem;padding:.5rem .6rem;border-left:2px solid var(--flag-line); background:var(--paper);border-radius:0 4px 4px 0;border-bottom:0} .card-pair .said,.card-pair .became{display:block} .card-pair .said{font-size:var(--s--1)} .card-pair .became{margin-top:.2rem} .card-pair .suggested{display:block;margin-top:.35rem;font-size:var(--s--1);color:var(--accent);font-weight:500} /* On a translated pair the two scripts tell you which line is which. Here both halves are Latin, so they need saying. */ .card-pair.heard .said::before,.card-pair.heard .became::before{ content:attr(data-label);display:block;font-size:var(--s--2);letter-spacing:.06em; text-transform:uppercase;color:var(--muted);margin-bottom:.1rem} .item .why{display:block;margin-top:.45rem;font-size:var(--s--1);color:var(--faint);font-style:italic} .pair:last-child{border-bottom:0} .empty{font-size:var(--s--1);color:var(--faint);padding:.9rem;border:1px dashed var(--rule); border-radius:3px;text-align:center} /* ---------- mic test ---------- */ .mic-wrap{display:grid;gap:1rem;justify-items:center;text-align:center} .mic-bar{width:min(100%,26rem);height:10px;border-radius:100px;background:var(--rule-soft);overflow:hidden} .mic-fill{height:100%;width:0;background:var(--accent);transition:width .08s linear} .mic-verdict{font-family:"IBM Plex Mono",monospace;font-size:var(--s--1);color:var(--faint)} .mic-verdict.good{color:var(--accent)}.mic-verdict.low{color:var(--flag)} /* ---------- toast / footer ---------- */ .toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);background:var(--ink); color:var(--paper);padding:.65rem 1.15rem;border-radius:8px;font-size:var(--s--1);z-index:60; box-shadow:var(--shadow);max-width:min(92vw,32rem)} .toast.err{background:var(--live);color:#fff} .foot{margin-top:4rem;padding-top:1.2rem;border-top:1px solid var(--rule);display:flex; justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:var(--s--1);color:var(--faint)} .foot a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--rule)} .foot a:hover{color:var(--ink);border-bottom-color:var(--accent)} .foot .links{display:flex;gap:1.1rem;flex-wrap:wrap} @media(max-width:34rem){ /* byline first, then every link on one row — About sits with the others, not trailing the name */ .foot{flex-direction:column;align-items:flex-start;gap:.7rem} .foot .byline{order:1} .foot .links{order:2;gap:.9rem;width:100%} } @media(max-width:1023px){.shell.wide{max-width:62rem} .review-grid{grid-template-columns:minmax(0,1fr)}.rail{position:static}} @media(max-width:760px){.hero{padding:2.6rem 0 1.6rem}:root{--s3:1.5rem;--speak:1.9rem} .why{grid-template-columns:1fr;gap:1.7rem}.mast-nav{display:none}.note-body{font-size:1.1875rem}} @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important} .rotator span:nth-child(1){opacity:1;transform:none}} /* ---------- organised note (§4.11) ---------- */ .viewswitch{display:inline-flex;border:1px solid var(--rule);border-radius:4px;overflow:hidden} .viewswitch button{font:inherit;font-size:var(--s--1);padding:.24rem .7rem;border:0;cursor:pointer; background:var(--surface);color:var(--muted)} .viewswitch button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)} .viewswitch button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} .organised{font-size:var(--s1);line-height:1.6} .organised h4{font-family:"IBM Plex Mono",monospace;font-size:var(--s--1);font-weight:500; letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:1.5rem 0 .45rem} .organised h4:first-child{margin-top:0} .organised ul{list-style:none;margin:0;padding:0} .organised li{padding:.2rem 0;color:var(--ink);line-height:1.6} .organised li::before{content:"·";color:var(--faint);margin-right:.5rem} /* Citations are UI, not content. They are