:root{--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--radius-1:.25rem;--radius-2:.5rem;--radius-pill:999px;--font-xs:.6875rem;--font-sm:.8125rem;--font-base:.875rem;--font-lg:1.0625rem;--hit:2.25rem;--hit-sm:1.75rem;--bg-0:#161618;--bg-1:#1f1f22;--bg-2:#292a2e;--bg-3:#34353a;--bg-4:#44464d;--fg-0:#f1f1f3;--fg-1:#cdced2;--fg-2:#888a92;--line:#353740;--accent:#d653a3;--accent-soft:#d653a338;--danger:#ff7474;--danger-soft:#ff505024;--shadow-1:0 1px 2px #00000059;--shadow-2:0 .5rem 1.5rem #0000008c;--border:1px solid var(--line);--t-fast:.12s ease;--t-med:.22s ease}*,:before,:after{box-sizing:border-box}*{margin:0;padding:0}[hidden]{display:none!important}html,body{height:100%}body{background:var(--bg-0);color:var(--fg-1);font:var(--font-base)/1.4 system-ui, -apple-system, sans-serif;-webkit-tap-highlight-color:transparent;touch-action:manipulation;overscroll-behavior:none;flex-direction:column;display:flex;overflow:hidden}button{font:inherit;color:inherit;background:0 0;border:0}input{font:inherit;color:inherit}.toolbar{justify-content:space-between;align-items:center;row-gap:var(--space-2);column-gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--bg-1);border-bottom:var(--border);flex-wrap:wrap;flex-shrink:0;display:flex}.tb-group{align-items:center;gap:var(--space-1);display:flex}.tb-row{display:contents}.g-file{order:1}.g-paint{order:2}.g-transform{order:3}.g-colors{order:4}.g-hlrot{order:5}.toolbar--narrow .tb-row{justify-content:space-between;align-items:center;gap:var(--space-2);flex:0 0 100%;display:flex}.tb-spacer{flex:1 1 0;min-width:0}.btn{height:var(--hit);min-width:var(--hit);padding:0 var(--space-3);background:var(--bg-3);color:var(--fg-1);border:1px solid var(--bg-4);border-radius:var(--radius-1);cursor:pointer;font-size:var(--font-base);user-select:none;touch-action:manipulation;transition:background var(--t-fast), border-color var(--t-fast), color var(--t-fast);justify-content:center;align-items:center;display:inline-flex}.btn:hover:not(:disabled){background:var(--bg-4)}.btn:active:not(:disabled){background:var(--bg-2)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn--icon{width:var(--hit);padding:0;font-size:1.05rem;line-height:1}.btn--ghost{color:var(--fg-2);background:0 0;border-color:#0000}.btn--ghost:hover:not(:disabled){background:var(--bg-3);color:var(--fg-0)}.btn--active{background:var(--bg-4);border-color:var(--fg-2);color:var(--fg-0)}.btn--implied{background:var(--bg-2);border-color:var(--bg-3);color:var(--fg-2)}.btn--danger{color:var(--danger);background:#a020208c;border-color:#c83c3c99}.btn--danger:hover:not(:disabled){background:#c828288c}input[type=number]{height:var(--hit-sm);padding:0 var(--space-2);background:var(--bg-2);color:var(--fg-1);border:1px solid var(--bg-4);border-radius:var(--radius-1);font-variant-numeric:tabular-nums;width:100%}input[type=number]:focus{outline:2px solid var(--accent);outline-offset:0;border-color:#0000}input[type=color]{opacity:0;cursor:pointer;pointer-events:none;background:0 0;border:0;width:100%;height:100%;padding:0;position:absolute;inset:0}input[type=range]{width:clamp(6rem,22vw,10rem);accent-color:var(--accent);cursor:pointer}input[type=checkbox]{accent-color:var(--accent)}.swatch{width:var(--hit);height:var(--hit);border:2px solid var(--bg-4);border-radius:var(--radius-1);cursor:pointer;transition:border-color var(--t-fast), box-shadow var(--t-fast);touch-action:manipulation;background-clip:padding-box;flex-shrink:0;position:relative}.swatch:hover{border-color:var(--fg-2)}.swatch--active{border-color:var(--fg-0);box-shadow:0 0 0 2px var(--accent)}.swatch--small{width:var(--hit-sm);height:var(--hit-sm)}.canvas-area{background:var(--bg-0);flex:1 1 0;min-height:0;position:relative;overflow:hidden}#canvas{touch-action:none;overscroll-behavior:none;width:100%;height:100%;display:block;position:absolute;inset:0}.status{bottom:var(--space-2);right:var(--space-3);padding:var(--space-1) var(--space-2);font-size:var(--font-sm);color:var(--fg-1);border-radius:var(--radius-1);-webkit-backdrop-filter:blur(.5rem);white-space:nowrap;font-variant-numeric:tabular-nums;pointer-events:none;z-index:5;transition:opacity var(--t-fast);background:#141416b3;position:absolute}.status:empty{opacity:0}[popover]{border:1px solid var(--bg-4);background:var(--bg-2);color:var(--fg-1);border-radius:var(--radius-2);box-shadow:var(--shadow-2);padding:var(--space-3);min-width:14rem;max-width:92vw;margin:0}:is(#new-pattern-widget:popover-open,#edit-pattern-widget:popover-open,#sym-popover:popover-open,#hl-popover:popover-open){gap:var(--space-3);flex-direction:column;display:flex}#new-pattern-widget,#edit-pattern-widget{min-width:16rem}#hl-popover{min-width:18rem}#sym-popover{min-width:22rem}.sym-add-row{gap:var(--space-1);justify-content:flex-end;display:flex}.sym-list{gap:var(--space-1);max-height:18rem;padding-top:var(--space-2);border-top:1px solid var(--bg-3,#ffffff14);flex-direction:column;display:flex;overflow-y:auto}.sym-list:empty:before{content:"No axes yet — add one above";color:var(--fg-2);font-size:var(--font-sm);padding:var(--space-2);text-align:center;font-style:italic}.sym-list-row{align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-2);border-radius:var(--radius-1);background:var(--bg-2);grid-template-columns:1.75em 1fr auto auto;transition:opacity .15s;display:grid}.sym-list-row.is-inactive{opacity:.45}.sym-list-row__kind{text-align:center;font-size:1.2em;line-height:1}.sym-list-row__pos{color:var(--fg-2);font-size:var(--font-sm);font-variant-numeric:tabular-nums;font-family:ui-monospace,SF Mono,Menlo,monospace}.sym-list-row .btn--icon{--hit:var(--hit-sm,28px);min-width:var(--hit);height:var(--hit);font-size:.9em}.popover-footer{gap:var(--space-2);justify-content:flex-end;display:flex}.popover-row{justify-content:space-between;align-items:center;gap:var(--space-2);display:flex}.popover-label{font-size:var(--font-sm);color:var(--fg-2)}.field-group{gap:var(--space-2);flex-direction:column;display:flex}.field-row{justify-content:space-between;align-items:center;gap:var(--space-2);display:flex}.field-row>label{font-size:var(--font-sm);color:var(--fg-2)}.field-row>input{width:5rem}.segmented{background:var(--bg-4);border-radius:var(--radius-1);gap:1px;padding:1px;display:flex}.segmented label{height:var(--hit-sm);padding:0 var(--space-2);background:var(--bg-2);color:var(--fg-2);font-size:var(--font-sm);cursor:pointer;border-radius:calc(var(--radius-1) - 1px);user-select:none;flex:1;justify-content:center;align-items:center;display:inline-flex}.segmented label:has(input:checked){background:var(--bg-4);color:var(--fg-0)}.segmented input{display:none}dialog{color:var(--fg-1);background:var(--bg-1);border:1px solid var(--bg-4);border-radius:var(--radius-2);box-shadow:var(--shadow-2);width:min(40rem,96vw);max-height:86dvh;margin:auto;padding:0;overflow:hidden}dialog[open]{flex-direction:column;display:flex}dialog.dlg--narrow{width:min(24rem,96vw)}dialog::backdrop{-webkit-backdrop-filter:blur(2px);background:#0000008c}.dlg-header{align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:var(--border);display:flex}.dlg-title{font-size:var(--font-lg);color:var(--fg-0);font-weight:600}.dlg-progress{font-size:var(--font-sm);color:var(--fg-2);font-variant-numeric:tabular-nums;animation:1s ease-in-out infinite alternate pulse}.dlg-close{width:var(--hit);height:var(--hit);border-radius:var(--radius-1);color:var(--fg-2);cursor:pointer;transition:background var(--t-fast), color var(--t-fast);margin-left:auto;font-size:1.1rem}.dlg-close:hover{background:var(--bg-3);color:var(--fg-0)}.dlg-body{gap:var(--space-3);min-height:0;padding:var(--space-3) var(--space-4);flex-direction:column;flex:auto;display:flex;overflow:auto}.dlg-message{font-size:var(--font-base);color:var(--fg-1)}.dlg-footer{gap:var(--space-2);padding:var(--space-3) var(--space-4);border-top:var(--border);justify-content:flex-end;display:flex}#export-text{background:var(--bg-0);color:var(--fg-1);border:1px solid var(--bg-4);border-radius:var(--radius-1);padding:var(--space-3);font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:var(--font-sm);resize:none;flex:auto;line-height:1.55}.warning{padding:var(--space-2) var(--space-3);background:var(--danger-soft);border-radius:var(--radius-1);color:var(--danger);font-size:var(--font-sm);border:1px solid #ff505066}.toggle{align-items:center;gap:var(--space-2);font-size:var(--font-base);color:var(--fg-1);cursor:pointer;user-select:none;display:inline-flex}.toggle input{display:none}.toggle-track{background:var(--bg-4);border-radius:var(--radius-pill);width:2.25rem;height:1.25rem;transition:background var(--t-fast);flex-shrink:0;position:relative}.toggle-track:after{content:"";background:var(--fg-2);width:.875rem;height:.875rem;transition:left var(--t-fast), background var(--t-fast);border-radius:50%;position:absolute;top:.1875rem;left:.1875rem}.toggle input:checked+.toggle-track{background:var(--accent-soft)}.toggle input:checked+.toggle-track:after{background:var(--accent);left:calc(100% - 1.0625rem)}.toggle:has(input:disabled){cursor:not-allowed;color:var(--fg-2);opacity:.55}.toggle input:disabled+.toggle-track{background:var(--bg-3)}.toggle input:disabled+.toggle-track:after{background:var(--fg-3,var(--fg-2))}@keyframes pulse{0%{opacity:.4}to{opacity:1}}@media (width<=30rem){.toolbar{padding:var(--space-1) var(--space-2)}.tb-group+.tb-group{border-inline-start:0;margin-inline-start:var(--space-2);padding-inline-start:var(--space-2)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation-duration:1ms!important}}