/* A small, optional workshop inside the existing storybook. */
#reader[data-studio-open=true] .reader-layout,#reader[data-studio-open=true] .reader-controls,#reader[data-studio-open=true] .reader-book-picker{display:none}
#reader[data-studio-open=true]{width:min(970px,96vw)}
.sound-studio[hidden]{display:none}
.sound-studio{overflow:auto;overscroll-behavior:contain;min-height:0;padding:20px 30px 22px;background:radial-gradient(ellipse at 0 30%,#e7edda 0,transparent 65%),#fffdf1;color:#245747}
.studio-heading{text-align:center;margin:0 0 20px}
.studio-heading .eyebrow{font-size:.65rem;letter-spacing:.15em;margin:0 0 7px}
.studio-heading h3{font:500 2.2rem/1.1 var(--display);margin:0 0 7px}
.studio-heading>p:last-child{font-size:.95rem;margin:0}
.studio-workbench{width:100%;max-width:920px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:22px;align-items:center}
.studio-book-context{font-size:.82rem;font-weight:800;letter-spacing:.04em;color:#68816b;margin:7px 0 0}
.studio-book-intro{font-size:.76rem;line-height:1.35;color:#68816b;max-width:620px;margin:4px auto 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.studio-book-intro[hidden]{display:none}
.studio-visual{margin:0;min-width:0;background:#e5ecd8;border-radius:22px;overflow:hidden}
.studio-picture-frame{width:100%;aspect-ratio:16 / 9;overflow:hidden;background:#e5ecd8}
.studio-picture-frame[hidden]{display:none}
.studio-picture-frame img{display:block;width:100%;height:100%;object-fit:var(--studio-object-fit,cover);object-position:var(--studio-object-position,50% 50%);transform:scale(var(--studio-zoom,1));transform-origin:var(--studio-object-position,50% 50%)}
.studio-picture-frame img[hidden]{display:none}
.studio-picture-caption{padding:13px 18px;text-align:center;font:500 1.2rem var(--display)}
.studio-badge[hidden]{display:none}
.studio-call{overflow-wrap:anywhere}
.studio-wave[hidden],.studio-visual[hidden]{display:none}
.studio-take-length:empty{display:none}
.studio-sound-menu{display:flex;flex-direction:column;gap:6px;max-height:365px;overflow:auto;padding:2px 5px 6px 2px;scrollbar-width:thin}
.sound-studio button{font:700 .9rem/1.3 var(--body);min-height:44px;border:1px solid #afc2a2;border-radius:14px;background:#fffdf1;color:#245747;cursor:pointer;padding:10px 14px}
.sound-studio button:focus-visible{outline:3px solid #d98a29;outline-offset:3px}
.sound-studio button:disabled{opacity:.5;cursor:default}
.sound-studio button[hidden]{display:none}
.studio-sound-menu button{flex:none;display:grid;grid-template-columns:38px 1fr;column-gap:10px;align-items:center;text-align:left;min-height:59px;background:#ffffff85;border-color:#d6dfc9}
.studio-sound-menu button>span{grid-row:span 2;display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--sound-color);font-size:1.15rem}
.studio-sound-menu button>small{font-size:.65rem;font-weight:400}
.studio-sound-menu button[aria-pressed=true]{background:#245747;color:#fffdf1;border-color:#245747}
.studio-sound-menu button[aria-pressed=true]>span{color:#245747}
.studio-card{position:relative;min-width:0;border:1px solid #c4d2b7;border-radius:24px;padding:24px 25px;background:#fffdf4;box-shadow:0 5px 0 #d7e0c9;text-align:center}
.studio-badge{display:grid;place-items:center;position:absolute;right:18px;top:17px;width:56px;height:56px;border-radius:18px;overflow:hidden;font:500 2rem var(--display);transform:rotate(6deg);z-index:1}
.studio-badge img{display:block;width:100%;height:100%;object-fit:cover}
.studio-count{font-size:.63rem;letter-spacing:.1em;margin:4px 60px 7px;color:#68816b}
.studio-name{font:500 1.55rem var(--display);margin:0 55px 14px}
.studio-call{font:500 2.6rem/1.15 var(--display);margin:6px 0 9px;color:#a6502e}
.studio-prompt{font-size:.9rem;line-height:1.5;max-width:350px;margin:0 auto}
.studio-wave{display:flex;align-items:center;justify-content:center;gap:3px;height:48px;margin:12px 0 0}
.studio-wave i{display:block;width:4px;border-radius:5px;background:#95b68a;max-height:44px}
.sound-studio[data-recording=true] .studio-wave i{background:#4b8863;transition:height .08s linear}
/* Waveform and meter now use actual microphone samples, never decorative animation. */
.studio-meter{margin:16px auto 0;max-width:430px;text-align:left;padding:12px 14px;border-radius:14px;background:#eaf0df}
.studio-meter[hidden],.studio-auto-next[hidden],.studio-input-meter[hidden]{display:none}
.studio-meter-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.85rem;font-weight:700}
.studio-elapsed{font-variant-numeric:tabular-nums;white-space:nowrap}
.studio-input-meter{margin-top:9px;height:13px;overflow:hidden;border-radius:7px;background:#cbd9bf}
.studio-input-meter>span{display:block;height:100%;width:0;background:#438459;border-radius:inherit;transition:width .08s linear}
.studio-input-meter[data-level=loud]>span{background:#b6502e}
.studio-mic-name{font-size:.75rem;line-height:1.3;margin:7px 0 0;overflow-wrap:anywhere;color:#58715a}
.studio-take-length{font-size:.85rem;font-weight:700;margin:0;color:#356e4b;min-height:1.2em}
.studio-auto-next{font-size:.9rem;font-weight:700;margin:8px 0;color:#245747}
.studio-record-actions [data-studio=stay]{border:2px solid #4b8863;background:#edf3df}
.studio-status{min-height:38px;max-width:430px;margin:3px auto 10px;font-size:.82rem;line-height:1.5;color:#597461}
.studio-record-actions,.studio-extra-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.studio-record-actions button{min-width:160px;min-height:50px;border-radius:26px;font-size:1rem}
.studio-record-actions .studio-next{background:#245747;color:#fffdf1;border-color:#245747}
.studio-options{max-width:600px;margin:0 auto;text-align:left}
.studio-options>summary{text-align:center;cursor:pointer;padding:12px;text-decoration:underline;text-underline-offset:4px;font-size:.9rem}
.studio-options .studio-sound-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-height:none;margin:12px 0}
.studio-extra-actions{margin-top:18px}
.studio-playback-retry{margin-bottom:16px}
.studio-record-actions .studio-record{background:#b75635;border-color:#b75635;color:#fffdf1;border-radius:30px;padding-inline:23px}
.studio-record-actions [data-studio=accept],.studio-start-actions .studio-start{background:#245747;border-color:#245747;color:#fffdf1}
.studio-record-actions [data-studio=stop]{background:#ffe0cc;border-color:#c27855}
.studio-step-actions{display:flex;justify-content:space-between;margin-top:15px;border-top:1px solid #e2e7d7;padding-top:6px}
.studio-step-actions button,.studio-forget{border-color:transparent;background:transparent;padding-inline:0}
.studio-footer{text-align:center;margin-top:20px}
.studio-ready{font-size:.85rem;margin:0 0 12px}
.studio-start-actions .studio-start{padding:12px 24px;border-radius:30px}
.studio-privacy{max-width:650px;font-size:.875rem;line-height:1.6;color:#687d6b;margin:12px auto 0}
.sound-studio .studio-forget{font-size:.7rem;min-height:32px;text-decoration:underline;text-underline-offset:3px}
#make-story-sounds{width:100%;margin-top:10px}
#use-story-sounds,#story-effects{width:22px;height:22px;accent-color:#245747}
#reader[data-personal-sound=true] #listen-reader{background:#9a4b2e;box-shadow:0 0 0 4px #f1d3ad}
.reader-sound-caption{font-size:.8rem;color:#9a4b2e;margin:12px 0 0}
.reader-sound-caption[hidden]{display:none}
@media(max-width:650px){
  #reader[data-studio-open=true]{width:100%}
  .sound-studio{padding:16px 17px 24px}
  .studio-heading h3{font-size:1.85rem}
  .studio-workbench{display:flex;flex-direction:column;gap:12px}
  .studio-visual{width:100%}.studio-picture-frame{width:100%}.studio-picture-caption{display:none}.studio-card{width:100%}
  .studio-sound-menu{flex-direction:row;max-height:none;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x proximity}
  .studio-sound-menu button{width:150px;min-height:62px;font-size:.75rem;scroll-snap-align:start;column-gap:7px;grid-template-columns:30px 1fr;padding:7px}
  .studio-sound-menu button>span{width:30px;height:32px}
  .studio-card{padding:18px 14px 9px}
  .studio-name{font-size:1.35rem;margin-inline:35px}
  .studio-badge{width:40px;height:40px;right:12px;top:13px}
  .studio-call{font-size:2.2rem}
  .studio-count{margin-inline:35px}
  .studio-wave{gap:2px}
  .studio-footer{margin-top:17px}
  .studio-options .studio-sound-menu button{width:auto}
  .studio-record-actions button{min-width:130px;flex:1}
}
@media(prefers-reduced-motion:reduce){.sound-studio[data-recording=true] .studio-wave i,.studio-input-meter>span{transition:none}}