:root{
  --ink:#071A33;
  --cream:#FFFDF0;
  --paper:#FBF7ED;
  --panel:rgba(255,253,240,.96);
  --purple:#B77CFF;
  --green:#A8FF45;
  --pink:#FF2E93;
  --muted:#4C5A6E;
  --overlay:rgba(7,26,51,.52);
  --shadow:8px 8px 0 var(--ink);
  --radius-lg:34px;
  --radius-md:18px;
}

body[data-theme="dark"]{
  --ink:#F7F4E8;
  --cream:#071A33;
  --paper:#0D284C;
  --panel:rgba(13,40,76,.96);
  --purple:#8D62FF;
  --green:#82D62E;
  --pink:#FF4AA3;
  --muted:#D7DFEC;
  --overlay:rgba(0,0,0,.66);
  --shadow:8px 8px 0 rgba(247,244,232,.86);
}

*{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}
button{font:inherit;color:inherit}

.modal{
  position:fixed;
  inset:0;
  z-index:30;
  display:grid;
  place-items:center;
  padding:18px;
  background:var(--overlay);
  backdrop-filter:blur(16px) saturate(.9);
  -webkit-backdrop-filter:blur(16px) saturate(.9);
}
.modal.is-hidden{display:none}
body.modal-open .page{
  filter:blur(10px);
  pointer-events:none;
  user-select:none;
}

.welcome-card,
.settings-card{
  width:min(100%,420px);
  padding:22px;
  border:5px solid var(--ink);
  border-radius:28px;
  background:var(--panel);
  box-shadow:var(--shadow);
}
.settings-head h3{
  margin:0;
  font-family:"Pixelify Sans", monospace;
  font-size:clamp(30px, 9vw, 44px);
  line-height:.94;
  letter-spacing:-.03em;
}
.settings-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:16px;
}
.modal-close{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  cursor:pointer;
  border:3px solid var(--ink);
  border-radius:14px;
  background:var(--cream);
  box-shadow:4px 4px 0 var(--ink);
  font-size:24px;
  font-weight:800;
  line-height:1;
}
.welcome-section{display:grid;gap:8px;margin-top:14px}
.welcome-card{
  padding-top:20px;
}
.welcome-section-first{
  margin-top:0;
}

.choice-label{
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice-button,.start-button,.icon-control,.theme-toggle{
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.choice-button,
.start-button,
.icon-control{
  border:3px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
}
.choice-button{
  min-height:48px;
  border-radius:15px;
  background:var(--cream);
  font-weight:800;
}
.choice-button.is-active{background:var(--green);color:#071A33}
.start-button{
  width:100%;
  min-height:56px;
  margin-top:20px;
  border-radius:18px;
  background:var(--pink);
  color:#fff;
  font-size:16px;
  font-weight:900;
}

.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:18px 16px 24px;
  border:5px solid var(--ink);
  border-radius:var(--radius-lg);
  background:var(--panel);
  box-shadow:var(--shadow);
}
.top-controls{
  position:relative;
  z-index:3;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.icon-control{
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  border-radius:18px;
  background:var(--cream);
}
.lang-icon{
  position:relative;
  display:block;
  width:26px;
  height:26px;
}
.lang-ring{
  position:absolute;
  inset:0;
  border:3px solid #69B7E6;
  border-radius:999px;
}
.lang-line{
  position:absolute;
  background:#69B7E6;
  border-radius:999px;
}
.lang-line-h{left:3px; right:3px; top:11px; height:2px;}
.lang-line-v{top:3px; bottom:3px; left:11px; width:2px;}
.lang-line-l,.lang-line-r{top:3px; bottom:3px; width:2px;}
.lang-line-l{left:7px;}
.lang-line-r{right:7px;}
.theme-toggle{
  border:0;
  background:transparent;
  padding:0;
}
.theme-toggle-rail{
  position:relative;
  display:block;
  width:96px;
  height:58px;
  border:3px solid #071A33;
  border-radius:999px;
  background:#FFFDF0;
  box-shadow:4px 4px 0 #071A33;
  overflow:hidden;
}
.theme-toggle-thumb{
  position:absolute;
  top:6px;
  left:6px;
  width:40px;
  height:40px;
  border:3px solid #071A33;
  border-radius:999px;
  background:#FFD84D;
  box-shadow:none;
  transition:transform .28s ease, background .28s ease;
}
.theme-toggle.is-dark .theme-toggle-thumb{
  transform:translateX(36px);
  background:#071A33;
}
.hero{
  position:relative;
  z-index:2;
  text-align:center;
}
.mascot-stage{
  width:min(220px, 54vw);
  margin:6px 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));
}
body[data-theme="dark"] .mascot{filter:drop-shadow(4px 7px 0 rgba(247,244,232,.12))}
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:25ch;
  color:var(--muted);
  font-size:17px;
  line-height:1.45;
  font-weight:700;
}
.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:332px;
  animation: twinkleLeft 1.6s ease-in-out infinite, floatLeft 4.4s ease-in-out infinite;
}
.spark-right{
  right:52px;
  top:350px;
  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:50px 1fr;
  align-items:center;
  gap:14px;
  min-height:70px;
  padding:12px 16px;
  border:4px solid var(--ink);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow);
  font-size:17px;
  font-weight:800;
}
.green{background:var(--green);color:#071A33}
.purple{background:var(--purple);color:#FFFFFF}
.pink{background:var(--pink);color:#FFFFFF}
.icon-box, .group-num, .group-toggle{
  display:grid;
  place-items:center;
  border:3px solid var(--ink);
  background:#FFFDF0;
  color:#071A33;
  box-shadow:3px 3px 0 var(--ink);
}
.icon-box{
  width:46px;
  height:46px;
  border-radius:14px;
  font-family:"Inter", system-ui, -apple-system, sans-serif;
  font-size:31px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.04em;
}
.icon-target-symbol{
  font-size:33px;
  font-weight:800;
}
.icon-heart-symbol{
  font-size:34px;
  font-weight:800;
  padding-bottom:2px;
}
.icon-pencil-symbol{
  font-size:31px;
  font-weight:800;
  padding-top:1px;
  padding-left:1px;
}
.action-icon{
  position:relative;
  display:block;
  width:18px;
  height:18px;
}
.action-icon-collection{
  border:3px solid #071A33;
  border-radius:999px;
}
.action-icon-collection::before,
.action-icon-collection::after{
  content:"";
  position:absolute;
  background:#071A33;
  border-radius:999px;
}
.action-icon-collection::before{
  left:50%; top:2px; bottom:2px; width:2px; transform:translateX(-50%);
}
.action-icon-collection::after{
  top:50%; left:2px; right:2px; height:2px; transform:translateY(-50%);
}
.action-icon-consult::before,
.action-icon-consult::after,
.action-icon-consult{
  background:#071A33;
}
.action-icon-consult{
  width:14px; height:14px; transform:rotate(45deg); border-radius:4px;
}
.action-icon-consult::before,
.action-icon-consult::after{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:999px;
}
.action-icon-consult::before{width:20px; height:3px;}
.action-icon-consult::after{width:3px; height:20px;}
.action-icon-order{
  width:16px; height:4px; background:#071A33; border-radius:999px; transform:rotate(-40deg);
}
.action-icon-order::before{
  content:""; position:absolute; right:-2px; top:-2px; width:0; height:0; border-left:7px solid #071A33; border-top:4px solid transparent; border-bottom:4px solid transparent;
}
.action-icon-order::after{
  content:""; position:absolute; left:-3px; top:-2px; width:4px; height:8px; background:#071A33; border-radius:3px;
}
.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;color:#071A33}
.group-card:nth-of-type(4n+2){background:#E1FF9A;color:#071A33}
.group-card:nth-of-type(4n+3){background:#FFFDF0;color:#071A33}
.group-card:nth-of-type(4n+4){background:#FFD2EA;color:#071A33}
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;color:#071A33}
.group-title{font-size:15px;line-height:1.15;font-weight:800}
.group-sub{margin-top:2px;font-size:12px;opacity:.78;font-weight:700}
.group-toggle{
  position:relative;
  width:30px;height:30px;border-radius:10px;
}
.group-toggle::before,
.group-toggle::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  background:#071A33;
  border-radius:999px;
  transform:translate(-50%,-50%);
}
.group-toggle::before{width:14px;height:3px;}
.group-toggle::after{width:3px;height:14px; transition:opacity .18s ease;}
.group-card[open] .group-toggle{
  background:var(--green);
}
.group-card[open] .group-toggle::after{
  opacity:0;
}
.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 #071A33;
  border-radius:13px;
  background:rgba(255,255,255,.82);
  color:#071A33;
  font-size:12px;
  line-height:1.18;
  font-weight:700;
}

@media (hover:hover){
  .action:hover,.mini-link:hover,.group-card:hover,.choice-button:hover,.start-button:hover,.icon-control:hover,.theme-toggle:hover{
    transform:translate(-2px,-2px);
  }
  .theme-toggle:hover .theme-toggle-rail,
  .icon-control:hover,
  .choice-button:hover,
  .start-button:hover{
    box-shadow:10px 10px 0 var(--ink);
  }
  .action:hover,.mini-link:hover,.group-card:hover{
    box-shadow:10px 10px 0 var(--ink);
  }
}
.action:active,.mini-link:active,.choice-button:active,.start-button:active,.icon-control:active{
  transform:translate(5px,5px);
  box-shadow:2px 2px 0 var(--ink);
}
.theme-toggle:active .theme-toggle-rail{
  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)}
}

body[data-theme="dark"] .icon-control,
body[data-theme="dark"] .choice-button,
body[data-theme="dark"] .modal-close{
  background:#0B203D;
  color:#F7F4E8;
}
body[data-theme="dark"] .icon-control .globe-icon{
  color:#69B8E8;
}
body[data-theme="dark"] .choice-button.is-active{
  background:var(--green);
  color:#071A33;
}
body[data-theme="dark"] .welcome-card,
body[data-theme="dark"] .settings-card{
  background:rgba(13,40,76,.94);
}
body[data-theme="dark"] .welcome-card h2,
body[data-theme="dark"] .settings-head h3,
body[data-theme="dark"] .choice-label{
  color:#F7F4E8;
}
body[data-theme="dark"] .group-title,
body[data-theme="dark"] .group-sub,
body[data-theme="dark"] summary,
body[data-theme="dark"] .mini-link{
  color:#071A33;
}

@media (max-width:420px){
  .phone-card{padding-left:14px;padding-right:14px}
  .spark-left{left:30px;top:318px;width:46px}
  .spark-right{right:34px;top:334px;width:46px}
  .subtitle{font-size:16px}
  .action{font-size:16px;grid-template-columns:50px 1fr;min-height:70px}
  .icon-box{width:44px;height:44px;font-size:30px;border-radius:13px}
  .icon-target-symbol{font-size:32px}
  .icon-heart-symbol{font-size:33px}
  .icon-pencil-symbol{font-size:30px}
  .group-links{padding-left:12px}
  .theme-toggle-rail{width:92px;height:54px}
  .theme-toggle-thumb{width:36px;height:36px}
  .theme-toggle.is-dark .theme-toggle-thumb{transform:translateX(30px)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *, *::before, *::after{animation:none!important;transition:none!important}
}

body[data-theme="dark"] .lang-ring, body[data-theme="dark"] .lang-line{ background-color:#8ED1FF; }
body[data-theme="dark"] .lang-ring{ border-color:#8ED1FF; }


body[data-theme="dark"] .theme-toggle-rail{
  background:rgba(247,244,232,.96);
  border-color:#071A33;
  box-shadow:4px 4px 0 #071A33;
}
body[data-theme="dark"] .theme-toggle-thumb{
  border-color:#071A33;
  box-shadow:none;
}