:root{--color-primary: #00D4FF;--color-primary-dark: #0099CC;--color-primary-light: #66E5FF;--color-primary-glow: rgba(0, 212, 255, .4);--color-secondary: #0066FF;--color-accent: #00FF88;--color-bg-primary: #0A0A0F;--color-bg-secondary: #12121A;--color-bg-tertiary: #1A1A24;--color-bg-panel: rgba(18, 18, 26, .95);--color-text-primary: #FFFFFF;--color-text-secondary: rgba(255, 255, 255, .7);--color-text-muted: rgba(255, 255, 255, .6);--color-border: rgba(0, 212, 255, .2);--color-border-subtle: rgba(255, 255, 255, .08);--color-border-hover: rgba(0, 212, 255, .4);--color-success: #00FF88;--color-warning: #FFB800;--color-error: #FF4466;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .35s ease;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", "SF Mono", "Cascadia Code", monospace}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-sans);background:var(--color-bg-primary);color:var(--color-text-primary);overflow:hidden;height:100vh;line-height:1.5}#app{width:100%;height:100%;position:relative}#canvas{width:100%;height:100%;display:block;cursor:grab;background:radial-gradient(ellipse at center,var(--color-bg-secondary) 0%,var(--color-bg-primary) 100%)}#canvas:active{cursor:grabbing}.hidden{display:none!important}.top-bar{position:absolute;top:0;left:0;right:0;background:linear-gradient(180deg,#0a0a0ff2,#0a0a0fd9);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:var(--spacing-md) var(--spacing-xl);display:flex;justify-content:space-between;align-items:center;z-index:20;border-bottom:1px solid var(--color-border)}.title{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 30px var(--color-primary-glow)}.title:before{content:none}.stats{display:flex;gap:var(--spacing-xl)}.stat-item{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-md);background:var(--color-bg-tertiary);border-radius:var(--radius-md);border:1px solid var(--color-border-subtle)}.stat-label{color:var(--color-text-muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}.stat-value{font-weight:600;font-family:var(--font-mono);font-size:.9rem;color:var(--color-primary)}.side-panel{position:absolute;top:64px;right:0;width:340px;height:calc(100% - 64px);background:var(--color-bg-panel);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-left:1px solid var(--color-border);overflow-y:auto;z-index:10;transition:transform var(--transition-normal)}.side-panel::-webkit-scrollbar{width:6px}.side-panel::-webkit-scrollbar-track{background:transparent}.side-panel::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}.side-panel::-webkit-scrollbar-thumb:hover{background:var(--color-border-hover)}.side-panel.collapsed{transform:translate(100%)}.toggle-panel-btn{position:absolute;top:50%;right:340px;transform:translateY(-50%);width:24px;height:72px;background:var(--color-bg-panel);border:1px solid var(--color-border);border-right:none;border-radius:var(--radius-md) 0 0 var(--radius-md);color:var(--color-text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);z-index:11}.toggle-panel-btn:hover{background:var(--color-bg-tertiary);color:var(--color-primary);border-color:var(--color-border-hover)}.side-panel.collapsed+.toggle-panel-btn{right:0;border-right:1px solid var(--color-border);border-left:none;border-radius:0 var(--radius-md) var(--radius-md) 0}.side-panel.collapsed+.toggle-panel-btn svg{transform:rotate(180deg)}.toggle-panel-btn svg{width:16px;height:16px;transition:transform var(--transition-normal)}.panel-section{padding:var(--spacing-lg);border-bottom:1px solid var(--color-border-subtle)}.panel-section h3{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--spacing-md);color:var(--color-text-secondary);display:flex;align-items:center;gap:var(--spacing-sm)}.panel-section h3:before{content:"";width:3px;height:14px;background:var(--color-primary);border-radius:2px}.panel-section h4{font-size:.75rem;font-weight:500;margin-bottom:var(--spacing-sm);color:var(--color-text-muted)}.drop-zone{border:2px dashed var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-xl);text-align:center;transition:all var(--transition-normal);cursor:pointer;background:linear-gradient(135deg,transparent 0%,rgba(0,212,255,.02) 100%);position:relative;overflow:hidden}.drop-zone:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,var(--color-primary-glow) 0%,transparent 70%);opacity:0;transition:opacity var(--transition-normal)}.drop-zone:hover{border-color:var(--color-border-hover);background:linear-gradient(135deg,transparent 0%,rgba(0,212,255,.05) 100%)}.drop-zone:hover:before{opacity:.3}.drop-zone.drag-over{border-color:var(--color-primary);background:#00d4ff14;box-shadow:0 0 30px var(--color-primary-glow)}.drop-zone.drag-over:before{opacity:.5}.drop-icon{width:48px;height:48px;margin-bottom:var(--spacing-md);color:var(--color-primary);opacity:.6;transition:all var(--transition-normal)}.drop-zone:hover .drop-icon{opacity:1;transform:translateY(-4px)}.drop-text{font-size:.95rem;color:var(--color-text-primary);margin-bottom:var(--spacing-xs);font-weight:500}.drop-subtext{font-size:.8rem;color:var(--color-text-muted);margin-bottom:var(--spacing-md)}.button{padding:var(--spacing-sm) var(--spacing-lg);border:none;border-radius:var(--radius-md);font-size:.85rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast);outline:none;font-family:var(--font-sans);letter-spacing:.02em}.button-primary{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);color:var(--color-bg-primary);box-shadow:0 4px 16px var(--color-primary-glow);position:relative;overflow:hidden}.button-primary:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.button-primary:hover{transform:translateY(-2px);box-shadow:0 6px 24px var(--color-primary-glow)}.button-primary:hover:before{left:100%}.button-primary:active{transform:translateY(0)}.button-secondary{background:transparent;color:var(--color-text-primary);border:1px solid var(--color-border)}.button-secondary:hover{background:#00d4ff1a;border-color:var(--color-border-hover)}.button-disabled,.button:disabled{background:var(--color-bg-tertiary)!important;color:var(--color-text-muted)!important;border-color:var(--color-border-subtle)!important;box-shadow:none!important;cursor:not-allowed!important;opacity:.5;pointer-events:none}.button-disabled:before{display:none}.tool-tab:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.help-text{font-size:.8rem;line-height:1.7}.help-text p{margin-bottom:var(--spacing-sm);color:var(--color-text-secondary);display:flex;align-items:baseline;gap:var(--spacing-sm)}.help-text strong{color:var(--color-primary);font-weight:500;font-family:var(--font-mono);font-size:.75rem;min-width:80px}.loading-overlay{position:absolute;inset:0;background:#0a0a0fd9;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);display:flex;align-items:center;justify-content:center;z-index:100}.loading-overlay.fade-out{opacity:0;backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);transition:opacity .5s ease-out,backdrop-filter .5s ease-out,-webkit-backdrop-filter .5s ease-out;pointer-events:none}.loading-content{display:flex;flex-direction:column;align-items:center;gap:24px}.loading-content.completing{transform:scale(.92);opacity:0;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1)}.loading-logo{margin-bottom:4px}.loading-logo-text{font-family:var(--font-sans);font-size:28px;font-weight:700;letter-spacing:-.5px;background:linear-gradient(135deg,var(--color-primary),#7B61FF);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:loadingPulse 2.4s ease-in-out infinite}@keyframes loadingPulse{0%,to{opacity:1;filter:brightness(1)}50%{opacity:.65;filter:brightness(1.3)}}.loading-ring-container{position:relative;width:120px;height:120px}.hyper-spinner{width:100%;height:100%;filter:drop-shadow(0 0 8px rgba(0,229,255,.15))}.hyper-arcs{animation:hyper-rotate 2.5s linear infinite;transform-origin:0 0}.hyper-glow{animation:hyper-pulse 2s ease-in-out infinite}.hyper-arc-1{animation:hyper-arc-fade 2s ease-in-out infinite}.hyper-arc-2{animation:hyper-arc-fade 2s ease-in-out .67s infinite}.hyper-arc-3{animation:hyper-arc-fade 2s ease-in-out 1.33s infinite}@keyframes hyper-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes hyper-pulse{0%,to{opacity:.3}50%{opacity:.8}}@keyframes hyper-arc-fade{0%,to{opacity:.5}50%{opacity:1}}.loading-ring-progress{stroke:var(--color-primary);stroke-width:3;stroke-linecap:round;stroke-dasharray:345.575;stroke-dashoffset:345.575;transition:stroke-dashoffset .4s ease-out;filter:drop-shadow(0 0 8px var(--color-primary-glow))}.loading-percentage{display:flex;align-items:baseline;gap:2px;margin-top:-8px;-webkit-user-select:none;user-select:none}.loading-pct-value{font-family:var(--font-mono);font-size:30px;font-weight:700;line-height:1;color:var(--color-text-primary)}.loading-pct-symbol{font-family:var(--font-mono);font-size:16px;font-weight:600;color:var(--color-text-muted)}.loading-stage{font-size:13px;font-weight:500;color:var(--color-text-muted);min-height:20px;text-align:center;transition:opacity .3s ease}.modal{position:absolute;inset:0;background:#0a0a0fe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:200}.modal-content{background:var(--color-bg-secondary);padding:var(--spacing-xl);border-radius:var(--radius-lg);max-width:480px;width:90%;border:1px solid var(--color-border);box-shadow:0 20px 60px #00000080}.modal-content h3{margin-bottom:var(--spacing-md);color:var(--color-error);display:flex;align-items:center;gap:var(--spacing-sm)}.modal-content p{margin-bottom:var(--spacing-lg);line-height:1.6;color:var(--color-text-secondary)}.modal-content.success h3{color:#00d4ff}.modal-content.success p{white-space:pre-line}.no-webgpu{position:absolute;inset:0;background:var(--color-bg-primary);display:flex;align-items:center;justify-content:center;z-index:300}.no-webgpu-content{text-align:center;max-width:480px;padding:var(--spacing-xl)}.no-webgpu-content h2{font-size:1.75rem;margin-bottom:var(--spacing-md);color:var(--color-error)}.no-webgpu-content p{margin-bottom:var(--spacing-md);color:var(--color-text-secondary);line-height:1.6}.no-webgpu-content ul{list-style:none;margin-bottom:var(--spacing-xl);padding:var(--spacing-md);background:var(--color-bg-secondary);border-radius:var(--radius-md);border:1px solid var(--color-border-subtle)}.no-webgpu-content li{padding:var(--spacing-sm) 0;color:var(--color-text-primary);font-family:var(--font-mono);font-size:.85rem}.recent-files{margin-top:var(--spacing-md)}.recent-files ul{list-style:none}.recent-files li{padding:var(--spacing-sm) var(--spacing-md);background:var(--color-bg-tertiary);border-radius:var(--radius-md);margin-bottom:var(--spacing-xs);cursor:pointer;transition:all var(--transition-fast);display:flex;justify-content:space-between;align-items:center;border:1px solid transparent}.recent-files li:hover{background:#00d4ff1a;border-color:var(--color-border)}.recent-files .file-size{font-size:.7rem;color:var(--color-text-muted);font-family:var(--font-mono)}.control-group{margin-bottom:var(--spacing-md)}.control-group:last-child{margin-bottom:0}.control-group label{display:block;font-size:.8rem;color:var(--color-text-secondary);margin-bottom:var(--spacing-xs)}.control-select{width:100%;padding:var(--spacing-sm) var(--spacing-md);background:var(--color-bg-tertiary);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:.85rem;cursor:pointer;transition:all var(--transition-fast)}.control-select:hover{border-color:var(--color-border)}.control-select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-glow)}@media(max-width:767px){.side-panel{width:300px}.toggle-panel-btn{right:300px}.top-bar{padding:var(--spacing-md)}.title{font-size:1.25rem}.stats{gap:var(--spacing-md)}.stat-item{padding:var(--spacing-xs) var(--spacing-sm)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.panel-section{animation:slideIn .3s ease forwards}.side-panel>.panel-section:nth-child(1){animation-delay:.1s}.side-panel>.panel-section:nth-child(2){animation-delay:.2s}.side-panel>.panel-section:nth-child(3){animation-delay:.3s}.fullscreen-drop-zone{position:fixed;inset:0;background:#0a0a0feb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:500;animation:fadeIn .2s ease;cursor:copy}.fullscreen-drop-zone:before{content:"";position:absolute;inset:20px;border:3px dashed var(--color-primary);border-radius:var(--radius-lg);pointer-events:none;animation:borderPulse 1.5s ease-in-out infinite}@keyframes borderPulse{0%,to{opacity:.4;border-color:var(--color-primary)}50%{opacity:1;border-color:var(--color-primary-light)}}.fullscreen-drop-content{text-align:center;pointer-events:none}.fullscreen-drop-icon{width:80px;height:80px;color:var(--color-primary);margin-bottom:var(--spacing-xl);animation:bounceUp 1s ease-in-out infinite}@keyframes bounceUp{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.fullscreen-drop-text{font-size:1.5rem;font-weight:600;color:var(--color-text-primary);margin-bottom:var(--spacing-sm)}.fullscreen-drop-hint{font-size:1rem;color:var(--color-primary);font-family:var(--font-mono);letter-spacing:.1em}.panel-group{border-bottom:1px solid var(--color-border-subtle)}.panel-group-header{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-lg);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background var(--transition-fast);list-style:none}.panel-group-header::-webkit-details-marker{display:none}.panel-group-header::marker{display:none;content:""}.panel-group-header:hover{background:#00d4ff0d}.panel-group-icon{color:var(--color-primary);display:flex;align-items:center;flex-shrink:0}.panel-group-title{flex:1;font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-secondary)}.panel-group-badge{flex-shrink:0}.panel-group-header:after{content:"";width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid var(--color-text-muted);transition:transform var(--transition-normal);flex-shrink:0}.panel-group[open]>.panel-group-header:after{transform:rotate(180deg)}.panel-group-content>.panel-section{padding:var(--spacing-sm) var(--spacing-lg) var(--spacing-lg);border-bottom:none}.panel-group-content>.panel-section:first-child{padding-top:0}.button-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-sm);margin-top:var(--spacing-md)}.button-grid-full{grid-column:1 / -1}.button-full{width:100%;margin-bottom:var(--spacing-sm)}.button-sm{padding:var(--spacing-xs) var(--spacing-sm);font-size:.78rem}@supports not (backdrop-filter: blur(1px)){.side-panel,.top-bar{background:var(--color-bg-panel, rgba(18, 18, 26, .98))}}.mobile-panel-toggle{display:none}@media(max-width:599px){.top-bar{padding:var(--spacing-sm) var(--spacing-md)}.title h1{font-size:1.1rem!important}.stats{display:none}.side-panel{position:fixed;top:0;right:0;width:100%;height:100%;transform:translate(100%);transition:transform var(--transition-normal);z-index:50}.side-panel.mobile-open{transform:translate(0)}.toggle-panel-btn{display:none}.mobile-panel-toggle{display:flex;align-items:center;justify-content:center;position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);border:none;box-shadow:0 4px 20px var(--color-primary-glow);color:var(--color-bg-primary);cursor:pointer;z-index:100;transition:all var(--transition-fast)}.mobile-panel-toggle:active{transform:scale(.95)}.mobile-panel-close{display:flex;align-items:center;justify-content:center;position:absolute;top:var(--spacing-md);right:var(--spacing-md);width:40px;height:40px;border-radius:50%;background:var(--color-bg-tertiary);border:1px solid var(--color-border-subtle);color:var(--color-text-secondary);cursor:pointer;z-index:51}}@media(max-width:600px){.button-sm{min-height:44px;min-width:44px}.panel-group-header{min-height:44px}}@media(min-width:600px)and (max-width:767px){.side-panel{width:320px}.toggle-panel-btn{right:320px}.side-panel.collapsed+.toggle-panel-btn{right:0}}@media(min-width:1200px){.side-panel{width:380px}.toggle-panel-btn{right:380px}.side-panel.collapsed+.toggle-panel-btn{right:0}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}