* { box-sizing: border-box; }
:root {
  --bg: #0c0a14; --panel: #141020; --line: rgba(160,140,255,.16);
  --ink: #f2effc; --muted: #a79fc4; --blue: #1e90ff; --pink: #ff5ea8;
}
html { color-scheme: dark; }
body {
  margin: 0; color: var(--ink); font-family: Nunito, system-ui, sans-serif;
  background:
    radial-gradient(900px 520px at 10% -10%, rgba(30,144,255,.18), transparent 60%),
    radial-gradient(800px 520px at 90% 0%, rgba(255,94,168,.14), transparent 62%),
    var(--bg);
  min-height: 100vh;
}
.notice {
  font-size: .84rem; font-weight: 700; text-align: center; padding: .65rem 1rem;
  color: #ffe9f4; background: linear-gradient(90deg, rgba(255,94,168,.22), rgba(30,144,255,.22));
  border-bottom: 1px solid var(--line);
}
.notice strong { color: #fff; }
.wrap { max-width: 72rem; margin: 0 auto; padding: 1.6rem 1.2rem 3rem; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; }
.brand img { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); }
.brand strong { display: block; font-family: "Baloo 2", sans-serif; font-size: 1.25rem; line-height: 1; }
.brand small { color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.nav { display: flex; gap: .5rem; flex-wrap: wrap; }
.btn {
  text-decoration: none; font-weight: 800; font-size: .85rem; padding: .55rem .95rem; border-radius: 999px; color: #fff;
  background: linear-gradient(135deg, #ff5ea8, #b04dff); box-shadow: 0 10px 24px rgba(200,80,255,.25);
}
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); box-shadow: none; }
.btn:hover { filter: brightness(1.07); }
.hero { margin: 2.2rem 0 1.6rem; max-width: 40rem; }
.hero h1 { font-family: "Baloo 2", sans-serif; font-size: clamp(2.1rem, 6vw, 3.4rem); letter-spacing: -.03em; margin: 0 0 .4rem; }
.hero p { color: var(--muted); font-size: 1rem; margin: 0; line-height: 1.6; }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.product { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.art {
  position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden;
  background:
    radial-gradient(120% 120% at 20% 0%, color-mix(in srgb, var(--c1) 55%, transparent), transparent 60%),
    linear-gradient(135deg, var(--c1), var(--c2));
}
.art::after {
  content: ""; position: absolute; inset: 0; opacity: .16; mix-blend-mode: overlay;
  background: repeating-linear-gradient(45deg, #fff 0 1px, transparent 1px 6px);
}
.mono { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: clamp(2.4rem, 7vw, 3.6rem); color: rgba(255,255,255,.92); letter-spacing: -.04em; text-shadow: 0 6px 24px rgba(0,0,0,.35); }
.kind { position: absolute; bottom: .6rem; left: .7rem; font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.tag { position: absolute; top: .55rem; right: .6rem; font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #24152f; background: rgba(255,255,255,.85); padding: .16rem .45rem; border-radius: 999px; }
.info { padding: .85rem .95rem 1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.row { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; }
.row h3 { margin: 0; font-size: .98rem; line-height: 1.25; }
.price { font-weight: 800; color: #fff; font-size: .95rem; }
.info p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.45; flex: 1; }
.buy {
  margin-top: .3rem; font: inherit; font-size: .85rem; font-weight: 800; color: #fff; cursor: pointer;
  border-radius: 999px; padding: .55rem .9rem; background: rgba(255,255,255,.10);
  border: 1px solid var(--line); transition: background .15s ease, color .15s ease;
}
.buy:hover { background: rgba(255,255,255,.16); }
.buy.nope { background: rgba(255,94,168,.18); color: #ffd6e8; }
.next { margin-top: 2.4rem; background: rgba(255,255,255,.035); border: 1px solid var(--line); border-radius: 18px; padding: 1.3rem 1.4rem; }
.next h2 { font-family: "Baloo 2", sans-serif; font-size: 1.4rem; margin: 0 0 .5rem; }
.next p { color: var(--muted); line-height: 1.6; margin: 0 0 .7rem; font-size: .92rem; }
.next .fine { font-size: .82rem; opacity: .9; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; background: rgba(255,255,255,.08); padding: .1rem .35rem; border-radius: 6px; }
footer { margin-top: 2.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--muted); font-size: .8rem; }
footer a { color: #b9a6ff; text-decoration: none; }