/* Read My Tweets: listening-room theme. Fonts self-hosted (SIL OFL). */
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Manrope;src:url(fonts/manrope-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url(fonts/manrope-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Manrope;src:url(fonts/manrope-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:OpenDyslexic;src:url(fonts/opendyslexic-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:OpenDyslexic;src:url(fonts/opendyslexic-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --paper:#f6f1e7;--paper-2:#ede5d4;--card:#fffdf8;--ink:#1b2231;--muted:#535a67;--line:#d6cbb5;
  --amber:#a24b07;--teal:#0d625e;--link:#0d5a8a;--hl:#ffdf7e;--hl-ink:#1b2231;
  --bar:#1b2231;--bar-ink:#f6f1e7;--bar-muted:#b9c0cc;--bar-accent:#f2a65a;
  --read:"Source Serif 4",Georgia,"Times New Roman",serif;
  --ui:Manrope,"Segoe UI",system-ui,-apple-system,sans-serif;
  --lh:1.65;--ls:0;--ws:0;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{--paper:#141a26;--paper-2:#1b2333;--card:#1f2839;--ink:#ece6da;--muted:#a8afbc;--line:#33405a;
    --amber:#f2a65a;--teal:#79d0c8;--link:#8cc8f0;--hl:#6a4d12;--hl-ink:#fff6e0;
    --bar:#0c1018;--bar-ink:#ece6da;--bar-muted:#a8afbc;--bar-accent:#f2a65a;color-scheme:dark}
}
html[data-contrast=high]{--paper:#fff;--paper-2:#fff;--card:#fff;--ink:#000;--muted:#1a1a1a;--line:#000;
  --amber:#7a2e00;--teal:#00403c;--link:#0000c4;--hl:#ffff00;--hl-ink:#000;--bar:#000;--bar-ink:#fff;--bar-muted:#fff;--bar-accent:#ffff00}
@media (prefers-color-scheme:dark){
  html[data-contrast=high]{--paper:#000;--paper-2:#000;--card:#000;--ink:#fff;--muted:#f0f0f0;--line:#fff;
    --amber:#ffd27a;--teal:#7ff5ea;--link:#9fd7ff;--hl:#ffff00;--hl-ink:#000;--bar:#000;--bar-ink:#fff;--bar-muted:#fff;--bar-accent:#ffff00}
}
html[data-size=large]{font-size:118.75%}
html[data-size=huge]{font-size:137.5%}
html[data-font=sans]{--read:var(--ui)}
html[data-font=dyslexic]{--read:OpenDyslexic,var(--ui);--ui:OpenDyslexic,"Segoe UI",system-ui,sans-serif}
html[data-spacing=wide]{--lh:1.95;--ls:.012em;--ws:.06em}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1rem/var(--lh) var(--ui);letter-spacing:var(--ls);word-spacing:var(--ws);overflow-wrap:break-word}
img,svg{max-width:100%}
a{color:var(--link);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:4px}
html[data-contrast=high] :focus-visible{outline:4px solid var(--ink);box-shadow:0 0 0 7px var(--hl)}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:50}
.skip:focus{left:1rem;top:1rem}
h1,h2,h3{font-family:var(--read);line-height:1.2;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(2rem,1.3rem + 2.8vw,3.1rem);margin:.2em 0 .35em}
h2{font-size:clamp(1.4rem,1.15rem + 1vw,1.85rem);margin:2.2em 0 .6em}
h3{font-size:1.2rem;margin:1.8em 0 .4em}
kbd{font:600 .85em/1 var(--ui);border:1px solid var(--line);border-bottom-width:3px;border-radius:6px;padding:.15em .45em;background:var(--card);white-space:nowrap}
.eyebrow{font:800 .78rem/1.3 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--amber);margin:0}

/* masthead */
.masthead{border-bottom:1px solid var(--line);background:var(--paper)}
.masthead-in{max-width:1240px;margin:0 auto;padding:.7rem 1rem;display:flex;align-items:center;gap:.6rem 1.4rem;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:.6rem;color:var(--ink);text-decoration:none;font:800 1.15rem/1 var(--ui);letter-spacing:-.01em}
.brand-mark{color:var(--teal);flex:none}
.mainnav{display:flex;gap:.2rem;flex-wrap:wrap;margin-right:auto}
@media (max-width:700px){.mainnav{order:3;width:100%;margin-right:0}.display-wrap{margin-left:auto}.mainnav a{padding:.5rem .6rem}}
.mainnav a{font:600 .95rem/1 var(--ui);color:var(--ink);text-decoration:none;padding:.55rem .7rem;border-radius:999px}
.mainnav a:hover{background:var(--paper-2)}
.mainnav a[aria-current=page]{background:var(--ink);color:var(--paper)}
.display-wrap{position:relative}
.display-btn{display:inline-flex;align-items:center;gap:.4rem;font:600 .95rem/1 var(--ui);color:var(--ink);background:var(--card);border:1.5px solid var(--ink);border-radius:999px;padding:.55rem .9rem;cursor:pointer}
.display-btn[aria-expanded=true]{background:var(--ink);color:var(--paper)}
.display-panel{position:absolute;right:0;top:calc(100% + .5rem);z-index:40;width:min(21rem,calc(100vw - 2rem));background:var(--card);border:1.5px solid var(--ink);border-radius:14px;padding:.9rem 1rem 1rem;box-shadow:0 14px 40px rgba(0,0,0,.18)}
.display-panel fieldset{border:0;margin:0 0 .7rem;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.display-panel legend{font:800 .75rem/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.45rem;padding:0}
.display-panel label{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--line);border-radius:999px;padding:.35rem .7rem;font-size:.9rem;cursor:pointer}
.display-panel label:has(input:checked){border-color:var(--ink);background:var(--paper-2);font-weight:600}
.linkish{background:none;border:0;padding:.2rem 0;color:var(--link);font:600 .9rem/1.3 var(--ui);text-decoration:underline;text-underline-offset:.18em;cursor:pointer}

/* home lede */
.lede{background:var(--paper)}
.lede-in{max-width:1240px;margin:0 auto;padding:2.4rem 1rem 1.2rem}
.lede h1{max-width:20ch}
.lede-text{font:400 1.15rem/var(--lh) var(--read);max-width:60ch;color:var(--ink);margin:0}

/* studio */
.studio{max-width:1240px;margin:0 auto;padding:1rem 1rem 1.5rem;display:grid;gap:1.2rem}
@media (min-width:960px){.studio{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}}
.pane{background:var(--paper-2);border-radius:18px;padding:1.1rem 1.1rem 1.2rem;border:1px solid var(--line);min-width:0}
.pane-read{background:var(--card)}
.pane-title{display:flex;align-items:center;gap:.6rem;margin:0 0 .8rem;font:800 1.05rem/1 var(--ui);letter-spacing:0}
.step{display:inline-grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--teal);color:var(--paper);font-size:.95rem}
.lbl{display:block;font:600 .9rem/1.3 var(--ui);margin:0 0 .35rem}
textarea,input[type=text],select{font:inherit;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:10px;width:100%}
textarea{padding:.75rem .85rem;font:400 .95rem/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;resize:vertical;min-height:14rem}
html[data-font=dyslexic] textarea{font-family:OpenDyslexic,monospace}
input[type=text]{padding:.6rem .75rem;font:600 1.15rem/1.3 var(--read)}
select{padding:.5rem .6rem;font-size:.95rem}
textarea:focus,input[type=text]:focus,select:focus{border-color:var(--teal)}
.src-meta{font-size:.85rem;color:var(--muted);margin:.35rem 0 .6rem}
.opts{border-top:1px solid var(--line);padding-top:.6rem}
.opts summary{font:700 .95rem/1.4 var(--ui);cursor:pointer;padding:.2rem 0}
.opts-grid{display:grid;gap:.5rem;margin:.6rem 0 .2rem}
.chk{display:flex;gap:.55rem;align-items:flex-start;font-size:.93rem;line-height:1.4}
.chk input{width:1.15rem;height:1.15rem;margin:.1rem 0 0;accent-color:var(--teal);flex:none}
.sel{display:grid;gap:.3rem;font:600 .9rem/1.3 var(--ui);max-width:22rem}
.btnrow,.exportrow{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;align-items:center}
.btn{font:700 .95rem/1 var(--ui);border-radius:999px;border:1.5px solid var(--ink);background:var(--card);color:var(--ink);padding:.75rem 1.1rem;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;text-decoration:none}
.btn:hover{background:var(--paper-2)}
.btn-main{background:var(--teal);border-color:var(--teal);color:var(--paper)}
.btn-main:hover{background:var(--ink);border-color:var(--ink)}
html[data-contrast=high] .btn-main{background:var(--ink);border-color:var(--ink)}
.btn-quiet{border-color:transparent;text-decoration:underline;text-underline-offset:.2em}
.btn-small{padding:.55rem .85rem;font-size:.88rem}
.btn:disabled{opacity:.45;cursor:not-allowed}
.export-note{font-size:.85rem;color:var(--teal);font-weight:600}
.doc-stats{font-size:.85rem;color:var(--muted);margin:.45rem 0 .2rem;min-height:1.3em}

/* reading view */
.reading{font:400 1.18rem/var(--lh) var(--read);max-width:68ch;min-height:16rem;padding:.6rem 0 .2rem;outline:none}
.reading p{margin:0 0 1em}
.reading-empty{color:var(--muted);font-style:italic}
.reading .byline{font:600 .9rem/1.3 var(--ui);color:var(--muted);margin-bottom:1.2em}
.s{cursor:pointer;border-radius:4px;transition:background-color .15s;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:.05em 0}
.s:hover{background:color-mix(in srgb,var(--hl) 40%,transparent)}
.s.now,.speaking-block{background:var(--hl);color:var(--hl-ink);box-shadow:0 0 0 .15em var(--hl)}
.speaking-block{border-radius:6px}

/* listen console */
.console{position:sticky;bottom:0;z-index:30;background:var(--bar);color:var(--bar-ink);border-top:3px solid var(--bar-accent)}
.console-in{max-width:1240px;margin:0 auto;padding:.6rem 1rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.2rem}
.transport{display:flex;gap:.35rem;align-items:center}
.tbtn{display:inline-grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;border:1.5px solid var(--bar-muted);background:transparent;color:var(--bar-ink);cursor:pointer;padding:0}
.tbtn:hover{border-color:var(--bar-ink)}
.tbtn-play{width:3.2rem;height:3.2rem;background:var(--bar-accent);border-color:var(--bar-accent);color:#1b2231}
.tbtn:disabled{opacity:.4;cursor:not-allowed}
.tbtn .i-pause{display:none}
.tbtn[aria-pressed=true] .i-pause{display:block}
.tbtn[aria-pressed=true] .i-play{display:none}
.console :focus-visible{outline-color:var(--bar-accent)}
.t-status{margin:0;font:600 .9rem/1.3 var(--ui);min-width:9rem;color:var(--bar-ink)}
.dials{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:end;margin-left:auto}
.dial{display:grid;gap:.15rem;font:600 .78rem/1.2 var(--ui);color:var(--bar-muted);letter-spacing:.04em}
.dial output{color:var(--bar-ink);font-weight:800}
.dial select{background:var(--bar);color:var(--bar-ink);border-color:var(--bar-muted);max-width:15rem;padding:.35rem .5rem;font-size:.88rem}
.dial input[type=range]{width:8rem;accent-color:var(--bar-accent)}
.console .linkish{color:var(--bar-ink)}
.console-warn{margin:0;padding:.4rem 1rem .7rem;max-width:1240px;margin-inline:auto;font-size:.88rem;color:var(--bar-muted)}
.tmore{display:none;background:transparent;color:var(--bar-ink);border:1.5px solid var(--bar-muted);border-radius:999px;padding:.45rem .8rem;font:700 .85rem/1 var(--ui);cursor:pointer}
.tmore[aria-expanded=true]{background:var(--bar-ink);color:var(--bar)}
@media (max-width:640px){.console-in{gap:.4rem .6rem;padding:.5rem 1rem}.tbtn{width:2.4rem;height:2.4rem}.tbtn-play{width:2.9rem;height:2.9rem}.tmore{display:inline-block}.t-status{order:5;flex:1 1 100%;font-size:.82rem}.dials{display:none;order:6}.console.dials-open .dials{display:flex}.dials{margin-left:0;width:100%}.dial-voice{flex:1 1 100%}.dial-voice select{max-width:none}.dial input[type=range]{width:7.5rem}}
.keys-dialog{border:1.5px solid var(--ink);border-radius:16px;background:var(--card);color:var(--ink);padding:1.2rem 1.4rem;max-width:min(26rem,calc(100vw - 2rem))}
.keys-dialog::backdrop{background:rgba(10,14,22,.55)}
.dlg-title{font:800 1.1rem/1.2 var(--ui);margin:0 0 .8rem}
.keylist{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem;margin:0 0 .8rem}
.keylist dd{margin:0}
.dlg-note{font-size:.88rem;color:var(--muted)}

/* notes below the tool */
.notes{border-top:1px solid var(--line);background:var(--paper)}
.notes-in{max-width:760px;margin:0 auto;padding:1rem 1rem 3rem;font:400 1.08rem/var(--lh) var(--read)}
.notes-in>h2:first-child{margin-top:1.4em}
.beforeafter{margin:1.6rem 0;display:grid;gap:.8rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.beforeafter{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.ba-col{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.8rem 1rem}
.ba-label{font:800 .75rem/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--amber);margin:0 0 .6rem}
.ba-col pre{margin:0;font:400 .82rem/1.45 ui-monospace,Menlo,Consolas,monospace;color:var(--muted);white-space:pre-wrap}
.ba-out{margin:0;font-size:1.1rem}
.beforeafter figcaption{grid-column:1/-1;font:400 .9rem/1.45 var(--ui);color:var(--muted)}
.table-wrap{overflow-x:auto;margin:1.2rem 0}
table{border-collapse:collapse;width:100%;font:400 .95rem/1.45 var(--ui)}
caption{text-align:left;font-weight:700;padding-bottom:.5rem}
th,td{text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--line);vertical-align:top}
thead th{border-bottom:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line);padding:.2rem 0}
.faq summary{cursor:pointer;font:700 1.02rem/1.4 var(--ui);padding:.75rem 0;list-style-position:outside}
.faq details p{margin:0 0 1rem}
.guide-strip{list-style:none;margin:1rem 0;padding:0;display:grid;gap:.6rem}
@media (min-width:640px){.guide-strip{grid-template-columns:1fr 1fr}}
.guide-strip a{display:grid;gap:.3rem;height:100%;padding:.9rem 1rem;border:1.5px solid var(--line);border-radius:14px;background:var(--card);text-decoration:none;color:var(--ink)}
.guide-strip a:hover{border-color:var(--teal)}
.gs-title{font:700 1.05rem/1.3 var(--read)}
.gs-meta{font:600 .8rem/1.2 var(--ui);color:var(--muted)}

/* guides */
.guide-wrap,.page-wrap{max-width:1140px;margin:0 auto;padding:1.2rem 1rem 3rem}
.page-wrap{max-width:780px}
.crumbs ol{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-wrap:wrap;gap:.3rem;font:600 .85rem/1.3 var(--ui);color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:.3rem;color:var(--line)}
.crumbs a{color:var(--muted)}
.guide-head{max-width:46rem;padding-bottom:1.4rem;border-bottom:1px solid var(--line)}
.guide-dek{font:400 1.25rem/1.5 var(--read);margin:0 0 .8rem}
.guide-meta{font:600 .85rem/1.4 var(--ui);color:var(--muted);margin:0 0 1rem}
.guide-grid{display:grid;gap:1.5rem;margin-top:1.6rem}
@media (min-width:960px){.guide-grid{grid-template-columns:15rem minmax(0,1fr)}.guide-side{position:sticky;top:1rem;align-self:start}}
.side-head{font:800 .75rem/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 .6rem}
.toc{margin:0;padding-left:1.2rem;font:600 .9rem/1.4 var(--ui);display:grid;gap:.45rem}
.toc a{color:var(--ink);text-decoration:none}
.toc a:hover{text-decoration:underline}
.prose{font:400 1.13rem/var(--lh) var(--read);max-width:68ch}
.prose>h2:first-child{margin-top:0}
.prose p,.prose ul,.prose ol{margin:0 0 1.05em}
.prose li{margin:.3em 0}
.prose blockquote{margin:1.2em 0;padding:.2em 1em;border-left:4px solid var(--teal);font-style:italic}
.prose code{font:.9em ui-monospace,Menlo,Consolas,monospace;background:var(--paper-2);padding:.1em .3em;border-radius:4px}
.prose .tip{background:var(--paper-2);border-radius:12px;padding:.8rem 1rem;font-size:1rem}
.more-guides{margin-top:3rem;border-top:1px solid var(--line)}
.back-tool{font:600 1rem/1.4 var(--ui)}
.page-lede{font:400 1.2rem/1.5 var(--read);margin:0 0 1.6rem}
.guide-index{list-style:none;padding:0;margin:0;counter-reset:g}
.guide-index li{counter-increment:g;padding:1.2rem 0 1.2rem 3.4rem;border-top:1px solid var(--line);position:relative}
.guide-index li::before{content:counter(g);position:absolute;left:0;top:1.3rem;width:2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:var(--paper);font:800 1rem/1 var(--ui)}
.guide-index h2{margin:0 0 .4rem;font-size:1.4rem}
.guide-index h2 a{color:var(--ink);text-decoration:none}
.guide-index h2 a:hover{text-decoration:underline}
.guide-index p{margin:0 0 .4rem;font:400 1.05rem/1.5 var(--read)}
.gi-meta{font:600 .82rem/1.3 var(--ui)!important;color:var(--muted)}
.nf-code{font:800 5rem/1 var(--read);color:var(--amber);margin:1rem 0 0}

/* footer */
.colophon{background:var(--paper-2);border-top:1px solid var(--line);margin-top:0}
.colophon-in{max-width:1240px;margin:0 auto;padding:2rem 1rem 1rem;display:grid;gap:1.5rem}
@media (min-width:860px){.colophon-in{grid-template-columns:1.4fr 1fr 1fr}}
.col-brand{font:800 1.1rem/1 var(--ui);margin:0 0 .6rem}
.col-about p:last-child{font-size:.92rem;color:var(--muted);max-width:44ch;margin:0}
.col-head{font:800 .75rem/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:.2rem 0 .7rem}
.col-links ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;font-size:.93rem}
.col-links a{color:var(--ink)}
.col-fine{max-width:1240px;margin:0 auto;padding:1rem 1rem 1.6rem;font-size:.82rem;color:var(--muted);border-top:1px solid var(--line)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.lede-art{display:none}
@media (min-width:960px){
  .lede-in{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:2.5rem;align-items:center}
  .lede-art{display:grid;gap:.4rem;background:var(--bar);color:var(--bar-ink);border-radius:22px;padding:1.2rem 1.4rem 1.3rem;transform:rotate(-1.2deg)}
  .lede-art svg{width:100%;height:auto;max-height:120px}
  .la-posts{display:flex;flex-wrap:wrap;gap:.35rem}
  .la-posts span{font:600 .78rem/1 ui-monospace,Menlo,monospace;background:rgba(255,255,255,.09);border:1px dashed var(--bar-muted);border-radius:8px;padding:.4rem .5rem;color:var(--bar-muted)}
  .la-para{margin:0;font:400 1.05rem/1.45 var(--read)}
  .la-para::first-line{background:var(--bar-accent);color:#1b2231}
}
.wb{fill:var(--teal)}.wb-a{fill:var(--bar-accent)}
@media (min-width:960px){.lede-art .wb{fill:#79d0c8}}