.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 28px; align-items: end; padding: 28px 0 44px; }.eyebrow { color: var(--cyan); font: 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; }.hero h1 { max-width: 760px; margin: 14px 0 14px; font-size: clamp(38px, 6vw, 76px); line-height: 1.02; letter-spacing: -.03em; }.hero h1 span { color: var(--cyan); }.hero p { max-width: 650px; margin: 0; color: var(--muted); font-size: 16px; }.hero-side { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, var(--surface), transparent); }.hero-side strong { display: block; color: var(--gold); font: 12px var(--mono); letter-spacing: .08em; }.hero-side p { margin-top: 9px; font-size: 13px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 18px 0 38px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); }.stat { min-height: 106px; padding: 18px; background: var(--surface); }.stat b { display: block; margin-bottom: 6px; font-size: 29px; }.stat span { color: var(--muted); font-size: 12px; }
.section-head, .toolbar, .result-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; }.section-head { margin: 36px 0 16px; }.section-head h2 { margin: 0; font-size: 18px; }.section-head p, .result-meta { color: var(--muted); font-size: 12px; }.library-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }.library-card { position: relative; min-height: 150px; padding: 19px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: transform .2s, border-color .2s, background .2s; }.library-card:hover { transform: translateY(-3px); border-color: var(--cyan); background: var(--surface-2); }.library-card h3 { margin: 32px 0 6px; font-size: 17px; }.library-card p { margin: 0; color: var(--muted); font-size: 12px; }.library-card .count { position: absolute; top: 18px; right: 18px; color: var(--cyan); font: 12px var(--mono); }.library-card .glyph { color: var(--gold); font-size: 21px; }
.control-strip { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto; gap: 10px; margin: 20px 0 14px; }.search-box { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }.search-box:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-soft); }.search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); }.search-box kbd { color: var(--faint); font: 11px var(--mono); }.select, .view-toggle { min-height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); }.view-toggle { display: flex; padding: 3px; gap: 3px; }.view-toggle button { padding: 0 10px; border-radius: 7px; background: transparent; color: var(--muted); }.view-toggle button.active { background: var(--surface-3); color: var(--text); }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 22px; }.chip { padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font-size: 12px; }.chip:hover, .chip.active { border-color: var(--cyan); background: var(--cyan-soft); color: var(--text); }.chip b { margin-left: 5px; color: var(--cyan); font: 10px var(--mono); }
.gallery { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }.gallery.compact { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }.gallery.list { display: flex; flex-direction: column; }.resource-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); cursor: pointer; transition: transform .2s, border-color .2s, box-shadow .2s; }.resource-card:hover { transform: translateY(-3px); border-color: var(--cyan); box-shadow: var(--shadow); }.resource-card img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--surface-3); }.resource-card.pose img, .resource-card.depth img { aspect-ratio: 4 / 3; object-fit: contain; }.card-body { padding: 11px 12px 13px; }.card-body strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }.card-body span { display: block; overflow: hidden; margin-top: 4px; color: var(--muted); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }.compact .card-body { display: none; }.list .resource-card { display: grid; grid-template-columns: 88px 1fr; }.list .resource-card img { aspect-ratio: 1; }.list .card-body { align-self: center; }.empty { padding: 70px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.load-more { display: flex; min-height: 76px; align-items: center; justify-content: center; gap: 14px; color: var(--muted); font-size: 12px; }
.load-more[hidden] { display: none; }
.drawer { position: fixed; inset: 0; z-index: 50; visibility: hidden; }.drawer.open { visibility: visible; }.drawer-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.58); opacity: 0; transition: opacity .25s; }.drawer-panel { position: absolute; top: 0; right: 0; width: min(560px, 100%); height: 100%; overflow: auto; padding: 24px; border-left: 1px solid var(--line); background: var(--bg-deep); transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1); }.drawer.open .drawer-backdrop { opacity: 1; }.drawer.open .drawer-panel { transform: translateX(0); }.drawer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; color: var(--cyan); font: 11px var(--mono); letter-spacing: .12em; }.drawer-media { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }.drawer-media img { display: block; width: 100%; max-height: 58vh; object-fit: contain; }.drawer h2 { margin: 18px 0 5px; font-size: 27px; }.drawer-subtitle { margin: 0; color: var(--muted); }.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 20px 0; border: 1px solid var(--line); background: var(--line); }.detail-grid div { padding: 12px; background: var(--surface); }.detail-grid label { display: block; color: var(--faint); font: 10px var(--mono); }.detail-grid span { display: block; margin-top: 4px; font-size: 13px; }.drawer-actions { display: flex; flex-wrap: wrap; gap: 8px; }.action { padding: 10px 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); font-size: 12px; }.action.primary { border-color: var(--cyan); background: var(--cyan-soft); color: var(--cyan); }.toast { position: fixed; z-index: 80; right: 20px; bottom: 20px; max-width: calc(100vw - 40px); padding: 11px 14px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface-2); box-shadow: var(--shadow); opacity: 0; transform: translateY(10px); pointer-events: none; transition: .2s; font-size: 12px; }.toast.show { opacity: 1; transform: none; }
@media (max-width: 1050px) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }.gallery.compact { grid-template-columns: repeat(6, minmax(0, 1fr)); } }.library-links { } @media (max-width: 760px) { .hero { grid-template-columns: 1fr; gap: 16px; padding: 10px 0 28px; }.hero h1 { margin: 10px 0; font-size: clamp(34px, 9vw, 42px); overflow-wrap: anywhere; }.hero p { font-size: 14px; }.hero-side { padding: 16px; }.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 28px; }.stat { min-height: 86px; padding: 13px; }.stat b { font-size: 24px; }.library-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }.library-card { min-height: 150px; padding: 14px; }.library-card .count { top: 15px; right: 13px; }.library-card h3 { margin-top: 27px; font-size: 15px; }.library-card p { font-size: 11px; }.section-head { align-items: flex-start; margin: 28px 0 13px; }.section-head p { text-align: right; }.control-strip { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 15px 0 10px; }.search-box { grid-column: 1 / -1; min-width: 0; }.select { min-width: 0; width: 100%; padding: 0 10px; }.view-toggle { min-width: 0; justify-content: space-between; padding: 3px; }.view-toggle button { min-width: 0; padding: 0 8px; font-size: 11px; }.chips { flex-wrap: nowrap; overflow-x: auto; margin: 10px -14px 15px; padding: 0 14px 6px; scrollbar-width: none; }.chips::-webkit-scrollbar { display: none; }.chip { flex: 0 0 auto; }.result-meta { margin-bottom: 10px; }.gallery, .gallery.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }.gallery.list { gap: 8px; }.gallery.list .resource-card { grid-template-columns: 76px minmax(0, 1fr); }.gallery.list .card-body { min-width: 0; padding: 9px; }.card-body { padding: 9px; }.card-body strong { font-size: 12px; }.card-body span { font-size: 10px; }.view-strip { gap: 2px; }.view-thumb { padding: 5px 1px; font-size: 9px; }.drawer-panel { top: auto; right: 0; bottom: 0; width: 100%; height: min(88dvh, 760px); padding: 14px 16px calc(18px + env(safe-area-inset-bottom)); border: 1px solid var(--line); border-bottom: 0; border-radius: 18px 18px 0 0; transform: translateY(100%); }.drawer.open .drawer-panel { transform: translateY(0); }.drawer-header { margin-bottom: 14px; }.drawer-media img { max-height: 35dvh; }.drawer h2 { font-size: 22px; }.detail-grid { margin: 14px 0; }.drawer-actions .action { flex: 1 1 auto; text-align: center; }.load-more { min-height: 64px; flex-wrap: wrap; gap: 8px; }.about-page h1 { font-size: clamp(34px, 9vw, 48px) !important; }.source-grid { grid-template-columns: 1fr; gap: 10px; }.source-card, .license-block { padding: 16px; } }
@media (max-width: 380px) { .library-card { min-height: 164px; }.view-toggle button { padding: 0 6px; font-size: 10px; }.gallery, .gallery.compact { gap: 7px; }.gallery.list .resource-card { grid-template-columns: 66px minmax(0, 1fr); } }

/* Kol-inspired motion and grouped angle browsing. */
.hero { animation: rise-in .55s both; }
.hero h1 span { color: transparent; background: linear-gradient(110deg, var(--text) 12%, var(--cyan) 45%, var(--text) 72%); background-size: 220% auto; background-clip: text; animation: shine 5s linear infinite; }
.chip { background: var(--surface); transition: transform .16s, border-color .16s, background .16s, box-shadow .16s; }
.chip:hover { transform: translateY(-1px); }
.chip:hover, .chip.active { color: var(--cyan); box-shadow: 0 0 16px color-mix(in srgb, var(--cyan) 14%, transparent); }
.chip b { color: var(--gold); }
.resource-card { animation: rise-in .35s both; }
.resource-card:hover { box-shadow: var(--shadow), 0 0 22px var(--cyan-soft); }
.resource-card img.card-cover { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--surface-3); }
.resource-card.pose img.card-cover, .resource-card.depth img.card-cover { aspect-ratio: 4 / 3; object-fit: contain; }
.view-strip { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 3px; margin-top: 9px; }
.view-thumb { min-width: 0; padding: 5px 4px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-3); color: var(--muted); font: 10px var(--mono); overflow: hidden; transition: border-color .16s, box-shadow .16s, transform .16s, color .16s; }
.view-thumb:hover, .view-thumb.active { border-color: var(--cyan); box-shadow: 0 0 10px var(--cyan-soft); color: var(--cyan); transform: translateY(-1px); }
.angle-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.angle-tab { padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 12px; }
.angle-tab.active { border-color: var(--cyan); background: var(--cyan-soft); color: var(--cyan); }
.action:hover { border-color: var(--cyan); }
@keyframes rise-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shine { to { background-position: 220% center; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }

/* Shared visual language aligned with the Kol reference surface. */
.hero-side { box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.library-card .glyph { display: grid; place-items: center; width: 34px; height: 34px; color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 42%, transparent); border-radius: 10px; }
.library-card .glyph svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.search-box { border-radius: 999px; }
.search-box svg { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: var(--faint); stroke-width: 2; stroke-linecap: round; }
.select, .view-toggle { border-radius: 999px; }
.view-toggle button { border-radius: 999px; }
.view-toggle button.active { background: var(--cyan-soft); color: var(--cyan); }
.resource-card { box-shadow: 0 2px 12px rgba(0,0,0,.12); }
[data-theme="light"] .resource-card { box-shadow: 0 4px 20px rgba(120,113,108,.08); }
.stats { position: relative; isolation: isolate; border-color: var(--line-strong); background: color-mix(in srgb, var(--line-strong) 72%, transparent); box-shadow: 0 16px 54px rgba(0,0,0,.12); }
.stats::before, .stats::after { position: absolute; z-index: 2; content: ""; inset: -1px; border-radius: inherit; pointer-events: none; }
.stats::before { background: linear-gradient(112deg, transparent 4%, var(--ambient-cyan) 28%, transparent 49%, var(--ambient-rose) 76%, transparent 96%); opacity: .72; }
.stats::after { inset: -2px; background: radial-gradient(430px circle at var(--spot-x, 50%) var(--spot-y, 50%), var(--spot-core) 0%, color-mix(in srgb, var(--spot-edge) 46%, transparent) 22%, transparent 68%), radial-gradient(150px circle at var(--spot-x, 50%) var(--spot-y, 50%), var(--spot-edge), transparent 76%); opacity: 0; transition: opacity .18s ease; }
.stats.spotlight-active { border-color: color-mix(in srgb, var(--spot-edge) 62%, var(--line-strong)); box-shadow: 0 12px 46px color-mix(in srgb, var(--spot-edge) 15%, transparent), 0 0 28px color-mix(in srgb, var(--spot-core) 14%, transparent); }
.stats.spotlight-active::after { opacity: 1; }
.stat { z-index: 1; }
.stat { position: relative; overflow: hidden; background: color-mix(in srgb, var(--surface) 90%, var(--cyan-soft)); }
.stat b { font-variant-numeric: tabular-nums; }
.stat b.counting { animation: count-arrive .42s cubic-bezier(.2,.8,.2,1) both; }
@keyframes count-arrive { 0% { opacity: .28; transform: translateY(7px); filter: blur(3px); } 72% { opacity: 1; transform: translateY(-1px); filter: blur(0); } 100% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .icon-button svg, body, #ambient-canvas { transition-duration: .01ms !important; } .stat b.counting { animation: none; } }

/* Pose/depth thumbnails are native 300x400 assets; match that ratio so contain never creates side gutters. */
.resource-card.pose img.card-cover,
.resource-card.depth img.card-cover { aspect-ratio: 3 / 4; object-fit: cover; }
.resource-card.pose .view-strip img,
.resource-card.depth .view-strip img { aspect-ratio: 3 / 4; object-fit: cover; }
.gallery.list .resource-card.pose img.card-cover,
.gallery.list .resource-card.depth img.card-cover { aspect-ratio: 1; }

.resource-card { position: relative; isolation: isolate; }
.resource-card::before,
.resource-card::after { position: absolute; z-index: 1; inset: 0; border-radius: inherit; content: ""; pointer-events: none; }
.resource-card::before { background: radial-gradient(420px circle at var(--spot-x, 50%) var(--spot-y, 50%), color-mix(in srgb, var(--spot-core) 78%, transparent), transparent 70%); opacity: 0; transition: opacity .28s ease; }
.resource-card::after { inset: 1px; background: radial-gradient(170px circle at var(--spot-x, 50%) var(--spot-y, 50%), color-mix(in srgb, var(--spot-edge) 58%, transparent), transparent 74%); opacity: 0; transition: opacity .2s ease; }
.resource-card.spotlight-active { border-color: color-mix(in srgb, var(--spot-edge) 72%, var(--line-strong)); box-shadow: 0 12px 34px color-mix(in srgb, var(--spot-edge) 15%, transparent), 0 0 22px color-mix(in srgb, var(--spot-core) 18%, transparent); }
.resource-card.spotlight-active::before,
.resource-card.spotlight-active::after { opacity: 1; }
.resource-card > img,
.resource-card > .card-body { position: relative; z-index: 0; }

.library-card { --card-glow: 56,189,248; --card-glow-color: rgba(var(--card-glow),.12); --card-edge-color: rgba(var(--card-glow),.24); }
.library-card.pose { --card-glow: 245,158,11; }
.library-card.depth { --card-glow: 52,211,153; }
.library-card.costume { --card-glow: 236,72,153; }
.library-card.face { --card-glow: 56,189,248; }
.library-card::before,
.library-card::after { position: absolute; z-index: 0; inset: 0; border-radius: inherit; content: ""; pointer-events: none; }
.library-card::before { background: radial-gradient(300px circle at var(--spot-x, 50%) var(--spot-y, 50%), var(--card-glow-color), transparent 72%); opacity: 0; transition: opacity .32s ease; }
.library-card::after { inset: 1px; border: 1px solid transparent; background: radial-gradient(135px circle at var(--spot-x, 50%) var(--spot-y, 50%), var(--card-edge-color), transparent 74%) border-box; opacity: 0; transition: opacity .25s ease; }
.library-card.spotlight-active { border-color: rgba(var(--card-glow),.3); box-shadow: 0 10px 30px rgba(var(--card-glow),.07); }
.library-card.spotlight-active::before,
.library-card.spotlight-active::after { opacity: 1; }
.library-card > * { position: relative; z-index: 1; }
[data-theme="light"] .library-card { --card-glow-color: rgba(var(--card-glow),.075); --card-edge-color: rgba(var(--card-glow),.16); }