:root {
  color-scheme: dark;
  --navy: #101a27;
  --raised: #17263a;
  --raised-soft: #1b2c40;
  --line: #34455a;
  --ink: #f4f7fa;
  --muted: #aab5c1;
  --quiet: #718096;
  --blue: #52adc1;
  --blue-wash: rgb(82 173 193 / 12%);
  --amber: #e4c887;
  font-family: Inter, "IBM Plex Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--navy); color: var(--ink); margin: 0; }
main { margin: auto; max-width: 74rem; min-height: 100svh; padding: 1.6rem clamp(1.25rem, 5vw, 5rem); }
.site-header { color: var(--muted); display: flex; font-size: .7rem; justify-content: space-between; letter-spacing: .1em; }
.hero { max-width: 57rem; padding: clamp(7rem, 17vh, 13rem) 0 3.5rem; }
.overline, .disclosure { color: var(--blue); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(3.4rem, 9vw, 8.2rem); font-weight: 450; letter-spacing: -.08em; line-height: .86; margin: .9rem 0 1.7rem; }
.hero > p:last-child { color: var(--muted); font-size: clamp(1rem, 1.55vw, 1.25rem); line-height: 1.55; max-width: 39rem; }
.entry-grid { display: grid; gap: .7rem; grid-template-columns: repeat(4, 1fr); }
.entry-grid a { background: var(--raised); border: 1px solid var(--line); color: inherit; display: grid; gap: .7rem; min-height: 9.5rem; padding: 1.15rem; text-decoration: none; transition: border-color 180ms ease, background 180ms ease, transform 180ms ease; }
.entry-grid a:hover, .entry-grid a:focus-visible { background: var(--raised-soft); border-color: var(--blue); outline: none; transform: translateY(-2px); }
.entry-grid span { color: var(--blue); font-size: .7rem; letter-spacing: .1em; }
.entry-grid strong { font-size: 1.25rem; font-weight: 500; letter-spacing: -.035em; }
.entry-grid small { color: var(--muted); font-size: .74rem; }
.module { border-top: 1px solid var(--line); margin-top: clamp(5rem, 11vh, 9rem); padding-top: clamp(1.5rem, 3.5vh, 3rem); scroll-margin-top: 1rem; }
.module-heading { max-width: 48rem; }
.module-heading h2 { font-size: clamp(2.2rem, 5vw, 5rem); font-weight: 460; letter-spacing: -.07em; line-height: .9; margin: .7rem 0 1.25rem; }
.module-heading > p:last-child { color: var(--muted); line-height: 1.55; }
.name-pair { align-items: stretch; display: grid; gap: 1rem; grid-template-columns: 1fr auto 1fr; margin-top: 2.8rem; }
.name-pair article { background: var(--raised); border: 1px solid var(--line); min-height: 12rem; padding: clamp(1.25rem, 2.4vw, 2.25rem); }
.name-pair article:last-child { background: var(--raised-soft); }
.name-pair article > span, .meaning-grid span { color: var(--muted); display: block; font-size: .66rem; letter-spacing: .11em; margin-bottom: 2rem; }
.name-pair strong { display: block; font-size: clamp(1.5rem, 3.6vw, 3.5rem); font-weight: 470; letter-spacing: -.065em; line-height: .92; }
.name-pair em { color: var(--muted); display: block; font-size: clamp(1.2rem, 2.5vw, 2.6rem); font-style: normal; margin-top: .55rem; }
.name-pair > i { align-self: center; color: var(--quiet); font-size: 2rem; font-style: normal; }
.disclosure { color: var(--quiet); margin: .8rem 0 0; }
.decision-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }
button { background: transparent; border: 1px solid var(--blue); color: var(--ink); cursor: pointer; font: inherit; padding: .75rem 1rem; }
button:hover, button:focus-visible { background: var(--blue-wash); outline: none; }
.quiet-button { border-color: var(--line); color: var(--muted); margin-left: auto; }
.decision-feedback { border-left: 2px solid var(--line); color: var(--muted); line-height: 1.5; margin: 1.4rem 0 0; min-height: 3rem; padding-left: .9rem; }
.decision-feedback.is-keep { border-color: var(--amber); color: var(--ink); }
.decision-feedback.is-remove { border-color: var(--blue); color: var(--ink); }
.slider-panel { background: var(--raised); border: 1px solid var(--line); margin-top: 2.5rem; padding: clamp(1.3rem, 3vw, 2.5rem); }
.slider-panel label { align-items: baseline; display: flex; font-size: .9rem; justify-content: space-between; }
.slider-panel output { color: var(--blue); font-size: clamp(2rem, 4vw, 4rem); letter-spacing: -.07em; }
input[type="range"] { accent-color: var(--blue); margin: 2rem 0; width: 100%; }
.math-output { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.math-output div { border-top: 1px solid var(--line); padding-top: .8rem; }
.math-output span { color: var(--muted); display: block; font-size: .72rem; margin-bottom: .4rem; }
.math-output strong { font-size: clamp(2rem, 4vw, 4rem); font-weight: 460; letter-spacing: -.08em; }
.slider-panel > p, .module-note { color: var(--muted); font-size: .82rem; line-height: 1.5; margin: 1.7rem 0 0; }
.system-steps { counter-reset: steps; display: grid; gap: .7rem; grid-template-columns: repeat(5, 1fr); list-style: none; margin: 2.5rem 0 0; padding: 0; }
.system-steps li { background: var(--raised); border: 1px solid var(--line); min-height: 7.5rem; padding: 1rem; }
.system-steps span { color: var(--blue); display: block; font-size: .66rem; margin-bottom: 1.4rem; }
.meaning-grid { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; margin-top: 2.5rem; }
.meaning-grid article { background: var(--raised); border-top: 2px solid var(--blue); padding: 1.4rem; }
.meaning-grid article:last-child { border-color: var(--line); }
.meaning-grid p { font-size: clamp(1.15rem, 2.15vw, 2.2rem); letter-spacing: -.05em; line-height: 1; margin: 0; }
.evidence-grid { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 2rem; }
.evidence-grid span { background: var(--raised); border: 1px solid var(--line); color: var(--muted); font-size: .78rem; padding: .8rem 1rem; }
footer { border-top: 1px solid var(--line); color: var(--quiet); display: grid; font-size: .66rem; gap: .8rem; margin-top: 7rem; padding: 1.6rem 0 1rem; }
.presentation-login { color: var(--quiet); font-size: .62rem; justify-self: start; text-decoration: none; }
.presentation-login:hover, .presentation-login:focus-visible { color: var(--muted); outline: none; text-decoration: underline; }
@media (max-width: 720px) {
  .entry-grid, .system-steps { grid-template-columns: repeat(2, 1fr); }
  .name-pair { grid-template-columns: 1fr; }
  .name-pair > i { display: none; }
}
@media (max-width: 460px) {
  .entry-grid, .math-output, .meaning-grid, .system-steps { grid-template-columns: 1fr; }
  .quiet-button { margin-left: 0; }
}