*{box-sizing:border-box;margin:0;padding:0}.hidden{display:none!important}:root{--bg-color: #1a1a2e;--panel-bg: #16213e;--border-color: #0f3460;--text-color: #e4e4e4;--accent-color: #e94560;--success-color: #4ade80;--image-border-color: #555}[data-theme=light]{--bg-color: #f0f0f0;--panel-bg: #ffffff;--border-color: #ccc;--text-color: #222;--accent-color: #d63050;--success-color: #16a34a;--image-border-color: #999}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--bg-color);color:var(--text-color);min-height:100vh}#app{display:flex;flex-direction:column;min-height:100vh}header{padding:.5rem 1rem;background-color:var(--panel-bg);border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between}header h1{font-size:1.25rem;font-weight:600}main{flex:1;display:flex;gap:.75rem;padding:.75rem}#sidebar{width:320px;display:flex;flex-direction:column;gap:.5rem}#sidebar section{background-color:var(--panel-bg);border:1px solid var(--border-color);border-radius:6px;padding:.5rem .75rem}#sidebar h2{font-size:.875rem;margin-bottom:.5rem;color:var(--accent-color);display:flex;align-items:center;justify-content:space-between}fieldset{border:1px solid var(--border-color);border-radius:4px;padding:.5rem;margin-bottom:.5rem}fieldset:last-child{margin-bottom:0}fieldset legend{font-size:.7rem;color:#888;padding:0 .25rem}.setting-row{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.checkbox-row{display:flex;flex-wrap:wrap;gap:.75rem}.checkbox-row .setting{margin-bottom:0}.small-btn{padding:.25rem .5rem;background-color:var(--border-color);border:none;border-radius:4px;color:var(--text-color);cursor:pointer;font-size:.7rem}.small-btn:hover{background-color:var(--accent-color)}.description{font-size:.7rem;color:#888;font-style:italic;margin-top:.25rem}#sample-preview{margin-top:.5rem;display:flex;justify-content:center;align-items:center;width:100%;height:120px;background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:4px;overflow:hidden}#sample-image{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;image-rendering:pixelated;image-rendering:crisp-edges;border:1px solid var(--image-border-color)}#custom-upload{display:flex;align-items:center;gap:.5rem;margin-top:.5rem}#custom-filename{font-size:.75rem;color:#888;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.setting{display:flex;align-items:center;gap:.5rem;margin-bottom:.35rem}.setting:last-child{margin-bottom:0}.setting label{font-size:.8rem;white-space:nowrap}.setting input[type=number],.setting select{flex:1;min-width:0;padding:.3rem .4rem;background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:4px;color:var(--text-color);font-size:.8rem}.setting input[type=checkbox]{margin-right:.25rem}.icon-btn{padding:.25rem .4rem;background-color:var(--border-color);border:none;border-radius:4px;color:var(--text-color);cursor:pointer;font-size:.9rem;line-height:1}.icon-btn:hover{background-color:var(--accent-color)}#sample-selector select{width:100%;padding:.35rem .5rem;margin-bottom:.35rem;background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:4px;color:var(--text-color);font-size:.8rem}#sample-selector select:last-of-type{margin-bottom:0}#canvas-container{flex:1;display:flex;align-items:center;justify-content:center;position:relative;background-color:var(--panel-bg);border:1px solid var(--border-color);border-radius:8px;overflow:hidden}#output-canvas,#overlay-canvas{image-rendering:pixelated;image-rendering:crisp-edges}#output-canvas{border:2px solid var(--image-border-color)}#overlay-canvas{position:absolute;pointer-events:none}footer#controls{display:flex;align-items:center;gap:1.5rem;padding:.5rem 1rem;background-color:var(--panel-bg);border-top:1px solid var(--border-color)}#playback{display:flex;gap:.35rem}#playback button{padding:.35rem .75rem;background-color:var(--accent-color);border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:.8rem;transition:opacity .2s}#playback button:disabled{opacity:.5;cursor:not-allowed}#playback button:hover:not(:disabled){opacity:.8}#animation-control{display:flex;align-items:center;gap:.5rem;font-size:.8rem}#animation-control label{display:flex;align-items:center;gap:.25rem}#animation-control input[type=range]{width:100px}#status{margin-left:auto;font-size:.875rem}#status-text{color:var(--success-color)}#progress{margin-left:1rem;color:#888}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background-color:var(--panel-bg);border:1px solid var(--border-color);border-radius:8px;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--border-color)}.modal-header h3{font-size:1rem;margin:0}.modal-header #pattern-count{color:#888;font-weight:400;font-size:.875rem}.patterns-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:12px;padding:1rem;overflow-y:auto;max-height:calc(90vh - 60px);min-width:600px}.pattern-cell{display:flex;flex-direction:column;align-items:center;gap:4px}.pattern-cell canvas{image-rendering:pixelated;image-rendering:crisp-edges;border:1px solid var(--image-border-color);background-color:var(--bg-color)}.pattern-cell .pattern-weight{font-size:.65rem;color:#888}.header-buttons{display:flex;align-items:center;gap:.35rem}.help-modal-content{width:700px}.help-body{padding:1.25rem 1.5rem;overflow-y:auto;max-height:calc(90vh - 60px);line-height:1.6;font-size:.875rem}.help-body h1{font-size:1.25rem;margin-bottom:.75rem;color:var(--accent-color)}.help-body h2{font-size:1.05rem;margin-top:1.25rem;margin-bottom:.5rem;color:var(--accent-color)}.help-body h3{font-size:.925rem;margin-top:1rem;margin-bottom:.35rem}.help-body p{margin-bottom:.6rem}.help-body ul,.help-body ol{margin-bottom:.6rem;padding-left:1.5rem}.help-body li{margin-bottom:.3rem}.help-body strong{color:var(--text-color)}.help-body code{background-color:var(--bg-color);padding:.1rem .35rem;border-radius:3px;font-size:.8rem}.help-body hr{border:none;border-top:1px solid var(--border-color);margin:1rem 0}