:root{color-scheme:light dark;--bg:#071b2a;--panel:#102b3e;--text:#effbff;--muted:#b4cdd8;--line:#366071;--accent:#35d9df} @media(prefers-color-scheme:light){:root{--bg:#f0f8fa;--panel:#fff;--text:#173b4d;--muted:#456878;--line:#a9cbd5;--accent:#087d8d}}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:17px/1.6 system-ui,sans-serif}header,main,footer{max-width:860px;margin:auto;padding:1.2rem}header{display:flex;justify-content:space-between;gap:1rem;align-items:center}a{color:var(--accent)}a:focus-visible,button:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.portrait{width:clamp(110px,22vw,180px);height:auto;float:right;margin:0 0 1rem 1rem;border-radius:24px}h1{line-height:1.15;font-size:clamp(1.8rem,5vw,2.6rem)}.tag{color:var(--accent);font-weight:700}.card{padding:clamp(1.2rem,4vw,2.2rem);border:1px solid var(--line);border-radius:24px;background:var(--panel)}.date{font-weight:750}.note,footer{font-size:.9rem;color:var(--muted)}.controls{display:flex;flex-wrap:wrap;gap:1rem;align-items:end;clear:both;margin-top:1.5rem}label{display:grid;gap:.3rem}select,button{font:inherit;min-height:48px;border-radius:12px;padding:.65rem 1rem;border:1px solid var(--line);background:var(--bg);color:var(--text)}button{font-weight:750;cursor:pointer;border-color:var(--accent);min-width:225px}button.active{background:#b5172c;color:#fff;border-color:#ff7588}button:disabled{opacity:.65;cursor:default}#status{min-height:1.6em}#warning{color:var(--accent)}#transcript p{white-space:pre-wrap;overflow-wrap:anywhere;border-left:3px solid var(--accent);padding-left:1rem}footer{display:flex;gap:1rem;flex-wrap:wrap}.bubble-counter{border:1px solid var(--line);padding:.4rem .7rem;border-radius:12px;font-size:.75rem}.bubble-counter small{display:block}.bubble-counter strong{font-size:.85rem}@media(max-width:520px){header{align-items:start;flex-wrap:wrap}.portrait{width:95px}.controls>*{width:100%}h1{max-width:15ch}}
h1{overflow-wrap:anywhere;hyphens:auto}
.bubble-counter{position:relative;isolation:isolate}.bubble-counter[data-warning=yellow] strong{color:#f4cb42}.bubble-counter[data-warning=red] strong{color:#ff6f79}@media(prefers-color-scheme:light){.bubble-counter[data-warning=yellow] strong{color:#856300}.bubble-counter[data-warning=red] strong{color:#b5172c}}
@media(max-width:520px){h1{clear:both;max-width:none}}

.controls{display:grid;grid-template-columns:minmax(0,1fr);max-width:100%}.controls label{min-width:0}.controls small{font-size:.85rem;color:var(--muted)}.controls button{justify-self:start}@media(max-width:520px){.controls button{width:100%}}

.conversation-clock{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.2rem 1rem;max-width:860px;margin:auto;padding:.65rem 1.2rem;background:var(--panel);color:var(--text);border:1px solid var(--line);box-shadow:0 3px 12px #0002}.conversation-clock[hidden]{display:none}#clock-label{font-size:.85rem}#clock-value{font-size:1.5rem;line-height:1.2;font-variant-numeric:tabular-nums}#clock-message{font-size:.9rem;font-weight:700;flex-basis:100%}#clock-message:empty{display:none}.conversation-clock[data-warning=yellow]{border-color:#e8c345;color:#ffdf70}.conversation-clock[data-warning=red]{border-color:#ff697b;color:#ff9cac}@media(prefers-color-scheme:light){.conversation-clock[data-warning=yellow]{background:#fff5c7;color:#6b4d00}.conversation-clock[data-warning=red]{background:#ffe6eb;color:#98192b}}.controls,#start{scroll-margin-top:7rem}