:root{--bg:#f6f6f4;--surface:#fff;--text:#18181b;--muted:#71717a;--border:#e4e4e7;--shade:color-mix(in srgb, var(--text) 4%, var(--bg));--rule:#18181b;--accent:#18181b;--accent-ink:#fff;--danger:#dc2626;--radius:3px;--radius-sm:2px;--gap:12px;--group-gap:20px;--row-height:160px;--shadow-print:5px 5px 0 color-mix(in srgb, var(--text) 16%, transparent);--font-display:"Instrument Serif", "Iowan Old Style", Georgia, serif;--font-ui:"DM Sans", ui-sans-serif, system-ui, sans-serif;--font-mono:"DM Mono", ui-monospace, "SF Mono", Menlo, monospace;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;font-family:var(--font-ui);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font-size:15px}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}:root:not([data-theme=light]){--bg:#111113;--surface:#1c1c1f;--text:#f4f4f5;--muted:#a1a1aa;--border:#2e2e33;--rule:#f4f4f5;--accent:#f4f4f5;--accent-ink:#18181b;--danger:#f87171}}:root[data-theme=dark]{--bg:#111113;--surface:#1c1c1f;--text:#f4f4f5;--muted:#a1a1aa;--border:#2e2e33;--rule:#f4f4f5;--accent:#f4f4f5;--accent-ink:#18181b;--danger:#f87171}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:root[data-ink=dark],.group[data-ink=dark]{--surface:#fff;--text:#18181b;--muted:#18181b9e;--border:#18181b24;--rule:#18181b;--accent:#18181b;--accent-ink:#fff;--danger:#dc2626;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-ink=light],.group[data-ink=light]{--surface:#1c1c1f;--text:#f4f4f5;--muted:#f4f4f59e;--border:#f4f4f529;--rule:#f4f4f5;--accent:#f4f4f5;--accent-ink:#18181b;--danger:#f87171;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{background:var(--bg);min-height:100vh;margin:0}button,input{font:inherit;color:inherit}button{cursor:pointer}.app{padding:32px 32px 64px;position:relative}.toolbar{border-bottom:1px solid var(--rule);flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:28px;padding-bottom:16px;display:flex}.masthead{flex:320px;min-width:0}.kicker,.palette-meta{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:13px}.palette-meta{font-variant-numeric:tabular-nums}.palette-name{width:100%;min-width:0;font-family:var(--font-display);letter-spacing:-.01em;background:0 0;border:none;border-radius:0;margin:2px 0 6px;padding:0;font-size:64px;font-weight:400;line-height:1.05;display:block}.palette-name:hover,.palette-name:focus{box-shadow:inset 0 -1px 0 var(--border);outline:none}.palette-switcher{position:relative}.palette-title{text-align:left;align-items:baseline;gap:12px;width:auto;max-width:100%;display:inline-flex}.palette-title:hover,.palette-title:focus{box-shadow:none}.palette-title:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.palette-title-text{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}.palette-title-chevron{fill:none;width:.36em;height:.36em;stroke:var(--muted);stroke-width:2.5px;stroke-linecap:round;stroke-linejoin:round;flex:none;transition:transform .15s,stroke .15s}.palette-title:hover .palette-title-chevron{stroke:var(--text)}.palette-title[aria-expanded=true] .palette-title-chevron{transform:rotate(180deg)}.palette-menu{z-index:50;border-radius:var(--radius-sm);background:var(--surface);width:min(380px,100vw - 32px);box-shadow:0 0 0 1px var(--rule), var(--shadow-print);padding:14px 0 10px;position:absolute;top:100%;left:0}.palette-menu-heading{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin:0 16px 8px;font-size:13px}.palette-list{max-height:min(360px,50vh);margin:0;padding:0;list-style:none;overflow-y:auto}.palette-list li{align-items:stretch;display:flex;position:relative}.palette-item{text-align:left;background:0 0;border:none;flex:1;gap:4px;min-width:0;padding:8px 16px;display:grid}.palette-item:hover,.palette-item:focus-visible{background:var(--shade);outline:none}.palette-list .is-current .palette-item{box-shadow:inset 2px 0 0 var(--text)}.palette-item-name{font-family:var(--font-display);white-space:nowrap;text-overflow:ellipsis;font-size:24px;line-height:1.1;overflow:hidden}.palette-item-meta{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;align-items:center;gap:8px;font-size:12px;display:flex}.palette-strip{display:flex}.palette-strip span{width:12px;height:12px;box-shadow:0 0 0 1.5px var(--surface);border-radius:50%;margin-right:-3px}.palette-strip:empty{display:none}.palette-item-delete{width:28px;height:28px;color:var(--muted);opacity:0;background:0 0;border:none;border-radius:50%;place-items:center;padding:0;transition:opacity .15s,background .15s;display:grid;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.palette-list li:hover .palette-item-delete,.palette-item-delete:focus-visible{opacity:1}.palette-item-delete:hover{background:color-mix(in srgb, var(--text) 10%, transparent);color:var(--text)}.palette-item-delete svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;width:14px;height:14px}@media (hover:none){.palette-item-delete{opacity:1}}.palette-menu-actions{border-top:1px solid var(--border);gap:20px;margin-top:8px;padding:10px 16px 0;display:flex}.controls{flex-wrap:wrap;align-items:center;row-gap:8px;display:flex}.controls>.text-actions~.text-actions:before{content:"·";color:var(--muted);margin:0 28px;font-size:16px;line-height:1}.btn{border:1px solid var(--rule);border-radius:var(--radius-sm);letter-spacing:.08em;text-transform:uppercase;background:0 0;min-width:34px;height:34px;padding:0 14px;font-size:13px;font-weight:500;transition:background .15s,color .15s,border-color .15s}.btn:hover:not(:disabled){background:var(--text);color:var(--bg);border-color:var(--text)}.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn:disabled{opacity:.35;cursor:default}.stepper{align-items:center;gap:6px;display:flex}.stepper .btn{letter-spacing:0;padding:0;font-size:16px}.stepper-label{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-right:4px;font-size:13px}.stepper-value{text-align:center;font-variant-numeric:tabular-nums;min-width:22px;font-weight:500}.text-actions{flex-wrap:wrap;align-items:center;display:flex}.text-btn{color:var(--text);letter-spacing:.08em;text-transform:uppercase;text-underline-offset:4px;background:0 0;border:none;padding:4px 0;font-size:13px;font-weight:500;transition:color .15s}.text-actions>*+:before{content:"|";color:var(--border);margin:0 10px;display:inline-block}.text-btn:hover{text-decoration:underline}.text-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.colour-setting{flex:none;align-items:center;display:inline-flex;position:relative}.colour-swatch{width:20px;height:20px;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--text) 22%, transparent);border:none;border-radius:50%;padding:0;transition:box-shadow .15s}.colour-swatch:hover,.colour-swatch[aria-expanded=true]{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--text) 22%, transparent), 0 0 0 3px color-mix(in srgb, var(--text) 14%, transparent)}.colour-swatch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.group-colour{margin:0 4px 0 2px}.background-colour{z-index:40;position:absolute;top:14px;right:16px}.background-colour .colour-swatch{width:22px;height:22px}.colour-popover{z-index:30;border-radius:var(--radius-sm);background:var(--surface);box-shadow:0 0 0 1px var(--rule), var(--shadow-print);gap:10px;padding:10px;display:grid;position:absolute;top:calc(100% + 10px)}.colour-popover-left{left:0}.colour-popover-right{right:0}.colour-popover .react-colorful{width:200px;height:180px}.colour-popover-row{justify-content:space-between;align-items:center;gap:10px;display:flex}.colour-hex{border-radius:var(--radius-sm);background:var(--shade);width:0;font-family:var(--font-mono);letter-spacing:.06em;border:none;flex:1;padding:4px 6px;font-size:13px}.colour-hex:focus{outline:2px solid var(--accent)}.text-btn:disabled{color:var(--muted);cursor:default;text-decoration:none}.theme-switch .text-btn{color:var(--muted)}.theme-switch .text-btn:hover,.theme-switch .text-btn[aria-pressed=true]{color:var(--text)}.theme-switch .text-btn[aria-pressed=true]{text-decoration:underline}.notice{border:1px solid var(--danger);border-radius:var(--radius-sm);color:var(--danger);justify-content:space-between;align-items:center;gap:12px;margin:-8px 0 20px;padding:10px 14px;font-size:14px;display:flex}.notice button{background:0 0;border:none;font-size:18px;line-height:1}.split{gap:var(--group-gap);min-width:0;display:flex}.split-column{flex-direction:column}.layout{flex-direction:column;display:flex}.layout.is-fixed{width:max-content;max-width:100%}.split-row>*{flex:var(--weight) 1 0;min-width:0}.split-row>.is-fixed{flex:0 auto}.layout>.is-fixed,.split-column>.is-fixed{align-self:flex-start}.layout-cell.is-fixed{width:var(--width);max-width:100%}.layout-cell{min-width:0;margin:var(--offset-y,0) 0 0 var(--offset-x,0);flex-direction:column;display:flex}.layout-cell.has-height{height:var(--height);min-height:min-content}.split-row>.has-height{align-self:flex-start}.has-height .grid{flex:1 1 0;grid-auto-rows:minmax(64px,1fr)}.group{border-radius:var(--radius);background:var(--shade);min-width:0;color:var(--text);flex-direction:column;flex:1;padding:14px;transition:opacity .15s;display:flex;position:relative;container-type:inline-size}.group:has(.colour-popover,.picker-popover){z-index:15}.group.is-dragging{opacity:.4}.group-handle{--reach:calc(var(--group-gap) / 2 + 4px);--out:calc(var(--group-gap) / -2);z-index:5;touch-action:none;position:absolute}.group-handle-n,.group-handle-s{left:var(--reach);right:var(--reach);height:var(--reach);cursor:ns-resize}.group-handle-e,.group-handle-w{top:var(--reach);bottom:var(--reach);width:var(--reach);cursor:ew-resize}.group-handle-n{top:var(--out)}.group-handle-s{bottom:var(--out)}.group-handle-e{right:var(--out)}.group-handle-w{left:var(--out)}.group-handle-ne,.group-handle-nw,.group-handle-se,.group-handle-sw{width:calc(var(--reach) + 6px);height:calc(var(--reach) + 6px)}.group-handle-ne{top:var(--out);right:var(--out);cursor:nesw-resize}.group-handle-nw{top:var(--out);left:var(--out);cursor:nwse-resize}.group-handle-se{bottom:var(--out);right:var(--out);cursor:nwse-resize}.group-handle-sw{bottom:var(--out);left:var(--out);cursor:nesw-resize}.group-handle:after{content:"";background:var(--accent);opacity:0;border-radius:1px;transition:opacity .15s;position:absolute}.group-handle-n:after,.group-handle-s:after{width:36px;height:4px;margin-left:-18px;left:50%}.group-handle-n:after{top:calc(var(--group-gap) / 4 - 2px)}.group-handle-s:after{bottom:calc(var(--group-gap) / 4 - 2px)}.group-handle-e:after,.group-handle-w:after{width:4px;height:36px;margin-top:-18px;top:50%}.group-handle-e:after{right:calc(var(--group-gap) / 4 - 2px)}.group-handle-w:after{left:calc(var(--group-gap) / 4 - 2px)}.group-handle-ne:after,.group-handle-nw:after,.group-handle-se:after,.group-handle-sw:after{--inset:calc(var(--group-gap) / 2 - 7px);border:0 solid var(--accent);background:0 0;border-radius:0;width:12px;height:12px}.group-handle-ne:after{top:var(--inset);right:var(--inset);border-width:3px 3px 0 0;border-top-right-radius:4px}.group-handle-nw:after{top:var(--inset);left:var(--inset);border-width:3px 0 0 3px;border-top-left-radius:4px}.group-handle-se:after{bottom:var(--inset);right:var(--inset);border-width:0 3px 3px 0;border-bottom-right-radius:4px}.group-handle-sw:after{bottom:var(--inset);left:var(--inset);border-width:0 0 3px 3px;border-bottom-left-radius:4px}.group-handle:hover:after,.group-handle:focus-visible:after{opacity:1}.group-handle:focus-visible{outline:none}.group.is-resizing{outline:1px solid var(--accent);outline-offset:3px}.group-size{z-index:6;border-radius:var(--radius-sm);background:var(--accent);color:var(--accent-ink);font-variant-numeric:tabular-nums;pointer-events:none;padding:4px 10px;font-size:14px;font-weight:500;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.layout.is-moving-group .group-handle{display:none}.group-header{border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:14px;padding-bottom:10px;display:flex}.group-grip,.group-remove{border-radius:var(--radius-sm);width:30px;height:30px;color:var(--muted);background:0 0;border:none;flex:none;place-items:center;padding:0;transition:background .15s,color .15s;display:grid}.group-grip{cursor:grab;touch-action:none}.group-grip:hover,.group-remove:hover{background:var(--bg);color:var(--text)}.group-grip:focus-visible{outline:2px solid var(--accent)}.group-grip svg{fill:currentColor;width:18px;height:18px}.group-remove svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;width:16px;height:16px}.group-name{min-width:0;font-family:var(--font-display);text-overflow:ellipsis;background:0 0;border:none;border-radius:0;flex:120px;padding:0 6px;font-size:34px;font-weight:400;line-height:1.15}.group-name:hover,.group-name:focus{box-shadow:inset 0 -1px 0 var(--border);outline:none}.group-name::placeholder{color:var(--muted)}.group-controls{align-items:center;gap:4px;margin-left:auto;display:flex}.group .stepper .btn{background:color-mix(in srgb, var(--text) 7%, transparent);border:none;border-radius:50%;width:26px;min-width:0;height:26px;font-size:15px;line-height:1}.group .stepper .btn:hover:not(:disabled){background:color-mix(in srgb, var(--text) 13%, transparent);color:var(--text)}@container (width<=380px){.group .stepper-label{display:none}}.drop-indicator{z-index:20;background:var(--accent);pointer-events:none;border-radius:1px;position:absolute}.drop-left,.drop-right{width:4px;top:0;bottom:0}.drop-top,.drop-bottom{height:4px;left:0;right:0}.drop-left{left:calc(var(--group-gap) / -2 - 2px)}.drop-right{right:calc(var(--group-gap) / -2 - 2px)}.drop-top{top:calc(var(--group-gap) / -2 - 2px)}.drop-bottom{bottom:calc(var(--group-gap) / -2 - 2px)}.drop-merge{border-radius:inherit;background:color-mix(in srgb, var(--accent) 8%, transparent);outline:2px solid var(--accent);place-items:center;display:grid;inset:-1px}.drop-merge span{border-radius:var(--radius-sm);background:var(--accent);max-width:calc(100% - 24px);color:var(--accent-ink);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis;padding:6px 12px;font-size:13px;font-weight:500;overflow:hidden}.layout.is-moving-group .group>*{pointer-events:none}.group-chip{border-radius:var(--radius-sm);background:var(--surface);max-width:100%;box-shadow:0 0 0 1px var(--rule), var(--shadow-print);cursor:grabbing;align-items:center;gap:10px;padding:6px 12px 6px 14px;display:inline-flex;transform:rotate(-1deg)}.group-chip-name{min-width:0;font-family:var(--font-display);white-space:nowrap;text-overflow:ellipsis;font-size:24px;font-weight:400;overflow:hidden}.group-chip-swatches{flex:none;display:flex}.group-chip-swatches span{border:1.5px solid var(--surface);border-radius:1px;width:16px;height:16px;margin-left:-4px}.group-chip-swatches span.is-blank{background:var(--bg)}.grid{grid-template-columns:repeat(var(--columns), minmax(0, 1fr));grid-auto-rows:var(--row-height);grid-auto-flow:dense;gap:var(--gap);display:grid}.add-tile{border:1px dashed color-mix(in srgb, var(--muted) 55%, transparent);border-radius:var(--radius);color:var(--muted);font-family:var(--font-display);background:0 0;font-size:44px;font-weight:400;transition:border-color .15s,color .15s}.add-tile:hover,.add-tile.is-drop-target{border-color:var(--muted);color:var(--text)}.add-tile.is-drop-target{border-style:solid}.swatch{border-radius:var(--radius);background:var(--swatch);color:var(--ink);flex-direction:column;justify-content:flex-end;min-width:0;padding:14px;transition:background .2s;display:flex;position:relative}.swatch.is-picking,.swatch.is-resizing{z-index:10}.swatch.is-resizing{outline:1px solid var(--accent);outline-offset:3px}.swatch-meta{flex-direction:column;gap:2px;min-width:0;display:flex}.swatch-meta input{width:100%;min-width:0;color:var(--ink);border-radius:var(--radius-sm);text-overflow:ellipsis;background:0 0;border:none;margin-left:-4px;padding:2px 4px}.swatch-meta input:hover,.swatch-meta input:focus{background:color-mix(in srgb, var(--ink) 12%, transparent);outline:none}.swatch-label{font-family:var(--font-display);font-size:23px;font-weight:400;line-height:1.1}.swatch-label::placeholder{color:var(--ink);opacity:0;transition:opacity .15s}.swatch:hover .swatch-label::placeholder,.swatch-label:focus::placeholder{opacity:.55}.swatch-hex{font-family:var(--font-mono);opacity:.8;letter-spacing:.06em;font-size:13px}.swatch-actions{flex-wrap:wrap;justify-content:flex-end;gap:4px;max-width:calc(100% - 20px);display:flex;position:absolute;top:10px;right:10px}.icon-btn{border-radius:var(--radius-sm);background:color-mix(in srgb, var(--ink) 14%, transparent);width:28px;height:28px;color:var(--ink);border:none;place-items:center;padding:0;display:grid}.icon-btn:hover{background:color-mix(in srgb, var(--ink) 24%, transparent)}.icon-btn .die-pip{fill:currentColor;stroke:none}.icon-btn svg,.resize-handle svg{fill:none;stroke:currentColor;stroke-width:1.75px;stroke-linecap:round;stroke-linejoin:round;width:16px;height:16px}.resize-handle{border-radius:var(--radius-sm);width:24px;height:24px;color:var(--ink);cursor:nwse-resize;touch-action:none;background:0 0;border:none;place-items:center;padding:0;display:grid;position:absolute;bottom:4px;right:4px}.resize-handle svg{stroke-width:1.5px;width:12px;height:12px}.swatch-actions,.resize-handle{opacity:0;transition:opacity .15s}.swatch:hover .swatch-actions,.swatch:hover .resize-handle,.swatch:focus-within .swatch-actions,.swatch:focus-within .resize-handle,.swatch.is-picking .swatch-actions,.swatch.is-resizing .resize-handle{opacity:1}@media (hover:none){.swatch-actions,.resize-handle{opacity:1}}.swatch-size{border-radius:var(--radius-sm);background:color-mix(in srgb, var(--ink) 18%, transparent);font-variant-numeric:tabular-nums;pointer-events:none;padding:4px 10px;font-size:13px;font-weight:500;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.swatch.is-blank{--ink:var(--text);border:1px dashed color-mix(in srgb, var(--muted) 55%, transparent);background:0 0;transition:border-color .15s}.swatch.is-blank:hover,.swatch.is-blank:focus-within{border-color:var(--muted)}.swatch-overlay.is-blank{background:var(--surface)}.swatch-hex-row{align-items:center;gap:6px;min-width:0;display:flex}.swatch.is-blank .swatch-hex{border:1px dashed color-mix(in srgb, var(--muted) 55%, transparent);opacity:1;background:0 0;flex:1;margin-left:0;padding:6px 8px;transition:border-color .15s}.swatch.is-blank .swatch-hex:hover,.swatch.is-blank .swatch-hex:focus{border-color:var(--muted);background:0 0}.swatch.is-blank .swatch-hex-row{opacity:0;transition:opacity .15s}.swatch.is-blank:hover .swatch-hex-row,.swatch.is-blank:focus-within .swatch-hex-row{opacity:1}@media (hover:none){.swatch.is-blank .swatch-hex-row{opacity:1}}.swatch{cursor:grab}.swatch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.swatch.is-dragging{opacity:.3}.swatch.is-drop-target{outline:2px solid var(--accent);outline-offset:3px}.swatch-overlay{cursor:grabbing;height:100%;box-shadow:var(--shadow-print);transform:rotate(-1.5deg)scale(1.03)}.swatch-overlay .swatch-meta span{padding:2px 0}::view-transition-group(*){animation-duration:.25s;animation-timing-function:ease}.empty-hint{color:var(--muted);font-family:var(--font-display);margin:24px 0 0;font-size:24px;font-style:italic}.empty-hint strong{color:var(--accent);font-style:normal;font-weight:400}.picker-popover{z-index:1;border-radius:var(--radius-sm);background:var(--surface);box-shadow:0 0 0 1px var(--rule), var(--shadow-print);padding:10px;position:absolute;top:46px;right:10px}.picker-popover .react-colorful{width:200px;height:200px}@media (width<=640px){:root{--gap:8px;--group-gap:14px;--row-height:110px}.split-row{flex-direction:column}.split-row>*{flex:none}.layout.is-fixed{width:auto}.layout .is-fixed{align-self:stretch}.layout-cell.is-fixed{width:auto}.layout-cell{margin:0}.layout-cell.has-height{height:auto}.has-height .grid{grid-auto-rows:var(--row-height)}.group-handle{display:none}.group{padding:8px}.app{padding:20px 16px 48px}.palette-name{font-size:40px}.group-name{font-size:26px}.swatch{padding:8px}.swatch-actions{gap:2px;max-width:calc(100% - 10px);top:5px;right:5px}.icon-btn{width:22px;height:22px}.icon-btn svg{width:13px;height:13px}.swatch-label{font-size:17px}.swatch-hex{font-size:12px}}