@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap";:root{--oklch-h-neutral: 265;--oklch-h-accent: 254;--oklch-h-danger: 25;--oklch-h-success: 145;--oklch-h-warning: 75;--oklch-h-protect: 15;--oklch-accent-400: oklch(68% .17 var(--oklch-h-accent));--oklch-accent-500: oklch(62% .19 var(--oklch-h-accent));--oklch-accent-600: oklch(55% .2 var(--oklch-h-accent));--oklch-danger: oklch(62% .17 var(--oklch-h-danger));--oklch-warning: oklch(75% .12 var(--oklch-h-warning));--oklch-success: oklch(65% .15 var(--oklch-h-success));--oklch-protect: oklch(72% .04 var(--oklch-h-protect));--channel-r: oklch(62% .17 25);--channel-g: oklch(65% .15 145);--channel-b: oklch(58% .14 254);--bg-grass: oklch(48% .1 135);--bg-sand: oklch(78% .06 85);--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--layout-sidebar-min: 180px;--layout-sidebar-max: 240px;--layout-params-min: 280px;--layout-params-max: 360px;--touch-target-min: 44px;--font-family-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--font-family-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", "Consolas", monospace;--font-family: var(--font-family-ui);--text-2xs: .625rem;--text-xs: .6875rem;--text-sm: .75rem;--text-md: .8125rem;--text-lg: .875rem;--text-xl: 1rem;--text-2xl: 1.125rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--leading-tight: 1.25;--leading-snug: 1.35;--leading-normal: 1.5;--leading-relaxed: 1.55;--tracking-tight: -.01em;--tracking-wide: .05em;--tracking-wider: .08em;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 10px}:root,[data-theme=dark]{color-scheme:dark;--bg-app: oklch(21.6% .006 var(--oklch-h-neutral));--bg-panel: oklch(28.2% .007 var(--oklch-h-neutral));--bg-panel-hover: oklch(38.5% .01 var(--oklch-h-neutral));--bg-panel-dark: oklch(20% .005 var(--oklch-h-neutral));--bg-input: oklch(29.5% .008 var(--oklch-h-neutral));--bg-elevated: oklch(28.8% .008 var(--oklch-h-neutral));--bg-thumb: oklch(16.5% .005 var(--oklch-h-neutral));--bg-thumb-placeholder: oklch(22% .006 var(--oklch-h-neutral));--bg-stage: oklch(14.5% .008 var(--oklch-h-neutral));--stage-spot: color-mix(in oklch, var(--accent-primary) 9%, transparent);--border-color: oklch(38.5% .01 var(--oklch-h-neutral));--border-subtle: color-mix(in oklch, var(--text-primary) 8%, transparent);--border-strong: oklch(46% .012 var(--oklch-h-neutral));--accent-primary: var(--oklch-accent-500);--accent-hover: var(--oklch-accent-600);--accent-info: oklch(74% .12 var(--oklch-h-accent));--accent-selection-subtle: color-mix(in oklch, var(--accent-primary) 12%, transparent);--surface-accent-subtle: color-mix(in oklch, var(--accent-primary) 15%, transparent);--border-accent-muted: color-mix(in oklch, var(--accent-primary) 40%, transparent);--text-primary: oklch(97.5% .003 var(--oklch-h-neutral));--text-secondary: oklch(72% .01 var(--oklch-h-neutral));--text-muted: oklch(65% .012 var(--oklch-h-neutral));--color-error: var(--oklch-danger);--color-warning: var(--oklch-warning);--color-success: var(--oklch-success);--color-danger: oklch(58% .14 var(--oklch-h-danger));--color-protect: var(--oklch-protect);--dot-unsaved: oklch(62% .22 var(--oklch-h-danger));--surface-success-subtle: color-mix(in oklch, var(--color-success) 12%, transparent);--border-success-muted: color-mix(in oklch, var(--color-success) 35%, transparent);--surface-warning-subtle: color-mix(in oklch, var(--color-warning) 15%, transparent);--border-warning-muted: color-mix(in oklch, var(--color-warning) 40%, transparent);--surface-error-subtle: color-mix(in oklch, var(--color-error) 12%, transparent);--bg-checker-a: oklch(30% .008 var(--oklch-h-neutral));--bg-checker-b: oklch(34% .009 var(--oklch-h-neutral));--overlay-scrim: oklch(0% 0 0 / .72);--shadow-canvas: 0 0 10px oklch(0% 0 0 / .5);--shadow-canvas-layered: 0 0 0 1px color-mix(in oklch, var(--accent-primary) 22%, transparent), 0 2px 4px oklch(0% 0 0 / .4), 0 12px 40px oklch(0% 0 0 / .6);--shadow-modal: 0 8px 32px oklch(0% 0 0 / .55);--shadow-elevated: 0 4px 12px oklch(0% 0 0 / .45);--shadow-swatch: 0 2px 8px oklch(0% 0 0 / .6);--swatch-border-hover: color-mix(in oklch, var(--text-primary) 70%, transparent);--swatch-border-active: var(--text-primary);--swatch-marker: var(--text-primary);--btn-success-bg: oklch(32% .06 var(--oklch-h-success));--btn-success-border: oklch(42% .08 var(--oklch-h-success));--btn-confirm-bg: oklch(28% .06 var(--oklch-h-accent));--btn-confirm-border: color-mix(in oklch, var(--accent-primary) 70%, var(--border-color));--surface-error: oklch(28% .05 var(--oklch-h-danger));--text-error-soft: oklch(78% .1 var(--oklch-h-danger));--text-success-soft: oklch(72% .1 var(--oklch-h-success));--toast-error-bg: oklch(26% .06 var(--oklch-h-danger));--toast-error-border: oklch(38% .1 var(--oklch-h-danger));--toast-error-text: oklch(78% .1 var(--oklch-h-danger));--toast-info-bg: oklch(26% .05 var(--oklch-h-accent));--toast-info-border: oklch(32% .08 var(--oklch-h-accent));--toast-info-text: var(--accent-info);--overlay-hover: color-mix(in oklch, var(--text-primary) 5%, transparent);--overlay-row-stripe: color-mix(in oklch, var(--text-primary) 2%, transparent);--overlay-row-muted: color-mix(in oklch, var(--text-primary) 3%, transparent);font-family:var(--font-family-ui);font-size:var(--text-md);line-height:var(--leading-relaxed);font-weight:var(--font-weight-normal);color:var(--text-primary);background-color:var(--bg-app);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}[data-theme=light]{color-scheme:light;--bg-app: oklch(98% .006 var(--oklch-h-neutral));--bg-panel: oklch(95.5% .008 var(--oklch-h-neutral));--bg-panel-hover: oklch(92% .01 var(--oklch-h-neutral));--bg-panel-dark: oklch(96.5% .007 var(--oklch-h-neutral));--bg-input: oklch(100% .004 var(--oklch-h-neutral));--bg-elevated: oklch(100% .005 var(--oklch-h-neutral));--bg-thumb: oklch(94% .008 var(--oklch-h-neutral));--bg-thumb-placeholder: oklch(91% .01 var(--oklch-h-neutral));--border-color: oklch(85% .012 var(--oklch-h-neutral));--border-subtle: color-mix(in oklch, var(--text-primary) 10%, transparent);--border-strong: oklch(78% .014 var(--oklch-h-neutral));--accent-primary: var(--oklch-accent-500);--accent-hover: var(--oklch-accent-600);--accent-info: oklch(48% .14 var(--oklch-h-accent));--accent-selection-subtle: color-mix(in oklch, var(--accent-primary) 14%, transparent);--surface-accent-subtle: color-mix(in oklch, var(--accent-primary) 12%, transparent);--border-accent-muted: color-mix(in oklch, var(--accent-primary) 35%, transparent);--text-primary: oklch(22% .02 var(--oklch-h-neutral));--text-secondary: oklch(42% .02 var(--oklch-h-neutral));--text-muted: oklch(52% .018 var(--oklch-h-neutral));--color-error: oklch(48% .17 var(--oklch-h-danger));--color-warning: oklch(52% .12 var(--oklch-h-warning));--color-success: oklch(45% .14 var(--oklch-h-success));--color-danger: oklch(46% .15 var(--oklch-h-danger));--color-protect: oklch(48% .05 var(--oklch-h-protect));--dot-unsaved: oklch(50% .2 var(--oklch-h-danger));--surface-success-subtle: color-mix(in oklch, var(--color-success) 10%, transparent);--border-success-muted: color-mix(in oklch, var(--color-success) 30%, transparent);--surface-warning-subtle: color-mix(in oklch, var(--color-warning) 12%, transparent);--border-warning-muted: color-mix(in oklch, var(--color-warning) 35%, transparent);--surface-error-subtle: color-mix(in oklch, var(--color-error) 10%, transparent);--bg-checker-a: oklch(92% .008 var(--oklch-h-neutral));--bg-checker-b: oklch(88% .01 var(--oklch-h-neutral));--bg-stage: oklch(93% .01 var(--oklch-h-neutral));--stage-spot: color-mix(in oklch, var(--accent-primary) 6%, transparent);--overlay-scrim: oklch(0% 0 0 / .45);--shadow-canvas: 0 0 10px oklch(0% 0 0 / .15);--shadow-canvas-layered: 0 0 0 1px color-mix(in oklch, var(--accent-primary) 20%, transparent), 0 2px 4px oklch(0% 0 0 / .1), 0 12px 32px oklch(0% 0 0 / .18);--shadow-modal: 0 8px 32px oklch(0% 0 0 / .2);--shadow-elevated: 0 4px 12px oklch(0% 0 0 / .12);--shadow-swatch: 0 2px 8px oklch(0% 0 0 / .2);--swatch-border-hover: color-mix(in oklch, var(--text-primary) 50%, transparent);--swatch-border-active: var(--text-primary);--btn-success-bg: oklch(92% .04 var(--oklch-h-success));--btn-success-border: oklch(82% .06 var(--oklch-h-success));--btn-confirm-bg: oklch(92% .04 var(--oklch-h-accent));--btn-confirm-border: color-mix(in oklch, var(--accent-primary) 50%, var(--border-color));--surface-error: oklch(94% .03 var(--oklch-h-danger));--text-error-soft: oklch(42% .14 var(--oklch-h-danger));--text-success-soft: oklch(40% .12 var(--oklch-h-success));--toast-error-bg: oklch(94% .04 var(--oklch-h-danger));--toast-error-border: oklch(82% .08 var(--oklch-h-danger));--toast-error-text: oklch(42% .14 var(--oklch-h-danger));--toast-info-bg: oklch(94% .03 var(--oklch-h-accent));--toast-info-border: oklch(82% .06 var(--oklch-h-accent));--toast-info-text: var(--accent-info);--overlay-hover: color-mix(in oklch, var(--text-primary) 4%, transparent);--overlay-row-stripe: color-mix(in oklch, var(--text-primary) 3%, transparent);--overlay-row-muted: color-mix(in oklch, var(--text-primary) 4%, transparent)}body{margin:0;padding:0;width:100vw;height:100vh;overflow:hidden;background-color:var(--bg-app)}*,*:before,*:after{box-sizing:border-box}.type-mono,.font-mono{font-family:var(--font-family-mono);font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:18px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";font-feature-settings:"liga";-webkit-font-smoothing:antialiased;vertical-align:middle}.App{display:flex;flex-direction:column;height:100vh;font-family:var(--font-family);background-color:var(--bg-app);background-image:radial-gradient(1100px 520px at 50% -8%,var(--stage-spot),transparent 68%);color:var(--text-primary)}header,header.app-header{padding:14px 22px;padding-top:max(14px,env(safe-area-inset-top,0px));padding-left:max(22px,env(safe-area-inset-left,0px));padding-right:max(22px,env(safe-area-inset-right,0px));background:linear-gradient(180deg,color-mix(in oklch,var(--bg-panel) 92%,var(--accent-primary) 8%),var(--bg-panel) 55%);border-bottom:1px solid var(--border-strong);box-shadow:0 1px color-mix(in oklch,var(--accent-primary) 20%,transparent);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.app-title{margin:0;display:flex;flex-direction:column;gap:2px;line-height:var(--leading-tight)}.app-title-kicker{font-size:var(--text-2xs);font-weight:500;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--accent-info)}.app-title-main{font-size:var(--text-2xl);font-weight:700;letter-spacing:var(--tracking-tight);color:var(--text-primary)}h1{margin:0;font-size:var(--text-xl);font-weight:var(--font-weight-semibold);line-height:var(--leading-tight);color:var(--text-primary);letter-spacing:var(--tracking-tight)}.controls{display:flex;gap:10px;align-items:center}.main{display:flex;flex:1;overflow:hidden}.sidebar{width:clamp(var(--layout-sidebar-min),18vw,var(--layout-sidebar-max));flex-shrink:0;background:var(--bg-app);border-right:1px solid var(--border-color);display:flex;flex-direction:column}.file-list{flex:1;overflow-y:auto}button.file-item{display:block;width:100%;margin:0;text-align:left;font:inherit;padding:10px 16px;cursor:pointer;font-size:var(--text-md);border:none;border-bottom:1px solid var(--border-subtle);border-radius:0;background:transparent;color:var(--text-secondary);transition:background .15s ease,color .15s ease,box-shadow .15s ease;content-visibility:auto;contain-intrinsic-size:auto 80px}button.file-item:hover{background:var(--bg-panel);color:var(--text-primary)}button.file-item.selected{background:var(--surface-accent-subtle);color:var(--text-primary);font-weight:var(--font-weight-semibold);box-shadow:inset 0 0 0 2px var(--accent-primary)}button.file-item:focus{outline:none}button.file-item:focus-visible{outline:2px solid var(--accent-primary);outline-offset:-2px}.workspace{flex:1;display:flex;flex-direction:column;min-width:0}.toolbar{display:flex;align-items:center;flex-wrap:wrap;row-gap:var(--space-2);gap:12px;padding:8px 16px;background:var(--bg-panel);border-bottom:1px solid var(--border-color);flex-shrink:0}.preview-container{flex:1;display:flex;justify-content:center;align-items:center;background-color:var(--bg-stage);background-image:radial-gradient(ellipse 75% 55% at 50% 42%,var(--stage-spot),transparent 72%),linear-gradient(45deg,var(--bg-checker-a) 25%,transparent 25%),linear-gradient(-45deg,var(--bg-checker-a) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--bg-checker-a) 75%),linear-gradient(-45deg,transparent 75%,var(--bg-checker-a) 75%);background-size:auto,20px 20px,20px 20px,20px 20px,20px 20px;background-position:center,0 0,0 10px,10px -10px,-10px 0px;overflow:auto;padding:clamp(24px,4vw,48px)}canvas{box-shadow:var(--shadow-canvas-layered);image-rendering:pixelated;cursor:crosshair}.multi-frame-view{display:flex;flex-wrap:wrap;gap:12px;padding:16px;overflow-y:auto;flex:1;align-content:safe center;justify-content:center}.frame-cell{display:flex;flex-direction:column;align-items:center;cursor:pointer;border:2px solid transparent;border-radius:var(--radius-md);padding:6px;transition:border-color .2s;content-visibility:auto;contain-intrinsic-size:auto 120px}.frame-cell.selected{border-color:var(--accent-primary);background:var(--surface-accent-subtle);box-shadow:var(--shadow-elevated),0 0 0 1px color-mix(in oklch,var(--accent-primary) 35%,transparent)}.frame-cell:hover{border-color:var(--border-strong)}.frame-cell.selected:hover{border-color:var(--accent-hover)}.canvas-bg{display:flex;align-items:center;justify-content:center;background-color:var(--bg-panel-dark);background-image:linear-gradient(45deg,var(--bg-app) 25%,transparent 25%),linear-gradient(-45deg,var(--bg-app) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--bg-app) 75%),linear-gradient(-45deg,transparent 75%,var(--bg-app) 75%);background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0px;border-radius:var(--radius-sm);overflow:hidden}.multi-frame-view.single-mode{justify-content:center;align-items:center;align-content:center}.frame-label{font-size:var(--text-2xs);color:var(--text-muted);margin-top:4px;font-family:var(--font-family-mono);font-variant-numeric:tabular-nums lining-nums;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.frame-canvas{display:block}.frame-canvas:focus{outline:none}.frame-canvas:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}.palette-view{height:auto;background:var(--bg-panel);border-top:1px solid var(--border-color);padding:12px;display:flex;flex-direction:column;gap:var(--space-2)}.palette-data-rail{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;padding:var(--space-2) var(--space-3);background:var(--bg-panel-dark);border:1px solid var(--border-accent-muted);border-radius:var(--radius-md);box-shadow:inset 0 1px color-mix(in oklch,var(--accent-primary) 12%,transparent)}.palette-data-rail--empty{opacity:.85}.palette-data-rail__nav{display:flex;flex-direction:column;gap:2px;flex-shrink:0}.palette-data-rail__step{padding:2px;min-width:28px;min-height:28px}.palette-data-rail__swatches{display:flex;gap:var(--space-1);flex-shrink:0}.palette-data-rail__swatch{width:40px;height:40px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);box-shadow:var(--shadow-swatch)}.palette-data-rail__swatch--source{opacity:.85;box-shadow:none;border-style:dashed}.palette-data-rail__swatch--placeholder{background:var(--bg-elevated);border:1px dashed var(--border-color);box-shadow:none}.palette-data-rail__index-block{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:72px;flex-shrink:0}.palette-data-rail__index-label{font-size:var(--text-2xs);font-weight:var(--font-weight-medium);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--accent-info)}.palette-data-rail__index-value{font-size:1.75rem;font-weight:600;line-height:1;letter-spacing:.04em;color:var(--text-primary);font-variant-numeric:tabular-nums lining-nums}.palette-data-rail__badge{font-size:var(--text-2xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-warning);padding:1px 6px;border-radius:var(--radius-sm);background:var(--surface-warning-subtle);border:1px solid var(--border-warning-muted)}.palette-data-rail__stats{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-4);margin:0;flex:1;min-width:160px}.palette-data-rail__stat{margin:0}.palette-data-rail__stat dt{margin:0 0 2px;font-size:var(--text-2xs);font-weight:var(--font-weight-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted)}.palette-data-rail__stat dd{margin:0;font-size:var(--text-sm);color:var(--text-primary);font-variant-numeric:tabular-nums lining-nums}.palette-grid{display:grid;grid-template-columns:repeat(32,1fr);gap:1px;flex:1}button.palette-swatch{width:100%;height:100%;aspect-ratio:1;min-height:8px;padding:0;margin:0;cursor:pointer;border:1px solid transparent;border-radius:2px;background:transparent}button.palette-swatch:hover{border-color:var(--swatch-border-hover);transform:scale(1.12)}button.palette-swatch.active{border-color:var(--swatch-border-active);outline:2px solid var(--accent-primary);outline-offset:1px;z-index:1;transform:scale(1.28);box-shadow:var(--shadow-swatch)}button.palette-swatch:focus{outline:none}button.palette-swatch:focus-visible{outline:2px solid var(--accent-primary);outline-offset:1px;z-index:2}.params-panel{width:clamp(var(--layout-params-min),28vw,var(--layout-params-max));flex-shrink:0;background:var(--bg-app);border-left:1px solid var(--border-color);display:flex;flex-direction:column;overflow-y:auto}.panel-section{padding:16px;border-bottom:1px solid var(--border-subtle)}.panel-section h3{margin:0 0 12px;font-size:var(--text-sm);font-weight:var(--font-weight-semibold);line-height:var(--leading-snug);text-transform:uppercase;color:var(--text-secondary);letter-spacing:var(--tracking-wider)}.collapsible-header{cursor:pointer;display:flex;align-items:center;gap:8px;margin-bottom:12px;-webkit-user-select:none;user-select:none}.collapsible-header .arrow{font-size:var(--text-lg);color:var(--text-muted);transition:transform .2s}.collapsible-header h3{margin:0;flex:1}.collapsible-header:focus{outline:none}.collapsible-header:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px;border-radius:2px}.param-row{margin-bottom:16px}.param-row label{display:block;margin-bottom:8px;font-size:var(--text-sm);line-height:var(--leading-snug);color:var(--text-secondary)}.param-row input[type=range]{width:100%;display:block;margin-bottom:6px;accent-color:var(--accent-primary)}.param-row input[type=number],.param-row input[type=text]{width:100%;background:var(--bg-panel);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);padding:6px 8px;box-sizing:border-box;font-family:inherit;font-size:var(--text-md);transition:border-color .2s}.param-row input[type=number]:focus,.param-row input[type=text]:focus{outline:none;border-color:var(--accent-primary)}.param-row .value-display{font-size:var(--text-xs);font-family:var(--font-family-mono);font-variant-numeric:tabular-nums;color:var(--text-muted);text-align:right}.btn{padding:6px 14px;cursor:pointer;background:var(--bg-panel);color:var(--text-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:var(--text-md);font-weight:var(--font-weight-medium);line-height:var(--leading-snug);transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:6px}.btn:hover:not(:disabled){background:var(--bg-panel-hover);border-color:var(--border-strong)}.btn:disabled{background:var(--bg-app);color:var(--text-muted);border-color:var(--bg-panel);cursor:not-allowed}.btn:focus{outline:none}.btn:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}.btn-primary{background:var(--accent-primary);border-color:color-mix(in oklch,var(--accent-primary) 80%,var(--border-strong));color:oklch(99% .01 var(--oklch-h-neutral));font-weight:var(--font-weight-semibold);box-shadow:0 1px color-mix(in oklch,var(--text-primary) 12%,transparent)}.btn-primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:0 2px 8px color-mix(in oklch,var(--accent-primary) 35%,transparent)}.btn-secondary{background:transparent}.btn-icon{padding:6px;border-radius:var(--radius-sm);background:transparent;border:1px solid transparent;color:var(--text-secondary)}.btn-icon:hover{background:var(--bg-panel-hover);color:var(--text-primary)}.btn-block{width:100%;margin-top:8px}.btn-sm{padding:4px 10px;font-size:var(--text-sm)}.btn-group{display:flex;align-items:center;background:var(--bg-panel-dark);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:2px}.btn-group .btn{border:none;background:transparent;color:var(--text-secondary);border-radius:calc(var(--radius-sm) - 1px)}.btn-group .btn.active{background:var(--surface-accent-subtle);color:var(--text-primary);font-weight:var(--font-weight-semibold);box-shadow:inset 0 0 0 1px var(--border-accent-muted),var(--shadow-elevated)}.btn-group .btn:hover:not(.active){background:var(--overlay-hover)}.flex-row{display:flex;gap:8px}.flex-1{flex:1}.toggle-group{display:flex;background:var(--bg-panel);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:2px;margin-bottom:12px}.toggle-option{flex:1;text-align:center;padding:6px;font-size:var(--text-sm);cursor:pointer;border-radius:2px;color:var(--text-secondary);transition:all .2s}.toggle-option:hover:not(.active){color:var(--text-primary)}.toggle-option.active{background:var(--bg-panel-hover);color:var(--text-primary);box-shadow:var(--shadow-elevated)}.panel-tabs{display:flex;border-bottom:1px solid var(--border-color);flex-shrink:0;background:var(--bg-app);overflow-x:auto;scrollbar-width:thin}button.panel-tab{text-align:center;padding:12px 10px;font-size:var(--text-sm);font-weight:var(--font-weight-medium);line-height:var(--leading-snug);font-family:inherit;cursor:pointer;color:var(--text-muted);background:transparent;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s,border-color .2s;white-space:nowrap;flex-shrink:0}button.panel-tab:hover{color:var(--text-primary)}button.panel-tab.active{color:var(--text-primary);font-weight:var(--font-weight-semibold);background:var(--surface-accent-subtle);border-bottom-color:var(--accent-primary);box-shadow:inset 0 1px color-mix(in oklch,var(--accent-primary) 25%,transparent)}button.panel-tab:focus{outline:none}button.panel-tab:focus-visible{outline:2px solid var(--accent-primary);outline-offset:-2px}button.panel-tab.panel-tab-settings{margin-left:auto;opacity:.6}.palette-edit-grid{display:grid;grid-template-columns:repeat(16,1fr);gap:1px;margin-top:10px}button.palette-edit-swatch{width:100%;aspect-ratio:1;padding:0;margin:0;cursor:pointer;border:1px solid transparent;position:relative;min-width:0;box-sizing:border-box;border-radius:2px;background:transparent}button.palette-edit-swatch:hover{border-color:var(--swatch-border-hover);z-index:2;transform:scale(1.12)}button.palette-edit-swatch.active{border-color:var(--swatch-border-active);outline:2px solid var(--accent-primary);outline-offset:1px;z-index:1;transform:scale(1.28);box-shadow:var(--shadow-swatch)}button.palette-edit-swatch:focus{outline:none}button.palette-edit-swatch:focus-visible{outline:2px solid var(--accent-primary);outline-offset:1px;z-index:3}button.palette-edit-swatch.edited:after{content:"";position:absolute;bottom:2px;right:2px;width:4px;height:4px;background:var(--swatch-marker);border-radius:50%;pointer-events:none;box-shadow:0 0 2px #00000080}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bg-panel-hover);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.shift-layer-item{display:flex;align-items:center;padding:6px;background:var(--bg-panel-dark);border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer}.shift-layer-item:hover{background:var(--bg-panel)}.shift-layer-item.selected{background:var(--surface-accent-subtle);box-shadow:inset 0 0 0 2px var(--accent-primary)}.shift-layer-item:focus{outline:none}.shift-layer-item:focus-visible{outline:2px solid var(--accent-primary);outline-offset:1px}.modal-overlay{position:fixed;inset:0;z-index:10000;background:var(--overlay-scrim);display:flex;align-items:center;justify-content:center}.modal-dialog{background:var(--bg-panel);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:24px;color:var(--text-primary);box-shadow:var(--shadow-modal);max-height:85vh;overflow-y:auto}.modal-dialog:focus{outline:none}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.modal-title{margin:0;font-size:var(--text-2xl);font-weight:var(--font-weight-semibold);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight)}.param-row input[type=number]:focus-visible,.param-row input[type=text]:focus-visible{outline:2px solid var(--accent-primary);outline-offset:1px}.file-sidebar-header{padding:var(--space-3);color:var(--text-secondary);font-size:var(--text-sm);font-weight:var(--font-weight-medium);border-bottom:1px solid var(--border-subtle)}.file-meta{font-size:var(--text-2xs);color:var(--text-secondary)}.thumb-frame{margin-top:5px;background:var(--bg-thumb);padding:var(--space-1);border-radius:var(--radius-sm);text-align:center;position:relative}.empty-state{color:var(--text-secondary);font-size:var(--text-sm);line-height:var(--leading-normal);padding:var(--space-3)}.empty-state-lg{margin:auto;color:var(--text-muted);font-size:var(--text-lg);line-height:var(--leading-normal)}.hint-copy{font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--text-secondary);margin-bottom:var(--space-3);max-width:65ch}.value-readout{font-size:var(--text-2xs);font-family:var(--font-family-mono);font-variant-numeric:tabular-nums;color:var(--text-secondary)}.field-label-sm{font-size:var(--text-sm);color:var(--text-secondary)}.field-label-xs{font-size:var(--text-2xs);color:var(--text-secondary)}.comparison-before{color:var(--text-secondary);margin-right:4px}.comparison-after{color:var(--accent-info);margin-right:4px}.decode-error{margin-left:6px;color:var(--color-error);font-size:var(--text-2xs)}.decode-warning{margin-left:6px;color:var(--color-warning);font-size:var(--text-2xs)}.protect-hue-label{font-size:var(--text-2xs);color:var(--color-protect);text-transform:uppercase;letter-spacing:var(--tracking-wider)}.input-compact{background:var(--bg-elevated);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary)}.input-compact-sm{padding:3px 6px;font-size:var(--text-sm)}.select-compact{padding:2px 4px;font-size:var(--text-xs);border-radius:var(--radius-sm);background:var(--bg-app);color:var(--text-primary);border:1px solid var(--border-color)}.modal-form-label{font-size:var(--text-sm);color:var(--text-secondary)}.modal-dropzone{border:2px dashed var(--border-color);color:var(--text-secondary)}.btn-icon-ghost{background:none;border:none;color:var(--text-secondary);cursor:pointer}.btn-icon-danger{background:none;border:none;color:var(--color-danger);cursor:pointer}.btn-success-muted{font-size:var(--text-sm);padding:4px 10px;background:var(--btn-success-bg);border-color:var(--btn-success-border)}.create-mda-field{margin-bottom:var(--space-4)}.create-mda-field--spaced{margin-bottom:var(--space-5)}.create-mda-input{width:100%;padding:6px 8px;margin-top:var(--space-1);box-sizing:border-box;background:var(--bg-elevated);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font:inherit;font-size:var(--text-md)}.create-mda-input--narrow{width:100px;margin-top:var(--space-1);margin-left:var(--space-2);padding:4px 6px}.create-mda-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-2)}.create-mda-section-title{margin:0;font-size:var(--text-lg);font-weight:var(--font-weight-medium);color:var(--text-primary)}.create-mda-section-actions{display:flex;gap:var(--space-2)}.create-mda-dropzone{border:2px dashed var(--border-color);border-radius:var(--radius-md);text-align:center;color:var(--text-secondary);min-height:60px;max-height:240px;overflow-y:auto}.create-mda-dropzone--empty{padding:var(--space-6)}.create-mda-dropzone--filled{padding:var(--space-2)}.create-mda-frame-list{text-align:left}.create-mda-frame-row{display:flex;align-items:center;gap:var(--space-2);padding:4px 6px;border-bottom:1px solid var(--border-subtle)}.create-mda-frame-row:nth-child(odd){background:var(--overlay-row-stripe)}.create-mda-frame-index{color:var(--text-secondary);font-size:var(--text-xs);font-family:var(--font-family-mono);font-variant-numeric:tabular-nums;min-width:20px;text-align:right}.create-mda-thumb{width:32px;height:32px;object-fit:contain;image-rendering:pixelated;background:var(--bg-thumb);border-radius:var(--radius-sm)}.create-mda-thumb-placeholder{width:32px;height:32px;background:var(--bg-thumb-placeholder);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:var(--text-2xs);color:var(--text-secondary)}.create-mda-frame-name{flex:1;padding:3px 6px;background:var(--bg-elevated);border:1px solid var(--border-color);border-radius:3px;color:var(--text-primary);font:inherit;font-size:var(--text-sm)}.create-mda-file-name{font-size:var(--text-2xs);color:var(--text-secondary);white-space:nowrap}.create-mda-center-group{display:flex;align-items:center;gap:var(--space-1);margin-left:auto}.create-mda-center-label{font-size:var(--text-2xs);color:var(--text-secondary)}.create-mda-center-input{width:40px;padding:3px 6px;background:var(--bg-elevated);border:1px solid var(--border-color);border-radius:3px;color:var(--text-primary);font:inherit;font-size:var(--text-sm);font-variant-numeric:tabular-nums}.create-mda-icon-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:var(--text-lg);padding:0 2px;line-height:1}.create-mda-icon-btn:disabled{opacity:.35;cursor:not-allowed}.create-mda-icon-btn--danger{color:var(--color-danger);padding:0 4px}.create-mda-anim-card{padding:10px;margin-bottom:var(--space-2);background:var(--overlay-row-muted);border:1px solid var(--border-subtle);border-radius:var(--radius-sm)}.create-mda-anim-header{display:flex;gap:var(--space-2);align-items:center;margin-bottom:var(--space-2)}.create-mda-anim-name-label{font-size:var(--text-xs);color:var(--text-secondary)}.create-mda-anim-name-input{flex:1;padding:3px 6px;background:var(--bg-elevated);border:1px solid var(--border-color);border-radius:3px;color:var(--text-primary);font:inherit;font-size:var(--text-sm)}.create-mda-anim-frames-label{font-size:var(--text-xs);color:var(--text-secondary);margin-bottom:var(--space-1)}.create-mda-anim-frame-row{display:flex;gap:6px;align-items:center;margin-bottom:2px;padding-left:var(--space-2)}.create-mda-anim-frame-select{flex:1;padding:2px 4px;background:var(--bg-elevated);border:1px solid var(--border-color);border-radius:3px;color:var(--text-primary);font:inherit;font-size:var(--text-xs)}.create-mda-anim-type-select{width:80px;padding:2px 4px;background:var(--bg-elevated);border:1px solid var(--border-color);border-radius:3px;color:var(--text-primary);font:inherit;font-size:var(--text-xs)}.create-mda-footer{display:flex;gap:var(--space-2);justify-content:flex-end}.create-mda-build-btn{font-weight:var(--font-weight-semibold)}.create-mda-add-frame-btn{margin-top:var(--space-1)}.tab-settings-list{display:flex;flex-direction:column;gap:var(--space-2)}.tab-settings-item{display:flex;align-items:center;gap:var(--space-2)}.tab-settings-item--locked{cursor:default;opacity:.5}.tab-settings-item:not(.tab-settings-item--locked){cursor:pointer}.tab-settings-hint{font-size:var(--text-xs);color:var(--text-muted)}.settings-section{margin-bottom:var(--space-4)}.settings-section--last{margin-bottom:0}.settings-section-label{margin:0 0 var(--space-2);font-size:var(--text-sm);font-weight:var(--font-weight-medium);color:var(--text-secondary)}.settings-radio-group{display:flex;flex-direction:column;gap:var(--space-2)}.settings-radio-label,.settings-checkbox-label{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);cursor:pointer}.settings-hint-inline{font-size:var(--text-xs);color:var(--text-muted)}.settings-hint{margin:var(--space-2) 0 0;font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--text-muted)}.frame-replace-warning-title{margin-bottom:var(--space-3)}.frame-replace-warning-text{margin:0 0 var(--space-3);font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--text-secondary)}.frame-replace-dim-table{margin:var(--space-3) 0;padding:var(--space-2) var(--space-3);background:var(--bg-app);border:1px solid var(--border-color);border-radius:var(--radius-sm)}.frame-replace-dim-row{display:flex;justify-content:space-between;padding:var(--space-1) 0;font-size:var(--text-sm)}.frame-replace-dim-label{color:var(--text-secondary)}.frame-replace-dim-value{font-family:var(--font-family-mono);font-variant-numeric:tabular-nums;color:var(--text-primary)}.frame-replace-warning-actions{display:flex;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-4)}.toolbar-dir-controls{display:flex;align-items:center;gap:var(--space-3);margin-left:var(--space-2)}.toolbar-dir-controls .param-row{display:flex;align-items:center;gap:var(--space-2);margin:0}.toolbar-dir-controls .param-row label{font-size:var(--text-xs);color:var(--text-muted);white-space:nowrap}.toolbar-num-input{width:44px;padding:3px 4px;font-size:var(--text-sm)}.gradient-stop-row{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;border:1px solid var(--border-subtle);padding:var(--space-2);margin-bottom:var(--space-2);border-radius:var(--radius-sm)}.gradient-stop-t-label{font-size:var(--text-2xs);width:20px}.gradient-stop-t-input{width:48px}.gradient-stop-color{width:28px;height:24px;padding:0;border:none}.oklch-picker{display:flex;flex-direction:column;gap:var(--space-2)}.oklch-picker-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}.mode-switch-btn{font-size:var(--text-xs);padding:var(--space-1) var(--space-2);background:var(--bg-elevated);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer}.mode-switch-btn:hover{color:var(--text-primary);border-color:var(--border-accent-muted)}.gamut-warning{font-size:var(--text-xs);color:var(--color-warning)}.oklch-plane-container{position:relative;width:192px}.oklch-plane-canvas{width:192px;height:192px;image-rendering:pixelated;cursor:crosshair;display:block;border:1px solid var(--border-color)}.oklch-plane-canvas:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}.oklch-crosshair{position:absolute;width:10px;height:10px;border-radius:50%;border:2px solid oklch(99% 0 0);box-shadow:var(--shadow-elevated);transform:translate(-50%,-50%);pointer-events:none}.oklch-plane-axis-labels{display:flex;justify-content:space-between;font-size:var(--text-2xs);color:var(--text-muted);margin-top:2px}.oklch-slider-row{display:flex;align-items:center;gap:var(--space-2)}.oklch-slider-row label{width:14px;font-size:var(--text-xs);color:var(--text-secondary)}.oklch-slider-row input[type=range]{flex:1}.oklch-num-input{width:55px}.oklch-rgb-display{display:flex;gap:var(--space-3);font-size:var(--text-xs);font-family:var(--font-family-mono);color:var(--text-secondary)}@media(max-width:1280px){header{padding:var(--space-3) var(--space-4)}.panel-section{padding:var(--space-3)}}@media(max-width:1024px){.main{flex-direction:column;overflow-y:auto}.sidebar{width:100%;max-height:200px;border-right:none;border-bottom:1px solid var(--border-color)}.file-list{display:flex;flex-direction:row;overflow-x:auto;overflow-y:hidden}button.file-item{width:auto;min-width:160px;flex-shrink:0;border-right:1px solid var(--border-subtle);border-bottom:none}.workspace{flex:1 1 auto;min-height:min(50vh,480px)}.params-panel{width:100%;max-height:min(48vh,520px);border-left:none;border-top:1px solid var(--border-color)}.palette-view{overflow-x:auto;-webkit-overflow-scrolling:touch}.palette-data-rail{flex-direction:column;align-items:stretch}.palette-data-rail__nav{flex-direction:row;justify-content:flex-end}.palette-grid{min-width:min(100%,640px)}.palette-edit-grid{min-width:min(100%,320px)}}@media(max-width:720px){header{flex-direction:column;align-items:flex-start;gap:var(--space-3)}.controls{flex-wrap:wrap;width:100%}h1{font-size:var(--text-lg)}.preview-container{padding:var(--space-3)}button.panel-tab{padding:10px 12px}}@media(pointer:coarse){.btn,label.btn{min-height:var(--touch-target-min)}.btn-icon{min-width:var(--touch-target-min);min-height:var(--touch-target-min);padding:10px}.btn-sm{min-height:var(--touch-target-min);padding:8px 12px}button.panel-tab{min-height:var(--touch-target-min);padding-left:14px;padding-right:14px}button.file-item{min-height:var(--touch-target-min)}.shift-layer-item{min-height:var(--touch-target-min);padding:10px 8px}.collapsible-header{min-height:var(--touch-target-min);padding:4px 0}.toggle-option{min-height:var(--touch-target-min);display:flex;align-items:center;justify-content:center}.param-row input[type=range]{min-height:28px}.palette-grid,.palette-edit-grid{gap:2px}button.palette-swatch,button.palette-edit-swatch{min-height:12px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}button.palette-swatch:hover,button.palette-swatch.active,button.palette-edit-swatch:hover,button.palette-edit-swatch.active{transform:none}}