:root{color-scheme:dark;--cyan:#41f5e4;--violet:#9c7bff;--amber:#f2ce4e;--line:rgba(65,245,228,.16);font-family:Inter,system-ui,sans-serif;background:#02050a;color:#dff}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 70% 10%,#101332 0,transparent 35%),#02050a}
.system{position:sticky;top:0;z-index:3;display:flex;gap:24px;align-items:center;height:48px;padding:0 22px;border-bottom:1px solid var(--line);background:#02050aee;font:700 11px ui-monospace;letter-spacing:.14em}.system a{color:var(--cyan);text-decoration:none}.system output{margin-left:auto;color:#68838e}.system nav{display:flex;align-items:center;gap:7px;margin-left:auto}.system nav i{color:#627985;font-style:normal}.system nav button{padding:6px 8px;border-color:transparent;background:transparent;color:#627985}.system nav button[aria-pressed="true"]{border-color:var(--cyan);color:var(--cyan);box-shadow:none}.system nav+output{margin-left:0}
main{display:grid;grid-template-columns:1.5fr .8fr;gap:14px;max-width:1440px;margin:auto;padding:18px}.panel{border:1px solid var(--line);background:#040a11}.panel>header{display:flex;align-items:center;gap:12px;height:42px;padding:0 14px;border-bottom:1px solid var(--line);font:700 10px ui-monospace}.panel header span{color:var(--cyan)}.panel h1,.panel h2{margin:0;font-size:11px;letter-spacing:.12em}.panel header i{margin-left:auto;color:#58717d;font-style:normal}
.stage{grid-row:span 2}.stage canvas{display:block;width:100%;height:520px}.transport{display:flex;gap:8px;align-items:center;padding:12px;border-top:1px solid var(--line)}button{border:1px solid #244652;background:#07121b;color:#bfe9e8;padding:10px 13px;font:700 10px ui-monospace;cursor:pointer}button:hover,button.active{border-color:var(--cyan);color:#fff;box-shadow:0 0 18px #41f5e422}.transport output{display:grid;margin-left:auto;text-align:right;font:700 10px ui-monospace}.transport small{color:#607984}
.view-next{display:flex;width:100%;align-items:center;justify-content:center;gap:12px;border-width:1px 0 0;padding:14px;color:var(--cyan);letter-spacing:.12em}.view-next span,.view-switcher button span{font-size:18px;line-height:0}
.cast>div,.action-bank{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px}.cast button{display:grid;gap:5px;text-align:left}.cast small{color:#68808a;font-size:8px}
.actions ol{display:grid;gap:6px;margin:0;padding:0 12px 12px;list-style:none}.actions li{display:grid;grid-template-columns:38px 1fr 34px;align-items:center;border:1px solid #162e38;background:#071018;font:700 10px ui-monospace}.actions li b,.actions li span{padding:9px}.actions li b{color:var(--amber)}.actions li button{border:0;border-left:1px solid #162e38;padding:9px}.actions>[data-clear]{margin:0 12px 12px}
.pipeline{grid-column:1/-1}.flow{display:flex;align-items:center;justify-content:center;gap:18px;padding:28px;overflow:auto;font:700 10px ui-monospace}.flow b{min-width:125px;padding:18px;border:1px solid var(--line);text-align:center}.flow i{color:var(--violet);font-style:normal}
.source{grid-column:1/-1}.source textarea{display:block;width:100%;min-height:360px;resize:vertical;border:0;outline:0;padding:18px;background:#010409;color:#b9d9d7;font:13px/1.55 ui-monospace}.source footer{display:flex;gap:8px;align-items:center;padding:10px;border-top:1px solid var(--line)}.source footer output{margin-right:auto;color:var(--cyan);font:700 10px ui-monospace}.source footer output.error{color:#ff688d}
.view-switcher{position:sticky;bottom:0;z-index:3;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:8px 18px;border-top:1px solid var(--line);background:#02050af2}.view-switcher strong{text-align:center;color:#78929b;font:700 9px ui-monospace;letter-spacing:.13em}.view-switcher button{border-color:transparent;background:transparent}.view-switcher button:first-child{justify-self:start}.view-switcher button:last-child{justify-self:end}
body[data-view="stage"] .cast,body[data-view="stage"] .actions,body[data-view="stage"] .pipeline,body[data-view="stage"] .source{display:none}
body[data-view="stage"] main{display:block;max-width:1180px}
body[data-view="stage"] .stage{min-height:calc(100vh - 114px)}
body[data-view="stage"] .stage canvas{height:calc(100vh - 235px);min-height:420px}
body[data-view="build"] .stage{display:none}
body[data-view="build"] main{grid-template-columns:.8fr 1.2fr}
body[data-view="build"] .pipeline,body[data-view="build"] .source{grid-column:1/-1}
body[data-view="stage"] [data-view-stage],body[data-view="build"] [data-view-build]{color:var(--cyan)}
@media(max-width:850px){main{grid-template-columns:1fr}.stage{grid-row:auto}.pipeline,.source{grid-column:auto}.stage canvas{height:380px}.flow{justify-content:flex-start}.cast>div,.action-bank{grid-template-columns:1fr}}