/* The sun and moon switch (theme-toggle.mjs): it shows the side you switch to, the moon by day and the sun at night.
   The change itself is a circle growing from the button, drawn by the browser's view transitions. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }      /* the circle does the change, not a fade */
.tt-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; min-width: 48px; min-height: 48px; padding: 0 12px;
  border: 1px solid #15262180; border-radius: 999px; background: transparent; color: var(--ink, #152621); cursor: pointer; font: 600 18px/1 var(--font-text); }
.tt-toggle:hover { background: #ffffff55; }
.tt-art { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tt-moon { fill: currentColor; fill-opacity: .18; }
.tt-sun circle { fill: currentColor; fill-opacity: .25; }
html:not([data-theme="night"]) .tt-sun, html[data-theme="night"] .tt-moon { display: none; }
.tt-named { padding: 0 20px 0 14px; }
html[data-theme="night"] #hero .tt-toggle, .cf-coast[data-look="dusk"] .tt-toggle { color: #fff4dc; border-color: #fff4dc99; }
html[data-theme="night"] #hero .tt-toggle:hover, .cf-coast[data-look="dusk"] .tt-toggle:hover { background: #ffffff1f; }
.cf-coast .cf-footer .tt-toggle { margin-top: 16px; }
/* the language switch beside it, in its style (lang-toggle.mjs, 2026-09-25): the other language's code where the sun or moon would be */
.lt-toggle { text-decoration: none; }
.lt-toggle:not(.tt-named) { width: 48px; padding: 0; }      /* round, the size of the sun and moon switch */
.lt-code { flex: none; min-width: 22px; font: 700 18px/1 var(--font-display); letter-spacing: .02em; text-align: center; }
.cf-coast .cf-switches { display: flex; flex-wrap: wrap; gap: 12px; }