@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&family=Space+Grotesk:wght@400;500&display=swap";:root{--bg-dark: #030308;--card-bg: rgba(10, 10, 20, .45);--card-border: rgba(255, 255, 255, .08);--text-primary: #f0f0f5;--text-secondary: #9999b3;--accent: #5e6efc;--accent-glow: rgba(94, 110, 252, .4);--font-sans: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "Space Grotesk", monospace}*{box-sizing:border-box;margin:0;padding:0}body,html{width:100%;height:100%;overflow:hidden;background-color:var(--bg-dark);font-family:var(--font-sans);color:var(--text-primary);user-select:none;-webkit-user-select:none}#canvas-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.vignette-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,transparent 30%,rgba(2,2,5,.7) 70%,rgba(0,0,2,.95) 100%);pointer-events:none;z-index:2}.ui-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10;display:flex;justify-content:flex-end;padding:2rem}.title-container{position:absolute;top:2rem;left:2rem;pointer-events:auto}.title-container h1{font-size:1.8rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;background:linear-gradient(135deg,#fff,#a5b4fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.25rem}.title-container p{font-size:.85rem;color:var(--text-secondary);letter-spacing:.05em;font-family:var(--font-mono)}.fps-counter{position:absolute;top:6.5rem;left:2rem;display:flex;align-items:center;gap:.5rem;background:var(--card-bg);border:1px solid var(--card-border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:10px;padding:.35rem .75rem;pointer-events:none;box-shadow:0 4px 20px #0006,inset 0 1px #ffffff12;transition:border-color .4s ease}.fps-counter.fps-good{border-color:#4ade8059}.fps-counter.fps-ok{border-color:#fbbf2459}.fps-counter.fps-bad{border-color:#f8717159}.fps-label{font-family:var(--font-mono);font-size:.65rem;font-weight:500;letter-spacing:.12em;color:var(--text-secondary);text-transform:uppercase}.fps-value{font-family:var(--font-mono);font-size:1rem;font-weight:600;color:#fff;min-width:2.2ch;text-align:right;transition:color .4s ease}.fps-counter.fps-good .fps-value{color:#4ade80}.fps-counter.fps-ok .fps-value{color:#fbbf24}.fps-counter.fps-bad .fps-value{color:#f87171}.control-panel{width:320px;height:fit-content;max-height:calc(100vh - 4rem);background:var(--card-bg);border:1px solid var(--card-border);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:20px;padding:1.75rem;pointer-events:auto;overflow-y:auto;box-shadow:0 20px 50px #00000080,inset 0 1px #ffffff1a;align-self:center;transition:opacity .3s ease,transform .3s ease}.control-panel::-webkit-scrollbar{width:6px}.control-panel::-webkit-scrollbar-track{background:transparent}.control-panel::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}.control-panel h2{font-size:1.1rem;font-weight:600;letter-spacing:.05em;margin-bottom:1.5rem;padding-bottom:.75rem;border-bottom:1px solid rgba(255,255,255,.05);text-transform:uppercase;color:#fff}.control-group{margin-bottom:1.25rem}.control-label{display:flex;justify-content:space-between;font-size:.75rem;font-weight:500;color:var(--text-secondary);margin-bottom:.5rem;letter-spacing:.03em;font-family:var(--font-mono)}.control-value{color:#fff;font-weight:600}input[type=range]{-webkit-appearance:none;width:100%;height:4px;background:#ffffff1a;border-radius:2px;outline:none;transition:background .2s}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 0 10px var(--accent-glow);transition:transform .1s,background-color .1s}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);background:var(--accent)}.color-picker-container{display:flex;align-items:center;gap:1rem}input[type=color]{-webkit-appearance:none;border:none;width:32px;height:32px;border-radius:50%;cursor:pointer;background:none}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:1px solid var(--card-border);border-radius:50%;box-shadow:0 0 8px #0000004d}.sol-group{margin-top:1rem}#size-curve-canvas{display:block;width:100%;height:72px;border-radius:8px;border:1px solid var(--card-border);background:#04040ed9;cursor:grab;touch-action:none;margin-top:.35rem;transition:border-color .25s}#size-curve-canvas:hover{border-color:#a5b4fc4d}#size-curve-canvas:active{cursor:grabbing}.curve-axis-labels{display:flex;justify-content:space-between;font-size:.6rem;color:var(--text-secondary);font-family:var(--font-mono);margin-top:.2rem;opacity:.5;pointer-events:none}.btn-mini{background:none;border:1px solid var(--card-border);border-radius:4px;color:var(--text-secondary);padding:.1rem .4rem;cursor:pointer;font-size:.75rem;line-height:1.4;transition:color .2s,border-color .2s;pointer-events:auto}.btn-mini:hover{color:#fff;border-color:#ffffff4d}select{width:100%;background:#ffffff0d;border:1px solid var(--card-border);border-radius:8px;padding:.5rem .75rem;color:#fff;outline:none;cursor:pointer;font-family:var(--font-sans);font-size:.85rem;transition:border-color .2s}select:focus{border-color:var(--accent)}option{background:#0b0b14;color:#fff}.btn{width:100%;background:linear-gradient(135deg,var(--accent) 0%,#8b5cf6 100%);border:none;border-radius:8px;padding:.65rem 1rem;color:#fff;font-family:var(--font-sans);font-weight:600;font-size:.85rem;cursor:pointer;box-shadow:0 4px 15px var(--accent-glow);transition:transform .2s,box-shadow .2s,opacity .2s;margin-top:.5rem}.btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #5e6efc99}.btn:active{transform:translateY(0)}.checkbox-container{display:flex;align-items:center;gap:.5rem;cursor:pointer;color:var(--text-secondary);font-size:.8rem;font-family:var(--font-mono)}.checkbox-container input{cursor:pointer}.loader-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--bg-dark);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;transition:opacity .8s cubic-bezier(.25,1,.5,1),pointer-events .8s}.loader-spinner{position:relative;width:80px;height:80px;margin-bottom:2rem}.loader-spinner:before,.loader-spinner:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;border:2px solid transparent;border-top-color:var(--accent)}.loader-spinner:before{animation:spin 1.5s cubic-bezier(.68,-.55,.27,1.55) infinite}.loader-spinner:after{border-top-color:#a5b4fc;opacity:.5;animation:spin 3s linear infinite reverse}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loader-text{font-size:.9rem;letter-spacing:.2em;text-transform:uppercase;font-family:var(--font-mono);color:var(--text-secondary);animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.4}50%{opacity:1}}.mobile-drawer{display:none}.settings-toggle{width:56px;height:56px;border-radius:50%;background:var(--card-bg);border:1px solid var(--card-border);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 32px #00000080,inset 0 1px #ffffff1a;transition:border-color .3s,box-shadow .3s;flex-shrink:0;position:relative;overflow:hidden}.settings-toggle:hover{border-color:var(--accent);box-shadow:0 8px 32px #5e6efc4d,inset 0 1px #ffffff1a}.settings-toggle svg{position:absolute;transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .35s ease}.settings-toggle .icon-close{opacity:0;transform:scale(.5) rotate(-45deg)}.settings-toggle.active .icon-gear{opacity:0;transform:scale(.5) rotate(90deg)}.settings-toggle.active .icon-close{opacity:1;transform:scale(1) rotate(0)}@media (max-width: 800px){.ui-container{display:block;pointer-events:none}.title-container{position:absolute;top:2rem;left:1.5rem;text-align:left}.control-panel{display:none}.mobile-drawer{display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:0;height:calc(50vh + 72px);transform:translateY(50vh);transition:transform .48s cubic-bezier(.16,1,.3,1);z-index:200;pointer-events:none}.mobile-drawer.open{transform:translateY(0)}.drawer-header{height:72px;display:flex;align-items:center;justify-content:flex-end;padding:0 1.5rem;pointer-events:none}.settings-toggle{pointer-events:auto}.drawer-panel{flex:1;overflow-y:auto;background:#080814bf;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-top:1px solid rgba(255,255,255,.1);pointer-events:auto}.drawer-panel .control-panel{display:block;width:100%;max-height:100%;height:100%;border-radius:0;border:none;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;padding:1.5rem;overflow-y:auto;align-self:auto}}