:root {
  color-scheme: light;
  --green: #0AAD0A;
  --pressed: #098F09;
  --green-ink: #086508;
  --green-tint: #E6F6E6;
  --orange: #FF7009;
  --orange-tint: #FFF0E6;
  --canvas: #FFFFFF;
  --surface: #F6F7F8;
  --line: #E8E9EB;
  --ink: #242529;
  --secondary: #62666F;
  --tertiary: #A6A8AE;
  --error: #D6203A;
}
body { background: var(--canvas); color: var(--ink); }
a { color: var(--green-ink); }
a:focus-visible, button:focus-visible, textarea:focus-visible { outline: 3px solid var(--green-ink); outline-offset: 4px; }
button { cursor: pointer; color: var(--ink); border: 1px solid transparent; border-radius: 12px; background: var(--green); }
button:hover { background: var(--pressed); }
button:active { background: var(--green-tint); }
button:disabled { cursor: default; background: var(--line); color: var(--secondary); }
#masthead { border-bottom: 1px solid var(--line); }
#masthead a { text-decoration: none; }
#masthead a:first-child { color: var(--ink); }
#masthead a:first-child span { color: var(--secondary); }
#questions { background: var(--surface); border-bottom: 1px solid var(--line); }
#questions a { color: var(--ink); text-decoration: none; border: 1px solid var(--line); background: var(--canvas); border-radius: 8px; }
#questions a:hover { border-color: var(--green); }
#questions a[data-current="true"] { color: var(--green-ink); background: var(--green-tint); border-color: var(--green); box-shadow: inset 0 -3px 0 var(--green); }
[data-breadcrumb] { color: var(--secondary); }
[data-intro] { border-bottom: 1px solid var(--line); }
[data-eyebrow] { color: var(--green-ink); }
[data-intro] > p:last-child { color: var(--secondary); }
[data-catalogue] { background: var(--surface); border-radius: 16px; }
[data-card] { background: var(--canvas); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; box-shadow: 0 1px 3px rgb(36 37 41 / 6%); }
[data-card]:hover { border-color: var(--green); }
[data-card] > span { background: var(--orange-tint); color: var(--ink); border-radius: 8px; }
[data-card] b { color: var(--green-ink); }
[data-card] p { color: var(--secondary); }
aside { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
aside a { color: var(--ink); border-radius: 8px; text-decoration: none; }
aside a:hover { background: var(--canvas); }
aside a[aria-current="page"] { color: var(--green-ink); background: var(--green-tint); box-shadow: inset 3px 0 0 var(--green); }
figure { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
figure > div > div { background: var(--canvas); border-radius: 12px; border-left: 4px solid var(--tertiary); }
figure > div > div:first-child { border-left-color: var(--green); }
figure > div > div:not(:first-child) { border-left-color: var(--orange); }
figure p, figcaption { color: var(--secondary); }
[data-graphic="chain"] > div > span { border-radius: 8px; background: var(--green); }
[data-graphic="chain"] > div > span:nth-child(4n) { background: var(--orange); }
[data-graphic="chain"] > div > span:nth-child(2n+1) { background: var(--green-tint); border: 1px solid var(--green); }
[data-recap] { border-radius: 16px; background: var(--green-tint); }
[data-takeaway] { border-radius: 16px; border: 1px solid var(--line); }
[data-takeaway] > a { border-radius: 8px; background: var(--surface); text-decoration: none; }
[data-turn-page] a { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); }
[data-turn-page] span { color: var(--secondary); }
[data-turn-page] a:hover { border-color: var(--green); }
#notes { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
textarea { border: 1px solid var(--secondary); border-radius: 12px; color: var(--ink); background: var(--canvas); }
textarea::placeholder { color: var(--secondary); opacity: 1; }
#editor-status { color: var(--secondary); }
[data-copy-notes], [data-clear-notes] { background: var(--canvas); border-color: var(--line); color: var(--green-ink); }
[data-copy-notes]:hover, [data-clear-notes]:hover { background: var(--green-tint); }
#site-footer { background: var(--surface); border-top: 1px solid var(--line); }
#site-footer p { color: var(--secondary); }
#notes-bar { color: var(--ink); background: var(--green); box-shadow: 0 -4px 12px rgb(36 37 41 / 10%); }
#notes-bar a { color: var(--ink); }
#notes-bar button { color: var(--green-ink); background: var(--canvas); }
#notes-bar button:hover { background: var(--green-tint); }
#notes-bar a:focus-visible { outline-color: var(--ink); }
#skip { background: var(--canvas); border: 2px solid var(--green-ink); border-radius: 12px; }
[data-state="error"] { color: var(--error) !important; }
#notes-bar [data-state="error"] { color: var(--ink) !important; }
@media (forced-colors: active) {
  #questions a[data-current="true"], aside a[aria-current="page"] { outline: 2px solid Highlight; }
  [data-graphic="chain"] > div > span { border: 2px solid CanvasText; }
}