:root { --paper: #f7f5ed; --ink: #142e43; --blue: #163f79; --bright: #265a9c; --muted: #425567; --line: #c2ccd0; --tile: #e8ede9; --rust: #8e3d26; }
html { color-scheme: light; background: var(--paper); color: var(--ink); }
body { background: var(--paper); }
a { color: var(--blue); }
a:hover { text-decoration-thickness: 2px; }
button, input { color: var(--ink); }
:focus-visible { outline: 3px solid var(--rust); outline-offset: 4px; }
[data-role="skip-link"] { background: var(--paper); color: var(--blue); border: 2px solid var(--blue); }
[data-role="site-header"] { border-bottom: 1px solid var(--blue); }
[data-role="identity"] { text-decoration: none; color: var(--ink); }
[data-role="identity-words"] span { color: var(--muted); }
[data-role="tile-mark"] span { background: var(--blue); }
[data-role="tile-mark"] span:nth-child(1) { border-radius: 100% 0 0 0; }
[data-role="tile-mark"] span:nth-child(2) { border-radius: 0 100% 0 0; background: var(--paper); border: 2px solid var(--blue); }
[data-role="tile-mark"] span:nth-child(3) { border-radius: 0 0 0 100%; background: var(--paper); border: 2px solid var(--blue); }
[data-role="tile-mark"] span:nth-child(4) { border-radius: 0 0 100% 0; }
[data-role="cluster-label"] { color: var(--muted); }
[data-role="topic-cluster"] a { text-decoration: none; border-bottom: 2px solid transparent; }
[data-role="topic-cluster"] a:hover, [data-role="topic-cluster"] a[aria-current="page"] { border-bottom-color: var(--blue); }
[data-role="eyebrow"] { color: var(--rust); }
[data-role="hero"] { border-bottom: 1px solid var(--line); }
[data-role="image-window"] { background: var(--tile); border: 1px solid var(--blue); border-radius: 5rem 0 0 0; }
[data-role="image-window"] img { color: transparent; font-size: 0; }
[data-role="tile-fallback"] {
  background-color: #e8e9df;
  background-image: radial-gradient(circle at 0 100%, transparent 49%, #8aa6bf 50%, #8aa6bf 53%, transparent 54%), radial-gradient(circle at 100% 0, transparent 49%, #4e7ba6 50%, #4e7ba6 53%, transparent 54%);
  background-size: 112px 112px;
  opacity: .62;
}
[data-role="tile-fallback"]::before { content: ""; position: absolute; width: 46%; aspect-ratio: 1; border: 2px solid #315f89; border-radius: 50%; left: 27%; top: 26%; background: #f1efe3; }
[data-role="tile-fallback"]::after { content: ""; position: absolute; width: 26%; aspect-ratio: 1; border: 2px solid #315f89; border-radius: 50%; left: 37%; top: 35%; background: #d6e1e0; }
[data-role="still-life"] figcaption { border-inline: 1px solid var(--blue); border-bottom: 1px solid var(--blue); background: var(--paper); }
[data-role="action-link"] { border: 1px solid var(--blue); background: transparent; color: var(--blue); border-radius: 2px; }
[data-role="action-link"]:hover { background: var(--tile); }
[data-role="action-link"][data-tone="solid"] { background: var(--blue); color: var(--paper); }
[data-role="action-link"][data-tone="solid"]:hover { background: #0f2e58; }
[data-role="quick-read"] { border: 1px solid var(--blue); position: relative; }
[data-role="quick-read"]::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 7px; background: var(--blue); }
[data-tone="blue"] { background: var(--blue); color: var(--paper); }
[data-tone="blue"] [data-role="eyebrow"], [data-tone="blue"] a { color: var(--paper); }
[data-tone="blue"] [data-role="source-drawer"] { border-top-color: #7e99bf; }
[data-tone="blue"] :focus-visible { outline-color: #ffcf8c; }
[data-tone="pale"] { background: var(--tile); }
[data-role="route"] { border: 1px solid var(--blue); background: #eeefe6; }
[data-role="route"]:nth-child(2) { background: var(--paper); }
[data-role="route-mark"] { border: 1px solid var(--blue); background: var(--blue); color: var(--paper); border-radius: 50% 50% 0 50%; }
[data-role="source-drawer"] { border-top: 1px solid var(--line); }
[data-role="source-drawer"] summary { color: inherit; }
[data-role="source-drawer"] summary:hover { text-decoration: underline; text-underline-offset: .25em; }
[data-role="source-drawer"] summary::after { color: inherit; font-family: Consolas, monospace; font-size: 22px; }
[data-role="source-body"] { color: inherit; }
[data-role="question-row"] { border-bottom: 1px solid var(--line); }
[data-role="cost-row"] { border-top: 1px solid var(--line); }
[data-role="cost-row"]:last-child { border-bottom: 1px solid var(--line); }
[data-role="note"] { background: #ece9dc; border-left: 3px solid var(--rust); }
[data-role="study"] { color: var(--paper); background: var(--blue); border-radius: 0 3rem 0 0; }
[data-role="caution"] { background: var(--tile); border-top: 3px solid var(--blue); }
[data-role="wide-still-life"] [data-role="image-window"] { border-radius: 0 4rem 0 0; }
[data-role="wide-still-life"] [data-role="tile-fallback"] { background-size: 128px 128px; }
[data-role="wide-still-life"] [data-role="tile-fallback"]::before { width: 19%; left: 26%; top: 23%; }
[data-role="wide-still-life"] [data-role="tile-fallback"]::after { width: 14%; left: 60%; top: 36%; }
[data-role="wide-still-life"] figcaption { color: var(--muted); }
[data-role="glossary-controls"] input { border: 1px solid var(--blue); background: #fffef9; border-radius: 2px; appearance: none; }
[data-role="glossary-controls"] input::placeholder { color: var(--muted); opacity: 1; }
[data-role="glossary-controls"] button { background: var(--blue); color: var(--paper); border: 1px solid var(--blue); border-radius: 2px; }
[data-role="glossary-controls"] button:disabled { background: var(--tile); color: var(--muted); cursor: default; }
[data-role="glossary-status"] { color: var(--muted); }
[data-role="glossary-entry"] { border-top: 1px solid var(--line); }
[data-role="page-next"] { border-block: 1px solid var(--blue); }
[data-role="site-footer"] { color: var(--muted); }
[data-role="not-found"] { color: var(--ink); }
@media (prefers-reduced-motion: no-preference) { a, button { transition: background-color 120ms ease, border-color 120ms ease; } }
@media (forced-colors: active) { [data-role="image-window"], [data-role="route"], [data-role="action-link"], [data-role="route-mark"] { border-color: CanvasText; } }