/* Look: warm paper and ink outlines with a hard shadow (concept D, 2026-10-25). Make screen: style cards, voices, then line and stage side by side, settings below. Studio = one centered column. Each style sets its own accent and stage tint. */
/* Self-hosted fonts (SIL OFL 1.1, licenses in /fonts). Figtree is a variable font, one file covers 400–800. */
@font-face{font-family:"Figtree";font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/figtree-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/figtree-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Bagel Fat One";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/bagel-fat-one-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Bagel Fat One";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/bagel-fat-one-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --bg:#FFF4E2; --surface:#FFFFFF; --surface2:#F6E7CF; --line:#E6D3B3; --line2:#8C7B66; --ink:#231B12; --shadow:#231B12;
  --text:#231B12; --muted:#5E5244; --coral:#C23B26; --on-coral:#FFFFFF; --green:#1F7A4B; --focus:#2F6FD6; --warn:#8F5E14;
  --bubble:#FFFFFF; --body:#F2B705; --on-acc:#FFFFFF;
  --logo:"Bagel Fat One","Arial Rounded MT Bold",system-ui,sans-serif;
  --ui:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#16120D; --surface:#211B14; --surface2:#2C241A; --line:#3A3024; --line2:#8F806C; --ink:#F5E9D8; --shadow:#000000;
  --text:#F5E9D8; --muted:#C2B39E; --coral:#FF8A76; --on-coral:#14100B; --green:#5CCB8F; --focus:#9CC1FF; --warn:#F2C26B;
  --bubble:#211B14; --on-acc:#14100B; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#16120D; --surface:#211B14; --surface2:#2C241A; --line:#3A3024; --line2:#8F806C; --ink:#F5E9D8; --shadow:#000000;
  --text:#F5E9D8; --muted:#C2B39E; --coral:#FF8A76; --on-coral:#14100B; --green:#5CCB8F; --focus:#9CC1FF; --warn:#F2C26B;
  --bubble:#211B14; --on-acc:#14100B; color-scheme:dark}
/* per style: accent (darker in light for white text, lighter in dark for dark text, both 5:1 or more), stage tint, critter body */
body{--accL:#C23B26;--accD:#FF8A76;--tintL:#FDE3DD;--tintD:#3A1E19}
body.e-sim{--accL:#1F7A4B;--accD:#5CCB8F;--tintL:#DDF1E5;--tintD:#1C3326;--body:#E8B98F}
body.e-vemmo{--accL:#A9521A;--accD:#F0A060;--tintL:#F8E3D2;--tintD:#3A2516;--body:#D9A47A}
body.e-grumble{--accL:#4F6A25;--accD:#A8C46E;--tintL:#E6EDD8;--tintD:#252E18;--body:#8FA36A}
body.e-gizmo{--accL:#2860C2;--accD:#8AB4FF;--tintL:#DCE7FA;--tintD:#18243A;--body:#AFC3DE}
body.e-sprite{--accL:#7A48C2;--accD:#C3A0FF;--tintL:#EADFF8;--tintD:#2A1F3D;--body:#D9C4F2}
body.e-echo{--accL:#8F5E14;--accD:#F2C26B;--tintL:#F7E8C8;--tintD:#332712;--body:#F0C56B}
body.e-radio{--accL:#26766A;--accD:#6FD1C0;--tintL:#D7EEEA;--tintD:#16302C;--body:#9CC9BF}
body.e-baby{--accL:#B63A6F;--accD:#FF9CC4;--tintL:#FADDE8;--tintD:#3A1A29;--body:#F6C1D4}
body.e-tone,body.e-instr{--accL:#17767C;--accD:#6FD6DC;--tintL:#D6EFF0;--tintD:#15302F}
body{--acc:var(--accL);--tint:var(--tintL)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body{--acc:var(--accD);--tint:var(--tintD)}}
:root[data-theme="dark"] body{--acc:var(--accD);--tint:var(--tintD)}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--text);font-family:var(--ui);font-size:15px;line-height:1.5;margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:21;background:var(--bg)}
.top-in{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:8px 28px;flex-wrap:wrap;padding-block:14px;padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px))}
.logo{font-family:var(--logo);font-weight:400;font-size:26px;line-height:.9;letter-spacing:.01em;background:none;border:0;padding:0;cursor:pointer;color:var(--text);text-align:left}
.logo span{color:var(--coral);display:block}
.topcta{display:flex;align-items:center;gap:8px;border-radius:999px;border:2px solid var(--ink);background:var(--surface);padding:7px 16px;font-weight:800;cursor:pointer;box-shadow:3px 3px 0 var(--shadow)}
.topcta .rd{width:11px;height:11px;border-radius:50%;background:var(--coral)}
.topcta:hover{background:var(--surface2)}
.nav{display:flex;gap:6px;flex:1;min-width:0}
.nav button{background:none;border:0;border-radius:999px;padding:8px 14px;color:var(--muted);font-weight:700;cursor:pointer;white-space:nowrap}
.nav button:hover{color:var(--text)}
.nav button[aria-current="page"]{background:var(--ink);color:var(--bg)}
.lang{display:flex;border:2px solid var(--ink);border-radius:999px;overflow:hidden}
.lang button{background:none;border:0;padding:5px 10px;font-size:13px;font-weight:800;color:var(--text);cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.back{background:none;border:0;color:var(--muted);font-weight:700;cursor:pointer;padding:8px 4px;margin-left:auto}
.back:hover{color:var(--text)}
main{max-width:1320px;margin:0 auto;padding-block:4px 48px;padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px))}
@media (max-width:640px){
  .top-in{gap:10px 14px;padding-block:12px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  #mainTop .topcta{margin-left:auto}
  #mainTop .nav{order:3;flex-basis:100%}
  main{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
}
h1{font-family:var(--logo);font-weight:400;letter-spacing:.01em;font-size:30px;line-height:1.15;margin:0;text-wrap:balance}
.lead{color:var(--muted);margin:6px 0 0}
h2{font-size:18px;margin:0;font-weight:800}
.disp{font-family:var(--logo);font-weight:400;letter-spacing:.01em}
h3{font-size:16px;margin:0;font-weight:800}
.panel{background:var(--surface);border:2px solid var(--ink);border-radius:22px;padding:20px;display:flex;flex-direction:column;gap:12px;min-width:0;box-shadow:4px 4px 0 var(--shadow)}
.hint{color:var(--muted);font-size:13px;margin:0}
.seg{display:flex;border:2px solid var(--ink);border-radius:999px;overflow:hidden;flex-wrap:wrap}
.seg button{flex:1 1 0;min-width:0;background:var(--surface);border:0;border-left:2px solid var(--ink);padding:8px 14px;color:var(--text);cursor:pointer;font-weight:700;white-space:nowrap}
.seg button:first-child{border-left:0}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.seg button:hover:not([aria-pressed="true"]){background:var(--surface2)}
.field{display:flex;flex-direction:column;gap:6px}
.flabel,label{font-weight:700;font-size:14px}
textarea{width:100%;min-height:88px;resize:vertical;background:var(--surface2);border:2px solid var(--ink);border-radius:14px;padding:12px 14px;font-size:17px;line-height:1.45}
select,input[type=text]{width:100%;background:var(--surface);border:2px solid var(--ink);border-radius:12px;padding:9px 12px}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
input[type=range]{width:100%;accent-color:var(--acc)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;border:2px solid var(--ink);background:var(--surface);padding:8px 18px;font-weight:800;cursor:pointer;min-height:42px}
.btn:hover:not(:disabled){background:var(--surface2)}
.btn.primary{background:var(--acc);color:var(--on-acc);box-shadow:3px 3px 0 var(--shadow)}
#viewStudio .btn.primary,#viewVoices .btn.primary{background:var(--coral);color:var(--on-coral)}
.btn.primary:hover:not(:disabled){filter:brightness(1.07)}
.btn.wide{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.link{background:none;border:0;padding:0;color:var(--text);text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:2px;text-underline-offset:4px;cursor:pointer;font-weight:700;align-self:flex-start}
.danger{background:none;border:0;color:var(--coral);font-weight:800;cursor:pointer;padding:10px 12px}
hr{border:0;border-top:2px dashed var(--line);margin:4px 0;width:100%}
details{border-top:2px dashed var(--line);padding-top:12px}
details>summary{cursor:pointer;font-weight:800;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px}
details>summary::-webkit-details-marker{display:none}
details>summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-right:4px;flex:0 0 auto}
details[open]>summary::after{transform:rotate(-135deg)}
.dbody{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.rng .top2{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.rng output{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.empty{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.sounds{font-size:clamp(22px,3vw,30px);font-weight:800;margin:0;line-height:1.3;word-wrap:break-word}
.sounds .s{border-radius:4px}
.sounds .s.on{background:var(--acc);color:var(--on-acc)}
.sounds .s.lex{text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:5px}
.player{display:flex;align-items:center;gap:14px;min-width:0}
.player canvas{flex:1;min-width:0;height:48px;display:block}
.dur{font-variant-numeric:tabular-nums;color:var(--muted);font-size:14px;font-weight:700;flex:0 0 auto}
.stale{background:var(--surface2);border:2px solid var(--ink);border-left-width:6px;border-left-color:var(--warn);border-radius:12px;padding:10px 12px;margin:0;font-size:14px}
.stale .link{margin-left:6px}
.meta{font-size:13px;color:var(--muted);margin:0}
.busy{display:flex;align-items:center;gap:10px;margin:0;color:var(--muted)}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--acc);animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.note{background:var(--surface2);border-radius:12px;padding:10px 12px;font-size:13px;margin:0}
.anchors{display:flex;flex-direction:column;gap:6px}
.anchors button{display:flex;justify-content:space-between;gap:10px;align-items:baseline;text-align:left;background:var(--surface);border:2px solid var(--ink);border-radius:12px;padding:8px 12px;cursor:pointer}
.anchors button b{font-weight:800}
.anchors button span{font-size:12px;color:var(--muted)}
dialog{background:var(--surface);color:var(--text);border:2px solid var(--ink);border-radius:22px;padding:0;width:min(560px,calc(100vw - 32px));max-height:min(80vh,640px);box-shadow:6px 6px 0 var(--shadow)}
dialog::backdrop{background:rgba(20,14,8,.6)}
.dlg{display:flex;flex-direction:column;gap:14px;padding:20px}
.dlg-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.exlist{display:flex;flex-direction:column;gap:6px;max-height:52vh;overflow-y:auto}
.exlist h3{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:10px 0 2px}
.exlist button{text-align:left;background:var(--surface2);border:2px solid transparent;border-radius:12px;padding:10px 12px;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.exlist button:hover{border-color:var(--ink)}
.exlist button small{color:var(--muted);font-size:12px}
.vlist{display:flex;flex-direction:column}
.vrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:14px 0;border-top:2px dashed var(--line)}
.vrow:first-child{border-top:0}
.vrow .vinfo{flex:1;min-width:200px}
.vrow .vinfo b{display:block;font-size:16px}
.vrow .vact{display:flex;gap:8px;flex-wrap:wrap}
.tag{display:inline-block;font-size:12px;font-weight:800;border:1.5px solid var(--ink);border-radius:999px;padding:0 8px;margin-left:6px;color:var(--text)}
/* studio */
.studio-col{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.studio-col h1{text-align:center}
.stepper{display:flex;justify-content:center;gap:0;list-style:none;margin:0;padding:0}
.stepper li{display:flex;flex-direction:column;align-items:center;gap:6px;width:150px;position:relative;font-size:14px;color:var(--muted);font-weight:600}
.stepper li .n{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line2);display:grid;place-items:center;background:var(--bg);font-weight:700;position:relative;z-index:1}
.stepper li+li::before{content:"";position:absolute;top:17px;right:50%;width:100%;height:1.5px;background:var(--line2)}
.stepper li.done .n{border-color:var(--text);color:var(--text)}
.stepper li.done+li::before,.stepper li.cur::before{background:var(--coral)}
.stepper li.cur{color:var(--text)}
.stepper li.cur .n{background:var(--coral);border-color:var(--coral);color:var(--on-coral)}
@media (max-width:480px){.stepper li{width:100px;font-size:12px}}
.meter{display:flex;gap:3px;height:16px;align-items:stretch;flex:1;min-width:0}
.meter i{flex:1;background:var(--line);border-radius:2px}
.meter i.on{background:var(--green)}
.meterrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.meterrow .mstate{font-size:14px;color:var(--muted);flex:0 0 auto}
.steps3{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;counter-reset:s}
.steps3 li{display:flex;gap:12px;align-items:center;counter-increment:s}
.steps3 li::before{content:counter(s);width:26px;height:26px;border-radius:50%;background:var(--surface2);display:grid;place-items:center;font-size:13px;font-weight:700;flex:0 0 auto}
.exrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border:1px solid var(--line2);border-radius:8px;padding:10px 12px}
.exrow .chunk{font-weight:700;letter-spacing:.02em}
.sum{font-weight:500;color:var(--muted);font-size:13px;margin-left:8px}
details>summary .sumwrap{display:flex;flex-direction:column}
.setgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:560px){.setgrid{grid-template-columns:1fr}}
.scriptlist{font-size:14px;font-weight:600;display:flex;flex-wrap:wrap;gap:4px 16px;background:var(--bg);border-radius:8px;padding:10px 12px}
.scriptlist span i{font-style:normal;color:var(--muted);font-weight:500;margin-right:5px;font-size:12px}
.calc{text-align:center;color:var(--muted);font-size:13px;margin:0}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.duo{grid-template-columns:1fr}}
.center{text-align:center}
.altroute{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line2);border-radius:8px;padding:14px}
.altroute .row2{display:flex;flex-wrap:wrap;gap:10px}
.stat{display:flex;align-items:center;gap:10px;font-weight:700}
.stat .dot{width:12px;height:12px;border-radius:50%;background:var(--muted)}
.stat.rec .dot{background:var(--coral)}
.stat.paused .dot{background:var(--warn)}
.rechead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.cue{text-align:center;font-size:18px;font-weight:700;margin:6px 0 0}
.sylls{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 10px}
.sylls span{font-size:clamp(34px,8.5vw,76px);font-weight:800;line-height:1.05;padding:6px 14px;border-radius:10px;color:var(--muted);border:2px solid transparent}
.sylls span.done{color:var(--text)}
.sylls span.on{background:var(--coral);color:var(--on-coral);border-color:var(--coral)}
.nextl{text-align:center;color:var(--muted);font-size:18px;font-weight:600;margin:0;font-variant-numeric:tabular-nums}
.nextl b{color:var(--text);font-weight:600}
.prog{display:flex;align-items:center;gap:14px}
.pbar{flex:1;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.pbar div{height:100%;width:0;background:var(--coral)}
.prog span{font-size:13px;color:var(--muted);flex:0 0 auto;font-variant-numeric:tabular-nums}
.recctl{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.count{text-align:center;font-size:64px;font-weight:800;margin:0;line-height:1}
.sub{border:1px solid var(--line2);border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:12px}
.lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.lines li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.lines li:first-child{border-top:0}
.lines li .ln{color:var(--muted);width:24px;font-variant-numeric:tabular-nums}
.lines li .lt{flex:1;min-width:140px;font-weight:600}
.lines li .ls{font-size:12px;font-weight:700}
.lines li .ls.ok{color:var(--green)} .lines li .ls.miss{color:var(--warn)}
.lines li .btn{min-height:32px;padding:5px 10px;font-size:13px}
.warnbox{border-left:3px solid var(--warn);background:var(--surface2);border-radius:8px;padding:10px 12px;margin:0;font-size:14px}
.err{color:var(--coral);margin:0;font-size:14px;font-weight:600}
.ok{color:var(--green)}
.upload{display:flex;flex-direction:column;gap:10px;border:1px dashed var(--line2);border-radius:8px;padding:14px}
.upload input{font-size:14px;max-width:100%}
.mini{font-size:13px}
/* make screen: who speaks (style cards, voices), then the line and the stage side by side at one height, settings below.
   The player strip sits at the bottom of the stage and does not move; longer babble gets smaller type and scrolls in the bubble. */
#viewMake{display:flex;flex-direction:column;gap:20px}
.cast{display:flex;flex-direction:column;gap:12px}
.styles{display:flex;gap:18px;overflow-x:auto;padding:4px 6px 8px 4px;margin:0 -6px 0 -4px;scrollbar-width:thin}
.sgroup{display:flex;gap:8px}
.sgroup.g0{flex:9 0 auto}.sgroup.g1{flex:2 0 auto}
.styles button{flex:1 0 86px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px 8px;background:var(--surface);border:2px solid var(--ink);border-radius:16px;font-weight:800;font-size:13px;line-height:1.15;cursor:pointer;text-align:center;color:var(--text)}
.styles button:hover{background:var(--surface2)}
.styles button svg{width:42px;height:42px}
.styles button[aria-pressed="true"]{box-shadow:4px 4px 0 var(--shadow);transform:translate(-2px,-2px);background:var(--tint)}
.styles .b{fill:var(--c)}.styles .e{fill:#231B12;stroke:#231B12}.styles .h{fill:var(--c2)}.styles .a{stroke:var(--c2);stroke-width:3;fill:none;stroke-linecap:round}
.s-animal{--c:#F2B705;--c2:#E2553F}.s-sim{--c:#E8B98F;--c2:#2E9C62}.s-vemmo{--c:#D9A47A;--c2:#C2601C}.s-grumble{--c:#8FA36A;--c2:#5E7D2E}.s-gizmo{--c:#AFC3DE;--c2:#2F6FD6}
.s-sprite{--c:#D9C4F2;--c2:#8A57D1}.s-echo{--c:#F0C56B;--c2:#B7791F}.s-radio{--c:#9CC9BF;--c2:#2F8C7E}.s-baby{--c:#F6C1D4;--c2:#D44F87}.s-tone,.s-instr{--c:#9ED6D9;--c2:#1E8F96}
.crow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.crow .lbl{margin-right:4px}
.lbl{font-weight:800;font-size:14px}
.vdesc{color:var(--muted);font-size:14px;margin-left:6px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{border:2px solid var(--ink);background:var(--surface);border-radius:999px;padding:6px 14px;font-weight:700;font-size:15px;cursor:pointer;min-height:40px;color:var(--text)}
.chips button:hover{background:var(--surface2)}
.chips button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.chips .own{border-style:dashed}
.chips .char{font-style:italic}
.chips .sep{flex-basis:100%;height:0}
.work{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px;align-items:stretch}
.compose{gap:14px}
.compose h2{font-size:20px;line-height:1.15}
#fTxt{flex:1}
#fTxt textarea{flex:1;min-height:150px;resize:none}
#fTxt .link{align-self:flex-end;font-size:13px;padding:4px 0;min-height:28px}
.stage{display:flex;flex-direction:column;overflow:hidden;background:var(--tint);border:2px solid var(--ink);border-radius:22px;box-shadow:4px 4px 0 var(--shadow);min-width:0}
.scene{flex:1;display:flex;align-items:center;gap:16px;padding:20px 22px;min-height:0}
.critter{flex:0 0 auto;width:110px;height:130px}
.critter .b{fill:var(--body);transition:fill .3s} .critter .e{fill:#231B12} .critter .m{fill:#231B12} .critter .c{fill:#E2553F;opacity:.35}
.critter .acc{fill:var(--acc)} .critter .accs{stroke:var(--acc);fill:none;stroke-width:3;stroke-linecap:round}
.critter .xears,.critter .xant,.critter .xhelm,.critter .xphones,.critter .xtone{display:none}
body.e-animal .xears,body.e-sprite .xears,body.e-baby .xears,body.e-grumble .xears{display:inline}
body.e-gizmo .xant{display:inline} body.e-vemmo .xhelm{display:inline} body.e-radio .xphones{display:inline}
body.e-tone .xtone,body.e-instr .xtone{display:inline} body.e-tone .face,body.e-instr .face{display:none}
.bubble{position:relative;flex:1;min-width:0;background:var(--bubble);border:2px solid var(--ink);border-radius:20px;padding:14px 18px;min-height:100px;display:flex;flex-direction:column;gap:6px}
.bubble::before{content:"";position:absolute;left:-14px;top:50%;margin-top:-12px;border:12px solid transparent;border-right-color:var(--ink);border-left:0}
.bubble::after{content:"";position:absolute;left:-10px;top:50%;margin-top:-10px;border:10px solid transparent;border-right-color:var(--bubble);border-left:0}
.speaker{font-family:var(--logo);font-size:16px;line-height:1.2}
.bubble .sounds{max-height:190px;overflow-y:auto;scrollbar-width:thin;text-wrap:pretty}
.sounds[data-len="s"]{font-size:28px}.sounds[data-len="m"]{font-size:23px}.sounds[data-len="l"]{font-size:19px}
.bhint{margin:0;color:var(--muted);font-size:15px}
.stage .stale{margin:0 22px 14px}
.transport{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;background:var(--surface);border-top:2px solid var(--ink);padding:12px 16px}
.transport .player canvas{height:40px}
.transport .busy{grid-column:2}
#genBtn{font-size:17px;padding:9px 22px}
#dlBtn{background:var(--ink);color:var(--bg)}
.takes{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--surface);border-top:2px dashed var(--line);padding:10px 16px 12px}
.takechips{flex:1}
.takechips button{min-width:40px;font-variant-numeric:tabular-nums}
.takechips .take{display:inline-flex;align-items:center}
.takechips .take button[aria-pressed]{border-top-right-radius:0;border-bottom-right-radius:0}
.takechips .take .del{min-width:0;padding:0 10px;margin-left:-2px;border-top-left-radius:0;border-bottom-left-radius:0;color:var(--muted)}
.takechips .take.old button{border-style:dashed;color:var(--muted)}
.takechips .add{border-style:dashed}
.takechips .savechar{margin-left:auto}
.takechips .tipbtn{min-width:0;width:32px;min-height:32px;height:32px;padding:0;font-weight:800;font-style:italic}
.takechips button:disabled{opacity:.45;cursor:not-allowed}
.stage>.hint,.stage>.charform,.stage>.err{background:var(--surface);margin:0;padding:0 16px 12px}
.charform{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.charform input{flex:1;min-width:160px}
.tune{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);padding:0;gap:0;overflow:hidden}
.tgroup{padding:18px 22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.tgroup.side{background:var(--surface2);border-left:2px solid var(--ink)}
.tgroup h2{font-size:18px}
.sgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 26px}
.tune .rng .hint{display:none}
.tune .rng:focus-within .hint{display:block}
.tune details{border-top:2px dashed var(--line)}
/* voices and characters: character cards with the style critter, recorded voices as a list */
#viewVoices{display:flex;flex-direction:column;gap:6px;padding-top:8px}
.vsec{display:flex;flex-direction:column;gap:12px;margin-top:26px}
.vsec h2{font-size:22px}
.shead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.ccard{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px 14px;align-items:center;background:var(--surface);border:2px solid var(--ink);border-radius:18px;padding:14px;box-shadow:4px 4px 0 var(--shadow)}
.ccard svg{width:52px;height:52px}
.ccard .b{fill:var(--c)}.ccard .e{fill:#231B12;stroke:#231B12}.ccard .h{fill:var(--c2)}.ccard .a{stroke:var(--c2);stroke-width:3;fill:none;stroke-linecap:round}
.ccard .vinfo{min-width:0}
.ccard .vinfo b{display:block;font-family:var(--logo);font-weight:400;font-size:18px;line-height:1.2}
.ccard .vact{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}
.ccard .vact .btn{min-height:36px;padding:5px 14px;font-size:14px}
@media (max-width:1000px){
  .work{grid-template-columns:1fr}
  .tune{grid-template-columns:1fr}.tgroup.side{border-left:0;border-top:2px solid var(--ink)}
}
@media (max-width:640px){
  .styles button{flex:0 0 86px}
  .vdesc{flex-basis:100%;margin:0}
  #fTxt textarea{min-height:110px}
  .scene{padding:14px;gap:10px}
  .critter{width:60px;height:72px;align-self:flex-start}
  .bubble::before,.bubble::after{display:none}
  .sounds[data-len="s"]{font-size:22px}.sounds[data-len="m"]{font-size:19px}.sounds[data-len="l"]{font-size:17px}
  .transport{grid-template-columns:auto minmax(0,1fr);gap:10px 12px;padding:12px}
  .transport #dlBtn{grid-column:1/-1}
  .sgrid{grid-template-columns:1fr 1fr}
  .foot{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .takes .lbl{flex-basis:100%}
}
/* former inline styles (strict CSP: style-src 'self') */
#orbRing{transform-origin:55px 72px}
#recReady{display:flex;flex-direction:column;gap:14px;align-items:center;padding:24px 0}
#recReadyTxt{margin:0;max-width:52ch}
#recLive{display:flex;flex-direction:column;gap:18px}
#checkBody{display:flex;flex-direction:column;gap:16px}
#prevText{font-size:20px}
#sessionOnly{align-self:center}
#cfText{font-size:15px}
.private{display:flex;justify-content:center;gap:8px;align-items:baseline;font-size:13px;margin:0;color:var(--muted)}
.private::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);flex:0 0 auto;transform:translateY(-1px)}
/* footer: credit and license */
.foot{max-width:1320px;margin:0 auto;padding-block:20px 32px;padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px));border-top:2px dashed var(--line);display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between;font-size:13px;color:var(--muted)}
.foot p{margin:0}
.foot a{color:var(--text);text-underline-offset:3px}
.foot a:hover{color:var(--coral)}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
/* 404 page */
.nf{max-width:640px;display:flex;flex-direction:column;gap:14px;padding-top:56px}
.nf .logo{text-decoration:none;margin-bottom:12px}
.nf p{margin:0}
.legal{padding-bottom:40px}
.legal section{display:flex;flex-direction:column;gap:14px}
.legal h2{font-size:20px;margin:14px 0 0}
.legal ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.legal a:not(.btn):not(.logo){color:var(--text);text-underline-offset:3px}
a.btn{text-decoration:none;color:inherit}