:root{--bg:#ffffff;--surface:#fafafa;--surface-2:#f4f4f5;--fg:#18181b;--muted:#71717a;--faint:#a1a1aa;--border:#e8e8eb;--accent:#f97316;--accent-soft:#fff1e8;--canvas:#f9f9fb;--radius:14px;--radius-sm:10px;--header-h:60px;--max-w:1200px;--sidebar-w:264px;--shadow:0 1px 2px rgba(24,24,27,0.04),0 8px 24px rgba(24,24,27,0.06)}:root[data-theme=dark]{--bg:#0b0b0d;--surface:#141416;--surface-2:#1c1c20;--fg:#fafafa;--muted:#a1a1aa;--faint:#71717a;--border:#27272a;--accent:#fb923c;--accent-soft:#2a1a0e;--canvas:#15151a;--shadow:0 1px 2px rgba(0,0,0,0.4),0 8px 24px rgba(0,0,0,0.5)}*{box-sizing:border-box}body,html{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}button{font:inherit;cursor:pointer;color:inherit}::selection{background:var(--accent-soft)}.header{position:-webkit-sticky;position:sticky;top:0;z-index:30;height:var(--header-h);background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:saturate(160%) blur(12px);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--border)}.header-inner{max-width:var(--max-w);margin:0 auto;height:100%;gap:16px;padding:0 24px}.header-inner,.logo{display:flex;align-items:center}.logo{gap:9px;font-weight:700;font-size:17px;letter-spacing:-.02em;white-space:nowrap}.logo-mark{display:block;border-radius:7px}.logo span{color:var(--accent)}.menu-btn{display:none;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--fg);transition:background .12s,border-color .12s}.menu-btn:hover{background:var(--surface-2)}.sidebar-backdrop{display:none;position:fixed;inset:var(--header-h) 0 0 0;z-index:44;background:rgba(9,9,11,.45);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.toolbar{display:flex;align-items:center;gap:16px;margin-bottom:16px}.search{position:relative;flex:1 1;min-width:0}.search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--faint);pointer-events:none}.search input{width:100%;height:44px;padding:0 16px 0 42px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--fg);outline:none;font-size:14px;transition:border-color .15s,background .15s,box-shadow .15s}.search input::placeholder{color:var(--faint)}.search input:focus{border-color:var(--accent);background:var(--bg);box-shadow:0 0 0 3px var(--accent-soft)}.count{font-size:13px;white-space:nowrap;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.count,.ghlink{color:var(--muted)}.ghlink{margin-left:auto;display:inline-flex;align-items:center;transition:color .15s}.ghlink:hover{color:var(--fg)}.shell{max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:var(--sidebar-w) 1fr;align-items:start}.sidebar{position:-webkit-sticky;position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));overflow-y:auto;padding:24px 22px;border-right:1px solid var(--border)}.main{padding:24px;min-width:0}.customizer{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-bottom:24px;box-shadow:var(--shadow)}.cz-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.cz-header h3{margin:0;font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--fg)}.cz-reset{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--muted);transition:background .12s,color .12s}.cz-reset:hover{background:var(--surface-2);color:var(--fg)}.cz-reset:active{transform:scale(.92)}.cz-reset-icon{display:inline-flex}.cz-reset-icon.spin{animation:cz-spin .5s cubic-bezier(.34,1.56,.64,1)}@keyframes cz-spin{0%{transform:rotate(0)}to{transform:rotate(-1turn)}}.cz-field{margin-bottom:16px}.cz-field:last-child{margin-bottom:0}.cz-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.cz-row label{font-size:13px;font-weight:500;color:var(--fg)}.cz-val{font-size:13px;color:var(--muted);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.cz-color{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:4px 8px 4px 4px}.cz-color-chip{position:relative;width:28px;height:28px;border-radius:7px;overflow:hidden;border:1px solid color-mix(in srgb,var(--fg) 12%,transparent)}.cz-color-chip input[type=color]{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);border:0;padding:0;background:none;cursor:pointer}.cz-hex{width:86px;border:0;background:transparent;color:var(--fg);outline:none;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;text-transform:uppercase;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.cz-range{display:block;width:100%;accent-color:var(--accent)}.cz-seg{display:flex;width:100%;background:var(--surface-2);border-radius:10px;padding:3px}.cz-seg button{flex:1 1;border:0;background:transparent;padding:7px 8px;font-size:13px;border-radius:7px;color:var(--muted);text-transform:capitalize;transition:color .15s,background .15s}.cz-seg button[aria-pressed=true]{background:var(--bg);color:var(--fg);box-shadow:0 1px 2px rgba(0,0,0,.08)}.panel{margin-bottom:26px}.panel:last-child{margin-bottom:0}.panel h3{margin:0 0 14px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}.cats{display:flex;flex-direction:column;gap:1px;list-style:none;margin:0;padding:0}.cats button{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;background:transparent;padding:7px 10px;border-radius:8px;font-size:13.5px;color:var(--fg);text-transform:capitalize;transition:background .12s,color .12s}.cats button:hover{background:var(--surface-2)}.cats button[aria-pressed=true]{background:var(--accent-soft);color:var(--accent);font-weight:600}.cats .num{font-size:11px;color:var(--faint);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.cats button[aria-pressed=true] .num{color:var(--accent)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));grid-gap:8px;gap:8px}.tile{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--canvas);color:var(--fg);overflow:hidden;transition:border-color .12s,transform .12s,box-shadow .12s}.tile:hover{border-color:color-mix(in srgb,var(--accent) 60%,var(--border));transform:translateY(-2px);box-shadow:var(--shadow)}.tile .name{position:absolute;left:0;right:0;bottom:0;padding:5px 6px;font-size:10px;line-height:1.2;color:var(--muted);background:linear-gradient(to top,var(--canvas) 40%,transparent);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s}.tile:hover .name{opacity:1;transform:translateY(0)}.empty{grid-column:1/-1;color:var(--muted);padding:80px 0;text-align:center;font-size:15px}.overlay{position:fixed;inset:0;z-index:50;background:rgba(9,9,11,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:20px;animation:fade .15s ease}@keyframes fade{0%{opacity:0}}.modal{background:var(--bg);border:1px solid var(--border);border-radius:18px;width:min(520px,100%);max-height:90vh;overflow:auto;padding:24px;box-shadow:var(--shadow);animation:pop .16s cubic-bezier(.16,1,.3,1)}@keyframes pop{0%{opacity:0;transform:scale(.97) translateY(8px)}}.modal header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.modal h2{margin:0;font-size:18px;letter-spacing:-.01em}.preview{display:flex;align-items:center;justify-content:center;height:180px;border:1px solid var(--border);border-radius:var(--radius);background:var(--canvas);color:var(--fg)}.actions,.preview{margin-bottom:18px}.actions{display:grid;grid-template-columns:1fr 1fr;grid-gap:8px;gap:8px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--border);background:var(--bg);border-radius:var(--radius-sm);padding:9px 14px;font-size:13px;font-weight:500;color:var(--fg);transition:border-color .12s,background .12s}.btn:hover{border-color:var(--faint);background:var(--surface)}.btn.primary{background:var(--fg);color:var(--bg);border-color:var(--fg)}.btn.primary:hover{opacity:.9;background:var(--fg)}.code{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.6;overflow-x:auto;white-space:pre;color:var(--fg);margin:0 0 16px}.meta{font-size:13px;color:var(--muted);line-height:1.7;margin:0}.meta strong{color:var(--fg);font-weight:500}.close{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:8px;background:transparent;font-size:22px;color:var(--muted);line-height:1;transition:background .12s,color .12s}.close:hover{background:var(--surface-2);color:var(--fg)}@media (max-width:860px){.shell{grid-template-columns:1fr}.menu-btn{display:inline-flex}.sidebar{position:fixed;top:var(--header-h);left:0;bottom:0;height:auto;width:min(300px,82vw);z-index:45;background:var(--bg);border-right:1px solid var(--border);border-bottom:0;transform:translateX(-100%);transition:transform .25s ease}.sidebar.open{transform:translateX(0);box-shadow:var(--shadow)}.sidebar-backdrop{display:block}}@media (max-width:520px){.search{max-width:none}}