:root{
  --bg:#F7F7F5;
  --surface:#FFFFFF;
  --ink:#3C3C3C;
  --ink-soft:#767677;
  --line:#E5E5E5;
  --blue:#1CB0F6;
  --blue-dark:#1899D6;
  --blue-bg:#DDF4FF;
  --green:#58CC02;
  --green-dark:#46A302;
  --green-bg:#D7FFB8;
  --gold:#FFC800;
  --gold-bg:#FFF3C4;
  --purple:#8C52FF;
  --purple-bg:#EDE3FF;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F1216; --surface:#1B1F24; --ink:#F1F1F1; --ink-soft:#9AA1A8; --line:#2C3138;
    --blue-bg:#0E2C3A; --green-bg:#1E3A0E; --gold-bg:#3A2E0E; --purple-bg:#2A1F44;
  }
}
:root[data-theme="dark"]{
  --bg:#0F1216; --surface:#1B1F24; --ink:#F1F1F1; --ink-soft:#9AA1A8; --line:#2C3138;
  --blue-bg:#0E2C3A; --green-bg:#1E3A0E; --gold-bg:#3A2E0E; --purple-bg:#2A1F44;
}

*{box-sizing:border-box;}
html{color-scheme:light dark;}
body{
  margin:0;
  background: radial-gradient(circle at 12% 0%, var(--blue-bg), transparent 45%), var(--bg);
  color:var(--ink);
  font-family:"Nunito", "Segoe UI", Verdana, sans-serif;
  padding-inline:20px;
  padding-block:36px;
  min-height:100vh;
}
.wrap{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:32px; align-items:center;}

.brand{display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;}
.brand img{width:76px; height:auto;}
.brand h1{font-size:clamp(26px,5vw,36px); font-weight:800; margin:0; text-wrap:balance;}
.brand p{color:var(--ink-soft); font-size:16px; font-weight:600; max-width:48ch; margin:0; line-height:1.55;}

.tracks{width:100%; display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media (max-width:560px){ .tracks{grid-template-columns:1fr;} }

.track-card{
  background:var(--surface); border:2px solid var(--line); border-radius:22px;
  padding:26px 22px; display:flex; flex-direction:column; gap:12px; text-align:left;
  text-decoration:none; color:inherit;
  transition:transform .1s ease, border-color .15s ease;
}
.track-card:hover{transform:translateY(-3px); border-color:var(--accent);}
.track-card:focus-visible{outline:3px solid var(--accent); outline-offset:3px;}
.track-card.adult{--accent:var(--blue);}
.track-card.kids{--accent:var(--purple);}

.track-icon{
  width:56px; height:56px; border-radius:16px;
  display:flex; align-items:center; justify-content:center; font-size:28px;
}
.track-card.adult .track-icon{background:var(--blue-bg);}
.track-card.kids .track-icon{background:var(--purple-bg);}

.track-card h2{font-size:20px; font-weight:800; margin:0;}
.track-card p{font-size:14px; color:var(--ink-soft); font-weight:600; line-height:1.55; margin:0;}

.recommended-pill{
  display:inline-flex; align-self:flex-start; font-size:11.5px; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase; padding:4px 10px; border-radius:999px;
}
.track-card.adult .recommended-pill{background:var(--blue-bg); color:var(--blue-dark);}
.track-card.kids .recommended-pill{background:var(--purple-bg); color:#6E3AD6;}

.go-link{font-size:14px; font-weight:800; color:var(--accent); margin-top:auto;}

.hub-footer{text-align:center; font-size:12.5px; color:var(--ink-soft); font-weight:600; max-width:56ch;}
.hub-footer a{color:var(--blue-dark); font-weight:700;}

[hidden]{display:none !important;}