.frame-page.patterns{grid-template-rows:minmax(0,1fr)}.patterns-header{display:none}.frame-page-stage.patterns-stage{--patterns-inset:15px;--patterns-toolbar-width:200px;--patterns-foot-height:48px;grid-template-columns:minmax(0,1fr);place-items:stretch stretch;position:relative}.patterns-surface{min-width:0;min-height:0;position:relative}.patterns-canvas{touch-action:none;cursor:crosshair;width:100%;height:100%;display:block;position:absolute;inset:0}.patterns-window,.patterns-window[hidden]{display:none}.patterns-status{z-index:2;right:var(--patterns-inset);top:var(--patterns-inset);background:var(--site-background);margin:0;padding:0 8px;line-height:20px;position:absolute}.patterns-status:empty{display:none}.patterns-toolbar{top:var(--patterns-inset);left:var(--patterns-inset);z-index:2;box-sizing:border-box;width:var(--patterns-toolbar-width);max-height:calc(100% - 2 * var(--patterns-inset));background:var(--site-background);scrollbar-width:none;flex-direction:column;gap:10px;padding:6px;display:flex;position:absolute;overflow-y:auto}.patterns-foot{bottom:var(--patterns-inset);left:calc(2 * var(--patterns-inset) + var(--patterns-toolbar-width));z-index:2;box-sizing:border-box;max-width:calc(100% - 3 * var(--patterns-inset) - var(--patterns-toolbar-width));background:var(--site-background);flex-wrap:wrap;gap:2px 14px;padding:6px;display:flex;position:absolute}.patterns-foot[hidden]{display:none}.patterns-tools{flex-wrap:wrap;gap:2px;display:flex}.patterns-track{gap:6px;display:grid}.patterns-track-name{line-height:16px}.patterns-track-strip{cursor:ew-resize;touch-action:none;height:32px;display:block;position:relative}.patterns-track-strip canvas{width:100%;height:100%;image-rendering:pixelated;outline:1px solid color-mix(in srgb, var(--site-text) 25%, transparent);display:block;position:absolute;inset:0}.patterns-track-frame{box-sizing:border-box;border:2px solid var(--site-text);box-shadow:0 0 0 1px var(--site-background), inset 0 0 0 1px var(--site-background);pointer-events:none;position:absolute;top:-3px;bottom:-3px}.patterns-track-strip:focus-visible{outline:2px solid var(--site-link);outline-offset:4px}.patterns-explore{z-index:1;box-sizing:border-box;padding:0 0 calc(var(--patterns-foot-height) + 2 * var(--patterns-inset)) calc(var(--patterns-toolbar-width) + 2 * var(--patterns-inset));background:var(--site-background);grid-template:repeat(3,1fr)/repeat(3,1fr);gap:10px;display:grid;position:absolute;inset:0}.patterns-explore[hidden]{display:none}.patterns-pane{cursor:pointer;background:0 0;border:0;min-width:0;min-height:0;padding:0;position:relative}.patterns-pane canvas{width:100%;height:100%;image-rendering:pixelated;display:block;position:absolute;inset:0}.patterns-pane:after{content:"";pointer-events:none;position:absolute;inset:0}.patterns-pane:nth-child(5):after{box-shadow:inset 0 0 0 3px var(--site-text), inset 0 0 0 6px var(--site-background)}@media (hover:hover){.patterns-pane:not(:nth-child(5)):hover:after{box-shadow:inset 0 0 0 3px var(--site-background)}}.patterns-mode{box-shadow:inset 0 0 0 2px var(--site-text);align-self:flex-start;display:flex}.patterns-mode-option{height:26px;color:var(--site-text);font:inherit;cursor:pointer;background:0 0;border:0;padding:0 12px 2px;font-size:18px;line-height:1}.patterns-mode-option[aria-pressed=true]{background:var(--site-text);color:var(--site-background)}.patterns-toolbar[data-playing]>:not(.patterns-mode){display:none}.patterns-toolbar[data-playing]{width:auto}.patterns-tool{width:36px;height:36px;color:var(--site-text);cursor:pointer;background:0 0;border:0;place-items:center;padding:0;display:grid;position:relative}.patterns-tool svg{fill:currentColor;display:block}.patterns-tool-icon,.patterns-tool .patterns-ink-well{transform:translate(-2px,-2px)}.patterns-tool .patterns-tool-key{opacity:.5;position:absolute;bottom:2px;right:2px}.patterns-tool[aria-pressed=true]{background:var(--site-text);color:var(--site-background)}.patterns-tool:disabled{color:var(--site-muted,color-mix(in srgb, var(--site-text) 36%, var(--site-background)));cursor:default}@media (hover:hover){.patterns-tool:not([aria-pressed=true],:disabled):hover{background:color-mix(in srgb, var(--site-text) 12%, transparent)}}.patterns-ink-well{background:var(--patterns-ink);outline:1px solid color-mix(in srgb, var(--site-text) 30%, transparent);width:16px;height:16px;display:block}.patterns-tool:has(>.patterns-ink-well)[aria-pressed=true]{color:var(--site-text);box-shadow:inset 0 0 0 2px var(--site-text);background:0 0}@media (width<=900px){.frame-page.patterns{grid-template-rows:auto minmax(0,1fr)}.patterns-header{display:block}.frame-page-stage.patterns-stage{grid-template-rows:minmax(220px,1fr) auto auto;grid-template-columns:minmax(0,1fr);gap:10px}.patterns-surface{order:1}.patterns-toolbar{order:2;grid-template-columns:1fr 1fr;gap:8px 12px;width:auto;max-height:none;padding:0;display:grid;position:static;overflow:visible}.patterns-foot{order:3;gap:2px 10px;max-width:none;padding:0;position:static}.patterns-explore{padding:0}.patterns-mode{grid-column:1/-1}}