#postcard-composer{box-sizing:border-box;overscroll-behavior:contain;color:#242321;background:#fffefc;border:2px solid #242321;border-radius:0;width:min(1040px,100vw - 32px);max-height:calc(100dvh - 24px);margin:auto;padding:0;overflow:auto;box-shadow:10px 10px #000000a8}#postcard-composer::backdrop{background:#111111b8}#postcard-composer *{box-sizing:border-box}.postcard-heading{z-index:2;background:#fffefc;border-bottom:1px solid #24232144;justify-content:space-between;align-items:center;gap:20px;padding:12px 22px;display:flex;position:sticky;top:0}.postcard-heading p{font:13px/1.4 var(--font-ui);letter-spacing:.1em;color:#71695f;margin:0 0 1px}.postcard-heading h2{font:700 26px/1.15 var(--font-heading);letter-spacing:-.01em;margin:0}#postcard-composer button{cursor:pointer;color:inherit}.postcard-heading button{width:40px;height:40px;font:30px/1 var(--font-ui);color:#595247;background:0 0;border:0;flex:none}.postcard-heading button:hover{color:#242321}.postcard-workspace{grid-template-columns:minmax(0,1fr) 300px;display:grid}.postcard-preview-area{color:#fffefc;background:#121110;flex-direction:column;min-width:0;padding:14px 22px 22px;display:flex}.postcard-preview-meta{justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;display:flex}.postcard-preview-meta span{font:11px/1.4 var(--font-code,ui-monospace, monospace);letter-spacing:.14em;color:#d8d4cc}.postcard-preview-meta button{color:#fffefc;min-height:38px;font:17px/1.3 var(--font-ui);background:0 0;border:1.5px solid #fffefc;padding:4px 13px;transition:translate .1s ease-out,box-shadow .1s ease-out;box-shadow:2px 2px #fffefc59}.postcard-preview-meta button:hover{translate:1px 1px;box-shadow:1px 1px #fffefc59}[data-postcard-canvas]{aspect-ratio:3/2;background:#f3e9d4;width:min(100%,150dvh - 378px);min-width:min(100%,420px);height:auto;margin:auto;display:block;transform:rotate(-.6deg);box-shadow:0 22px 48px #000000b3,0 2px 8px #00000080}.postcard-fields{align-content:start;gap:11px;min-width:0;padding:16px 22px 20px;display:grid}.postcard-fields label{color:#71695f;min-width:0;font:16px/1.3 var(--font-ui);gap:2px;display:grid}.postcard-fields input,.postcard-fields textarea{color:#242321;width:100%;min-width:0;min-height:36px;font:19px/1.4 var(--font-ui);background:0 0;border:0;border-bottom:1px solid #24232138;border-radius:0;padding:3px 0}.postcard-fields select{color:#242321;width:100%;min-width:0;min-height:38px;font:17px/1.3 var(--font-ui);cursor:pointer;background:#fffefc;border:1px solid #24232140;border-radius:0;padding:4px 8px}.postcard-fields textarea{resize:vertical;min-height:86px}.postcard-fields input::placeholder,.postcard-fields textarea::placeholder{color:#8a8378;opacity:1}.postcard-names{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;display:grid}.postcard-personal-note{font:14px/1.4 var(--font-ui);color:#8a8378;margin:-4px 0 0}.postcard-export-options{border-top:1px dashed #24232340;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;padding-top:12px;display:grid}.postcard-export-options label{min-width:0;display:block}.postcard-export-options .postcard-export-sides{grid-column:1/-1}.postcard-export-options select{color:#595247;min-height:36px;padding:3px 6px;font-size:15px}.postcard-download{color:#242321;min-height:46px;font:700 19px/1.3 var(--font-ui);background:#fffef9;border:2px solid #242321;transition:translate .1s ease-out,box-shadow .1s ease-out;box-shadow:3px 3px #24232150}.postcard-download:hover:not(:disabled){translate:1px 1px;box-shadow:2px 2px #24232150}.postcard-download:active:not(:disabled){translate:2px 2px;box-shadow:1px 1px #24232150}#postcard-composer button:disabled{cursor:wait;opacity:.6}#postcard-composer :focus-visible{outline-offset:3px;outline:2px solid #242321}.postcard-preview-area :focus-visible{outline-color:#fffefc}.postcard-status{font:15px/1.4 var(--font-ui);color:#595247;margin:-3px 0 0}.postcard-status:empty{display:none}@media (width<=800px){#postcard-composer{width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}.postcard-heading{padding:10px 16px}.postcard-heading h2{font-size:22px}.postcard-workspace{grid-template-columns:minmax(0,1fr)}.postcard-preview-area{padding:10px 16px 18px}.postcard-preview-meta{margin-bottom:10px}[data-postcard-canvas]{width:min(100%,150dvh - 630px);min-width:min(100%,300px)}.postcard-fields{padding:14px 16px 18px}.postcard-export-options{flex-wrap:wrap}}@media (prefers-reduced-motion:no-preference){[data-postcard-canvas]{animation:.3s ease-out postcard-arrive}@keyframes postcard-arrive{0%{opacity:.4;transform:translateY(5px)rotate(-.6deg)}}}#share-options{z-index:110;color:#111;background:#fff;border:2px solid #111;width:min(320px,100vw - 24px);max-height:calc(100dvh - 24px);position:fixed;overflow:auto;box-shadow:5px 5px #111}#share-options[hidden],#share-options [hidden]{display:none!important}.share-options-top{letter-spacing:.04em;border-bottom:2px solid #111;justify-content:space-between;align-items:center;gap:10px;min-height:45px;padding:7px 10px 7px 12px;font:700 10px/1.3 ui-monospace,Menlo,monospace;display:flex}.share-options-top>span{overflow-wrap:anywhere;min-width:0}.share-options-top strong{font:inherit;letter-spacing:0}.share-options-top button{width:28px;height:28px;color:inherit;font:22px/1 var(--font-ui);background:0 0;border:0;flex:none}.share-options-top button:hover{color:#fff;background:#111}.share-options-sample{background:#f1eee8;border-radius:3px;height:24px;margin:14px 14px 12px;display:flex;overflow:hidden}.share-rename{gap:8px;margin:0 12px 12px;display:grid}.share-rename label{gap:4px;font:700 11px/1.3 ui-monospace,Menlo,monospace;display:grid}.share-rename input{color:#111;min-height:40px;font:16px/1.4 var(--font-ui);background:#fff;border:1px solid #111;border-radius:0;padding:6px 8px}.share-rename textarea{color:#111;resize:vertical;width:100%;min-height:70px;font:16px/1.4 var(--font-ui);background:#fff;border:1px solid #111;border-radius:3px;padding:6px 8px}.share-rename button{color:#fff;background:#111;border:1px solid #111;min-height:40px;padding:8px 12px;font:700 11px/1.3 ui-monospace,Menlo,monospace}.share-code-options{background:#f1eee8;border-bottom:1px solid #111;padding:10px 12px}.share-code-formats{gap:8px;display:flex}.share-options-actions .share-code-options button{color:#111;text-align:center;background:#fff;border:1px solid #111;flex:1;justify-content:center;width:auto;min-width:0;min-height:44px;padding:8px 4px;font:700 11px/1.3 ui-monospace,Menlo,monospace}.share-options-actions .share-code-options button:hover,.share-options-actions .share-code-options button:focus-visible,.share-options-actions .share-code-options button[data-feedback-mark]{color:#fff;background:#111}[data-share-code-menu][aria-expanded=true] .share-code-arrow{rotate:180deg}.share-code-feedback{font:15px/1.3 var(--font-ui);margin:8px 0 0}.share-code-feedback:empty{display:none}.share-options-actions,.share-group+.share-group{border-top:2px solid #111}.share-group:not(:has(:is(button,select):not([hidden]))){display:none}.share-group-label{color:#6f6a62;letter-spacing:.14em;margin:0;padding:9px 12px 5px;font:700 9px/1 ui-monospace,Menlo,monospace}.share-options-actions button{color:#111;text-align:left;background:#fff;border:0;border-bottom:1px solid #111;justify-content:space-between;align-items:center;width:100%;min-height:40px;padding:8px 12px;font:700 11px/1.3 ui-monospace,Menlo,monospace;display:flex}.share-options-actions .share-group>button:last-child{border-bottom:0}.share-options-actions button span{font-size:16px;line-height:1}.share-options-actions button:hover:not(:disabled),.share-options-actions button:focus-visible{color:#fff;background:#111}.share-options-actions button:focus-visible{outline-offset:-4px}.share-options-actions button:disabled{opacity:.6;cursor:wait}.share-options-status{color:#111;min-height:0;font:16px/1.4 var(--font-ui);border-top:1px solid #111;margin:0;padding:10px 12px}.share-options-status:empty{display:none}.export-preferences{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:8px;margin:2px 12px 10px;display:grid}.export-preferences label{color:#666;min-width:0;font:15px/1.2 var(--font-ui);gap:3px;display:grid}.export-preferences select{appearance:none;color:#111;width:100%;min-width:0;min-height:38px;font:15px/1.3 var(--font-ui);background:#faf9f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23111' stroke-width='1.5'/%3E%3C/svg%3E") right 8px center/12px 8px no-repeat;border:1px solid #aaa;border-radius:3px;padding:6px 26px 6px 8px}.export-preferences select:hover{border-color:#111}.export-preferences select:focus-visible{outline-offset:2px;outline:2px solid #111}.astro-fg2vtww3[hidden]{display:none!important}.analytics-sheet.astro-fg2vtww3{z-index:9500;color:#111;background:#fffefc;border:2px solid #111;width:min(520px,100vw - 48px);max-height:calc(100dvh - 48px);padding:22px;position:fixed;bottom:24px;right:24px;overflow-y:auto;box-shadow:5px 5px #111}h2.astro-fg2vtww3{font:700 26px/1.2 var(--font-heading);margin:0 0 10px}p.astro-fg2vtww3{font:18px/1.4 var(--font-ui);margin:0 0 12px}.analytics-detail.astro-fg2vtww3{color:#5b5550;font-size:16px}a.astro-fg2vtww3{text-underline-offset:3px;text-decoration:underline}.analytics-actions.astro-fg2vtww3{flex-wrap:wrap;gap:12px;display:flex}.analytics-actions.astro-fg2vtww3 button.astro-fg2vtww3{color:#111;background:#fffefc;border:2px solid #111;flex:1;min-height:44px;padding:9px 14px}.analytics-actions.astro-fg2vtww3 button.astro-fg2vtww3:hover{background:#f1eee8}.analytics-close.astro-fg2vtww3{color:#5b5550;text-underline-offset:3px;background:0 0;border:0;min-height:44px;margin-top:10px;padding:5px 0;text-decoration:underline}.analytics-footer.astro-fg2vtww3{text-align:center;padding:16px 24px}.analytics-footer.astro-fg2vtww3 button.astro-fg2vtww3{min-height:44px;color:var(--muted);text-underline-offset:3px;background:0 0;border:0;padding:8px 12px;font-size:16px;text-decoration:underline}@media (width<=600px){.analytics-sheet.astro-fg2vtww3{width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:18px;bottom:12px;right:12px}}.shortcut-key{min-width:44px;min-height:44px;color:inherit;font:inherit;vertical-align:middle;background:0 0;border:0;justify-content:center;align-items:center;padding:0;display:inline-flex;position:relative}.shortcut-key:hover kbd{background:#ffffff1f}.saved-shortcuts .shortcut-key kbd{color:#fff;text-align:center;min-width:24px;font:12px/1.2 var(--font-code);border:1px solid #bbb;padding:3px 5px;display:inline-block}[data-shortcut-flash] kbd,kbd[data-shortcut-flash]{color:#111!important;background:#fff!important}#site-search [data-shortcut-flash] kbd{color:#fff!important;background:#111!important}.disabled-reason{z-index:140;color:#242321;max-width:min(260px,100vw - 16px);font:16px/1.35 var(--font-ui);pointer-events:none;background:#fffefc;border:1px solid #242321;border-radius:2px;padding:8px 12px;position:fixed;box-shadow:2px 2px #242321}.disabled-reason[hidden]{display:none}.palette-card[data-jump-highlight][tabindex]:focus{outline:2px dashed var(--card-ink,#242321);outline-offset:4px}[data-link-copied]{position:relative}[data-link-copied] .copy-original{visibility:hidden}[data-link-copied] .copy-confirmation{white-space:nowrap;justify-content:center;align-items:center;gap:4px;display:flex;position:absolute;inset:0;margin:0!important;translate:none!important}.copy-confirmation .copy-tick{width:13px;height:13px}.copy-confirmation .copy-tick path{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;animation:.15s ease-out link-tick-draw}.copy-confirmation .copy-tick-ghost{opacity:.4;stroke-width:1px}@keyframes link-tick-draw{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}@media (prefers-reduced-motion:reduce){.copy-confirmation .copy-tick path{animation:none}}.save-feedback{z-index:150;bottom:calc(24px + env(safe-area-inset-bottom) + var(--toast-keyboard,0px));color:#111;width:max-content;max-width:calc(100vw - 32px);font:17px/1.35 var(--font-ui);background:#fffefc;border:2px solid #111;border-radius:2px;align-items:center;gap:12px;padding:10px 16px;display:flex;position:fixed;left:50%;transform:translate(-50%);box-shadow:3px 3px #111}.save-feedback[hidden]{display:none}.save-feedback-action{color:#fff;min-height:44px;font:inherit;background:#111;border:1px solid #111;flex:none;padding:6px 12px}.save-feedback-action kbd{font:11px var(--font-code)}.hex-field{position:relative}.hex-input-wrap{display:inline-block;position:relative}.gradient-save .name-collision{grid-column:1/-1}.hex-field input{padding-right:28px!important}.hex-valid{color:#32734a;font:bold 16px/1 var(--font-code);pointer-events:none;position:absolute;bottom:10px;right:8px}.hex-valid[hidden]{display:none}#maker .hex-valid,.gradient-editor .hex-valid,#color-to-palette .hex-valid{color:#b8ddcd}[data-invalid-flash]{outline-offset:1px;outline:2px solid #d77b56!important}[aria-invalid=true]{border-color:#d77b56!important}[data-all-locked]{outline-offset:4px;outline:1px dashed #fff8;color:#fff!important;opacity:1!important}[data-lock-response] svg{animation:.14s ease-out lock-snap}@keyframes lock-snap{50%{transform:scale(1.15)}}[data-renamed]:after{content:" ✓";color:#32734a}.saved-project{position:relative}.project-confirmation{opacity:0;color:#32734a;font:10px/1 var(--font-code);pointer-events:none;position:absolute;top:-14px;right:0}[data-project-assigned] .project-confirmation{opacity:1}[data-unsaved]:before{content:"";vertical-align:middle;background:currentColor;border-radius:1px;width:5px;height:5px;margin-right:7px;display:inline-block}.name-collision{color:#725735;font:12px/1.4 var(--font-ui);display:block}.name-collision[hidden]{display:none}.gradient-editor .name-collision,#extract .name-collision{color:#e2b978}.inline-retry{min-height:36px;color:inherit;font:inherit;text-underline-offset:3px;background:0 0;border:1px solid;margin-left:6px;padding:3px 8px;text-decoration:underline}.swatch-name{color:var(--swatch-ink);opacity:0;pointer-events:none;text-align:center;font:12px/1.2 var(--font-ui);overflow-wrap:anywhere;position:absolute;top:8px;left:4px;right:4px}html.show-colour-names .swatch-name{opacity:1}.palette-card mark{color:inherit;background:#e6b97440;border-bottom:1px dotted;padding:0}.filter-chips{flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0 18px;display:flex}.filter-chips[hidden]{display:none}.filter-chip,.colour-names-toggle{min-height:36px;color:inherit;font:14px/1.3 var(--font-ui);background:0 0;border:1px solid;border-radius:2px;padding:4px 10px}.filter-chip{overflow-wrap:anywhere;align-items:center;gap:12px;max-width:100%;display:inline-flex}.filter-chip>span{flex:none}[data-active-filters]{min-width:0;max-width:100%}#search-suggestions [role=option]>span{overflow-wrap:anywhere;min-width:0}.colour-names-toggle{min-height:36px;font:16px/1.3 var(--font-ui);border:0;flex:none;align-items:center;gap:7px;padding:4px 0;display:inline-flex}.colour-names-toggle:before{content:"";width:13px;height:13px;font:12px/1 var(--font-ui);border:1px solid;border-radius:1px;place-items:center;display:grid}.colour-names-toggle[aria-pressed=true]:before{content:"✓"}.colour-names-toggle[hidden]{display:none!important}.collection-end{text-align:center;color:var(--muted);font:24px/1.4 var(--font-ui);margin:28px 0}.collection-end[hidden]{display:none}.preview-position{font:11px/1.3 var(--font-code);flex:none}.back-to-top{bottom:calc(20px + env(safe-area-inset-bottom));z-index:60;color:#111;background:#fffefc;border:1px solid #111;border-radius:2px;place-items:center;width:44px;height:44px;display:grid;position:fixed;right:20px;box-shadow:2px 2px #111}.back-to-top[hidden]{display:none}.back-to-top svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;width:24px;height:24px}@media (width<=600px){.save-feedback{bottom:calc(80px + env(safe-area-inset-bottom) + var(--toast-keyboard,0px));max-width:calc(100vw - 32px);font-size:15px}.colour-names-toggle{margin-left:0}}select:focus-visible{outline-offset:3px;outline:3px solid #d77b56}@supports (appearance:base-select){html select:not([multiple]):not([size]),html select:not([multiple]):not([size])::picker(select){appearance:base-select}html select:not([multiple]):not([size]){cursor:pointer;background-image:none;align-items:center;gap:12px;padding-inline-end:10px}html select:not([multiple]):not([size])::picker-icon{color:currentColor;margin-inline-start:auto;transition:rotate .12s}html select:not([multiple]):not([size]):open::picker-icon{rotate:180deg}html select:not([multiple]):not([size])::picker(select){width:max-content;min-width:anchor-size(width);color:#111;color-scheme:light;overscroll-behavior:contain;max-width:calc(100vw - 24px);max-height:min(360px,100dvh - 32px);font:700 14px/1.35 var(--font-code,ui-monospace, Menlo, monospace);background:#fff;border:2px solid #111;border-radius:0;padding:0;overflow:auto;box-shadow:4px 4px #111}html select:not([multiple]):not([size]) option{color:#111;min-height:40px;font:700 14px/1.35 var(--font-code,ui-monospace, Menlo, monospace);white-space:normal;overflow-wrap:anywhere;cursor:pointer;background:#fff;border:0;border-bottom:1px solid #111;gap:12px;padding:10px 14px}html select:not([multiple]):not([size]) option:last-child{border-bottom:0}html select:not([multiple]):not([size]) option:is(:hover,:focus-visible,:checked){color:#fff;background:#111}html select:not([multiple]):not([size]) option:focus-visible{outline-offset:-3px;outline:2px solid #d77b56}html select:not([multiple]):not([size]) option:disabled{color:#777;cursor:default;background:#f5f4f0}html select:not([multiple]):not([size]) option[hidden]{display:none}html select:not([multiple]):not([size]) option::checkmark{color:currentColor}@media (width<=600px){html select:not([multiple]):not([size]) option{min-height:44px}}@media (prefers-reduced-motion:reduce){html select:not([multiple]):not([size])::picker-icon{transition:none}}}::view-transition-group(root){animation-duration:.16s}::view-transition-old(root){animation:.16s ease-out both sheet-page-out}::view-transition-new(root){animation:.16s ease-out both sheet-page-in}@keyframes sheet-page-out{to{opacity:0}}@keyframes sheet-page-in{0%{opacity:0}}@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}.skip-link{z-index:10000;background:var(--frame);color:var(--ink);padding:12px 18px;position:fixed;top:8px;left:8px;transform:translateY(-160%)}.skip-link:focus{outline:2px solid;transform:none}@font-face{font-family:Cabin Sketch;src:url(/fonts/cabin-sketch-bold-latin.woff2)format("woff2");font-style:normal;font-weight:700;font-display:swap}@font-face{font-family:Tool heading fallback;src:local(Arial);size-adjust:92%;font-style:normal;font-weight:400}@font-face{font-family:Patrick Hand;src:url(/fonts/patrick-hand-latin.woff2)format("woff2");font-style:normal;font-weight:400;font-display:swap}:root{--bg:#f1eee8;--paper:#f2f0eb;--surface:#fdfdfb;--frame:#fffefc;--ink:#111;--muted:#727272;--line:#dedbd3;--rail:280px;--bar:104px;--gutter:48px;--black:#000;--on-black:#fff;--dim:#a8a8a8;--retro-bg:#fff;--retro-fg:#000;--retro-line:#000;--retro-rim:#ffffffe6;--card-top:#fff;--card-bottom:#f5f4f0;--card-ink:#242321;--card-muted:#76716a;--card-ok:#4a6756;--card-err:#b14e40;--ease:cubic-bezier(.2, .7, .2, 1);--font-heading:"Cabin Sketch", "Chalkboard SE", sans-serif;--font-tool-heading:"Cabin Sketch", "Tool heading fallback", "Chalkboard SE", sans-serif;--font-ui:"Patrick Hand", "Chalkboard SE", system-ui, sans-serif;--font-code:ui-monospace, Menlo, Consolas, monospace;--shadow-hover:0 2px 2px #0000000d, 0 4px 4px #0000000d, 0 8px 8px #0000000d, 0 16px 16px #0000000f, 0 32px 32px #00000014;--shadow:0 1px 1px #0000000a, 0 2px 2px #0000000a, 0 4px 4px #0000000a, 0 8px 8px #0000000a, 0 16px 16px #0000000a;font:18px/1.45 var(--font-ui)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--ink);font:inherit;margin:0;transition:background .4s,color .4s}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline-offset:3px;outline:3px solid #d77b56}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.tool-description{max-width:65ch;color:var(--dim);margin:0 0 22px;font-size:16px}.wrap{max-width:1340px;padding:0 var(--gutter);margin:0 auto}.grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:56px 40px;display:grid}#grid{scroll-margin-top:104px}.kicker{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;font:700 12px system-ui,sans-serif}.cats{flex-wrap:wrap;gap:6px 14px;font-size:13px;display:flex}.cats a{color:#444}.cats a:hover{text-underline-offset:3px;text-decoration:underline}.cats a[aria-current]{color:var(--ink);font-weight:600}@media (width<=900px){:root{--rail:24px;--bar:64px;--gutter:24px}html{scroll-padding-top:104px}#grid{scroll-margin-top:0}}@media (width<=600px){.grid{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}