@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Playfair+Display:wght@500;600;700&display=swap');
:root{--bg:#071321;--surface:#0a1b2b;--surface2:#0d2236;--line:#294057;--line-soft:#1d3348;--text:#eaf0f1;--muted:#91a5b6;--gold:#ffbd67;--blue:#59b8e8;--red:#ff7377;--green:#70d4b0;--mono:'IBM Plex Mono',monospace;--sans:'DM Sans',Arial,sans-serif;--serif:'Playfair Display',Georgia,serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 50% -10%,#15314a 0,var(--bg) 48%);color:var(--text);font-family:var(--sans)}button,textarea,select{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}a{color:#b7d6ea}
.app-shell{max-width:1800px;margin:0 auto;padding:0 16px}.topbar{display:flex;justify-content:space-between;align-items:center;min-height:78px;gap:16px}.brand{display:flex;align-items:baseline;gap:29px}.brand h1{font:600 36px/1 var(--serif);letter-spacing:-.04em;margin:0}.brand h1 span{color:var(--gold)}.brand p{color:#aebfd0;margin:0;font-size:14px}.topbar-right{display:flex;align-items:center;gap:20px;font-size:12px}.sim-badge{border:1px solid #36526a;border-radius:3px;padding:7px 10px;color:#8bc3dd;letter-spacing:.13em;font:600 10px var(--mono)}.topbar a{text-decoration:none}.topbar a:hover{text-decoration:underline}
.panel{border:1px solid var(--line);background:linear-gradient(155deg,#0a1d2f,#071624);border-radius:9px;min-width:0;overflow:hidden;box-shadow:0 12px 30px #0002}.workspace{display:grid;grid-template-columns:minmax(315px,29fr) minmax(400px,44fr) minmax(310px,27fr);gap:6px;min-height:590px}.workspace>.panel{height:590px}.panel-top{height:67px;display:flex;align-items:center;justify-content:space-between;padding:10px 17px;border-bottom:1px solid var(--line-soft);gap:10px}.eyebrow{font:600 10px/1.2 var(--mono);letter-spacing:.13em;color:#77a9c1;margin:0 0 6px}.panel-top h2{font:600 17px/1.2 var(--serif);margin:0;letter-spacing:.01em}.example-select{font-size:11px;color:var(--muted);display:grid;gap:2px}.example-select select,.speed select{border:1px solid #34506a;border-radius:4px;background:#11273b;color:var(--text);padding:5px 7px;max-width:175px}.file-tab{height:33px;padding:9px 16px;font:500 11px var(--mono);background:#11283f;color:#7fd2fa;display:flex;justify-content:space-between}.file-tab span{color:#7797aa}.editor-panel{display:flex;flex-direction:column}.editor-panel textarea{border:0;outline:0;resize:none;background:#0b1c2d;color:#cbddeb;flex:1;width:100%;padding:17px 19px;min-height:0;font:400 12px/1.62 var(--mono);tab-size:2}.editor-bottom{height:57px;border-top:1px solid var(--line-soft);padding:8px 12px 8px 16px;display:flex;align-items:center;justify-content:space-between;gap:8px}.editor-bottom>span{font-size:11px;color:var(--muted)}.editor-bottom button{border:0;background:#194a6c;color:#e9f6ff;border-radius:5px;padding:9px 13px;white-space:nowrap;font-size:12px;font-weight:700}.editor-bottom button:hover{background:#286887}
.preview-panel{display:flex;flex-direction:column}.now-label{font-size:11px;color:#a9bfd1;max-width:60%;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stage{--left:0;--center:0;--right:0;position:relative;flex:1;min-height:0;overflow:hidden;background:radial-gradient(ellipse at 50% 80%,#223044 0%,#081321 65%,#020810 100%)}.stage-ceiling{position:absolute;z-index:3;top:0;left:0;right:0;height:28px;background:repeating-linear-gradient(90deg,#04090d 0 43px,#182735 44px 47px,#050b13 48px 93px);border-bottom:2px solid #111e2b}.beam{position:absolute;z-index:2;top:18px;height:90%;width:44%;filter:blur(2px);mix-blend-mode:screen;clip-path:polygon(48% 0,52% 0,100% 100%,0 100%);opacity:.7;pointer-events:none}.beam-left{left:2%;background:linear-gradient(#f4af5b66,#e99a3b15);opacity:calc(var(--left) * .75);transform:rotate(10deg)}.beam-center{left:29%;background:linear-gradient(#72bbef88,#419be01a);opacity:calc(var(--center) * .75)}.beam-right{right:2%;background:linear-gradient(#f5bc6a66,#e99a3b15);opacity:calc(var(--right) * .75);transform:rotate(-10deg)}.back-wall{position:absolute;inset:21px 5% 14%;background:linear-gradient(100deg,#0d1825 0,#151f2d 50%,#0c1725 100%);border:1px solid #1a2d3f;box-shadow:inset 0 -50px 80px #0008}.window{position:absolute;right:15%;top:27%;width:16%;height:42%;border:5px solid #38404a;background:linear-gradient(145deg,#142d41,#2b3441);box-shadow:inset 0 0 0 2px #111820}.window:after{content:"";position:absolute;top:48%;left:0;right:0;border-top:4px solid #38404a}.door{position:absolute;left:12%;top:23%;width:17%;height:54%;border:5px solid #293746;background:#111925;box-shadow:inset 8px 0 #182839}.table{position:absolute;left:41%;bottom:15%;width:19%;height:3%;background:#685038;border-radius:2px;box-shadow:0 2px 6px #000}.table:before,.table:after{content:"";position:absolute;top:100%;width:6px;height:45px;background:#4d3b30}.table:before{left:13%}.table:after{right:13%}.table i{position:absolute;bottom:100%;left:45%;width:20px;height:25px;border-radius:50% 50% 2px 2px;background:radial-gradient(#ffd577,#9c6429 65%,#322717)}.chair{position:absolute;bottom:15%;width:10%;height:18%;border:5px solid #26303a;border-bottom:0}.chair:after{content:"";position:absolute;top:100%;left:7%;width:5px;height:22px;background:#26303a;box-shadow:35px 0 #26303a}.chair-left{left:31%}.chair-right{right:29%}.stage-floor{position:absolute;left:0;right:0;bottom:0;height:17%;background:linear-gradient(#382c26,#080f17);border-top:3px solid #5d4a38;transform:perspective(200px) rotateX(18deg);transform-origin:top}.stage-curtain{position:absolute;z-index:4;top:0;bottom:0;width:4%;background:repeating-linear-gradient(90deg,#060c14,#131522 13px,#050a10 23px)}.stage-curtain.left{left:0}.stage-curtain.right{right:0}.caption-card{position:absolute;z-index:5;bottom:15px;left:5%;right:5%;background:#071522ed;border:1px solid #35506a;border-radius:6px;padding:13px 17px;max-width:540px;margin:auto;box-shadow:0 10px 25px #0008}.caption-card span{font:600 16px var(--serif);display:block}.caption-card p{font:italic 14px/1.35 var(--serif);margin:6px 0;color:#d6e3e8}.caption-card small{font:500 10px var(--mono);color:#8ebbd0}.preview-footer{min-height:56px;padding:9px 15px;display:flex;align-items:center;justify-content:space-between;gap:10px}.preview-footer p{font-size:10px;color:#718ca3;margin:0;text-align:right}.light-key{display:flex;gap:12px}.light-key span{display:flex;align-items:center;gap:5px;font:10px var(--mono);color:#a6b9c5}.light-key i{width:7px;height:7px;border-radius:50%;background:#e4ae6d}.light-key .key-center{background:#70bdec}
.inspector-panel{display:flex;flex-direction:column}.issue-count{font:600 10px var(--mono);white-space:nowrap;color:var(--green);border:1px solid #295c55;border-radius:4px;padding:6px}.issue-count.has-warning{color:var(--gold);border-color:#775b39}.issue-count.has-error{color:var(--red);border-color:#854349}.inspector-scroll{overflow:auto;flex:1}.list-heading{height:35px;display:grid;grid-template-columns:1fr 54px 65px;gap:5px;align-items:center;padding:0 13px;border-bottom:1px solid var(--line-soft);color:#7895ab;font:600 10px var(--mono)}.cue-list{min-height:132px}.cue-row{background:transparent;color:#e0e9ed;width:100%;border:0;border-bottom:1px solid #1b3044;text-align:left;display:grid;grid-template-columns:1fr 54px 65px;gap:5px;align-items:center;min-height:42px;padding:5px 13px;font-size:12px}.cue-row:hover,.cue-row.selected{background:#153a56}.cue-row>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cue-row b{font:500 10px var(--mono);color:#7296ad;margin-right:9px}.cue-row time{color:#aabccc;font:11px var(--mono)}.cue-row em{color:var(--green);font:600 10px var(--sans)}.cue-row.conflict em{color:var(--red)}.diagnostics{border-top:1px solid var(--line);padding:18px 14px}.diagnostics h3{font:600 15px var(--serif);margin:0 0 13px}.diagnostic{display:flex;gap:10px;align-items:start;border:1px solid #415169;border-radius:5px;padding:10px;margin-bottom:8px;background:#142637}.diagnostic b{min-width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:#456781;color:white;font:700 12px var(--sans)}.diagnostic.warning{border-color:#75543c;background:#2b2024}.diagnostic.warning b{background:#d4924d}.diagnostic.error{border-color:#954c55;background:#321c26}.diagnostic.error b{background:#c65a62}.diagnostic.clean{border-color:#315c57;background:#112f31}.diagnostic.clean b{background:#368268}.diagnostic p{margin:0;color:#d2dfe4;font-size:11px;line-height:1.4}.diagnostic p span{display:block;color:#91a7b5;font:600 10px var(--mono);margin-bottom:2px}.empty{color:var(--muted);font-size:12px;padding:12px}
.transport{margin-top:6px;padding:0 15px 14px}.transport-controls{height:63px;display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--line-soft)}.play-button{border:0;border-radius:5px;background:var(--gold);color:#102033;font-weight:700;padding:11px 17px;min-width:126px;text-align:left}.play-button:hover{background:#ffd098}.play-button span{margin-left:5px}.icon-button{width:36px;height:36px;border:1px solid #3c5770;border-radius:4px;background:#102a42;color:#dceaf3}.icon-button:hover{background:#1d4867}.time-readout{font:12px var(--mono);color:#b7cbd9;margin-left:9px}.speed{margin-left:auto;font-size:11px;color:var(--muted);display:flex;align-items:center;gap:7px}.speed select{padding:6px 15px}.mute{font-size:18px}.timeline-wrap{padding:11px 6px 0;position:relative}.ruler{display:flex;justify-content:space-between;color:#89a2b6;font:10px var(--mono);padding:0 2px 10px;border-bottom:1px solid var(--line-soft)}.timeline{position:relative;height:76px;margin-top:7px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),#253b50 calc(10% - 1px),#253b50 10%);border:1px solid #1f3547}.timeline-cue{position:absolute;top:12px;height:49px;border:1px solid #4197c8;border-radius:3px;background:linear-gradient(#195077,#153b5e);color:#e8f5fc;text-align:left;display:flex;gap:7px;align-items:center;padding:5px 7px;overflow:hidden;white-space:nowrap;min-width:0}.timeline-cue b{font:600 10px var(--mono);color:#9ed2ec}.timeline-cue span{font-size:11px;overflow:hidden;text-overflow:ellipsis}.timeline-cue:hover,.timeline-cue.selected{background:linear-gradient(#2673a4,#1f5680);border-color:#84cff8}.timeline-cue.conflict{background:linear-gradient(#683444,#4b2637);border-color:#e27785}.timeline-cue.conflict.selected{background:#854154}.timeline-wrap input[type=range]{width:100%;height:12px;position:relative;margin:7px 0 0;accent-color:var(--gold);cursor:pointer}.timeline-legend{display:flex;gap:18px;justify-content:flex-end;color:#839bab;font-size:10px}.timeline-legend span{display:flex;align-items:center;gap:5px}.timeline-legend i{width:10px;height:7px;background:#2673a4}.timeline-legend span:last-child i{background:#854154}
.guide{margin:20px 0 0;border:1px solid var(--line);border-radius:8px;background:#0a1c2d;padding:26px;display:grid;grid-template-columns:1.15fr 1fr;gap:20px 40px}.guide h2{font:600 26px var(--serif);margin:0 0 9px}.guide p{font-size:13px;line-height:1.6;color:#aec1cc;margin:0}.guide pre{background:#071320;border:1px solid #27455e;border-radius:5px;margin:0;padding:15px;overflow:auto;color:#b8dced;font:12px/1.5 var(--mono)}.guide-reference{grid-column:1/-1;border-top:1px solid var(--line-soft);padding-top:15px}.guide-reference strong{color:var(--gold);font-size:12px}.guide-reference p{margin-top:7px}.guide-reference code{color:#8bc8e7}.footer{display:flex;justify-content:space-between;gap:15px;padding:20px 3px 30px;color:#768da0;font-size:11px}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1220px){.workspace{grid-template-columns:minmax(270px,32fr) minmax(380px,43fr) minmax(250px,25fr)}.panel-top{padding:9px 11px}.cue-row{grid-template-columns:1fr 45px 50px;padding:5px 8px}.list-heading{grid-template-columns:1fr 45px 50px;padding:0 8px}.cue-row b{margin-right:4px}.preview-footer{display:block}.preview-footer p{text-align:left;margin-top:5px}}
@media(max-width:1000px){.workspace{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}.inspector-panel{grid-column:1/-1}.workspace>.inspector-panel{height:300px}.cue-list{display:grid;grid-template-columns:repeat(2,1fr)}.guide{grid-template-columns:1fr}}
@media(max-width:700px){.app-shell{padding:0 10px}.topbar{min-height:76px}.brand{display:block}.brand h1{font-size:30px}.brand p{font-size:11px;margin-top:5px}.topbar-right{display:none}.workspace{display:block}.workspace>.panel{height:auto;margin-bottom:7px}.editor-panel textarea{height:310px;flex:auto}.preview-panel .stage{height:390px;flex:auto}.inspector-panel .inspector-scroll{max-height:280px}.cue-list{display:block}.transport{padding:0 9px 10px}.transport-controls{flex-wrap:wrap;height:auto;padding:10px 0}.time-readout{margin-left:0}.speed{margin-left:auto}.timeline-cue span{display:none}.timeline-legend{margin-top:3px}.guide{padding:18px}.footer{display:block}.footer span{display:block;margin-bottom:6px}}