/*
 * The public site's base, on every page: fonts, tokens, the page frame (notice line, header, footer), buttons,
 * section heads, form controls and alerts. The neutrals are the /app dashboard's (dashboard/src/styles/tokens.css):
 * black and white brand on pure greys; hue only for status (running blue, done green, waiting amber). Light on
 * :root; dark from the system unless the visitor chose light, or from data-theme="dark" (components/site/theme.ts).
 */

/* ---------- Fonts: self-hosted IBM Plex (SIL OFL, licences in /fonts), the dashboard's faces ---------- */
@font-face { font-family: "Plex Sans"; src: url("/fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 100 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
/* Arial adjusted to Plex Sans's metrics, so the swap moves nothing. */
@font-face { font-family: "Plex Sans Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 104%; ascent-override: 98%; descent-override: 26%; line-gap-override: 0%; }

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  --bg: #f6f6f6;
  --surface: #ffffff;
  --elevated: #efefef;
  --rule: #e2e2e2;
  --rule-soft: #ececec;
  --rule-strong: #7f7f7f;
  --grid: rgba(0, 0, 0, 0.05);
  --text: #111111;
  --text-2: #5a5a5a;
  --text-3: #666666;
  --primary: #111111;
  --primary-hover: #333333;
  --on-primary: #ffffff;
  --brand-tile: #101218;
  --run: #1d4ed8;
  --run-dot: #2563eb;
  --run-subtle: rgba(29, 78, 216, 0.08);
  --done: #166534;
  --done-dot: #15803d;
  --wait: #92400e;
  --wait-dot: #b45309;
  --wait-subtle: rgba(180, 83, 9, 0.1);
  --danger: #b91c1c;
  --focus: #1d4ed8;
  --shadow: 0 1px 0 var(--rule-soft), 0 24px 48px -32px rgba(0, 0, 0, 0.25);

  --sans: "Plex Sans", "Plex Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  --fs-11: 0.6875rem; --fs-12: 0.75rem; --fs-13: 0.8125rem; --fs-14: 0.875rem; --fs-16: 1rem;
  --fs-18: 1.125rem; --fs-22: 1.375rem; --fs-28: 1.75rem;
  --fs-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  --fs-display: clamp(2.25rem, 1.4rem + 3vw, 3.5rem);
  --fs-hero: clamp(2.375rem, 1.3rem + 4.4vw, 4.5rem);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --r1: 4px; --r2: 6px; --r3: 8px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --t-fast: 120ms;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0a0a0a; --surface: #141414; --elevated: #1f1f1f;
    --rule: #2b2b2b; --rule-soft: #212121; --rule-strong: #707070; --grid: rgba(255, 255, 255, 0.05);
    --text: #ededed; --text-2: #a6a6a6; --text-3: #8c8c8c;
    --primary: #f2f2f2; --primary-hover: #ffffff; --on-primary: #0a0a0a;
    --run: #8fb3ff; --run-dot: #5b8cff; --run-subtle: rgba(91, 140, 255, 0.12);
    --done: #6ad08f; --done-dot: #34c46a; --wait: #f0b46a; --wait-dot: #e09b3d; --wait-subtle: rgba(224, 155, 61, 0.14);
    --danger: #f87171; --focus: #8fb3ff;
    --shadow: 0 1px 0 var(--rule-soft), 0 24px 48px -32px rgba(0, 0, 0, 0.8);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0a0a; --surface: #141414; --elevated: #1f1f1f;
  --rule: #2b2b2b; --rule-soft: #212121; --rule-strong: #707070; --grid: rgba(255, 255, 255, 0.05);
  --text: #ededed; --text-2: #a6a6a6; --text-3: #8c8c8c;
  --primary: #f2f2f2; --primary-hover: #ffffff; --on-primary: #0a0a0a;
  --run: #8fb3ff; --run-dot: #5b8cff; --run-subtle: rgba(91, 140, 255, 0.12);
  --done: #6ad08f; --done-dot: #34c46a; --wait: #f0b46a; --wait-dot: #e09b3d; --wait-subtle: rgba(224, 155, 61, 0.14);
  --danger: #f87171; --focus: #8fb3ff;
  --shadow: 0 1px 0 var(--rule-soft), 0 24px 48px -32px rgba(0, 0, 0, 0.8);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 var(--fs-16)/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
code, pre { font-family: var(--mono); }
::selection { background: color-mix(in srgb, var(--run-dot) 25%, transparent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
main:focus { outline: none; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--text-2); font-size: var(--fs-14); }
.err { color: var(--danger); font-size: var(--fs-13); }
.skip { position: absolute; left: var(--s4); top: -100px; z-index: 100; background: var(--primary); color: var(--on-primary); padding: var(--s2) var(--s3); border-radius: var(--r1); text-decoration: none; }
.skip:focus { top: var(--s3); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s5); border-radius: var(--r2); font: 500 var(--fs-14)/1 var(--sans); text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary:disabled { opacity: 0.6; cursor: progress; }
.btn-ghost { border-color: var(--rule-strong); background: transparent; color: var(--text); }
.btn-ghost:hover { background: var(--elevated); }
.btn-sm { min-height: 36px; padding: 0 var(--s4); font-size: var(--fs-13); }
.btn .arr { font-family: var(--mono); transition: transform var(--t-fast) var(--ease); }
.btn:hover .arr { transform: translateX(2px); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r2); border: 1px solid transparent; background: transparent; color: var(--text-2); cursor: pointer; transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.icon-btn:hover { color: var(--text); background: var(--elevated); }

/* Theme switch: the icon for the theme on screen (moon in light, sun in dark). */
.ico-sun { display: none; }
:root[data-theme="dark"] .ico-sun { display: block; }
:root[data-theme="dark"] .ico-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ico-sun { display: block; }
  :root:not([data-theme="light"]) .ico-moon { display: none; }
}

/* ---------- Pre-release line ---------- */
.notice { background: var(--surface); border-bottom: 1px solid var(--rule); }
.notice-in { display: flex; align-items: center; gap: var(--s2) var(--s4); padding-block: 9px; font-size: var(--fs-13); color: var(--text-2); }
.notice-in p { flex: 0 1 auto; min-width: 0; }
.notice .tag { flex: none; font: 500 var(--fs-11)/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); border: 1px solid var(--rule); border-radius: var(--r1); padding: 4px 6px; }
.notice a { flex: none; color: var(--text); font-weight: 500; }
.notice-short { display: none; }

/* ---------- Header ---------- */
.site-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--rule); }
.head-in { display: flex; align-items: center; gap: var(--s6); height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand-name { font-weight: 600; font-size: var(--fs-18); letter-spacing: -0.01em; }
.brand-by { font: 400 var(--fs-12)/1 var(--mono); color: var(--text-3); padding-top: 3px; }
.mark { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: var(--r1); background: var(--brand-tile); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.mark svg { width: 20px; height: 20px; }
.mark-sm { width: 24px; height: 24px; }
.mark-sm svg { width: 16px; height: 16px; }
.nav { display: flex; gap: var(--s1); margin-right: auto; }
.nav a, .menu-panel a { padding: var(--s2) var(--s3); border-radius: var(--r1); text-decoration: none; font-size: var(--fs-14); color: var(--text-2); transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.nav a:hover, .menu-panel a:hover { color: var(--text); background: var(--elevated); }
.nav a[aria-current="page"], .menu-panel a[aria-current="page"] { color: var(--text); font-weight: 500; }
.head-actions { display: flex; align-items: center; gap: var(--s2); }
.signin { font-size: var(--fs-14); color: var(--text-2); text-decoration: none; padding: var(--s2) var(--s3); border-radius: var(--r1); }
.signin:hover { color: var(--text); background: var(--elevated); }
.cta-short { display: none; }
.menu { display: none; }
.menu > summary { list-style: none; border-color: var(--rule); color: var(--text); }
.menu > summary::-webkit-details-marker { display: none; }
.menu .menu-close, .menu[open] .menu-open { display: none; }
.menu[open] .menu-close { display: inline; }
.menu-panel { position: absolute; left: 0; right: 0; top: 100%; display: grid; gap: 2px; padding: var(--s3) var(--gutter) var(--s4); background: var(--bg); border-bottom: 1px solid var(--rule); box-shadow: 0 16px 32px -24px rgba(0, 0, 0, 0.35); }
.menu-panel a { padding: var(--s3); font-size: var(--fs-16); }

/* ---------- Section heads ---------- */
.idx { display: flex; align-items: baseline; gap: var(--s3); font: 500 var(--fs-12)/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.idx b { color: var(--text); font-weight: 500; }
.idx::after { content: ""; flex: 1; height: 1px; background: var(--rule); transform: translateY(-3px); }
.sec { padding-block: var(--s9); border-bottom: 1px solid var(--rule); }
.sec-tight { padding-block: var(--s8) var(--s9); }
.sec-alt { background: var(--surface); }
.sec-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s5) var(--s8); margin-top: var(--s6); align-items: end; }
.sec-head h2 { font-size: var(--fs-h2); line-height: 1.1; font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; }
.sec-head > p { color: var(--text-2); font-size: var(--fs-18); line-height: 1.55; max-width: 38em; text-wrap: pretty; }
.sec-note { margin-top: var(--s6); max-width: 60em; font-size: var(--fs-14); color: var(--text-2); padding-left: var(--s4); border-left: 2px solid var(--rule); }
.sec-note b { color: var(--text); font-weight: 600; }

/* A definition list in ruled rows: label in mono, value in sans. */
.spec { border-top: 1px solid var(--rule); }
.spec > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--rule); }
.spec dt { font: 500 var(--fs-12)/1.6 var(--mono); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; }
.spec dd { font-size: var(--fs-14); color: var(--text-2); }
.spec dd .muted, .spec dd .code + * { display: block; margin-top: var(--s1); }
.spec dd strong { color: var(--text); font-weight: 600; }

/* Status pills: hue only where it means something. */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px; font: 500 var(--fs-11)/1.2 var(--mono); letter-spacing: 0.02em; white-space: nowrap; }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.pill-run { color: var(--run); background: var(--run-subtle); }
.pill-run .dot { background: var(--run-dot); animation: pulse 1.6s var(--ease) infinite; }
.pill-wait { color: var(--wait); background: var(--wait-subtle); }
.pill-wait .dot { background: var(--wait-dot); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.avail { display: inline-flex; align-items: center; gap: 6px; font: 500 var(--fs-11)/1.2 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 8px; border: 1px solid var(--rule); border-radius: var(--r1); color: var(--text); background: var(--surface); }

/* ---------- Form controls ---------- */
.field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.field label, fieldset legend { font-size: var(--fs-13); font-weight: 500; }
.opt { color: var(--text-3); font-weight: 400; }
input[type="email"], input[type="text"] { width: 100%; height: 44px; padding: 0 var(--s3); border: 1px solid var(--rule-strong); border-radius: var(--r2); background: var(--surface); color: var(--text); font: 400 var(--fs-16)/1 var(--sans); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
input::placeholder { color: var(--text-3); }
input:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }
input[aria-invalid="true"] { border-color: var(--danger); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset legend { padding: 0; }
/*
 * Segmented control: native radios (one name) as joined segments, so arrow keys, form posts and no-script pages work
 * as the browser's own. The 1px gap over the --rule background draws the dividers, wherever the segments wrap. The
 * radio stays in place, transparent, over its segment; the ring is inset (two layers: focus, then surface) so it shows
 * on a chosen segment and inside the clipped corners. Columns: --seg-cols (3; .seg-workers 4, two by two on phones).
 * Transitions stop under prefers-reduced-motion (the rule at the end of this file).
 */
.seg { --seg-cols: 3; margin-top: 6px; display: grid; grid-template-columns: repeat(var(--seg-cols), minmax(0, 1fr)); gap: 1px; border: 1px solid var(--rule-strong); border-radius: var(--r2); overflow: hidden; background: var(--rule); }
.seg-workers { --seg-cols: 4; }
.seg label { position: relative; display: block; cursor: pointer; background: var(--surface); }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 44px; text-align: center; padding: var(--s2) var(--s3); font-size: var(--fs-14); font-variant-numeric: tabular-nums; color: var(--text-2); transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.seg label:hover span { background: var(--elevated); color: var(--text); }
.seg input:checked + span { background: var(--primary); color: var(--on-primary); font-weight: 500; }
.seg label:hover input:checked + span { background: var(--primary-hover); }
.seg input:focus-visible + span { box-shadow: inset 0 0 0 2px var(--focus), inset 0 0 0 4px var(--surface); }
.seg + .err { margin-top: 6px; }

/* ---------- Footer ---------- */
.site-foot { padding-block: var(--s8) calc(var(--s6) + env(safe-area-inset-bottom, 0px)); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: var(--s6); }
.foot-about p { margin-top: var(--s4); font-size: var(--fs-14); color: var(--text-2); max-width: 30em; }
.foot-about .foot-tag { margin-top: var(--s3); font: 500 var(--fs-12)/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.foot-grid h2 { margin-bottom: var(--s3); font: 500 var(--fs-12)/1 var(--mono); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; }
.foot-grid ul { display: grid; gap: var(--s2); font-size: var(--fs-14); }
.foot-grid ul a { color: var(--text-2); text-decoration: none; }
.foot-grid ul a:hover { color: var(--text); text-decoration: underline; }
.foot-base { margin-top: var(--s8); padding-top: var(--s4); border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); font: 400 var(--fs-12)/1.5 var(--mono); color: var(--text-3); }

/* ---------- Alerts (sign-in and sign-out notices) ---------- */
.alert-container { position: fixed; z-index: 50; right: var(--gutter); bottom: calc(var(--s5) + env(safe-area-inset-bottom, 0px)); display: grid; gap: var(--s2); width: min(360px, calc(100vw - 2 * var(--gutter))); }
.alert { position: relative; overflow: hidden; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); background: var(--surface); color: var(--text); border: 1px solid var(--rule); border-radius: var(--r3); box-shadow: var(--shadow); font-size: var(--fs-14); }
.alert-img { width: 18px; height: 18px; }
.alert-green .alert-img { color: var(--done-dot); }
.alert-blue .alert-img { color: var(--run-dot); }
.alert-yellow .alert-img { color: var(--wait-dot); }
.alert-red .alert-img { color: var(--danger); }
.alert-text { margin: 0; }
.alert-close-button { border: 0; background: transparent; color: var(--text-3); font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 4px; border-radius: var(--r1); }
.alert-close-button:hover { color: var(--text); }
.alert-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rule-strong); transform-origin: left; animation: alert-progress linear forwards; }
@keyframes alert-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav, .head-actions .signin { display: none; }
  .menu { display: block; }
  .head-in { gap: var(--s3); }
  .brand { margin-right: auto; }
  .sec-head { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-about { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .sec { padding-block: var(--s8); }
  .sec-tight { padding-block: var(--s6) var(--s8); }
  .notice-long { display: none; }
  .notice-short { display: inline; }
  .notice-in { gap: var(--s3); }
  .spec > div { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .seg { --seg-cols: 1; }
  .seg-workers { --seg-cols: 2; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .cta-long, .brand-by { display: none; }
  .cta-short { display: inline; }
}
@media (max-width: 380px) {
  .notice .tag { display: none; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* "Git environment" term: dotted underline, a small list of supported platforms on hover, focus or tap. */
.term { position: relative; display: inline; }
.term-word {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: help;
  text-decoration: underline dotted var(--rule-strong); text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.term-word:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.term-tip {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; display: grid; gap: 4px; width: max-content; max-width: min(18rem, 80vw);
  padding: 10px 12px; background: var(--surface); color: var(--text); border: 1px solid var(--rule); border-radius: 6px; box-shadow: var(--shadow);
  font-size: 0.8125rem; line-height: 1.4; text-align: left; white-space: normal;
  opacity: 0; visibility: hidden; transform: translateY(-2px); transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility var(--t-fast);
}
.term-tip strong { font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.term-tip strong:not(:first-child) { margin-top: 4px; }
.term-list { display: grid; gap: 2px; }
.term-list em { font-style: normal; color: var(--text-2); }
.term:hover .term-tip, .term:focus-within .term-tip { opacity: 1; visibility: visible; transform: none; }
/* Phones: a term near the right edge would push its (hidden) list past the screen and scroll the page sideways, so the
   list sits fixed above the bottom edge, full width within the gutters; fixed boxes never widen the page. */
@media (max-width: 640px) {
  .term-tip { position: fixed; left: var(--gutter); right: var(--gutter); top: auto; bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px)); width: auto; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .term-tip { transition: none; } }

/* Client-side navigation (src/client): the thin bar while the next page's data loads, and no focus ring on the heading
   (or fragment target) that takes the focus when a new page shows. */
.route-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: 2px; background: var(--focus); transform-origin: left; animation: route-progress 1.2s cubic-bezier(0.1, 0.6, 0.3, 1) forwards; }
@keyframes route-progress { from { transform: scaleX(0); } to { transform: scaleX(0.9); } }
main[aria-busy="true"] { opacity: 0.7; transition: opacity 0.2s ease 0.1s; }
[data-route-focus]:focus { outline: none; }