:root{
  --ink:#071A33;
  --cream:#FFFDF0;
  --paper:#FBF7ED;
  --purple:#B77CFF;
  --green:#A8FF45;
  --pink:#FF2E93;
  --white:#FFFFFF;
  --shadow:8px 8px 0 var(--ink);
  --radius-lg:34px;
  --radius-md:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  background:
    radial-gradient(circle at 20% 10%, rgba(183,124,255,.16), transparent 340px),
    radial-gradient(circle at 82% 8%, rgba(168,255,69,.16), transparent 280px),
    linear-gradient(180deg, var(--cream), var(--paper));
  font-family:"Inter",system-ui,-apple-system,sans-serif;
}
a{text-decoration:none;color:inherit}
.page{
  width:min(100%,520px);
  margin:0 auto;
  padding:max(14px, env(safe-area-inset-top)) 14px max(22px, env(safe-area-inset-bottom));
}
.phone-card{
  position:relative;
  overflow:hidden;
  min-height:calc(100vh - 28px);
  padding:28px 16px 24px;
  border:5px solid var(--ink);
  border-radius:var(--radius-lg);
  background:rgba(255,253,240,.96);
  box-shadow:var(--shadow);
}
.hero{
  position:relative;
  z-index:2;
  text-align:center;
}
.mascot-stage{
  width:min(240px, 56vw);
  margin:8px auto 8px;
  animation: mascotBob 3.2s ease-in-out infinite;
}
.mascot-squash{
  transform-origin:center bottom;
  animation: mascotFlipSquash 2s steps(1,end) infinite;
}
.mascot{
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(4px 7px 0 rgba(7,26,51,.18));
}
h1{
  margin:8px auto 12px;
  max-width:9ch;
  font-family:"Pixelify Sans", monospace;
  font-size:clamp(48px, 14vw, 78px);
  line-height:.88;
  letter-spacing:-.03em;
  font-weight:700;
}
.subtitle{
  margin:0 auto;
  max-width:20ch;
  font-size:18px;
  line-height:1.45;
  font-weight:500;
}
.spark{
  position:absolute;
  z-index:1;
  width:52px;
  pointer-events:none;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.35));
}
.spark-left{
  left:48px;
  top:320px;
  animation: twinkleLeft 1.6s ease-in-out infinite, floatLeft 4.4s ease-in-out infinite;
}
.spark-right{
  right:52px;
  top:338px;
  animation: twinkleRight 1.4s ease-in-out infinite .2s, floatRight 4.8s ease-in-out infinite .3s;
}
.action-stack{
  position:relative;
  z-index:2;
  display:grid;
  gap:14px;
  margin:26px 0 22px;
}
.action, .group-card, .mini-link{
  transition:transform .18s ease, box-shadow .18s ease;
}
.action{
  display:grid;
  grid-template-columns:44px 1fr;
  align-items:center;
  gap:14px;
  min-height:66px;
  padding:12px 16px;
  border:4px solid var(--ink);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow);
  font-size:17px;
  font-weight:800;
}
.purple{background:var(--purple)}
.green{background:var(--green)}
.pink{background:var(--pink)}
.icon-box, .group-num, .group-toggle{
  display:grid;
  place-items:center;
  border:3px solid var(--ink);
  background:var(--cream);
  box-shadow:3px 3px 0 var(--ink);
}
.icon-box{
  width:38px;height:38px;border-radius:11px;font-size:20px;font-weight:700;
}
.collection{
  position:relative;
  z-index:2;
  display:grid;
  gap:12px;
}
.collection-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:2px;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.collection-head span:last-child{
  padding:5px 9px;
  border:3px solid var(--ink);
  border-radius:999px;
  background:var(--pink);
  color:#fff;
}
.group-card{
  border:4px solid var(--ink);
  border-radius:18px;
  box-shadow:7px 7px 0 var(--ink);
  overflow:hidden;
}
.group-card:nth-of-type(4n+1){background:#F2DEFF}
.group-card:nth-of-type(4n+2){background:#E1FF9A}
.group-card:nth-of-type(4n+3){background:#FFFDF0}
.group-card:nth-of-type(4n+4){background:#FFD2EA}
summary{
  list-style:none;
  display:grid;
  grid-template-columns:42px 1fr 32px;
  align-items:center;
  gap:12px;
  min-height:72px;
  padding:12px;
  cursor:pointer;
}
summary::-webkit-details-marker{display:none}
.group-num{
  width:38px;height:38px;border-radius:11px;font-size:12px;font-weight:800;
}
.group-copy{min-width:0}
.group-title,.group-sub{display:block}
.group-title{font-size:15px;line-height:1.15;font-weight:800}
.group-sub{margin-top:4px;font-size:12px;opacity:.78}
.group-toggle{
  width:30px;height:30px;border-radius:10px;font-size:21px;font-weight:800;line-height:1;
}
.group-card[open] .group-toggle{
  background:var(--green);
  transform:rotate(45deg);
}
.group-links{
  display:grid;
  gap:8px;
  padding:0 12px 12px 66px;
}
.mini-link{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  min-height:42px;
  padding:10px 11px;
  border:3px solid var(--ink);
  border-radius:13px;
  background:rgba(255,255,255,.82);
  font-size:12px;
  line-height:1.18;
  font-weight:700;
}
@media (hover:hover){
  .action:hover,.mini-link:hover,.group-card:hover{
    transform:translate(-2px,-2px);
    box-shadow:10px 10px 0 var(--ink);
  }
}
.action:active,.mini-link:active{
  transform:translate(5px,5px);
  box-shadow:2px 2px 0 var(--ink);
}
@keyframes floatLeft{
  0%,100%{transform:translateY(0) rotate(0deg)}
  25%{transform:translateY(-7px) translateX(2px) rotate(-2deg)}
  50%{transform:translateY(4px) translateX(-3px) rotate(2deg)}
  75%{transform:translateY(-5px) translateX(3px) rotate(-2deg)}
}
@keyframes floatRight{
  0%,100%{transform:translateY(0) rotate(0deg)}
  20%{transform:translateY(-6px) translateX(-3px) rotate(3deg)}
  50%{transform:translateY(4px) translateX(2px) rotate(-2deg)}
  80%{transform:translateY(-7px) translateX(-2px) rotate(2deg)}
}
@keyframes twinkleLeft{
  0%,100%{opacity:.7; filter:drop-shadow(0 0 2px rgba(183,124,255,.4))}
  45%{opacity:1; filter:drop-shadow(0 0 16px rgba(183,124,255,.9))}
  50%{opacity:.45; filter:drop-shadow(0 0 1px rgba(183,124,255,.2))}
  60%{opacity:1; filter:drop-shadow(0 0 14px rgba(183,124,255,.85))}
}
@keyframes twinkleRight{
  0%,100%{opacity:.7; filter:drop-shadow(0 0 2px rgba(168,255,69,.4))}
  40%{opacity:1; filter:drop-shadow(0 0 16px rgba(168,255,69,.92))}
  50%{opacity:.4; filter:drop-shadow(0 0 1px rgba(168,255,69,.2))}
  62%{opacity:1; filter:drop-shadow(0 0 13px rgba(168,255,69,.85))}
}
@keyframes mascotBob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}
@keyframes mascotFlipSquash{
  0%   {transform:scaleX(1) scaleY(1)}
  12%  {transform:scaleX(1.08) scaleY(.92)}
  25%  {transform:scaleX(1) scaleY(1)}
  37%  {transform:scaleX(.92) scaleY(1.08)}
  50%  {transform:scaleX(-1) scaleY(1)}
  62%  {transform:scaleX(-1.08) scaleY(.92)}
  75%  {transform:scaleX(-1) scaleY(1)}
  87%  {transform:scaleX(-.92) scaleY(1.08)}
  100% {transform:scaleX(1) scaleY(1)}
}
@media (max-width:420px){
  .phone-card{padding-left:14px;padding-right:14px}
  .spark-left{left:30px;top:292px;width:46px}
  .spark-right{right:34px;top:308px;width:46px}
  .subtitle{font-size:16px}
  .action{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *, *::before, *::after{animation:none!important;transition:none!important}
}