:root{color-scheme:dark;--bg:#090a0d;--panel:#111216;--line:#24262d;--muted:#8a8e99;--text:#f5f5f7;--accent:#dfb8ff;--accent2:#8064ff;--radius:18px;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:radial-gradient(circle at 50% -20%,#242031 0,transparent 34%),var(--bg);color:var(--text);min-height:100vh}.app-shell{min-height:100vh}.topbar{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:rgba(9,10,13,.82);backdrop-filter:blur(20px);position:relative;z-index:3}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:34px;height:34px;border-radius:50%;background:conic-gradient(from 210deg,#ff5a91,#fcba55,#75dfd2,#8e7bff,#ff5a91);filter:saturate(1.2);box-shadow:0 0 25px #a36cff55}.brand div{display:grid;gap:1px}.brand strong{font-size:17px}.brand span:last-child{font-size:10px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}.top-actions{display:flex;gap:10px}.button,.icon-button{border:1px solid var(--line);border-radius:10px;color:var(--text);font-weight:650;cursor:pointer;background:#18191e;padding:11px 16px}.button:hover,.icon-button:hover{border-color:#4a4d59}.button.primary{color:#150e1d;background:linear-gradient(135deg,#f2dfff,#c58cff);border-color:#e5c8ff}.button.secondary{background:#17181d}.button.compact{padding:8px 10px;font-size:12px}.workspace{display:grid;grid-template-columns:290px minmax(420px,1fr) 250px;min-height:calc(100vh - 76px)}.panel{background:rgba(16,17,21,.88);padding:22px;border-right:1px solid var(--line)}.inspector-panel{border-right:0;border-left:1px solid var(--line)}.control-section{padding:0 0 21px;margin:0 0 21px;border-bottom:1px solid var(--line)}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.section-heading h2{font-size:12px;text-transform:uppercase;letter-spacing:.1em;margin:0;color:#d1d2d7}.section-heading>span{font-size:10px;color:var(--muted);letter-spacing:.08em}.segmented{display:grid;grid-template-columns:1fr 1fr;background:#090a0d;border:1px solid var(--line);border-radius:10px;padding:3px}.segmented button{border:0;background:transparent;color:var(--muted);padding:8px;border-radius:7px;cursor:pointer;font-weight:600}.segmented button.active{background:#24252b;color:white}select,input[type=url],dialog input:not([type=color]){width:100%;background:#17181d;color:white;border:1px solid var(--line);border-radius:10px;padding:11px;outline:none}select:focus,input:focus{border-color:#9c79cc}.effect-description{font-size:12px;line-height:1.5;color:var(--muted);padding-top:8px}.palette-list{display:grid;gap:8px}.palette-row{display:grid;grid-template-columns:34px 1fr 26px;align-items:center;gap:9px;background:#17181d;border:1px solid var(--line);padding:6px;border-radius:10px}.palette-swatch{width:34px;height:34px;border:0;padding:0;border-radius:8px;background:none;overflow:hidden;cursor:pointer}.palette-swatch::-webkit-color-swatch-wrapper{padding:0}.palette-swatch::-webkit-color-swatch{border:0;border-radius:7px}.palette-row span{font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.palette-orb{width:15px;height:15px;border-radius:50%;box-shadow:0 0 10px currentColor}.extract-row{display:flex;gap:7px;margin-top:10px}.extract-row label{flex:1;text-align:center}.icon-button{padding:8px;font-size:10px}.url-entry{display:flex;gap:6px;margin-top:8px}.url-entry input{font-size:11px;padding:8px}.status-text{font-size:10px;color:var(--muted);min-height:12px;margin:8px 0 0}.text-button{background:none;border:0;color:#d8b2ff;font-weight:650;cursor:pointer;padding:0}.preset-list{display:grid;gap:7px}.preset-empty{font-size:11px;color:var(--muted);padding:12px;border:1px dashed #30323a;border-radius:10px;text-align:center}.preset-item{display:grid;grid-template-columns:1fr auto;gap:4px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:#17181d}.preset-load{border:0;background:none;color:white;text-align:left;cursor:pointer;padding:0}.preset-load strong{display:block;font-size:12px}.preset-load span{display:block;color:var(--muted);font-size:10px;margin-top:2px}.preset-menu{border:0;background:none;color:var(--muted);cursor:pointer}.stage-area{min-width:0;padding:24px 28px;display:flex;flex-direction:column;justify-content:center;background:radial-gradient(circle at center,#191a20,transparent 65%)}.stage-meta{display:flex;justify-content:space-between;color:#888c96;font-size:10px;letter-spacing:.1em;margin:0 auto 10px;width:min(100%,1050px)}.live-dot{width:6px;height:6px;display:inline-block;border-radius:50%;background:#a8ffb5;box-shadow:0 0 8px #82ff97;margin-right:6px}.separator{padding:0 7px}.canvas-frame{position:relative;margin:auto;width:min(100%,1050px);aspect-ratio:16/9;background:#111;border:1px solid #32343c;border-radius:12px;overflow:hidden;box-shadow:0 25px 80px #0008;transition:width .3s,aspect-ratio .3s}.canvas-frame.portrait{width:min(55%,520px);aspect-ratio:9/16}.canvas-frame canvas{width:100%;height:100%;display:block}.orb-handles{position:absolute;inset:0}.orb-handle{position:absolute;width:28px;height:28px;border-radius:50%;border:2px solid white;transform:translate(-50%,-50%);cursor:grab;box-shadow:0 0 0 2px #0005,0 3px 12px #0008;transition:width .15s,height .15s}.orb-handle.selected{width:34px;height:34px;box-shadow:0 0 0 3px #fff4,0 0 25px currentColor}.orb-handle:active{cursor:grabbing}.center-safe{pointer-events:none;position:absolute;inset:19% 12%;border:1px dashed #fff3;border-radius:8px;opacity:0;transition:opacity .2s}.canvas-frame:hover .center-safe{opacity:1}.center-safe span{position:absolute;top:7px;left:8px;color:#fff6;font-size:8px;letter-spacing:.12em}.stage-help{text-align:center;color:#6f727c;font-size:11px;margin-top:13px}.selected-color{height:90px;border-radius:14px;display:flex;align-items:end;padding:12px;margin-bottom:24px;position:relative;overflow:hidden}.selected-color:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent,#0008)}.selected-color input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.selected-color div{position:relative;z-index:1;display:grid}.selected-color span{font-size:9px;letter-spacing:.1em;color:#ffffffaa}.selected-color strong{font-family:ui-monospace,monospace;font-size:13px}.range-control{display:grid;gap:8px;margin:0 0 20px}.range-control span{display:flex;justify-content:space-between;font-size:11px}.range-control output{color:var(--muted)}input[type=range]{width:100%;accent-color:#d3a7ff}.loop-card{display:flex;gap:11px;padding:13px;border:1px solid #4f3e5e;background:#1b1720;border-radius:12px;margin-top:28px}.loop-icon{font-size:29px;color:#d3a7ff}.loop-card div{display:grid;gap:3px}.loop-card strong{font-size:11px}.loop-card small{font-size:9px;line-height:1.4;color:var(--muted)}dialog{border:1px solid #343640;border-radius:18px;background:#14151a;color:white;padding:24px;box-shadow:0 30px 100px #000;min-width:360px}dialog::backdrop{background:#050506bb;backdrop-filter:blur(7px)}dialog h2{margin:0 0 5px}dialog p{color:var(--muted);font-size:12px;line-height:1.5;margin:0 0 18px}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}.render-dialog-content{text-align:center;width:min(420px,75vw)}.render-glow{width:65px;height:65px;border-radius:50%;margin:0 auto 18px;background:conic-gradient(#ff73bb,#ffc56b,#72e0d4,#7b6cff,#ff73bb);filter:blur(3px);animation:spin 2s linear infinite;box-shadow:0 0 35px #c976ff55}@keyframes spin{to{transform:rotate(360deg)}}.progress-track{height:7px;background:#262830;border-radius:9px;overflow:hidden;margin:22px 0 8px}.progress-track div{height:100%;width:0;background:linear-gradient(90deg,#916cff,#e9b8ff);transition:width .1s}.render-dialog-content>strong{font-size:11px;color:var(--muted)}#cancelRenderBtn{display:block;margin:18px auto 0}@media(max-width:1050px){.workspace{grid-template-columns:260px 1fr}.inspector-panel{display:none}}@media(max-width:760px){.workspace{display:block}.controls-panel{border-right:0}.stage-area{min-height:65vh}.topbar{padding:0 14px}.top-actions .secondary{display:none}}