:root{
  --bg:#07080c;
  --ink:#f2f5f8;
  --muted:#8a94a1;
  --accent:#64f0c8;
  --accent-2:#4aa8ff;
  --card:rgba(14,17,24,.78);
  --line:rgba(255,255,255,.08);
  --chip:#12151c;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{min-height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter","Helvetica Neue",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover,a:focus-visible{color:#9affdf}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.skip-link{
  position:absolute;left:-999px;top:0;background:var(--accent);color:#04110c;padding:.6rem 1rem;z-index:20
}
.skip-link:focus{left:1rem;top:1rem}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0
}

.field{position:fixed;inset:0;z-index:0;pointer-events:none}
.glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.46}
.glow.a{
  width:52vmax;height:52vmax;left:-14vmax;top:-18vmax;
  background:radial-gradient(circle at 50% 50%, rgba(100,240,200,.42), transparent 66%);
  animation:drift-a 22s ease-in-out infinite alternate;
}
.glow.b{
  width:46vmax;height:46vmax;right:-16vmax;bottom:-20vmax;
  background:radial-gradient(circle at 50% 50%, rgba(74,168,255,.38), transparent 66%);
  animation:drift-b 27s ease-in-out infinite alternate;
}
.grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 45%, #000 30%, transparent 78%);
}
.vignette{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 90% 80% at 50% 50%, transparent 40%, rgba(4,5,8,.92) 100%);
}

.site-header,.site-main,.site-footer{position:relative;z-index:1}
.site-header{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:1.4rem clamp(1.1rem,4vw,2.6rem) .4rem;
}
.wordmark{
  display:flex;align-items:center;gap:.55rem;
  font-size:clamp(1.6rem,4.6vw,2.4rem);
  font-weight:600;letter-spacing:-.045em;color:var(--ink);text-decoration:none;
}
.wordmark .bolt{width:.62em;height:.62em;color:var(--accent);filter:drop-shadow(0 0 12px rgba(100,240,200,.55))}
.wordmark .light{color:var(--muted);font-weight:300}
.tagline{margin:0;color:var(--muted);font-weight:300;max-width:36ch}

.site-main{padding:1rem clamp(1.1rem,4vw,2.6rem) 6rem;max-width:1280px;margin:0 auto}
.site-main h1{
  margin:.2rem 0 .6rem;
  font-size:clamp(1.8rem,5vw,3.1rem);
  letter-spacing:-.04em;line-height:1.1;font-weight:600;
}
.lede{margin:0 0 1.6rem;color:var(--muted);max-width:62ch;font-size:1.05rem;font-weight:300}

.search-panel{
  display:grid;grid-template-columns:1fr 1fr auto;gap:.8rem 1rem;align-items:end;
  padding:1rem 1.1rem 1.05rem;
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  backdrop-filter:blur(16px);
  margin-bottom:1.4rem;
}
.search-field label{
  display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem
}
.search-field input{
  width:100%;border:1px solid var(--line);background:#0b0d13;color:var(--ink);
  border-radius:12px;padding:.7rem .85rem;font:inherit
}
.search-submit{
  border:0;border-radius:12px;background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#04110c;font-weight:600;padding:.72rem 1.1rem;cursor:pointer;min-height:44px
}
.search-hint{grid-column:1/-1;margin:.15rem 0 0;color:var(--muted);font-size:.88rem}

.catalog-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:.75rem
}
.design-card{
  background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;min-height:100%;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.design-card:hover,.design-card:focus-within{
  transform:translateY(-2px);
  border-color:rgba(100,240,200,.35);
  box-shadow:0 12px 28px rgba(0,0,0,.35),0 0 0 1px rgba(100,240,200,.12);
}
.design-card__image{background:#0b0d13;aspect-ratio:1;overflow:hidden}
.design-card__image img{width:100%;height:100%;object-fit:cover}
.design-card__body{padding:.6rem .65rem .7rem}
.design-card__title{
  margin:0 0 .45rem;font-size:.86rem;letter-spacing:-.02em;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.design-card__title a{color:var(--ink);text-decoration:none}
.design-card__title a:hover{color:var(--accent)}
.design-card__description{
  margin:-.15rem 0 .5rem;color:var(--muted);font-size:.72rem;font-weight:300;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden
}

.tag-groups{display:flex;flex-direction:column;gap:.45rem}
.tag-group__label{
  margin:0 0 .22rem;
  font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600
}
.tag-row{display:flex;flex-wrap:wrap;gap:.28rem;margin:0}
.tag-chip{
  display:inline-flex;align-items:center;min-height:26px;padding:.1rem .5rem;
  border-radius:999px;font-size:.72rem;text-decoration:none;border:1px solid transparent;line-height:1.2
}
.tag-chip--empty{color:var(--muted);border-color:var(--line)}

.shop-link{
  display:inline-flex;align-items:center;gap:.22rem;
  min-height:26px;padding:.12rem .5rem .12rem .55rem;
  border-radius:8px;font-size:.72rem;font-weight:600;text-decoration:none;
  background:#12324a;color:#c8e8ff;border:1px solid rgba(74,168,255,.55)
}
.shop-link:hover,.shop-link:focus-visible{color:#fff;background:#18405c;border-color:#4aa8ff}
.shop-link--collection{
  background:var(--accent);color:#04110c;border-color:transparent;
  box-shadow:0 0 10px rgba(100,240,200,.28)
}
.shop-link--collection:hover,.shop-link--collection:focus-visible{
  color:#04110c;background:#9affdf;border-color:transparent;
  box-shadow:0 0 14px rgba(100,240,200,.42)
}
.shop-link__icon{flex-shrink:0;opacity:.9}

.theme-chip{
  display:inline-flex;align-items:center;
  min-height:24px;padding:.08rem .48rem;
  border-radius:999px;font-size:.7rem;font-weight:500;text-decoration:none;
  background:transparent;color:var(--accent);border:1px dashed rgba(100,240,200,.4)
}
.theme-chip:hover,.theme-chip:focus-visible{color:#9affdf;border-style:solid;background:rgba(100,240,200,.08)}
.theme-chip__hash{color:var(--muted);margin-right:.12em;font-weight:400}

.detail .tag-groups{gap:.7rem;margin:1rem 0 1.2rem}
.detail .shop-link,.detail .theme-chip{font-size:.82rem;min-height:30px;padding:.2rem .7rem}

.pager{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.8rem;margin:1.4rem 0 0}
.pager__meta{margin:0;color:var(--muted)}
.pager__list{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0}
.pager__link{
  display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;
  padding:.3rem .7rem;border-radius:10px;border:1px solid var(--line);color:var(--ink);text-decoration:none
}
.pager__link[aria-current="page"]{background:var(--accent);color:#04110c;border-color:transparent}

.empty-state,.not-found{
  padding:2.4rem 1rem;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:18px
}

.detail{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(16rem,.9fr);gap:1.6rem;align-items:start
}
.detail__image{
  background:#0b0d13;border:1px solid var(--line);border-radius:22px;overflow:hidden
}
.detail__image img{width:100%;height:auto}
.detail__meta h1{font-size:clamp(1.6rem,4vw,2.4rem)}
.site-footer{
  position:relative;z-index:1;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.4rem clamp(1.1rem,4vw,2.6rem);
  font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;color:#5e6773
}
.status{display:flex;align-items:center;gap:.55rem}
.dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(100,240,200,.55);animation:ping 2.6s ease-out infinite}
.links{display:flex;gap:1.4rem}
.site-footer a{color:#5e6773;text-decoration:none;border-bottom:1px solid transparent}
.site-footer a:hover,.site-footer a:focus-visible{color:var(--accent);border-bottom-color:rgba(100,240,200,.45)}
.site-footer a.merch-cta{
  color:var(--accent);font-weight:600;border-bottom-color:transparent
}
.site-footer a.merch-cta:hover,.site-footer a.merch-cta:focus-visible{
  color:#9affdf;border-bottom-color:rgba(100,240,200,.55)
}
.merch-cta .shop-link__icon{width:11px;height:11px;opacity:.85}

@keyframes drift-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(9vmax,7vmax,0) scale(1.14)}}
@keyframes drift-b{from{transform:translate3d(0,0,0) scale(1.08)}to{transform:translate3d(-8vmax,-6vmax,0) scale(.94)}}
@keyframes ping{
  0%{box-shadow:0 0 0 0 rgba(100,240,200,.5)}
  70%{box-shadow:0 0 0 9px rgba(100,240,200,0)}
  100%{box-shadow:0 0 0 0 rgba(100,240,200,0)}
}

@media (max-width:820px){
  .search-panel{grid-template-columns:1fr}
  .detail{grid-template-columns:1fr}
  .site-footer{flex-direction:column;align-items:flex-start}
}
@media (max-width:420px){
  .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}