:root{--bg-page: #cdc9c2;--bg-surface: rgba(255, 255, 255, .24);--bg-surface-deep: rgba(255, 255, 255, .3);--bg-inset: rgba(0, 0, 0, .09);--blur-surface: blur(28px) saturate(180%);--blur-card: blur(34px) saturate(195%);--border-surface: rgba(255, 255, 255, .75);--border-subtle: rgba(0, 0, 0, .1);--border-medium: rgba(0, 0, 0, .16);--text-primary: rgba(0, 0, 0, .88);--text-secondary: rgba(0, 0, 0, .55);--text-muted: rgba(0, 0, 0, .36);--text-hint: rgba(0, 0, 0, .22);--accent: #7f7d79;--accent-hover: #5e5c58;--accent-active: #4a4846;--accent-subtle: rgba(127, 125, 121, .09);--accent-border: rgba(127, 125, 121, .28);--danger: rgba(200, 60, 60, .9);--danger-subtle: rgba(200, 60, 60, .08);--danger-border: rgba(200, 60, 60, .2);--shadow-xs: 0 1px 2px rgba(0, 0, 0, .1);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .13), 0 1px 3px rgba(0, 0, 0, .08);--shadow-md: 0 4px 20px rgba(0, 0, 0, .16), 0 2px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 12px 40px rgba(0, 0, 0, .18), 0 4px 12px rgba(0, 0, 0, .11), 0 1px 3px rgba(0, 0, 0, .07);--glass-inset: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -1px 0 rgba(0, 0, 0, .16);--glass-rim: linear-gradient( 135deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .46) 28%, rgba(255, 255, 255, .18) 62%, rgba(0, 0, 0, .24) 100% );--glass-grain-opacity: .065;--focus-ring: 0 0 0 3px rgba(127, 125, 121, .35);--checkerboard-a: #ededeb;--checkerboard-b: #e4e3e0;--checkerboard-bg: #eae9e6;--viewport-inset: inset 0 1px 4px rgba(0, 0, 0, .12)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg-page: #161514;--bg-surface: rgba(20, 20, 22, .3);--bg-surface-deep: rgba(20, 20, 22, .36);--bg-inset: rgba(0, 0, 0, .35);--border-surface: rgba(255, 255, 255, .14);--border-subtle: rgba(255, 255, 255, .08);--border-medium: rgba(255, 255, 255, .14);--text-primary: rgba(255, 255, 255, .96);--text-secondary: rgba(255, 255, 255, .72);--text-muted: rgba(255, 255, 255, .5);--text-hint: rgba(255, 255, 255, .3);--accent: #a09e9a;--accent-hover: #c0bebb;--accent-active: #d0cecc;--accent-subtle: rgba(160, 158, 154, .1);--accent-border: rgba(160, 158, 154, .25);--danger: rgba(240, 100, 100, .9);--danger-subtle: rgba(240, 100, 100, .1);--danger-border: rgba(240, 100, 100, .22);--shadow-xs: 0 1px 2px rgba(0, 0, 0, .5);--shadow-sm: 0 2px 10px rgba(0, 0, 0, .6), 0 1px 3px rgba(0, 0, 0, .4);--shadow-md: 0 4px 20px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .45);--shadow-lg: 0 12px 48px rgba(0, 0, 0, .75), 0 4px 16px rgba(0, 0, 0, .5), 0 1px 4px rgba(0, 0, 0, .35);--glass-inset: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(0, 0, 0, .45);--glass-rim: linear-gradient( 135deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .26) 30%, rgba(255, 255, 255, .1) 62%, rgba(0, 0, 0, .4) 100% );--glass-grain-opacity: .085;--focus-ring: 0 0 0 3px rgba(160, 158, 154, .4);--checkerboard-a: #222120;--checkerboard-b: #1e1d1c;--checkerboard-bg: #201f1e;--viewport-inset: inset 0 1px 4px rgba(0, 0, 0, .45)}}[data-theme=dark]{--bg-page: #161514;--bg-surface: rgba(20, 20, 22, .3);--bg-surface-deep: rgba(20, 20, 22, .36);--bg-inset: rgba(0, 0, 0, .35);--border-surface: rgba(255, 255, 255, .14);--border-subtle: rgba(255, 255, 255, .08);--border-medium: rgba(255, 255, 255, .14);--text-primary: rgba(255, 255, 255, .96);--text-secondary: rgba(255, 255, 255, .72);--text-muted: rgba(255, 255, 255, .5);--text-hint: rgba(255, 255, 255, .3);--accent: #a09e9a;--accent-hover: #c0bebb;--accent-active: #d0cecc;--accent-subtle: rgba(160, 158, 154, .1);--accent-border: rgba(160, 158, 154, .25);--danger: rgba(240, 100, 100, .9);--danger-subtle: rgba(240, 100, 100, .1);--danger-border: rgba(240, 100, 100, .22);--shadow-xs: 0 1px 2px rgba(0, 0, 0, .5);--shadow-sm: 0 2px 10px rgba(0, 0, 0, .6), 0 1px 3px rgba(0, 0, 0, .4);--shadow-md: 0 4px 20px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .45);--shadow-lg: 0 12px 48px rgba(0, 0, 0, .75), 0 4px 16px rgba(0, 0, 0, .5), 0 1px 4px rgba(0, 0, 0, .35);--glass-inset: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(0, 0, 0, .45);--glass-rim: linear-gradient( 135deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .26) 30%, rgba(255, 255, 255, .1) 62%, rgba(0, 0, 0, .4) 100% );--glass-grain-opacity: .085;--focus-ring: 0 0 0 3px rgba(160, 158, 154, .4);--checkerboard-a: #222120;--checkerboard-b: #1e1d1c;--checkerboard-bg: #201f1e;--viewport-inset: inset 0 1px 4px rgba(0, 0, 0, .45)}:root{--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--text-xs: .6875rem;--text-sm: .75rem;--text-base: .875rem;--text-md: .9375rem;--text-lg: 1rem;--text-xl: 1.125rem;--text-2xl: 1.375rem;--leading-tight: 1.3;--leading-normal: 1.5;--leading-loose: 1.7;--tracking-tight: -.02em;--tracking-normal: 0em;--tracking-wide: .03em;--tracking-widest: .08em;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-pill: 9999px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--transition-fast: .15s ease;--transition-base: .22s ease;--transition-slow: .32s ease;--transition-spring: .24s cubic-bezier(.34, 1.4, .64, 1);--header-height: 52px;--sidebar-width: 232px;--sidebar-width-sm: 192px;--setup-card-max-w: 460px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-weight:400}body{min-height:100vh;font-family:var(--font-family);font-size:var(--text-md);line-height:var(--leading-normal);color:var(--text-primary);background-color:var(--bg-page);transition:background-color var(--transition-slow),color var(--transition-slow);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#bg-layer{position:fixed;inset:0;z-index:-1;background-color:var(--bg-page);background-image:radial-gradient(ellipse 62% 52% at 14% 12%,rgba(255,255,255,.3) 0%,transparent 72%),radial-gradient(ellipse 54% 48% at 82% 18%,rgba(248,246,242,.24) 0%,transparent 74%),radial-gradient(ellipse 64% 58% at 20% 82%,rgba(148,143,136,.2) 0%,transparent 76%),radial-gradient(ellipse 58% 52% at 86% 76%,rgba(255,255,255,.14) 0%,transparent 72%);transition:background-color var(--transition-slow)}[data-theme=dark] #bg-layer{background-image:radial-gradient(ellipse 60% 52% at 16% 14%,rgba(255,255,255,.1) 0%,transparent 72%),radial-gradient(ellipse 56% 48% at 82% 18%,rgba(90,86,80,.34) 0%,transparent 74%),radial-gradient(ellipse 62% 56% at 24% 84%,rgba(255,255,255,.06) 0%,transparent 76%),radial-gradient(ellipse 56% 52% at 82% 76%,rgba(8,8,9,.42) 0%,transparent 70%)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) #bg-layer{background-image:radial-gradient(ellipse 60% 52% at 16% 14%,rgba(255,255,255,.1) 0%,transparent 72%),radial-gradient(ellipse 56% 48% at 82% 18%,rgba(90,86,80,.34) 0%,transparent 74%),radial-gradient(ellipse 62% 56% at 24% 84%,rgba(255,255,255,.06) 0%,transparent 76%),radial-gradient(ellipse 56% 52% at 82% 76%,rgba(8,8,9,.42) 0%,transparent 70%)}}.glass-surface{background-color:var(--bg-surface);backdrop-filter:var(--blur-surface);-webkit-backdrop-filter:var(--blur-surface);border:1px solid var(--border-subtle);box-shadow:var(--shadow-md),var(--glass-inset);position:relative;overflow:hidden;isolation:isolate}.glass-surface--simple{background-color:var(--bg-surface);backdrop-filter:var(--blur-surface);-webkit-backdrop-filter:var(--blur-surface);box-shadow:var(--shadow-md);position:relative;overflow:hidden;isolation:isolate}.glass-surface--deep{background-color:var(--bg-surface-deep);backdrop-filter:var(--blur-card);-webkit-backdrop-filter:var(--blur-card);border:1px solid var(--border-subtle);box-shadow:var(--shadow-lg),var(--glass-inset);position:relative;overflow:hidden;isolation:isolate}.glass-surface:before,.glass-surface--deep:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;background:var(--glass-rim);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}.glass-surface:after,.glass-surface--deep:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px 200px;opacity:var(--glass-grain-opacity);mix-blend-mode:soft-light;z-index:1}[data-theme=dark] .glass-surface:after,[data-theme=dark] .glass-surface--deep:after{opacity:var(--glass-grain-opacity)}.app-layout{height:100dvh;display:flex;flex-direction:column;overflow:hidden}.app-footer{width:100%;height:60px;padding:var(--space-3) var(--space-4);border-top:1px solid var(--border-subtle);display:flex;justify-content:flex-end;font-size:var(--text-xs);color:var(--text-hint);letter-spacing:var(--tracking-wide)}.footer-link{color:var(--text-hint);text-decoration:none;border-bottom:1px solid transparent;transition:border-color var(--transition-base)}.footer-link:hover{border-bottom-color:var(--text-hint)}.app-header{position:fixed;top:0;left:0;right:0;height:var(--header-height);padding:0 var(--space-5);display:flex;align-items:center;justify-content:space-between;z-index:100;flex-shrink:0;overflow:hidden}.app-title{text-transform:uppercase;margin:0;font-size:var(--text-lg);font-weight:600;letter-spacing:var(--tracking-tight);color:var(--text-secondary)}.btn-theme-toggle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius-sm);background:transparent;color:var(--text-secondary);font-size:16px;line-height:1;cursor:pointer;transition:background var(--transition-base),color var(--transition-base),border-color var(--transition-base);flex-shrink:0}.btn-theme-toggle:hover{background:var(--bg-inset);color:var(--text-primary);border-color:var(--border-medium)}.btn-theme-toggle:focus-visible{box-shadow:var(--focus-ring);outline:none}.setup-view{flex:1 1 0;min-height:0;overflow-y:auto;display:flex;justify-content:center;align-items:flex-start;padding:calc(var(--header-height) + var(--space-10)) var(--space-4) var(--space-10)}.setup-card{width:100%;max-width:var(--setup-card-max-w);border-radius:var(--radius-xl);padding:var(--space-8)}.section-heading{font-size:var(--text-xs);font-weight:700;letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted);margin:0 0 var(--space-3)}.status-processing{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-4);color:var(--text-secondary);font-size:var(--text-base);font-weight:500}.spinner{display:inline-block;width:14px;height:14px;border:1.5px solid var(--border-medium);border-top-color:var(--accent);border-radius:50%;animation:spin .75s linear infinite;flex-shrink:0}@keyframes spin{to{transform:rotate(360deg)}}.status-error{margin-top:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--danger-subtle);border:1px solid var(--danger-border);border-radius:var(--radius-md);color:var(--danger);font-size:var(--text-base)}.paint-view{flex:1 1 0;min-height:0;display:grid;grid-template-columns:var(--sidebar-width) 1fr;padding-top:var(--header-height)}.paint-sidebar{padding:var(--space-5) var(--space-4);display:flex;flex-direction:column;gap:var(--space-5);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--border-medium) transparent}.paint-sidebar::-webkit-scrollbar{width:3px}.paint-sidebar::-webkit-scrollbar-track{background:transparent}.paint-sidebar::-webkit-scrollbar-thumb{background:var(--border-medium);border-radius:var(--radius-pill)}.paint-main{padding:var(--space-4);overflow:hidden;display:flex;flex-direction:column;min-width:0}.sidebar-option{display:flex;flex-direction:column;gap:var(--space-2)}.toggle-label{display:flex;align-items:center;gap:var(--space-3);font-weight:500;font-size:var(--text-base);color:var(--text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none}.toggle-label input[type=checkbox]{-webkit-appearance:none;appearance:none;width:36px;height:20px;background:var(--bg-inset);border:1px solid var(--border-medium);border-radius:var(--radius-pill);cursor:pointer;position:relative;flex-shrink:0;transition:background var(--transition-base),border-color var(--transition-base)}.toggle-label input[type=checkbox]:after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;background:var(--text-muted);border-radius:50%;transition:transform var(--transition-spring),background var(--transition-base)}.toggle-label input[type=checkbox]:checked{background:var(--accent-subtle);border-color:var(--accent-border)}.toggle-label input[type=checkbox]:checked:after{transform:translate(16px);background:var(--accent)}.toggle-label input[type=checkbox]:focus-visible{box-shadow:var(--focus-ring);outline:none}.option-hint{font-size:var(--text-xs);color:var(--text-hint);line-height:var(--leading-loose);margin:0}.sidebar-actions{display:flex;flex-direction:column;gap:var(--space-2)}.sidebar-info{font-size:var(--text-xs);color:var(--text-muted);border-top:1px solid var(--border-subtle);padding-top:var(--space-4);display:flex;flex-direction:column;gap:var(--space-1);margin-top:auto}.info-row{display:flex;justify-content:space-between;align-items:center;padding:var(--space-1) 0}.info-row span:last-child{color:var(--text-secondary);font-weight:500;font-variant-numeric:tabular-nums}.canvas-container{display:flex;flex-direction:column;gap:var(--space-2);min-width:0;height:100%}.view-controls{display:flex;align-items:center;gap:var(--space-1);flex-shrink:0;padding:var(--space-1) var(--space-2);border-radius:var(--radius-md);width:fit-content;position:sticky;top:var(--space-2);margin:var(--space-2) 0 0 var(--space-2);z-index:20}.view-controls-content{display:flex;align-items:center;gap:var(--space-1)}.view-controls-toggle{width:34px;height:34px;border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:var(--bg-inset);color:var(--text-secondary);display:none;align-items:center;justify-content:center;line-height:1;padding:0;font-size:1rem}.view-controls-toggle:hover{color:var(--text-primary);border-color:var(--border-medium)}.view-controls-toggle:focus-visible{box-shadow:var(--focus-ring)}.view-controls--collapsed{padding:var(--space-1)}.view-controls--collapsed .view-controls-content{display:none}@media(max-width:767px){.view-controls-toggle{display:inline-flex}}.zoom-label{font-size:var(--text-sm);font-weight:500;color:var(--text-secondary);min-width:40px;text-align:center;font-variant-numeric:tabular-nums}.pan-hint{font-size:var(--text-xs);color:var(--text-hint);margin-left:var(--space-2)}.canvas-viewport{flex:1;position:relative;overflow:hidden;border:1px solid var(--border-subtle);border-radius:var(--radius-md);min-height:200px;background-color:var(--checkerboard-bg);background-image:linear-gradient(45deg,var(--checkerboard-a) 25%,transparent 25%),linear-gradient(-45deg,var(--checkerboard-a) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--checkerboard-b) 75%),linear-gradient(-45deg,transparent 75%,var(--checkerboard-b) 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px;box-shadow:var(--viewport-inset)}.canvas-transform-layer{position:absolute;top:0;left:0;will-change:transform}.coloring-canvas{display:block;cursor:crosshair;touch-action:none;image-rendering:pixelated;image-rendering:crisp-edges}.upload-panel{position:relative;border-radius:var(--radius-lg);padding:var(--space-8) var(--space-6);text-align:center;cursor:pointer;background-color:transparent;background-image:url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='rgba(0%2c0%2c0%2c0.24)' stroke-width='1.5' stroke-dasharray='6%2c%206' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e");transition:background-color var(--transition-base),box-shadow var(--transition-base)}[data-theme=dark] .upload-panel{background-image:url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='rgba(255%2c255%2c255%2c0.14)' stroke-width='1.5' stroke-dasharray='6%2c 6' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e")}.upload-panel:hover{background-color:var(--accent-subtle);background-image:url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='rgba(127%2c125%2c121%2c0.42)' stroke-width='1.5' stroke-dasharray='6%2c 6' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e")}[data-theme=dark] .upload-panel:hover{background-image:url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='rgba(160%2c158%2c154%2c0.42)' stroke-width='1.5' stroke-dasharray='6%2c 6' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e")}.upload-panel--dragover{background-color:var(--accent-subtle);background-image:url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='rgba(127%2c125%2c121%2c0.65)' stroke-width='1.5' stroke-dasharray='6%2c 6' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e");box-shadow:0 0 0 3px #7f7d7926}[data-theme=dark] .upload-panel--dragover{background-image:url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='rgba(160%2c158%2c154%2c0.65)' stroke-width='1.5' stroke-dasharray='6%2c 6' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e");box-shadow:0 0 0 3px #a09e9a26}.upload-input{display:none}.upload-placeholder{display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}.upload-icon{font-size:1.75rem;line-height:1;color:var(--text-muted)}.upload-text{font-size:var(--text-base);color:var(--text-muted);margin:0;line-height:var(--leading-normal)}.upload-preview{display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}.preview-img{max-width:100%;max-height:180px;border-radius:var(--radius-md);object-fit:contain;border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm)}.preview-meta{font-size:var(--text-sm);color:var(--text-muted);font-variant-numeric:tabular-nums}.control-panel{border-radius:var(--radius-lg);padding:var(--space-5);position:relative;color:var(--text-primary)}.control-panel-content{display:flex;flex-direction:column;gap:var(--space-5)}.control-panel-toggle{display:none;width:34px;height:34px;border-radius:var(--radius-pill);border:1px solid var(--border-medium);background:var(--bg-inset);color:var(--text-primary);box-shadow:var(--shadow-xs);align-items:center;justify-content:center;margin-left:auto}.control-panel-toggle:hover{border-color:var(--accent-border);color:var(--accent-hover)}.control-panel-toggle:focus-visible{box-shadow:var(--focus-ring),var(--shadow-xs)}.control-panel-toggle-icon{font-size:.95rem;line-height:1}.control-panel-toggle-label{display:none}.control-row{display:flex;flex-direction:column;gap:var(--space-2)}.control-label{font-weight:500;font-size:var(--text-base);color:var(--text-primary);display:flex;justify-content:space-between;align-items:center}.control-value{font-weight:400;font-size:var(--text-sm);color:var(--text-secondary);font-variant-numeric:tabular-nums}.slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--bg-inset);border-radius:var(--radius-pill);outline:none;cursor:pointer;box-shadow:inset 0 1px 2px #00000014}.slider::-webkit-slider-runnable-track{height:4px;background:linear-gradient(to right,var(--accent) 0%,var(--accent) var(--slider-pct, 50%),var(--bg-inset) var(--slider-pct, 50%));border-radius:var(--radius-pill)}.slider::-moz-range-track{height:4px;background:var(--bg-inset);border-radius:var(--radius-pill)}.slider::-moz-range-progress{height:4px;background:var(--accent);border-radius:var(--radius-pill)}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#fff;border:1.5px solid var(--accent);border-radius:50%;cursor:pointer;margin-top:-6px;box-shadow:var(--shadow-sm);transition:box-shadow var(--transition-base),transform var(--transition-spring)}.slider::-moz-range-thumb{width:16px;height:16px;background:#fff;border:1.5px solid var(--accent);border-radius:50%;cursor:pointer;box-shadow:var(--shadow-sm);transition:box-shadow var(--transition-base)}.slider:hover::-webkit-slider-thumb{box-shadow:var(--shadow-sm),0 0 0 4px var(--accent-subtle);transform:scale(1.1)}.slider:focus-visible{outline:none}.slider:focus-visible::-webkit-slider-thumb{box-shadow:var(--shadow-sm),var(--focus-ring)}.slider-hints{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--text-secondary);margin-top:var(--space-1)}.palette-size-options{display:flex;gap:var(--space-2)}.btn-generate{margin-top:var(--space-2);width:100%;padding:var(--space-4) var(--space-5);font-size:var(--text-md);font-weight:600;letter-spacing:var(--tracking-wide);border-radius:var(--radius-lg)}.palette-selector{-webkit-user-select:none;user-select:none}.palette-title{font-size:var(--text-xs);font-weight:600;letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted);margin:0 0 var(--space-3)}.palette-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:var(--space-2)}.swatch{aspect-ratio:1;border:2px solid transparent;border-radius:var(--radius-md);cursor:pointer;font-size:var(--text-xs);font-weight:700;display:flex;align-items:center;justify-content:center;transition:transform var(--transition-spring),box-shadow var(--transition-base)}.swatch:hover{transform:scale(1.06);box-shadow:var(--shadow-md);z-index:1}.swatch:focus-visible{box-shadow:var(--focus-ring);outline:none;z-index:1}.swatch--active{box-shadow:0 0 0 2px var(--bg-page),0 0 0 4px var(--accent),var(--shadow-sm);transform:scale(1.1);z-index:1}.swatch--active:hover{transform:scale(1.13)}.swatch--done{opacity:.45;cursor:default}.swatch--done:hover{transform:none;box-shadow:none}.swatch-check{width:60%;height:60%;stroke-width:3}.progress-wrapper{padding:var(--space-2) 0;flex-shrink:0}.progress-track{height:5px;background:var(--bg-inset);border-radius:var(--radius-pill);overflow:hidden}.progress-fill{height:100%;background:var(--accent);border-radius:var(--radius-pill);transition:width .4s ease}.progress-labels{display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-2);font-size:var(--text-xs)}.progress-pct{color:var(--text-muted);font-variant-numeric:tabular-nums}.progress-done{color:var(--accent);font-weight:600;letter-spacing:var(--tracking-wide);animation:pulse-done 1.8s ease-in-out infinite}@keyframes pulse-done{0%,to{opacity:1}50%{opacity:.6}}.btn-export{width:100%;padding:var(--space-3) var(--space-4)}@media(min-width:768px)and (max-width:1023px){.paint-view{grid-template-columns:var(--sidebar-width-sm) 1fr}}@media(max-width:767px){.setup-view{padding:calc(var(--header-height) + var(--space-6)) var(--space-3) var(--space-6)}.setup-card{padding:var(--space-5);border-radius:var(--radius-lg)}.control-panel{padding:var(--space-2);border-radius:var(--radius-md)}.control-panel-toggle{display:inline-flex}.control-panel-content{margin-top:var(--space-3)}.control-panel--collapsed .control-panel-content{display:none}.paint-view{grid-template-columns:1fr;grid-template-rows:1fr auto}.paint-sidebar{grid-row:2;border-right:none;border-top:1px solid var(--border-subtle);padding:var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));flex-direction:column;flex-wrap:nowrap;gap:var(--space-2);overflow:hidden}.paint-sidebar>*{width:100%;flex-shrink:0}.palette-title{display:none}.palette-swatches{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:var(--space-2);padding:var(--space-2) var(--space-2) var(--space-3);scrollbar-width:none}.palette-swatches::-webkit-scrollbar{display:none}.swatch{width:40px;height:40px;flex-shrink:0}.sidebar-actions{flex-direction:row;flex-wrap:wrap;gap:var(--space-2)}.sidebar-actions>*{flex:1 1 calc(50% - var(--space-2));min-width:0;font-size:11px;padding:var(--space-2) var(--space-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-option:not(.sidebar-option--mobile),.sidebar-info{display:none}.sidebar-option--mobile .option-hint{display:none}.sidebar-option--mobile{padding:var(--space-2) 0}.paint-main{padding:var(--space-2)}}@media(min-width:768px)and (max-height:600px){.paint-sidebar{overflow-y:auto;gap:var(--space-3);padding:var(--space-3) var(--space-3)}.palette-swatches{grid-template-columns:repeat(auto-fill,minmax(28px,1fr));gap:var(--space-1)}.swatch{font-size:10px}.sidebar-actions>*{font-size:var(--text-xs);padding:var(--space-2) var(--space-3)}.option-hint,.pan-hint{display:none}.view-controls{padding:var(--space-1)}}@media(max-width:900px)and (max-height:500px)and (orientation:landscape){.app-header{height:40px;padding:0 var(--space-4)}.paint-view{padding-top:40px;grid-template-columns:180px 1fr;grid-template-rows:1fr}.paint-sidebar{grid-row:unset;border-right:1px solid var(--border-subtle);border-top:none;padding:var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom));flex-direction:column;flex-wrap:nowrap;gap:var(--space-2);overflow-y:auto;overflow-x:hidden}.paint-sidebar>*{width:100%;flex-shrink:0}.palette-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-1);padding:var(--space-1);overflow-x:unset;flex-direction:unset;flex-wrap:unset}.palette-swatches::-webkit-scrollbar{display:unset}.swatch{width:auto;height:auto;aspect-ratio:1;flex-shrink:unset}.palette-title{display:block;font-size:10px}.sidebar-option:not(.sidebar-option--mobile){display:flex}.sidebar-option--mobile{display:none}.sidebar-actions{flex-direction:column;flex-wrap:nowrap;gap:var(--space-1)}.sidebar-actions>*{flex:unset;width:100%;font-size:11px;padding:var(--space-1) var(--space-2)}.paint-main{padding:var(--space-2)}}#app{max-width:none;margin:0;padding:0}button{font-family:var(--font-family);font-size:var(--text-base);line-height:1;cursor:pointer;border:none;outline:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);white-space:nowrap;text-decoration:none;transition:background var(--transition-base),color var(--transition-base),border-color var(--transition-base),box-shadow var(--transition-base),opacity var(--transition-base),transform var(--transition-spring)}button:focus-visible{box-shadow:var(--focus-ring);outline:none}.btn-primary{background:var(--accent);color:#fff;border:none;border-radius:var(--radius-md);padding:var(--space-3) var(--space-5);font-size:var(--text-base);font-weight:600;letter-spacing:var(--tracking-wide);box-shadow:var(--shadow-sm)}[data-theme=dark] .btn-primary{color:#1a1917}.btn-primary:hover:not(:disabled){background:var(--accent-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-primary:active:not(:disabled){background:var(--accent-active);box-shadow:var(--shadow-xs);transform:translateY(0)}.btn-primary:focus-visible{box-shadow:var(--focus-ring),var(--shadow-sm)}.btn-primary:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}.btn-secondary{background:var(--bg-surface);color:var(--text-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);font-size:var(--text-base);font-weight:500;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:var(--shadow-xs)}.btn-secondary:hover{color:var(--text-primary);border-color:var(--border-medium);box-shadow:var(--shadow-sm);transform:translateY(-1px)}.btn-secondary:active{transform:translateY(0);box-shadow:none}.btn-secondary:focus-visible{box-shadow:var(--focus-ring)}.btn-solve{background:var(--accent-subtle);color:var(--accent);border:1px solid var(--accent-border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);font-size:var(--text-base);font-weight:600;letter-spacing:var(--tracking-wide);width:100%}.btn-solve:hover:not(:disabled){background:var(--accent-subtle);border-color:var(--accent);color:var(--accent-hover);box-shadow:var(--shadow-sm);transform:translateY(-1px)}.btn-solve:active:not(:disabled){transform:translateY(0);box-shadow:none}.btn-solve:focus-visible{box-shadow:var(--focus-ring)}.btn-solve:disabled{opacity:.28;cursor:not-allowed;transform:none}.btn-option{background:transparent;color:var(--text-muted);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);font-size:var(--text-base);font-weight:500;min-width:40px;min-height:32px}.btn-option:hover{color:var(--text-primary);border-color:var(--border-medium)}.btn-option--active{background:var(--accent-subtle);color:var(--accent);border-color:var(--accent-border);font-weight:600}.btn-option--active:hover{color:var(--accent-hover)}.btn-option:focus-visible{box-shadow:var(--focus-ring)}.btn-view{background:var(--bg-surface);color:var(--text-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:var(--space-1) var(--space-2);font-size:var(--text-md);font-weight:500;line-height:1;min-width:28px;min-height:28px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.btn-view:hover{color:var(--text-primary);border-color:var(--border-medium);box-shadow:var(--shadow-xs)}.btn-view:active{box-shadow:none}.btn-view:focus-visible{box-shadow:var(--focus-ring)}.btn-sm{padding:var(--space-1) var(--space-3);font-size:var(--text-sm);border-radius:var(--radius-sm)}