:root { color-scheme: dark; font-family: Manrope, system-ui, sans-serif; color: #ecebed; background: #101113; }
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
body { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
button, a { color: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid #c4b4de; outline-offset: 5px; }
[hidden] { display: none !important; }
.inspo-app { max-width: 2560px; margin: auto; padding: 0 clamp(20px, 2.5vw, 64px) 64px; }
.inspo-header { display: flex; align-items: center; gap: 18px; padding: 30px 0 23px; border-bottom: 1px solid #ffffff12; }
h1 { font-size: 23px; font-weight: 600; letter-spacing: -.7px; margin: 0; white-space: nowrap; }
.icon-button { width: 40px; height: 40px; display: grid; place-items: center; flex-shrink: 0; border: 1px solid #ffffff19; border-radius: 50%; background: #ffffff05; text-decoration: none; transition: background 150ms; }
.icon-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon-button:hover { background: #ffffff13; }
.game-tabs { display: flex; gap: 26px; margin-left: auto; align-self: stretch; }
.game-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; color: #898a91; padding: 5px 0; font-size: 15px; font-weight: 600; }
.game-tabs button[aria-selected="true"] { color: #f1eff4; border-color: #c4b4de; }
.game-tabs button:hover { color: #ecebed; }
.category-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 24px 0 28px; }
.category-filters button { border: 1px solid transparent; border-radius: 7px; background: transparent; color: #939399; font-size: 13px; font-weight: 500; padding: 8px 13px; transition: color 120ms, background 120ms; }
.category-filters button:hover { color: #ecebed; background: #ffffff05; }
.category-filters button[aria-pressed="true"] { background: #e1d9ec12; color: #f3edf9; border-color: #e1d9ec19; }
.inspo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: 29px; }
.reference-card { display: block; padding: 0; margin: 0; border: 0; background: none; min-width: 0; text-align: left; border-radius: 6px; }
.reference-image { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: #1c1e22; }
.reference-image img { width: 100%; height: 100%; object-fit: contain; display: block; opacity: 0; transition: opacity 180ms; }
.reference-card.is-loaded img { opacity: 1; }
.reference-card:hover .reference-image { box-shadow: 0 0 0 1px #d9c7f34a; }
.reference-title { display: block; font-size: 14px; font-weight: 500; color: #b9b9c0; padding: 13px 1px 0; line-height: 1.5; }
.reference-card:hover .reference-title { color: #f3edf9; }
.reference-card.is-failed .reference-image::after { content: 'Retry image'; position: absolute; inset: 0; display: grid; place-items: center; color: #a6a2ae; font-size: 13px; }
.load-sentinel { height: 56px; display: grid; place-items: center; margin-top: 22px; }
.spinner { display: block; width: 22px; height: 22px; border: 2px solid #ffffff15; border-top-color: #ded7e7; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.inspo-status { text-align: center; color: #95939d; font-size: 14px; }
.inspo-status:not(:empty) { padding: 75px 0 20px; }
.retry-button { display: block; border: 1px solid #ffffff29; background: #242229; border-radius: 8px; margin: 0 auto; padding: 9px 17px; color: #eee9f4; }
body:has(.image-viewer[open]) { overflow: hidden; }
.image-viewer { max-width: none; max-height: none; width: 100%; height: 100%; padding: 0; border: 0; margin: 0; background: transparent; color: #eeeaf2; }
.image-viewer::backdrop { background: #08090bc7; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.viewer-shell { width: 100%; height: 100%; padding: 72px 80px 46px; display: grid; place-items: center; }
.viewer-shell figure { margin: 0; width: 100%; min-width: 0; pointer-events: none; }
.viewer-stage { height: calc(100dvh - 162px); display: grid; place-items: center; position: relative; }
.viewer-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 4px; box-shadow: 0 20px 80px #0006; pointer-events: auto; }
.viewer-stage[aria-busy="true"]::after { content: ''; position: absolute; bottom: 16px; right: 16px; width: 18px; height: 18px; border: 2px solid #ffffff33; border-top-color: white; border-radius: 50%; animation: spin .8s linear infinite; }
.viewer-shell figcaption { display: flex; justify-content: space-between; gap: 20px; font-size: 14px; padding-top: 20px; color: #cac6d1; }
#viewer-count { color: #908b99; white-space: nowrap; font-variant-numeric: tabular-nums; }
.viewer-close { position: absolute; right: 24px; top: 20px; }
.viewer-previous, .viewer-next { position: absolute; top: calc(50% - 20px); background: #141317b3; }
.viewer-previous { left: 20px; }
.viewer-next { right: 20px; }
.viewer-previous:disabled, .viewer-next:disabled { opacity: .2; cursor: default; }
.viewer-retry { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); font-size: 12px; }
@media (min-width: 1800px) { .inspo-grid { gap: 34px; } .reference-title { font-size: 15px; } }
@media (max-width: 900px) { .inspo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; } }
@media (max-width: 560px) {
  .inspo-header { flex-wrap: wrap; padding-top: 20px; gap: 14px; }
  .game-tabs { width: 100%; margin: 9px 0 -7px; gap: 24px; }
  .game-tabs button { padding: 6px 0 12px; }
  .category-filters { gap: 3px; padding: 19px 0 22px; }
  .category-filters button { font-size: 12px; padding: 7px 10px; }
  .inspo-grid { grid-template-columns: minmax(0, 1fr); gap: 25px; }
  .viewer-shell { padding: 75px 14px 70px; }
  .viewer-stage { height: calc(100dvh - 220px); }
  .viewer-shell figcaption { font-size: 12px; padding-top: 16px; }
  .viewer-previous, .viewer-next { top: auto; bottom: 24px; }
  .viewer-previous { left: calc(50% - 50px); }
  .viewer-next { right: calc(50% - 50px); }
  .viewer-retry { bottom: 77px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }