.studio-demo{--sd-ground:#09090a;--sd-win:#0e0e10;--sd-line:#1d1d20;--sd-ink:#d6d6d8;--sd-dim:#7a7a80;--sd-mute:#4a4a50;--sd-orange:#f59e0b;font-family:var(--font-copy), system-ui, sans-serif;color:var(--sd-ink);perspective:1600px;background:0 0;position:absolute;inset:0;overflow:hidden}.studio-demo:before{content:"";pointer-events:none;background:radial-gradient(34% 28% at 58% 18%,#ffdeaa38,#0000 70%),radial-gradient(46% 10% at 45% 90%,#ffcd821f,#0000 72%);position:absolute;inset:0}.studio-demo .sd-cam{width:960px;height:330px;transform-style:preserve-3d;position:absolute;top:46%;left:50%}.studio-demo .sd-win{background:var(--sd-win);border:1px solid #242428;border-radius:10px;font-size:11px;position:absolute;inset:0;overflow:hidden;box-shadow:0 60px 120px -20px #000c,0 0 80px #f0b93a0d}.studio-demo .sd-mono{font-family:var(--font-mono), ui-monospace, monospace}.studio-demo .sd-bar{border-bottom:1px solid var(--sd-line);align-items:center;gap:14px;height:44px;padding:0 16px;display:flex;position:absolute;top:0;left:0;right:0}.studio-demo .sd-bar .sd-name{color:var(--sd-dim);margin-right:18px;font-size:11px}.studio-demo .sd-ico{width:14px;height:14px;color:var(--sd-dim)}.studio-demo .sd-ico.sd-on{color:var(--sd-ink)}.studio-demo .sd-chip{color:var(--sd-dim);background:#151518;border-radius:4px;padding:3px 8px;font-size:10px}.studio-demo .sd-time{color:var(--sd-ink);font-size:12px}.studio-demo .sd-sp{flex:1}.studio-demo .sd-btn{color:var(--sd-dim);border-radius:5px;padding:4px 9px;font-size:10px;transition:background .2s,color .2s}.studio-demo .sd-btn.sd-hot{color:var(--sd-ink);background:#1f1f23}.studio-demo .sd-master{background:#2a2a2e;border-radius:2px;width:70px;height:3px;position:relative}.studio-demo .sd-master:after{content:"";background:#c8c8cc;border-radius:50%;width:10px;height:10px;position:absolute;top:-4px;right:8px}.studio-demo .sd-ruler{border-bottom:1px solid var(--sd-line);height:16px;position:absolute;top:50px;left:120px;right:16px}.studio-demo .sd-ruler span{color:var(--sd-mute);font-size:8px;position:absolute;top:2px}.studio-demo .sd-trk{background:#111114;border-radius:6px;height:56px;transition:opacity .35s;position:absolute;left:12px;right:16px}.studio-demo .sd-head{flex-direction:column;gap:12px;width:108px;padding:10px 10px 0 12px;display:flex;position:absolute;top:0;bottom:0;left:0}.studio-demo .sd-head b{letter-spacing:.1em;color:var(--sd-dim);align-items:center;gap:6px;font-size:9px;font-weight:600;display:flex}.studio-demo .sd-head b i{background:var(--c);border-radius:50%;width:5px;height:5px}.studio-demo .sd-ms{color:var(--sd-mute);align-items:center;gap:8px;font-size:8px;display:flex}.studio-demo .sd-ms em{border-radius:2px;place-items:center;width:13px;height:13px;font-style:normal;display:grid}.studio-demo .sd-ms em.sd-m-on{color:#fff;background:#b45309}.studio-demo .sd-ms s{background:#2a2a2e;flex:1;height:2px;text-decoration:none;position:relative}.studio-demo .sd-ms s:after{content:"";background:#9a9aa0;border-radius:50%;width:8px;height:8px;position:absolute;top:-3px;right:0}.studio-demo .sd-lane{position:absolute;inset:0 0 0 108px}.studio-demo .sd-wave{transition:opacity .3s;position:absolute;inset:8px 0}.studio-demo .sd-wave svg{width:100%;height:100%;display:block}.studio-demo .sd-empty{place-content:center;justify-items:center;gap:8px;display:grid;position:absolute;inset:0}.studio-demo .sd-empty p{color:var(--sd-mute);margin:0;font-size:9.5px}.studio-demo .sd-acts{gap:6px;display:flex}.studio-demo .sd-act{color:var(--sd-dim);border:1px solid #242428;border-radius:999px;align-items:center;gap:5px;padding:4px 10px;font-size:9.5px;transition:background .2s,color .2s,border-color .2s;display:flex}.studio-demo .sd-act i{background:#ef4444;border-radius:50%;width:5px;height:5px}.studio-demo .sd-act.sd-gen{color:var(--sd-orange);border-color:#f59e0b80}.studio-demo .sd-act.sd-hot{color:var(--sd-ink);background:#1f1f23;border-color:#3a3a40}.studio-demo .sd-act.sd-gen.sd-hot{color:#fbbf24;background:#f59e0b29}.studio-demo .sd-prompt{background:#151412;border:1px solid #f59e0b8c;border-radius:6px;align-items:center;gap:8px;padding:0 10px;font-size:11px;display:flex;position:absolute;inset:10px}.studio-demo .sd-prompt small{color:var(--sd-orange);letter-spacing:.08em;font-size:8.5px}.studio-demo .sd-caret{background:var(--sd-ink);vertical-align:-2px;width:1px;height:12px;margin-left:1px;animation:1s step-end infinite sd-blink;display:inline-block}@keyframes sd-blink{50%{opacity:0}}.studio-demo .sd-genbox{position:absolute;inset:8px 10px}.studio-demo .sd-genbox b{color:var(--sd-ink);font-size:10px;font-weight:500;display:block}.studio-demo .sd-genbox span{color:var(--sd-mute);margin-top:2px;font-size:8.5px;display:block}.studio-demo .sd-genbox u{background:var(--sd-orange);height:2px;text-decoration:none;position:absolute;bottom:2px;left:0;box-shadow:0 0 10px #f59e0b99}.studio-demo .sd-add{height:26px;color:var(--sd-dim);border:1px dashed #26262a;border-radius:6px;place-items:center;font-size:9.5px;transition:background .2s,color .2s;display:grid;position:absolute;left:12px;right:16px}.studio-demo .sd-add.sd-hot{color:var(--sd-ink);background:#17171a}.studio-demo .sd-ph{background:#f4f4f5;width:1px;position:absolute;top:50px;bottom:16px;box-shadow:0 0 6px #fff9}.studio-demo .sd-toast{background:#17171a;border:1px solid #2c2c31;border-radius:6px;align-items:center;gap:8px;padding:8px 12px;font-size:10px;transition:opacity .3s,transform .3s;display:flex;position:absolute;top:52px;right:16px}.studio-demo .sd-toast i{background:#4ade80;border-radius:50%;width:6px;height:6px}.studio-demo .sd-cursor{z-index:5;filter:drop-shadow(0 3px 4px #0009);width:16px;height:20px;position:absolute;top:0;left:0}.studio-demo .sd-ring{z-index:4;opacity:0;border:2px solid #fff;border-radius:50%;width:26px;height:26px;margin:-13px 0 0 -13px;position:absolute}.studio-demo .sd-cap{text-align:center;font-family:var(--font-mono), ui-monospace, monospace;color:#a3a3a8;letter-spacing:.04em;padding:0 16px;font-size:12px;position:absolute;bottom:22px;left:0;right:0}.studio-demo .sd-cap b{color:#f4f4f5;font-weight:500}@media (prefers-reduced-motion:reduce){.studio-demo .sd-caret{animation:none}}
