:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#root{max-width:1200px;margin:0 auto;padding:20px;font-family:Inter,sans-serif}.controls-panel{display:flex;gap:20px;background:#2a2a2a;padding:20px;border-radius:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:30px;color:#fff}.control-group{display:flex;flex-direction:column;gap:10px;min-width:250px}.slider-container{display:flex;justify-content:space-between;align-items:center;gap:10px}.slider-container input[type=range]{-webkit-appearance:none;width:140px;height:6px;border-radius:999px;background:linear-gradient(90deg,#2196f3,#1976d2);outline:none}.slider-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #2196f3;box-shadow:0 2px 6px #0000004d}.slider-container input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #2196f3;box-shadow:0 2px 6px #0000004d}.slider-container input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:#1976d2}.generate-btn{background:#e91e63;color:#fff;border:none;padding:15px 30px;font-size:1rem;border-radius:8px;cursor:pointer;height:fit-content;align-self:center}.generate-btn:disabled{background:#555;cursor:not-allowed}.workspace{display:grid;grid-template-columns:200px 1fr;gap:30px;align-items:start}@media(max-width:768px){.workspace{grid-template-columns:1fr}}.palette-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.swatch-item{display:flex;flex-direction:column;align-items:center;background:#1f1f1f;padding:8px;border-radius:8px;border:1px solid #2b2b2b}.swatch-item small{color:#e6e6e6;font-weight:600}.swatch-color{width:32px;height:32px;border-radius:50%;border:1px solid #333}.grid-container{display:grid;width:100%;max-width:800px;margin:0 auto;border:4px solid #2b2b2b;box-shadow:0 12px 30px #00000059;border-radius:6px}.pixel-cell{aspect-ratio:1/1;width:100%;cursor:crosshair;border:none;padding:0;background:transparent;border-radius:0;box-sizing:border-box;border:1px solid rgba(0,0,0,.1);appearance:none;transition:opacity .2s ease}.pixel-cell[data-col]:nth-of-type(10n){border-right-color:#00000059}.pixel-cell[data-row="9"],.pixel-cell[data-row="19"],.pixel-cell[data-row="29"],.pixel-cell[data-row="39"],.pixel-cell[data-row="49"],.pixel-cell[data-row="59"],.pixel-cell[data-row="69"],.pixel-cell[data-row="79"],.pixel-cell[data-row="89"],.pixel-cell[data-row="99"]{border-bottom-color:#00000059}.pixel-cell:focus-visible{outline:2px solid #ffffff;outline-offset:-2px}.pixel-cell.dimmed{opacity:.15}.pixel-cell.completed-row{opacity:.5;filter:grayscale(50%)}.progress-counter{text-align:center;background:#2f7a37;color:#f2f2f2;padding:10px 12px;margin-top:15px;border-radius:10px;font-size:1rem;font-weight:700}.reset-btn{display:block;margin:15px auto 0;background:#2f2f2f;color:#f2f2f2;border:1px solid #3a3a3a;border:none;padding:8px 18px;font-size:.9rem;border-radius:6px;cursor:pointer;transition:background .2s}.reset-btn:hover{background:#3a3a3a}.tracker-info{text-align:center;background:#333;color:#fff;padding:10px;margin-top:10px;border-radius:8px}.pattern-toolbar{display:flex;align-items:center;justify-content:flex-start;gap:16px;flex-wrap:wrap;margin:10px 0 16px;align-self:flex-start;width:100%}.size-calculator{display:flex;flex-wrap:wrap;gap:12px;align-items:center;background:#1f1f1f;border:1px solid #2b2b2b;padding:12px 14px;border-radius:10px;color:#f2f2f2;margin-bottom:16px}.size-calculator label{font-weight:600}.size-calculator input{width:110px;padding:6px 8px;border-radius:6px;border:1px solid #3a3a3a;background:#121212;color:#f2f2f2}.size-estimate{margin:0;font-weight:600;color:#cfe9ff}.export-controls{display:flex;gap:10px;justify-content:center;margin-bottom:0;flex-wrap:wrap}.export-controls button{background:#2196f3;color:#fff;border:none;padding:10px 20px;border-radius:6px;cursor:pointer;font-size:.95rem;transition:background .2s}.export-controls button:hover{background:#1976d2}.zoom-controls{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;margin:0;background:#1f1f1f;border:1px solid #2b2b2b;border-radius:10px;width:fit-content}.zoom-controls button{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;line-height:1;border-radius:6px;border:none;background:#2f2f2f;color:#fff;font-size:1.05rem;font-weight:600;letter-spacing:-.02em;cursor:pointer;transition:background .2s ease}.zoom-controls button:hover:enabled{background:#3a3a3a}.zoom-controls button:disabled{background:#1a1a1a;color:#777;cursor:not-allowed}.zoom-controls button:last-child{width:auto;padding:0 12px;background:#444}.zoom-controls button:last-child:hover:enabled{background:#555}.zoom-indicator{min-width:48px;text-align:center;color:#ddd;font-weight:600}.pdf-export-modal-overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000}.pdf-export-modal{background:#fff;padding:30px;border-radius:12px;min-width:400px;box-shadow:0 10px 40px #0000004d}.pdf-export-modal h2{margin:0 0 20px;color:#333;font-size:1.5rem}.pdf-options-group{margin-bottom:20px}.pdf-options-group label{display:block;margin-bottom:8px;font-weight:500;color:#333}.radio-group{display:flex;gap:20px;margin-top:8px}.radio-group label{display:flex;align-items:center;gap:8px;margin:0;font-weight:400;cursor:pointer}.pdf-export-modal input[type=checkbox],.pdf-export-modal input[type=radio]{cursor:pointer}.pdf-modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:25px}.pdf-modal-actions button{padding:10px 20px;border:none;border-radius:6px;cursor:pointer;font-size:.95rem;transition:background .2s}.pdf-modal-actions button:first-child{background:#ddd;color:#333}.pdf-modal-actions button:first-child:hover{background:#bbb}.pdf-export-btn{background:#4caf50!important;color:#fff!important}.pdf-export-btn:hover{background:#45a049!important}