:root{--bg: #1c1c1c;--bg-raised: #252526;--bg-sunken: #161616;--line: #333335;--line-soft: #2a2a2c;--text: #d6d6d8;--text-dim: #8f8f95;--accent: #4f8cff;--accent-dim: #2f5db3;--danger: #e05252;--radius: 5px;--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font);font-size:12px;-webkit-font-smoothing:antialiased}#root{height:100%}button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer}button:disabled{opacity:.35;cursor:default}.app{display:flex;flex-direction:column;height:100%}.app-body{display:flex;flex:1;min-height:0}.toolbar-wrap{flex:0 0 auto;background:var(--bg-raised);border-bottom:1px solid var(--line)}.toolbar{display:flex;align-items:center;gap:14px;height:46px;padding:0 12px;overflow-x:auto;scrollbar-width:none}.toolbar::-webkit-scrollbar{display:none}.brand{display:flex;align-items:baseline;gap:5px;padding-right:6px;white-space:nowrap}.brand strong{font-size:13px;letter-spacing:.2px}.brand span{font-size:9px;color:#0d0d0d;background:var(--accent);border-radius:3px;padding:1px 4px;font-weight:700}.tool-group{display:flex;align-items:center;gap:4px}.spacer{flex:1}.tool-button,.icon-button{display:grid;place-items:center;width:30px;height:28px;border:1px solid transparent;border-radius:var(--radius);background:transparent;color:var(--text-dim)}.tool-button:hover,.icon-button:hover:not(:disabled){background:#313134;color:var(--text)}.tool-button.active{background:var(--accent-dim);border-color:var(--accent);color:#fff}.icon-button.ghost{width:24px;height:24px}.chip{height:26px;padding:0 9px;border-radius:var(--radius);border:1px solid var(--line);background:#2c2c2e;color:var(--text-dim);white-space:nowrap}.chip:hover{color:var(--text);border-color:#47474a}.chip.active{background:var(--accent-dim);border-color:var(--accent);color:#fff}.chip.primary{background:var(--accent);border-color:var(--accent);color:#08101f;font-weight:600}.text-button{background:none;border:none;padding:3px 6px;color:var(--text-dim);border-radius:4px}.text-button:hover{color:var(--text);background:#303032}.zoom-label{min-width:44px;text-align:center;color:var(--text-dim);font-variant-numeric:tabular-nums}.brush-options{display:none;gap:16px;align-items:center;padding:5px 12px 7px;border-top:1px solid var(--line-soft);background:#212123}.brush-options.visible{display:flex}.brush-options-title{font-size:10px;letter-spacing:.7px;text-transform:uppercase;color:#6f6f76}.brush-options .slider{flex:1 1 0;max-width:240px;padding:0}.brush-options .slider-value{width:36px;flex-basis:36px}.stage{position:relative;flex:1;min-width:0;background:#202021}.viewport{position:absolute;inset:0;overflow:hidden}.viewport-canvas{display:block;width:100%;height:100%;touch-action:none}.viewport.drop-active:after{content:"Drop to place as a new layer";position:absolute;inset:12px;display:grid;place-items:center;border:2px dashed var(--accent);border-radius:10px;background:#4f8cff14;color:#fff;font-size:14px;pointer-events:none}.brush-cursor{position:absolute;border:1px solid rgba(255,255,255,.85);outline:1px solid rgba(0,0,0,.5);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;opacity:0;mix-blend-mode:difference}.brush-cursor.restore{border-style:dashed}.viewport-hint{position:absolute;left:50%;bottom:24px;transform:translate(-50%);padding:6px 12px;border-radius:20px;background:#000000b8;opacity:0;transition:opacity .18s;pointer-events:none}.viewport-hint.visible{opacity:1}.start-overlay{position:absolute;inset:0;display:grid;place-items:center;background:#141415d1;backdrop-filter:blur(3px)}.start-card{max-width:420px;padding:26px 28px;border:1px solid var(--line);border-radius:10px;background:var(--bg-raised);text-align:center}.start-card h1{margin:0 0 10px;font-size:18px}.start-card p{margin:0 0 18px;color:var(--text-dim);line-height:1.55}.start-actions{display:flex;gap:8px;justify-content:center}.start-actions .chip{height:30px;padding:0 14px}.sidebar{width:336px;flex:0 0 336px;display:flex;flex-direction:column;background:var(--bg-raised);border-left:1px solid var(--line);overflow-y:auto;overflow-x:hidden}.histogram-wrap{padding:8px;border-bottom:1px solid var(--line)}.histogram{display:block;width:100%;height:90px;border-radius:3px}.panels{border-bottom:1px solid var(--line)}.edit-target{padding:8px 10px;border-bottom:1px solid var(--line-soft);background:#202022}.edit-target-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.edit-target-name{color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.edit-target-actions{display:flex;gap:2px;margin-top:4px}.switch-wrap{display:inline-flex;align-items:center;gap:6px;user-select:none;cursor:pointer}.switch-wrap.small{color:var(--text-dim)}.switch{accent-color:var(--accent);width:13px;height:13px}.panel-tabs{display:flex;flex-wrap:wrap;gap:2px;padding:6px 8px;border-bottom:1px solid var(--line-soft)}.panel-tab{border:none;background:transparent;color:var(--text-dim);padding:4px 7px;border-radius:4px;font-size:11px}.panel-tab:hover{background:#303032;color:var(--text)}.panel-tab.active{background:var(--accent-dim);color:#fff}.panel-scroll{padding:4px 10px 12px}.panel-body{display:flex;flex-direction:column;gap:2px}.panel-section{padding:6px 0 2px;border-top:1px solid var(--line-soft);margin-top:6px}.panel-section:first-child{border-top:none;margin-top:0}.panel-section-title{margin:0 0 4px;font-size:10px;letter-spacing:.7px;text-transform:uppercase;color:#6f6f76}.panel-actions{display:flex;gap:4px;padding-top:6px}.chip-row{display:flex;gap:4px;padding:6px 0}.chip-row .chip{flex:1;height:24px;padding:0;text-align:center}.slider{padding:3px 0}.slider-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:2px}.slider-label{color:var(--text-dim);cursor:ew-resize;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.slider.modified .slider-label{color:var(--text)}.slider-value{width:48px;flex:0 0 48px;padding:1px 4px;text-align:right;border:1px solid transparent;border-radius:3px;background:transparent;color:var(--text);font-family:inherit;font-size:11px;font-variant-numeric:tabular-nums}.slider-value:hover{border-color:var(--line)}.slider-value:focus{outline:none;border-color:var(--accent);background:var(--bg-sunken)}.slider-track{-webkit-appearance:none;appearance:none;width:100%;height:14px;margin:0;background:transparent;cursor:pointer;--value: 50%;--zero: 0%;--band: var(--accent)}.slider-track::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(to right,transparent 0 min(var(--value),var(--zero)),var(--band) min(var(--value),var(--zero)) max(var(--value),var(--zero)),transparent max(var(--value),var(--zero)) 100%),#3a3a3d}.slider-track::-moz-range-track{height:3px;border-radius:2px;background:#3a3a3d}.slider-track::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:11px;height:11px;margin-top:-4px;border-radius:50%;background:#e2e2e4;border:1px solid #101011}.slider-track::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:#e2e2e4;border:1px solid #101011}.slider-track:focus-visible{outline:none}.slider-track:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--accent)}.band-slider .slider-track{--band: var(--band, var(--accent))}.curve-editor{padding:6px 0}.curve-canvas{display:block;width:100%;border:1px solid var(--line);border-radius:4px;cursor:crosshair;touch-action:none}.wheel-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:6px 0}.wheel-block{display:flex;flex-direction:column;align-items:center}.wheel-title{margin:0 0 4px;font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:#6f6f76}.wheel-canvas{cursor:crosshair;touch-action:none}.wheel-block .slider{width:100%}.layers-panel{display:flex;flex-direction:column;padding-bottom:10px}.section-head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid var(--line-soft)}.section-head h2{margin:0;font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:#8b8b92}.section-head.small{padding:6px 10px}.section-head.small h3{margin:0;font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:#6f6f76}.section-actions{display:flex;gap:2px}.layer-controls{padding:8px 10px;border-bottom:1px solid var(--line-soft);display:flex;flex-direction:column;gap:6px}.field{display:flex;align-items:center;gap:8px}.field label{width:44px;color:var(--text-dim)}.select{flex:1;height:24px;padding:0 6px;border:1px solid var(--line);border-radius:4px;background:#2c2c2e;color:var(--text);font-family:inherit;font-size:11px}.layer-list{max-height:320px;overflow-y:auto;padding:4px 6px}.layer-row{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:5px;border:1px solid transparent;cursor:default}.layer-row:hover{background:#2b2b2e}.layer-row.selected{background:#303646;border-color:var(--accent-dim)}.layer-row.hidden .layer-meta,.layer-row.dragging{opacity:.4}.layer-row.drop-target{border-color:var(--accent)}.layer-thumb,.mask-thumb{width:44px;height:44px;flex:0 0 44px;border:1px solid var(--line);border-radius:3px;background:conic-gradient(#3a3a3a 90deg,#2c2c2c 90deg 180deg,#3a3a3a 180deg 270deg,#2c2c2c 270deg) 0 0 / 12px 12px}.layer-meta{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}.layer-name,.layer-name-input{font-size:12px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-name-input{background:var(--bg-sunken);border:1px solid var(--accent);border-radius:3px;padding:1px 3px;font-family:inherit}.layer-sub{font-size:10px;color:var(--text-dim)}.layer-badges{display:flex;gap:3px;margin-top:2px}.badge{font-size:8px;letter-spacing:.5px;padding:1px 4px;border-radius:3px;background:#3c3c40;color:#a9a9b0}.badge.mask{background:#3a4a3c;color:#9fd0a6}.mask-panel,.transform-panel{border-top:1px solid var(--line-soft)}.mask-row{display:flex;gap:10px;padding:0 10px 8px;align-items:center}.mask-actions{display:flex;flex-direction:column;align-items:flex-start;gap:1px}.transform-panel .slider{padding:3px 10px}.transform-panel .panel-actions{padding:4px 10px 0}.mixer-body{padding-top:4px}.status-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;height:24px;padding:0 12px;background:var(--bg-sunken);border-top:1px solid var(--line);color:var(--text-dim);font-size:11px;flex:0 0 auto}.status-stats{font-variant-numeric:tabular-nums;white-space:nowrap}.fatal{display:grid;place-content:center;height:100%;padding:40px;text-align:center}.fatal h1{font-size:20px;margin-bottom:8px}.fatal p{color:var(--text-dim);max-width:460px;line-height:1.6}.fatal-hint{font-size:11px;opacity:.8}.profile-panel{gap:4px}.profile-current{padding:4px 0 2px;color:var(--text);font-weight:500}.profile-groups{flex-wrap:wrap;gap:4px;padding:4px 0 8px}.profile-groups .chip{flex:0 0 auto;padding:0 8px;height:22px;font-size:10px}.profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding-bottom:8px}.profile-tile{display:flex;flex-direction:column;gap:3px;padding:3px;border:1px solid transparent;border-radius:var(--radius);background:var(--bg-sunken);text-align:left;color:var(--text-dim);min-width:0}.profile-tile:hover{border-color:#4a4a4e;color:var(--text)}.profile-tile.active{border-color:var(--accent);color:#fff;background:#1a2438}.profile-thumb{width:100%;aspect-ratio:3 / 2;object-fit:cover;border-radius:3px;display:block;pointer-events:none}.profile-name{font-size:10px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 1px 1px}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#3a3a3d;border-radius:5px;border:2px solid var(--bg-raised)}::-webkit-scrollbar-track{background:transparent}