@import"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=JetBrains+Mono:wght@400;500;600&display=swap";:root{--bg-primary: #0a0a0a;--bg-secondary: #171717;--bg-tertiary: #1e1e1e;--bg-elevated: #2b2b2b;--bg-glass: rgba(24, 25, 28, .756);--surface: #202224;--border: rgba(255, 255, 255, .12);--border-light: rgba(255, 255, 255, .22);--border-glow: rgba(45, 133, 255, .4);--text-primary: #f2f4f8;--text-secondary: #c7ccd7;--text-dim: #9299a8;--text-mono: "JetBrains Mono", "SF Mono", "Fira Code", monospace;--accent: #2d8dff;--accent-hover: #4ca1ff;--accent-glow: rgba(45, 133, 255, .32);--accent-dim: rgba(45, 133, 255, .12);--accent-surface: rgba(45, 133, 255, .18);--red: #f87171;--green: #4ade80;--blue: #60a5fa;--danger: #ef4444;--radius-xs: 4px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .2);--shadow-md: 0 2px 8px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .2);--shadow-lg: 0 4px 24px rgba(0, 0, 0, .5), 0 8px 32px rgba(0, 0, 0, .3);--shadow-glow: 0 0 22px rgba(45, 133, 255, .2);--shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .03);--sidebar-width: 380px;--header-height: 44px;--track-bg: linear-gradient(90deg, rgba(255, 255, 255, .04) 0%, rgba(255, 255, 255, .08) 100%);--track-height: 3px;--thumb-size: 14px}:root[data-theme=light]{--bg-primary: #eef2f7;--bg-secondary: #f6f9fd;--bg-tertiary: #ffffff;--bg-elevated: #ffffff;--bg-glass: rgba(255, 255, 255, .75);--surface: #ffffff;--border: rgba(10, 20, 34, .14);--border-light: rgba(10, 20, 34, .24);--border-glow: rgba(34, 118, 215, .26);--text-primary: #0f1724;--text-secondary: #2b3a4f;--text-dim: #5f7088;--accent: #2a84e8;--accent-hover: #4799f1;--accent-glow: rgba(42, 132, 232, .24);--accent-dim: rgba(42, 132, 232, .1);--accent-surface: rgba(42, 132, 232, .12);--track-bg: linear-gradient(90deg, rgba(10, 20, 34, .08) 0%, rgba(10, 20, 34, .15) 100%);--shadow-sm: 0 1px 2px rgba(14, 30, 50, .08), 0 2px 4px rgba(14, 30, 50, .05);--shadow-md: 0 8px 18px rgba(14, 30, 50, .12), 0 2px 6px rgba(14, 30, 50, .06);--shadow-lg: 0 16px 30px rgba(14, 30, 50, .16), 0 4px 12px rgba(14, 30, 50, .08);--shadow-glow: 0 0 20px rgba(42, 132, 232, .16);--shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .72)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;font-family:DM Sans,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:13px;font-weight:400;background:radial-gradient(circle at 16% -20%,rgba(255,255,255,.035) 0%,transparent 44%),radial-gradient(circle at 84% -10%,rgba(255,255,255,.02) 0%,transparent 42%),var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-user-select:none;user-select:none;touch-action:manipulation;overscroll-behavior:none;transition:background .25s ease,color .25s ease}:root[data-theme=light],:root[data-theme=light] body{background:radial-gradient(circle at 8% 0%,rgba(42,132,232,.16) 0%,transparent 38%),radial-gradient(circle at 92% 0%,rgba(255,255,255,.95) 0%,transparent 32%),var(--bg-primary)}#app{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;background:var(--bg-primary);transition:background .25s ease;position:relative}#app:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;opacity:.045;background-image:radial-gradient(rgba(255,255,255,.7) .4px,transparent .7px),radial-gradient(rgba(0,0,0,.85) .35px,transparent .7px);background-size:3px 3px,4px 4px;background-position:0 0,1px 1px;animation:glass-grain-shift 8s steps(7) infinite}#app:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;background:radial-gradient(130% 85% at 50% -18%,rgba(255,255,255,.025) 0%,transparent 58%)}#app>*{position:relative;z-index:1}#header{display:flex;align-items:center;justify-content:space-between;padding:0 calc(12px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left));background:var(--bg-secondary);border-bottom:1px solid var(--border);flex-shrink:0;height:var(--header-height);z-index:10;box-shadow:var(--shadow-inset);isolation:isolate}.header-left,.header-right{display:flex;align-items:center;gap:6px}.header-title{font-family:DM Sans,sans-serif;font-size:15px;font-weight:700;letter-spacing:-.3px;background:linear-gradient(135deg,#edf4ff,#a7cbff,#388fff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}:root[data-theme=light] .header-title{background:linear-gradient(135deg,#26415f,#2a84e8,#4da4ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.theme-btn{width:auto;min-width:74px;padding:0 10px;gap:6px;color:var(--text-secondary)}.theme-btn .theme-toggle-label{font-family:var(--text-mono);font-size:10px;letter-spacing:.2px}.theme-btn.active{border-color:var(--border-glow);background:var(--accent-surface);color:var(--text-primary)}:where(.icon-btn,.primary-btn,.tool-btn,.small-btn,.layer-tab,.reset-module-btn,.collapsible-toggle,.mapping-item,.preset-item){position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff0d,inset 0 -1px #0000004d,var(--shadow-sm);background-image:linear-gradient(175deg,#ffffff04,#ffffff01 35%,#0000000f);backdrop-filter:blur(10px) saturate(130%);-webkit-backdrop-filter:blur(10px) saturate(130%)}:where(.icon-btn,.tool-btn,.small-btn,.layer-tab,.reset-module-btn,.collapsible-toggle,.mapping-item,.preset-item):before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;border:1px solid rgba(255,255,255,.06);background:radial-gradient(120% 120% at 15% 12%,rgba(255,255,255,.06) 0%,rgba(255,255,255,.015) 24%,transparent 64%);opacity:.28;pointer-events:none}:where(.icon-btn,.primary-btn,.tool-btn,.small-btn,.layer-tab,.reset-module-btn,.collapsible-toggle,.mapping-item,.preset-item):after{content:"";position:absolute;left:-70%;top:0;width:50%;height:100%;background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.28) 48%,transparent 100%);transform:skew(-18deg);opacity:0;transition:left .32s ease,opacity .22s ease;pointer-events:none}:where(.icon-btn,.primary-btn,.tool-btn,.small-btn,.layer-tab,.reset-module-btn,.collapsible-toggle,.mapping-item,.preset-item):hover:after{left:130%;opacity:.62}:where(.icon-btn,.primary-btn,.tool-btn,.small-btn,.layer-tab,.reset-module-btn,.collapsible-toggle,.mapping-item,.preset-item):hover{transform:translateY(-1px);box-shadow:inset 0 1px #ffffff47,inset 0 -1px #00000038,0 10px 22px #00000059,0 0 0 1px #2d85ff3d}.icon-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:var(--bg-glass);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-dim);cursor:pointer;transition:all .2s ease}.icon-btn:hover{background:#2a2c30b3;color:var(--text-secondary);border-color:var(--border-light)}.icon-btn:active{transform:scale(.92);background:var(--bg-tertiary)}.primary-btn{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:6px 18px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);font-family:DM Sans,sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.4px;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 14px #2d85ff57}.primary-btn:hover{background:var(--accent-hover);box-shadow:0 12px 24px #2d85ff61,0 0 0 1px #78baff47 inset}.primary-btn:active{transform:translateY(0) scale(.97);box-shadow:0 1px 4px #2d85ff57}.fps-badge{font-family:var(--text-mono);font-size:9.5px;font-weight:500;color:var(--text-dim);font-variant-numeric:tabular-nums;padding:3px 8px;background:var(--bg-tertiary);border-radius:var(--radius-xs);border:1px solid var(--border);letter-spacing:.5px}#preview-container{flex:1 1 0;min-height:120px;position:relative;background:var(--bg-primary);display:flex;align-items:center;justify-content:center;overflow:hidden}#gl-canvas{max-width:100%;max-height:100%;display:block}.compare-hint{position:fixed;top:calc(var(--header-height) + 10px);left:50%;transform:translate(-50%);max-width:min(680px,calc(100vw - 24px));padding:8px 12px;border-radius:var(--radius-md);background:linear-gradient(180deg,#121220f5,#0e0e18f0);border:1px solid var(--border-light);color:var(--text-secondary);font-size:11.5px;letter-spacing:.15px;z-index:30;box-shadow:var(--shadow-md),var(--shadow-glow);text-align:center;pointer-events:none}#split-divider{position:absolute;width:24px;margin-left:-12px;border-left:0;box-shadow:none;background:transparent;z-index:5;align-items:center;justify-content:center;cursor:ew-resize;pointer-events:auto}.split-divider-handle,#split-divider:hover .split-divider-handle{display:none}#drop-zone{position:absolute;top:12px;right:12px;bottom:12px;left:12px;display:flex;align-items:center;justify-content:center;border:1.5px dashed rgba(255,255,255,.08);border-radius:var(--radius-xl);transition:all .3s ease;background:radial-gradient(ellipse at center,rgba(255,255,255,.04) 0%,transparent 70%)}#drop-zone.drag-over{border-color:var(--accent);background:radial-gradient(ellipse at center,rgba(45,133,255,.16) 0%,transparent 70%);box-shadow:inset 0 0 60px #2d85ff1f}.drop-content{text-align:center;color:var(--text-secondary)}.drop-content svg{opacity:.25}.drop-content p{margin:12px 0;font-size:13px;font-weight:400;color:var(--text-dim)}.drop-content .hint{font-family:var(--text-mono);font-size:10px;color:var(--text-dim);opacity:.7;margin-top:4px;letter-spacing:.5px}#error-msg{padding:8px 16px;background:#ef444414;border-bottom:1px solid rgba(239,68,68,.15);color:var(--red);font-size:12px;text-align:center}#controls{flex-shrink:0;display:flex;flex-direction:column;background:var(--bg-secondary);border-top:1px solid var(--border);overflow-y:auto;max-height:55vh;padding-bottom:env(safe-area-inset-bottom)}#controls::-webkit-scrollbar{width:3px}#controls::-webkit-scrollbar-track{background:transparent}#controls::-webkit-scrollbar-thumb{background:#ffffff14;border-radius:3px}#controls::-webkit-scrollbar-thumb:hover{background:#ffffff24}#toolbar{display:flex;align-items:center;gap:2px;padding:5px 14px;flex-shrink:0;border-bottom:1px solid var(--border);background:var(--bg-secondary)}.tool-btn{display:flex;align-items:center;gap:5px;min-height:34px;padding:5px 10px;background:var(--bg-glass);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-dim);font-family:DM Sans,sans-serif;font-size:11px;font-weight:500;cursor:pointer;transition:all .2s ease}.tool-btn:hover{background:#262c35c2;color:var(--text-secondary);border-color:var(--border-light)}.tool-btn:active{transform:scale(.95)}.tool-btn.active{background:var(--accent-surface);border-color:var(--border-glow);color:var(--text-primary);box-shadow:0 0 12px #2d85ff33}#hold-compare-btn.active{background:#2d85ff3d;color:var(--text-primary);border-color:#72b1ff85;box-shadow:0 0 0 1px #72b1ff38 inset}#layer-tabs{display:flex;gap:4px;padding:8px 14px;flex-shrink:0}.layer-tab{flex:1;min-height:34px;padding:7px 4px;background:var(--bg-glass);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-dim);font-family:DM Sans,sans-serif;font-size:11.5px;font-weight:500;cursor:pointer;transition:all .25s ease;display:flex;align-items:center;justify-content:center;gap:6px;position:relative;overflow:hidden}.layer-tab:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,rgba(255,255,255,.02) 0%,transparent 100%);pointer-events:none}.layer-tab .tab-num{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;background:#ffffff0a;border-radius:50%;font-family:var(--text-mono);font-size:9.5px;font-weight:600;transition:all .25s ease}.layer-tab:hover{background:var(--bg-elevated);color:var(--text-secondary);border-color:var(--border-light)}.layer-tab.active{background:var(--accent-surface);border-color:#2d85ff66;color:var(--text-primary);box-shadow:0 0 16px #2d85ff33,var(--shadow-inset)}.layer-tab.active .tab-num{background:var(--accent);color:#fff;box-shadow:0 2px 8px #2d85ff73}#wheels-row{display:flex;align-items:flex-start;gap:0;flex-shrink:0;padding:0 8px}.wheel-compare-wrap{display:flex;justify-content:center;padding:4px 14px 2px}#wheel-compare-btn{min-width:180px;text-align:center}#wheels-row.wheels-compare-swap{flex-direction:row-reverse}#wheels-row.wheels-compare-inside{position:relative;justify-content:center;min-height:244px;align-items:center}#wheels-row.wheels-compare-inside .wheel-col{flex:0 0 auto;position:static;transform:none;margin:0}#wheels-row.wheels-compare-inside .wheel-col:first-child{z-index:3;width:auto;max-width:none}#wheels-row.wheels-compare-inside .wheel-col:last-child{z-index:1;width:auto;max-width:none}#wheels-row.wheels-compare-inside .wheel-label{display:none}#wheels-row.wheels-compare-inside #wheel-container,#wheels-row.wheels-compare-inside #rendered-wheel-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:0;max-width:none}#wheels-row.wheels-compare-inside #wheel-container{z-index:3;width:clamp(116px,31vw,142px)}#wheels-row.wheels-compare-inside #rendered-wheel-container{z-index:1;width:clamp(188px,56vw,236px)}#wheels-row.wheels-compare-inside #wheel-canvas{opacity:1;filter:drop-shadow(0 1px 5px rgba(0,0,0,.42))}#wheels-row.wheels-compare-inside #rendered-wheel-canvas{opacity:1}#history-panel{margin:10px 8px 8px;padding:10px;background:linear-gradient(180deg,#ffffff05,#0000000a),var(--bg-glass);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}.history-panel-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.history-panel-title{font-family:var(--text-mono);font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:1.1px;color:var(--text-dim)}.history-panel-status{font-family:var(--text-mono);font-size:9px;color:var(--text-dim)}.history-list{display:flex;flex-direction:column;gap:4px;max-height:132px;overflow-y:auto;padding-right:2px}.history-list::-webkit-scrollbar{width:3px}.history-list::-webkit-scrollbar-track{background:transparent}.history-list::-webkit-scrollbar-thumb{background:#ffffff14;border-radius:999px}.history-item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:7px 9px;background:#ffffff05;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;text-align:left;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease}.history-item:hover{background:#ffffff0a;border-color:var(--border);color:var(--text-primary)}.history-item:active{transform:scale(.985)}.history-item.active{background:var(--accent-dim);border-color:#2d85ff57;color:var(--text-primary);box-shadow:0 0 0 1px #2d85ff1f inset}.history-item-main{display:flex;flex-direction:column;gap:2px;min-width:0}.history-item-label{font-size:10.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-item-time{font-family:var(--text-mono);font-size:8.5px;color:var(--text-dim)}.history-item-index{font-family:var(--text-mono);font-size:9px;color:var(--text-dim);flex-shrink:0}.wheel-col{flex:1;display:flex;flex-direction:column;align-items:center;min-width:0}.wheel-label{font-family:var(--text-mono);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-dim);text-align:center;padding:8px 0 2px}#wheel-container,#rendered-wheel-container{display:flex;align-items:center;justify-content:center;padding:2px 4px 6px;flex-shrink:0;width:100%;aspect-ratio:1;max-width:180px}#wheel-canvas,#rendered-wheel-canvas{border-radius:50%;touch-action:none;width:100%!important;height:100%!important;filter:drop-shadow(0 2px 8px rgba(0,0,0,.3))}#panels{flex:1;overflow-y:auto;padding:4px 14px 8px;min-width:0}#panels::-webkit-scrollbar{width:3px}#panels::-webkit-scrollbar-track{background:transparent}#panels::-webkit-scrollbar-thumb{background:#ffffff0f;border-radius:3px}.panel{padding:2px 0}.panel-title{font-family:var(--text-mono);font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-dim);margin-bottom:0}.panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border)}.reset-module-btn{width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:var(--bg-glass);border:1px solid var(--border);border-radius:var(--radius-xs);color:var(--text-dim);cursor:pointer;transition:all .2s ease;flex-shrink:0}.reset-module-btn:hover{background:#262c35c2;color:var(--text-secondary);border-color:var(--border-light)}.reset-module-btn:active{transform:scale(.88);color:var(--accent)}.slider-row{display:flex;align-items:center;gap:8px;margin-bottom:4px;padding:2px 0}.slider-row label{width:68px;font-size:11px;font-weight:400;color:var(--text-secondary);flex-shrink:0;letter-spacing:.1px}.slider-row input[type=range]{flex:1;height:var(--track-height);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--track-bg);border-radius:2px;cursor:pointer;position:relative;transition:box-shadow .2s ease,background .2s ease}.slider-row input[type=range]:hover{box-shadow:0 0 0 4px #2d85ff1f}.slider-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:var(--thumb-size);height:var(--thumb-size);border-radius:50%;background:#d0d0e0;border:2px solid var(--bg-primary);cursor:pointer;transition:all .15s ease;box-shadow:0 1px 4px #0006,0 0 0 1px #ffffff0f}.slider-row input[type=range]::-webkit-slider-thumb:hover{background:#fff;transform:scale(1.2);box-shadow:0 1px 8px #00000080,0 0 0 1px #ffffff1a}.slider-row input[type=range]:active::-webkit-slider-thumb{background:var(--accent-hover);box-shadow:0 0 12px #2d85ff8c,0 0 0 1px #2d85ff59}.slider-row input[type=range]::-moz-range-thumb{width:var(--thumb-size);height:var(--thumb-size);border-radius:50%;background:#d0d0e0;border:2px solid var(--bg-primary);cursor:pointer;transition:all .15s ease;box-shadow:0 1px 4px #0006}.slider-row input[type=range]::-moz-range-track{height:var(--track-height);background:var(--track-bg);border-radius:2px;border:none}.slider-row .val{width:38px;font-family:var(--text-mono);font-size:9.5px;font-weight:500;color:var(--text-dim);text-align:right;font-variant-numeric:tabular-nums;flex-shrink:0;letter-spacing:.3px}.val-input{width:50px;padding:2px 4px;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-xs);color:var(--text-secondary);font-family:var(--text-mono);font-size:9.5px;font-weight:500;font-variant-numeric:tabular-nums;text-align:right;flex-shrink:0;outline:none;transition:all .2s ease;-webkit-appearance:textfield;appearance:textfield;-moz-appearance:textfield}.val-input::-webkit-inner-spin-button,.val-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.val-input:focus{border-color:var(--accent);color:var(--text-primary);background:var(--bg-secondary);box-shadow:0 0 0 2px #2d85ff33}.val-input:hover:not(:focus){border-color:var(--border-light)}.cal-channel{display:flex;align-items:flex-start;gap:8px;margin-bottom:6px;padding:4px 6px;border-radius:var(--radius-sm);background:#ffffff03;transition:background .2s ease}.cal-channel:hover{background:#ffffff05}.cal-label{width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-family:var(--text-mono);font-size:9px;font-weight:700;flex-shrink:0;margin-top:4px;transition:all .2s ease}.cal-label.red{background:#f871711f;color:var(--red);box-shadow:0 0 8px #f8717114}.cal-label.green{background:#4ade801f;color:var(--green);box-shadow:0 0 8px #4ade8014}.cal-label.blue{background:#60a5fa1f;color:var(--blue);box-shadow:0 0 8px #60a5fa14}.cal-sliders{flex:1;min-width:0}.cal-sliders .slider-row{margin-bottom:2px}.cal-sliders .slider-row label{width:58px;font-size:10.5px}.collapsible-toggle{display:flex;align-items:center;gap:6px;padding:7px 10px;margin:8px 0 2px;background:var(--bg-glass);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-dim);font-family:var(--text-mono);font-size:10px;font-weight:500;letter-spacing:.3px;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none}.collapsible-toggle:hover{background:#262c35c2;color:var(--text-secondary);border-color:var(--border-light)}.collapsible-toggle svg{transition:transform .25s cubic-bezier(.4,0,.2,1);flex-shrink:0;color:var(--text-dim);opacity:.6}.collapsible-toggle.open svg{transform:rotate(90deg)}.collapsible-content{padding:8px 0 2px}.xy-row{display:flex;align-items:center;gap:8px;margin-bottom:5px;padding:3px 4px}.xy-row .primary-label{width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-family:var(--text-mono);font-size:9px;font-weight:700;flex-shrink:0}.primary-label.red{background:#f871711f;color:var(--red)}.primary-label.green{background:#4ade801f;color:var(--green)}.primary-label.blue{background:#60a5fa1f;color:var(--blue)}.xy-input-group{display:flex;align-items:center;gap:4px}.xy-input-group label{font-family:var(--text-mono);font-size:9.5px;color:var(--text-dim);font-weight:500}.xy-input{width:62px;padding:4px 6px;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-xs);color:var(--text-primary);font-family:var(--text-mono);font-size:10px;font-weight:500;font-variant-numeric:tabular-nums;text-align:right;outline:none;transition:all .2s ease;-webkit-appearance:textfield;appearance:textfield;-moz-appearance:textfield}.xy-input::-webkit-inner-spin-button,.xy-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.xy-input:focus{border-color:var(--accent);background:var(--bg-secondary);box-shadow:0 0 0 2px #2d85ff33}#xy-diagram-container,#tone-curve-container,#wheel-canvas,#rendered-wheel-canvas{transition:transform .22s ease,box-shadow .22s ease,filter .22s ease}#xy-diagram-container:hover,#tone-curve-container:hover{box-shadow:0 10px 24px #00000047,0 0 0 1px #2d85ff38;transform:translateY(-1px)}#wheel-canvas:hover,#rendered-wheel-canvas:hover{filter:drop-shadow(0 4px 14px rgba(45,133,255,.28))}.xy-input:hover{border-color:var(--border-light)}#histogram-container{width:100%;height:56px;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative}#histogram-container:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px #ffffff05}#histogram-container canvas{width:100%;height:100%;display:block}#xy-diagram-container{width:100%;aspect-ratio:1;max-width:280px;margin:10px auto;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;position:relative;cursor:crosshair}#xy-diagram-container:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px #ffffff05}#xy-diagram-canvas{width:100%;height:100%;display:block;touch-action:none}#tone-curve-container{width:100%;aspect-ratio:1;max-width:256px;margin:0 auto 10px;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;position:relative;cursor:crosshair}#tone-curve-container:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px #ffffff05}#tone-curve-canvas{width:100%;height:100%;display:block;touch-action:none}.tone-curve-controls{display:flex;gap:6px;margin:0 0 8px}.tone-curve-controls .small-btn{flex:1}.color-management-panel{margin:0 0 10px;padding:8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-glass)}.color-management-title{margin:0 0 6px;font-family:var(--text-mono);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text-dim)}.color-management-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}.color-management-row label{font-size:10.5px;color:var(--text-secondary)}.color-management-row select{min-width:124px;padding:4px 6px;background:var(--bg-primary);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius-xs);font-size:10px}.icc-profile-readout{margin-top:2px;font-family:var(--text-mono);font-size:9px;color:var(--text-dim)}.mapping-list{display:flex;flex-direction:column;gap:2px;margin:6px 0;max-height:90px;overflow-y:auto}.mapping-item{display:flex;align-items:center;gap:8px;padding:5px 8px;background:var(--bg-glass);border-radius:var(--radius-sm);font-family:var(--text-mono);font-size:10px;cursor:pointer;border:1px solid transparent;transition:all .2s ease}.mapping-item:hover{background:var(--bg-elevated);border-color:var(--border)}.mapping-item.selected{border-color:#2d85ff6b;background:var(--accent-dim);box-shadow:0 0 12px #2d85ff2e}.mapping-color{width:10px;height:10px;border-radius:50%;flex-shrink:0;box-shadow:0 0 6px #ffffff1a}.mapping-range{margin-left:auto;font-size:9.5px;color:var(--text-dim)}.mapping-actions{display:flex;gap:6px;margin:8px 0}.picker-settings-row{display:flex;align-items:center;gap:8px;margin:6px 0 2px}.picker-settings-row label{width:74px;font-size:10.5px;color:var(--text-secondary);flex-shrink:0}.picker-settings-row input[type=range]{flex:1}.picker-coord-readout{margin:2px 0 8px;font-family:var(--text-mono);font-size:9.5px;color:var(--text-dim)}.small-btn{min-height:34px;padding:5px 12px;background:var(--bg-glass);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);font-family:DM Sans,sans-serif;font-size:10.5px;font-weight:500;cursor:pointer;transition:all .2s ease}.small-btn:hover{background:var(--bg-elevated);color:var(--text-primary);border-color:var(--border-light);box-shadow:var(--shadow-sm)}.small-btn:active{transform:scale(.96)}.small-btn.active{background:var(--accent-surface);border-color:var(--border-glow);color:var(--text-primary);box-shadow:0 0 10px #2d85ff3d}.small-btn.danger{border-color:#ef444433;color:var(--red)}.small-btn.danger:hover{background:#ef444414;border-color:#ef44444d}#mapping-detail h4{font-family:var(--text-mono);font-size:9px;font-weight:600;color:var(--text-dim);margin:10px 0 4px;text-transform:uppercase;letter-spacing:1px}#bottom-bar{padding:8px calc(14px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));background:var(--bg-secondary);border-top:1px solid var(--border);flex-shrink:0;box-shadow:var(--shadow-inset)}#preset-section{display:flex;flex-direction:column;gap:8px}.preset-list{display:flex;gap:6px;overflow-x:auto;padding:2px 0;-webkit-overflow-scrolling:touch}.preset-list::-webkit-scrollbar{height:2px}.preset-list::-webkit-scrollbar-track{background:transparent}.preset-list::-webkit-scrollbar-thumb{background:#ffffff0f;border-radius:2px}.preset-item{display:flex;flex-direction:column;align-items:center;padding:8px 14px;background:var(--bg-glass);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .25s ease;color:var(--text-secondary);position:relative;overflow:hidden}.preset-item:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,rgba(255,255,255,.02) 0%,transparent 60%);pointer-events:none;transition:opacity .25s ease}.preset-item:hover{border-color:#2d85ff6b;background:var(--accent-dim);color:var(--text-primary);box-shadow:0 4px 16px #2d85ff38,0 0 0 1px #2d85ff29;transform:translateY(-1px)}.preset-item:active{transform:translateY(0) scale(.97)}.preset-name{font-family:DM Sans,sans-serif;font-size:11px;font-weight:600;letter-spacing:.1px}.preset-type{font-family:var(--text-mono);font-size:8.5px;font-weight:500;color:var(--text-dim);letter-spacing:.5px;text-transform:uppercase;margin-top:2px}.preset-actions{display:flex;gap:6px}.caps-badge{font-family:var(--text-mono);font-size:8.5px;font-weight:500;color:var(--text-dim);text-align:center;margin-top:4px;letter-spacing:.5px;opacity:.6}@media (max-width: 767px){:root{--header-height: 52px}.header-title{font-size:13px}.theme-btn{min-width:64px;padding:0 8px}#toolbar{gap:6px;padding:8px 10px;overflow-x:auto;-webkit-overflow-scrolling:touch}.tool-btn{flex:0 0 auto}#layer-tabs{padding:8px 10px}#history-panel{margin:8px 6px}.history-list{max-height:152px}#panels{padding:4px 10px 8px}.slider-row{gap:6px}.slider-row label{width:62px}}@media (min-width: 768px){#app{display:grid;grid-template-rows:var(--header-height) 1fr auto;grid-template-columns:1fr var(--sidebar-width);grid-template-areas:"header header" "preview sidebar" "bottom bottom"}#header{grid-area:header}#preview-container{grid-area:preview;min-height:0;border-right:1px solid var(--border)}#controls{grid-area:sidebar;max-height:none;overflow-y:auto;border-top:none;border-left:1px solid var(--border)}#bottom-bar{grid-area:bottom}#wheels-row{flex-direction:row;padding:0 6px}#wheels-row.wheels-compare-inside{min-height:220px}#wheels-row.wheels-compare-inside .wheel-col:first-child{max-width:140px}.wheel-col{flex:1}#wheel-container,#rendered-wheel-container{padding:2px 6px 6px;max-width:180px}#panels{padding:4px 14px 8px;max-height:none}#panels .panel{max-height:none}}@media (min-width: 1200px){:root{--sidebar-width: 420px}#wheel-container,#rendered-wheel-container{max-width:200px}}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes glass-grain-shift{0%{transform:translateZ(0)}25%{transform:translate3d(-1px,1px,0)}50%{transform:translate3d(1px,-1px,0)}75%{transform:translate3d(.5px,1px,0)}to{transform:translate3d(-1px,.5px,0)}}.panel{animation:fadeIn .2s ease-out}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button:focus:not(:focus-visible){outline:none}::selection{background:#2d85ff5c;color:var(--text-primary)}