:root{--bg: #0c0e1f;--bg2: #12152b;--panel: #181c38;--panel2: #20254a;--line: rgba(255, 255, 255, .08);--text: #eef0ff;--muted: #9aa3d6;--accent: #7c5cff;--accent2: #27e0ff;--go: #22d35b;--rec: #ff2d55;--warn: #ffd23f;--radius: 16px;--font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:var(--font);color:var(--text);background:radial-gradient(1200px 600px at 70% -10%,#2a1f6b 0%,transparent 60%),var(--bg);overflow:hidden;user-select:none}button{font-family:inherit;cursor:pointer;border:0;color:inherit}input{font-family:inherit}[hidden]{display:none!important}.topbar{height:68px;display:flex;align-items:center;gap:18px;padding:0 18px;background:#0c0e1fd9;border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}.brand{display:flex;align-items:center;gap:12px;min-width:230px}.brand-ball{width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#fff 0 8%,#8f7bff 22%,#4b2bd6 60%,#1b0f5c);box-shadow:0 0 18px #7c5cffb3;animation:spin 6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.brand-name{font-weight:900;font-size:19px;letter-spacing:.2px}.brand-sub{font-size:12px;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase}.mode-switch{display:flex;background:var(--panel);border-radius:14px;padding:4px;border:1px solid var(--line)}.mode{padding:9px 16px;border-radius:10px;background:transparent;font-weight:800;font-size:15px;color:var(--muted);transition:.2s}.mode.active{background:linear-gradient(135deg,var(--accent),#5a3be0);color:#fff;box-shadow:0 4px 14px #7c5cff73}.actions{display:flex;align-items:center;gap:10px;flex:1;justify-content:center}.top-right{display:flex;align-items:center;gap:8px}.top-right input[type=range]{width:90px}.btn-go,.btn-rec,.btn-primary,.btn-ghost,.btn-soft{border-radius:12px;font-weight:800;font-size:15px;padding:10px 18px;transition:transform .12s,filter .2s,background .2s}.btn-go{background:linear-gradient(135deg,#2ee86a,#13a84a);color:#04210f;box-shadow:0 4px 18px #22d35b66}.btn-go.stop{background:linear-gradient(135deg,#ffb238,#ff7a1a);box-shadow:0 4px 18px #ff8a0066}.btn-rec{background:linear-gradient(135deg,#ff4d6d,#e0103a);color:#fff;box-shadow:0 4px 18px #ff2d5566}.btn-primary{background:linear-gradient(135deg,var(--accent),#4f7bff);color:#fff;box-shadow:0 4px 16px #7c5cff66}.btn-ghost{background:var(--panel);border:1px solid var(--line)}.btn-soft{background:var(--panel2);border:1px solid var(--line);font-size:14px;padding:9px 12px}.btn-soft.sm{padding:6px 10px;font-size:13px}.btn-soft.danger,.tool.danger:hover{color:#ff8095}button:hover{filter:brightness(1.12)}button:active{transform:scale(.96)}button:disabled{opacity:.45;cursor:not-allowed;filter:none;transform:none}.wide{width:100%}.big{padding:16px;font-size:18px}.icon-btn{width:40px;height:40px;border-radius:12px;background:var(--panel);border:1px solid var(--line);font-size:18px;font-weight:900}.rec-badge{display:flex;align-items:center;gap:10px;background:#ff2d5526;border:1px solid rgba(255,45,85,.5);padding:6px 8px 6px 14px;border-radius:14px;font-weight:800}.rec-dot{width:12px;height:12px;border-radius:50%;background:var(--rec);animation:blink 1s infinite}@keyframes blink{50%{opacity:.2}}.rec-stop{background:var(--rec);padding:6px 12px;border-radius:10px;font-weight:800}.layout{display:flex;height:calc(100vh - 68px)}.sidebar{width:380px;min-width:330px;display:flex;flex-direction:column;background:var(--bg2);border-right:1px solid var(--line)}.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:10px;border-bottom:1px solid var(--line)}.tab{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:12px;background:transparent;font-size:20px;color:var(--muted)}.tab span{font-size:12px;font-weight:800}.tab.active{background:var(--panel2);color:#fff;box-shadow:inset 0 0 0 1px #7c5cff80}.panel{display:none;overflow-y:auto;padding:12px;gap:12px;flex-direction:column;flex:1}.panel.active{display:flex}.panel::-webkit-scrollbar{width:8px}.panel::-webkit-scrollbar-thumb{background:var(--panel2);border-radius:8px}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px}.card h3{margin:0 0 10px;font-size:14px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:800}.card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.card-head h3{margin:0}.mt{margin-top:14px!important}.muted{color:var(--muted);font-size:13px;line-height:1.45;margin:0 0 10px}.hint{font-size:12px;color:var(--muted)}.big-num{font-size:34px;font-weight:900;background:linear-gradient(135deg,#fff,var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}.pill-label{background:linear-gradient(135deg,var(--accent),#4f7bff);padding:5px 12px;border-radius:999px;font-weight:800;font-size:13px}.row-btns{display:flex;gap:8px;flex-wrap:wrap}.row-btns>*{flex:1}.text-in{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:11px 12px;color:var(--text);font-size:15px;font-weight:700;outline:none;user-select:text}.text-in:focus{border-color:var(--accent);box-shadow:0 0 0 3px #7c5cff40}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:10px;background:var(--bg2);outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 12%,var(--accent2) 30%,#1b7bff 100%);box-shadow:0 2px 10px #27e0ff99;cursor:grab;border:0}input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 12%,var(--accent2) 30%,#1b7bff 100%);border:0}.stepper{display:flex;align-items:center;gap:10px}.step-btn{width:40px;height:40px;border-radius:12px;background:var(--panel2);font-size:22px;font-weight:900;flex:none}.scale-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:6px;font-weight:700}.palettes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}.palette{height:46px;border-radius:12px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 2px #ffffff1f}.palette span{position:absolute;left:0;right:0;bottom:0;font-size:11px;font-weight:800;background:#00000073;padding:2px 0;text-align:center}.palette.active{box-shadow:0 0 0 3px #fff}.marble-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.mchip{display:flex;flex-direction:column;align-items:center;gap:4px;background:transparent;padding:4px 0;border-radius:12px;min-width:0}.mchip:hover{background:#ffffff0d}.mchip.editing{background:#7c5cff40}.mball{--c: #f33;width:46px;height:46px;border-radius:50%;position:relative;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95) 0 9%,transparent 22%),radial-gradient(circle at 35% 35%,color-mix(in srgb,var(--c) 55%,white) 0%,var(--c) 40%,color-mix(in srgb,var(--c) 45%,black) 100%);box-shadow:0 4px 10px #00000073,inset 0 -3px 6px #00000040;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:15px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8);transition:transform .15s}.mchip:hover .mball{transform:scale(1.1) rotate(-8deg)}.mname{font-size:11px;font-weight:700;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{padding:8px 12px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);font-weight:800;font-size:13px}.chip.active{background:linear-gradient(135deg,var(--accent),#4f7bff);border-color:transparent}.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--bg2);border-radius:12px;padding:4px;gap:4px}.seg button{padding:9px 4px;border-radius:9px;background:transparent;font-weight:800;font-size:13px;color:var(--muted)}.seg button.active{background:var(--panel2);color:#fff;box-shadow:inset 0 0 0 1px #7c5cff99}.stats{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}.stat{flex:1;background:var(--bg2);border-radius:12px;padding:8px;text-align:center;min-width:80px}.stat b{display:block;font-size:18px}.stat small{color:var(--muted);font-size:11px;font-weight:700}.themes{display:grid;grid-template-columns:1fr 1fr;gap:10px}.theme{height:74px;border-radius:14px;position:relative;overflow:hidden;text-align:left;padding:10px;font-weight:900;font-size:14px;box-shadow:inset 0 0 0 2px #ffffff1a}.theme .bars{position:absolute;left:10px;right:10px;bottom:12px;height:8px;border-radius:6px;transform:rotate(-6deg)}.theme .dot{position:absolute;width:16px;height:16px;border-radius:50%;right:18px;top:18px}.theme.active{box-shadow:0 0 0 3px #fff}.formats{display:grid;grid-template-columns:1fr 1fr;gap:10px}.format{background:var(--panel2);border-radius:14px;padding:10px;display:flex;align-items:center;gap:10px;text-align:left;border:1px solid var(--line)}.format .shape{background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:4px;flex:none}.format b{display:block;font-size:13px}.format small{color:var(--muted);font-size:11px;font-weight:700}.format.active{box-shadow:0 0 0 2px #fff}.toggle{display:flex;align-items:center;gap:12px;font-weight:700;font-size:14px;padding:7px 0;cursor:pointer}.toggle input{display:none}.toggle span{width:44px;height:26px;border-radius:26px;background:var(--bg2);position:relative;transition:.2s;flex:none;box-shadow:inset 0 0 0 1px var(--line)}.toggle span:after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;background:#9aa3d6;top:3px;left:3px;transition:.2s}.toggle input:checked+span{background:linear-gradient(135deg,var(--accent),var(--accent2))}.toggle input:checked+span:after{left:21px;background:#fff}.tips{margin:8px 0 0;padding-left:18px;color:var(--muted);font-size:12.5px;line-height:1.6}.saved-list{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow-y:auto}.saved{display:flex;align-items:center;gap:8px;background:var(--bg2);border-radius:12px;padding:8px 10px}.saved .info{flex:1;min-width:0}.saved .info b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.saved .info small{color:var(--muted);font-size:11px}.saved button{background:var(--panel2);border-radius:9px;padding:6px 10px;font-weight:800;font-size:12px}.empty{color:var(--muted);font-size:13px;text-align:center;padding:10px}.stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;padding:16px;min-width:0}.canvas-wrap{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%}#game{display:block;border-radius:18px;box-shadow:0 20px 60px #0009,0 0 0 1px #ffffff14;background:#000;touch-action:none}.toolbar{position:absolute;left:16px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:4px;background:#181c38eb;border:1px solid var(--line);padding:6px;border-radius:16px;backdrop-filter:blur(8px);box-shadow:0 10px 30px #00000080;z-index:5}.tool{width:64px;padding:6px 0;border-radius:11px;background:transparent;font-size:20px;display:flex;flex-direction:column;align-items:center;gap:1px}.tool span{font-size:10.5px;font-weight:800;color:var(--muted)}.tool.active{background:linear-gradient(135deg,var(--accent),#4f7bff)}.tool.active span{color:#fff}.tool.on span{color:var(--accent2)}.tool-sep{height:1px;background:var(--line);margin:4px 6px}.props{position:absolute;right:16px;top:16px;width:250px;background:#181c38f2;border:1px solid var(--line);padding:14px;border-radius:16px;z-index:5;box-shadow:0 10px 30px #00000080;display:flex;flex-direction:column;gap:10px}.props-head{font-weight:900;font-size:16px}.prop label{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);font-weight:800;margin-bottom:6px;text-transform:uppercase;letter-spacing:.6px}.prop label b{color:#fff}.build-hint{position:absolute;bottom:22px;left:50%;transform:translate(-50%);background:#0009;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:700;color:#cfd6ff;pointer-events:none;white-space:nowrap}.cp-pop{position:fixed;z-index:50;width:290px;background:#1c2040fa;border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:14px;box-shadow:0 24px 60px #0009;backdrop-filter:blur(14px);display:flex;flex-direction:column;gap:12px;animation:pop .16s ease-out}@keyframes pop{0%{transform:scale(.94);opacity:0}}.cp-head{display:flex;align-items:center;gap:12px}.cp-ball{--c: #f33;width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95) 0 9%,transparent 22%),radial-gradient(circle at 35% 35%,color-mix(in srgb,var(--c) 55%,white) 0%,var(--c) 40%,color-mix(in srgb,var(--c) 45%,black) 100%);box-shadow:0 6px 16px #00000080}.cp-head-text{flex:1;min-width:0}.cp-title{font-weight:900;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}.cp-name{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:7px 10px;color:#fff;font-weight:800;font-size:15px;outline:none;user-select:text}.cp-name:focus{border-color:var(--accent)}.cp-close{background:transparent;color:var(--muted);font-size:16px;align-self:flex-start}.cp-sv{position:relative;height:160px;border-radius:14px;cursor:crosshair;touch-action:none;overflow:hidden}.cp-sv-white{position:absolute;inset:0;background:linear-gradient(to right,#fff,#fff0)}.cp-sv-black{position:absolute;inset:0;background:linear-gradient(to top,#000,#0000)}.cp-sv-thumb{position:absolute;width:22px;height:22px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px #0006,0 2px 8px #00000080;transform:translate(-50%,-50%);pointer-events:none}.cp-hue{position:relative;height:18px;border-radius:10px;background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);cursor:pointer;touch-action:none}.cp-hue-thumb{position:absolute;top:50%;width:24px;height:24px;border-radius:50%;border:3px solid #fff;transform:translate(-50%,-50%);box-shadow:0 2px 8px #00000080;pointer-events:none}.cp-row{display:flex;align-items:center;gap:6px;background:var(--bg2);border-radius:12px;padding:4px 4px 4px 12px}.cp-hash{color:var(--muted);font-weight:900}.cp-hex{flex:1;min-width:0;background:transparent;border:0;color:#fff;font-weight:800;font-size:16px;letter-spacing:1px;outline:none;text-transform:uppercase;user-select:text}.cp-row button{width:34px;height:34px;border-radius:10px;background:var(--panel2);font-size:16px}.cp-quick{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}.cp-swatch{--c: #f00;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--c) 50%,white),var(--c) 55%,color-mix(in srgb,var(--c) 60%,black));box-shadow:inset 0 0 0 1px #fff3;padding:0}.cp-swatch:hover{transform:scale(1.2)}.cp-foot{display:flex;gap:8px}.cp-foot .btn-primary{flex:1}.cp-foot .btn-ghost{padding:10px 14px}#toasts{position:fixed;bottom:22px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:8px;z-index:100;align-items:center;pointer-events:none}.toast{background:#1c2040f5;border:1px solid rgba(255,255,255,.15);padding:11px 18px;border-radius:14px;font-weight:700;font-size:14px;box-shadow:0 10px 30px #00000080;opacity:0;transform:translateY(10px);transition:.3s;max-width:80vw}.toast.show{opacity:1;transform:none}.toast.good{border-color:#22d35b99}.toast.bad{border-color:#ff2d55b3}.modal{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:80;backdrop-filter:blur(4px);padding:16px}.modal-card{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:24px 28px;max-width:620px;width:100%;position:relative;max-height:90vh;overflow-y:auto}.modal-card h2{margin:0 0 12px}.modal-card h3{color:var(--muted);font-size:14px;text-transform:uppercase;letter-spacing:1px}.modal-card ol{line-height:1.7;padding-left:20px}.modal-x{position:absolute;right:14px;top:14px;background:var(--panel2);width:34px;height:34px;border-radius:10px}.keys{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:13px;color:var(--muted)}kbd{background:var(--bg2);border:1px solid var(--line);border-bottom-width:3px;border-radius:6px;padding:1px 6px;font-family:inherit;font-weight:800;color:#fff;font-size:12px}@media(max-width:1100px){.brand-sub,.top-right input[type=range]{display:none}.brand{min-width:0}.sidebar{width:330px;min-width:300px}}@media(max-width:820px){body{overflow:auto}.topbar{height:auto;flex-wrap:wrap;padding:10px 16px;gap:10px}.layout{flex-direction:column-reverse;height:auto}.sidebar{width:100%;min-width:0}.stage{height:70vh}.actions{justify-content:flex-start;flex-wrap:wrap}}