/* EasyRecorder theme — "studio".
   Inspired by the calm product design of ElevenLabs and Wispr Flow (not copied
   from either): warm off-white paper, white cards defined by a hairline ring
   and a whisper of shadow instead of borders, black pill buttons, lavender
   for what's selected, Figtree for everything you read and press, EB Garamond
   only for big titles. In dark mode the recorder is a black instrument card
   with a white waveform, like a dictation pill; in light mode everything is light.

   Loaded after style.css (and tools.css) on every page. To go back to the
   previous look, remove the <link> to this file and switch the font link back
   to Saira. Every colour and font here is a token at the top. */
:root{
  --bg:#FAF9F6;
  --panel:#FFFFFF;
  --well:#F3F1EC;
  --ink:#1A1A1A;
  --muted:#5F5A55;
  --line:#ECE9E4;
  --line-strong:#D6D2CB;
  --rec:#E5484D;
  --clean:#0F5C4E;
  --clean-ink:#FFFFFF;
  --raw:#A39E97;
  --cut:rgba(229,72,77,.55);
  --cut-fill:rgba(229,72,77,.12);--trim:rgba(229,72,77,.16);
  --pause:rgba(95,90,85,.18);--silence:#3E63DD;--silence-fill:rgba(62,99,221,.13);
  --focus:#6E56CF;
  --amber:#E8890C;
  --meter-ok:#3DD68C;
  /* The recorder (and the tool pages' stage cards): a white card with a warm grey
     well in light mode, a black instrument in dark mode. */
  --deck:#FFFFFF;
  --deck-well:#F3F1EC;
  --deck-ink:#1A1A1A;
  --deck-muted:#5F5A55;
  --deck-line:#E4E0DA;
  --deck-focus:#6E56CF;
  --deck-accent:#EEDCFF;
  --deck-accent-ink:#1A1A1A;
  --deck-link:#0F5C4E;
  --deck-control:#1A1A1A;
  --deck-edge:transparent;
  --deck-shadow:0 0 0 .5px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.04),0 10px 28px -18px rgba(0,0,0,.14);
  --scrim:rgba(250,249,246,.9);
  --logo:#1A1A1A;
  --shadow:0 0 0 .5px rgba(0,0,0,.125),0 1px 1px rgba(0,0,0,.04),0 2px 4px rgba(0,0,0,.04);
  --shadow-card:0 0 0 .5px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.04),0 10px 28px -18px rgba(0,0,0,.14);
  --shadow-hover:0 0 0 .5px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.08);
  --nav-bg:#EFECE7;
  --primary:#1A1A1A;
  --primary-ink:#FFFFFF;
  --accent-soft:#EEDCFF;
  --accent-soft-ink:#1A1A1A;
  --orb-1:radial-gradient(circle at 32% 28%,rgba(255,255,255,.85),transparent 42%),conic-gradient(from 200deg,#FF7A45,#FF4FA3,#FFB347,#FF7A45);
  --orb-2:radial-gradient(circle at 32% 28%,rgba(255,255,255,.85),transparent 42%),conic-gradient(from 120deg,#7C6CFF,#C77DFF,#7FD3FF,#7C6CFF);
  --orb-3:radial-gradient(circle at 32% 28%,rgba(255,255,255,.85),transparent 42%),conic-gradient(from 40deg,#2FB58E,#B6E36B,#4CC3D9,#2FB58E);
  --orb-4:radial-gradient(circle at 32% 28%,rgba(255,255,255,.85),transparent 42%),conic-gradient(from 300deg,#F25F5C,#FFC15E,#E86BB8,#F25F5C);
  --orb-5:radial-gradient(circle at 32% 28%,rgba(255,255,255,.85),transparent 42%),conic-gradient(from 160deg,#5B8DEF,#9AE6D8,#B79CF5,#5B8DEF);
  /* Full-screen teleprompter: follows the theme, and goes dark when mirrored for a glass rig. */
  --tp-paper:#FAF9F6;--tp-bar:rgba(250,249,246,.92);--tp-ink:#1A1A1A;--tp-text:#1A1A1A;--tp-dim:#A39E97;--tp-muted:#5F5A55;
  --tp-line:#E4E0DA;--tp-line-strong:#D6D2CB;--tp-guide:#6E56CF;--tp-control:#1A1A1A;--tp-scrim:rgba(250,249,246,.72);--tp-editor:#F3F1EC;--tp-field:#FFFFFF;
  --font-ui:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-title:"EB Garamond","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --radius-card:20px;--radius-well:14px;--radius-pill:999px;
}
@media (prefers-color-scheme:dark){
  :root[data-theme="system"]{
    --bg:#0C0C0B;--panel:#161615;--well:#1F1E1C;--ink:#F5F3EF;--muted:#A8A29C;--line:#262523;--line-strong:#3A3835;
    --rec:#FF6369;--clean:#6FD4B4;--clean-ink:#062A22;--raw:#5C5853;--cut:rgba(255,99,105,.6);--cut-fill:rgba(255,99,105,.13);--trim:rgba(255,99,105,.16);--pause:rgba(168,162,156,.16);--silence:#8DA4EF;--silence-fill:rgba(141,164,239,.15);
    --focus:#A594F9;--amber:#FFB224;--meter-ok:#3DD68C;
    --deck:#121211;--deck-well:#080808;--deck-ink:#F7F5F2;--deck-muted:#A39E97;--deck-line:#2C2B29;--deck-focus:#B9A6FF;--deck-accent:#EEDCFF;--deck-accent-ink:#1A1A1A;--deck-link:#EEDCFF;--deck-control:#EEDCFF;--deck-edge:transparent;
    --deck-shadow:0 0 0 .5px rgba(255,255,255,.08),0 18px 40px -20px rgba(0,0,0,.7);
    --scrim:rgba(8,8,8,.86);--logo:#1A1A1A;
    --shadow:0 0 0 .5px rgba(255,255,255,.1),0 1px 2px rgba(0,0,0,.4);
    --shadow-card:0 0 0 .5px rgba(255,255,255,.08),0 12px 30px -18px rgba(0,0,0,.6);
    --shadow-hover:0 0 0 .5px rgba(255,255,255,.18),0 2px 8px rgba(0,0,0,.5);
    --nav-bg:#1C1B19;--primary:#F5F3EF;--primary-ink:#0C0C0B;--accent-soft:#3A2E55;--accent-soft-ink:#EEDCFF;
    --tp-paper:#0A0A0A;--tp-bar:rgba(10,10,10,.88);--tp-ink:#F5F3EF;--tp-text:#FFFFFF;--tp-dim:#6E6A65;--tp-muted:#A39E97;--tp-line:#2C2B29;--tp-line-strong:#3A3835;--tp-guide:#EEDCFF;--tp-control:#EEDCFF;--tp-scrim:rgba(10,10,10,.6);--tp-editor:#121211;--tp-field:#1C1B19;
  }
}
:root[data-theme="dark"]{
  --bg:#0C0C0B;--panel:#161615;--well:#1F1E1C;--ink:#F5F3EF;--muted:#A8A29C;--line:#262523;--line-strong:#3A3835;
  --rec:#FF6369;--clean:#6FD4B4;--clean-ink:#062A22;--raw:#5C5853;--cut:rgba(255,99,105,.6);--cut-fill:rgba(255,99,105,.13);--trim:rgba(255,99,105,.16);--pause:rgba(168,162,156,.16);--silence:#8DA4EF;--silence-fill:rgba(141,164,239,.15);
  --focus:#A594F9;--amber:#FFB224;--meter-ok:#3DD68C;
  --deck:#121211;--deck-well:#080808;--deck-ink:#F7F5F2;--deck-muted:#A39E97;--deck-line:#2C2B29;--deck-focus:#B9A6FF;--deck-accent:#EEDCFF;--deck-accent-ink:#1A1A1A;--deck-link:#EEDCFF;--deck-control:#EEDCFF;--deck-edge:transparent;
  --deck-shadow:0 0 0 .5px rgba(255,255,255,.08),0 18px 40px -20px rgba(0,0,0,.7);
  --scrim:rgba(8,8,8,.86);--logo:#1A1A1A;
  --shadow:0 0 0 .5px rgba(255,255,255,.1),0 1px 2px rgba(0,0,0,.4);
  --shadow-card:0 0 0 .5px rgba(255,255,255,.08),0 12px 30px -18px rgba(0,0,0,.6);
  --shadow-hover:0 0 0 .5px rgba(255,255,255,.18),0 2px 8px rgba(0,0,0,.5);
  --nav-bg:#1C1B19;--primary:#F5F3EF;--primary-ink:#0C0C0B;--accent-soft:#3A2E55;--accent-soft-ink:#EEDCFF;
    --tp-paper:#0A0A0A;--tp-bar:rgba(10,10,10,.88);--tp-ink:#F5F3EF;--tp-text:#FFFFFF;--tp-dim:#6E6A65;--tp-muted:#A39E97;--tp-line:#2C2B29;--tp-line-strong:#3A3835;--tp-guide:#EEDCFF;--tp-control:#EEDCFF;--tp-scrim:rgba(10,10,10,.6);--tp-editor:#121211;--tp-field:#1C1B19;
}

/* ---------- Type ---------- */
body{font-family:var(--font-ui);letter-spacing:-.003em}
.brand-name{font-weight:700;font-stretch:normal;font-size:1.25rem;letter-spacing:-.025em}
/* The wordmark is one colour, so it sits quietly beside the gradient orb. Weight alone separates the two words. */
.brand-name span{color:inherit;font-weight:500}
.panel h2,.section-head h2{font-weight:600;font-stretch:normal;font-size:1rem;letter-spacing:-.01em}
.name-wrap .take-name{font-family:var(--font-title);font-weight:500;font-stretch:normal;font-size:clamp(1.9rem,3.2vw,2.4rem);letter-spacing:-.02em;line-height:1.1}
.timer{font-weight:600;font-stretch:normal;font-size:clamp(2.6rem,6vw,3.75rem);letter-spacing:-.035em}
.timer .frac{font-weight:500}
.count-num{font-weight:600;font-stretch:normal;letter-spacing:-.03em}
kbd{font-family:var(--font-ui);font-weight:600;border:0;border-radius:6px;background:var(--panel);box-shadow:var(--shadow)}
.deck kbd,.tp-hint kbd{background:transparent;box-shadow:inset 0 0 0 1px var(--deck-line)}
.stats dd{font-weight:600}

/* ---------- Moving between pages ----------
   Recorder, Mic check, Warm-up and YouTube are separate pages. A cross-document view
   transition (Chrome, Edge, Safari 18.2+) keeps the header still, slides the
   selected pill to the new tab and fades the page in, instead of a hard cut.
   Other browsers just load the page as before. */
@view-transition{navigation:auto}
.site-head{view-transition-name:site-head}
.site-nav a[aria-current="page"]{view-transition-name:nav-pill}
/* Each label is its own layer above the pill, so the pill's white background slides
   underneath while the labels stay put and only change colour. */
.nav-label{display:inline-block}
.site-nav a[href="/"] .nav-label{view-transition-name:nav-recorder}
.site-nav a[href="/mic-check/"] .nav-label{view-transition-name:nav-mic-check}
.site-nav a[href="/warm-up/"] .nav-label{view-transition-name:nav-warm-up}
.site-nav a[href="/youtube-transcript/"] .nav-label{view-transition-name:nav-youtube}
/* Transition layers stack in page order, so a label that comes before the
   selected tab would be drawn under the sliding pill. Explicit z-index keeps
   the pill above the header and below every label. Labels change colour on
   the same clock as the slide. */
::view-transition-group(nav-pill){z-index:1;animation-duration:.32s;animation-timing-function:cubic-bezier(.3,.9,.3,1)}
::view-transition-group(nav-recorder),::view-transition-group(nav-mic-check),::view-transition-group(nav-warm-up),::view-transition-group(nav-youtube){z-index:2}
::view-transition-old(nav-recorder),::view-transition-new(nav-recorder),::view-transition-old(nav-mic-check),::view-transition-new(nav-mic-check),
::view-transition-old(nav-warm-up),::view-transition-new(nav-warm-up),::view-transition-old(nav-youtube),::view-transition-new(nav-youtube){animation-duration:.32s;animation-timing-function:cubic-bezier(.3,.9,.3,1)}
/* Same length and easing on both sides, so the two pages always add up to a solid frame. */
::view-transition-old(root),::view-transition-new(root){animation-duration:.24s;animation-timing-function:cubic-bezier(.2,.8,.2,1);animation-fill-mode:both}
::view-transition-old(root){animation-name:er-page-out}
::view-transition-new(root){animation-name:er-page-in}
@keyframes er-page-out{to{opacity:0}}
@keyframes er-page-in{from{opacity:0;transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ---------- Header ---------- */
.site-nav{border-radius:var(--radius-pill);background:var(--nav-bg)}
.site-nav a{border-radius:var(--radius-pill);font-weight:500;font-size:.875rem}
.site-nav a[aria-current="page"]{background:var(--panel);box-shadow:var(--shadow)}
.theme-btn,.takes-btn,.drawer-close{border:0;border-radius:var(--radius-pill);background:var(--panel);box-shadow:var(--shadow)}
.brand-mark{box-shadow:none;border-radius:50%}

/* ---------- Cards ---------- */
.panel{border:0;border-radius:var(--radius-card);box-shadow:var(--shadow-card)}
.deck{border:0;border-radius:var(--radius-card)}
.live,.prompter,.wave,.trim-view{border-radius:var(--radius-well)}
.transcript{border-radius:var(--radius-well)}
.improve{border:0;border-radius:var(--radius-well);background:var(--panel);box-shadow:var(--shadow)}

/* ---------- Buttons: white pills on a hairline ring; the main action is black ---------- */
.btn{border:0;border-radius:var(--radius-pill);background:var(--panel);box-shadow:var(--shadow);padding:8px 16px;font-weight:500;transition:box-shadow .15s ease,opacity .15s ease}
.btn:hover:not(:disabled){box-shadow:var(--shadow-hover)}
.btn.small{padding:5px 12px}
.btn.primary{background:var(--primary);color:var(--primary-ink);box-shadow:none}
.btn.primary:hover:not(:disabled){filter:none;box-shadow:none;opacity:.86}
.new-rec{border:0;border-radius:var(--radius-pill);background:var(--primary);color:var(--primary-ink);box-shadow:none;font-weight:600}
.new-rec:hover{filter:none;opacity:.88}
.new-rec.on{background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}
.play-btn{border:0;background:var(--primary);color:var(--primary-ink)}
.play-btn:hover{border:0;opacity:.86}
.fx-toggle{border:0;background:var(--panel);box-shadow:var(--shadow)}
.fx-toggle:hover{border:0;box-shadow:var(--shadow-hover)}
.fx-toggle input:checked+.fx-track,.switch input:checked+span{background:var(--primary)}
.fx-toggle input:checked+.fx-track::after{background:var(--panel)}
/* The knob takes the ink that goes on the "on" track, so a switch that is on never turns into a blank pill (white on near-white in dark mode). */
.switch input:checked+span::after{background:var(--primary-ink)}
.editor.bypass .fx-toggle{box-shadow:0 0 0 1px var(--amber)}
.stage.on .stage-num{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.toast{border-radius:var(--radius-pill);background:var(--primary);color:var(--primary-ink);padding:10px 18px}
/* Links and controls on the recorder card: readable on white, lavender on black. */
.foot-link,.breath{color:var(--deck-link)}
.pbtn.wide{color:var(--deck-link);border-color:var(--deck-link)}
.deck .check input,.pslider input{accent-color:var(--deck-control)}
.prompter-rule::before,.prompter-rule::after{background:var(--deck-control)}
.tp-toggle:has(input:checked){border-color:var(--deck-control)}
.tp-toggle input:checked+.tp-track{background:var(--deck-control)}
.tp-toggle input:checked+.tp-track::after{background:var(--deck)}
/* Inside the recorder and stage cards, buttons are outlined and the main one is lavender. */
.deck .btn:not(.primary),.stage-card .btn:not(.primary){background:transparent;box-shadow:inset 0 0 0 1px var(--deck-line);color:var(--deck-ink)}
.deck .btn:not(.primary):hover:not(:disabled),.stage-card .btn:not(.primary):hover:not(:disabled){box-shadow:inset 0 0 0 1px var(--deck-muted)}
.deck .btn.primary,.stage-card .btn.primary{background:var(--deck-accent);color:var(--deck-accent-ink)}
.round-btn,.file-btn,.tp-toggle,.pbtn{border-width:1px}
.pbtn{border-radius:10px}
.pbtn.wide-plain,.pbtn.wide-accent,.file-btn,.tp-toggle{border-radius:var(--radius-pill)}
.rec-btn{border-width:2px}
.meter-track{height:6px;border-radius:var(--radius-pill)}

/* ---------- Choices: lavender for what's selected ---------- */
.chip{border:0;background:var(--panel);box-shadow:var(--shadow);font-weight:500}
.chip:hover{border:0;box-shadow:var(--shadow-hover)}
.chip[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-soft-ink);box-shadow:none}
.chip-x{border:0;background:var(--panel);box-shadow:var(--shadow)}
.chip-wrap.active .chip-x{background:var(--accent-soft);color:var(--accent-soft-ink);box-shadow:none}
.take-open:hover{background:var(--well)}
.take-item.current{background:var(--accent-soft)}
.take-item.current .take-title,.take-item.current .take-sub{color:var(--accent-soft-ink)}
.tw.now{background:var(--accent-soft);color:var(--accent-soft-ink)}
.lg-word{background:color-mix(in srgb,var(--clean) 55%,transparent)}

/* Each take gets a small gradient orb, so takes are easy to tell apart at a glance. */
.take-titleline::before{content:"";width:16px;height:16px;border-radius:50%;flex:none;background:var(--orb-1);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.15)}
.take-item:nth-child(5n+2) .take-titleline::before{background:var(--orb-2)}
.take-item:nth-child(5n+3) .take-titleline::before{background:var(--orb-3)}
.take-item:nth-child(5n+4) .take-titleline::before{background:var(--orb-4)}
.take-item:nth-child(5n) .take-titleline::before{background:var(--orb-5)}

/* ---------- Tool pages ---------- */
.tool-intro h1{font-family:var(--font-title);font-weight:500;font-stretch:normal;font-size:clamp(2.6rem,5vw,3.75rem);letter-spacing:-.025em;line-height:1.02}
.stage-title{font-family:var(--font-title);font-weight:500;font-stretch:normal;font-size:clamp(1.6rem,3vw,2.1rem);letter-spacing:-.015em;line-height:1.12}
.verdict h2,.placeholder h2{font-weight:600;font-stretch:normal}
.stage-card{border:0;border-radius:var(--radius-card)}
.btn.big{border-radius:var(--radius-pill);padding:12px 22px}
.ring-label{font-weight:600;font-stretch:normal;letter-spacing:-.03em}
.eyebrow{font-weight:600;letter-spacing:.08em}
.metric-value{font-weight:600}
.tp.mirror{--tp-paper:#0A0A0A;--tp-bar:rgba(10,10,10,.88);--tp-ink:#F5F3EF;--tp-text:#FFFFFF;--tp-dim:#6E6A65;--tp-muted:#A39E97;--tp-line:#2C2B29;--tp-line-strong:#3A3835;--tp-guide:#EEDCFF;--tp-control:#EEDCFF;--tp-scrim:rgba(10,10,10,.6);--tp-editor:#121211;--tp-field:#1C1B19;}
html.is-prompter,html.is-prompter body{background:var(--tp-paper)}
.tp{background:var(--tp-paper);color:var(--tp-ink)}
.tp-top,.tp-bottom{background:var(--tp-bar);border-color:var(--tp-line)}
.tp-top .brand{color:var(--tp-ink)}
.tp-meta{color:var(--tp-muted)}
.tp-btn{border:1px solid var(--tp-line-strong);border-radius:var(--radius-pill);color:var(--tp-ink)}
.tp-btn:hover{border-color:var(--tp-muted)}
.tp-btn[aria-pressed="true"]{background:var(--tp-ink);color:var(--tp-paper);border-color:var(--tp-ink)}
.tp-btn.play{background:var(--deck-accent);border-color:var(--deck-accent);color:var(--deck-accent-ink)}
.tp :focus-visible{outline-color:var(--focus)}
.tp-inner .chunk{color:var(--tp-dim)}
.tp-inner .chunk.now{color:var(--tp-text)}
.tp-guide::before{border-left-color:var(--tp-guide)}
.tp-guide::after{border-right-color:var(--tp-guide)}
.tp-fade{background:linear-gradient(to bottom,var(--tp-paper) 0,transparent 18%,transparent 80%,var(--tp-paper) 100%)}
.tp-slider{color:var(--tp-muted)}
.tp-slider input{accent-color:var(--tp-control)}
.tp-slider output{color:var(--tp-ink)}
.tp-hint{color:var(--tp-dim)}
.tp-hint kbd{color:var(--tp-muted);box-shadow:inset 0 0 0 1px var(--tp-line-strong);background:transparent}
.tp-count{color:var(--tp-ink);background:var(--tp-scrim);font-weight:600;font-stretch:normal}
.tp-empty{color:var(--tp-muted)}
.tp-editor{background:var(--tp-editor)}
.tp-editor textarea{background:var(--tp-field);color:var(--tp-ink);box-shadow:var(--shadow)}
.tp-editor p{color:var(--tp-muted)}

@media (prefers-reduced-motion:reduce){.btn{transition:none}}