:root{--bg: #0d1b2a;--surface: #1b263b;--accent: #778da9;--accent-hover: #8fa5be;--accent-glow: rgba(119, 141, 169, .1);--text: #e0e1dd;--text-muted: #7caee8;--bead-hi: #778da9;--bead-dim: #1b263b;--border: rgba(65, 90, 119, .35);--header-h: 72px;--palette-w: 195px;--gutter-w: 0px;--grid-toast-offset: 10px;--grid-toast-font: .75rem;--palette-count-size: .6875rem;--palette-count-opacity: .7;--toolbar-btn-w: 50px;--toolbar-btn-h: 52px;--toolbar-gap: 5px;--toolbar-sep-x: 10px;--brush-glyph-circle: .875rem;--brush-glyph-square: 1.3rem;--bead-popup-w: 450px;--bead-popup-pad: 1.5rem;--bead-popup-gap: .875rem}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;display:flex;flex-direction:column;height:100vh;overflow:hidden}header{display:flex;align-items:center;gap:.75rem;height:var(--header-h);padding:0 1rem;flex-shrink:0;border-bottom:1px solid var(--border)}.logo-mark{filter:drop-shadow(0 0 8px rgba(119,141,169,.25));flex-shrink:0}h1{font-size:1.125rem;font-weight:700;letter-spacing:-.02em;line-height:1;flex-shrink:0;margin-right:.25rem}.editor-shell{display:grid;grid-template-areas:"palette canvas gutter" "palette footer gutter";grid-template-columns:var(--palette-w) 1fr var(--gutter-w);grid-template-rows:1fr auto;flex:1;min-height:0}.palette-region{grid-area:palette;border-right:1px solid var(--border);overflow-y:auto}.canvas-region{grid-area:canvas;position:relative;overflow:hidden}.canvas-container{position:absolute;inset:0;overflow:hidden}.grid-size-toast{display:none;position:absolute;top:var(--grid-toast-offset);right:var(--grid-toast-offset);background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:3px 8px;font-size:var(--grid-toast-font);color:var(--text-muted);font-variant-numeric:tabular-nums;pointer-events:none;z-index:50}.grid-size-toast--visible,#canvas-base,#canvas-overlay{display:block}#canvas-overlay{position:absolute;top:0;left:0}.toolbar-nav{display:flex;align-items:center;align-self:stretch;flex:1;padding:0 .5rem;gap:var(--toolbar-gap);border-left:1px solid var(--border);margin-left:.25rem}.toolbar-group{display:flex;align-items:center;gap:var(--toolbar-gap)}.toolbar-sep{width:1px;height:24px;background:var(--border);margin:0 var(--toolbar-sep-x);flex-shrink:0}.toolbar-btn:focus-visible,.brush-shape-btn:focus-visible,.clipboard-action-btn:focus-visible{outline:none}.toolbar-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:var(--toolbar-btn-w);height:var(--toolbar-btn-h);padding:0;border:none;border-radius:5px;background:transparent;color:var(--text-muted);cursor:pointer;transition:background 80ms,color 80ms;flex-shrink:0}.toolbar-btn:hover{background:#778da914;color:var(--text)}.toolbar-btn:disabled{opacity:.35;cursor:default;pointer-events:none}.toolbar-btn[aria-pressed=true]{background:var(--accent-glow);color:var(--accent)}.toolbar-btn svg{width:20px;height:20px;stroke-width:1.75;pointer-events:none}.toolbar-btn kbd{font-family:inherit;font-size:.625rem;letter-spacing:.04em;color:inherit;opacity:.55;pointer-events:none;background:none;border:none;padding:0}.brush-btn-wrap{position:relative}.brush-btn-wrap:after{content:"";position:absolute;bottom:-6px;left:0;right:0;height:6px}.brush-popup{position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%);background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:8px 10px;display:flex;flex-direction:column;gap:7px;width:158px;z-index:200;opacity:0;pointer-events:none;transition:opacity .1s;white-space:nowrap}.brush-popup--visible{opacity:1;pointer-events:auto}.brush-popup-row{display:flex;align-items:center;gap:6px}.brush-popup-label{font-size:.6875rem;color:var(--text-muted);width:32px;flex-shrink:0}.brush-shape-toggle{display:flex;gap:3px}.brush-shape-btn{width:30px;height:24px;border:1px solid var(--border);border-radius:4px;background:transparent;color:var(--text-muted);cursor:pointer;font-size:.875rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:background 80ms,color 80ms,border-color 80ms}.brush-shape-btn--circle{font-size:var(--brush-glyph-circle)}.brush-shape-btn--square{font-size:var(--brush-glyph-square)}.brush-shape-btn:hover{background:#778da914;color:var(--text)}.brush-shape-btn[aria-pressed=true]{background:var(--accent-glow);color:var(--accent);border-color:#778da966}.brush-size-slider{flex:1;min-width:0;accent-color:var(--accent);cursor:pointer}.brush-size-value{font-size:.75rem;color:var(--text);min-width:14px;text-align:right;font-variant-numeric:tabular-nums}.mirror-popup{width:auto;min-width:140px}.mirror-popup .brush-shape-btn{width:auto;padding:0 6px}.clipboard-popup{width:150px;gap:2px}.clipboard-action-btn{display:flex;align-items:center;gap:7px;width:100%;padding:5px 7px;border:none;border-radius:4px;background:transparent;color:var(--text-muted);cursor:pointer;font-size:.8125rem;transition:background 80ms,color 80ms}.clipboard-action-btn:hover{background:#778da914;color:var(--text)}.clipboard-action-btn svg{width:13px;height:13px;stroke-width:1.75;flex-shrink:0}.clipboard-action-btn span{flex:1;text-align:left}.clipboard-action-btn kbd{font-size:.5625rem;opacity:.45;background:none;border:none;padding:0;font-family:inherit;letter-spacing:.03em}.palette-panel{display:flex;flex-direction:column;height:100%;padding:.5rem 0}.palette-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding:0 .375rem}.palette-swatch:focus-visible{outline:none}.palette-swatch{display:flex;align-items:center;gap:.5rem;width:100%;padding:.3rem .5rem .3rem .375rem;border:none;border-left:3px solid transparent;border-radius:5px;background:transparent;color:var(--text-muted);cursor:pointer;transition:background 80ms,color 80ms,border-color 80ms;text-align:left}.palette-swatch:hover{background:#778da914;color:var(--text)}.palette-swatch[aria-pressed=true]{border-left-color:var(--accent);background:var(--accent-glow);color:var(--text)}.palette-swatch-color{width:28px;height:28px;border-radius:50%;flex-shrink:0;border:1px solid rgba(119,141,169,.25)}.palette-swatch-letter{font-size:.6875rem;font-weight:700;letter-spacing:.04em;width:14px;text-align:center;flex-shrink:0}.palette-swatch-name{font-size:.75rem;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.palette-swatch-count{font-size:var(--palette-count-size);opacity:var(--palette-count-opacity);font-variant-numeric:tabular-nums;flex-shrink:0}.palette-add-slot{height:40px;margin:.375rem .75rem;flex-shrink:0;border-radius:5px;border:1px dashed rgba(65,90,119,.4)}.layers-gutter{grid-area:gutter}.modal-backdrop{position:fixed;inset:0;background:#000000a6;display:flex;align-items:center;justify-content:center;z-index:1000}.modal{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:1.5rem;min-width:320px;max-width:440px;display:flex;flex-direction:column;gap:1.25rem;box-shadow:0 8px 32px #0009}.modal-title{font-size:1rem;font-weight:600;color:var(--text)}.modal-message{font-size:.875rem;color:var(--text-muted);line-height:1.5}.modal-body{display:flex;flex-direction:column;gap:.75rem}.modal-field{display:flex;align-items:center;gap:.75rem}.modal-label{font-size:.8125rem;color:var(--text-muted);width:48px;flex-shrink:0}.modal-input{width:80px;padding:.375rem .5rem;background:#ffffff0d;border:1px solid var(--border);border-radius:4px;color:var(--text);font-size:.875rem;font-family:inherit}.modal-input:focus{outline:none;border-color:var(--accent)}.modal-input[type=number]{-moz-appearance:textfield}.modal-input[type=number]::-webkit-inner-spin-button,.modal-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.modal-segment{display:flex;gap:3px}.modal-segment-btn{padding:.375rem .75rem;border:1px solid var(--border);border-radius:4px;background:transparent;color:var(--text-muted);cursor:pointer;font-size:.8125rem;font-family:inherit;transition:background 80ms,color 80ms,border-color 80ms}.modal-segment-btn:hover{background:#778da914;color:var(--text)}.modal-segment-btn[aria-pressed=true]{background:var(--accent-glow);color:var(--accent);border-color:#778da966}.modal-segment-btn:focus-visible{outline:none;border-color:var(--accent)}.modal-actions{display:flex;gap:.5rem;justify-content:flex-end}.modal-btn{padding:.4375rem .875rem;border-radius:5px;border:1px solid transparent;font-size:.8125rem;font-family:inherit;cursor:pointer;transition:background 80ms,color 80ms,border-color 80ms}.modal-btn--primary{background:var(--accent);color:var(--bg);font-weight:600}.modal-btn--primary:hover{background:var(--accent-hover)}.modal-btn--danger{background:transparent;border-color:#d9353566;color:#e06060}.modal-btn--danger:hover{background:#d935351f;border-color:#d93535b3}.modal-btn--ghost{background:transparent;border-color:var(--border);color:var(--text-muted)}.modal-btn--ghost:hover{background:#778da914;color:var(--text)}.modal--export{min-width:360px;max-width:480px}.modal-check-row{display:flex;align-items:flex-start;gap:.625rem}.modal-check-row input[type=checkbox]{margin-top:.2rem;flex-shrink:0;accent-color:var(--accent);width:14px;height:14px;cursor:pointer}.modal-check-text{font-size:.8125rem;color:var(--text);line-height:1.45;cursor:pointer;user-select:none}.bead-responsibly-link{background:none;border:none;padding:0;font:inherit;font-size:inherit;color:var(--accent);text-decoration:underline;cursor:pointer}.bead-responsibly-link:hover{color:var(--accent-hover)}.modal-donate-section{display:flex;flex-direction:column;gap:.625rem;background:#ffffff08;border:1px solid var(--border);border-radius:6px;padding:1rem}.modal-donate-heading{font-size:.875rem;font-weight:600;color:var(--text);text-align:center}.modal-donate-btns{display:flex;gap:.5rem}.modal-donate-btn{flex:1;padding:.5rem .25rem;background:#778da914;border:1px solid rgba(119,141,169,.3);border-radius:5px;color:var(--text-muted);font-size:.875rem;font-family:inherit;font-weight:600;cursor:pointer;text-decoration:none;display:flex;align-items:center;justify-content:center;transition:background 80ms,border-color 80ms}.modal-donate-btn:hover{background:#778da929;border-color:#778da98c}.modal-donate-tagline{font-size:.75rem;color:var(--text-muted);text-align:center}.modal-btn--download{background:#ffffff08;border-color:#ffffff0f;color:var(--text-muted);opacity:.5;cursor:not-allowed}.modal-btn--download-ready{background:#778da914;border-color:#778da94d;color:var(--text-muted);font-weight:600}.modal-btn--download-ready:hover{background:#778da929;border-color:#778da98c}.bead-responsibly-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1100}.bead-responsibly-popup{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:var(--bead-popup-pad);max-width:var(--bead-popup-w);box-shadow:0 8px 32px #0009;display:flex;flex-direction:column;gap:var(--bead-popup-gap)}.bead-responsibly-popup__title{font-size:.9375rem;font-weight:600;color:var(--text)}.bead-responsibly-popup__body{font-size:.8125rem;color:var(--text-muted);line-height:1.6}.site-footer{grid-area:footer;position:relative;border-top:1px solid var(--border);padding:.5rem 1.5rem;text-align:center;background:var(--bg)}.site-footer__save{font-size:.75rem;font-weight:600;color:var(--text-muted);margin-bottom:.2rem}.site-footer__privacy{max-width:900px;margin:0 auto;font-size:.6875rem;line-height:1.45;color:var(--text-muted);opacity:.65}.site-footer__version{position:absolute;right:1rem;bottom:.5rem;font-size:.6875rem;letter-spacing:.06em;color:var(--text-muted);opacity:.35}#debug-panel{position:fixed;bottom:3rem;left:calc(var(--palette-w) + 1.5rem);background:#000000c7;color:#64748b;font-family:monospace;font-size:.6875rem;line-height:1.75;padding:.45rem .7rem;border-radius:4px;border:1px solid rgba(255,255,255,.07);max-width:400px;pointer-events:none;z-index:999}#debug-panel:before{content:"debug";display:block;color:#334155;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.2rem}