:root {
  --paper: #f3f0e8;
  --paper-2: #e9e5db;
  --ink: #171914;
  --muted: #686b62;
  --line: #cfcbc0;
  --card: rgba(250, 248, 242, 0.78);
  --acid: #d9ff55;
  --violet: #6558f5;
  --violet-soft: #dedafb;
  --shadow: 0 22px 55px rgba(38, 38, 27, 0.08);
  --radius: 16px;
}

[data-theme="dark"] {
  --paper: #151711;
  --paper-2: #1d2018;
  --ink: #f1eee5;
  --muted: #a8aa9e;
  --line: #363930;
  --card: rgba(31, 34, 26, 0.86);
  --acid: #cbf54a;
  --violet: #9288ff;
  --violet-soft: #332f59;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Manrope", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
button { color: inherit; }
a { color: inherit; }
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .17;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.topbar {
  height: 76px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(22px, 4vw, 68px); border-bottom: 1px solid var(--line); position: relative; z-index: 5;
}
.brand { display: flex; gap: 12px; align-items: center; text-decoration: none; font-weight: 800; letter-spacing: -.04em; font-size: 19px; }
.brand small { font-family: "DM Mono"; font-weight: 500; font-size: 9px; letter-spacing: .08em; color: var(--muted); border-left: 1px solid var(--line); padding-left: 12px; }
.brand-mark { display: grid; grid-template-columns: repeat(3, 5px); gap: 2px; align-items: end; width: 19px; height: 22px; transform: skewY(-8deg); }
.brand-mark i { background: var(--ink); display: block; border-radius: 1px; }
.brand-mark i:nth-child(1) { height: 12px; }.brand-mark i:nth-child(2) { height: 19px; }.brand-mark i:nth-child(3) { height: 15px; }
.top-actions { display: flex; align-items: center; gap: 18px; }
.text-button { border: 0; background: none; cursor: pointer; font-size: 12px; font-weight: 700; }
.status-pill { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 7px 11px; font: 10px "DM Mono"; text-transform: uppercase; letter-spacing: .04em; }
.status-pill i { width: 6px; height: 6px; border-radius: 50%; background: #7ba52a; box-shadow: 0 0 0 4px rgba(123,165,42,.12); }
.status-pill.loading i { animation: pulse 1s infinite; background: var(--violet); }
.icon-button { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; display: grid; place-items: center; }
.icon-button svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }

.hero { padding: clamp(65px, 8vw, 118px) clamp(22px, 6.5vw, 108px) 54px; border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; width: 480px; height: 480px; border-radius: 50%; right: -190px; top: -210px; border: 1px solid var(--line); box-shadow: 0 0 0 44px transparent, 0 0 0 45px var(--line), 0 0 0 90px transparent, 0 0 0 91px var(--line); opacity: .55; pointer-events: none; }
.eyebrow { display: flex; gap: 9px; margin-bottom: 22px; }
.eyebrow span { font: 9px "DM Mono"; letter-spacing: .1em; padding: 5px 8px; border: 1px solid var(--line); border-radius: 3px; }
.eyebrow span:first-child { background: var(--acid); color: #171914; border-color: #a5c52e; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 50px; align-items: end; position: relative; z-index: 1; }
h1 { margin: 0; font-size: clamp(48px, 7vw, 100px); line-height: .91; letter-spacing: -.07em; max-width: 980px; font-weight: 700; }
h1 em { font-family: Georgia, serif; font-weight: 400; color: var(--violet); }
.hero-grid > div:first-child > p { color: var(--muted); font-size: clamp(14px, 1.5vw, 18px); max-width: 620px; line-height: 1.65; margin: 28px 0 0; }
.hero-stat { border-left: 1px solid var(--line); padding-left: 26px; padding-bottom: 3px; }
.hero-stat strong { display: block; font-size: 38px; letter-spacing: -.055em; }
.hero-stat > span { font: 10px "DM Mono"; color: var(--muted); text-transform: uppercase; letter-spacing: .09em; }
.stat-rule { height: 4px; background: var(--paper-2); margin: 18px 0; border-radius: 4px; overflow: hidden; }.stat-rule i { display: block; width: 72%; height: 100%; background: var(--violet); }
.hero-stat small { font-size: 11px; line-height: 1.7; color: var(--muted); }.hero-stat small b { color: var(--ink); }
.search-shell { max-width: 1120px; height: 68px; background: var(--ink); color: var(--paper); border-radius: 7px; display: flex; align-items: center; padding: 0 18px 0 23px; margin-top: 47px; box-shadow: var(--shadow); position: relative; z-index: 2; }
.search-shell svg, .mini-search svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; flex: none; }
.search-shell input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: inherit; padding: 0 18px; font-size: 16px; }
.search-shell input::placeholder { color: color-mix(in srgb, var(--paper), transparent 42%); }
.search-shell kbd { display: flex; gap: 3px; align-items: center; font: 11px "DM Mono"; color: color-mix(in srgb, var(--paper), transparent 25%); border: 1px solid color-mix(in srgb, var(--paper), transparent 72%); border-radius: 4px; padding: 5px 8px; }
.search-shell kbd span { font-size: 14px; }.search-shell > button { display: none; background: none; border: 0; color: var(--paper); font: 10px "DM Mono"; text-transform: uppercase; cursor: pointer; }
.search-shell.has-value kbd { display: none; }.search-shell.has-value > button { display: block; }
.search-suggestions { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 25px 70px rgba(15,16,12,.2); padding: 7px; max-height: 390px; overflow-y: auto; }
.search-suggestions[hidden] { display: none; }.suggestion-label { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 6px; color: var(--muted); font: 8px "DM Mono"; letter-spacing: .1em; text-transform: uppercase; }.suggestion-label kbd { display: inline-block; color: var(--muted); border-color: var(--line); padding: 2px 5px; }
.suggestion-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; border: 0; border-radius: 5px; background: transparent; color: var(--ink); padding: 8px 10px; text-align: left; cursor: pointer; }.suggestion-item:hover, .suggestion-item.active { background: var(--paper-2); }.suggestion-mark { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 6px; background: var(--violet-soft); color: var(--violet); font: 10px "DM Mono"; }.suggestion-item span:nth-child(2) { min-width: 0; }.suggestion-item b { display: block; font-size: 11px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.suggestion-item small { display: block; margin-top: 2px; color: var(--muted); font: 8px "DM Mono"; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.suggestion-item > em { color: var(--muted); font: 8px "DM Mono"; font-style: normal; white-space: nowrap; }.suggestion-tip { margin: 5px 7px 2px; padding: 9px 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }.suggestion-tip b { color: var(--ink); }
.quick-searches { max-width: 1120px; display: flex; align-items: center; gap: 7px; margin-top: 13px; flex-wrap: wrap; }
.quick-searches span { color: var(--muted); font: 9px "DM Mono"; text-transform: uppercase; margin-right: 2px; }.quick-searches button { border: 1px solid var(--line); border-radius: 999px; background: transparent; font-size: 10px; padding: 5px 9px; cursor: pointer; }
.quick-searches button:hover { border-color: var(--ink); }

.creator-shelf { padding: clamp(60px, 7vw, 100px) clamp(22px, 4vw, 68px); border-bottom: 1px solid var(--line); background: var(--paper-2); }
.creator-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 410px); align-items: end; gap: 40px; margin-bottom: 38px; }
.creator-kicker { display: inline-flex; align-items: center; gap: 8px; font: 9px "DM Mono"; letter-spacing: .12em; color: var(--violet); margin-bottom: 18px; }.creator-kicker i { width: 7px; height: 7px; background: var(--acid); border: 1px solid #9fb82f; border-radius: 50%; box-shadow: 0 0 0 5px color-mix(in srgb, var(--acid), transparent 75%); }
.creator-intro h2 { font-size: clamp(38px, 5.5vw, 76px); line-height: .95; letter-spacing: -.065em; margin: 0; }.creator-intro h2 em { color: var(--violet); font-family: Georgia, serif; font-weight: 400; }.creator-intro > p { font-size: 13px; line-height: 1.7; color: var(--muted); max-width: 390px; margin: 0 0 5px auto; }
.creator-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.creator-card { min-height: 290px; padding: 18px; text-decoration: none; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; position: relative; overflow: hidden; background: var(--card); transition: background .2s ease, transform .2s ease; }
.creator-card:hover { background: var(--paper); z-index: 2; box-shadow: var(--shadow); transform: translateY(-3px); }.creator-card::after { content: ""; width: 170px; height: 170px; border: 1px solid var(--line); border-radius: 50%; position: absolute; right: -85px; top: -100px; transition: transform .35s ease; }.creator-card:hover::after { transform: scale(1.15); }
.creator-card--hero { grid-column: span 2; grid-row: span 2; min-height: 580px; background: var(--violet); color: #f5f2e9; }.creator-card--hero:hover { background: color-mix(in srgb, var(--violet), #000 8%); }.creator-card--hero::before { content: "X1VI"; position: absolute; right: -20px; bottom: -38px; font-size: clamp(110px, 16vw, 240px); letter-spacing: -.09em; font-weight: 800; color: rgba(255,255,255,.07); }.creator-card--hero::after { width: 400px; height: 400px; right: -190px; top: -220px; border-color: rgba(255,255,255,.25); box-shadow: 0 0 0 55px transparent, 0 0 0 56px rgba(255,255,255,.13); }
.creator-index { font: 8px "DM Mono"; letter-spacing: .08em; color: var(--muted); }.creator-card--hero .creator-index { color: rgba(255,255,255,.65); }.creator-arrow { position: absolute; right: 18px; top: 15px; font-size: 21px; transition: transform .2s; }.creator-card:hover .creator-arrow { transform: translate(3px,-3px); }
.creator-card > div:last-child { margin-top: auto; position: relative; z-index: 1; }.creator-icon { margin-top: 34px; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--acid); color: #171914; font: 11px "DM Mono"; letter-spacing: .05em; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }.creator-card:nth-child(3n) .creator-icon { background: var(--violet-soft); color: var(--violet); }.creator-card:nth-child(4n) .creator-icon { background: #ffd4b8; color: #7f351b; }
.creator-category { font: 8px "DM Mono"; text-transform: uppercase; letter-spacing: .08em; color: var(--violet); }.creator-card--hero .creator-category { color: var(--acid); }.creator-card h3 { margin: 8px 0 9px; font-size: 20px; line-height: 1.02; letter-spacing: -.045em; }.creator-card--hero h3 { font-size: clamp(54px, 7vw, 92px); margin: 13px 0 18px; }.creator-card p { color: var(--muted); font-size: 10px; line-height: 1.55; margin: 0; max-width: 310px; }.creator-card--hero p { color: rgba(255,255,255,.72); font-size: 12px; }
.catalog { display: grid; grid-template-columns: 290px minmax(0, 1fr); min-height: 750px; }
.filter-panel { border-right: 1px solid var(--line); padding: 28px 24px 60px clamp(22px, 4vw, 64px); }
.filter-heading, .results-toolbar { display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.filter-heading span { font: 10px "DM Mono"; letter-spacing: .12em; }.filter-heading button, #clearFilters { font-size: 10px; color: var(--muted); border: 0; background: none; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.filter-group { border-top: 1px solid var(--line); padding: 13px 0; }.filter-group:first-of-type { margin-top: 15px; }
.filter-toggle { border: 0; background: none; padding: 3px 0; width: 100%; display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 12px; cursor: pointer; }.filter-toggle i { font-style: normal; color: var(--muted); font-weight: 400; }
.filter-content { padding: 12px 0 2px; }.filter-content.collapsed { display: none; }
.topic-option { display: flex; align-items: center; gap: 9px; padding: 5px 0; cursor: pointer; font-size: 11px; color: var(--muted); position: relative; }.topic-option:hover { color: var(--ink); }.topic-option input, .check-stack input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }.topic-option .box, .check-stack label span { width: 14px; height: 14px; border: 1px solid var(--line); border-radius: 3px; flex: none; display: grid; place-items: center; }.topic-option:focus-within .box, .check-stack label:focus-within span { outline: 2px solid var(--violet); outline-offset: 2px; }.topic-option input:checked + .box, .check-stack input:checked + span { background: var(--ink); border-color: var(--ink); }.topic-option input:checked + .box::after, .check-stack input:checked + span::after { content: ""; width: 6px; height: 3px; border-left: 1.5px solid var(--paper); border-bottom: 1.5px solid var(--paper); transform: rotate(-45deg) translateY(-1px); }.topic-option b { font-weight: 500; margin-left: auto; font: 9px "DM Mono"; color: var(--muted); }
.topic-option.all { color: var(--ink); font-weight: 700; margin-bottom: 3px; }
.mini-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 5px; height: 37px; padding: 0 10px; background: var(--card); }.mini-search svg { width: 15px; color: var(--muted); }.mini-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 10px; }
.check-stack { display: grid; gap: 9px; }.check-stack label { display: flex; align-items: center; gap: 9px; cursor: pointer; color: var(--muted); font-size: 10px; position: relative; }.check-stack input[type="radio"] + span { border-radius: 50%; }.check-stack input[type="radio"]:checked + span::after { width: 4px; height: 4px; background: var(--paper); border: 0; border-radius: 50%; transform: none; }
.filter-note { display: flex; gap: 9px; background: var(--violet-soft); padding: 13px; border-radius: 6px; margin-top: 19px; }.filter-note i { font: 10px Georgia; border: 1px solid var(--violet); color: var(--violet); width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; flex: none; }.filter-note p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; }

.results-area { padding: 25px clamp(22px, 4vw, 58px) 80px; min-width: 0; }
.results-toolbar { gap: 30px; align-items: flex-start; border-bottom: 1px solid var(--line); padding-bottom: 18px; }.results-toolbar p { margin: 0; font-size: 12px; font-weight: 700; }.active-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }.active-chips:empty { display: none; }.active-chips button { border: 1px solid var(--line); border-radius: 999px; background: var(--card); padding: 4px 7px 4px 9px; font: 9px "DM Mono"; cursor: pointer; }.active-chips button i { font-style: normal; margin-left: 5px; }
.toolbar-controls { display: flex; align-items: center; gap: 11px; }.select-wrap { display: flex; align-items: center; gap: 6px; color: var(--muted); font: 9px "DM Mono"; text-transform: uppercase; }.select-wrap select { appearance: none; color: var(--ink); background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='m2 2 4 4 4-4' fill='none' stroke='%23686b62'/%3E%3C/svg%3E") no-repeat right 9px center; border: 1px solid var(--line); border-radius: 5px; padding: 8px 29px 8px 10px; font-size: 10px; text-transform: none; outline: 0; }
.view-switch { display: flex; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }.view-switch button { display: grid; place-items: center; width: 34px; height: 32px; border: 0; border-right: 1px solid var(--line); background: transparent; cursor: pointer; }.view-switch button:last-child { border: 0; }.view-switch button.active { background: var(--ink); color: var(--paper); }.view-switch svg { width: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.mobile-filter-row { display: none; }
.loading-banner { display: flex; align-items: center; gap: 13px; margin: 17px 0 0; padding: 11px 13px; border: 1px solid var(--line); border-radius: 6px; background: color-mix(in srgb, var(--violet-soft), transparent 45%); }.loading-banner > span { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; }.loading-banner > span i { width: 12px; height: 12px; border: 2px solid var(--violet); border-top-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }.loading-banner p { margin: 0; display: grid; gap: 2px; font-size: 10px; }.loading-banner small { font-size: 9px; color: var(--muted); font-weight: 400; }
.loading-banner.complete { display: none; }

.results-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 18px; }
.resource-card { min-width: 0; min-height: 230px; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 18px; text-decoration: none; position: relative; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; overflow: hidden; }
.resource-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--violet), var(--line) 45%); box-shadow: var(--shadow); }.resource-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 50%, color-mix(in srgb, var(--violet-soft), transparent 45%)); opacity: 0; transition: opacity .2s; pointer-events: none; }.resource-card:hover::before { opacity: 1; }
.card-top { display: flex; align-items: center; gap: 9px; position: relative; }.favicon { width: 25px; height: 25px; border-radius: 5px; display: grid; place-items: center; color: #fff; font: 10px "DM Mono"; text-transform: uppercase; flex: none; }.domain { font: 9px "DM Mono"; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.save-button { margin-left: auto; border: 0; background: none; padding: 3px; cursor: pointer; color: var(--muted); position: relative; z-index: 2; }.save-button svg { width: 15px; fill: transparent; stroke: currentColor; stroke-width: 1.5; }.save-button.saved { color: var(--violet); }.save-button.saved svg { fill: currentColor; }
.resource-card h2 { font-size: 15px; line-height: 1.25; letter-spacing: -.025em; margin: 17px 0 8px; overflow-wrap: anywhere; position: relative; }.resource-card .description { font-size: 10px; line-height: 1.55; color: var(--muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; position: relative; }.card-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 18px; position: relative; }.topic-tag { font: 8px "DM Mono"; text-transform: uppercase; letter-spacing: .04em; background: var(--paper-2); padding: 5px 7px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 75%; }.source-proof { font: 8px "DM Mono"; color: var(--muted); white-space: nowrap; }.source-proof strong { color: var(--violet); }
.results-grid.list { grid-template-columns: 1fr; gap: 7px; }.results-grid.list .resource-card { min-height: 112px; display: grid; grid-template-columns: 230px minmax(0, 1fr) 170px; column-gap: 25px; align-items: center; }.results-grid.list .card-top { grid-column: 1; grid-row: 1; }.results-grid.list h2 { grid-column: 1; grid-row: 2; margin: 9px 0 0; }.results-grid.list .description { grid-column: 2; grid-row: 1 / span 2; -webkit-line-clamp: 3; }.results-grid.list .card-footer { grid-column: 3; grid-row: 1 / span 2; margin: 0; padding: 0; align-items: center; }.results-grid.list .save-button { position: absolute; right: 15px; top: 12px; }
.skeleton { min-height: 230px; border-radius: 9px; background: linear-gradient(100deg, var(--paper-2) 30%, var(--card) 45%, var(--paper-2) 60%); background-size: 220% 100%; animation: shimmer 1.3s infinite; }
.empty-state { text-align: center; padding: 90px 20px; }.empty-state > div { font-size: 48px; color: var(--violet); }.empty-state h2 { margin: 10px 0 6px; font-size: 24px; }.empty-state p { margin: 0; color: var(--muted); font-size: 12px; }.empty-state button { margin-top: 20px; border: 0; background: var(--ink); color: var(--paper); padding: 10px 15px; border-radius: 5px; cursor: pointer; font-size: 11px; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 5px; padding-top: 30px; }.pagination button { min-width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 5px; background: transparent; font: 10px "DM Mono"; cursor: pointer; }.pagination button.active { background: var(--ink); color: var(--paper); }.pagination button:disabled { opacity: .35; cursor: not-allowed; }.pagination span { padding: 0 4px; color: var(--muted); }

footer { min-height: 100px; border-top: 1px solid var(--line); padding: 28px clamp(22px, 4vw, 68px); display: flex; align-items: center; justify-content: space-between; gap: 25px; font-size: 10px; color: var(--muted); }.footer-brand { display: flex; gap: 10px; align-items: center; color: var(--ink); font-size: 14px; }.footer-brand .brand-mark { transform: scale(.75) skewY(-8deg); }.footer-brand i { background: var(--ink); } footer a { text-underline-offset: 3px; }
dialog { width: min(590px, calc(100% - 30px)); background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: clamp(28px, 5vw, 54px); box-shadow: 0 30px 100px rgba(0,0,0,.28); }dialog::backdrop { background: rgba(12,13,10,.63); backdrop-filter: blur(5px); }.dialog-close { position: absolute; right: 17px; top: 14px; border: 0; background: none; font-size: 26px; cursor: pointer; }.dialog-kicker { font: 9px "DM Mono"; letter-spacing: .1em; color: var(--violet); }.dialog-kicker + h2 { font-size: clamp(31px, 5vw, 48px); line-height: .98; letter-spacing: -.055em; margin: 22px 0; }.dialog-kicker + h2 + p, .fine-print { color: var(--muted); line-height: 1.7; font-size: 12px; }.dialog-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 28px 0; border-block: 1px solid var(--line); padding: 20px 0; }.dialog-stats div { border-right: 1px solid var(--line); padding-left: 15px; }.dialog-stats div:first-child { padding-left: 0; }.dialog-stats div:last-child { border: 0; }.dialog-stats b { display: block; font-size: 20px; letter-spacing: -.04em; }.dialog-stats span { font: 8px "DM Mono"; color: var(--muted); text-transform: uppercase; }
.filter-scrim { display: none; }

@keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 50% { opacity: .4; } } @keyframes shimmer { to { background-position-x: -220%; } }

@media (max-width: 1080px) {
  .creator-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.creator-card--hero { grid-column: span 2; }
  .results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .results-grid.list .resource-card { grid-template-columns: 190px minmax(0, 1fr) 145px; }
}
@media (max-width: 780px) {
  .topbar { height: 64px; }.top-actions .text-button, .status-pill { display: none; }
  .hero { padding-top: 58px; }.hero-grid { grid-template-columns: 1fr; }.hero-stat { display: none; }.hero::after { opacity: .25; }.search-shell { height: 58px; margin-top: 35px; }.search-shell kbd { display: none; }
  .creator-intro { grid-template-columns: 1fr; gap: 18px; }.creator-intro > p { margin-left: 0; }.creator-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.creator-card--hero { min-height: 500px; }
  .catalog { display: block; }.filter-panel { position: fixed; z-index: 50; left: 0; top: 0; bottom: 0; width: min(340px, 88vw); overflow-y: auto; background: var(--paper); padding: 24px; transform: translateX(-105%); transition: transform .25s ease; box-shadow: 20px 0 60px rgba(0,0,0,.15); }.filter-panel.open { transform: none; }.filter-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 49; }.filter-scrim.open { display: block; }.mobile-filter-row { display: block; margin-bottom: 12px; }.mobile-filter-row button { border: 1px solid var(--line); background: var(--card); padding: 8px 11px; border-radius: 5px; font-size: 10px; font-weight: 700; }.mobile-filter-row svg { width: 14px; fill: none; stroke: currentColor; vertical-align: middle; margin-right: 5px; }.mobile-filter-row span { background: var(--violet); color: #fff; border-radius: 999px; padding: 1px 5px; margin-left: 5px; }
  .results-area { padding-top: 18px; }.results-toolbar { align-items: flex-start; }.toolbar-controls { flex-direction: column; align-items: flex-end; }.select-wrap { font-size: 0; }.results-grid.list .resource-card { display: flex; min-height: 200px; }.results-grid.list .save-button { position: relative; top: auto; right: auto; }
}
@media (max-width: 540px) {
  .brand small { display: none; }.hero { padding-inline: 18px; }h1 { font-size: 48px; }.eyebrow span:last-child { display: none; }.hero-grid > div:first-child > p { font-size: 13px; }.quick-searches { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }.quick-searches::-webkit-scrollbar { display: none; }.quick-searches button { flex: none; }
  .creator-shelf { padding-inline: 14px; }.creator-grid { grid-template-columns: 1fr; }.creator-card, .creator-card--hero { grid-column: auto; grid-row: auto; min-height: 265px; }.creator-card--hero { min-height: 440px; }.creator-card--hero h3 { font-size: 55px; }
  .results-area { padding-inline: 14px; }.results-grid { grid-template-columns: 1fr; }.results-toolbar { gap: 10px; }.view-switch { display: none; }.resource-card { min-height: 215px; }footer { flex-direction: column; text-align: center; }.dialog-stats b { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Retro arcade layer — crisp, playful, and deliberately restrained. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 19; pointer-events: none; opacity: .035;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, var(--ink) 4px);
}
.brand > span:not(.brand-mark), h1 em, .creator-intro h2 em { font-family: "Pixelify Sans", sans-serif; font-style: normal; }
.brand > span:not(.brand-mark) { letter-spacing: -.02em; font-size: 21px; }
.brand-mark { transform: none; image-rendering: pixelated; }
.brand-mark i { border-radius: 0; box-shadow: 2px 2px 0 var(--acid); }
.eyebrow span, .creator-kicker, .dialog-kicker { border-radius: 0; box-shadow: 2px 2px 0 color-mix(in srgb, var(--ink), transparent 78%); }
.hero { background-image: linear-gradient(color-mix(in srgb, var(--line), transparent 74%) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--line), transparent 74%) 1px, transparent 1px); background-size: 32px 32px; }
.hero::before { content: "+  OPEN-SHELF_OS v1.0  +"; position: absolute; left: 18px; bottom: 11px; color: var(--muted); font: 8px "DM Mono"; letter-spacing: .08em; }
.hero-grid { grid-template-columns: minmax(0, 1fr) minmax(260px, 330px); align-items: center; }
.hero-aside { position: relative; align-self: stretch; min-height: 335px; display: flex; align-items: flex-end; }
.hero-mascot { position: absolute; width: 205px; right: 2px; top: -24px; z-index: 2; filter: drop-shadow(9px 11px 0 color-mix(in srgb, var(--violet), transparent 76%)); animation: mascot-bob 3.4s steps(2, end) infinite; }
.hero-mascot img, .pixel-crew img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.pixel-speech { position: absolute; right: 88%; top: 25px; width: max-content; color: #171914; background: var(--acid); border: 2px solid #171914; padding: 8px 10px; font: 8px "DM Mono"; letter-spacing: .05em; box-shadow: 4px 4px 0 #171914; }
.pixel-speech::after { content: ""; position: absolute; right: -9px; bottom: 4px; width: 7px; height: 7px; background: var(--acid); border-top: 2px solid #171914; border-right: 2px solid #171914; transform: rotate(45deg); }
.hero-stat { width: 100%; position: relative; z-index: 3; background: color-mix(in srgb, var(--paper), transparent 7%); border: 1px solid var(--line); border-left: 4px solid var(--violet); padding: 14px 15px; box-shadow: 6px 6px 0 color-mix(in srgb, var(--ink), transparent 90%); }
.hero-stat strong { font-family: "Pixelify Sans", sans-serif; font-size: 32px; }
.stat-rule, .stat-rule i { border-radius: 0; }
.search-shell { border-radius: 0; border: 2px solid var(--ink); box-shadow: 7px 7px 0 var(--violet); }
[data-theme="dark"] .search-shell { border-color: var(--paper); }
.search-shell::before { content: "FIND.EXE"; position: absolute; top: -20px; left: -2px; color: var(--ink); background: var(--acid); border: 2px solid var(--ink); padding: 3px 8px; font: 7px "DM Mono"; letter-spacing: .07em; }
.search-suggestions, .resource-card, .loading-banner, .mini-search, .view-switch, .view-switch button, .select-wrap select, .pagination button { border-radius: 0; }
.search-suggestions { box-shadow: 7px 7px 0 var(--violet); }
.quick-searches button { border-radius: 0; }
.creator-shelf { position: relative; }
.pixel-crew { min-height: 118px; display: grid; grid-template-columns: 245px minmax(0, 1fr) auto; align-items: center; gap: 24px; margin: -5px 0 30px; padding: 8px 20px 8px 4px; border: 2px solid var(--ink); background: var(--acid); color: #171914; box-shadow: 7px 7px 0 var(--violet); overflow: hidden; }
.pixel-crew img { width: 235px; margin-bottom: -9px; }
.pixel-crew > div { display: grid; gap: 3px; }
.pixel-crew span, .pixel-crew small { font: 8px "DM Mono"; letter-spacing: .09em; }
.pixel-crew strong { font: 700 25px "Pixelify Sans", sans-serif; letter-spacing: -.02em; }
.pixel-crew p { margin: 0; font-size: 10px; color: #40451c; }
.pixel-crew small { align-self: start; margin-top: 13px; border: 1px solid #171914; padding: 5px 7px; }
.creator-grid { border-width: 2px 0 0 2px; border-color: var(--ink); }
.creator-card { border-color: var(--ink); border-width: 0 2px 2px 0; }
.creator-icon { border-radius: 0; border: 2px solid #171914; box-shadow: 4px 4px 0 #171914; font-family: "Pixelify Sans", sans-serif; font-size: 14px; }
.creator-card h3 { font-family: "Pixelify Sans", sans-serif; letter-spacing: -.02em; }
.creator-card--hero h3 { text-shadow: 4px 4px 0 rgba(0,0,0,.18); }
.system-marquee { min-height: 38px; display: flex; align-items: center; justify-content: space-around; gap: 18px; padding: 8px clamp(20px, 6vw, 100px); overflow: hidden; background: var(--ink); color: var(--paper); border-block: 2px solid var(--violet); font: 8px "DM Mono"; letter-spacing: .1em; white-space: nowrap; }
.system-marquee i { color: var(--acid); font-style: normal; }
.filter-panel { background-image: radial-gradient(color-mix(in srgb, var(--ink), transparent 88%) 1px, transparent 1px); background-size: 8px 8px; }
.resource-card { box-shadow: 3px 3px 0 color-mix(in srgb, var(--ink), transparent 90%); }
.resource-card:hover { transform: translate(-2px, -4px); box-shadow: 7px 8px 0 color-mix(in srgb, var(--violet), transparent 68%); }
.topic-tag, .active-chips button { border-radius: 0; }
@keyframes mascot-bob { 50% { transform: translateY(-7px); } }

@media (max-width: 1080px) {
  .hero-mascot { width: 180px; }
  .pixel-speech { right: 75%; }
}
@media (max-width: 780px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-aside { min-height: 165px; margin-top: 12px; }
  .hero-mascot { width: 165px; top: 0; right: 12px; }
  .hero-stat { display: block; width: calc(100% - 150px); align-self: flex-end; }
  .hero-stat small { display: none; }
  .hero-stat .stat-rule { margin-bottom: 0; }
  .pixel-speech { right: 76%; top: 12px; }
  .pixel-crew { grid-template-columns: 180px 1fr; }
  .pixel-crew img { width: 175px; }
  .pixel-crew small { display: none; }
}
@media (max-width: 540px) {
  .hero-aside { min-height: 145px; }
  .hero-mascot { width: 145px; right: -4px; }
  .pixel-speech { font-size: 6px; padding: 6px; right: 71%; }
  .hero-stat { width: calc(100% - 122px); padding: 10px; }
  .hero-stat strong { font-size: 25px; }
  .pixel-crew { grid-template-columns: 125px 1fr; gap: 9px; padding-right: 10px; }
  .pixel-crew img { width: 130px; margin-left: -4px; }
  .pixel-crew strong { font-size: 19px; }
  .pixel-crew p { font-size: 8px; }
  .system-marquee { justify-content: flex-start; }
}

/* Tools & Projects — plain list, separate from the creator showcase */
.projects-shelf { padding: clamp(56px, 7vw, 92px) clamp(22px, 4vw, 68px); border-top: 2px solid var(--ink); background: var(--paper-2); }
.projects-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 400px); align-items: end; gap: 34px; margin-bottom: 30px; }
.projects-kicker { display: inline-flex; align-items: center; gap: 8px; font: 9px "DM Mono"; letter-spacing: .12em; color: var(--violet); margin-bottom: 16px; }
.projects-kicker i { width: 7px; height: 7px; background: var(--acid); border: 1px solid #9fb82f; }
.projects-head h2 { font-size: clamp(34px, 5vw, 66px); line-height: .95; letter-spacing: -.06em; margin: 0; }
.projects-head h2 em { color: var(--violet); font-family: "Pixelify Sans", sans-serif; font-style: normal; }
.projects-head > p { font-size: 13px; line-height: 1.7; color: var(--muted); margin: 0 0 5px auto; max-width: 380px; }
.projects-list { list-style: none; margin: 0; padding: 0; border: 2px solid var(--ink); background: var(--card); box-shadow: 7px 7px 0 var(--violet); }
.projects-list li + li { border-top: 1px solid var(--line); }
.project-row { display: grid; grid-template-columns: 60px 200px minmax(0, 1fr) minmax(0, 1.35fr) 34px; align-items: center; gap: 18px; padding: 15px 18px; text-decoration: none; transition: background .15s ease; }
.project-row:hover { background: var(--acid); }
.project-num { font: 700 22px "Pixelify Sans", sans-serif; color: var(--violet); }
.project-row:hover .project-num { color: #171914; }
.project-cat { font: 8px "DM Mono"; text-transform: uppercase; letter-spacing: .08em; color: var(--violet); }
.project-name { font-family: "Pixelify Sans", sans-serif; font-size: 19px; letter-spacing: -.01em; }
.project-desc { font-size: 11px; line-height: 1.5; color: var(--muted); }
.project-row:hover .project-cat, .project-row:hover .project-desc { color: #3a3f16; }
.project-go { justify-self: end; font-size: 20px; transition: transform .18s ease; }
.project-row:hover .project-go { transform: translate(3px, -3px); }
@media (max-width: 980px) {
  .projects-head { grid-template-columns: 1fr; gap: 18px; }
  .projects-head > p { margin-left: 0; }
  .project-row { grid-template-columns: 44px minmax(0, 1fr) 28px; grid-template-rows: auto auto auto; gap: 4px 12px; align-items: start; }
  .project-num { grid-column: 1; grid-row: 1 / 4; align-self: start; margin-top: 3px; }
  .project-cat { grid-column: 2; grid-row: 1; }
  .project-name { grid-column: 2; grid-row: 2; }
  .project-desc { grid-column: 2; grid-row: 3; }
  .project-go { grid-column: 3; grid-row: 1 / 4; align-self: center; }
}

/* Search dock — keeps the search field directly above the catalog it filters */
.search-dock { display: flex; flex-direction: column; align-items: center; padding: clamp(34px, 4.5vw, 58px) clamp(22px, 6.5vw, 108px) clamp(18px, 2.5vw, 30px); background: var(--paper); }
.search-dock .search-shell { margin-top: 0; width: 100%; max-width: 860px; }
.search-dock .quick-searches { width: 100%; max-width: 860px; justify-content: center; }
@media (max-width: 540px) { .search-dock .quick-searches { justify-content: flex-start; } }

/* Minor CSS-only motion (respects reduced-motion) */
@keyframes os-rise { from { opacity: 0; translate: 0 10px; } }
@keyframes os-pop { 0% { scale: .6; } 60% { scale: 1.18; } 100% { scale: 1; } }
.resource-card { animation: os-rise .3s ease; }
.save-button.saved svg { animation: os-pop .3s ease; }
.icon-button { transition: transform .25s ease, background .25s ease, border-color .25s ease; }
.icon-button:hover { background: var(--card); }
.icon-button:active { transform: rotate(35deg) scale(.92); }
.text-button { position: relative; }
.text-button::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -3px; height: 1.5px; background: var(--violet); transition: right .25s ease; }
.text-button:hover::after { right: 0; }
.quick-searches button, .pagination button, .filter-toggle, .view-switch button { transition: transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease; }
.quick-searches button:hover { transform: translateY(-2px); background: var(--card); }
.pagination button:not(.active):hover, .filter-toggle:hover { transform: translateY(-1px); }
.view-switch button:not(.active):hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}