:root{--bg:#0b0c0e;--panel:#111316;--panel2:#181b20;--line:#282c33;--text:#f1f2f5;--muted:#7e848f;--accent:#c8b5ff;--accent2:#ffb38a}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Manrope,system-ui,sans-serif;overflow:hidden}.app{height:100vh;display:flex;flex-direction:column}header{height:62px;display:flex;align-items:center;border-bottom:1px solid var(--line);padding:0 24px}.brand{display:flex;align-items:center;gap:8px;color:var(--text);text-decoration:none;font-size:16px;font-weight:800;letter-spacing:-.5px}.brand>span:last-child{color:var(--accent)}.mark{display:flex;align-items:flex-end;gap:2px;height:18px}.mark i{width:4px;background:var(--accent);border-radius:5px}.mark i:nth-child(1){height:8px}.mark i:nth-child(2){height:13px}.mark i:nth-child(3){height:18px}.crumb{margin-left:88px;color:var(--muted);font:10px 'DM Mono',monospace;letter-spacing:1.2px}.crumb b{margin:0 10px;color:#454b55}.crumb strong{color:#dfe1e8;font-weight:400}.actions{margin-left:auto;display:flex;align-items:center;gap:9px}.ghost{border:0;background:none;color:#7f8792;font-size:20px;cursor:pointer}.export{border:0;border-radius:4px;background:var(--accent);color:#16131d;padding:10px 15px;font-weight:800;font-size:11px;cursor:pointer}.layout{display:grid;grid-template-columns:212px minmax(0,1fr) 315px;min-height:0;flex:1}.engines{border-right:1px solid var(--line);background:#0f1114;overflow:auto;padding-top:21px}.side-head{display:flex;justify-content:space-between;padding:0 17px 13px;color:var(--muted);font:10px 'DM Mono',monospace;letter-spacing:1.3px}.side-head button{border:0;background:none;color:#858c97;font-size:17px}.group{padding:13px 0 4px}.group h3{padding:0 17px 7px;margin:0;color:#606773;font:10px 'DM Mono',monospace;letter-spacing:1px}.engine{padding:8px 17px;color:#9da4ae;font-size:11px;cursor:pointer;border-left:2px solid transparent;display:flex;gap:9px;align-items:center}.engine:hover{background:#191c21;color:#edf0f5}.engine.active{background:#191821;color:var(--accent);border-left-color:var(--accent)}.engine em{font-style:normal;width:15px;color:#737b86}.work{padding:24px 28px 15px;display:flex;flex-direction:column;min-width:0}.work-head{display:flex;justify-content:space-between;align-items:end;padding-bottom:14px}.kicker{font:10px 'DM Mono',monospace;color:var(--muted);letter-spacing:1.5px}.work h1{font-size:18px;margin:6px 0 0;letter-spacing:-.5px}.frame{display:flex;align-items:center;gap:10px}.frame label{color:var(--muted);font:10px 'DM Mono',monospace;letter-spacing:1px}.frame select,.label select{background:var(--panel2);border:1px solid var(--line);color:#dfe2e8;border-radius:4px;padding:8px 10px;font:11px Manrope}.canvas-shell{position:relative;flex:1;min-height:260px;border:1px solid #303640;border-radius:3px;overflow:hidden;background:#13151a;display:flex;align-items:center;justify-content:center}.canvas-shell canvas{display:block;width:100%;height:100%}.canvas-info{position:absolute;right:12px;bottom:10px;color:#8b929c;font:10px 'DM Mono',monospace}.fullscreen{position:absolute;right:10px;top:10px;border:0;background:none;color:#b3bac4;font-size:20px;cursor:pointer}.transport{height:45px;display:flex;align-items:center;gap:11px}.transport button:first-child{width:27px;height:27px;border-radius:50%;border:0;background:var(--accent);color:#16131d;font-weight:800;font-size:11px;cursor:pointer}.transport span:not(.kicker):not(.pill){font:11px 'DM Mono',monospace;color:#ccd1db}.divider{height:15px;width:1px;background:var(--line)}.pill{border:1px solid #5d507d;color:var(--accent);padding:3px 6px;border-radius:3px;font:10px 'DM Mono',monospace}.spacer{flex:1}.inspector{border-left:1px solid var(--line);background:#101215;overflow:hidden;display:flex;flex-direction:column}.ins-head{padding:23px 21px 18px;border-bottom:1px solid var(--line)}.ins-head h2{font-size:17px;margin:6px 0 0}.ins-scroll{overflow:auto}.ins-scroll section{border-bottom:1px solid var(--line)}.sect{width:100%;display:flex;justify-content:space-between;border:0;background:none;color:#e1e4ea;padding:16px 21px;font-size:12px;font-weight:700;cursor:pointer}.sect span{color:#7f8791;font-size:14px}.body{padding:0 21px 18px}.swatches{display:flex;gap:6px;margin-bottom:13px}.swatch{height:32px;flex:1;border:1px solid #ffffff25;border-radius:3px;cursor:pointer}.color-line{display:flex;align-items:center;gap:8px;margin-bottom:16px}.color-line span{width:27px;height:27px;border-radius:4px;background:var(--accent);border:1px solid #71658f}.color-line code{flex:1;color:#dce0e8;font:11px 'DM Mono',monospace}.tiny{width:27px;height:27px;border:1px solid var(--line);border-radius:3px;background:var(--panel2);color:#b9bec9;cursor:pointer}.label{display:block;margin-top:14px;color:#858c97;font:10px 'DM Mono',monospace;letter-spacing:1px}.label b{float:right;color:#e0e3e9;font-weight:400;letter-spacing:0}.label select{display:block;width:100%;margin-top:7px}.label input{display:block;width:100%;margin-top:9px;accent-color:var(--accent);height:3px}.toggle-line{display:flex;justify-content:space-between;color:#d5d9e0;font-size:12px}.toggle{width:34px;height:20px;border:0;border-radius:20px;background:#373b44;padding:3px;cursor:pointer}.toggle i{display:block;width:14px;height:14px;border-radius:50%;background:#a1a6af}.toggle.active{background:#635584}.toggle.active i{margin-left:14px;background:var(--accent)}.presets{flex:0 0 150px;border-top:1px solid var(--line);background:#0f1114;padding:16px 28px}.preset-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:12px}.preset-head h2{font-size:14px;margin:5px 0 0}.preset-head em{font:10px 'DM Mono',monospace;color:#79818d;font-style:normal;margin-left:6px}.outline,.save{border:1px solid var(--line);border-radius:4px;background:var(--panel2);color:#adb3bd;padding:8px 11px;font-size:10px;cursor:pointer}.save{margin-left:6px;color:var(--accent);border-color:#655887}.preset-row{display:flex;gap:9px;overflow:hidden}.preset{height:70px;min-width:126px;border:1px solid var(--line);border-radius:4px;overflow:hidden;position:relative;cursor:pointer;transition:.2s}.preset:hover,.preset.active{border-color:var(--accent);transform:translateY(-2px)}.preset span{position:absolute;left:8px;bottom:6px;color:white;font:9px 'DM Mono',monospace;text-shadow:0 1px 6px #000}.drawer{position:fixed;z-index:10;right:0;top:0;height:100vh;width:320px;background:#191c21;border-left:1px solid #3a404b;padding:24px;transform:translateX(100%);transition:.25s;box-shadow:-15px 0 35px #0009}.drawer.open{transform:none}.drawer-head{display:flex;justify-content:space-between;align-items:center}.drawer-head h2{margin:0;font-size:20px}.drawer-head button{background:none;border:0;color:#bbc0ca;font-size:25px;cursor:pointer}.tabs{display:flex;border-bottom:1px solid var(--line);margin:24px -24px 20px;padding:0 24px}.tabs button{background:none;border:0;padding:11px 12px;color:#7f8791;font:10px 'DM Mono',monospace}.tabs button.active{color:var(--accent);border-bottom:2px solid var(--accent)}.download{width:100%;margin-top:24px;padding:13px;border:0;border-radius:4px;background:var(--accent);color:#17131f;font-weight:800;cursor:pointer}.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,20px);opacity:0;background:#e7dcff;color:#17131f;padding:9px 14px;border-radius:4px;font-size:11px;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}