@font-face{font-family:Quicksand Variable;font-style:normal;font-display:swap;font-weight:300 700;src:url(/assets/quicksand-vietnamese-wght-normal-ei70gACF.woff2)format("woff2-variations");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Quicksand Variable;font-style:normal;font-display:swap;font-weight:300 700;src:url(/assets/quicksand-latin-ext-wght-normal-CrJ75Ewg.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Quicksand Variable;font-style:normal;font-display:swap;font-weight:300 700;src:url(/assets/quicksand-latin-wght-normal-Buj9m_3d.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--palette-sand-98:#f9f8f5;--palette-sand-97:#f5f4f0;--palette-sand-96:#f3f2ef;--palette-sand-94:#eceae6;--palette-sand-88:#dcd8d0;--palette-sand-87:#d6d4ce;--palette-sand-86:#d2d0c8;--palette-sand-83:#cac6be;--palette-sand-57:#7b7873;--palette-sand-55:#75726d;--palette-sand-48:#605d57;--palette-sand-38:#43413c;--palette-sand-32:#393131;--palette-sand-28:#292826;--palette-slate-67:#90959b;--palette-slate-66:#8b96a0;--palette-slate-51:#596676;--palette-slate-45:#4c5764;--palette-slate-40:#3f4853;--palette-slate-36:#363f4b;--palette-slate-35:#353a41;--palette-slate-32:#2c333b;--palette-gold-84:#e2cb79;--palette-gold-81:#dfbb67;--palette-gold-80:#e1b936;--palette-gold-75:#c5ab6d;--palette-gold-70:#b89c5e;--palette-gold-55:#877031;--palette-red-79:#fda087;--palette-red-67:#e07152;--palette-red-56:#bc4c30;--palette-red-50:#a6381d;--palette-orange-80:#f3ac5b;--palette-orange-58:#b06327;--palette-teal-69:#6ba8a3;--palette-teal-56:#2c828d;--palette-white:#fff;--palette-black:#000}.app{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--color-bg:var(--palette-slate-35);--color-bg-canvas:var(--palette-slate-36);--color-surface:var(--palette-slate-36);--color-surface-raised:var(--palette-slate-40);--color-surface-sunken:var(--palette-slate-32);--color-text:var(--palette-sand-96);--color-text-secondary:var(--palette-sand-87);--color-text-muted:var(--palette-slate-67);--color-text-on-accent:var(--palette-sand-28);--color-text-on-error:var(--palette-sand-28);--color-border:var(--palette-slate-51);--color-border-subtle:var(--palette-slate-45);--color-border-strong:var(--palette-slate-66);--color-accent:var(--palette-gold-81);--color-accent-hover:var(--palette-gold-84);--color-accent-fg:var(--palette-gold-81);--color-accent-muted:color-mix(in srgb, var(--palette-gold-75) 15%, transparent);--color-hover:color-mix(in srgb, var(--palette-white) 6%, transparent);--color-active:color-mix(in srgb, var(--palette-white) 10%, transparent);--color-selected:color-mix(in srgb, var(--palette-gold-75) 20%, transparent);--color-scrim:color-mix(in srgb, var(--palette-black) 45%, transparent);--color-scrim-soft:color-mix(in srgb, var(--palette-black) 30%, transparent);--color-error:var(--palette-red-79);--color-error-bg:var(--palette-red-67);--color-warning:var(--palette-orange-80);--color-success:var(--palette-teal-69);--color-info:var(--palette-teal-69);--color-canvas:var(--palette-white);--color-canvas-border:color-mix(in srgb, var(--palette-black) 8%, transparent);--shadow-sm:0 1px 2px #0000004d;--shadow-md:0 2px 8px #0006;--shadow-lg:0 4px 16px #00000080;--radius-sm:2px;--radius-base:4px;--radius-md:6px;--radius-lg:8px;--radius-full:9999px;--font-sans:"Quicksand Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--text-xs:11px;--text-sm:12px;--text-base:14px;--text-lg:16px;--text-xl:20px}[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--color-bg:var(--palette-sand-96);--color-bg-canvas:var(--palette-sand-96);--color-surface:var(--palette-sand-94);--color-surface-raised:var(--palette-sand-98);--color-surface-sunken:var(--palette-sand-88);--color-text:var(--palette-sand-38);--color-text-secondary:var(--palette-sand-48);--color-text-muted:var(--palette-sand-55);--color-text-on-accent:var(--palette-sand-32);--color-text-on-error:var(--palette-sand-97);--color-border:var(--palette-sand-86);--color-border-subtle:var(--palette-sand-83);--color-border-strong:var(--palette-sand-57);--color-accent:var(--palette-gold-80);--color-accent-hover:var(--palette-gold-70);--color-accent-fg:var(--palette-gold-55);--color-accent-muted:color-mix(in srgb, var(--palette-gold-75) 12%, transparent);--color-hover:color-mix(in srgb, var(--palette-black) 4%, transparent);--color-active:color-mix(in srgb, var(--palette-black) 8%, transparent);--color-selected:color-mix(in srgb, var(--palette-gold-75) 15%, transparent);--color-scrim:color-mix(in srgb, var(--palette-black) 45%, transparent);--color-scrim-soft:color-mix(in srgb, var(--palette-black) 30%, transparent);--color-error:var(--palette-red-50);--color-error-bg:var(--palette-red-56);--color-warning:var(--palette-orange-58);--color-success:var(--palette-teal-56);--color-info:var(--palette-teal-56);--color-canvas:var(--palette-white);--color-canvas-border:color-mix(in srgb, var(--palette-black) 8%, transparent);--shadow-sm:0 1px 2px #0000000f;--shadow-md:0 2px 8px #0000001a;--shadow-lg:0 4px 16px #0000001f}*{box-sizing:border-box}body{min-width:1240px;margin:0;font:14px/1.4 Quicksand Variable,ui-sans-serif,system-ui,sans-serif}header{background:var(--color-surface);align-items:center;gap:24px;height:58px;padding:0 20px;display:flex}h1,h2{font-size:var(--text-base);margin:0;font-weight:600}header>button,header>nav>button{min-height:38px}nav,.buttons{flex-wrap:wrap;gap:8px;display:flex}button,select,input{font:inherit}button,select,.segmented>label{border:1px solid var(--color-border-subtle);background:var(--color-surface-raised);color:var(--color-text-secondary);border-radius:var(--radius-base);min-height:32px;font-size:var(--text-sm);padding:6px 12px;font-weight:500}button{cursor:pointer;justify-content:center;align-items:center;gap:6px;display:inline-flex}button:hover,.segmented>label:hover{background:var(--color-hover);border-color:var(--color-border-strong)}:is(button[aria-pressed=true],.segmented>label:has(:checked)){background:var(--color-surface-sunken);border-color:var(--color-border-strong);color:var(--color-text)}button:disabled,fieldset:disabled{opacity:.5;cursor:default}:focus-visible{outline:2px solid var(--color-border-strong);outline-offset:2px}main{height:calc(100vh - 58px);min-height:680px;overflow:hidden}.editor-track{width:calc(100% + 330px);height:100%;transition:width var(--choice-duration) var(--choice-easing), transform var(--choice-duration) var(--choice-easing);grid-template-columns:280px minmax(0,1fr) 330px;display:grid;transform:translate(0)}[data-mode=DRAW] .editor-track{width:calc(100% + 280px);transform:translate(-280px)}aside{background:var(--color-surface);height:100%;padding:20px 16px;overflow-y:auto}label{margin-bottom:8px;display:block}select{width:100%}fieldset{border:0;margin:24px 0 0;padding:0}legend{margin-bottom:12px;padding:0;font-weight:600}#sources{grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px;display:grid}#sources>button{aspect-ratio:1;min-width:0}.swatch{padding:4px}.swatch canvas{background:var(--color-surface-raised);width:42px;height:42px;margin:auto;display:block}.swatch span{display:block}[data-mode=ARRANGE] .swatch,[data-mode=ARRANGE] .swatch canvas{background:var(--source-color);color:#222}[data-mode=ARRANGE] .swatch[aria-pressed=true]{outline:2px solid var(--color-border-strong);outline-offset:1px}output{margin-top:8px;display:block}.pattern-panel{border:1px solid var(--color-border);transition:border-radius var(--choice-duration) var(--choice-easing);background:#f5f5f5;border-top-left-radius:0;border-top-right-radius:0;position:relative;overflow:hidden}[data-mode=DRAW] .pattern-panel{border-top-right-radius:8px}[data-mode=ARRANGE] .pattern-panel{border-top-left-radius:8px}#pattern{touch-action:none;width:100%;height:100%;display:block}.drawing-panel{background:var(--color-surface);padding:20px 16px}#selected-unit-controls{border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);background:var(--color-surface-raised);width:max-content;margin:0;padding:6px;position:absolute}#selected-unit-title{color:var(--color-text-secondary);background:var(--color-surface-raised);margin:0;padding:0 4px}#drawing-controls{margin-top:0}.clear-source{margin-left:auto}.brush{grid-template-columns:auto 1fr;align-items:center;gap:12px;margin:20px 0;display:grid}.brush label{margin:0}.fit-view{z-index:1;position:absolute;top:8px;right:8px}.drawing-panel{height:100%;max-height:calc(100vh - 58px);overflow-y:auto}.palette{grid-template-columns:repeat(8,1fr);gap:5px;display:grid}.palette button{min-height:30px;padding:0}.palette button[aria-pressed=true]{outline:2px solid var(--color-border-strong);outline-offset:2px}.palette-picker{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-raised);color:var(--color-text);box-shadow:var(--shadow-lg);margin:0;padding:0;position:fixed}.palette-picker::backdrop{background:0 0}.section-heading{justify-content:space-between;align-items:center;gap:12px;width:100%;display:flex}.section-heading>span{align-items:center;gap:6px;display:inline-flex}.symmetry-modes{width:100%}.symmetry-modes label{font-size:var(--text-sm);text-align:center;cursor:pointer;flex:1;justify-content:center;align-items:center;gap:4px;margin:0;padding:8px 4px;display:inline-flex;position:relative}.segmented input[type=radio]{opacity:0;width:1px;height:1px;position:absolute}.segmented>label:has(input:focus-visible){outline:2px solid var(--color-border-strong);outline-offset:2px}.symmetry-modes label:has(:disabled){opacity:.5;cursor:default}.slider-value{align-items:center;gap:12px;display:flex}.symmetry-modes+.slider-value{margin-top:12px}.slider-value input{flex:1;min-width:0}.slider-value label{flex-shrink:0;margin:0}.slider-value output{text-align:right;min-width:2ch;margin:0}.segmented{border:1px solid var(--color-border);border-radius:var(--radius-base);background:var(--color-surface-sunken);flex-wrap:nowrap;gap:0;min-width:0;margin:0;padding:2px;display:inline-flex}.segmented>:is(button,label){border-radius:var(--radius-base);color:var(--color-text-muted);background:0 0;border:0}.segmented>:is(button,label):hover{color:var(--color-text)}.segmented>:is(button[aria-pressed=true],label:has(:checked)){background:var(--color-surface-raised);color:var(--color-text);box-shadow:var(--shadow-sm)}.app{--choice-duration:.32s;--choice-easing:cubic-bezier(.22, 1.35, .36, 1);min-height:100vh;color:var(--color-text);background:var(--color-bg)}.theme-toggle{margin-left:auto}.lucide{stroke-width:1.75px;vertical-align:-3px;flex-shrink:0;width:16px;height:16px}legend>.lucide,label>.lucide{margin-right:6px}.symmetry-modes .lucide{width:14px;height:14px;margin:0}:is(button[aria-pressed=true]>.lucide,.symmetry-modes label:has(:checked)>.lucide){color:var(--color-text)}label{color:var(--color-text-secondary);font-size:var(--text-sm)}select,input[type=text]{background:var(--color-surface-sunken);color:var(--color-text)}input[type=text]{border:1px solid var(--color-border);border-radius:var(--radius-base);padding:8px}input[type=checkbox]{accent-color:var(--color-border-strong);vertical-align:middle;margin:0 8px 0 0}output{font-family:ui-monospace,SF Mono,monospace;font-size:var(--text-sm)}.swatch,#add-source{flex-direction:column}.palette button{border-radius:var(--radius-base)}input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%;height:20px;margin:0}input[type=range]::-webkit-slider-runnable-track{background:var(--color-border);border-radius:2px;height:4px}input[type=range]::-moz-range-track{background:var(--color-border);border-radius:2px;height:4px}input[type=range]::-webkit-slider-thumb{appearance:none;border:1px solid var(--color-border);background:var(--color-surface-raised);border-radius:50%;width:12px;height:12px;margin-top:-4px}input[type=range]::-moz-range-thumb{border:1px solid var(--color-border);background:var(--color-surface-raised);border-radius:50%;width:12px;height:12px}input[type=range]:hover::-webkit-slider-thumb{border-color:var(--color-border-strong)}input[type=range]:active::-webkit-slider-thumb{background:var(--color-border-strong)}input[type=range]:hover::-moz-range-thumb{border-color:var(--color-border-strong)}input[type=range]:active::-moz-range-thumb{background:var(--color-border-strong)}.tiling-control{margin-top:0}.choice-grid{grid-template-columns:repeat(auto-fit,minmax(76px,1fr));gap:2px;display:grid}.choice-grid>label{text-align:center;cursor:pointer;margin:0;position:relative}.animated-choice{isolation:isolate;position:relative}.animated-choice>:is(button,label){z-index:1;position:relative}.animated-choice>:is(button[aria-pressed=true],label:has(:checked)){box-shadow:none;background:0 0}.choice-indicator{pointer-events:none;border-radius:var(--radius-base);background:var(--color-surface-raised);box-shadow:var(--shadow-sm);position:absolute}@media (prefers-reduced-motion:reduce){.editor-track,.pattern-panel{transition:none}}.color-wheel{touch-action:none;cursor:crosshair;width:240px;height:240px;position:relative}.hue-ring{background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:50%;position:absolute;inset:16px}.hue-ring:after{content:"";background:var(--color-surface-raised);border-radius:50%;position:absolute;inset:21px}.color-triangle{pointer-events:none;position:absolute;inset:0}.color-marker{pointer-events:none;border-radius:50%;width:12px;height:12px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #fff,0 0 0 3px #0006}.visually-hidden{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.color-wheel:has(:focus-visible){outline:2px solid var(--color-border-strong);outline-offset:-2px}.palette-set-controls{align-items:center;gap:4px;display:inline-flex}.selection-menu{font-size:var(--text-sm);font-weight:500;position:relative}.selection-menu summary{cursor:pointer;border:1px solid var(--color-border-subtle);border-radius:var(--radius-base);background:var(--color-surface-raised);align-items:center;min-height:32px;padding:6px 8px;list-style:none;display:flex}.selection-menu summary::-webkit-details-marker{display:none}.selection-menu summary:before{content:"▾";margin-right:6px}.selection-options{z-index:5;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-raised);width:230px;box-shadow:var(--shadow-md);padding:4px;position:absolute;top:calc(100% + 6px);right:0}.selection-options>button{text-align:left;border:0;justify-content:stretch;gap:6px;width:100%;display:grid}.palette-preview{border-radius:3px;grid-template-columns:repeat(8,1fr);height:18px;display:grid;overflow:hidden}[data-mode=PREVIEW] .editor-track{width:calc(100% + 610px);transform:translate(-280px)}.tiling-menu>summary{align-items:center;gap:8px;display:flex}.tiling-menu .selection-options{width:100%;max-height:min(560px,100vh - 180px);left:0;right:auto;overflow-y:auto}.tiling-menu .selection-options>button{grid-template-columns:80px minmax(0,1fr);align-items:center;gap:12px;padding:8px}.tiling-thumbnail{background:var(--color-surface-raised);border:1px solid var(--color-border-subtle);width:80px;height:54px;color:var(--color-text-secondary);border-radius:3px;flex-shrink:0}.tiling-menu>summary .tiling-thumbnail{width:48px;height:32px}