:root{--bg: #0a0b0e;--panel: #0f1114;--panel-2: #17191f;--panel-3: #1d2028;--border: rgba(255, 255, 255, .06);--border-strong: rgba(255, 255, 255, .12);--text: #f2f4f8;--text-dim: #9aa0b2;--text-faint: #6b7183;--accent: #0ef0cf;--brand-green: #3dff70;--brand-mint: #0ef0cf;--brand-cream: #e6efe6;--accent-bright: #3ef7dc;--track: #22252e;--radius: 12px;--sidebar-w: 320px;font-family:DM Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{height:100%}body{background:var(--bg);color:var(--text);font-size:14px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:hidden}#app{display:flex}::selection{background:#0ef0cf4d}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}#sidebar{width:var(--sidebar-w);flex:0 0 var(--sidebar-w);height:100vh;height:100dvh;background:linear-gradient(180deg,#101218 0%,var(--panel) 30%);border-right:1px solid var(--border);display:flex;flex-direction:column;position:relative;z-index:2;box-shadow:8px 0 32px #00000059}.brand{display:flex;align-items:center;gap:12px;padding:22px 22px 18px}.brand-mark{width:36px;height:36px;flex:0 0 36px;border-radius:50%;filter:saturate(1.1);box-shadow:0 0 26px #0ef0cf47}.brand h1{font-size:16px;font-weight:650;letter-spacing:-.015em}.brand p{font-size:11.5px;color:var(--text-faint);margin-top:2px;letter-spacing:.01em}.sidebar-scroll{flex:1;overflow-y:auto;padding:0 22px 28px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}.sidebar-scroll::-webkit-scrollbar{width:8px}.sidebar-scroll::-webkit-scrollbar-thumb{background:#ffffff14;border-radius:4px;border:2px solid var(--panel)}.panel{padding:20px 0}.panel+.panel{border-top:1px solid var(--border)}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.panel-head h2{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--text-faint)}.hint{margin-top:12px;font-size:12px;line-height:1.55;color:var(--text-faint)}.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px 14px;border:none;border-radius:var(--radius);font-size:13.5px;font-weight:560;font-family:inherit;letter-spacing:.005em;cursor:pointer;transition:filter .15s ease,transform .12s ease,box-shadow .2s ease}.btn:active{transform:scale(.96)}.btn:disabled{opacity:.55;cursor:default}.btn-primary{background:linear-gradient(135deg,var(--brand-green) 0%,var(--brand-mint) 100%);color:#04170f;font-weight:640;box-shadow:inset 0 1px #ffffff59,0 1px 2px #0006,0 6px 20px #0ef0cf38}.btn-primary:hover{filter:brightness(1.07);box-shadow:inset 0 1px #ffffff59,0 1px 2px #0006,0 8px 26px #0ef0cf57}.btn-ghost{margin-top:10px;background:transparent;color:var(--text-dim);border:1px solid var(--border-strong)}.btn-ghost:hover{color:var(--text);border-color:#ffffff38;background:#ffffff08}.btn-icon{display:flex;align-items:center;justify-content:center;width:27px;height:27px;border:1px solid var(--border-strong);border-radius:8px;background:transparent;color:var(--text-dim);cursor:pointer;transition:color .15s,border-color .15s,background .15s}.btn-icon:hover{color:var(--text);border-color:#ffffff3d;background:#ffffff0a}.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.preset{padding:10px;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;color:var(--text-dim);font-size:12.5px;font-weight:550;font-family:inherit;cursor:pointer;transition:all .15s ease}.preset:hover{color:var(--text);border-color:var(--border-strong);background:var(--panel-3)}.preset.active{background:linear-gradient(180deg,#0ef0cf29,#3dff7012);border-color:#0ef0cf80;color:#9ff5e3;box-shadow:inset 0 1px #ffffff0f}.effect-amt{margin-top:16px}.effect-amt[hidden]{display:none}.panel-actions{display:flex;gap:6px}.swatches{display:flex;flex-direction:column;gap:8px}.color-row{display:flex;align-items:center;gap:7px;padding:5px 7px 5px 4px;border-radius:12px;background:var(--panel-2);border:1px solid var(--border);transition:transform .16s ease,border-color .15s,box-shadow .15s}.color-row.dragging{position:relative;z-index:2;transition:border-color .15s,box-shadow .15s;border-color:var(--border-strong);box-shadow:0 10px 26px #0000008c}.color-grip{display:flex;align-items:center;justify-content:center;width:18px;height:30px;flex-shrink:0;padding:0;border:none;border-radius:6px;background:transparent;color:var(--text-faint);cursor:grab;touch-action:none}.color-grip:hover{color:var(--text-dim)}.color-row.dragging .color-grip{cursor:grabbing}.color-chip{position:relative;width:30px;height:30px;flex-shrink:0;border-radius:8px;overflow:hidden;cursor:pointer;box-shadow:inset 0 0 0 1px #ffffff29;transition:box-shadow .13s ease}.color-chip:hover{box-shadow:inset 0 0 0 1px #ffffff59}.color-chip input[type=color]{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.hex-field{flex:1;min-width:0;display:flex;align-items:center;gap:1px;padding:5px 8px;background:var(--panel);border:1px solid var(--border);border-radius:8px;font-variant-numeric:tabular-nums;transition:border-color .15s}.hex-field:focus-within{border-color:#0ef0cf8c}.hex-field.invalid{border-color:#ff6b6ba6}.hex-field .hash{color:var(--text-faint);font-size:12px}.color-hex{width:100%;min-width:0;border:none;background:transparent;outline:none;color:var(--text);font-family:inherit;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase}.color-actions{display:flex;gap:2px;flex-shrink:0}.color-act{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:6px;background:transparent;color:var(--text-faint);cursor:pointer;transition:color .15s,background .15s}.color-act:hover:not(:disabled){color:var(--text);background:#ffffff0f}.color-act:disabled{opacity:.3;cursor:default}.color-add{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:9px;border-radius:12px;border:1px dashed rgba(255,255,255,.18);background:transparent;color:var(--text-faint);font-size:12.5px;font-family:inherit;cursor:pointer;transition:color .15s,border-color .15s,background .15s}.color-add:hover{color:var(--text);border-color:#ffffff59;background:#ffffff08}.sliders{display:flex;flex-direction:column;gap:16px}.slider-row label{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;color:var(--text-dim);margin-bottom:8px}.slider-row label .val{color:var(--text);font-variant-numeric:tabular-nums;font-size:11.5px;font-weight:550;background:var(--panel-2);border:1px solid var(--border);border-radius:6px;padding:1px 7px}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;background:var(--track);outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;border:none;box-shadow:0 1px 4px #00000080,0 0 0 1px #00000026;transition:transform .12s ease,box-shadow .12s ease}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 1px 6px #00000080,0 0 0 5px #5b7cfa2e}input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:none;box-shadow:0 1px 4px #00000080}.export-row{margin-bottom:12px}.select{width:100%;padding:10px 13px;background:var(--panel-2);border:1px solid var(--border-strong);border-radius:10px;color:var(--text);font-size:13px;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:border-color .15s,background .15s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa0b2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}.select:hover{border-color:#ffffff38;background-color:var(--panel-3)}#stage{position:relative;flex:1;height:100vh;height:100dvh;overflow:hidden;background:#000}#gl{width:100%;height:100%;display:block;cursor:grab;touch-action:none}#gl.dragging{cursor:grabbing}.export-frame{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:1.5px solid rgba(255,255,255,.85);border-radius:4px;box-shadow:0 0 0 9999px #00000073,0 0 24px #0000004d;pointer-events:none;opacity:0;transition:opacity .25s ease}.export-frame.show{opacity:1}.export-frame[hidden]{display:none}.ef-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;padding:5px 12px;border-radius:100px;background:#0a0b0ebf;border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#ffffffeb;font-size:11.5px;font-weight:550;font-variant-numeric:tabular-nums;letter-spacing:.02em}.drag-hint{position:absolute;bottom:24px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:9px;padding:9px 16px;border-radius:100px;background:#0a0b0e8c;border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#ffffffd9;font-size:12.5px;pointer-events:none;opacity:1;transition:opacity .6s ease}.drag-hint.hidden{opacity:0}.toast{position:absolute;top:20px;left:50%;transform:translate(-50%) translateY(-8px);padding:9px 18px;border-radius:100px;background:#0a0b0eb3;border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;font-size:12.5px;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}.sheet-grip,.sheet-backdrop{display:none}@media(max-width:760px){:root{--sheet-peek: calc(58px + env(safe-area-inset-bottom)) }#app{display:block}#stage{position:fixed;top:0;right:0;bottom:0;left:0;height:100dvh}#sidebar{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;flex:none;height:auto;max-height:min(78dvh,640px);padding-bottom:env(safe-area-inset-bottom);border-right:none;border-top:1px solid var(--border-strong);border-radius:22px 22px 0 0;box-shadow:0 -18px 60px #0000008c;z-index:5;transform:translateY(calc(100% - var(--sheet-peek)));transition:transform .42s cubic-bezier(.32,.72,0,1);will-change:transform}#sidebar.dragging{transition:none}body.sheet-open #sidebar{transform:translateY(0)}.sheet-grip{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;padding:9px 16px 13px;background:transparent;border:none;color:var(--text);font-family:inherit;cursor:grab;touch-action:none;flex-shrink:0}.grip-bar{width:40px;height:4px;border-radius:2px;background:#ffffff3d}.grip-label{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;letter-spacing:-.005em}.grip-chevron{color:var(--text-dim);transition:transform .42s cubic-bezier(.32,.72,0,1)}body.sheet-open .grip-chevron{transform:rotate(180deg)}.sheet-backdrop{display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:4;background:#06080a73;opacity:0;pointer-events:none;transition:opacity .35s ease}body.sheet-open .sheet-backdrop{opacity:1;pointer-events:auto}.brand{display:none}.sidebar-scroll{padding:0 18px 20px;overflow-y:hidden;overscroll-behavior:contain}body.sheet-open .sidebar-scroll{overflow-y:auto}.panel{padding:16px 0}body.locked #sidebar{top:0;height:100dvh;max-height:none;padding-bottom:0;transform:none;transition:none;background:transparent;border:none;border-radius:0;box-shadow:none;pointer-events:none}body.locked .sheet-grip,body.locked .sheet-backdrop,body.locked .sidebar-scroll{display:none}body #sidebar-lock{position:absolute;inset:auto;top:calc(env(safe-area-inset-top) + 14px);left:14px;width:min(340px,calc(100vw - 28px));max-height:calc(100dvh - env(safe-area-inset-top) - 28px);overflow-y:auto;align-items:flex-start;padding:18px;pointer-events:auto;background:#0d0f13d1;border:1px solid var(--border-strong);border-radius:18px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 14px 44px #00000080}.drag-hint{bottom:calc(var(--sheet-peek) + 18px)}.toast{top:calc(14px + env(safe-area-inset-top))}}@media(pointer:coarse){input[type=range]{height:6px;border-radius:3px}input[type=range]::-webkit-slider-thumb{width:22px;height:22px}input[type=range]::-moz-range-thumb{width:22px;height:22px}.color-chip{width:38px;height:38px;border-radius:10px}.color-grip{width:26px;height:38px}.color-act{width:34px;height:34px}.color-add{padding:12px}.btn-icon{width:36px;height:36px}.preset{padding:12px 10px}}body.locked .sidebar-scroll{filter:blur(7px) saturate(.7);opacity:.45;pointer-events:none;-webkit-user-select:none;user-select:none}body.locked .drag-hint{display:none}body.locked #gl{cursor:default}#sidebar-lock{position:absolute;right:0;bottom:0;left:0;top:76px;z-index:3;display:flex;align-items:center;padding:0 22px 28px;overflow-y:auto}#sidebar-lock[hidden]{display:none}.lock-inner{width:100%}.lock-badge{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-bottom:14px;border-radius:12px;border:1px solid var(--border-strong);background:var(--panel-2);color:var(--text-dim)}#lock-title{font-size:15px;font-weight:650;letter-spacing:-.01em;margin-bottom:6px}#lock-text{margin:0 0 16px}#pricing{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}#pricing[hidden]{display:none}.plan-option{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--border-strong);background:var(--panel-2);color:var(--text);font-family:inherit;cursor:pointer;transition:border-color .15s,background .15s}.plan-option:hover:not(:disabled){border-color:var(--brand-mint);background:var(--panel-3)}.plan-option:disabled{opacity:.55;cursor:wait}.plan-name{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}.plan-save{font-style:normal;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 7px;border-radius:999px;color:#08130b;background:var(--brand-green)}.plan-price{font-size:14px;font-weight:700;white-space:nowrap}.plan-per{font-size:11px;font-weight:500;color:var(--text-dim)}.plan-note{margin:2px 0 0}#account{display:flex;align-items:center;gap:12px;padding:14px 22px;border-top:1px solid var(--border)}#account[hidden]{display:none}#user-button{display:flex;flex-shrink:0}.account-info{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}#account-email{font-size:12px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-plan{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--brand-mint);white-space:nowrap}.btn-billing{width:auto;margin-top:0;margin-left:auto;font-size:12px;padding:6px 12px;flex-shrink:0}[hidden]{display:none!important}.export-actions{display:flex;gap:8px;margin-top:10px}.export-actions #btn-export{flex:1}.btn-square{flex:0 0 46px;width:46px;padding:11px 0}.share-row{display:flex;gap:8px}.share-row .btn{flex:1;margin-top:10px}