:root{--bg: #ffffff;--panel: #ffffff;--panel-2: #f7f7f6;--header: #ffffff;--border: #e4e4e7;--border-light: #d4d4d8;--text: #3f3f46;--text-bright: #18181b;--text-dim: #71717a;--accent: #18181b;--accent-hover: #000000;--accent-contrast: #ffffff;--accent-soft: rgba(24, 24, 27, .08);--danger: #dc2626;--danger-soft: rgba(220, 38, 38, .1);--canvas-bg: #efefec;--canvas-checker: #e2e2de;--overlay-bg: rgba(255, 255, 255, .92);--font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--radius: 8px;--radius-sm: 5px;--shadow: 0 2px 10px rgba(0, 0, 0, .08);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .06)}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--bg: #101012;--panel: #101012;--panel-2: #18181b;--header: #101012;--border: #2a2a2e;--border-light: #3a3a3f;--text: #c8c8cc;--text-bright: #f4f4f5;--text-dim: #8a8a90;--accent: #f4f4f5;--accent-hover: #ffffff;--accent-contrast: #101012;--accent-soft: rgba(244, 244, 245, .1);--danger: #f87171;--danger-soft: rgba(248, 113, 113, .14);--canvas-bg: #0a0a0b;--canvas-checker: #17171a;--overlay-bg: rgba(16, 16, 18, .92);--shadow: 0 2px 10px rgba(0, 0, 0, .4);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .3)}}:root[data-theme=dark]{--bg: #101012;--panel: #101012;--panel-2: #18181b;--header: #101012;--border: #2a2a2e;--border-light: #3a3a3f;--text: #c8c8cc;--text-bright: #f4f4f5;--text-dim: #8a8a90;--accent: #f4f4f5;--accent-hover: #ffffff;--accent-contrast: #101012;--accent-soft: rgba(244, 244, 245, .1);--danger: #f87171;--danger-soft: rgba(248, 113, 113, .14);--canvas-bg: #0a0a0b;--canvas-checker: #17171a;--overlay-bg: rgba(16, 16, 18, .92);--shadow: 0 2px 10px rgba(0, 0, 0, .4);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .3)}*{box-sizing:border-box}.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}.wasm-loading-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);z-index:1000;color:var(--text)}.wasm-loading-overlay.hidden{display:none}.wasm-loading-overlay .spinner{width:32px;height:32px;border:3px solid var(--border-light);border-top-color:var(--accent);border-radius:50%;animation:wasm-spin .8s linear infinite}@keyframes wasm-spin{to{transform:rotate(360deg)}}body{margin:0;padding:0;font-family:var(--font-body);line-height:1.5;background-color:var(--bg);color:var(--text);height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.app-header{height:52px;background-color:var(--header);display:flex;justify-content:space-between;align-items:center;padding:0 var(--space-4);border-bottom:1px solid var(--border);flex-shrink:0}.header-left,.header-right{display:flex;align-items:center;gap:var(--space-3)}.header-left{min-width:0;flex-shrink:1}.header-right{flex-shrink:0}.header-left h1{margin:0;min-width:0;font-size:1.15rem;font-weight:600;color:var(--text-bright);letter-spacing:.2px}.theme-menu-wrap{position:relative}.theme-menu{position:absolute;top:calc(100% + var(--space-1));right:0;z-index:100;margin:0;padding:var(--space-1);min-width:180px;list-style:none;background-color:var(--panel-2);border:1px solid var(--border-light);border-radius:var(--radius-sm);box-shadow:var(--shadow)}.theme-menu[hidden]{display:none}.theme-menu li{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2);border-radius:var(--radius-sm);font-size:.85rem;color:var(--text-bright);cursor:pointer;white-space:nowrap}.theme-menu li:hover{background-color:var(--accent-soft)}.theme-menu-icon{color:var(--text-dim);flex-shrink:0}.theme-menu li span{flex-grow:1}.theme-menu-check{flex-shrink:0;visibility:hidden}.theme-menu li[aria-checked=true] .theme-menu-check{visibility:visible}.btn{background-color:var(--panel-2);color:var(--text-bright);border:1px solid var(--border-light);padding:0 var(--space-3);height:34px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);cursor:pointer;font-size:.9rem;transition:background-color .15s,border-color .15s,transform .05s;box-shadow:var(--shadow-sm)}.btn:hover:not(:disabled){background-color:var(--border-light);border-color:var(--text-dim)}.btn:active:not(:disabled){transform:translateY(1px)}.header-right .btn{white-space:nowrap;flex-shrink:0}.btn.primary{background-color:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}.btn.primary:hover:not(:disabled){background-color:var(--accent-hover);border-color:var(--accent-hover)}.btn.danger{background-color:transparent;border-color:var(--danger);color:var(--danger)}.btn.danger:hover:not(:disabled){background-color:var(--danger-soft)}.btn.full-width{width:100%;margin-bottom:var(--space-2)}.btn.btn-with-icon{display:flex;align-items:center;justify-content:center;gap:var(--space-2)}.btn-with-icon svg{flex-shrink:0}.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.btn.needs-reapply{position:relative}.btn.needs-reapply:after{content:"";position:absolute;top:-4px;right:-4px;width:10px;height:10px;border-radius:50%;background-color:var(--danger);border:2px solid var(--panel)}.apply-pending-badge{display:block;font-size:.75rem;font-weight:400;margin-top:2px}.apply-pending-badge[hidden]{display:none}.btn-icon-lg{position:relative;background:none;border:none;color:var(--text-bright);cursor:pointer;font-size:1.3rem;line-height:1;padding:var(--space-2);border-radius:var(--radius-sm)}.btn-icon-lg:hover{background-color:var(--panel-2)}.text-btn{background:none;border:none;color:var(--accent);cursor:pointer;padding:var(--space-1) var(--space-2);font-size:.85rem;border-radius:var(--radius-sm)}.text-btn:hover:not(:disabled){background-color:var(--accent-soft)}.text-btn:disabled{opacity:.4;cursor:not-allowed}.app-body{display:flex;flex:1;overflow:hidden;position:relative}.left-panel{width:260px;background-color:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0}.panel-title{padding:var(--space-4);margin:0;font-size:.95rem;font-weight:600;color:var(--text-bright);border-bottom:1px solid var(--border)}.upload-area{padding:var(--space-3);border-bottom:1px solid var(--border)}.drop-zone{margin-top:var(--space-2);padding:var(--space-3);border:1px dashed var(--border-light);border-radius:var(--radius-sm);text-align:center;font-size:.8rem;color:var(--text-dim);transition:border-color .15s,background-color .15s}.drop-zone.drag-over{border-color:var(--accent);background-color:var(--accent-soft);color:var(--text-bright)}#btnSample,.upload-help{margin-top:var(--space-2)}.help-area{padding:var(--space-3)}.help-modal{width:min(560px,calc(100vw - 32px));max-height:min(640px,calc(100vh - 64px));padding:0;border:1px solid var(--border);border-radius:var(--radius);background-color:var(--panel);color:var(--text);box-shadow:var(--shadow);display:flex;flex-direction:column}.help-modal:not([open]){display:none}.help-modal::backdrop{background-color:var(--overlay-bg)}.help-modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4);border-bottom:1px solid var(--border);flex-shrink:0}.help-modal-header h2{margin:0;font-size:1.1rem;font-weight:600;color:var(--text-bright)}.help-modal-body{padding:var(--space-4);overflow-y:auto;flex:1;min-height:0}.help-modal-body section{margin-bottom:var(--space-4)}.help-modal-body section:last-child{margin-bottom:0}.help-modal-body h3{margin:0 0 var(--space-2);font-size:.95rem;font-weight:600;color:var(--text-bright)}.help-modal-body p{margin:0;font-size:.88rem;color:var(--text-dim);line-height:1.6}.main-content{flex:1;position:relative;background-color:var(--canvas-bg);overflow:hidden}#canvasContainer{width:100%;height:100%;cursor:grab;position:relative;touch-action:none;background-color:var(--canvas-bg);background-image:linear-gradient(45deg,var(--canvas-checker) 25%,transparent 25%),linear-gradient(-45deg,var(--canvas-checker) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--canvas-checker) 75%),linear-gradient(-45deg,transparent 75%,var(--canvas-checker) 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}#canvasContainer.grabbing{cursor:grabbing}#canvasContainer.picking-active{cursor:none;box-shadow:inset 0 0 0 2px var(--accent)}#canvasContainer.picking-active.grabbing{cursor:grabbing}#canvasContainer.picking-active.no-pick-here{cursor:grab}.pick-cursor{position:fixed;width:0;height:0;pointer-events:none;z-index:200;display:none}#canvasContainer.picking-active .pick-cursor{display:block}#canvasContainer.picking-active.grabbing .pick-cursor{display:none}.pick-cursor-cross-h,.pick-cursor-cross-v{position:absolute;background-color:#fff;box-shadow:0 0 0 1px #000}.pick-cursor-cross-h{width:16px;height:1px;left:-8px;top:0}.pick-cursor-cross-v{width:1px;height:16px;left:0;top:-8px}.pick-cursor-swatch{position:absolute;left:10px;top:10px;width:14px;height:14px;border-radius:3px;box-shadow:0 0 0 1px #000,0 0 0 2px #fff;background-color:var(--accent)}.pick-cursor-warning{position:absolute;left:10px;top:30px;width:max-content;max-width:240px;white-space:normal;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);background-color:var(--overlay-bg);border:1px solid var(--border-light);color:var(--text-bright);font-size:.72rem;box-shadow:var(--shadow-sm)}.pick-cursor-warning.flip-x{left:auto;right:10px}.pick-cursor-warning.flip-y{top:auto;bottom:10px}.pick-cursor-warning[hidden]{display:none}canvas{display:block;position:relative}.zoom-controls{position:absolute;right:var(--space-4);bottom:var(--space-4);display:flex;flex-direction:column;gap:var(--space-1);background-color:var(--overlay-bg);padding:var(--space-2);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.zoom-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background-color:var(--panel-2);color:var(--text-bright);border:1px solid var(--border-light);border-radius:var(--radius-sm);cursor:pointer;font-size:.75rem;line-height:1;transition:background-color .15s}.zoom-btn:hover:not(:disabled){background-color:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}.zoom-btn:disabled{opacity:.4;cursor:not-allowed}.zoom-label{text-align:center;font-size:.75rem;color:var(--text-dim);font-variant-numeric:tabular-nums;padding-top:var(--space-1)}.toast-container{position:absolute;top:var(--space-4);left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:var(--space-2);pointer-events:none;z-index:60}.toast{background-color:var(--overlay-bg);color:var(--text-bright);padding:var(--space-2) var(--space-4);border-radius:var(--radius);border:1px solid var(--border-light);box-shadow:var(--shadow);font-size:.85rem;opacity:0;transform:translateY(-8px);transition:opacity .25s,transform .25s}.toast.show{opacity:1;transform:translateY(0)}.side-panel{width:340px;background-color:var(--panel);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0}.side-panel-scroll{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}.panel-section{padding:var(--space-4);border-bottom:1px solid var(--border)}.action-section{flex-shrink:0;border-bottom:none;border-top:1px solid var(--border)}.panel-section h2{margin:0 0 var(--space-2) 0;font-size:.95rem;font-weight:600;color:var(--text-bright)}.help-text{font-size:.78rem;color:var(--text-dim);margin:0 0 var(--space-3) 0;line-height:1.4}.hex-input{background-color:var(--bg);color:var(--text-bright);border:1px solid var(--border-light);padding:var(--space-2);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:.85rem;width:84px}.hex-input.invalid{border-color:var(--danger);border-width:2px;background-color:var(--danger-soft)}input[type=color]{padding:0;border:1px solid var(--border-light);border-radius:var(--radius-sm);background:none;cursor:pointer;width:32px;height:32px}.edit-list{list-style:none;padding:0;margin:0 0 var(--space-2) 0;display:flex;flex-direction:column;gap:var(--space-1)}.edit-row{display:flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);background-color:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);transition:border-color .15s,opacity .15s;min-width:0}.edit-row:hover{border-color:var(--border-light)}.edit-row.disabled{background-color:var(--panel-2)}.hex-input:disabled,.swatch:disabled{opacity:.5;cursor:not-allowed}.edit-row.dragging{opacity:.5}.edit-row.drop-above{border-top:2px solid var(--accent)}.edit-row.drop-below{border-bottom:2px solid var(--accent)}.drag-handle{cursor:grab;color:var(--text-dim);padding:0;-webkit-user-select:none;user-select:none;flex-shrink:0;touch-action:none}.move-buttons{display:none;flex-direction:column;gap:1px;flex-shrink:0}.move-btn{font-size:.6rem;line-height:1;padding:1px}.row-toggle{display:flex;align-items:center;gap:3px;cursor:pointer;flex-shrink:0}.row-toggle input{width:16px;height:16px;cursor:pointer;accent-color:var(--accent)}.color-field{display:flex;align-items:center;gap:2px;flex:1 1 0;min-width:0}.swatch{width:24px;height:24px;border:1px solid var(--border-light);border-radius:var(--radius-sm);cursor:pointer;padding:0;flex-shrink:0;transition:border-color .15s,box-shadow .15s}.swatch:hover{border-color:var(--accent)}.swatch.active-pick{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent)}.hex-inline{flex:1 1 0;min-width:0;width:auto;background-color:transparent;border-color:transparent;font-size:.78rem;padding:2px var(--space-1)}.hex-inline:focus{background-color:var(--bg);border-color:var(--border-light)}.row-arrow{color:var(--text-dim);flex-shrink:0}.row-spacer{flex:1}.btn-icon{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:.95rem;padding:var(--space-1);border-radius:var(--radius-sm);flex-shrink:0}.btn-icon:hover{color:var(--danger);background-color:var(--danger-soft)}.catch-all-row{border-style:dashed}.catch-all-label{font-size:.8rem;color:var(--text-dim);white-space:nowrap}.hidden{display:none!important}.app-footer{height:34px;background-color:var(--header);border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;padding:0 var(--space-4);font-size:.8rem;color:var(--text);flex-shrink:0}.status-right{display:flex;gap:var(--space-4);align-items:center}.status-right>*{white-space:nowrap;flex-shrink:0}#statusCoordinates,#statusZoom{font-variant-numeric:tabular-nums;color:var(--text-dim)}.hover-color{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);color:var(--text-dim)}.hover-swatch{width:16px;height:16px;border-radius:3px;border:1px solid var(--border-light);background-color:transparent}.mobile-only{display:none}.mobile-overlay{display:none;position:absolute;top:0;right:0;bottom:0;left:0;background-color:#0000008c;z-index:50}.mobile-overlay.show{display:block}@media (max-width: 768px){.mobile-only{display:inline-flex;align-items:center;justify-content:center}.move-buttons{display:flex}.header-left h1{font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.left-panel{position:absolute;top:0;bottom:0;left:0;width:85vw;max-width:320px;z-index:100;transform:translate(-100%);transition:transform .28s ease}.left-panel.show{transform:translate(0);box-shadow:4px 0 16px #00000080}.side-panel{position:absolute;top:0;bottom:0;right:0;width:88vw;max-width:360px;z-index:100;transform:translate(100%);transition:transform .28s ease}.side-panel.show{transform:translate(0);box-shadow:-4px 0 16px #00000080}.btn{padding:var(--space-3);min-height:44px}.zoom-btn{width:46px;height:46px}.hex-input{min-height:40px}input[type=color]{min-height:38px}.app-footer{height:auto;flex-wrap:wrap;gap:var(--space-2);padding:var(--space-2) var(--space-3);justify-content:space-between}.status-right{gap:var(--space-3);flex-wrap:wrap;row-gap:2px}.hover-color{display:none}}#appView{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}#appView[hidden]{display:none}#legalView{display:flex;flex-direction:column;flex:1;overflow:hidden}#legalView[hidden]{display:none}#legalView>.app-header{flex-shrink:0}.legal-content-scroll{flex:1;min-height:0;overflow-y:auto}.legal-content{max-width:720px;margin:0 auto;padding:var(--space-5) var(--space-4) calc(var(--space-5) * 2);color:var(--text);line-height:1.7;width:100%;box-sizing:border-box}.legal-content h1{color:var(--text-bright);font-size:1.6rem;margin-bottom:var(--space-2)}.legal-content h2{color:var(--text-bright);font-size:1.1rem;margin-top:var(--space-5);margin-bottom:var(--space-2)}.legal-content section{margin-bottom:var(--space-4)}.legal-content ul{padding-left:var(--space-5)}.legal-content .updated-at{color:var(--text-dim);font-size:.85rem}.legal-home-btn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}.legal-back-link{display:inline-block;background:none;border:none;padding:0;margin-bottom:var(--space-4);font:inherit;font-size:.9rem;color:var(--accent);text-decoration:underline;cursor:pointer}.legal-back-link:hover{color:var(--accent-hover)}