:root {
  --bg: #f6f7f4;
  --panel: #ffffff;
  --ink: #172026;
  --muted: #63717a;
  --line: #dce2df;
  --accent: #b4472d;
  --accent-2: #24756c;
  --code: #101820;
  --soft: #eaf0ed;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: linear-gradient(135deg, rgba(180,71,45,.08), transparent 34rem), linear-gradient(315deg, rgba(36,117,108,.09), transparent 30rem), var(--bg);
}
a { color: inherit; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
  padding: .65rem clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(12px);
}
.logo {
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 850;
}
.logo span { color: var(--accent); }
nav { display: flex; gap: .35rem; flex-wrap: wrap; }
nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: .48rem .75rem;
  border-radius: .45rem;
  text-decoration: none;
  color: #394852;
}
nav a:hover, nav a.active { background: var(--soft); color: #172026; }
.hero {
  max-width: 76rem;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 3rem) 1.25rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 24rem);
  gap: 2rem;
  align-items: end;
}
.hero h1 {
  margin: 0 0 .75rem;
  max-width: 58rem;
  font-size: clamp(2rem, 5vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: 0;
}
.hero p, .section-head p, .footer { color: var(--muted); line-height: 1.6; }
.hero p { margin: 0; max-width: 48rem; font-size: 1.08rem; }
.hero-panel {
  border-left: .35rem solid var(--accent-2);
  padding: .8rem 0 .8rem 1rem;
}
.hero-panel strong { display: block; font-size: 2.25rem; color: var(--accent); line-height: 1; }
.hero-panel span { display: block; color: var(--muted); margin-top: .35rem; }
.wrap {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 3rem) 3rem;
}
.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0;
}
.section-head h2 { margin: 0; font-size: 1.35rem; }
.search {
  width: min(100%, 24rem);
  min-height: 2.5rem;
  padding: .65rem .8rem;
  border: 1px solid var(--line);
  border-radius: .45rem;
  font: inherit;
  background: #fff;
}
.task-list, .question-list {
  display: grid;
  gap: .75rem;
}
.task-card, .question-card {
  display: grid;
  gap: .65rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 40px rgba(23,32,38,.06);
}
.question-card {
  text-decoration: none;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  align-items: center;
}
.question-card:hover { border-color: rgba(180,71,45,.45); transform: translateY(-1px); }
.num {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .45rem;
  background: #f3ded8;
  color: var(--accent);
  font-weight: 850;
}
.task-card h3, .question-card h3 { margin: 0; font-size: 1.05rem; line-height: 1.25; }
.task-card p, .question-card p { margin: 0; color: var(--muted); line-height: 1.5; }
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 1.8rem;
  padding: .25rem .55rem;
  border-radius: .35rem;
  background: #edf3f2;
  color: #2d5b56;
  font-size: .82rem;
}
pre {
  margin: .5rem 0 0;
  padding: 1rem;
  overflow: auto;
  border-radius: .45rem;
  background: var(--code);
  color: #eff6f7;
  border: 1px solid #23303a;
}
code {
  font-family: "JetBrains Mono", Consolas, "Liberation Mono", monospace;
  font-size: .88rem;
}
pre code {
  line-height: 1.58;
  white-space: pre;
}
p code, li code, td code {
  padding: .08rem .28rem;
  border-radius: .25rem;
  background: #edf3f2;
  color: #1c4f4a;
  white-space: normal;
}
.quick-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--line);
}
.quick-table th, .quick-table td {
  padding: .75rem;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.quick-table th { background: #edf3f2; }
.answer-layout {
  max-width: 76rem;
  margin: 0 auto;
  padding: clamp(1rem, 4vw, 3rem);
  display: block;
}
.answer {
  min-width: 0;
  max-width: 58rem;
  margin: 0 auto;
}
.answer h1 {
  margin: 0 0 1rem;
  font-size: clamp(1.9rem, 4vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: 0;
}
.answer h2 {
  margin: 1.4rem 0 .55rem;
  font-size: 1.25rem;
}
.answer p {
  margin: .7rem 0;
  line-height: 1.72;
}
.answer ul {
  margin: .65rem 0 .9rem;
  padding-left: 1.25rem;
}
.answer li {
  margin: .35rem 0;
  line-height: 1.62;
}
.answer .note {
  padding-left: .85rem;
  border-left: .25rem solid var(--accent-2);
  color: #2f4c49;
}
.hidden { display: none; }
.footer {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 3rem) 2rem;
  font-size: .86rem;
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .topbar { align-items: flex-start; flex-direction: column; }
  .section-head { align-items: stretch; flex-direction: column; }
  .question-card { grid-template-columns: 2.7rem 1fr; }
  .question-card .tag { grid-column: 2; width: max-content; max-width: 100%; }
  pre { padding: .75rem; }
  code { font-size: .78rem; }
}