:root{--bg-dark: #040310;--bg-panel: #040310;--bg-card: #11101B;--bg-input: #1D1C26;--border-color: #312F39;--border-subtle: #1D1C26;--border-bright: #434149;--text-primary: #F8F4EF;--text-secondary: #817F82;--text-muted: #68666C;--accent-primary: #576299;--accent-hover: #727BA9;--accent-glow: rgba(87, 98, 153, .25);--accent-bright: #8E94B8;--success: #22c55e;--warning: #f59e0b;--error: #ef4444;--ring: rgba(87, 98, 153, .5);font-family:Overused Grotesk,system-ui,-apple-system,sans-serif;line-height:1.5;font-weight:380;color-scheme:dark;color:var(--text-primary);background-color:var(--bg-dark);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;margin:0;padding:0}body{margin:0;min-height:100vh;overflow:hidden}#root{width:100vw;height:100vh}.app-container{display:flex;width:100vw;height:100vh;background:var(--bg-dark)}.editor-panel{width:380px;min-width:380px;height:100vh;background:var(--bg-panel);border-right:1px solid var(--border-subtle);display:flex;flex-direction:column;overflow:hidden}.editor-header{padding:20px 24px;border-bottom:1px solid var(--border-subtle);display:flex;align-items:center}.header-logo{height:24px;width:auto;display:block}.editor-content{flex:1;overflow-y:auto;padding:16px}.editor-content::-webkit-scrollbar{width:6px}.editor-content::-webkit-scrollbar-track{background:transparent}.editor-content::-webkit-scrollbar-thumb{background:var(--border-bright);border-radius:3px}.mode-toggle{display:flex;gap:1px;padding:2px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;margin-bottom:16px}.mode-btn{flex:1;padding:8px 14px;background:transparent;border:none;border-radius:6px;color:var(--text-muted);font-size:13px;font-weight:500;font-family:Overused Grotesk,sans-serif;cursor:pointer;transition:all .15s ease}.mode-btn:hover:not(.active){color:var(--text-secondary)}.mode-btn.active{background:var(--accent-primary);color:#fff}.section{margin-bottom:12px;border:1px solid var(--border-color);border-radius:8px;overflow:hidden}.section-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--bg-card);border:none;border-radius:0;cursor:pointer;transition:all .15s ease;margin-bottom:0}.section-header:hover{background:var(--bg-input)}.section-header h3{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin:0}.section-header .icon{width:14px;height:14px;color:var(--text-muted);transition:transform .15s ease}.section-header.open .icon{transform:rotate(180deg)}.section-content-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease-out;overflow:hidden}.section-content-wrapper.open{grid-template-rows:1fr}.section-content{min-height:0;overflow:hidden}.section-content-wrapper.open .section-content{padding:12px;background:var(--bg-dark);border-top:1px solid var(--border-color)}.control-group{margin-bottom:16px}.control-group:last-child{margin-bottom:0}.control-label{display:block;font-size:12px;font-weight:400;color:var(--text-secondary);margin-bottom:8px;font-family:Overused Grotesk,sans-serif}.control-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}.control-row label{flex:0 0 100px;font-size:12px;color:var(--text-secondary);font-weight:500}.control-row input[type=range]{flex:1;height:4px;-webkit-appearance:none;appearance:none;background:var(--bg-input);border-radius:2px;outline:none}.control-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;background:var(--accent-primary);border-radius:50%;cursor:pointer;box-shadow:0 0 10px var(--accent-glow);transition:transform .15s ease}.control-row input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}.control-row input[type=number]{width:60px;padding:6px 8px;background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:6px;color:var(--text-primary);font-size:12px;font-family:Overused Grotesk,sans-serif;text-align:center;outline:none;transition:border-color .2s ease}.control-row input[type=number]:focus{border-color:var(--accent-primary)}.control-row input[type=color]{width:36px;height:28px;padding:0;border:2px solid var(--border-subtle);border-radius:6px;cursor:pointer;overflow:hidden}.control-row input[type=color]::-webkit-color-swatch-wrapper{padding:0}.control-row input[type=color]::-webkit-color-swatch{border:none;border-radius:4px}.color-swatch{width:24px;height:24px;border-radius:4px;border:2px solid var(--border-subtle);cursor:pointer;transition:transform .15s ease}.color-swatch:hover{transform:scale(1.1)}.toggle-switch{position:relative;width:40px;height:22px;background:var(--bg-input);border-radius:11px;cursor:pointer;transition:background .2s ease}.toggle-switch.active{background:var(--accent-primary)}.toggle-switch:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s ease}.toggle-switch.active:after{transform:translate(18px)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 16px;font-size:13px;font-weight:500;font-family:Overused Grotesk,sans-serif;border:none;border-radius:6px;cursor:pointer;transition:all .15s ease}.btn-primary{background:var(--accent-primary);color:#fff}.btn-primary:hover{background:var(--accent-hover)}.btn-secondary{background:var(--bg-input);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background:var(--bg-card);border-color:var(--border-bright)}.btn-icon{padding:8px;background:var(--bg-card);border:1px solid var(--border-subtle)}.btn-icon:hover{background:var(--bg-input)}.btn-full{width:100%}.action-bar{padding:16px;border-top:1px solid var(--border-subtle);background:var(--bg-panel);display:flex;flex-direction:column;gap:10px}.action-bar .button-group{display:flex;gap:8px}.action-bar .button-group .btn{flex:1}.canvas-area{flex:1;height:100vh;position:relative;background:#111}.canvas-wrapper{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.canvas-controls{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;gap:8px;padding:8px;background:#13131ae6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border-subtle);border-radius:12px}.canvas-controls .btn{padding:10px 14px}.status-bar{position:absolute;top:16px;right:16px;padding:8px 14px;background:#13131ad9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border-subtle);border-radius:8px;font-size:11px;color:var(--text-muted)}.modal-overlay{position:fixed;inset:0;background:#000c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{width:90%;max-width:800px;max-height:90vh;background:var(--bg-panel);border:1px solid var(--border-subtle);border-radius:16px;overflow:hidden;animation:slideUp .3s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border-subtle)}.modal-header h2{font-size:16px;font-weight:600;margin:0}.modal-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--bg-input);border:none;border-radius:8px;color:var(--text-secondary);cursor:pointer;transition:all .2s ease}.modal-close:hover{background:var(--bg-card);color:var(--text-primary)}.modal-body{padding:20px;max-height:60vh;overflow:auto}.modal-footer{padding:16px 20px;border-top:1px solid var(--border-subtle);display:flex;gap:10px;justify-content:flex-end}.svg-preview-container{aspect-ratio:1;max-width:400px;margin:0 auto;background:#000;border:1px solid var(--border-subtle);border-radius:12px;overflow:hidden}.svg-preview-container svg{width:100%;height:100%}.ring-controls{display:grid;gap:12px}.ring-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:10px;overflow:hidden}.ring-card-header{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;transition:background .2s ease}.ring-card-header:hover{background:var(--bg-input)}.ring-indicator{width:12px;height:12px;border-radius:50%;box-shadow:0 0 8px currentColor}.ring-card-header span{flex:1;font-size:13px;font-weight:500}.ring-card-body{padding:12px;border-top:1px solid var(--border-subtle);display:none}.ring-card.open .ring-card-body{display:block}.presets-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.preset-btn{padding:10px;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:8px;color:var(--text-secondary);font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;text-align:center}.preset-btn:hover{background:var(--bg-input);color:var(--text-primary);border-color:var(--border-bright)}.preset-btn.active{border-color:var(--accent-primary);color:var(--accent-primary)}.export-progress{padding:16px;background:var(--bg-card);border-radius:10px;margin-top:12px}.progress-label{display:flex;justify-content:space-between;font-size:12px;color:var(--text-secondary);margin-bottom:8px}.progress-bar{height:6px;background:var(--bg-input);border-radius:3px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-primary) 0%,#8b5cf6 100%);border-radius:3px;transition:width .3s ease}.easing-select{width:100%;padding:8px 12px;background:var(--bg-input);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-size:12px;font-family:Overused Grotesk,sans-serif;cursor:pointer;transition:all .2s ease}.easing-select:hover{border-color:var(--accent-primary)}.easing-select:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 2px var(--accent-glow)}.text-input{width:100%;padding:8px 12px;background:var(--bg-input);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-size:12px;font-family:Overused Grotesk,monospace}.text-input:focus{outline:none;border-color:var(--accent-primary)}.bezier-editor{position:relative;width:100%;aspect-ratio:1;background:var(--bg-card);border:1px solid var(--border-color);border-radius:6px;overflow:hidden;cursor:crosshair;margin-top:8px}.bezier-editor svg{width:100%;height:100%}.bezier-grid{stroke:var(--border-subtle);stroke-width:.5}.bezier-diagonal{stroke:var(--text-muted);stroke-width:.5;stroke-dasharray:3 3;opacity:.4}.bezier-curve{fill:none;stroke:var(--accent-primary);stroke-width:1.5;stroke-linecap:round}.bezier-handle-line{stroke:var(--text-muted);stroke-width:.5;opacity:.5}.bezier-handle{fill:var(--accent-primary);stroke:#fff;stroke-width:1.5;cursor:grab;transition:r .15s ease}.bezier-handle:hover{r:6}.bezier-handle:active{cursor:grabbing}.bezier-endpoint{fill:var(--text-secondary);stroke:var(--border-color);stroke-width:.5}.bezier-values{display:flex;gap:6px;margin-top:8px}.bezier-value-input{flex:1;padding:6px 4px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);font-size:10px;font-family:Overused Grotesk,monospace;text-align:center}.bezier-value-input:focus{outline:none;border-color:var(--accent-primary)}.bezier-help-text{display:block;color:var(--text-muted);font-size:10px;margin-top:6px;text-align:center}@media(max-width:900px){.app-container{flex-direction:column}.editor-panel{width:100%;min-width:unset;height:auto;max-height:50vh}.canvas-area{height:50vh}}.github-button{position:fixed;bottom:20px;right:20px;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;background:#238636;color:#fff;font-size:13px;font-weight:500;font-family:Overused Grotesk,sans-serif;text-decoration:none;border-radius:6px;transition:all .15s ease;z-index:1000;box-shadow:0 4px 12px #0000004d}.github-button:hover{background:#2ea043;transform:translateY(-1px);box-shadow:0 6px 16px #0006}.github-button svg{flex-shrink:0}