/* Shared, semantic tokens. Artwork and the external Stripe widget keep their own colors. */
:root{--paper:#f8f9fa;--card:#fff;--ink:#121417;--muted:#62666d;--line:#d7dade;--accent:#4c5bd4;--soft:#eff1f8;--on-ink:#fff;--surface-raised:#fff;--shadow:0 8px 28px #1214170d;color-scheme:light}
:root[data-theme=dark]{--paper:#111419;--card:#1b2028;--ink:#f2f4f8;--muted:#b3bdcc;--line:#3e4858;--accent:#adbbff;--soft:#28314a;--on-ink:#111419;--surface-raised:#222a35;--shadow:0 8px 28px #0004;color-scheme:dark}
html,body{background:var(--paper);color:var(--ink)}
/* A small, quiet utility capsule. Hit targets stay 44px on every viewport. */
.site-preferences{display:inline-flex;align-items:center;gap:0;flex-shrink:0;position:relative;z-index:45;min-height:46px;border:1px solid var(--line);border-radius:999px;background:var(--card);padding:0 2px;isolation:isolate}
.preference-field{display:flex;align-items:center;position:relative;min-width:0}
.preference-field+.preference-field:before{content:"";position:absolute;inset-inline-start:0;top:15px;height:14px;width:1px;background:var(--line);pointer-events:none}
.preference-button{appearance:none;display:inline-flex;align-items:center;justify-content:center;position:relative;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:999px;background:transparent;color:var(--ink);font:600 11px/1 'JetBrains Mono',Inter,system-ui,sans-serif;letter-spacing:.035em;cursor:pointer;touch-action:manipulation;transition:background .18s ease,color .18s ease}
.preference-button svg{display:block;width:19px;height:19px;pointer-events:none}
.preference-button:hover{background:var(--soft)}
.preference-button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;background:var(--soft)}
.preference-button:disabled{cursor:default;opacity:.5}
.preference-button .theme-sun{display:none}
:root[data-theme=dark] .preference-button .theme-moon{display:none}
:root[data-theme=dark] .preference-button .theme-sun{display:block}
.preference-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
:root[data-theme=dark] .site-header{box-shadow:0 1px 0 #0004}
:root[data-theme=dark] .plan-card,:root[data-theme=dark] .bank-card,:root[data-theme=dark] .contact-card,:root[data-theme=dark] .work-card{box-shadow:var(--shadow)}
:root[data-theme=dark] .concept-open-hint{background:var(--card);color:var(--ink);border-color:var(--line)}
@media(min-width:701px){.header-inner{gap:22px}.primary-nav{gap:20px}.site-preferences{margin-left:0}}
@media(max-width:940px) and (min-width:701px){.header-inner{gap:15px}.primary-nav{gap:13px}}
@media(max-width:700px){.header-inner{gap:10px}.site-preferences{margin-left:auto}.primary-nav{padding-top:3px}.primary-nav a{min-height:36px;display:inline-flex;align-items:center}}
@media(max-width:374px){.header-inner{width:calc(100% - 28px)}.brand{font-size:17px}}
@media(prefers-reduced-motion:reduce){.preference-button{transition:none}}
@media(forced-colors:active){.site-preferences{border-color:ButtonText}.preference-button{color:ButtonText}.preference-button:focus-visible{outline-color:Highlight}}
@media print{.site-preferences{display:none}}

/* Full header name, with the existing native control capsule kept clear. */
@media(min-width:700px){html:not(.home-mobile-canvas) .nav-canvas>.home-preferences{left:340px}}
.site-header .brand{white-space:nowrap}
@media(max-width:374px){.m-nav>b{font-size:17px}}
@media(min-width:700px){.site-header.shell-header .site-preferences{left:calc(259 * var(--shell-u))}}