/* Graphite, blue and forsythia: a calm workspace around the phone preview. */
@font-face {
  font-family: 'Shorts Heading';
  src: url('/api/studio/caption-fonts/pretendard') format('opentype');
  font-weight: 700 900;
  font-display: swap;
}
:root {
  --blue: #2854e8;
  --ink: #222936;
  --muted: #687283;
  --line: #dfe3e9;
  --light: #edf1ff;
  --canvas: #eef0f3;
  --yellow: #ffda38;
  --yellow-soft: #fff6c9;
  --card-shadow: 0 3px 5px #202b3e02, 0 12px 28px #202b3e04;
}
body { background: var(--canvas); color: var(--ink); -webkit-font-smoothing: antialiased; }
h1, h2, h3, .brand { font-family: 'Shorts Heading', 'Apple SD Gothic Neo', sans-serif; }
header { height: 72px; padding: 0 3%; border-color: var(--line); gap: 20px; background: #ffffffef; backdrop-filter: blur(16px); }
.brand { font-size: 24px; letter-spacing: -.9px; gap: 10px; }
.brand .logo { width: 36px; height: 36px; border: 0; border-radius: 12px; background: var(--blue); color: var(--yellow); font-size: 14px; padding-left: 2px; box-shadow: 0 4px 10px #2854e81a; }
header nav { gap: 8px; font-size: 13px; }
header nav>a { padding: 12px 15px; border-radius: 12px; color: #6a6e79; font-weight: 600; }
header nav>a.active { color: var(--blue); background: var(--light); box-shadow: inset 0 -3px 0 var(--yellow); }
header nav>a:hover { color: var(--blue); background: #f6f8ff; }
header .account { gap: 14px; font-size: 12px; color: #6d7280; }
header .account>a:first-child { color: #3a4050; font-weight: 600; }
.primary { border-radius: 12px; background: var(--blue); }
.outline-button { border-color: #e1e5ed; border-radius: 12px; color: #4e5869; }
.pill, .design-eyebrow { color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .7px; }
.pill { background: var(--light); border: 0; border-radius: 8px; padding: 7px 11px; }
.design-eyebrow { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.design-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--yellow); box-shadow: 0 0 0 3px #ffda3820; }
.panel, .toolbox, .guide-step, .plan { border: 1px solid var(--line); background: white; border-radius: 24px; box-shadow: var(--card-shadow); }
input, select, textarea { accent-color: var(--blue); }
textarea, input[type=text], input[type=email], select { border-color: #dfe3ea; background: #f8f9fb; border-radius: 12px; }
textarea:focus, input:focus, select:focus { border-color: #8bacff; outline: 2px solid #2d65f719; }
button, a, input, select, summary { touch-action: manipulation; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #91b0ff; outline-offset: 3px; }
button:disabled { cursor: not-allowed; }
footer { background: white; border-top: 0; color: #7b8190; padding: 32px 20px; line-height: 1.7; }

/* Four independently readable cards around the preview. */
.studio-workbar { max-width: 1500px; padding: 24px 36px 24px; align-items: center; }
.studio-workbar h1 { font-size: 29px; line-height: 1.25; letter-spacing: -1.2px; margin: 0; gap: 12px; }
.studio-workbar h1 small { font-family: 'Apple SD Gothic Neo', sans-serif; background: #ebedf2; color: #717684; font-size: 11px; padding: 5px 8px; border-radius: 6px; }
.studio-workbar>div>p { display: block; color: #687283; font-size: 13px; margin: 8px 0 0; }
.workbar-actions { gap: 12px; }
.workbar-actions>a { font-size: 12px; color: #697384; padding: 10px 4px; }
.workbar-actions>button { background: white; border-color: #dfe4ef; color: #505d72; min-height: 40px; }
.workbar-actions>#saveDraftQuick { background: var(--blue); color: white; border-color: var(--blue); box-shadow: 0 3px 8px #2854e814; }
.studio { max-width: 1500px; padding: 0 36px 36px; gap: 30px; }
.studio>.panel { background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 0; }
.studio-source, .studio-script, .studio .voice-area, .studio .caption-settings, .studio-extra {
  border: 1px solid var(--line); border-radius: 20px; background: white; box-shadow: var(--card-shadow); padding: 22px;
}
.studio-source, .studio-script, .studio .voice-area { margin-bottom: 16px; }
.studio .step-title { font-size: 15px; margin: 0 0 18px; gap: 9px; color: #343943; }
.step-title .num { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border-radius: 8px; font-size: 11px; color: var(--blue); background: var(--light); border: 1px solid #dce4ff; }
.studio-source .step-title .num { background: var(--yellow-soft); color: #635014; border-color: #f3e6a7; }
.step-title .count { color: #7d8798; background: #f5f6f9; font-size: 11px; }
.studio small.tag { font-size: 10px; font-family: 'Apple SD Gothic Neo', sans-serif; padding: 4px 6px; font-weight: 600; }
.studio .source-gallery { gap: 8px; }
.studio .source-gallery .upload.mini { height: 90px; min-height: 90px; padding: 12px 5px; border: 1.5px dashed #bdc9e5; background: #f6f8fe; border-radius: 14px; color: #66778f; transition: background .18s, border-color .18s; }
.studio .source-gallery .upload.mini:hover { background: #edf2ff; border-color: var(--blue); }
.studio .source-gallery .upload.mini>span:first-child { color: var(--blue); font-size: 26px; line-height: 28px; }
.studio .source-gallery .upload.mini>strong { color: #4f68a2; font-size: 11px; }
.studio .source-gallery .upload.mini:only-child { grid-column: 1 / -1; height: 140px; gap: 5px; }
.studio .source-gallery .upload.mini:only-child>span:first-child { display: grid; place-items: center; width: 38px; height: 38px; background: var(--blue); color: var(--yellow); border-radius: 12px; font-size: 26px; margin-bottom: 4px; box-shadow: 0 4px 10px #2854e819; }
.studio .source-gallery .upload.mini:only-child>strong { font-size: 13px; }
.studio .source-gallery .upload.mini>span:last-child { font-size: 10px; }
.studio .source-limit { font-size: 10px; color: #7c8494; margin-top: 12px; }
.studio .source-order-note { font-size: 10px; color: #7c8494; line-height: 1.7; margin-top: 5px; }
.studio .source-finder-actions { gap: 8px; }
.studio #openSourceFinder, .studio #openCaptionCleaner { font-size: 11px; border-radius: 10px; padding: 10px 7px; min-height: 36px; }
.studio .studio-script { display: block; }
.script-entry-tabs { padding: 4px; background: #f4f5f8; border-radius: 12px; margin-bottom: 18px; }
.studio .segmented button { min-height: 34px; font-size: 12px; border-radius: 9px; color: #7e8592; }
.studio .segmented button.selected { color: var(--blue); font-weight: 700; background: white; box-shadow: 0 2px 6px #202b4a0c; }
.free-script-hint, #freeScriptStatus { font-size: 12px; color: #6f7a8e; line-height: 1.8; }
#freeScriptStatus { background: #f8faff; border: 1px solid #edf1fa; border-radius: 12px; padding: 15px; margin: 16px 0; }
.script-request-error { background: #fff5ee; border: 1px solid #f0d5bd; border-radius: 10px; color: #82401e; padding: 12px; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.free-script-notes summary, .script-assistant summary, .studio-extra summary, .caption-quick-styles summary { font-size: 11px; color: #65748b; }
.free-script-card { border-radius: 14px; padding: 16px; }
.free-script-card p { font-size: 13px; }
.studio .studio-script textarea#script { font-size: 14px; line-height: 1.9; padding: 15px 15px 34px; border-radius: 14px; min-height: 220px; }
.studio .studio-script .textwrap { height: auto; }
.studio .script-hint { font-size: 11px; }
.studio-extra { padding: 17px 22px; }
.studio-extra summary { font-size: 12px; }
.studio .caption-settings .labelrow { margin-bottom: 20px; }
.studio .caption-settings .step-title { margin-bottom: 0; }
.studio .caption-settings .check { color: #7a8393; font-size: 11px; }
.caption-custom-controls { gap: 12px; }
.caption-custom-controls label { font-size: 12px; color: #657185; }
.caption-font-label select { font-size: 13px; padding: 11px; background: #fafbfe; }
.range-label output { font-size: 11px; color: var(--blue); background: var(--light); padding: 4px 8px; }
.caption-custom-controls input[type=range] { min-height: 20px; }
.caption-color-row { gap: 8px; }
.caption-color-row label { font-size: 11px; padding: 10px 8px; background: #fcfdff; border-radius: 10px; }
.caption-position { margin-top: 2px; }
.caption-line-count select { padding: 10px 8px; font-size: 12px; }
.caption-quick-styles { padding-top: 16px; margin-top: 8px; }

/* Typecast portraits remain recognisable, with a clear in-place selection. */
.studio .voice-area { height: auto; overflow: visible; display: flex; }
.studio .voice-area>.step-title { margin-bottom: 16px; }
.studio .voice-search input#voiceSearch { height: 38px; padding-left: 32px; font-size: 12px; border-radius: 10px; background: #fafbfe; }
.studio .voice-filter-row { gap: 7px; margin-bottom: 8px; }
.studio .voice-filter-row>span { font-size: 11px; color: #798294; }
.studio .voice-filter-row button { min-height: 28px; border-radius: 7px; font-size: 10px; padding: 5px 7px; background: #fafbfe; }
.studio .voice-filter-row button.active { background: #eaf0ff; border-color: #c8d7ff; color: var(--blue); }
.studio .voice-results { font-size: 11px; margin: 4px 0 10px; }
.studio .voice-results button { font-size: 10px; color: #818b9a; }
.studio .voice-area #tcVoices.voice-grid { flex: none; height: clamp(286px,34dvh,380px); min-height: 286px; max-height: 380px!important; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; gap: 8px; padding: 2px; scrollbar-width: thin; scrollbar-color: #d7deec transparent; }
.studio .voice-card { min-height: 90px; border-radius: 14px; border-color: #e5e8ee; background: #fafbfc; transition: background .18s, border-color .18s; }
.studio .voice-card:hover { border-color: #b9c9f7; background: #f2f5fd; }
.studio .voice-pick { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 9px 5px 10px; text-align: center; min-height: 88px; }
.voice-face { position: relative; display: block; width: 46px; height: 46px; flex-shrink: 0; border: 1px solid #e6ecf6; border-radius: 50%; overflow: hidden; background: #f0f4fc; }
.studio .voice-pick .voice-face .voice-portrait { width: 100%; height: 100%; border-radius: 0; margin: 0; object-fit: cover; object-position: center top; transform: scale(1.45); transform-origin: 50% 20%; }
.studio .voice-pick .voice-face .voice-image-missing { display: grid; place-items: center; transform: none; font-size: 14px; }
.studio .voice-card-label { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 16px; }
.studio .voice-card-name { display: inline; font-size: 12px; padding: 0; }
.studio .voice-card-meta { display: inline; font-size: 11px; color: #7b8697; }
.studio .voice-card>.voice-sample { position: absolute; left: calc(50% + 10px); right: auto; top: 37px; display: grid; place-items: center; width: 24px; height: 24px; min-height: 24px; padding: 0; border: 2px solid white; border-radius: 50%; background: #edf2ff; color: var(--blue); font-size: 10px; box-shadow: 0 1px 5px #28416a15; }
.studio .voice-card>.voice-sample>span:first-child { font-size: 8px; }
.studio .voice-card>.voice-sample .sample-label { display: none; }
.studio .voice-card.selected { background: #edf2ff; border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.studio .voice-card.selected .voice-chosen-mark { background: var(--yellow); color: #28334d; border: 1px solid #e9c52f; }
.studio .voice-card.selected>.voice-sample { background: #e4edff; color: var(--blue); }
.voice-advanced { font-size: 11px; }
.voice-advanced summary { padding: 7px; }

/* Hardware lives outside the exact 9:16 content box, so captions stay aligned. */
.studio .preview-col { padding: 2px 12px 0; justify-content: flex-start; }
.studio .preview-main { max-width: 380px; min-width: 0; }
.preview-label { padding: 0 2px; margin-bottom: 14px; color: #3c4557; font-size: 13px; font-weight: 700; }
.preview-label>span { display: flex; align-items: center; gap: 7px; }
.preview-label>span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.preview-label small { color: #647083; background: #e4e8ef; padding: 5px 8px; border-radius: 6px; font-size: 10px; font-weight: 600; letter-spacing: .3px; }
.phone-device { position: relative; width: min(100%,360px); padding: 26px 8px 16px; border: 2px solid #949ba6; border-radius: 40px; background: #20242c; box-shadow: inset 0 0 0 2px #060910, 0 0 0 1px #252a35, 0 22px 35px -16px #1c263d55, 0 6px 12px #1c263d14; }
.phone-device::before, .phone-device::after { content: ''; position: absolute; width: 3px; background: linear-gradient(90deg,#6b7380,#272d37); border-radius: 2px; pointer-events: none; }
.phone-device::before { left: -5px; top: 98px; height: 34px; box-shadow: 0 43px 0 #454c58; }
.phone-device::after { right: -5px; top: 132px; height: 55px; }
.device-camera { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; height: 9px; pointer-events: none; }
.device-camera::before { content: ''; width: 40px; height: 4px; border-radius: 8px; background: #070a10; box-shadow: 0 1px 0 #ffffff0c; }
.device-camera::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #15243a; border: 2px solid #080c13; box-shadow: inset 1px 1px 0 #59759166; }
.device-home { position: absolute; bottom: 6px; left: 50%; width: 27%; height: 3px; border-radius: 5px; background: #868d99; transform: translateX(-50%); pointer-events: none; }
.studio .phone-device .phone { width: 100%; max-width: none; border: 0; outline: 0; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px #05070b; flex-shrink: 0; aspect-ratio: 9 / 16; }
.empty-preview { position: absolute; inset: 0; padding: 28px 20px; color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; background: linear-gradient(155deg,#fff 28%,#f0f3fc 100%); }
.empty-preview .preview-brand { position: absolute; top: 24px; left: 22px; color: var(--blue); font-family: 'Shorts Heading',sans-serif; font-size: 12px; letter-spacing: -.3px; }
.empty-preview .preview-art { display: grid; place-items: center; width: 102px; height: 102px; margin: 0 0 25px; }
.preview-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.empty-preview strong { font-family: 'Shorts Heading',sans-serif; font-size: 27px; font-weight: 700; line-height: 1.45; letter-spacing: -1.1px; }
.empty-preview small { margin-top: 15px; font-size: 12px; line-height: 1.8; color: #8a92a3; }
.empty-preview .preview-flow { display: flex; gap: 6px; position: absolute; bottom: 25px; font-size: 10px; color: #60709b; }
.empty-preview .preview-flow span { padding: 6px 9px; background: #e8edf9; border-radius: 7px; font-size: 10px; }
.empty-preview .preview-flow span:first-child { background: var(--yellow-soft); color: #74601e; }
.preview-flow i { font-style: normal; align-self: center; color: #b0bdd8; }
.preview-main>.caption-preview-controls { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 10px; margin-top: 18px; max-width: none; }
.caption-preview-controls label { margin: 0; font-size: 11px; color: #657185; }
.caption-preview-controls select { min-width: 0; margin: 0; background: #ffffffc9; border-color: #d7dde7; border-radius: 10px; font-size: 12px; padding: 10px 11px; }
.studio .generate { max-width: 380px; min-height: 50px; margin-top: 12px; border-radius: 13px; background: var(--yellow); border-color: #edc82e; color: #2a2d36; font-size: 15px; font-weight: 800; box-shadow: 0 4px 0 #d8b429, 0 8px 18px #56471512; transition: background .15s, box-shadow .15s; }
.studio .generate:hover { background: #ffe15a; box-shadow: 0 4px 0 #d8b429, 0 10px 22px #56471520; }
.studio .generate:active { box-shadow: 0 1px 0 #d8b429; }
.studio .generate:disabled { opacity: .6; box-shadow: none; }
.generation-hint { color: #6e788a; font-size: 10px; line-height: 1.8; margin-top: 13px; }
.studio .video-template { border-radius: 12px; background: #fafbfc; transition: border-color .18s, background .18s; }
.studio .video-template.selected { border-color: var(--blue); background: var(--light); color: var(--blue); }
.studio .preview-settings { max-width: 380px; font-size: 11px; margin-top: 16px; border: 0; padding: 0 0 15px; }
.studio .preview-settings[open] { border: 1px solid #e1e8f2; padding: 10px; }
.history { max-width: 1428px; border-top: 1px solid #e4e8f0; padding: 35px 0 10px; margin: 25px 36px 40px; }
.history .section-head h2 { font-size: 23px; }
.history .section-head p { font-size: 12px; color: #8a92a1; }
.empty { background: #fff; border: 1px dashed #d9e1ef; border-radius: 20px; padding: 38px 20px; color: #7b8699; }

/* The same visual language on the work home, library and supporting pages. */
.workspace-home { max-width: 1180px; padding-top: 66px; }
.workspace-home>h1 { font-size: 47px; letter-spacing: -2px; line-height: 1.35; margin: 19px 0 16px; }
.workspace-home>p { font-size: 15px; color: #7c8392; }
.workspace-start { gap: 22px; margin: 38px 0 30px; }
.workspace-start>a { border: 1px solid #edf0f5; border-radius: 26px; padding: 31px 28px; background: white; box-shadow: var(--card-shadow); }
.workspace-step { width: 44px; height: 44px; background: #edf2ff; color: var(--blue); border-radius: 14px; font-size: 13px; }
.workspace-start h2 { font-size: 23px; margin-top: 27px; letter-spacing: -.7px; }
.workspace-start p { color: #7b8596; font-size: 13px; }
.workspace-start strong { font-size: 13px; margin-top: 27px; }
.workspace-metrics { background: #eff3fb; border: 0; border-radius: 20px; padding: 23px; }
.workspace-metrics strong { color: var(--blue); }
.workspace-recent>button { background: white; border-color: #e8edf5; border-radius: 16px; padding: 20px; }
.page-title { margin: 55px 20px 34px; }
.page-title h1 { font-size: 40px; letter-spacing: -1.6px; }
.page-title p { color: #7b8595; font-size: 14px; }
.library-tabs { gap: 8px; }
.library-tabs>a:not(.primary) { background: #edeff5; border-radius: 11px; padding: 12px 18px; }
.library-tabs>a.selected { background: #e5edff; color: var(--blue); }
.library-tabs .primary { padding: 13px 18px; border-radius: 11px; }
.library-toolbar { padding: 15px 18px; background: #fff; border: 1px solid #e9edf5; border-radius: 14px; }
.video-card { border-color: #e6ebf4; border-radius: 20px; box-shadow: var(--card-shadow); }
.video-card-body { padding: 19px; }
.video-card h3 { font-size: 15px; }
.video-card p { font-size: 11px; }
.card-actions { font-size: 12px; padding-top: 15px; }
.tool-links a { border: 1px solid #e8edf5; border-radius: 20px; padding: 24px; background: #fff; }
.workspace-tools>.panel { border-radius: 22px; padding: 26px; }
.hero { background: var(--canvas); padding: 85px 20px; }
.hero h1 { letter-spacing: -2.6px; }
.showcase { background: white; }
.guide-article, .faq { line-height: 1.8; }
.account-page .panel { border-radius: 26px; }
dialog { border-color: #e2e8f3; border-radius: 24px; }
dialog::backdrop { background: #2435534d; backdrop-filter: blur(3px); }

@media (min-width:1024px) {
  .studio { grid-template-columns: minmax(265px,310px) minmax(310px,1fr) minmax(280px,320px); grid-template-rows: auto; height: auto; align-items: start; }
  .studio>.panel { height: auto; overflow: visible; align-self: start; }
  .studio>.source-panel, .studio>.right-panel { display: block; }
  .studio .preview-col { height: auto; max-height: calc(100dvh - 110px); position: sticky; top: 92px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #b8c4d8 transparent; scroll-padding-block: 12px; padding-bottom: 12px; }
  .studio .preview-col>.preview-main, .studio .preview-col>.preview-settings { flex-shrink: 0; }
  .studio .phone-device { width: min(100%,360px,calc((max(850px,100dvh) - 430px) * .5625 + 20px)); }
}
@media (min-width:1024px) and (max-width:1199px) {
  header { gap: 14px; padding: 0 24px; }
  header nav { gap: 2px; }
  header nav>a { padding: 11px 9px; font-size: 12px; }
  header .account { font-size: 11px; gap: 9px; }
  .studio-workbar { padding: 26px 24px 22px; }
  .studio { padding: 0 24px 30px; gap: 20px; grid-template-columns: 270px minmax(260px,1fr) 280px; }
  .studio-source, .studio-script, .studio .voice-area, .studio .caption-settings { padding: 18px; }
  .studio .preview-col { padding: 2px 4px 0; }
  .studio .phone-device { width: 100%; }
  .studio .step-title { font-size: 14px; }
  .empty-preview strong { font-size: 24px; }
}
@media (max-width:1023px) {
  header { height: 72px; padding: 0 24px; }
  header nav>a { padding: 10px 8px; font-size: 12px; }
  header .account { font-size: 11px; gap: 8px; }
  .studio-workbar { max-width: 760px; padding: 30px 20px 22px; }
  .studio-workbar h1 { font-size: 28px; }
  .studio-workbar>div>p { font-size: 12px; }
  .studio { display: flex; max-width: 760px; padding: 0 20px 30px; gap: 24px; height: auto; }
  .studio>.source-panel { display: block; }
  .studio>.right-panel { order: 2; }
  .studio>.preview-col { order: 1; padding: 12px 0; }
  .studio .preview-main, .studio .preview-settings { max-width: 360px; }
  .studio .phone-device { width: min(100%,340px); }
  .studio .voice-area #tcVoices.voice-grid { height: 320px; max-height: 320px!important; }
  .studio .voice-area { padding: 22px; }
  .studio .voice-filter-row button { min-height: 34px; padding: 7px 10px; font-size: 11px; }
  .history { margin: 12px 20px 35px; }
}
@media (max-width:760px) {
  header { min-height: 70px; height: auto; flex-wrap: wrap; padding: 15px 20px!important; gap: 10px; }
  .brand { font-size: 22px; }
  .brand .logo { width: 32px; height: 32px; border-radius: 10px; font-size: 12px; }
  #mobile { margin-left: auto; width: 38px; height: 38px; border-radius: 10px; font-size: 22px; color: #4c5a72; }
  header .account { order: 4; width: 100%; justify-content: flex-end; margin-top: 0; font-size: 11px; gap: 16px; }
  header nav { top: 100%; padding: 16px; gap: 6px; border-bottom: 1px solid #e7edf8; box-shadow: 0 12px 22px #1a33560a; }
  header nav>a { padding: 12px 15px; font-size: 13px; }
  .studio-workbar { padding: 26px 18px 20px; display: block; }
  .studio-workbar h1 { font-size: 28px; }
  .studio-workbar>div>p { font-size: 12px; line-height: 1.7; }
  .design-eyebrow { font-size: 10px; margin-bottom: 10px; }
  .workbar-actions { margin-top: 18px; gap: 8px; }
  .workbar-actions>button { min-height: 38px; padding: 10px 14px; font-size: 12px; }
  .workbar-actions>a { display: block; margin-left: auto; order: 3; font-size: 11px; }
  .studio { padding: 0 16px 25px; gap: 20px; }
  .studio-source, .studio-script, .studio .voice-area, .studio .caption-settings { border-radius: 20px; padding: 21px; }
  .studio .step-title { font-size: 16px; }
  .studio .source-gallery .upload.mini:only-child { height: 155px; }
  .studio .source-gallery .upload.mini:only-child>strong { font-size: 14px; }
  .studio .source-gallery .upload.mini>span:last-child { font-size: 11px; }
  .studio .source-limit, .studio .source-order-note { font-size: 11px; }
  .studio #openSourceFinder, .studio #openCaptionCleaner { font-size: 12px; min-height: 40px; }
  .free-script-hint, #freeScriptStatus { font-size: 13px; }
  .studio .studio-script textarea#script { font-size: 16px; }
  .caption-custom-controls { gap: 14px; }
  .caption-custom-controls label { font-size: 13px; }
  .caption-color-row label { font-size: 11px; }
  .caption-font-label select, .caption-line-count select { font-size: 14px; }
  .studio .preview-main { max-width: 330px; width: calc(100% - 20px); }
  .studio .preview-settings { max-width: 330px; }
  .empty-preview strong { font-size: 28px; }
  .studio .voice-pick { padding: 9px 5px 10px; }
  .studio .voice-card-name { font-size: 12px; }
  .studio .voice-card-meta { font-size: 11px; }
  .workspace-home { padding: 38px 20px; }
  .workspace-home>h1 { font-size: 34px; letter-spacing: -1.4px; }
  .workspace-home>p { font-size: 13px; }
  .workspace-start { grid-template-columns: 1fr; gap: 14px; margin-top: 27px; }
  .workspace-start>a { padding: 24px; border-radius: 22px; }
  .workspace-start h2 { font-size: 21px; margin-top: 20px; }
  .workspace-start strong { margin-top: 18px; }
  .workspace-metrics { padding: 18px 12px; }
  .page-title { margin-top: 36px; }
  .page-title h1 { font-size: 32px; }
  .page-title p { font-size: 13px; }
  .library-tabs { gap: 7px; flex-wrap: wrap; }
  .library-tabs>a:not(.primary) { padding: 11px 13px; font-size: 12px; }
  .library-tabs .primary { padding: 11px 13px; font-size: 12px; }
  .video-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .video-card-body { padding: 13px; }
  .video-card h3 { font-size: 13px; }
  .card-actions { gap: 8px; flex-wrap: wrap; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto!important; transition: none!important; }
}

/* Keep listening and cue editing beside the preview, without popup menus. */
.narration-preview { width:100%; margin:18px 0 0; padding:13px; border:1px solid #d7deed; border-radius:14px; background:#fff; text-align:left; }
.narration-play { display:block; width:100%; padding:11px 10px; border-radius:9px; background:#2854e8; color:#fff; font-size:12px; font-weight:700; }
.narration-play:disabled { background:#dce3ee; color:#78859a; cursor:default; }
#ttsStatus { margin:8px 0 0; font-size:11px; line-height:1.6; color:#657185; overflow-wrap:anywhere; }
#ttsStatus.is-error { color:#a63d21; background:#fff2e9; padding:9px; border-radius:8px; }
.narration-preview audio { display:block; width:100%; height:34px; margin-top:10px; }
.narration-preview a { display:block; margin-top:7px; color:#2854e8; font-size:11px; }
.preview-main>.caption-preview-controls { display:block; margin-top:12px; padding:13px; border:1px solid #d8dfe9; border-radius:14px; background:#ffffffc9; }
.caption-cue-header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px; }
.caption-cue-header strong { font-size:12px; color:#33425c; }
.caption-cue-header>div { display:flex; align-items:center; gap:8px; }
.caption-cue-header button { width:30px; height:30px; border-radius:8px; background:#edf1f9; color:#2854e8; font-size:22px; line-height:1; }
.caption-cue-header button:disabled { opacity:.35; cursor:default; }
#captionCueCount { font-size:11px; min-width:37px; text-align:center; font-variant-numeric:tabular-nums; }
#captionCueEdit { display:block; width:100%; height:76px; min-height:66px; max-height:180px; resize:vertical; border:1px solid #d7deea; border-radius:8px; padding:10px; background:#fff; color:#23314b; font:inherit; font-size:13px; line-height:1.65; }
#captionCueEdit:focus { outline:2px solid #adc1ff; outline-offset:1px; border-color:#2854e8; }
.caption-cue-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:8px; }
.caption-cue-actions small { width:100%; color:#778297; font-size:10px; line-height:1.5; }
.caption-cue-actions button { padding:7px 11px; border-radius:7px; background:#2854e8; color:white; font-size:11px; }
.caption-cue-actions button:disabled { background:#e9edf4; color:#94a0b1; }
#cancelCaptionEdit { background:#edf1f7; color:#526078; }
.narration-preview[hidden], .narration-preview [hidden], .caption-preview-controls[hidden], .caption-preview-controls [hidden] { display:none!important; }
.result-edit-note { display:block; margin:8px 0 12px; color:#657185; font-size:11px; line-height:1.6; }

/* Shared narration and caption pace, kept beside the listening controls. */
.speech-speed-control{margin-top:14px;padding:13px 0 3px;border-top:1px solid #e4e8f0;text-align:left}
.speech-speed-control>div:first-child{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;color:#334155}
.speech-speed-control output{background:#fff3ba;color:#554516;border-radius:7px;padding:4px 8px;font-variant-numeric:tabular-nums}
.speech-speed-control input[type=range]{width:100%;margin:12px 0;accent-color:#354fe3;cursor:pointer}
.speech-speed-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.speech-speed-presets button{padding:7px 2px;border:1px solid #e1e6ef;border-radius:8px;background:#f6f8fc;color:#667085;font-size:10px}
.speech-speed-presets button small{display:block;margin-top:2px;font-size:9px}
.speech-speed-presets button[aria-pressed=true]{background:#edf1ff;color:#304bd7;border-color:#8ca0ff;font-weight:700}
.speech-speed-control>small{display:block;margin-top:8px;font-size:10px;line-height:1.5;color:#7b8798}