:root{--bg: #0a0d16;--panel: rgba(17, 22, 36, .78);--line: rgba(160, 180, 230, .14);--text: #e6ebf7;--muted: #8f9bb8;--accent: #8fb0ff;--ok: #5ed39a;--warn: #f2c14e;--err: #ff7a6b;color-scheme:dark;font-family:Inter,Segoe UI,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);overflow:hidden}body{background:radial-gradient(60% 55% at 42% 48%,rgba(64,92,170,.22),transparent 70%),radial-gradient(40% 40% at 85% 10%,rgba(120,80,170,.12),transparent 70%),var(--bg)}button{font:inherit;color:inherit;cursor:pointer}.app{position:relative;height:100dvh;display:grid;grid-template-columns:1fr 340px;grid-template-rows:auto 1fr}.topbar{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px 0;z-index:3}.brand{display:flex;align-items:center;gap:12px}.brand h1{margin:0;font-size:18px;font-weight:650;letter-spacing:.01em}.brand p{margin:2px 0 0;font-size:12.5px;color:var(--muted)}.brand-mark{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#cfe0ff,transparent 45%),conic-gradient(from 20deg,#4d6fd6,#8f6ad8,#3fb5c9,#4d6fd6);box-shadow:0 0 24px #7896ff73}.pages{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:#0f1320b3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.pages button{border:0;background:transparent;padding:7px 16px;border-radius:999px;font-size:13.5px;color:var(--muted);transition:background .2s,color .2s}.pages button:hover{color:var(--text)}.pages button.active{background:#8fb0ff2e;color:var(--text)}.stage{position:relative;min-height:0;grid-row:2;grid-column:1}.sphere{position:absolute;top:0;right:0;bottom:0;left:0}.labels{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;display:none}.labels.on{display:block}.slot-label{position:absolute;left:0;top:0;padding:3px 8px;border-radius:6px;font:600 11px/1.3 ui-monospace,Cascadia Code,Consolas,monospace;background:#080b14c7;border:1px solid rgba(143,176,255,.45);color:#dbe5ff;white-space:nowrap;transition:opacity .15s}.slot-label[data-state=error]{border-color:var(--err);color:#ffd2cc}.slot-label[data-state=empty]{border-style:dashed;color:var(--muted)}.loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--muted);font-size:14px;pointer-events:none;transition:opacity .4s}.loading.hidden{opacity:0}.hint{position:absolute;left:50%;bottom:18px;transform:translate(-50%);margin:0;font-size:12.5px;color:var(--muted);pointer-events:none;white-space:nowrap}.toast{position:absolute;left:50%;bottom:52px;transform:translate(-50%,8px);max-width:min(92%,560px);padding:9px 14px;border-radius:10px;background:#141a2ceb;border:1px solid var(--line);font-size:13px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;text-align:center;overflow-wrap:anywhere}.toast.show{opacity:1;transform:translate(-50%)}.panel{grid-row:2;grid-column:2;margin:16px 16px 16px 0;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--panel);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:flex;flex-direction:column;gap:18px;overflow:auto;min-height:0;z-index:2}.panel h2{margin:0 0 8px;font-size:11.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.panel h2 small{text-transform:none;letter-spacing:0;font-weight:400;opacity:.8}.code{margin:0;padding:10px 12px;border-radius:10px;background:#05080fb3;border:1px solid var(--line);font:11.5px/1.55 ui-monospace,Cascadia Code,Consolas,monospace;color:#c9d6f5;max-height:210px;overflow:auto;white-space:pre}.btn-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.btn-grid button,.segmented button{padding:8px 10px;border-radius:9px;border:1px solid var(--line);background:#8fb0ff0f;font-size:12.5px;transition:background .15s,border-color .15s}.btn-grid button:hover,.segmented button:hover{background:#8fb0ff24;border-color:#8fb0ff59}.row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;padding:6px 0}.segmented{display:flex;gap:4px}.segmented button.active{background:#8fb0ff38;border-color:#8fb0ff80}.switch input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:36px;height:20px;border-radius:999px;background:#8fb0ff26;position:relative;cursor:pointer;transition:background .2s;margin:0}.switch input:after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#cdd6ee;transition:transform .2s}.switch input:checked{background:var(--accent)}.switch input:checked:after{transform:translate(16px);background:#0c1120}.slot-list{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.slot-chip{display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 0;border-radius:8px;border:1px solid var(--line);background:#8fb0ff0d;font:600 12px ui-monospace,Consolas,monospace}.slot-chip:hover{border-color:#8fb0ff73}.slot-chip i{width:7px;height:7px;border-radius:50%;background:var(--muted)}.slot-chip.loaded i{background:var(--ok)}.slot-chip.loading i{background:var(--warn)}.slot-chip.error i{background:var(--err)}.log-section{flex:1;min-height:90px;display:flex;flex-direction:column}.log{list-style:none;margin:0;padding:0;font:11.5px/1.5 ui-monospace,Consolas,monospace;color:#b8c3de;overflow:auto;flex:1;min-height:60px}.log li{padding:2px 0;border-bottom:1px dashed rgba(160,180,230,.07);overflow-wrap:anywhere}.log li time{color:var(--muted);margin-right:8px}.log li.ok{color:#a9e9c8}.log li.error{color:#ffb3a8}.panel-footer{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--muted)}.panel-footer a{color:var(--accent);text-decoration:none}.panel-toggle{display:none}@media(max-width:900px){.app{grid-template-columns:1fr}.topbar{padding:14px 14px 0;flex-wrap:wrap}.brand p{display:none}.pages button{padding:6px 12px}.panel{position:fixed;left:10px;right:10px;bottom:10px;max-height:62dvh;margin:0;transform:translateY(calc(100% + 20px));transition:transform .3s ease;background:#0e121ef0}body.panel-open .panel{transform:none}.panel-toggle{display:block;position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:4;padding:9px 16px;border-radius:999px;border:1px solid rgba(143,176,255,.35);background:#141a2ce6;font-size:13px}body.panel-open .panel-toggle{bottom:calc(62dvh + 20px)}.hint{left:16px;transform:none;bottom:22px}.toast{bottom:64px}}