:root{
  --teal:#14837e; --teal-d:#0f6f6a; --navy:#1b2a4a; --ink:#33405a; --muted:#7c869c;
  --cream:#fbf5ea; --mint:#d9ece0; --peach:#f7e7d2; --line:rgba(27,42,74,.12);
  --shadow:0 14px 30px -18px rgba(27,42,74,.4);
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--cream); color:var(--ink); font-family:"Nunito",system-ui,sans-serif; line-height:1.55; }
.wrap{ max-width:820px; margin:0 auto; padding:0 20px; }
a{ color:var(--teal-d); }
h1,h2,h3,.brand{ font-family:"Fredoka",sans-serif; color:var(--navy); }
h1{ font-size:34px; line-height:1.15; margin:14px 0 10px; }
h2{ font-size:23px; margin:26px 0 12px; }
.lead{ font-size:18px; color:var(--ink); margin:0 0 18px; }

/* header / footer */
.lib-header{ background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
.lib-header .wrap{ display:flex; align-items:center; justify-content:space-between; padding-top:12px; padding-bottom:12px; }
.lib-header .brand{ font-size:24px; font-weight:700; color:var(--teal); text-decoration:none; }
.lib-header nav{ display:flex; align-items:center; gap:18px; }
.lib-header nav a{ text-decoration:none; font-weight:700; font-size:14.5px; color:var(--navy); }
.lib-header nav a.cta{ background:var(--teal); color:#fff; padding:9px 15px; border-radius:12px; }
.lib-footer{ background:#fff; border-top:1px solid var(--line); margin-top:50px; padding:26px 0; }
.lib-footer p{ margin:6px 0; color:var(--muted); font-size:14px; }
.lib-footer .fine{ font-size:12.5px; }

/* breadcrumbs */
.crumbs{ font-size:13px; color:var(--muted); margin:16px 0 4px; }
.crumbs a{ text-decoration:none; }
.crumbs .sep{ margin:0 7px; opacity:.5; }

/* activity page */
.activity{ padding-bottom:10px; }
.pills{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 4px; }
.pills span{ background:#fff; box-shadow:var(--shadow); border-radius:14px; padding:6px 12px; font-weight:700; font-size:13px; color:var(--navy); }
.need{ background:var(--peach); border-radius:14px; padding:13px 16px; margin:16px 0; font-size:15.5px; }
.steps{ counter-reset:s; list-style:none; padding:0; margin:0 0 18px; }
.steps li{ counter-increment:s; position:relative; background:#fff; box-shadow:var(--shadow); border-radius:14px; padding:14px 16px 14px 54px; margin-bottom:10px; font-size:16px; }
.steps li::before{ content:counter(s); position:absolute; left:14px; top:50%; transform:translateY(-50%); width:28px; height:28px; background:var(--teal); color:#fff; border-radius:50%; font-family:"Fredoka"; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:14px; }
.tip{ background:var(--mint); border-radius:14px; padding:13px 16px; margin-bottom:16px; font-size:14.5px; }
.skills{ font-size:14.5px; color:var(--ink); margin-bottom:8px; }

/* cta */
.cta-box{ background:linear-gradient(135deg,#e6f3ec,#d9ece0); border-radius:20px; padding:22px; margin:26px 0; box-shadow:var(--shadow); }
.cta-box h2{ margin:0 0 6px; font-size:22px; }
.cta-box p{ margin:0 0 14px; color:var(--ink); }
.btn{ display:inline-flex; align-items:center; gap:8px; background:var(--teal); color:#fff; text-decoration:none; font-family:"Fredoka"; font-weight:600; font-size:16px; padding:12px 20px; border-radius:14px; box-shadow:0 12px 22px -12px rgba(20,131,126,.8); }

/* grids */
.quick-links{ display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 20px; }
.quick-links a{ background:#fff; box-shadow:var(--shadow); border-radius:14px; padding:9px 15px; text-decoration:none; font-weight:700; font-size:14px; color:var(--navy); }
.card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; margin-bottom:10px; }
.card{ display:block; background:#fff; box-shadow:var(--shadow); border-radius:16px; padding:15px; text-decoration:none; transition:transform .1s; }
.card:hover{ transform:translateY(-2px); }
.card b{ font-family:"Fredoka"; font-weight:600; color:var(--navy); font-size:16px; display:block; line-height:1.2; }
.card .meta{ color:var(--muted); font-weight:700; font-size:12.5px; display:block; margin-top:6px; }
.related{ margin-top:30px; }

@media (max-width:520px){ h1{ font-size:28px; } .lib-header nav a:not(.cta){ display:none; } }