:root { --ink:#183b47;--teal:#123d4b;--teal2:#1b5864;--cream:#fff7e4;--paper:#f2e7ca;--coral:#ee7566;--gold:#efb94f;--mint:#5fc3a7;--sky:#77bed9;font-family:ui-rounded,"Avenir Next",system-ui,sans-serif; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html,body { width:100%;height:100%;margin:0; }
body { min-width:1100px;min-height:720px;overflow:hidden;color:var(--ink);background:#d9d9d2; }
button { color:inherit;font:inherit; }
button:focus-visible { outline:4px solid rgba(239,185,79,.6);outline-offset:4px; }
.lesson { position:relative;width:min(1330px,calc(100vw - 36px));height:min(860px,calc(100vh - 30px));margin:15px auto;display:grid;grid-template-columns:minmax(0,1fr) 292px;grid-template-rows:minmax(0,1fr) 108px;gap:14px; }
.theatre { min-width:0;padding:17px 22px 20px;display:grid;grid-template-rows:43px 75px minmax(0,1fr) 76px;border:9px solid #1a4d5a;border-radius:34px;background:linear-gradient(rgba(255,247,228,.78),rgba(255,247,228,.62)),url("./assets/scene-plate.webp") center/cover no-repeat;box-shadow:0 24px 55px rgba(21,48,57,.22),inset 0 0 0 4px #f2c86d;overflow:hidden; }
.theatre-head { display:grid;grid-template-columns:1fr auto 1fr;align-items:start; }.theatre-head>div:first-child { display:flex;flex-direction:column; }.theatre-head span,.mission span,.control-room>span,.target-card span,.evidence-strip span,.movement-card span,.decision span,.finale span { color:#5d7077;font-size:12px;font-weight:950;letter-spacing:.1em;text-transform:uppercase; }.theatre-head strong { font-size:15px; }.theatre-head>button { justify-self:end;min-height:44px;padding:0 14px;border:0;border-radius:13px;background:#e8ddc2;font-weight:900;cursor:pointer; }
.pips { display:flex;gap:7px;padding-top:9px; }.pips i { width:30px;height:7px;border-radius:99px;background:#d4c8ac; }.pips i.on { background:var(--gold); }.pips i.done { background:var(--mint); }
.mission { text-align:center; }.mission h1 { margin:4px 0 3px;font-size:29px;line-height:1.05;letter-spacing:-.035em; }.mission p { margin:0;color:#62737a;font-size:13px;font-weight:700; }
.stage { position:relative;min-height:0;border:6px solid var(--teal);border-radius:25px;background:linear-gradient(#fffaf0,#f1e4c6);box-shadow:inset 0 0 0 5px #d4b96f;overflow:hidden;touch-action:none; }
.curtain { position:absolute;z-index:6;top:0;bottom:0;width:74px;background:repeating-linear-gradient(90deg,#123d4b 0 18px,#174b58 18px 36px);pointer-events:none; }.curtain.left { left:0;border-radius:18px 50% 50% 18px;clip-path:polygon(0 0,100% 0,66% 100%,0 100%); }.curtain.right { right:0;border-radius:50% 18px 18px 50%;clip-path:polygon(0 0,100% 0,100% 100%,34% 100%); }
.pitch-rungs { position:absolute;z-index:0;left:76px;right:76px;top:20px;bottom:20px;display:grid;grid-template-rows:repeat(20,1fr);transform:scaleY(-1); }.pitch-rungs span { position:relative;border-top:1px solid rgba(24,59,71,.16); }.pitch-rungs span:nth-child(12n + 1) { border-top:3px solid rgba(24,59,71,.28); }.pitch-rungs b { position:absolute;left:7px;top:2px;color:#6d746f;font-size:12px;font-weight:900;transform:scaleY(-1); }
#shadowSvg { position:absolute;z-index:1;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none; }.interval-shadow { stroke-linecap:round;stroke-width:18;opacity:.17; }.interval-line { stroke-linecap:round;stroke-width:3;opacity:.72; }.shadow-0 { stroke:var(--coral); }.shadow-1 { stroke:var(--gold); }.shadow-2 { stroke:var(--mint); }.movement-line { stroke:var(--sky);stroke-width:4;stroke-dasharray:8 7;opacity:.7; }.interval-label { fill:var(--teal);stroke:var(--cream);stroke-width:7px;paint-order:stroke;font-size:17px;font-weight:1000;text-anchor:middle;dominant-baseline:middle; }
.choir,.ghosts { position:absolute;z-index:4;inset:0; }.ghosts { z-index:2;pointer-events:none; }.ghost { position:absolute;width:58px;height:58px;border:4px dashed rgba(56,128,151,.48);border-radius:48% 52% 42% 58%;background:rgba(119,190,217,.1);transform:translate(-50%,-50%); }.ghost::after { position:absolute;left:50%;top:50%;content:"";width:11px;height:7px;border-bottom:3px solid rgba(56,128,151,.55);border-radius:50%;transform:translate(-50%,-50%); }
.singer { position:absolute;width:86px;height:92px;padding:0;border:0;background:transparent;cursor:grab;transform:translate(-50%,-50%); }.singer:active { cursor:grabbing; }.singer .body { position:absolute;left:8px;top:3px;width:70px;height:67px;border:6px solid #fff4d9;border-radius:48% 52% 42% 58%;background:var(--voice);box-shadow:0 7px 0 color-mix(in srgb,var(--voice),#000 28%),0 10px 20px rgba(24,59,71,.22); }.singer[data-voice="1"] .body { border-radius:45% 55% 55% 45% / 38% 45% 55% 62%;transform:rotate(3deg); }.singer[data-voice="2"] .body { border-radius:22px 29px 23px 31px;transform:rotate(-2deg); }.singer .eyes::before,.singer .eyes::after { position:absolute;top:20px;content:"";width:6px;height:8px;border-radius:50%;background:var(--teal); }.singer .eyes::before { left:19px; }.singer .eyes::after { right:19px; }.singer .mouth { position:absolute;left:50%;top:39px;width:15px;height:9px;border-bottom:4px solid var(--teal);border-radius:50%;transform:translateX(-50%); }.singer.singing .mouth { height:17px;border:0;border-radius:50%;background:var(--teal); }.singer b { position:absolute;left:50%;bottom:0;min-width:45px;padding:3px 7px;border-radius:99px;color:#fff;background:var(--teal);font-size:12px;transform:translateX(-50%); }.singer.common .body { box-shadow:0 0 0 7px rgba(239,185,79,.52),0 0 24px 10px rgba(239,185,79,.5),0 7px 0 color-mix(in srgb,var(--voice),#000 28%); }.singer.common::before { position:absolute;left:50%;top:-17px;content:"held";padding:3px 7px;border-radius:99px;color:var(--teal);background:var(--gold);font-size:12px;font-weight:950;transform:translateX(-50%); }
.harmony-bloom { position:absolute;z-index:0;left:50%;bottom:-12px;width:430px;height:165px;opacity:0;transform:translateX(-50%) scale(.7);transition:opacity .2s ease-out,transform .2s ease-out;clip-path:polygon(50% 0,57% 42%,72% 8%,68% 48%,91% 25%,75% 61%,100% 62%,75% 75%,88% 100%,61% 82%,50% 100%,39% 82%,12% 100%,25% 75%,0 62%,25% 61%,9% 25%,32% 48%,28% 8%,43% 42%);background:linear-gradient(90deg,var(--coral),var(--gold),var(--mint),var(--sky)); }.stage.is-complete .harmony-bloom { opacity:.26;transform:translateX(-50%) scale(1); }
.evidence-strip { display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;padding-top:12px; }.evidence-strip>div { min-width:0;padding:10px 14px;border-radius:16px;background:#efe5ce; }.evidence-strip span { display:block; }.evidence-strip strong { display:block;margin-top:3px;overflow:hidden;font-size:15px;text-overflow:ellipsis;white-space:nowrap; }.evidence-strip>div:first-child strong { color:#bd5046; }
.control-room { padding:22px;display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto;gap:14px;border-radius:30px;color:#fff;background:var(--teal);box-shadow:0 22px 48px rgba(18,61,75,.28); }.control-room>span { color:#aac1c6; }.target-card,.interval-card,.movement-card { padding:15px;border-radius:18px;background:#1b5260; }.target-card span,.movement-card span { color:#b9ced2; }.target-card strong { display:block;margin-top:6px;color:#ffd985;font-size:20px;line-height:1.05; }.target-card p,.movement-card p { margin:8px 0 0;color:#d0dee0;font-size:12px;font-weight:700;line-height:1.4; }.conduct { min-height:58px;border:0;border-radius:17px;color:var(--teal);background:var(--gold);box-shadow:0 6px 0 #aa7823;font-weight:1000;cursor:pointer; }.conduct i { display:inline-grid;width:28px;height:28px;margin-right:7px;place-items:center;border-radius:50%;color:#fff;background:var(--teal);font-style:normal; }
.interval-card { align-self:start; }.interval-card>strong { font-size:14px; }.interval-card>div { display:grid;gap:7px;margin-top:10px; }.interval-card p { margin:0;display:flex;justify-content:space-between;color:#ccdcdf;font-size:12px;font-weight:800; }.interval-card b { color:#fff; }
.movement-card>div:first-child { display:flex;justify-content:space-between;align-items:end; }.movement-card strong { color:#fff;font-size:17px; }.budget-track { height:12px;margin-top:10px;overflow:hidden;border-radius:99px;background:#0c3440; }.budget-track i { display:block;width:0;height:100%;border-radius:inherit;background:var(--mint);transition:width .15s ease-out,background .15s ease-out; }
.decision { grid-column:1/-1;display:grid;grid-template-columns:1fr 1.7fr;align-items:center;gap:25px;padding:18px 28px;border-radius:25px;background:var(--cream);box-shadow:0 12px 28px rgba(30,48,50,.14); }.decision>div:first-child { display:flex;flex-direction:column;gap:5px; }.decision strong { font-size:17px; }.actions { display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap; }.actions button,.finale button { min-height:50px;padding:10px 16px;border:0;border-radius:15px;background:#e2ddce;font-weight:900;cursor:pointer; }.actions .primary,.finale button { color:#fff;background:#2d7286;box-shadow:0 5px 0 #185063; }
.finale { position:absolute;z-index:30;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;border-radius:34px;color:#fff;background:rgba(18,61,75,.98);text-align:center; }.finale>span { color:#9ee7d2; }.finale>strong { max-width:720px;margin:10px 0 14px;font-size:36px; }.final-bloom { width:390px;height:115px;margin-bottom:20px;clip-path:polygon(50% 0,58% 38%,72% 7%,69% 47%,91% 25%,76% 61%,100% 62%,75% 75%,88% 100%,61% 82%,50% 100%,39% 82%,12% 100%,25% 75%,0 62%,24% 61%,9% 25%,31% 47%,28% 7%,42% 38%);background:linear-gradient(90deg,var(--coral),var(--gold),var(--mint),var(--sky)); }
.sr-only { position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0); }.is-pointed { animation:point .7s ease-out 2; }
@keyframes point { 50% { filter:drop-shadow(0 0 15px var(--gold)); } }
@media(max-width:1180px){.lesson{grid-template-columns:minmax(0,1fr) 270px}.theatre{padding-inline:16px}.singer{width:78px}.singer .body{left:6px}}
@media(max-width:1099px),(max-height:719px){body{min-width:0;overflow:auto}.lesson{width:min(100% - 24px,960px);height:auto;min-height:calc(100vh - 24px);margin:12px auto;grid-template-columns:1fr;grid-template-rows:minmax(700px,78vh) auto auto}.control-room{grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto auto}.decision{grid-column:1}.interval-card{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}