:root {
 --paper:#EAF3FF; --ink:#11194B; --accent:#3456E3; --accent-hover:#2743BA;
 --soft:#EAF3FF; --muted:#485579; --line:#D5DCF4; --white:#FFFFFF;
 --record:#B8214C; --yellow:#FFE66D; --focus:#11194B;
 font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
 color:var(--ink); background:var(--paper); font-size:100%; line-height:1.5;
}
* {box-sizing:border-box}
body {margin:0; background:var(--paper); color:var(--ink)}
body[data-skin="squirrel-astronaut"] {--paper:#EAF3FF; --soft:#EAF3FF; --line:#BAC5EB}
body[data-skin="space-buddies"] {--paper:#F2EEFC; --soft:#F4F0FF; --accent:#6941BA; --accent-hover:#52318F; --line:#DDD3F3}
body[data-skin="strawberry-picnic"] {--paper:#FFF0F5; --soft:#FFF1F6; --accent:#B82159; --accent-hover:#921A47; --line:#F1CFDD}
body[data-skin="penguin-playground"] {--paper:#ECF5FF; --soft:#EFF6FF; --accent:#2454AD; --accent-hover:#1B4085; --line:#CEDFF3}
button,a,summary {-webkit-tap-highlight-color:transparent; touch-action:manipulation}
button {font:inherit; font-size:1rem; font-weight:650; min-height:48px; padding:12px 16px; border:1px solid var(--accent); border-radius:12px; color:var(--accent); background:var(--white); cursor:pointer; overflow-wrap:anywhere; transition:background 160ms,color 160ms}
button:hover {background:var(--soft)}
button:active {background:var(--line)}
button.primary {background:var(--accent); border-color:var(--accent); color:var(--white)}
button.primary:hover,button.primary:active {background:var(--accent-hover); border-color:var(--accent-hover)}
button:disabled,button.primary:disabled {cursor:default; background:#E7EAF3; border-color:#D5DBE9; color:#58637F}
:is(button,a,summary,video,audio):focus-visible {outline:3px solid var(--focus); outline-offset:4px}
a {color:var(--accent); text-decoration:none}
p {margin:0 0 16px}
h1,h2 {font:inherit; font-weight:760; letter-spacing:-.025em; text-wrap:balance; overflow-wrap:anywhere}
h1 {font-size:2rem; line-height:1.18; margin:0 0 12px}
h2 {font-size:1.5rem; line-height:1.25; margin:0 0 8px}
[hidden] {display:none!important}
.page-shell {width:100%; max-width:680px; margin:auto; background:var(--white); min-height:100vh}
body[data-skin="squirrel-astronaut"] .page-shell {position:relative; isolation:isolate; background:var(--paper)}
header {padding:24px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px}
.wordmark {font-size:2rem; font-weight:850; line-height:1; letter-spacing:-.04em; flex-shrink:0; min-height:48px}
.wordmark span {display:block; font-size:1rem; font-weight:500; letter-spacing:0; margin-top:6px}
.tag {font-size:.875rem; color:var(--muted); text-align:right; line-height:1.4}
body[data-skin="squirrel-astronaut"] .tag {display:none}
main {padding:0 24px 24px}
.skin-banner {overflow:hidden; border-radius:12px; background:var(--soft); aspect-ratio:3/1}
.skin-banner img {display:block; width:100%; height:100%; object-fit:cover}
/* The school mascot flows behind the masthead, with its full3:2 art intact.
   Reserve a short stage so sentence and action surfaces start below the art. */
body[data-skin="squirrel-astronaut"] .skin-banner {height:136px; aspect-ratio:auto; max-height:none; background:transparent; overflow:visible; border-radius:0}
body[data-skin="squirrel-astronaut"] .skin-banner img {position:absolute; top:32px; right:0; width:min(100%,348px); height:auto; aspect-ratio:3/2; object-fit:contain; pointer-events:none; z-index:-1; border-radius:0; -webkit-mask-image:linear-gradient(to right,transparent,#000 30%),linear-gradient(to bottom,transparent,#000 12%,#000 85%,transparent); mask-image:linear-gradient(to right,transparent,#000 30%),linear-gradient(to bottom,transparent,#000 12%,#000 85%,transparent); -webkit-mask-composite:source-in; mask-composite:intersect}
.skin-picker {margin:8px 0 24px; font-size:.875rem}
.skin-picker summary {position:relative; min-height:48px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding-right:28px; cursor:pointer; color:var(--accent); font-size:1rem; font-weight:650; border-radius:8px}
.skin-picker summary::after {content:"+"; position:absolute; right:0; top:12px; font-size:1.5rem; line-height:1}
.skin-picker[open] summary::after {content:"−"}
.skin-picker summary::-webkit-details-marker {display:none}
.skin-picker summary #current-skin {flex:0 1 auto; font-size:.875rem; font-weight:400; color:var(--muted); margin-left:auto; text-align:right; min-width:0; max-width:100%; overflow-wrap:anywhere}
.skin-options {display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,8rem),1fr)); gap:12px; padding:8px 0}
.skin-options button {padding:0; overflow:hidden; text-align:left; color:var(--ink); border-color:var(--line); font-size:1rem}
.skin-options img {display:block; width:100%; height:auto; aspect-ratio:3/1; object-fit:cover}
.skin-options [data-skin-option="squirrel-astronaut"] {grid-column:1/-1}
.skin-options [data-skin-option="squirrel-astronaut"] img {aspect-ratio:3/2; object-fit:contain}
.skin-options span {display:block; padding:10px; line-height:1.4; overflow-wrap:anywhere}
.skin-options [aria-pressed="true"] {border:2px solid var(--accent); background:var(--soft)}
.skin-options [aria-pressed="true"] span::before {content:"✓ "; color:var(--accent)}
.intro {margin-bottom:24px}
.eyebrow {font-size:.875rem; font-weight:700; letter-spacing:.06em; color:var(--muted); margin-bottom:8px}
.lead {color:var(--muted); margin-bottom:20px; text-wrap:pretty}
.workflow {padding:0; margin:0; list-style:none; display:flex; gap:16px; justify-content:space-between; position:relative}
.workflow::before {content:""; position:absolute; height:2px; top:16px; left:16%; right:16%; background:var(--line)}
.workflow li {display:flex; flex:1; align-items:center; flex-direction:column; gap:4px; font-size:1rem; color:var(--muted); position:relative}
.workflow li span {width:34px; height:34px; display:grid; place-items:center; border:2px solid var(--line); border-radius:50%; background:var(--white); font-weight:700; color:var(--accent)}
body[data-state="idle"] [data-step="listen"] span,
body[data-state="requesting"] [data-step="record"] span,
body[data-state="countdown"] [data-step="record"] span,
body[data-state="recording"] [data-step="record"] span,
body[data-state="assembling"] [data-step="save"] span,
body[data-state="complete"] [data-step="save"] span {color:var(--white); background:var(--accent); border-color:var(--accent)}
#message:not(:empty),#browser-hint {margin-bottom:24px; padding:16px; border-radius:12px; background:var(--soft); font-size:1rem; overflow-wrap:anywhere}
#message[data-kind="error"] {color:#8B1739; background:#FFF0F4}
.line {margin:0 0 32px; padding:0 0 24px; border-bottom:1px solid var(--line)}
body[data-skin="squirrel-astronaut"] .line {background:var(--white); padding:16px; border:0; border-radius:12px; margin-bottom:24px}
body[data-skin="squirrel-astronaut"] .line-head {padding:0 0 12px; background:transparent}
.line-head {display:flex; align-items:flex-start; gap:12px; padding:12px 16px; border-radius:12px; background:var(--soft); margin-bottom:12px}
.line-head>div {min-width:0}
.number {display:grid; place-items:center; flex-shrink:0; min-width:2rem; min-height:2rem; font-size:.875rem; font-weight:700; color:var(--accent); background:var(--white); border-radius:50%}
.line h2 {font-size:1.5rem; margin:0 0 4px}
.duration,.small,.privacy,.saved {font-size:.875rem; color:var(--muted)}
video {display:block; width:100%; aspect-ratio:16/9; object-fit:contain; background:#11194B; border-radius:12px; margin:0 0 12px}
audio {display:block; width:100%; min-width:0; height:54px; margin:12px 0 8px; border-radius:12px; background:var(--soft)}
.actions {display:flex; gap:12px; flex-wrap:wrap}
.line .actions button {width:100%; min-height:56px; font-size:1.125rem}
.recording,.recording:hover,.recording:active {background:var(--record)!important; border-color:var(--record)!important; color:var(--white)!important}
.recording::before {content:""; display:inline-block; width:12px; height:12px; background:currentColor; border-radius:2px; margin-right:10px}
body:is([data-state="countdown"],[data-state="requesting"]) .line [data-record]:not(:disabled) {background:var(--white); color:var(--accent); border-color:var(--accent)}
.countdown {--countdown-progress:1; position:relative; display:grid; place-items:center; width:96px; height:96px; margin:16px auto; color:var(--accent); background:var(--soft); border-radius:50%; isolation:isolate}
.countdown::before {content:""; position:absolute; inset:0; border-radius:50%; border:6px solid var(--line); z-index:-1}
/* Remaining fraction1→0 moves the arc boundary counterclockwise from12 o'clock.
   JS owns timing/number changes. This decorative ring never animates by itself. */
.countdown::after {content:""; position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg,var(--accent) calc(clamp(0,var(--countdown-progress),1)*1turn),transparent 0); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 0); mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 0); z-index:-1}
[data-countdown-number] {font-size:2.5rem; font-weight:760; line-height:1; font-variant-numeric:tabular-nums}
.countdown-label {display:block; text-align:center; font-size:1rem; color:var(--muted); margin:0 0 12px}
.saved {margin:8px 0 0; font-weight:550}
.saved:empty {display:none}
.record-status {font-size:1rem; color:var(--muted); margin:12px 0 0; overflow-wrap:anywhere}
.record-status:empty {display:none}
.finish {margin-top:8px}
body[data-skin="squirrel-astronaut"] .finish {background:var(--white); padding:16px; border-radius:12px}
.finish-intro {padding:0 0 8px}
#count {color:var(--muted)}
#make {width:100%; min-height:56px; font-size:1.125rem; margin-bottom:12px}
progress {display:block; width:100%; height:12px; accent-color:var(--accent); margin:12px 0}
#export-status {font-size:.875rem; color:var(--muted); overflow-wrap:anywhere}
#export-status:empty {display:none}
.result-heading {margin:20px 0 16px}
.result-heading h2 {font-size:1.75rem}
.result-heading p:last-child {color:var(--muted)}
.result-actions button {flex:1; min-height:56px; font-size:1.125rem}
.result-actions~.small {margin-top:12px}
.secondary-link {display:flex; min-height:48px; align-items:center; justify-content:center; border:1px solid var(--accent); border-radius:12px; padding:12px 16px; font-size:1rem; font-weight:650; margin-top:12px; text-decoration:underline; text-underline-offset:4px}
.secondary-link:hover {background:var(--soft)}
#save-status:not(:empty) {margin:12px 0; color:var(--muted)}
#save-status:empty {display:none}
.cleanup-status:not(:empty) {padding:16px; border-radius:12px; background:var(--soft); font-size:1rem}
.cleanup-status:empty {display:none}
body[data-state="complete"] :is(#lines,.finish-intro,#make,#clear,#export-status,#progress,.intro .eyebrow,.intro .lead) {display:none}
body[data-state="complete"] .intro h1 {font-size:1.25rem; margin-bottom:16px}
body[data-state="complete"] .result-heading {margin-top:8px}
.final-management {padding-top:8px; display:flex; flex-direction:column; align-items:stretch; gap:8px}
.text-button {background:transparent; border:0; text-decoration:underline; text-underline-offset:4px; padding:12px 8px; font-size:1rem}
.privacy {margin:24px 0 8px; text-wrap:pretty}
#clear {width:100%; color:var(--muted)}
footer {padding:0 24px 24px}
.about {border-top:1px solid var(--line); padding-top:24px}
.about h2 {font-size:1.125rem; letter-spacing:0}
.about p {font-size:.875rem; color:var(--muted); margin-bottom:8px}
.about p:not(.small) {font-size:1rem}
.footer-signoff {font-size:.875rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; color:var(--muted); margin-top:24px; margin-bottom:0}
.footer-signoff span {color:var(--accent); font-weight:750}
.skip-link {position:absolute; top:8px; left:8px; z-index:2; background:var(--white); padding:12px; transform:translateY(-200%)}
.skip-link:focus {transform:none}
@media(min-width:720px) {
 body {padding:32px 16px}
 .page-shell {border-radius:14px; min-height:auto}
 header {padding:32px 40px 24px}
 main {padding:0 40px 32px}
 footer {padding:0 40px 32px}
 .skin-banner {max-height:176px}
}
@media(max-width:359px) {
 header {padding:20px 16px}
 main {padding:0 16px 24px}
 footer {padding:0 16px 24px}
 h1 {font-size:1.75rem}
 .line-head {padding:12px; gap:8px}
 .line h2 {font-size:1.375rem}
 .skin-picker summary {gap:4px}
 .result-actions {flex-direction:column}
}
@media(max-height:500px) and (orientation:landscape) {
 .skin-banner {max-height:104px; aspect-ratio:auto}
 .skin-banner img {height:104px; object-position:center 58%}
 video {max-height:240px}
}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {transition:none!important; scroll-behavior:auto!important} .countdown::after {display:none}}

img {max-width:100%}
.language-picker {margin:0 0 0 auto;padding:0;border:0;display:flex;flex-wrap:wrap;gap:4px;align-self:flex-start;position:relative;z-index:1}
.language-picker label {display:flex;gap:5px;align-items:center;min-height:44px;padding:6px 8px;background:var(--white);border-radius:8px;color:var(--accent);font-size:.875rem;cursor:pointer}
.language-picker input {accent-color:var(--accent);width:16px;height:16px;flex-shrink:0}
.language-picker label:focus-within {outline:3px solid var(--focus);outline-offset:2px}
.workflow b,.footer-signoff b {font-weight:inherit}
.translation {margin:8px 0 0}
#library:empty {display:none}
body[data-skin="squirrel-astronaut"] .skin-banner img {top:70px;width:min(100%,320px);max-width:100%;-webkit-mask-image:linear-gradient(to bottom,#000 85%,transparent);mask-image:linear-gradient(to bottom,#000 85%,transparent)}

/* Class library and optional local notes use the same readable blue controls. */
.library {padding:16px; background:var(--white); border-radius:12px; margin:0 0 24px;}
.library-field {margin-bottom:12px;}
.library-field label,.line-annotations label {display:block; font-weight:650; margin:8px 0;}
.library select,.line-annotations input,.line-annotations textarea {width:100%; box-sizing:border-box; min-height:48px; padding:12px; font:inherit; color:var(--ink); border:1px solid var(--line); border-radius:8px; background:var(--white);}
.library-list {list-style:none; padding:0; margin:16px 0 0;}
.library-list li {padding:12px 0; border-top:1px solid var(--line);}
.library-list a {display:block; padding:12px 0; min-height:48px; font-weight:650;}
.library-list [aria-current] {text-decoration:underline; text-underline-offset:4px;}
.library-notes,.library-tags {font-size:.875rem; color:var(--muted); margin:0 0 8px;}
.recording-notes {margin-top:12px;}
.recording-notes summary {min-height:48px; padding:12px 0; color:var(--accent); cursor:pointer;}
.line-annotations h4 {font-size:1rem; margin:8px 0;}
.annotation-hint,.annotation-status {font-size:.875rem; color:var(--muted); margin:0 0 12px;}
.annotation-status:empty {display:none;}
:is(select,textarea,input):focus-visible {outline:3px solid var(--focus); outline-offset:3px;}