:root{--bg:#f4f5f8;--surface:#fff;--surface-2:#f0f1f5;--border:#d9dce5;--text:#1d2030;--text-muted:#5b6075;--accent:#6d3fd8;--accent-contrast:#fff;--accent-soft:#ece5fd;--error:#b42318;--error-soft:#fde8e7;--success:#17773a;--focus:#2563eb;--checker-a:#fff;--checker-b:#d5d8e0;--icon-filter:none;--radius:10px;--shadow:0 1px 2px #10121b0f, 0 4px 16px #10121b0f;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:var(--text);background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.5}@media (prefers-color-scheme:dark){:root{--bg:#16171f;--surface:#1f2029;--surface-2:#282a36;--border:#3a3d4d;--text:#ecedf3;--text-muted:#a3a7bb;--accent:#bd93f9;--accent-contrast:#1d1530;--accent-soft:#3a2f55;--error:#ff8a80;--error-soft:#4a2323;--success:#6fdc8c;--focus:#8ab4ff;--checker-a:#3a3c4a;--checker-b:#2a2b36;--icon-filter:invert(1);--shadow:none;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*,:before,:after{box-sizing:border-box}body{background:var(--bg);min-height:100vh;margin:0}a{color:var(--accent)}code{font-family:ui-monospace,Cascadia Code,Consolas,monospace;font-size:.875em}:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.skip-link{background:var(--surface);border-radius:var(--radius);z-index:10;padding:.5rem 1rem;position:absolute;top:-4rem;left:1rem}.skip-link:focus{top:1rem}.site-header{align-items:center;gap:1rem;max-width:1600px;margin:0 auto;padding:1.5rem 1rem 1rem;display:flex}.site-logo{border-radius:9px;flex:none}.site-title{margin:0;font-size:clamp(1.4rem,2.5vw,1.9rem);line-height:1.2}.site-description{color:var(--text-muted);max-width:70ch;margin:.25rem 0 0}.site-footer{max-width:1600px;color:var(--text-muted);margin:0 auto;padding:1rem 1rem 2rem;font-size:.875rem}.layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"catalogue""preview""editor";gap:1rem;max-width:1600px;margin:0 auto;padding:0 1rem;display:grid}.catalogue-panel{grid-area:catalogue}.editor-panel{grid-area:editor}.preview-panel{grid-area:preview}@media (width>=800px){.layout{grid-template-columns:minmax(280px,340px) minmax(0,1fr);grid-template-areas:"catalogue preview""catalogue editor";align-items:start}.catalogue-panel{position:sticky;top:1rem}}@media (width>=1200px){.layout{grid-template-columns:minmax(300px,360px) minmax(0,1fr) minmax(0,1fr);grid-template-areas:"catalogue editor preview"}}.app-placeholder{border:1px dashed var(--border);border-radius:var(--radius);max-width:1600px;min-height:70vh;color:var(--text-muted);place-items:center;margin:0 1rem;display:grid}.noscript{max-width:1600px;color:var(--error);margin:1rem auto;padding:0 1rem}.content{gap:1rem;max-width:1600px;margin:1rem auto 0;padding:0 1rem;display:grid}@media (width>=1000px){.content{grid-template-columns:repeat(2,minmax(0,1fr))}#faq,#about{grid-column:1/-1}}.content-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);min-width:0;padding:1rem 1.25rem}.content-section h2{margin:0 0 .75rem;font-size:1.2rem}.content-section p,.content-section li{max-width:75ch}.content-section .steps li{margin-bottom:.4rem}.content-section .note{color:var(--text-muted);font-size:.9rem}.table-wrap{overflow-x:auto}.content-section table{border-collapse:collapse;width:100%;font-size:.9rem}.content-section th,.content-section td{border-bottom:1px solid var(--border);text-align:left;white-space:nowrap;padding:.45rem .6rem}.content-section th{color:var(--text-muted);font-weight:600}#faq{gap:0 2rem;display:grid}@media (width>=1000px){#faq{grid-template-columns:repeat(2,minmax(0,1fr))}#faq h2{grid-column:1/-1}}.faq-item h3{margin:.75rem 0 .25rem;font-size:1rem}.faq-item p{color:var(--text-muted);margin:0 0 .5rem}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);min-width:0;padding:1rem}.editor-panel:focus{outline:none}.panel-title{margin:0 0 .75rem;font-size:1.1rem}.subheading{margin:1.25rem 0 .5rem;font-size:.95rem}.catalogue{flex-direction:column;min-height:0;display:flex}.catalogue-count{min-height:1.5em;color:var(--text-muted);margin:.4rem 0 .5rem;font-size:.85rem}.catalogue-scroll{overscroll-behavior:contain;max-height:55vh;margin:0 -.5rem;padding:.25rem .5rem;overflow-y:auto}@media (width>=800px){.catalogue-scroll{max-height:calc(100vh - 14rem)}}.icon-grid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:.375rem;margin:0;padding:0;list-style:none;display:grid}.icon-cell{content-visibility:auto;contain-intrinsic-size:auto 78px}.icon-button{background:var(--surface-2);width:100%;color:var(--text);font:inherit;cursor:pointer;border:1px solid #0000;border-radius:8px;flex-direction:column;align-items:center;gap:.375rem;padding:.6rem .25rem .45rem;display:flex}.icon-button:hover{border-color:var(--border)}.icon-button.is-selected{background:var(--accent-soft);border-color:var(--accent)}.icon-image{width:24px;height:24px;filter:var(--icon-filter)}.icon-name{text-overflow:ellipsis;white-space:nowrap;max-width:100%;color:var(--text-muted);font-size:.7rem;overflow:hidden}.state-message{color:var(--text-muted);flex-direction:column;align-items:flex-start;gap:.5rem;margin:.5rem 0;display:flex}.state-message.is-error{color:var(--error)}.state-message p{margin:0}.selected-icon{color:var(--text-muted);margin:-.25rem 0 1rem}.selected-set{font-size:.85rem}.selected-icon strong{color:var(--text);font-family:ui-monospace,Cascadia Code,Consolas,monospace}.fieldset{border:1px solid var(--border);border-radius:var(--radius);margin:0 0 1rem;padding:.75rem .9rem .25rem}.fieldset legend{padding:0 .35rem;font-weight:600}.fieldset-note{color:var(--text-muted);margin:0 0 .75rem;font-size:.85rem}.field{margin-bottom:.6rem}.field.is-disabled{opacity:.6}.field-head{justify-content:space-between;align-items:baseline;display:flex}.field-label{margin-bottom:.25rem;font-size:.9rem;font-weight:600;display:block}.field-unit{color:var(--text-muted);font-size:.8rem}.field-hint,.field-message{color:var(--text-muted);margin:.25rem 0 0;font-size:.8rem}.field-message:empty{display:none}.field-message.is-error{color:var(--error);font-weight:500}.text-input{border:1px solid var(--border);background:var(--surface);width:100%;min-height:2.4rem;color:var(--text);font:inherit;border-radius:8px;padding:.4rem .6rem}.text-input[aria-invalid=true]{border-color:var(--error);background:var(--error-soft)}.text-input:disabled{cursor:not-allowed}.colour-row{gap:.5rem;display:flex}.colour-picker{border:1px solid var(--border);background:var(--surface);cursor:pointer;border-radius:8px;flex:none;width:2.6rem;height:2.4rem;padding:.15rem}.number-row{align-items:center;gap:.75rem;display:flex}.slider{min-width:0;accent-color:var(--accent);flex:1}.number-input{text-align:right;font-variant-numeric:tabular-nums;flex:none;width:6rem}.toggle{cursor:pointer;align-items:center;gap:.5rem;margin:.25rem 0 .75rem;display:inline-flex}.toggle input{width:1.1rem;height:1.1rem;accent-color:var(--accent)}.actions{flex-wrap:wrap;gap:.75rem;display:flex}.button{border:1px solid var(--border);min-height:2.6rem;font:inherit;cursor:pointer;border-radius:8px;justify-content:center;align-items:center;gap:.5rem;padding:.5rem 1.1rem;font-weight:600;display:inline-flex}.button-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast);flex:1}.button-secondary{background:var(--surface-2);color:var(--text)}.button:disabled{opacity:.55;cursor:not-allowed}.status{min-height:1.5em;margin:.5rem 0 0;font-size:.9rem}.status.is-success{color:var(--success)}.status.is-error{color:var(--error)}.segmented{border:1px solid var(--border);border-radius:8px;display:inline-flex;overflow:hidden}.segmented button{background:var(--surface);color:var(--text);font:inherit;cursor:pointer;border:0;padding:.3rem .7rem;font-size:.85rem}.segmented button[aria-pressed=true]{background:var(--accent);color:var(--accent-contrast)}.set-switch{margin-bottom:.75rem}.segmented-wide{display:flex}.segmented-wide button{flex:1;padding:.4rem .5rem}.segmented-detail{opacity:.8;font-size:.75rem;display:block}.spinner{border:2px solid;border-right-color:#0000;border-radius:50%;width:1em;height:1em;animation:.8s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2.4s}}.checkerboard{background-color:var(--checker-a);background-image:conic-gradient(var(--checker-b) 25%, transparent 0 50%, var(--checker-b) 0 75%, transparent 0);background-size:16px 16px}.preview-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.75rem;display:flex}.preview-head .panel-title{margin:0}.large-preview{aspect-ratio:1;border-radius:6px;width:min(100%,320px);margin:0 auto;position:relative;overflow:hidden}.large-canvas{width:100%;height:100%;display:block}.preview-overlay{text-align:center;background:color-mix(in srgb, var(--surface) 85%, transparent);flex-direction:column;justify-content:center;align-items:center;gap:.5rem;padding:1rem;display:flex;position:absolute;inset:0}.preview-overlay.is-error{color:var(--error)}.preview-overlay p{margin:0}.preview-note{text-align:center;color:var(--text-muted);margin:.5rem 0 0;font-size:.8rem}.thumbnails{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:.75rem .5rem;margin:0;padding:0;list-style:none;display:grid}.thumbnail{text-align:center;flex-direction:column;align-items:center;gap:.25rem;display:flex}.thumbnail-frame{border-radius:6px;place-items:center;width:76px;height:76px;display:grid}.thumbnail-canvas{width:64px;height:64px;display:block}.thumbnail-canvas.is-pixelated{image-rendering:pixelated}.thumbnail-label{font-size:.8rem;font-weight:600}.thumbnail-path{color:var(--text-muted);overflow-wrap:anywhere;font-size:.7rem}.steps{margin:0 0 .5rem;padding-left:1.25rem}