.cp-root{flex-direction:column;gap:10px;display:flex}.cp-mode-toggle{background:var(--muted);border-radius:6px;gap:2px;padding:2px;display:flex}.cp-mode-btn{color:var(--muted-foreground);cursor:pointer;background:0 0;border:none;border-radius:4px;flex:1;padding:5px 0;font-size:12px;font-weight:500;transition:background-color .15s,color .15s,box-shadow .15s}.cp-mode-btn-active{background:var(--background);color:var(--foreground);box-shadow:0 1px 3px #00000026}.cp-mode-btn:active{transform:scale(.97)}.cp-sv-area{aspect-ratio:1;cursor:crosshair;-webkit-user-select:none;user-select:none;touch-action:none;border-radius:6px;width:100%;position:relative;overflow:hidden}.cp-sv-cursor{pointer-events:none;border:2px solid #fff;border-radius:50%;width:14px;height:14px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0000004d,inset 0 0 0 1px #00000026}.cp-hue-bar{cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none;background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:6px;width:100%;height:12px;position:relative}.cp-opacity-bar{cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none;border-radius:6px;width:100%;height:12px;position:relative}.cp-bar-cursor{pointer-events:none;border:2px solid #fff;border-radius:50%;width:14px;height:14px;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #00000040}.cp-hex-row{align-items:center;gap:6px;display:flex}.cp-hex-label{color:var(--muted-foreground);flex-shrink:0;font-size:11px}.cp-hex-input-wrap{background:var(--muted);border-radius:6px;flex:1;align-items:center;gap:2px;min-width:0;padding:5px 8px;display:flex}.cp-hex-hash{color:var(--muted-foreground);flex-shrink:0;font-size:12px}.cp-hex-input{font-size:16px;font-family:var(--font-mono);color:var(--foreground);text-transform:uppercase;background:0 0;border:none;outline:none;width:100%}.cp-opacity-input-wrap{background:var(--muted);border-radius:6px;flex-shrink:0;align-items:center;gap:2px;width:58px;padding:5px 8px;display:flex}.cp-opacity-input{font-size:16px;font-family:var(--font-mono);color:var(--foreground);-moz-appearance:textfield;background:0 0;border:none;outline:none;width:100%}.cp-opacity-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.cp-opacity-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.cp-opacity-pct{color:var(--muted-foreground);flex-shrink:0;font-size:11px}.cp-gradient-section{box-shadow:0 -1px 0 0 var(--border);flex-direction:column;gap:10px;padding-top:10px;display:flex}.cp-gradient-type-row{align-items:center;gap:8px;display:flex}.cp-type-select{flex:1;height:30px!important;font-size:12px!important}.cp-angle-wrap{background:var(--muted);border-radius:6px;flex-shrink:0;align-items:center;gap:2px;width:58px;padding:5px 8px;display:flex}.cp-angle-input{font-size:16px;font-family:var(--font-mono);color:var(--foreground);-moz-appearance:textfield;background:0 0;border:none;outline:none;width:100%}.cp-angle-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.cp-angle-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.cp-angle-unit{color:var(--muted-foreground);flex-shrink:0;font-size:11px}.cp-gradient-bar-wrap{padding:6px 0}.cp-gradient-bar{width:100%;height:20px;box-shadow:0 0 0 1px var(--border);border-radius:4px;position:relative}.cp-stop-handle{width:12px;height:12px;box-shadow:0 0 0 2px var(--border), 0 1px 3px #00000040;cursor:grab;touch-action:none;border:none;border-radius:2px;position:absolute;top:50%;transform:translate(-50%,-50%)}.cp-stop-handle:active{cursor:grabbing}.cp-stop-active{box-shadow:0 0 0 2px white, 0 0 0 3.5px var(--ring), 0 1px 3px #00000040;z-index:1}.cp-stops-header{justify-content:space-between;align-items:center;display:flex}.cp-stops-title{color:var(--muted-foreground);font-size:12px;font-weight:500}.cp-stops-add{background:var(--muted);width:22px;height:22px;color:var(--muted-foreground);cursor:pointer;border:none;border-radius:4px;justify-content:center;align-items:center;transition:background-color .15s,color .15s;display:flex;position:relative}.cp-stops-add:before{content:"";position:absolute;inset:-11px}@media (hover:hover) and (pointer:fine){.cp-stops-add:hover{color:var(--foreground);background:var(--accent)}}.cp-stops-add:active{transform:scale(.92)}.cp-stops-list{flex-direction:column;gap:2px;display:flex}.cp-stop-row{cursor:pointer;border-radius:4px;align-items:center;gap:8px;padding:4px 6px;font-size:12px;transition:background-color .15s;display:flex}@media (hover:hover) and (pointer:fine){.cp-stop-row:hover{background:var(--muted)}}.cp-stop-row-active{background:var(--muted)}.cp-stop-pos{font-variant-numeric:tabular-nums;color:var(--muted-foreground);flex-shrink:0;width:34px;font-size:11px}.cp-stop-swatch{width:16px;height:16px;box-shadow:0 0 0 1px var(--border);border:none;border-radius:3px;flex-shrink:0}.cp-stop-hex{font-size:11px;font-family:var(--font-mono);color:var(--foreground);flex:1;min-width:0}.cp-stop-remove{width:20px;height:20px;color:var(--muted-foreground);cursor:pointer;background:0 0;border:none;border-radius:3px;flex-shrink:0;justify-content:center;align-items:center;transition:background-color .15s,color .15s;display:flex;position:relative}.cp-stop-remove:before{content:"";position:absolute;inset:-12px}@media (hover:hover) and (pointer:fine){.cp-stop-remove:hover:not(:disabled){background:var(--destructive);color:#fff}}.cp-stop-remove:disabled{opacity:.3;cursor:not-allowed}@media (prefers-reduced-motion:reduce){.cp-mode-btn,.cp-stops-add,.cp-stop-row,.cp-stop-remove{transition:none}.cp-mode-btn:active,.cp-stops-add:active{transform:none}}
.dither-layout{height:100vh;display:flex;overflow:hidden}.dither-sidebar{overscroll-behavior:contain;width:300px;min-width:300px;box-shadow:inset -1px 0 0 0 var(--border);background:var(--card);flex-direction:column;gap:16px;padding:20px;display:flex;overflow-y:auto}.dither-sidebar-right{overscroll-behavior:contain;width:300px;min-width:300px;box-shadow:inset 1px 0 0 0 var(--border);background:var(--card);flex-direction:column;gap:16px;padding:20px;display:flex;overflow-y:auto}.dither-sidebar-title{letter-spacing:-.02em;font-size:18px;font-weight:600}.dither-upload{flex-direction:column;gap:8px;display:flex}.dither-section{flex-direction:column;gap:14px;display:flex}.dither-section-title{color:var(--foreground);font-size:13px;font-weight:500}.dither-slider-row{flex-direction:column;gap:6px;display:flex}.dither-slider-header{justify-content:space-between;align-items:center;display:flex}.dither-slider-label{color:var(--muted-foreground);font-size:13px}.dither-slider-value{font-variant-numeric:tabular-nums;color:var(--muted-foreground);font-size:12px}.dither-checkbox-row{cursor:pointer;align-items:center;gap:8px;display:flex}.dither-checkbox-label{color:var(--muted-foreground);cursor:pointer;flex:1;font-size:13px}.dither-hint{color:var(--muted-foreground);opacity:.7;font-size:12px;line-height:1.5}.dither-spacer{flex:1}.dither-export{gap:8px;display:flex}.dither-export>*{flex:1}.dither-export button:active{transform:scale(.97)}.dither-stats{justify-content:center;gap:8px;display:flex}.dither-main{flex:1;min-width:0;min-height:0;display:flex}.dither-panel-dither{flex-direction:column;flex:2;justify-content:center;align-items:center;min-width:0;min-height:0;padding:48px 24px 24px;display:flex;position:relative}.dither-panel-live{flex-direction:column;flex:3;min-width:0;min-height:0;display:flex}.dither-panel-divider{background:#0000001f;flex-shrink:0;align-self:stretch;width:1px}.dither-panel-label{letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground);white-space:nowrap;pointer-events:none;-webkit-user-select:none;user-select:none;font-size:11px;font-weight:500;position:absolute;top:16px;left:50%;transform:translate(-50%)}.dither-panel-header{z-index:1;flex-shrink:0;align-items:center;gap:16px;padding:10px 20px;display:flex;box-shadow:0 1px #00000014}.dither-panel-header-label{letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground);white-space:nowrap;-webkit-user-select:none;user-select:none;flex-shrink:0;font-size:11px;font-weight:500}.dither-canvas-dither{image-rendering:pixelated;object-fit:contain;-webkit-user-select:none;user-select:none;max-width:100%;max-height:calc(100vh - 120px)}.dither-canvas-container{flex:1;min-height:0;position:relative}.dither-canvas-stats{pointer-events:none;z-index:1;gap:6px;display:flex;position:absolute;top:12px;left:50%;transform:translate(-50%)}.dither-canvas-live{cursor:none;touch-action:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;position:absolute;inset:0}.dither-render-scale{flex:1;align-items:center;gap:8px;min-width:0;display:flex}.dither-render-scale-label{color:var(--muted-foreground);white-space:nowrap;-webkit-user-select:none;user-select:none;font-size:12px}.dither-render-scale-slider{width:120px}.dither-render-scale-value{font-variant-numeric:tabular-nums;color:var(--muted-foreground);-webkit-user-select:none;user-select:none;font-size:12px}.dither-color-row{align-items:center;gap:10px;display:flex}.dither-color-input{width:32px;height:32px;box-shadow:0 0 0 1px var(--border);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:2px}.dither-color-input::-webkit-color-swatch-wrapper{padding:0}.dither-color-input::-webkit-color-swatch{border:none;border-radius:4px}.dither-color-input:focus-visible{outline:2px solid var(--ring);outline-offset:2px}@media (prefers-reduced-motion:reduce){.dither-canvas-live{cursor:default}.dither-export button:active{transform:none}}@media (hover:hover) and (pointer:fine){.dither-canvas-live{cursor:none}}.dither-hidden{display:none}