.narration-player{border:1px solid #d9cfbd;border-radius:14px;background:#f1eadf;padding:14px;margin:12px 0;color:#30271e;min-width:0}
.narration-player[hidden]{display:none!important}
.narration-gap-note{font-size:13px;line-height:1.6;color:#615342;border-left:3px solid #a48a58;padding:6px 10px;margin:10px 0;overflow-wrap:anywhere}.narration-gap-note[hidden]{display:none}
.narration-caption{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}.narration-caption small{font-size:11px;color:#716250}
.narration-options,.narration-controls,.narration-sections{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.narration-options label{flex:1;min-width:110px}.narration-player label{display:flex;flex-direction:column;font-size:12px;gap:4px}.narration-player select{font:inherit;min-height:44px;width:100%;padding:6px;border-radius:8px;background:#fff;color:#30271e;border:1px solid #cfc6b8}
.narration-controls{margin-top:10px}.narration-controls [data-play]{flex:1;background:#7a1f2b;color:#fff;border-color:#7a1f2b;font-weight:650}.narration-player button{font:inherit;cursor:pointer;min-height:44px;border:1px solid #d9cfbd;border-radius:8px;padding:6px 12px;background:white;color:#30271e}
.narration-player audio{display:block;width:100%;max-width:100%;margin:8px 0!important}.narration-sections{justify-content:space-between;font-size:12px}.narration-player button:disabled{opacity:.4;cursor:default}.narration-status{font-size:12px;margin:6px 0;min-height:1.4em}.narration-player summary{cursor:pointer;font-size:13px;padding:6px 0}.narration-transcript{max-height:180px;overflow:auto;overscroll-behavior:contain;position:relative}.narration-transcript p{margin:6px 0;border-left:3px solid transparent;padding-left:5px}.narration-transcript button{text-align:left;font-size:15px;line-height:1.7;background:transparent;border:0;width:100%;white-space:pre-wrap}.narration-transcript .is-reading{background:#fff7d8;border-color:#9d7028;border-radius:6px}.narration-player :focus-visible{outline:3px solid #aa7e2e;outline-offset:2px}
.artifact-reader>.narration-player{margin:0;border-radius:0;flex-shrink:0;max-height:32dvh;overflow:auto;padding:10px 20px}.artifact-reader>.narration-player .narration-options{display:inline-flex;vertical-align:middle;width:min(420px,100%)}.artifact-reader>.narration-player .narration-controls{display:inline-flex;vertical-align:middle;margin:0 10px;width:min(310px,100%)}.artifact-reader>.narration-player audio{max-width:620px}.artifact-reader>.narration-player .narration-sections{max-width:620px}
.narration-studio{background:#fff;border:1px solid #e2dacd;border-radius:20px;padding:clamp(18px,3vw,34px)}.narration-studio h2{font:700 clamp(25px,3vw,38px)/1.2 Georgia,serif;margin:12px 0}.narration-studio header p{color:#756959}.narration-variants,.narration-actions{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.narration-variants .btn{font-size:13px}.narration-notice{background:#f5eddb;padding:14px;border-radius:10px;margin:16px 0;font-size:14px}.narration-columns{display:grid;grid-template-columns:minmax(180px,1fr) minmax(300px,1.7fr);gap:28px}.narration-source{display:block;width:100%;height:auto;max-height:760px;object-fit:contain;background:#f1ede5;border-radius:12px}.narration-draft textarea{resize:vertical;min-height:340px;width:100%;font-size:17px;line-height:1.7}.narration-draft small{display:block;color:#716250}.narration-check{display:flex;gap:10px;align-items:flex-start;margin:16px 0}.narration-check input{margin-top:5px;flex-shrink:0}.narration-studio button{min-height:44px;cursor:pointer;border-radius:8px;padding:8px 12px}.narration-studio button:disabled{opacity:.4;cursor:default}.narration-studio progress{width:100%;height:14px;accent-color:#7a1f2b}.narration-preview{border-top:1px solid #e2dacd;margin-top:24px;padding-top:12px}.narration-studio details{margin-top:20px}.narration-studio summary{cursor:pointer}
@media(max-width:800px){.narration-columns{grid-template-columns:1fr}.narration-source{max-height:350px}.artifact-reader>.narration-player{max-height:30dvh;padding:8px 12px}.artifact-reader>.narration-player .narration-controls{margin:8px 0}.narration-options label{min-width:100px}}