:root{--lightningcss-light:initial;--lightningcss-dark: ;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:#f4f6fb;--panel:#fff;--text:#111827;--muted:#6b7280;--border:#dbe1ea;--accent:#2563eb;--shadow:0 16px 40px #0f172a14;color:var(--text);background:radial-gradient(circle at top,#eef4ff,var(--bg)42%);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}.app{width:min(1400px,100% - 2rem);margin:0 auto;padding:2rem 0 4rem}.header{gap:1.5rem;margin-bottom:1rem;display:grid}.eyebrow{color:var(--accent);letter-spacing:.08em;text-transform:uppercase;margin:0 0 .25rem;font-size:.85rem;font-weight:700}h1,h2,h3,p{margin:0}h1{font-size:max(2rem,min(4vw,3rem));line-height:1.05}.subtitle{color:var(--muted);max-width:60ch;margin-top:.75rem}.controls{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;display:grid}.control{gap:.5rem;font-weight:600;display:grid}.control input[type=search],.control input[type=text]{border:1px solid var(--border);background:var(--panel);border-radius:12px;width:100%;padding:.85rem 1rem}.color-input{grid-template-columns:auto 1fr;align-items:stretch;gap:.75rem;display:grid}.color-swatch{border:2px solid var(--border);background:var(--panel);cursor:pointer;border-radius:12px;flex-shrink:0;width:3.25rem;height:3.25rem;transition:border-color .16s,box-shadow .16s,transform .16s;display:block;position:relative}.color-swatch:hover{border-color:color-mix(in srgb,var(--accent)35%,var(--border));transform:translateY(-1px)}.color-swatch:has(.color-swatch-input:focus-visible){border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent)25%,transparent)}.color-swatch-preview{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text)12%,transparent);border-radius:7px;position:absolute;top:5px;bottom:5px;left:5px;right:5px}.color-swatch-input{opacity:0;cursor:pointer;border:0;width:100%;height:100%;margin:0;padding:0;position:absolute;top:0;bottom:0;left:0;right:0}.results-count{color:var(--muted);margin:1rem 0 1.5rem}.grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;display:grid}.card{border:1px solid var(--border);background:var(--panel);box-shadow:var(--shadow);text-align:left;cursor:pointer;content-visibility:auto;contain-intrinsic-size:260px;border-radius:18px;gap:.75rem;padding:1rem;transition:transform .16s,border-color .16s;display:grid}.card:hover{border-color:color-mix(in srgb,var(--accent)35%,var(--border));transform:translateY(-2px)}.card-art{background:linear-gradient(#f8fafc,#eef2ff);border-radius:14px;place-items:center;min-height:150px;padding:.5rem;display:grid}.card-art-inner{place-items:center;width:100%;min-height:140px;display:grid}.card-art-skeleton{background:linear-gradient(90deg,color-mix(in srgb,var(--border)70%,transparent)0%,color-mix(in srgb,var(--border)35%,transparent)50%,color-mix(in srgb,var(--border)70%,transparent)100%);background-size:200% 100%;border-radius:12px;width:72%;height:100px;animation:1.4s ease-in-out infinite card-art-shimmer}@keyframes card-art-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.card-body{gap:.25rem;display:grid}.card-body strong{font-size:.95rem}.card-body span{color:var(--muted);font-size:.85rem}.empty-state{text-align:center;color:var(--muted);padding:3rem 0}.modal-backdrop{z-index:20;background:#0f172a73;place-items:center;padding:1rem;display:grid;position:fixed;top:0;bottom:0;left:0;right:0}.modal{background:var(--panel);width:min(760px,100%);max-height:calc(100vh - 2rem);box-shadow:var(--shadow);border-radius:24px;padding:1.5rem;overflow:auto}.modal-header,.snippet-header{justify-content:space-between;align-items:start;gap:1rem;display:flex}.modal-preview{background:linear-gradient(#f8fafc,#eef2ff);border-radius:18px;margin:1.25rem 0;padding:1rem}.snippet-block{margin-top:1rem}.snippet-block pre{color:#e2e8f0;background:#0f172a;border-radius:14px;margin:.75rem 0 0;padding:1rem;overflow:auto}.ghost-button{border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:999px;padding:.55rem .9rem}.footer{border:1px dashed var(--border);background:color-mix(in srgb,var(--panel)80%,transparent);border-radius:18px;grid-template-columns:1fr auto;align-items:center;gap:1rem;margin-top:3rem;padding:1.25rem;display:grid}.footer-preview{width:180px}@media (max-width:720px){.footer{grid-template-columns:1fr}}@media (prefers-color-scheme:dark){:root{--bg:#0b1220;--panel:#111827;--text:#f8fafc;--muted:#94a3b8;--border:#243041;--shadow:0 16px 40px #00000059;background:radial-gradient(circle at top,#172554,var(--bg)42%)}.card-art,.modal-preview{background:linear-gradient(#111827,#1e293b)}}