:root{color-scheme:light;--ink:#24384a;--muted:#718091;--cream:#fff9eb;--paper:#fffdf7;--blue:#388bd8;--blue-soft:#e9f4ff;--gold:#efa928;--line:#eee4d0;--shadow:0 14px 42px #77552012}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 8% 0%,#fff4cf 0,transparent 28rem),linear-gradient(180deg,#fffaf0 0,#fffdf8 27rem,#fff 100%);color:var(--ink);font-family:"DM Sans","Noto Sans SC",sans-serif;min-height:100vh}
.shell{width:min(1180px,calc(100% - 48px));margin:0 auto;padding:54px 0 24px}
.hero{display:flex;align-items:center;gap:22px;padding:0 4px 34px;border-bottom:1px solid var(--line)}
.brand-mark{display:grid;place-items:center;width:68px;height:68px;flex:none;border-radius:22px;background:linear-gradient(145deg,#ffd65e,#f9ae36);color:#fff;font-size:34px;font-weight:800;box-shadow:0 7px 18px #dfa33e40;transform:rotate(-4deg)}
.hero-copy{flex:1}.eyebrow{margin:0 0 8px;color:#9b8b6e;font-size:10px;font-weight:700;letter-spacing:.16em}
h1{margin:0;font-size:clamp(29px,4vw,42px);letter-spacing:.025em;line-height:1.2}.subtitle{margin:9px 0 0;color:var(--muted);font-size:14px}
.hero-count{display:flex;align-items:baseline;gap:7px;padding:12px 17px;border:1px solid #f2dfb6;border-radius:15px;background:#fffaf0;color:#957642}.hero-count strong{font-size:28px;color:#d89d27}.hero-count span{font-size:12px}
.toolbar{display:grid;grid-template-columns:minmax(240px,340px) 1fr auto;align-items:center;gap:18px;padding:24px 0 22px}
.search-box{display:flex;align-items:center;gap:9px;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:13px;background:#fff;box-shadow:0 2px 7px #634c1808;color:#9aa3aa}.search-box>span{font-size:24px;line-height:1;transform:rotate(-20deg)}
.search-box input{width:100%;border:0;outline:0;color:var(--ink);font:inherit;font-size:13px}.search-box input::placeholder{color:#a6adb2}.search-box kbd{padding:2px 6px;border:1px solid #e9e6df;border-radius:5px;background:#faf9f5;color:#9ba1a5;font-size:11px}
.tag-filters{display:flex;flex-wrap:wrap;gap:7px}.filter-chip{padding:7px 12px;border:1px solid #e9e5db;border-radius:999px;background:#fff;color:#718091;font:inherit;font-size:12px;cursor:pointer;transition:.18s ease}.filter-chip:hover{border-color:#b9d9f4;color:#347fc0}.filter-chip.active{border-color:#d7eafa;background:var(--blue-soft);color:#2e7dbd;font-weight:600}.result-count{margin:0;color:#9ba2a6;font-size:12px;white-space:nowrap}
.asset-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.asset-card{overflow:hidden;border:1px solid #eee7dc;border-radius:18px;background:#fff;box-shadow:var(--shadow);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.asset-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px #7755201b}.checkerboard{background-color:#fffdfa;background-image:linear-gradient(45deg,#efece5 25%,transparent 25%),linear-gradient(-45deg,#efece5 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#efece5 75%),linear-gradient(-45deg,transparent 75%,#efece5 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0}
.card-art{position:relative;display:grid;place-items:center;aspect-ratio:1/1;overflow:hidden}.card-art img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .35s ease}.asset-card:hover .card-art img{transform:scale(1.035)}.card-number{position:absolute;left:13px;top:13px;padding:5px 8px;border:1px solid #ffffffb0;border-radius:999px;background:#fffdf0dd;color:#8e7a50;font-size:10px;font-weight:700;backdrop-filter:blur(4px)}
.card-copy{padding:15px 16px 16px}.card-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.card-heading h2{margin:0;font-size:16px;font-weight:700}.mood-pill{flex:none;padding:4px 8px;border-radius:999px;background:#fff5db;color:#9a7939;font-size:10px}.card-description{display:-webkit-box;overflow:hidden;min-height:40px;margin:9px 0 12px;color:#788592;font-size:12px;line-height:1.7;-webkit-line-clamp:2;-webkit-box-orient:vertical}.card-tags{display:flex;flex-wrap:wrap;gap:6px}.tag{padding:4px 8px;border-radius:7px;background:#f5f7f8;color:#77838c;font-size:10px}.empty-state{padding:48px 0;text-align:center;color:#87929c;font-size:14px}footer{display:flex;justify-content:space-between;gap:12px;padding:28px 2px 0;color:#a4a59d;font-size:11px}
.asset-dialog{position:fixed;inset:50% auto auto 50%;width:min(820px,calc(100% - 28px));max-width:none;max-height:min(700px,calc(100% - 28px));padding:0;transform:translate(-50%,-50%);overflow:auto;border:1px solid #efe4d3;border-radius:22px;background:#fffdf8;color:var(--ink);box-shadow:0 28px 90px #1d28353a}.asset-dialog::backdrop{background:#1d283588;backdrop-filter:blur(3px)}.asset-dialog[open]{display:grid;grid-template-columns:1fr 1fr}.close-button{position:absolute;right:13px;top:13px;z-index:2;display:grid;place-items:center;width:34px;height:34px;border:1px solid #e9e3d7;border-radius:50%;background:#fffdf0;color:#66727d;font-size:24px;line-height:1;cursor:pointer}.dialog-art{display:grid;place-items:center;min-height:420px;overflow:hidden}.dialog-art img{width:100%;height:100%;max-height:560px;object-fit:contain}.dialog-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:42px 36px}.dialog-copy h2{margin:0;font-size:27px}.dialog-description{margin:13px 0 22px;color:#74818d;font-size:14px;line-height:1.85}.metadata{display:grid;gap:10px;width:100%;margin:0 0 20px}.metadata>div{display:grid;grid-template-columns:64px 1fr;gap:8px;font-size:12px}.metadata dt{color:#a39a88}.metadata dd{margin:0;color:#536575}.download-button{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:24px;padding:12px 16px;border-radius:11px;background:#368bd4;color:#fff;text-decoration:none;font-size:13px;font-weight:600;box-shadow:0 6px 16px #398bd333}.download-button:hover{background:#287bbf}
@media(max-width:900px){.toolbar{grid-template-columns:1fr auto}.tag-filters{grid-column:1/-1;grid-row:2}.result-count{grid-column:2;grid-row:1}.asset-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.shell{width:min(100% - 28px,500px);padding-top:28px}.hero{gap:14px;padding-bottom:24px}.brand-mark{width:54px;height:54px;border-radius:18px;font-size:27px}.hero-count{gap:4px;padding:8px 10px}.hero-count strong{font-size:23px}.subtitle{max-width:230px;font-size:12px;line-height:1.6}.eyebrow{font-size:8px}.toolbar{grid-template-columns:1fr;gap:12px;padding:18px 0}.search-box{width:100%}.tag-filters{grid-column:auto;grid-row:auto}.result-count{grid-column:auto;grid-row:auto;text-align:right}.asset-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.card-copy{padding:12px}.card-heading{align-items:flex-start;flex-direction:column;gap:6px}.card-heading h2{font-size:14px}.card-description{font-size:11px;min-height:36px}.card-tags{gap:4px}.tag{font-size:9px;padding:4px 6px}footer{font-size:9px}.asset-dialog[open]{display:flex;flex-direction:column}.dialog-art{min-height:0;aspect-ratio:1/1;max-height:54vh}.dialog-copy{padding:22px}.dialog-copy h2{font-size:23px}.dialog-description{margin:9px 0 15px}}

/* Fold the long tag vocabulary away until someone asks for it. */
.hero{padding-bottom:28px}
.hero-copy{min-width:0}
.toolbar{grid-template-columns:minmax(230px,340px) minmax(0,1fr) auto;align-items:start}
.tag-panel{position:relative;z-index:1;min-width:0;border:1px solid var(--line);border-radius:13px;background:#fff;box-shadow:0 2px 7px #634c1808}
.tag-panel[open]{z-index:20;border-bottom-color:transparent;border-bottom-left-radius:0;border-bottom-right-radius:0}
.tag-panel>summary{display:flex;align-items:center;gap:8px;min-height:42px;padding:9px 12px;list-style:none;cursor:pointer;user-select:none}
.tag-panel>summary::-webkit-details-marker{display:none}
.tag-panel-title{color:var(--ink);font-size:13px;font-weight:650;white-space:nowrap}
.tag-summary-detail{margin-left:auto;overflow:hidden;color:var(--muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.disclosure-chevron{width:8px;height:8px;flex:none;border-right:1.5px solid #8995a0;border-bottom:1.5px solid #8995a0;transform:rotate(45deg) translateY(-2px);transition:transform .18s ease}
.tag-panel[open] .disclosure-chevron{transform:rotate(225deg) translate(-1px,-1px)}
.tag-panel .tag-filters{position:absolute;top:calc(100% - 1px);right:-1px;left:-1px;z-index:1;display:flex;flex-wrap:wrap;align-content:flex-start;gap:7px;max-height:min(320px,calc(100vh - 180px));overflow:auto;overscroll-behavior:contain;padding:10px 12px 12px;border:1px solid var(--line);border-top:none;border-radius:0 0 13px 13px;background:var(--paper);box-shadow:0 16px 28px #77552020;scrollbar-color:#dfd5c2 transparent;scrollbar-width:thin}
.filter-chip{padding:6px 10px;font-size:11px}
.result-count{padding-top:13px;text-align:right;line-height:1.5}
.pagination{display:flex;align-items:center;justify-content:center;gap:7px;margin:23px auto 4px}
.pagination[hidden]{display:none}
.page-button,.page-step{min-width:36px;height:36px;padding:0 11px;border:1px solid var(--line);border-radius:11px;background:#fff;color:#667789;font:inherit;font-size:12px;cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease}
.page-step{padding:0 13px}
.page-button:hover,.page-step:not(:disabled):hover{transform:translateY(-1px);border-color:#b9d9f4;color:#347fc0}
.page-button.active{border-color:#cfe5f8;background:var(--blue-soft);color:#2e7dbd;font-weight:700}
.page-step:disabled{cursor:not-allowed;opacity:.45}
.page-ellipsis{width:17px;color:#9ba2a6;text-align:center}
.tag-panel>summary:focus-visible,.filter-chip:focus-visible,.page-button:focus-visible,.page-step:focus-visible,.asset-card:focus-visible,.close-button:focus-visible,.download-button:focus-visible{outline:3px solid #6bb5f0;outline-offset:3px}
@media(max-width:900px){.toolbar{grid-template-columns:minmax(0,1fr) auto;gap:12px}.tag-panel{grid-column:1/-1;grid-row:2}.result-count{grid-column:2;grid-row:1;max-width:210px}.tag-filters{grid-column:auto;grid-row:auto}}
@media(max-width:640px){.shell{padding-top:25px}.hero{padding-bottom:21px}.hero-copy h1{font-size:clamp(25px,7vw,34px)}.toolbar{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:17px 0}.search-box{grid-column:1/-1}.tag-panel{grid-column:1/-1;grid-row:2}.result-count{grid-column:1/-1;grid-row:3;max-width:none;padding-top:0;text-align:left}.tag-filters{max-height:180px;gap:6px;padding:10px}.filter-chip{padding:6px 9px}.asset-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.pagination{gap:5px;margin-top:18px}.page-button,.page-step{min-width:33px;height:34px;padding:0 9px;font-size:11px}.page-step{padding:0 10px}.page-ellipsis{width:10px}footer{padding-top:22px}}
@media(max-width:640px){.tag-panel .tag-filters{max-height:min(240px,calc(100vh - 180px))}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}