.dsgn.container{max-width:960px}.dsgn__workspace{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);align-items:start;padding-block-end:var(--space-5)}.dsgn__preview{order:1;position:sticky;top:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2)}.dsgn__preview-card{display:flex;align-items:center;justify-content:center;padding:var(--space-5);background-color:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md)}.dsgn__preview-card .pixel-grid{grid-template-columns:repeat(3,40px);grid-template-rows:repeat(3,40px);gap:3px}.dsgn__preview-controls{display:flex;justify-content:flex-end}.dsgn__export{display:flex;flex-direction:column;gap:var(--space-1)}.dsgn__code{display:block;padding:var(--space-2);background-color:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:var(--t-xs);color:var(--text-muted);white-space:pre-wrap;overflow-wrap:break-word;line-height:1.6}.dsgn__copy-btn{width:100%;padding:var(--space-1) var(--space-2);font-size:var(--t-sm);font-weight:600;color:var(--bg-page);background-color:var(--text-primary);border-radius:var(--radius-md);transition:opacity var(--transition-fast)}.dsgn__copy-btn:hover{opacity:.9}.dsgn__copy-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.dsgn__editor{order:0;display:flex;flex-direction:column;gap:var(--space-3)}.dsgn__field{display:flex;flex-direction:column;gap:.25rem}.dsgn__field--inline{flex-direction:row;align-items:center;gap:var(--space-1)}.dsgn__label{font-size:var(--t-sm);font-weight:600;color:var(--text-muted)}.dsgn__fieldset{border:none;padding:0;margin:0}.dsgn__legend{font-size:var(--t-sm);font-weight:600;color:var(--text-muted);margin-block-end:.25rem}.dsgn__input,.dsgn__select{padding:var(--space-1);font-family:var(--font-sans);font-size:var(--t-sm);color:var(--text-primary);background-color:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);transition:border-color var(--transition-fast),background-color var(--transition-fast)}.dsgn__input:hover,.dsgn__select:hover{border-color:var(--text-muted)}.dsgn__input:focus-visible,.dsgn__select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.dsgn__input--narrow{width:5rem}.dsgn__range-group{display:flex;align-items:center;gap:var(--space-1)}.dsgn__range{flex:1;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--bg-card-hover);border-radius:2px;cursor:pointer}.dsgn__range::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background-color:var(--text-primary);border-radius:50%;cursor:pointer;transition:background-color var(--transition-fast)}.dsgn__range::-moz-range-thumb{width:16px;height:16px;background-color:var(--text-primary);border:none;border-radius:50%;cursor:pointer}.dsgn__range:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}.dsgn__mode-toggle{display:inline-flex;align-items:center;border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden}.dsgn__mode-btn{padding:var(--space-1) var(--space-2);font-size:var(--t-sm);color:var(--text-muted);transition:background-color var(--transition-fast),color var(--transition-fast);position:relative}.dsgn__mode-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;z-index:1}.dsgn__mode-btn.is-active{background-color:var(--bg-card-hover);color:var(--text-primary)}.dsgn__mode-btn:not(.is-active):hover{color:var(--text-primary)}.dsgn__delay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}.dsgn__delay-input{width:100%;padding:var(--space-1);font-family:var(--font-mono);font-size:var(--t-sm);text-align:center;color:var(--text-primary);background-color:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);transition:border-color var(--transition-fast),background-color var(--transition-fast)}.dsgn__delay-input:hover{border-color:var(--text-muted)}.dsgn__delay-input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.dsgn__delay-input::-webkit-inner-spin-button,.dsgn__delay-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.dsgn__delay-input{-moz-appearance:textfield}.dsgn__painter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}.dsgn__painter-cell{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:var(--t-sm);color:var(--text-muted);background-color:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;transition:border-color var(--transition-fast),background-color var(--transition-fast)}.dsgn__painter-cell:hover{border-color:var(--text-muted);background-color:var(--bg-card-hover)}.dsgn__painter-cell:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.dsgn__painter-cell.is-assigned{background-color:var(--bg-card-hover);border-color:var(--accent);color:var(--text-primary)}.dsgn__painter-cell.is-assigned:before{content:attr(data-order);position:absolute;inset-block-start:2px;inset-inline-start:4px;font-size:.6rem;color:var(--accent);font-weight:600}.dsgn__painter-options{display:flex;align-items:center;gap:var(--space-2);margin-block-start:var(--space-1)}.dsgn__btn{padding:var(--space-1) var(--space-2);font-size:var(--t-sm);font-weight:600;border-radius:var(--radius-sm);transition:background-color var(--transition-fast),color var(--transition-fast)}.dsgn__btn--secondary{color:var(--text-muted);background-color:var(--bg-card);border:1px solid var(--border-subtle)}.dsgn__btn--secondary:hover{color:var(--text-primary);background-color:var(--bg-card-hover)}.dsgn__btn--secondary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.dsgn__color-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}.dsgn__color-select{width:100%;padding:.25rem;font-family:var(--font-mono);font-size:var(--t-xs);text-align:center;color:var(--text-primary);background-color:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;transition:border-color var(--transition-fast),background-color var(--transition-fast)}.dsgn__color-select:hover{border-color:var(--text-muted)}.dsgn__color-select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (max-width: 767px){.dsgn__workspace{grid-template-columns:1fr}.dsgn__preview{order:-1;position:static}}@media (prefers-reduced-motion: reduce){.dsgn__mode-btn,.dsgn__input,.dsgn__select,.dsgn__delay-input,.dsgn__painter-cell,.dsgn__color-select,.dsgn__btn,.dsgn__copy-btn{transition:none}}