.pattern-canvas.s1i6w{display:block}.pattern-controls.s1782{position:fixed;right:var(--space-sm);top:calc(64px + var(--space-sm));transition:opacity var(--transition-base);z-index:20}.settings-toggle.s1782{align-items:center;background:#00000080;border:1px solid hsla(0,0%,100%,.2);border-radius:8px;color:#fff;cursor:pointer;display:flex;height:40px;justify-content:center;transition:all var(--transition-fast);width:40px}.settings-toggle.s1782:hover{background:#000000b3;border-color:#fff6}@media (max-width: 768px){.pattern-controls.s1782{right:var(--space-sm);top:calc(56px + var(--space-sm))}}.settings-panel.s18if{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#000c;border:1px solid hsla(0,0%,100%,.2);border-radius:12px;color:#fff;max-height:calc(100vh - 200px);max-width:calc(100vw - var(--space-xl));overflow-y:auto;padding:var(--space-lg);position:fixed;right:var(--space-sm);top:calc(64px + var(--space-sm) + 40px + var(--space-sm));width:360px;z-index:30}.settings-panel.s18if h3:where(.s18if){font-size:var(--text-lg);font-weight:500;margin:0 0 var(--space-md) 0}.info-text.s18if{border-top:1px solid hsla(0,0%,100%,.1);color:#fff9;font-size:var(--text-xs);line-height:1.5;margin-top:var(--space-md);padding-top:var(--space-md)}@media (max-width: 768px){.settings-panel.s18if{left:auto;right:var(--space-sm);top:calc(56px + var(--space-sm) + 40px + var(--space-sm));width:300px}}@media (max-width: 480px){.settings-panel.s18if{right:var(--space-sm);width:calc(100vw - var(--space-md) * 2)}}.pattern-type-group.s1eix{flex-wrap:wrap;gap:4px}.pattern-type-group.s1eix .option-button.compact:where(.s1eix){flex:0 1 auto;font-size:11px;min-width:0;overflow:hidden;padding:6px 8px;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 768px){.pattern-type-group.s1eix .option-button.compact:where(.s1eix){font-size:10px;padding:5px 6px}}.color-group.s330x,.test-mode-group.s330x{flex-wrap:wrap;gap:4px}.test-mode-group.s330x .option-button.compact:where(.s330x){flex:0 1 auto;font-size:11px;max-width:180px;min-width:0;overflow:hidden;padding:6px 8px;text-overflow:ellipsis;white-space:nowrap}.color-group.s330x .option-button.compact:where(.s330x){flex:0 1 auto;font-size:12px;min-width:60px;padding:8px 12px;text-transform:capitalize}@media (max-width: 768px){.test-mode-group.s330x .option-button.compact:where(.s330x){font-size:10px;max-width:140px;padding:5px 6px}.color-group.s330x .option-button.compact:where(.s330x){font-size:11px;min-width:50px;padding:6px 10px}}.setting-group{margin-bottom:var(--space-lg)}.setting-group:last-child{margin-bottom:0}.setting-group label,.setting-label{color:#fffc;display:block;font-size:var(--text-sm);letter-spacing:.05em;margin-bottom:var(--space-sm);text-transform:uppercase}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff3;border-radius:2px;height:4px;outline:none;width:100%}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#fff;border-radius:50%;box-shadow:0 2px 4px #0006;cursor:pointer;height:16px;width:16px}.slider::-moz-range-thumb{background:#fff;border:none;border-radius:50%;box-shadow:0 2px 4px #0006;cursor:pointer;height:16px;width:16px}.slider-marks{color:#ffffff80;display:flex;font-size:var(--text-xs);justify-content:space-between;margin-top:4px}.button-group{display:flex;flex-wrap:wrap;gap:var(--space-xs)}.option-button{background:#ffffff0d;border:1px solid hsla(0,0%,100%,.2);border-radius:8px;color:#fff;cursor:pointer;flex:0 1 auto;font-size:var(--text-sm);min-width:-moz-fit-content;min-width:fit-content;padding:var(--space-sm);transition:all var(--transition-fast)}.option-button:hover{background:#ffffff1a;border-color:#fff6}.option-button.active{background:#fff3;border-color:var(--color-accent)}.pattern-selector{gap:var(--space-xs)}.pattern-option,.pattern-selector{display:flex;flex-direction:column}.pattern-option{align-items:flex-start;background:#ffffff0d;border:1px solid hsla(0,0%,100%,.2);border-radius:8px;color:#fff;cursor:pointer;padding:var(--space-sm);text-align:left;transition:all var(--transition-fast);width:100%}.pattern-option:hover{background:#ffffff1a;border-color:#fff6}.pattern-option.active{background:#fff3;border-color:var(--color-accent)}.pattern-name{font-size:var(--text-sm);font-weight:500}.pattern-desc{color:#fff9;font-size:var(--text-xs);margin-top:2px}.color-selector{display:grid;gap:var(--space-xs);grid-template-columns:1fr 1fr;margin-bottom:var(--space-lg)}.color-option{align-items:center;background:#ffffff0d;border:1px solid hsla(0,0%,100%,.2);border-radius:8px;color:#fff;cursor:pointer;display:flex;font-size:var(--text-sm);gap:var(--space-sm);padding:var(--space-sm);text-align:left;transition:all var(--transition-fast)}.color-option:hover{background:#ffffff1a;border-color:#fff6}.color-option.active{background:#fff3;border-color:var(--color-accent)}.color-swatch{background:var(--color);border:1px solid hsla(0,0%,100%,.3);border-radius:4px;height:20px;width:20px}.checkbox-label{align-items:center;color:#fffc;cursor:pointer;display:flex;font-size:var(--text-sm);gap:var(--space-sm);text-transform:none}.checkbox{cursor:pointer;height:18px;width:18px}.nav-button{align-items:center;background:#00000080;border:1px solid hsla(0,0%,100%,.2);border-radius:8px;color:#fff;cursor:pointer;display:flex;height:40px;justify-content:center;transition:all var(--transition-fast);width:40px}.nav-button:hover{background:#000000b3;border-color:#fff6}.auto-button{align-items:center;background:#00000080;border:1px solid hsla(0,0%,100%,.2);border-radius:8px;color:#fff;cursor:pointer;display:flex;height:40px;justify-content:center;transition:all var(--transition-fast);width:40px}.auto-button:hover{background:#000000b3;border-color:#fff6}.auto-button.active{background:#fff3;border-color:var(--color-accent)}.control-buttons{display:flex;gap:var(--space-sm)}.color-info{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#000c;border:1px solid hsla(0,0%,100%,.2);border-radius:12px;color:#fff;min-width:200px;padding:var(--space-md) var(--space-lg)}.color-info h3{font-size:var(--text-lg);font-weight:500;margin:0 0 var(--space-xs) 0}.color-info p{color:#fffc;font-size:var(--text-sm);margin:0}@media (max-width: 768px){.color-selector{grid-template-columns:1fr}}.loading.s1xxh{align-items:center;color:#999;display:flex;font-size:var(--text-lg);height:100vh;justify-content:center}.pattern-nav-container.s1xxh{left:50%;pointer-events:none;position:absolute;top:var(--space-sm);transform:translate(-50%);z-index:100}.pattern-navigation.s1xxh{align-items:center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#000000b3;border:1px solid hsla(0,0%,100%,.1);border-radius:12px;display:flex;gap:var(--space-md);padding:var(--space-xs) var(--space-sm);pointer-events:auto;transition:opacity .3s ease}.nav-link.s1xxh{align-items:center;border-radius:6px;color:#999;display:flex;height:40px;justify-content:center;padding:0;position:relative;text-decoration:none;transition:all .2s ease;width:40px}.nav-link.s1xxh svg:where(.s1xxh){height:20px;width:20px}.nav-link.s1xxh:hover{background:#ffffff1a;color:#fff}.nav-link.s1xxh:after{background:#000000e6;border-radius:4px;bottom:-30px;color:#fff;content:attr(title);font-size:var(--text-xs);left:50%;opacity:0;padding:4px 8px;pointer-events:none;position:absolute;transform:translate(-50%);transition:opacity .2s ease;white-space:nowrap}.nav-link.s1xxh:hover:after{opacity:1}.current-pattern.s1xxh{align-items:center;display:flex;justify-content:center;min-width:150px;padding:var(--space-xs) var(--space-md)}.pattern-indicator.s1xxh{color:#fff;font-size:var(--text-sm);font-weight:500}@media (max-width: 768px){.current-pattern.s1xxh{min-width:auto}.pattern-navigation.s1xxh{gap:var(--space-xs)}}