:root{
  color-scheme:light;
  --page-background:
    radial-gradient(circle at 8% 0%,rgba(245,201,218,.30),transparent 28%),
    radial-gradient(circle at 92% 5%,rgba(238,230,247,.55),transparent 26%),
    linear-gradient(180deg,#fffafd 0%,#fff 45%,#fff7fb 100%);
  --nav-background:rgba(255,255,255,.80);
  --hero-background:rgba(255,255,255,.84);
  --panel-background:rgba(255,255,255,.90);
  --tabs-background:rgba(255,255,255,.72);
  --card-background:linear-gradient(180deg,#fff,var(--surface-soft));
  --start-background:linear-gradient(135deg,var(--surface-warm),#fff 56%,var(--lav));
  --plain-background:#fff;
  --footer-background:rgba(255,246,250,.76);
  --exercise-line:rgba(241,221,230,.82);
  --reps-text:#5d4451;
  --good-line:#dcece3;
  --danger-line:#efccd5;
  --danger-background:linear-gradient(180deg,#fff,#fff3f6);
  --danger-soft:#fbecef;
  --danger-text:#a3485d;
  --theme-icon-background:var(--surface-soft);
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#171117;
  --surface:#241a22;
  --surface-soft:#2d202a;
  --surface-warm:#38232f;
  --text:#f8edf3;
  --muted:#c5aeba;
  --line:#4c3341;
  --pink:#e58bae;
  --pink-deep:#f0a2c1;
  --pink-soft:#633b4e;
  --lav:#30283d;
  --green:#a6d2b9;
  --green-soft:#24382f;
  --amber:#e4ba7e;
  --amber-soft:#3b3022;
  --shadow:0 18px 50px rgba(0,0,0,.28);
  --shadow-soft:0 8px 24px rgba(0,0,0,.20);
  --page-background:
    radial-gradient(circle at 8% 0%,rgba(146,65,98,.25),transparent 30%),
    radial-gradient(circle at 92% 5%,rgba(91,70,119,.28),transparent 28%),
    linear-gradient(180deg,#171117 0%,#1d151c 48%,#191218 100%);
  --nav-background:rgba(36,26,34,.84);
  --hero-background:rgba(36,26,34,.88);
  --panel-background:rgba(36,26,34,.94);
  --tabs-background:rgba(36,26,34,.78);
  --card-background:linear-gradient(180deg,#2a1e27,var(--surface-soft));
  --start-background:linear-gradient(135deg,var(--surface-warm),#271c25 56%,var(--lav));
  --plain-background:#2a1e27;
  --footer-background:rgba(45,32,42,.78);
  --exercise-line:rgba(76,51,65,.82);
  --reps-text:#efdce6;
  --good-line:#365545;
  --danger-line:#70404d;
  --danger-background:linear-gradient(180deg,#2a1e27,#382129);
  --danger-soft:#492732;
  --danger-text:#f2a5b9;
  --theme-icon-background:var(--surface-warm);
}

@media(prefers-color-scheme:dark){
  :root:not([data-theme]){
    color-scheme:dark;
    --bg:#171117;
    --surface:#241a22;
    --surface-soft:#2d202a;
    --surface-warm:#38232f;
    --text:#f8edf3;
    --muted:#c5aeba;
    --line:#4c3341;
    --pink:#e58bae;
    --pink-deep:#f0a2c1;
    --pink-soft:#633b4e;
    --lav:#30283d;
    --green:#a6d2b9;
    --green-soft:#24382f;
    --amber:#e4ba7e;
    --amber-soft:#3b3022;
    --shadow:0 18px 50px rgba(0,0,0,.28);
    --shadow-soft:0 8px 24px rgba(0,0,0,.20);
    --page-background:
      radial-gradient(circle at 8% 0%,rgba(146,65,98,.25),transparent 30%),
      radial-gradient(circle at 92% 5%,rgba(91,70,119,.28),transparent 28%),
      linear-gradient(180deg,#171117 0%,#1d151c 48%,#191218 100%);
    --nav-background:rgba(36,26,34,.84);
    --hero-background:rgba(36,26,34,.88);
    --panel-background:rgba(36,26,34,.94);
    --tabs-background:rgba(36,26,34,.78);
    --card-background:linear-gradient(180deg,#2a1e27,var(--surface-soft));
    --start-background:linear-gradient(135deg,var(--surface-warm),#271c25 56%,var(--lav));
    --plain-background:#2a1e27;
    --footer-background:rgba(45,32,42,.78);
    --exercise-line:rgba(76,51,65,.82);
    --reps-text:#efdce6;
    --good-line:#365545;
    --danger-line:#70404d;
    --danger-background:linear-gradient(180deg,#2a1e27,#382129);
    --danger-soft:#492732;
    --danger-text:#f2a5b9;
    --theme-icon-background:var(--surface-warm);
  }
}

body{
  background:var(--page-background);
  transition:background-color .2s ease,color .2s ease;
}

.wrap{max-width:1100px}

.site-nav{background:var(--nav-background)}

.nav-links{
  align-items:center;
}

.theme-toggle{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  margin-left:3px;
  padding:0;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--theme-icon-background);
  color:var(--pink-deep);
  font:inherit;
  font-size:17px;
  line-height:1;
  cursor:pointer;
  transition:transform .18s ease,background-color .18s ease,border-color .18s ease;
}

.theme-toggle:hover{transform:translateY(-1px)}
.theme-toggle:focus-visible{outline:3px solid var(--pink-soft);outline-offset:2px}

.heart-burst{
  position:fixed;
  z-index:9999;
  width:1px;
  height:1px;
  pointer-events:none;
}

.heart-particle{
  position:absolute;
  left:0;
  top:0;
  color:var(--pink-deep);
  font-size:var(--heart-size);
  font-weight:950;
  line-height:1;
  opacity:0;
  filter:drop-shadow(0 3px 5px rgba(130,72,96,.20));
  will-change:transform,opacity;
  animation:pookie-heart-pop .82s cubic-bezier(.2,.78,.25,1) var(--heart-delay) forwards;
}

@keyframes pookie-heart-pop{
  0%{opacity:0;transform:translate(-50%,-15%) scale(.3) rotate(0deg)}
  18%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--heart-x)),calc(-50% + var(--heart-y))) scale(1.08) rotate(var(--heart-rotation))}
}

.hero{
  padding:42px 38px;
  margin-bottom:24px;
  background:var(--hero-background);
}

h1{
  margin-bottom:14px;
  font-size:clamp(38px,6vw,64px);
  line-height:1;
  letter-spacing:-.05em;
}

.tabs{background:var(--tabs-background)}
.panel,.section{background:var(--panel-background)}
.card,.supplement{background:var(--card-background)}
.start-card{background:var(--start-background)}
.macro,.feedback,.sources a,.reps{background:var(--plain-background)}
.exercise{border-bottom-color:var(--exercise-line)}
.reps{color:var(--reps-text)}
.footer{background:var(--footer-background)}
.site-footer{
  margin-top:22px;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
  text-align:center;
}
.feedback.good{border-color:var(--good-line)}
.danger{border-color:var(--danger-line);background:var(--danger-background)}
.danger .number,.tag.skip{background:var(--danger-soft);color:var(--danger-text)}

@media(max-width:760px){
  .site-nav{position:relative}
  .brand{padding-right:48px}
  .nav-links{grid-template-columns:repeat(2,1fr)}
  .theme-toggle{position:absolute;top:10px;right:10px;margin-left:0}
  .hero{padding:30px 22px}
}

@media(prefers-reduced-motion:reduce){
  body,.theme-toggle{transition:none}
  .heart-burst{display:none}
}