*{box-sizing:border-box}:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color-scheme:light;--bg-body: #ffffff;--bg-card: #f8f9fa;--bg-surface: #ffffff;--bg-input: #ffffff;--text-primary: #213547;--text-heading: #333333;--text-secondary: #6c757d;--text-tertiary: #999999;--text-muted: #888888;--text-placeholder: #aaaaaa;--text-label: #666666;--text-form-label: #495057;--text-option: #555555;--border: #dee2e6;--border-light: #eeeeee;--border-input: #dddddd;--border-input-alt: #ced4da;--border-subtle: #cccccc;--primary: #3498db;--primary-hover: #2980b9;--primary-bg-subtle: rgba(52, 152, 219, .04);--primary-shadow: rgba(52, 152, 219, .2);--secondary: #a0b4c8;--secondary-hover: #8da3b8;--success: #27ae60;--success-hover: #219a52;--success-border-subtle: rgba(39, 174, 96, .3);--success-bg-subtle: rgba(39, 174, 96, .06);--danger: #e74c3c;--danger-hover: #c0392b;--warning-bg: #fff3cd;--warning-border: #ffc107;--warning-text: #856404;--disabled: #95a5a6;--disabled-hover: #7f8c8d;--blocked-cell: #333333;--grid-border: #333333;--cell-bg: #ffffff;--overlay: rgba(0, 0, 0, .5);--shadow-modal: rgba(0, 0, 0, .3);--shadow-dialog: rgba(0, 0, 0, .15);--tooltip-bg: #ffffff;--tooltip-text: #333333;--tooltip-border: #dddddd;--tooltip-shadow: rgba(0, 0, 0, .15);--tooltip-arrow: #ffffff;--tooltip-arrow-border: #dddddd;--delete-btn-bg: rgba(255, 255, 255, .95);--editor-cell-hover: #adb5bd;--title-gradient-from: #2980b9;--title-gradient-to: #4a148c}[data-theme=dark]{color-scheme:dark;--bg-body: #22223a;--bg-card: #2c2c4a;--bg-surface: #333358;--bg-input: #333358;--text-primary: #e8e8f4;--text-heading: #e8e8f4;--text-secondary: #a8a8c0;--text-tertiary: #8888a0;--text-muted: #8888a0;--text-placeholder: #787890;--text-label: #a8a8c0;--text-form-label: #bcbcd4;--text-option: #bcbcd4;--border: #484868;--border-light: #484868;--border-input: #484868;--border-input-alt: #484868;--border-subtle: #484868;--primary: #6db8e8;--primary-hover: #5aa8dd;--primary-bg-subtle: rgba(109, 184, 232, .1);--primary-shadow: rgba(109, 184, 232, .25);--secondary: #6878a0;--secondary-hover: #586890;--success: #3dd680;--success-hover: #2ecc71;--success-border-subtle: rgba(61, 214, 128, .3);--success-bg-subtle: rgba(61, 214, 128, .1);--danger: #ef5f50;--danger-hover: #d44535;--warning-bg: #40392a;--warning-border: #7a6a20;--warning-text: #e8d890;--disabled: #686888;--disabled-hover: #585878;--blocked-cell: #282840;--grid-border: #484868;--cell-bg: #333358;--overlay: rgba(0, 0, 0, .65);--shadow-modal: rgba(0, 0, 0, .45);--shadow-dialog: rgba(0, 0, 0, .35);--tooltip-bg: #333358;--tooltip-text: #e8e8f4;--tooltip-border: #484868;--tooltip-shadow: rgba(0, 0, 0, .25);--tooltip-arrow: #333358;--tooltip-arrow-border: #484868;--delete-btn-bg: rgba(51, 51, 88, .95);--editor-cell-hover: #686888;--title-gradient-from: #6db8e8;--title-gradient-to: #7b1fa2}.theme-switching,.theme-switching *,.theme-switching *:before,.theme-switching *:after{transition:none!important}body{margin:0;min-width:320px;min-height:100vh;background-color:var(--bg-body);color:var(--text-primary)}#root{min-height:100vh}h1,h2,h3,h4,h5,h6{margin:0;font-weight:600}button{font-family:inherit}button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.shape-section{background-color:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:1rem 1.5rem}.shape-add-card{aspect-ratio:1;border:2px dashed var(--border-subtle);border-radius:8px;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-placeholder);transition:border-color .2s,color .2s,background-color .2s}.shape-add-card:hover{border-color:var(--primary);color:var(--primary);background-color:var(--primary-bg-subtle)}.shape-add-card:disabled{opacity:.35;cursor:not-allowed;border-color:var(--border-input);color:var(--border-subtle)}.shape-add-card:disabled:hover{background:none}.shapes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.75rem;align-content:start}.empty-state{grid-column:1 / -1;color:var(--text-secondary);text-align:center;padding:2rem 1rem;font-style:italic}.shape-item{background-color:var(--bg-surface);border:2px solid var(--border);border-radius:8px;padding:.5rem;display:flex;flex-direction:column;gap:.5rem;align-items:center;transition:border-color .2s,box-shadow .2s;position:relative;aspect-ratio:1;cursor:pointer;-webkit-tap-highlight-color:transparent}@media(hover:hover){.shape-item:hover{border-color:var(--primary);box-shadow:0 2px 8px var(--primary-shadow)}.shape-item:hover .shape-delete-btn{opacity:1}}.shape-preview{flex:1;width:100%;display:flex;align-items:center;justify-content:center;background-color:var(--bg-card);border-radius:4px;padding:4px}.preview-grid.empty{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--editor-cell-hover)}.preview-cell{border-radius:1px}.preview-cell.filled{border:1px solid rgba(0,0,0,.3);box-shadow:inset 1px 1px #ffffff59,inset -1px -1px #00000040}.preview-cell.empty{border:none}.shape-count-badge{position:absolute;bottom:4px;left:4px;background-color:#3498dbf2;color:#fff;font-weight:600;font-size:.75rem;padding:2px 6px;border-radius:4px;border:1px solid rgba(52,152,219,1);min-width:20px;text-align:center}.shape-appearance-badge{position:absolute;bottom:4px;right:4px;background-color:#27ae60f2;color:#fff;font-weight:600;font-size:.75rem;padding:2px 6px;border-radius:4px;border:1px solid rgba(39,174,96,1);min-width:20px;text-align:center}.shape-delete-btn{position:absolute;top:4px;right:4px;background-color:var(--delete-btn-bg);color:var(--danger);border:1px solid var(--border);border-radius:4px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;line-height:0;cursor:pointer;opacity:0;transition:opacity .2s,background-color .2s,color .2s,border-color .2s;padding:0 0 2px;font-weight:400}.shape-delete-btn:hover{background-color:var(--danger);color:#fff;border-color:var(--danger)}.dialog-overlay{position:fixed;inset:0;background-color:var(--overlay);display:flex;align-items:center;justify-content:center;z-index:1100}.dialog-content{background:var(--bg-surface);border-radius:10px;max-width:400px;width:90%;box-shadow:0 4px 20px var(--shadow-dialog)}.dialog-content .modal-body p{margin:0;color:var(--text-heading);line-height:1.5}.dialog-content .modal-footer{display:flex;justify-content:flex-end;gap:.5rem;padding:1rem 1.25rem;border-top:1px solid var(--border-light)}.dialog-content .modal-header{padding:1rem 1.25rem;border-bottom:1px solid var(--border-light)}.dialog-content .modal-header h3{margin:0;font-size:1.1rem}.dialog-content .modal-body{padding:1.25rem}.tooltip-trigger{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;border:1px solid var(--border-subtle);color:var(--text-muted);font-size:11px;font-weight:600;cursor:pointer;position:relative;flex-shrink:0;-webkit-user-select:none;user-select:none;line-height:1;-webkit-tap-highlight-color:transparent}.tooltip-trigger:hover{border-color:var(--primary);color:var(--primary)}.tooltip-content{display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background:var(--tooltip-bg);color:var(--tooltip-text);border:1px solid var(--tooltip-border);border-radius:6px;padding:8px 10px;font-size:12px;font-weight:400;line-height:1.4;width:max-content;max-width:220px;box-shadow:0 2px 8px var(--tooltip-shadow);z-index:10000;pointer-events:none;white-space:normal}.tooltip-content:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-top-color:var(--tooltip-arrow)}.tooltip-content:before{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:6px solid transparent;border-top-color:var(--tooltip-arrow-border)}@media(hover:hover){.tooltip-trigger:hover .tooltip-content{display:block}}.tooltip-trigger.active .tooltip-content{display:block}.modal-overlay{position:fixed;inset:0;background-color:var(--overlay);display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background-color:var(--bg-surface);border-radius:12px;width:90%;max-width:600px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 10px 40px var(--shadow-modal)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid var(--border)}.modal-header h3{margin:0;font-size:1.5rem;color:var(--text-heading)}.close-btn{background:none;border:none;font-size:2rem;line-height:1;cursor:pointer;color:var(--text-secondary);padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s}.close-btn:hover{background-color:var(--bg-card);color:var(--text-heading)}.modal-body{padding:1.5rem;overflow-y:auto;display:flex;gap:2rem;flex-wrap:wrap}.shape-editor-container{flex:1;min-width:250px}.editor-grid{width:100%;max-width:300px;aspect-ratio:1;gap:3px;background-color:var(--bg-surface);border:2px solid var(--border);border-radius:8px;padding:8px;margin:0 auto}.editor-cell{border:1px solid var(--border);border-radius:3px;cursor:pointer;transition:background-color .25s,border-color .15s,transform .15s}.editor-cell:hover{border-color:var(--editor-cell-hover);transform:scale(1.05)}.editor-cell.filled{border-color:#0000004d;box-shadow:inset 2px 2px #ffffff59,inset -2px -2px #00000040}.shape-properties{flex:1;min-width:200px;display:flex;flex-direction:column;gap:1.5rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{font-weight:600;color:var(--text-form-label);font-size:.9rem}.form-group input[type=text],.form-group input[type=number]{padding:.5rem;border:1px solid var(--border-input-alt);border-radius:4px;font-size:1rem;transition:border-color .2s;background-color:var(--bg-input);color:var(--text-primary)}.form-group input[type=text]:focus,.form-group input[type=number]:focus{outline:none;border-color:var(--primary)}.color-input-group{display:flex;align-items:center;gap:1rem}.color-input-group input[type=color]{width:50px;height:40px;border:1px solid var(--border-input-alt);border-radius:4px;cursor:pointer;background-color:var(--bg-input);padding:4px}.color-value{font-family:monospace;color:var(--text-secondary);font-size:.9rem}.hint{display:block;color:var(--text-secondary);font-size:.75rem;margin-top:.25rem;font-style:italic}.shape-stats-section{border-top:1px solid var(--success-border-subtle);padding-top:.75rem;background-color:var(--success-bg-subtle);border-radius:6px;padding:.75rem}.stats-label{font-weight:600;color:var(--text-form-label);font-size:.9rem;display:block;margin-bottom:.5rem}.stats-grid{display:flex;flex-direction:column;gap:.35rem}.stats-row{display:flex;justify-content:space-between;align-items:center;font-size:.85rem}.stats-name{color:var(--text-secondary)}.stats-value{font-weight:600;color:var(--text-heading);font-variant-numeric:tabular-nums}.stats-subheader{font-size:.75rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.03em;margin-top:.4rem}.modal-footer{display:flex;justify-content:space-between;gap:1rem;padding:1.5rem;border-top:1px solid var(--border)}.modal-footer button{flex:1}@media(max-width:768px){.modal-overlay{align-items:flex-start;padding-top:2.5vh}.modal-content{width:95%;height:95vh;max-height:95vh;overflow:hidden}.modal-header{padding:1rem}.modal-header h3{font-size:1.25rem}.modal-body{padding:1rem;flex-direction:column;gap:1.5rem;flex-wrap:nowrap;overflow-y:auto;overflow-x:hidden;flex:1;min-height:0;-webkit-overflow-scrolling:touch}.shape-editor-container{min-width:unset;width:100%;flex:0 0 auto}.editor-grid{max-width:min(100%,350px)}.shape-properties{min-width:unset;width:100%;flex:0 0 auto}.modal-footer{padding:1rem;flex-direction:column-reverse}.modal-footer button{width:100%}}.grid-display-wrapper{display:flex;align-items:center;justify-content:center;padding:1rem}.grid-display{display:grid;gap:1px;background-color:var(--grid-border);border:2px solid var(--grid-border)}.grid-cell{background-color:var(--cell-bg);border:none;aspect-ratio:1 / 1;transition:background-color .2s}.grid-cell.blocked{background-color:var(--blocked-cell)}.grid-cell.filled{border:none;box-shadow:inset 2px 2px #ffffff59,inset -2px -2px #00000040}@media(max-width:768px){.grid-display-wrapper{padding:.5rem}}.solution-gallery{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border)}.solution-gallery-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap;background-color:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:1rem 1.25rem}.solution-gallery-header h2{margin:0;font-size:1.4rem;color:var(--text-heading)}.solution-status{font-size:.9rem;color:var(--text-secondary);display:flex;align-items:center;gap:.5rem}.solution-status.running{color:var(--primary)}.solution-status.complete{color:var(--success)}.solution-status.cancelled{color:#e67e22}.spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--primary);border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.solution-gallery-message{background-color:var(--warning-bg);border:1px solid var(--warning-border);border-radius:6px;padding:.75rem 1rem;color:var(--warning-text);font-size:.9rem;margin-bottom:1rem}.solution-gallery-empty{color:var(--text-muted);font-size:1rem;padding:2rem;text-align:center}.solution-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem}.solution-card{background:var(--bg-card);border:2px solid var(--border);border-radius:8px;padding:.75rem;cursor:pointer;transition:border-color .2s,box-shadow .2s;display:flex;flex-direction:column;align-items:center;gap:.5rem;font-family:inherit}.solution-card:hover{border-color:var(--primary);box-shadow:0 2px 8px var(--primary-shadow)}.solution-card .grid-display-wrapper{padding:0;width:auto;height:auto}.solution-label{font-size:.8rem;color:var(--text-secondary);font-weight:600}.solution-gallery-capped{text-align:center;color:var(--text-secondary);font-size:.85rem;padding:.75rem;margin-top:.5rem}@media(max-width:768px){.solution-gallery{margin-top:1.5rem;padding-top:1rem}.solution-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.75rem}}.solution-detail-modal{max-width:500px}.solution-detail-body{padding:1.5rem;display:flex;align-items:center;justify-content:center}.solution-detail-body .grid-display-wrapper{padding:0}@media(max-width:768px){.solution-detail-modal{width:95%;max-width:none}.solution-detail-body{padding:1rem}}.example-picker-modal{max-width:480px}.example-picker-body{padding:1rem;display:flex;flex-direction:column;gap:.5rem}.example-card{display:flex;align-items:center;gap:1rem;padding:.75rem;border:2px solid var(--border);border-radius:8px;background:var(--bg-surface);cursor:pointer;text-align:left;transition:border-color .2s,box-shadow .2s;font:inherit;color:inherit;width:100%}.example-card:hover{border-color:var(--primary);box-shadow:0 2px 8px var(--primary-shadow)}.example-card-info{display:flex;flex-direction:column;gap:.25rem;min-width:0;flex:1}.example-card-name{font-weight:600;font-size:.95rem}.example-card-desc{font-size:.8rem;color:var(--text-label)}.example-card-preview{flex-shrink:0;width:80px;height:80px;display:flex;align-items:center;justify-content:center;background-color:var(--bg-body);border-radius:6px;padding:6px}.example-card-preview .grid-display-wrapper{padding:0}@media(max-width:768px){.example-picker-modal{width:95%;max-width:none}}.theme-toggle-pill{position:relative;display:inline-flex;align-items:center;gap:0;width:56px;height:28px;padding:2px;border:none;border-radius:14px;background:var(--toggle-track-bg, #d1d5db);cursor:pointer;transition:background-color .3s ease;flex-shrink:0}.theme-toggle-pill:focus-visible{outline:2px solid var(--accent, #4f8ff7);outline-offset:2px}[data-theme=dark] .theme-toggle-pill{--toggle-track-bg: #374151}[data-theme=light] .theme-toggle-pill{--toggle-track-bg: #d1d5db}.theme-toggle-slider{position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .3s ease;z-index:1}[data-theme=dark] .theme-toggle-slider{transform:translate(28px);background:#1f2937;box-shadow:0 1px 3px #0006}.theme-toggle-icon{position:absolute;top:50%;transform:translateY(-50%);z-index:2;transition:color .3s ease}.theme-toggle-icon--sun{left:7px;color:#f59e0b}.theme-toggle-icon--moon{left:35px;color:#9ca3af}[data-theme=dark] .theme-toggle-icon--sun{color:#6b7280}[data-theme=dark] .theme-toggle-icon--moon{color:#a5b4fc}.app{display:flex;flex-direction:column;max-width:900px;margin:0 auto;padding:1.5rem;gap:1.5rem}header{display:flex;align-items:center;gap:1rem}header h1.app-title{margin:0;font-size:1.5rem;flex:1;background:linear-gradient(135deg,var(--title-gradient-from),var(--title-gradient-to));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.app-title-primary{font-weight:700}.app-title-secondary{font-weight:300}.config-btn{white-space:nowrap}.divider{border:none;border-top:1px solid var(--border);margin:0}.header-actions{display:flex;gap:.5rem;flex-shrink:0;align-items:center}.header-separator{width:1px;height:1.5rem;background-color:var(--border)}.grid-card{display:flex;align-items:flex-start;gap:1.5rem;background-color:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:1.25rem 1.5rem}.grid-card-editor{flex-shrink:0;width:320px;display:flex;flex-direction:column;align-items:center;gap:.25rem;border-right:1px solid var(--border);padding-right:1.5rem}.grid-card-editor .editor-grid{display:grid;max-width:300px;max-height:300px;gap:3px;background-color:var(--bg-surface);border:2px solid var(--border);border-radius:8px;padding:8px}.grid-card-editor .editor-cell{background-color:var(--cell-bg);border:1px solid var(--border);border-radius:3px;cursor:pointer;transition:background-color .2s,border-color .2s,transform .15s;aspect-ratio:1 / 1;width:100%;height:100%}.grid-card-editor .editor-cell:hover{border-color:var(--editor-cell-hover);transform:scale(1.05)}.grid-card-editor .editor-cell.blocked{background-color:var(--blocked-cell);border-color:#0000004d;box-shadow:inset 2px 2px #ffffff59,inset -2px -2px #00000040}.grid-card-editor .hint{margin:0;font-size:.8rem;color:var(--text-tertiary);font-style:italic}.grid-card-controls{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}.grid-card-controls .dimension-inputs{display:flex;gap:.75rem}.grid-card-controls .input-group{display:flex;flex-direction:column;gap:.25rem}.grid-card-controls .input-group label{font-size:.8rem;color:var(--text-label);font-weight:500}.grid-card-controls .input-group input[type=number]{width:60px;padding:.35rem .5rem;border:1px solid var(--border-input);border-radius:4px;font-size:.95rem;background-color:var(--bg-input);color:var(--text-primary)}.grid-card-controls .input-group input[type=number]:focus{outline:none;border-color:var(--primary)}.grid-stats{font-size:.8rem;color:var(--text-tertiary);font-style:italic}.mirror-option{display:flex;align-items:center;gap:.4rem;font-size:.9rem;color:var(--text-option);cursor:pointer;-webkit-tap-highlight-color:transparent}.solve-btn{white-space:nowrap;background-color:var(--success)}.solve-btn:hover{background-color:var(--success-hover)}.solve-btn:disabled{background-color:var(--disabled);cursor:not-allowed}.solve-btn.cancel{background-color:var(--danger)}.solve-btn.cancel:hover{background-color:var(--danger-hover)}.btn-primary{background-color:var(--primary);color:#fff;border:none;padding:.75rem 1.5rem;font-size:1rem;border-radius:6px;cursor:pointer;transition:background-color .2s}.btn-primary:hover{background-color:var(--primary-hover)}.btn-secondary{background-color:var(--secondary);color:#fff;border:none;padding:.5rem 1rem;font-size:.9rem;border-radius:6px;cursor:pointer;transition:background-color .2s}.btn-secondary:hover{background-color:var(--secondary-hover)}.btn-icon{background:none;border:none;font-size:1.2rem;cursor:pointer;padding:.25rem;opacity:.7;transition:opacity .2s}.btn-icon:hover{opacity:1}@media(max-width:600px){.app{padding:1rem;gap:1rem}header{flex-wrap:wrap}header h1.app-title{font-size:1.2rem;width:100%}.header-actions{width:100%;justify-content:flex-end}.grid-card{flex-direction:column;align-items:stretch;padding:1rem;gap:1rem}.grid-card-editor{align-items:center;width:auto;border-right:none;padding-right:0}.grid-card-controls{align-items:stretch}.config-btn{padding:.5rem .75rem;font-size:.85rem}}