:root{
  --ink:#0d1117;
  --ink-2:#1c2430;
  --body:#3d4757;
  --line:#e3e8ef;
  --bg:#ffffff;
  --soft:#f6f8fb;
  --accent:#0f7b6c;
  --accent-2:#0b5f54;
  --accent-soft:#e6f4f1;
  --radius:14px;
  --max:960px;
  --shadow:0 1px 2px rgba(13,17,23,.05), 0 8px 24px rgba(13,17,23,.06);
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  color:var(--body);
  background:var(--bg);
  line-height:1.65;
  padding-bottom:132px;
}

.progress{
  position:fixed;top:0;left:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--accent),#12b39c);
  z-index:60;transition:width .25s linear;
}

.topbar{
  max-width:var(--max);
  margin:0 auto;
  padding:22px 24px 0;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}

.brand{font-weight:700;font-size:1.05rem;color:var(--ink);letter-spacing:-.01em}
.brand span{color:var(--accent)}

.tag{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;font-weight:700;
  color:var(--accent-2);background:var(--accent-soft);
  border:1px solid #c9e6e0;border-radius:999px;padding:5px 12px;
}

main{max-width:var(--max);margin:0 auto;padding:0 24px}

.eyebrow{
  margin:0 0 10px;
  font-size:.74rem;text-transform:uppercase;letter-spacing:.11em;
  font-weight:700;color:var(--accent);
}

.hero{padding:54px 0 34px;max-width:660px}

h1{
  margin:0 0 18px;
  font-size:clamp(1.9rem,5.2vw,2.9rem);
  line-height:1.14;letter-spacing:-.025em;color:var(--ink);font-weight:800;
}

.lede{font-size:1.06rem;margin:0;color:#4a5568}

.cards{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  padding:12px 0 40px;
}

.card{
  position:relative;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  display:flex;flex-direction:column;gap:10px;
  box-shadow:var(--shadow);
  transition:transform .18s ease,border-color .18s ease;
}

.card:hover{transform:translateY(-3px);border-color:#c9e6e0}

.card .meta{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;color:#8b96a6;
}

.card h2{
  margin:0;font-size:1.06rem;line-height:1.35;
  color:var(--ink);font-weight:700;letter-spacing:-.01em;
}

.card p{margin:0;font-size:.93rem}

.more{
  margin-top:auto;padding-top:6px;
  font-size:.84rem;font-weight:700;color:var(--accent);
  text-decoration:none;
}

.more::after{
  content:"";position:absolute;inset:0;border-radius:var(--radius);
}

.more:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;
}

.card:hover .more{text-decoration:underline}

.kit{
  background:var(--soft);
  border:1px solid var(--line);
  border-left:4px solid var(--accent);
  border-radius:var(--radius);
  padding:28px;
  display:flex;align-items:center;justify-content:space-between;
  gap:26px;flex-wrap:wrap;
  margin-bottom:40px;
}

.kit-copy{flex:1 1 320px}

.kit h2{
  margin:0 0 12px;font-size:1.4rem;color:var(--ink);
  letter-spacing:-.02em;font-weight:800;
}

.kit ul{margin:0 0 10px;padding-left:20px}
.kit li{margin-bottom:4px}

.kit-note{margin:0;font-size:.85rem;color:#8b96a6}

.topics{padding-bottom:46px}

.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px}

.chips li{
  border:1px solid var(--line);background:var(--soft);
  border-radius:999px;padding:7px 15px;font-size:.86rem;color:var(--ink-2);
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--accent);color:#fff;text-decoration:none;
  font-weight:700;font-size:.93rem;
  padding:12px 22px;border-radius:10px;border:0;cursor:pointer;
  white-space:nowrap;
  transition:background .16s ease,transform .16s ease;
}

.btn:hover{background:var(--accent-2);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

.btn-lg{padding:15px 30px;font-size:1rem}

.foot{
  border-top:1px solid var(--line);
  max-width:var(--max);margin:0 auto;padding:26px 24px 10px;
  font-size:.85rem;color:#8b96a6;
}

.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:rgba(13,17,23,.97);
  backdrop-filter:blur(8px);
  border-top:1px solid rgba(255,255,255,.1);
  animation:slide .35s ease;
}

@keyframes slide{from{transform:translateY(100%)}to{transform:translateY(0)}}

.bar-inner{
  max-width:var(--max);margin:0 auto;padding:16px 24px;
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;
}

.bar-text{margin:0;color:#e6edf3;font-size:.98rem;font-weight:600}
.bar-text b{color:#4fd1c5;font-size:1.15rem;font-variant-numeric:tabular-nums}

.bar-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

.stay{
  background:none;border:0;color:#9aa5b4;
  font:inherit;font-size:.86rem;text-decoration:underline;
  cursor:pointer;padding:8px 4px;
}

.stay:hover{color:#e6edf3}

.bar.is-done{background:rgba(15,123,108,.97)}
.bar.is-hidden{display:none}

@media (max-width:640px){
  body{padding-bottom:168px}
  .hero{padding:36px 0 26px}
  .kit{padding:22px}
  .btn-lg{width:100%}
  .bar-inner{padding:14px 18px}
  .bar-inner,.bar-actions{width:100%}
  .bar-actions{justify-content:space-between}
  .bar .btn{flex:1}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .card:hover{transform:none}
}