:root {
  --bg: #f5faf6; --text: #22302a; --muted: #5c6b62;
  --accent: #1f8a4c; --accent-2: #0e7c86; --accent-soft: #e4f5ea;
  --border: #d8e6dc; --card: #ffffff; --here: #0e7c86;
  --promise-bg: #fff7e6; --promise-border: #e0a423;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141815; --text: #dce6df; --muted: #93a29a;
    --accent: #5fd18b; --accent-2: #5fc7d1; --accent-soft: #17251c;
    --border: #26332b; --card: #1a211c; --here: #5fc7d1;
    --promise-bg: #2a2517; --promise-border: #d6a53a;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 17.5px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.page { max-width: 720px; margin: 0 auto; padding: 46px 24px 90px; }
h1 { font-size: 2.15rem; line-height: 1.14; letter-spacing: -0.02em; margin: 0.1em 0 0.1em; }
.sub { font-size: 1.12rem; color: var(--muted); margin: 0.2em 0 1.4em; font-weight: 500; }
.intro { font-size: 1.05rem; }
h2 {
  font-size: 1.4rem; margin: 1.9em 0 0.5em; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 0.5em;
}
h2::before {
  content: ""; width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent); flex: none;
}
h3 { font-size: 1.18rem; margin: 0.1em 0 0.5em; color: var(--accent-2); }
p { margin: 0.8em 0; }
strong { font-weight: 650; }
hr { border: none; border-top: 1px solid var(--border); margin: 2.2em 0; }

.big-idea {
  background: var(--accent-soft); border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: 0 12px 12px 0; padding: 6px 22px; margin: 1.6em 0;
}
.promise {
  background: var(--promise-bg); border: 1px solid var(--promise-border);
  border-radius: 12px; padding: 6px 22px 14px; margin: 1.2em 0;
}
.pledge { font-size: 1.12rem; font-weight: 650; line-height: 1.45; }

ul.rules { padding-left: 0; list-style: none; }
ul.rules > li {
  position: relative; padding: 12px 16px 12px 18px; margin: 10px 0;
  border: 1px solid var(--border); border-radius: 11px; background: var(--card);
}
ul.warn-signs { margin: 0.5em 0; }

.year {
  border: 1px solid var(--border); border-radius: 14px; background: var(--card);
  padding: 18px 20px; margin: 14px 0;
}
.year.now { border-color: var(--here); box-shadow: 0 0 0 2px color-mix(in srgb, var(--here) 30%, transparent); }
.year-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 2px; }
.year-head .grade { font-weight: 700; font-size: 1.02rem; }
.year-head .tag {
  font-size: 0.78rem; color: var(--accent-2); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.year-head .here {
  margin-left: auto; font-size: 0.75rem; font-weight: 700; color: #fff;
  background: var(--here); padding: 3px 10px; border-radius: 999px; letter-spacing: 0.02em;
}
.line { margin: 0.5em 0; }

details.more-toggle { margin-top: 0.8em; }
.more-sum {
  cursor: pointer; list-style: none; color: var(--accent-2); font-weight: 600;
  font-size: 0.92rem; display: inline-flex; align-items: center; gap: 6px;
}
.more-sum::-webkit-details-marker { display: none; }
.more-sum .chev { transition: transform 0.15s; display: inline-block; }
details[open] .more-sum .chev { transform: rotate(90deg); }
.more { padding: 4px 2px 2px; }
.more .mh { font-weight: 650; }

.finish {
  background: var(--accent-soft); border: 1px solid var(--border);
  border-radius: 14px; padding: 10px 24px; margin: 2em 0;
}
.finish .secret { font-size: 1.1rem; line-height: 1.5; }

footer { margin-top: 3em; padding-top: 1.2em; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.9rem; }