.atelier-theatre { --atelier-paper:#f5f2e9; --atelier-ink:#242922; --atelier-red:#9a3325; --atelier-green:#244d39; box-sizing:border-box; position:relative; width:min(100%,76rem); margin:3rem auto; color:var(--atelier-ink); background:var(--atelier-paper); border:1px solid #c9c2b4; box-shadow:0 1.2rem 4rem rgb(36 41 34 / .12); overflow:clip; font:400 1rem/1.55 system-ui,sans-serif; }
.atelier-theatre * { box-sizing:border-box; }
.atelier-theatre button,.atelier-theatre input,.atelier-theatre select { font:inherit; }
.atelier-theatre button,.atelier-theatre select { min-height:44px; }
.atelier-theatre button { color:inherit; background:#fffaf0; border:1px solid #82796c; border-radius:.2rem; padding:.55rem .8rem; cursor:pointer; }
.atelier-theatre button:hover { border-color:var(--atelier-red); }
.atelier-theatre :focus-visible { outline:3px solid #b0652f; outline-offset:3px; }
.atelier-theatre__header { display:flex; justify-content:space-between; align-items:end; gap:1rem; padding:1.2rem clamp(1rem,3vw,2rem); border-bottom:1px solid #c9c2b4; }
.atelier-theatre__header p { margin:0 0 .15rem; color:var(--atelier-red); font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.atelier-theatre__header h2 { margin:0; font:400 clamp(1.6rem,4vw,3rem)/1.05 Georgia,serif; }
.atelier-theatre__stage { position:relative; min-height:clamp(27rem,60vw,44rem); isolation:isolate; background:#d8d0c0; }
.atelier-theatre__scenery { position:absolute; inset:0; z-index:-2; }
.atelier-theatre__scene { position:absolute; inset:0; margin:0; opacity:0; transition:opacity 700ms ease; }
.atelier-theatre__scene.is-active { opacity:1; }
.atelier-theatre__scene img,.atelier-theatre__scene-field { display:block; width:100%; height:100%; object-fit:cover; }
.atelier-theatre__scene-field { background:radial-gradient(circle at 50% 35%,#f7f0df 0 12%,transparent 35%),linear-gradient(145deg,#b9af9e,#e8dfce 55%,#a89e8c); }
.atelier-theatre__scene::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgb(20 20 17 / .08),rgb(20 20 17 / .58)); }
.atelier-theatre__scene figcaption { position:absolute; z-index:1; top:1rem; left:1rem; max-width:70%; padding:.45rem .7rem; color:#fff; background:rgb(20 20 17 / .68); font-size:.82rem; }
.atelier-theatre__scene:not(.is-active) figcaption { display:none; }
.atelier-theatre__cast { display:flex; align-items:flex-end; justify-content:center; gap:clamp(.25rem,2vw,1.3rem); min-height:clamp(20rem,48vw,35rem); margin:0; padding:clamp(3.5rem,8vw,6rem) 1rem 7.5rem; list-style:none; }
.atelier-theatre__portrait { --speaker-accent:var(--atelier-red); position:relative; display:grid; align-content:end; flex:1 1 8rem; max-width:12rem; min-width:0; aspect-ratio:3/4; color:#fff; background:rgb(36 41 34 / .84); border:2px solid rgb(255 255 255 / .7); box-shadow:0 .7rem 2rem rgb(0 0 0 / .22); opacity:.66; transform:translateY(.45rem) scale(.96); transition:opacity 220ms ease,transform 220ms ease,box-shadow 220ms ease; overflow:hidden; }
.atelier-theatre__portrait:nth-child(2n) { --speaker-accent:var(--atelier-green); }
.atelier-theatre__portrait.is-active { opacity:1; transform:translateY(-.5rem) scale(1.03); border-color:var(--speaker-accent); box-shadow:0 0 0 4px rgb(255 250 240 / .9),0 1rem 2.5rem rgb(0 0 0 / .3); }
.atelier-theatre__portrait img,.atelier-theatre__portrait-shape { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.atelier-theatre__portrait-shape { background:linear-gradient(155deg,color-mix(in srgb,var(--speaker-accent) 75%,#efe6d6),#252822); clip-path:polygon(50% 4%,92% 27%,82% 94%,18% 94%,8% 27%); }
.atelier-theatre__portrait>span:last-child { position:relative; z-index:1; display:block; padding:.7rem; background:linear-gradient(transparent,rgb(15 16 14 / .92)); }
.atelier-theatre__portrait strong,.atelier-theatre__portrait small { display:block; overflow-wrap:anywhere; }
.atelier-theatre__portrait small { font-size:.72rem; opacity:.86; }
.atelier-theatre__line { position:absolute; z-index:2; left:clamp(.7rem,3vw,2rem); right:clamp(.7rem,3vw,2rem); bottom:1rem; min-height:5.6rem; padding:.85rem 1rem; color:#fff; background:rgb(24 25 22 / .9); border-left:4px solid var(--atelier-red); backdrop-filter:blur(8px); }
.atelier-theatre__line span { color:#f4c4b5; font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.atelier-theatre__line p { margin:.25rem 0 0; font:400 clamp(1.05rem,2.2vw,1.5rem)/1.35 Georgia,serif; }
.atelier-theatre__controls { display:grid; grid-template-columns:auto auto auto minmax(8rem,1fr) auto auto; align-items:center; gap:.55rem; padding:1rem clamp(1rem,3vw,2rem); border-top:1px solid #c9c2b4; border-bottom:1px solid #c9c2b4; }
.atelier-theatre__controls label { display:flex; align-items:center; gap:.45rem; margin:0; }
.atelier-theatre__controls input { width:100%; accent-color:var(--atelier-red); }
.atelier-theatre__controls output { white-space:nowrap; font-variant-numeric:tabular-nums; }
.atelier-theatre__status { margin:.6rem clamp(1rem,3vw,2rem); color:#5c6258; font-size:.82rem; }
.atelier-theatre__chapters,.atelier-theatre__transcript { padding:1rem clamp(1rem,3vw,2rem); }
.atelier-theatre h3 { margin:0 0 .8rem; font:600 1rem/1.3 system-ui,sans-serif; }
.atelier-theatre__chapters ol { display:flex; gap:.55rem; margin:0; padding:0; list-style:none; overflow-x:auto; }
.atelier-theatre__chapters button { white-space:nowrap; }
.atelier-theatre__chapters button.is-current { color:#fff; background:var(--atelier-green); border-color:var(--atelier-green); }
.atelier-theatre__chapters button span { margin-right:.35rem; font-variant-numeric:tabular-nums; opacity:.75; }
.atelier-theatre__transcript ol { margin:0; padding:0; list-style:none; }
.atelier-theatre__transcript li { display:grid; grid-template-columns:4.4rem minmax(7rem,11rem) 1fr; gap:.8rem; align-items:start; padding:.7rem .35rem; border-top:1px solid #d5cfc2; }
.atelier-theatre__transcript li.is-current { background:#fff5dc; box-shadow:inset 4px 0 var(--atelier-red); }
.atelier-theatre__transcript li button { min-height:44px; padding:.35rem; color:var(--atelier-green); background:transparent; border-color:transparent; font-variant-numeric:tabular-nums; }
.atelier-theatre__transcript li strong { padding-top:.55rem; overflow-wrap:anywhere; }
.atelier-theatre__transcript li>span { padding-top:.55rem; overflow-wrap:anywhere; }
.atelier-theatre__transcript summary { cursor:pointer; font-weight:700; padding:.75rem 0; }
.atelier-theatre__external,.atelier-theatre__copyright { margin:0; padding:.8rem clamp(1rem,3vw,2rem); border-top:1px solid #d5cfc2; }
.atelier-theatre__copyright { color:#5c6258; font-size:.78rem; }
.atelier-theatre.is-focus { position:fixed; z-index:9999; inset:1rem; width:auto; margin:0; overflow:auto; box-shadow:0 0 0 100vmax rgb(22 23 20 / .88); }
.atelier-theatre__visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
@media (max-width:800px) { .atelier-theatre__controls { grid-template-columns:repeat(3,auto) 1fr; } .atelier-theatre__controls label:first-of-type { grid-column:1/-1; grid-row:2; } .atelier-theatre__controls output { grid-column:4; grid-row:1; } .atelier-theatre__controls label:last-of-type { grid-column:span 2; } }
@media (max-width:520px) { .atelier-theatre__header { align-items:start; flex-direction:column; } .atelier-theatre__stage { min-height:29rem; } .atelier-theatre__cast { flex-wrap:wrap; align-content:end; padding-inline:.55rem; } .atelier-theatre__portrait { flex-basis:27%; max-width:7rem; } .atelier-theatre__portrait>span:last-child { padding:.45rem; } .atelier-theatre__portrait strong { font-size:.84rem; } .atelier-theatre__portrait small { font-size:.66rem; } .atelier-theatre__controls { grid-template-columns:repeat(3,1fr); } .atelier-theatre__controls output { grid-column:1/-1; grid-row:auto; text-align:center; } .atelier-theatre__controls label:last-of-type { grid-column:1/-1; justify-content:center; } .atelier-theatre__transcript li { grid-template-columns:3.8rem 1fr; gap:.45rem; } .atelier-theatre__transcript li>span { grid-column:2; padding-top:0; } }
@media (prefers-reduced-motion:reduce) { .atelier-theatre__scene,.atelier-theatre__portrait { transition:none; } }
@media (forced-colors:active) { .atelier-theatre__portrait.is-active,.atelier-theatre__transcript li.is-current { outline:3px solid Highlight; } .atelier-theatre__scene::after { display:none; } }
@media print { .atelier-theatre__controls,.atelier-theatre__header button,.atelier-theatre__status { display:none; } .atelier-theatre { box-shadow:none; border:0; } .atelier-theatre__stage { min-height:20rem; break-inside:avoid; } .atelier-theatre__transcript li { break-inside:avoid; } }