:root{
  --peach:#ffd9c0;
  --cream:#fff6ec;
  --apricot:#ffb27a;
  --rose:#ff9a9e;
  --lav:#c9b8ff;
  --ink:#4a3b33;
  --ink-soft:#8a7668;
  --card:#fffdfa;
  --line:#f0e2d5;
  --radius:22px;
  --shadow:0 10px 30px rgba(120,80,50,0.10), 0 2px 8px rgba(120,80,50,0.06);
  --shadow-hover:0 18px 44px rgba(120,80,50,0.16), 0 4px 12px rgba(120,80,50,0.08);
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; }
body{
  font-family:"Nunito", system-ui, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(120% 80% at 15% -10%, #ffe9d6 0%, transparent 55%),
    radial-gradient(120% 90% at 100% 0%, #ffe0e6 0%, transparent 50%),
    linear-gradient(180deg, var(--cream) 0%, #fdeede 100%);
  background-attachment:fixed;
  min-height:100vh;
}
a{ color:inherit; text-decoration:none; }

/* ---- Hero ---- */
.hero{
  position:relative;
  max-width:1080px;
  margin:0 auto;
  padding:34px 22px 10px;
}
.hero-card{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  background:linear-gradient(120deg, #ffc9a3, #ffb0b8 60%, #d9c2ff);
  box-shadow:var(--shadow);
  padding:38px 30px;
  min-height:170px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.hero-card .hero-bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  opacity:0.55; mix-blend-mode:soft-light;
}
.hero-card .inner{ position:relative; z-index:1; }
.logo{
  display:flex; align-items:center; gap:12px; margin-bottom:8px;
}
.logo .mark{
  width:40px; height:40px; border-radius:13px;
  background:#fff; box-shadow:0 4px 14px rgba(0,0,0,0.12);
  display:grid; place-items:center;
}
.logo .mark span{ font-size:24px; }
.brand{
  font-family:"Baloo 2", sans-serif; font-weight:800;
  font-size:clamp(30px, 7vw, 46px); color:#fff; line-height:1;
  text-shadow:0 2px 0 rgba(160,90,70,0.25);
  letter-spacing:.5px;
}
.tagline{
  margin:2px 0 0; color:#fff; font-weight:700; font-size:clamp(14px,3.4vw,17px);
  opacity:.95; text-shadow:0 1px 0 rgba(160,90,70,0.2);
}

/* ---- Controls ---- */
.controls{
  max-width:1080px; margin:14px auto 0; padding:0 22px;
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
}
.search{
  flex:1; min-width:180px;
  display:flex; align-items:center; gap:8px;
  background:var(--card); border:1.5px solid var(--line);
  border-radius:999px; padding:10px 16px;
  box-shadow:var(--shadow);
}
.search input{
  border:none; outline:none; background:transparent; width:100%;
  font:inherit; color:var(--ink); font-weight:700;
}
.search input::placeholder{ color:var(--ink-soft); font-weight:600; }
.search svg{ color:var(--ink-soft); flex:none; }
.filters{ display:flex; gap:8px; overflow-x:auto; padding:2px; scrollbar-width:none; }
.filters::-webkit-scrollbar{ display:none; }
.chip{
  flex:none; cursor:pointer;
  padding:9px 16px; border-radius:999px;
  background:var(--card); border:1.5px solid var(--line);
  font-weight:800; font-size:14px; color:var(--ink-soft);
  transition:.15s;
}
.chip:hover{ border-color:var(--apricot); color:var(--ink); }
.chip.active{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ---- Grid ---- */
.grid{
  max-width:1080px; margin:22px auto 60px; padding:0 22px;
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
}
.card{
  position:relative;
  background:var(--card); border:1.5px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .18s cubic-bezier(.2,1,.3,1), box-shadow .18s;
  display:flex; flex-direction:column;
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-hover); }
.card.soon{ opacity:.72; }
.thumb-wrap{
  position:relative; aspect-ratio:16/10;
  display:grid; place-items:center;
  background:linear-gradient(160deg,#fff,#fff3e8);
  border-bottom:1.5px solid var(--line);
}
.thumb{ width:100%; height:100%; display:block; }
/* Native-emoji thumbnail (renders reliably on iOS, unlike canvas emoji) */
.glyph-thumb{ width:100%; height:100%; display:grid; place-items:center; }
.glyph-thumb .pane{
  width:66%; aspect-ratio:1; border-radius:30%;
  display:grid; place-items:center;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,0.5), 0 6px 16px rgba(120,80,50,0.14);
}
.glyph-thumb .pane span{
  font-size:clamp(40px, 15vw, 60px); line-height:1;
  /* prefer color-emoji fonts */
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}
.badge{
  position:absolute; top:10px; left:10px;
  font-size:11px; font-weight:900; letter-spacing:.6px;
  padding:4px 9px; border-radius:999px;
  background:rgba(255,255,255,0.9); color:var(--ink);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.card-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card h3{ margin:0; font-family:"Baloo 2"; font-weight:800; font-size:20px; }
.card p{ margin:0; color:var(--ink-soft); font-weight:600; font-size:14px; line-height:1.45; flex:1; }
.tags{ display:flex; gap:6px; flex-wrap:wrap; }
.tag{
  font-size:11px; font-weight:800; letter-spacing:.3px;
  padding:3px 9px; border-radius:999px;
  background:#fff2e6; color:#c07b45;
}
.play{
  margin-top:4px; align-self:flex-start;
  font-family:"Baloo 2"; font-weight:800; font-size:15px; color:#fff;
  padding:9px 20px; border-radius:999px; border:none; cursor:pointer;
  background:linear-gradient(180deg,#ff9f6b,#ff7e57);
  box-shadow:0 5px 0 #e0623c, 0 8px 16px rgba(224,98,60,.32);
  transition:transform .08s, box-shadow .08s;
}
.card:hover .play{ box-shadow:0 5px 0 #e0623c, 0 10px 22px rgba(224,98,60,.42); }
.play:active{ transform:translateY(4px); box-shadow:0 1px 0 #e0623c; }
.play.disabled{
  background:#e9ddd0; color:#a7937f; cursor:default;
  box-shadow:none;
}

.empty-note{
  grid-column:1/-1; text-align:center; color:var(--ink-soft);
  font-weight:700; padding:40px;
}

footer{
  max-width:1080px; margin:0 auto; padding:0 22px 40px;
  color:var(--ink-soft); font-weight:600; font-size:13px; text-align:center;
}
footer .count{ color:var(--ink); font-weight:800; }