:root {
  color-scheme: light dark;
  --canvas: #f5f8f7;
  --panel: #e8f0ed;
  --ink: #142925;
  --muted: #425c54;
  --line: #a9beb5;
  --action: #075e4a;
  --selection: #bce8d2;
  --mat: #142b26;
  --mat-ink: #eff8f3;
  --mat-muted: #bad2c8;
  --mat-line: #6f9384;
  --radius: .875rem;
  --gutter: clamp(1.125rem, 3.5vw, 3.5rem);
  --measure: 41rem;
  --display: Georgia, 'Times New Roman', serif;
  --body: system-ui, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #12221e;
    --panel: #20362e;
    --ink: #edf6f0;
    --muted: #bdd2c8;
    --line: #507065;
    --action: #9ce5c6;
    --selection: #345d4e;
    --mat: #0c1a16;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-color: var(--line) var(--canvas); }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 1.0625rem/1.65 var(--body);
  caret-color: var(--action);
}
::selection { background: var(--selection); color: var(--ink); }
main {
  max-width: none;
  margin-inline: auto;
  width: min(calc(100% - 2 * var(--gutter)), var(--measure));
  padding: clamp(2rem, 5vw, 4rem) 0;
}
h1, h2, h3 { color: var(--ink); text-wrap: balance; }
h1, h2 { font-family: var(--display); font-weight: 700; }
h1 { font-size: clamp(2.125rem, 5vw, 3.875rem); line-height: 1.3; letter-spacing: -.035em; }
h2 { font-size: clamp(1.625rem, 3vw, 2.375rem); line-height: 1.3; letter-spacing: -.025em; }
h3 { font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.35; }
main article > h2, body:not(.home) main > h2 { margin: 2.25rem 0 .75rem; }
p, dd, .editor-steps li { text-wrap: pretty; }
p, li, dd, td { overflow-wrap: anywhere; }
a { color: var(--action); text-underline-offset: .21em; }
a:hover { text-decoration-thickness: .13em; }
a:focus-visible { outline: 2px solid var(--action); outline-offset: 4px; }
img, video { max-inline-size: 100%; height: auto; }
table { font-variant-numeric: tabular-nums; }
footer { border-color: var(--line); color: var(--muted); font-size: .875rem; }
.home main { width: auto; padding: 0; }
.shell { width: min(calc(100% - 2 * var(--gutter)), 76rem); margin-inline: auto; }
.reading { width: min(calc(100% - 2 * var(--gutter)), var(--measure)); margin-inline: auto; }
.site-bar { border-bottom: 1px solid var(--line); }
.site-bar a {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 54px;
  font-size: 1rem;
  font-weight: 760;
  text-decoration: none;
}
.site-bar a::before {
  content: "";
  width: .875rem;
  height: .875rem;
  border: 2px solid currentColor;
  border-radius: 2px;
}
.hero { background: var(--panel); border-bottom: 1px solid var(--line); }
.hero-layout {
  display: grid;
  align-items: center;
  gap: 1.375rem;
  padding-block: clamp(1.5rem, 5vw, 4.5rem);
}
.hero-layout > * { min-width: 0; }
.hero h1 { max-width: 17ch; margin: 0 0 .75rem; }
.kicker { margin: 0 0 .45rem; color: var(--action); font-size: .875rem; font-weight: 680; }
.lead { max-width: 40ch; margin: 0 0 1.125rem; color: var(--muted); }
.editor-label { margin: 0 0 .35rem; color: var(--muted); font-size: .8125rem; font-weight: 700; }
.jump-list, .problem-nav ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.jump-list { gap: .375rem; }
.jump-list a {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  min-height: 44px;
  padding-inline: .5rem;
  border: 1px solid var(--line);
  border-radius: .375rem;
  background: var(--canvas);
  font-size: .875rem;
  font-weight: 675;
  text-decoration: none;
}
.jump-list a:hover { border-color: var(--action); text-decoration: underline; }
.comparison {
  margin: 0;
  padding: clamp(.75rem, 1.6vw, 1.25rem);
  border-radius: var(--radius);
  background: var(--mat);
  color: var(--mat-ink);
}
.comparison img { display: block; width: 100%; }
.comparison figcaption { margin-top: .625rem; }
.comparison-labels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .625rem;
  font-size: .875rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.comparison-labels span + span { border-inline-start: 1px solid var(--mat-line); padding-inline-start: .625rem; }
.comparison-credit { margin: .5rem 0 0; color: var(--mat-muted); font-size: .8125rem; }
.problem-nav { padding-block: .875rem; border-bottom: 1px solid var(--line); }
.problem-nav h2 { margin: 0; font: 700 1rem/1.4 var(--body); }
.problem-nav ul { gap: 0 1.25rem; }
.problem-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: .9375rem; }
.article-copy, #guide-list { padding-top: clamp(2rem, 5vw, 4rem); }
.copy-group + .copy-group {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.copy-group h2, #guide-list h2 { margin: 0 0 1.125rem; }
.copy-entry { scroll-margin-top: 1.25rem; }
.copy-entry + .copy-entry { margin-top: 1.625rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.copy-entry h3 { margin: 0 0 .625rem; }
.editor-steps { margin: .75rem 0 0; padding-inline-start: 1.5rem; }
.editor-steps li { padding-inline-start: .35rem; }
.editor-steps li + li { margin-top: .6rem; }
.editor-steps li::marker { color: var(--action); font-weight: 750; }
.checks { margin: .75rem 0 0; padding: 1rem 1.125rem; background: var(--panel); }
.checks dt { color: var(--action); font-weight: 700; }
.checks dd { margin: .25rem 0 0; }
.checks dd + dt { margin-top: .85rem; }
#guide-list ul { padding-inline-start: 1.25rem; }
#guide-list li + li { margin-top: .5rem; }
.home #filmora-ad, .home footer {
  margin-top: 2rem;
  padding-block: 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .875rem;
}
@media (min-width: 54rem) {
  .hero-layout { grid-template-columns: .86fr 1.14fr; gap: clamp(2rem, 5vw, 5rem); }
  .lead { font-size: 1.1875rem; }
  .problem-nav .reading { display: flex; align-items: center; gap: 1.5rem; width: min(calc(100% - 2 * var(--gutter)), 76rem); }
}
@media (prefers-reduced-motion: no-preference) {
  .comparison { animation: frame-settle 560ms var(--ease-out) both; }
  @keyframes frame-settle { from { transform: translateY(8px); } to { transform: translateY(0); } }
}

@media (max-width: 22rem) {
  .jump-list { gap: .25rem; }
  .jump-list a { padding-inline: .375rem; }
}