/* Bilinc: memory you can look back through. One night over an observatory; the sky is real.
   Colour carries meaning everywhere: cyan = added, amber = changed, red = removed. */
@font-face { font-family: Archivo; src: url(../assets/fonts/archivo-normal-100-900.woff2?v=4c98b9d490) format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: Azeret; src: url(../assets/fonts/azeret-mono-normal-400-600.woff2?v=20cbb53806) format('woff2'); font-weight: 400 600; font-display: swap; }

:root {
  --bar-h: 92px;
  --bg: #070b14;
  --glass: #e8eef2;
  --glass-2: rgba(232, 238, 242, .8);
  --line: rgba(232, 238, 242, .16);
  --panel: rgba(7, 11, 20, .58);
  --added: #5ce1e6;
  --changed: #e9b45f;
  --removed: #ff6b57;
  --plate-ink: #0e141f;
  --gut: clamp(20px, 4.4vw, 64px);
  --bar: 92px;
  --night: 0; --dawn: 0; --plate: 0;
}
* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; scroll-behavior: auto; }
body { margin: 0; color: var(--glass); font: 400 1.06rem/1.6 Archivo, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
code { font-family: Azeret, ui-monospace, monospace; font-size: .9em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 20; background: var(--glass); color: var(--bg); padding: 10px 14px; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--added); outline-offset: 3px; }

/* ---- the stage: sky, ground, marks ---------------------------------------------------- */
.stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.no-sky #sky { background: linear-gradient(#0b1730, #070b14 60%); }
.ground { position: absolute; inset: 0; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; transition: opacity .3s; }
.ground--dusk { background-image: url(../assets/dusk-wide16-fg.webp?v=6665031cfb); filter: brightness(calc(1 - .74 * var(--night))) saturate(calc(1 - .45 * var(--night))); opacity: calc(1 - var(--dawn)); }
.ground--dawn { background-image: url(../assets/dawn-wide-fg.webp?v=15b6263266); opacity: var(--dawn); }
[data-shape="tall"] .ground--dusk { background-image: url(../assets/dusk-tall-fg.webp?v=8535bf29b9); background-position: 64% 50%; }
[data-shape="tall"] .ground--dawn { background-image: url(../assets/dawn-tall-fg.webp?v=6e3841ef62); background-position: 64% 50%; }
/* the hero film: the dome opens once at dusk, with the sky cut out of every frame (VP9 alpha) so the
   real sky shows behind it, then hands over to the still it ends on. Wide screens, motion allowed. */
.ground--film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: 0; transition: opacity .7s;
  filter: brightness(calc(1 - .74 * var(--night))) saturate(calc(1 - .45 * var(--night))); }
@media (prefers-reduced-motion: no-preference) and (min-aspect-ratio: 20/21) {
  :root:not([data-film="done"]) .ground--film { opacity: 1; }
  :root:not([data-film="done"]) .ground--dusk { opacity: 0; transition: none; }
}
#scene-trails { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: var(--trail);
  /* the trails fade out behind the words */
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .14) 0, rgba(0, 0, 0, .14) 38%, #000 54%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .14) 0, rgba(0, 0, 0, .14) 38%, #000 54%); }
.trail-note { font-size: .92rem; }
.streak { position: absolute; inset: 0; overflow: visible; filter: drop-shadow(0 0 6px rgba(255, 140, 120, .7)); }
#streak-line { opacity: 0; transition: opacity .25s; }

#marks { position: absolute; inset: 0; }
.mark { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .35s; will-change: transform; }
.mark__ring { position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(232, 238, 242, .55); }
.mark__label { position: absolute; left: 22px; top: -11px; display: grid; gap: 1px; white-space: nowrap; font: 500 .74rem/1.25 Azeret, ui-monospace, monospace; color: var(--glass); text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
.mark__label b { font-weight: 500; opacity: .62; }
.mark--left .mark__label { left: auto; right: 22px; text-align: right; justify-items: end; }
.mark__was { font-weight: 400; opacity: .72; }
.mark__was:empty { display: none; }
.mark__label { transform: translateY(var(--dy, 0px)); }
.mark[data-status="added"] .mark__ring { border: 2px solid var(--added); }
.mark[data-status="modified"] .mark__ring { border: 2px solid var(--changed); }
.mark[data-status="removed"] .mark__ring { border: 2px dashed var(--removed); }
.mark[data-status="bad"] .mark__ring { border: 2px solid var(--removed); box-shadow: 0 0 18px rgba(255, 107, 87, .55); }
.mark[data-status="bad"] .mark__value { color: #ffc7bd; }

/* ---- chrome --------------------------------------------------------------------------- */
/* ---- the bar: a big mark, the scene you are in, the way in -------------------------------- */
.bar { position: fixed; inset: 0 0 auto; z-index: 10; height: var(--bar); display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 28px; padding: 0 var(--gut); transition: background-color .35s, box-shadow .35s; }
.bar[data-backed] { background: rgba(7, 11, 20, .74); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 1px 0 var(--line); }
.bar__brand { display: block; line-height: 0; }
.bar__brand img { display: block; height: 54px; width: auto; }
.bar__scene { margin: 0; justify-self: center; display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(7, 11, 20, .35); font: 500 .8rem Azeret, monospace; color: var(--glass-2); white-space: nowrap; opacity: 0; transform: translateY(-4px); transition: opacity .4s, transform .4s; }
.bar[data-backed] .bar__scene { opacity: 1; transform: none; }
.bar__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--added); box-shadow: 0 0 10px var(--added); }
.bar__clock { color: var(--glass); }
.bar__title { color: var(--glass-2); font-family: Archivo, sans-serif; font-size: .9rem; }
.bar__nav { display: flex; align-items: center; gap: 26px; font-size: 1rem; }
.bar__nav a { position: relative; text-decoration: none; color: var(--glass-2); padding: 6px 0; transition: color .2s; }
.bar__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.bar__nav a:hover { color: var(--glass); }
.bar__nav a:hover::after, .bar__nav a:focus-visible::after { transform: scaleX(1); }
.bar__release { display: inline-flex; align-items: center; gap: 8px; }
.chip { font: 600 .72rem Azeret, monospace; color: var(--bg); background: var(--added); padding: 2px 7px; border-radius: 4px; }
.bar__actions { display: flex; align-items: center; gap: 18px; }
.bar__signin { text-decoration: none; color: var(--glass); font-size: 1rem; }
.bar__signin:hover { text-decoration: underline; text-underline-offset: 5px; }
.bar__menu { display: none; min-height: 40px; padding: 0 14px; background: none; border: 1px solid rgba(232, 238, 242, .5); color: var(--glass); font: 500 .95rem Archivo, sans-serif; cursor: pointer; }
.menu { position: fixed; inset: 0; z-index: 9; background: rgba(5, 8, 15, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: calc(var(--bar) + 6vh) var(--gut) 8vh; display: grid; align-content: start; gap: 28px; }
.menu[hidden] { display: none; }
.menu nav { display: grid; }
.menu nav a { font-weight: 330; font-stretch: 114%; font-size: clamp(2rem, 9vw, 2.8rem); line-height: 1.25; letter-spacing: -.02em; text-decoration: none; padding: 6px 0; border-bottom: 1px solid var(--line); }
.menu__actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 0; }

.btn { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; background: var(--glass); color: var(--bg); text-decoration: none; font: 500 1rem Archivo, sans-serif; border: 1px solid var(--glass); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.btn:hover { background: #fff; }
.btn--line { background: transparent; color: var(--glass); border-color: rgba(232, 238, 242, .6); }
.btn--line:hover { background: rgba(232, 238, 242, .1); }
.btn--small { min-height: 40px; padding: 0 16px; font-size: .95rem; }
.btn:disabled { cursor: default; background: transparent; color: var(--added); border-color: var(--added); }

/* the night on the right edge: one tick per scene, the clock where you are */
.rail { position: fixed; z-index: 8; right: calc(var(--gut) - 4px); top: 22vh; bottom: 22vh; width: 54px; --p: 0; }
.rail::before { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: var(--line); }
.rail ol { list-style: none; margin: 0; padding: 0; height: 100%; position: relative; }
.rail li { position: absolute; right: 0; top: calc(var(--at) * 100%); transform: translateY(-50%); }
.rail li a { display: flex; align-items: center; gap: 8px; text-decoration: none; font: 500 .7rem Azeret, monospace; color: rgba(232, 238, 242, .6); padding: 4px 0; }
.rail li a::after { content: ''; width: 9px; height: 1px; background: currentColor; }
.rail li a:hover { color: var(--glass); }
.rail li.is-near .rail__time { opacity: 0; }
.rail__now { position: absolute; right: 14px; top: calc(var(--p) * 100%); transform: translateY(-50%); font: 600 .78rem Azeret, monospace; color: var(--glass); background: var(--bg); padding: 2px 6px; border: 1px solid var(--line); white-space: nowrap; }
.rail { transition: opacity .3s; }
[data-foot="in"] .rail { opacity: 0; pointer-events: none; }
.stage::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 11, 20, .66), rgba(7, 11, 20, .32) 42%, transparent 64%); opacity: var(--dawn); }
[data-dawn="on"] .rail li a { color: rgba(14, 20, 31, .62); }
[data-dawn="on"] .rail::before { background: rgba(14, 20, 31, .3); }

/* ---- scenes --------------------------------------------------------------------------- */
main { position: relative; z-index: 2; }
.scene { min-height: 135vh; padding: 28vh var(--gut) 18vh; display: flex; align-items: flex-start; }
.scene--hero { min-height: 100vh; padding-top: 22vh; }
.copy { width: min(34rem, 100%); }
.scene h1 { margin: 0; font-weight: 330; font-stretch: 116%; font-size: clamp(2.7rem, 6.2vw, 5.9rem); line-height: .98; letter-spacing: -.035em; max-width: 11ch; }
.scene h2 { margin: 0 0 .5em; font-weight: 360; font-stretch: 112%; font-size: clamp(1.9rem, 3.4vw, 3.1rem); line-height: 1.04; letter-spacing: -.025em; }
.scene p { margin: 0 0 1em; color: var(--glass-2); max-width: 32rem; }
/* after dawn, the night retold in plain words, on solid ground so the light sky never sits behind the text */
.home-more { position: relative; z-index: 2; background: linear-gradient(rgba(7, 11, 20, 0), var(--bg) 22vh); padding-top: 22vh; }
.home-more .sec--first { border-top: 0; }
.lede { font-size: clamp(1.1rem, 1.4vw, 1.3rem); margin-top: 1.1em !important; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6em !important; }
.fine { font-size: .92rem; }
.when { font: 500 .8rem Azeret, monospace !important; color: var(--glass) !important; letter-spacing: .02em; margin-bottom: 1.2em !important; }
.sub { font-size: .9rem; margin: 1.4em 0 .5em !important; color: var(--glass) !important; }
.counts { font: 500 .86rem Azeret, monospace; color: var(--glass) !important; }
.note, .result { font-size: .98rem; color: var(--added) !important; }
.note:focus { outline: none; }

/* beliefs: key, value, source */
.beliefs { list-style: none; margin: 1.2em 0 0; padding: 6px 0; background: var(--panel); border: 1px solid var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.belief { display: grid; grid-template-columns: minmax(7.5rem, auto) 1fr; gap: 2px 14px; padding: 10px 16px; border-left: 2px solid transparent; }
.belief + .belief { border-top: 1px solid var(--line); }
.belief__key { font-size: .8rem; color: rgba(232, 238, 242, .66); padding-top: 3px; }
.belief__value { color: var(--glass); }
.belief__value s { color: rgba(232, 238, 242, .5); margin-right: .4em; text-decoration-thickness: 1px; }
.belief__source { grid-column: 2; font: 400 .76rem Azeret, monospace; color: rgba(232, 238, 242, .58); }
.belief--added { border-left-color: var(--added); }
.belief--modified { border-left-color: var(--changed); }
.belief--removed { border-left-color: var(--removed); }
.belief--bad { border-left-color: var(--removed); background: rgba(255, 107, 87, .08); }
#streak[data-done="true"] .belief--bad .belief__value { text-decoration: line-through; color: rgba(232, 238, 242, .5); }

/* install */
.cmds { list-style: none; margin: 1.2em 0 1.4em; padding: 0; display: grid; gap: 8px; counter-reset: c; }
.cmd { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; background: var(--panel); border: 1px solid var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); counter-increment: c; }
.cmd::before { content: counter(c); font: 500 .76rem Azeret, monospace; color: rgba(232, 238, 242, .5); }
.cmd__text { flex: 1; font-size: 1rem; color: var(--glass); }
.cmd__copy { font: 500 .8rem Archivo, sans-serif; color: var(--glass); background: transparent; border: 1px solid var(--line); padding: 6px 10px; cursor: pointer; }
.cmd__copy:hover { border-color: rgba(232, 238, 242, .5); }
.tools { list-style: none; margin: .4em 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tools li { font: 500 .78rem Azeret, monospace; padding: 5px 9px; border: 1px solid var(--line); background: var(--panel); }

/* ---- the agent's calls, the next chat, the approval card (patterns from beautifului.dev, our own code) */
.trace { display: flex; flex-wrap: wrap; gap: 6px; margin: 1.1em 0 .2em; }
.tool { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px 5px 9px; border: 1px dashed rgba(232, 238, 242, .3); border-radius: 999px; background: rgba(7, 11, 20, .72); font: 500 .76rem Azeret, monospace; color: var(--glass-2); transform: translateY(3px); transition: transform .3s, border-color .3s; }
/* pending reads as pending through the dashed edge and the grey dot, never through faded text */
.tool[data-state="pending"] .tool__name, .tool[data-state="pending"] .tool__arg { color: rgba(232, 238, 242, .74); }
.tool__name { color: var(--glass); font-size: inherit; }
.tool__arg { font: 400 .84rem Archivo, sans-serif; color: var(--glass-2); }
.tool__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: rgba(232, 238, 242, .35); }
.tool[data-state="running"] { transform: none; border-style: solid; border-color: rgba(233, 180, 95, .65); }
.tool[data-state="running"] .tool__dot { background: var(--changed); animation: tool-pulse .6s ease-in-out infinite alternate; }
.tool[data-state="done"] { transform: none; border-style: solid; border-color: var(--line); }
.tool[data-state="done"] .tool__dot { background: var(--added); box-shadow: 0 0 8px rgba(92, 225, 230, .6); }
@keyframes tool-pulse { from { opacity: .35; } to { opacity: 1; } }

.chat { margin-top: .4em; padding: 16px 16px 18px; background: var(--panel); border: 1px solid var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.chat__q { width: fit-content; max-width: 82%; margin: 0 0 6px auto !important; padding: 8px 14px; border-radius: 14px 14px 4px 14px; background: rgba(232, 238, 242, .12); color: var(--glass) !important; }
.chat .trace { margin-top: .6em; }
.chat__a { min-height: 1.7em; margin: .7em 0 0 !important; font-size: 1.12rem; color: var(--glass) !important; }
.chat[data-state="before"] .chat__text { text-decoration: underline wavy rgba(255, 107, 87, .75); text-decoration-thickness: 1px; text-underline-offset: 6px; }
.chat__src { display: inline-block; margin-left: 10px; padding: 2px 8px; border-radius: 4px; font: 500 .74rem Azeret, monospace; vertical-align: 2px; }
.chat__src:empty { display: none; }
.chat[data-state="before"] .chat__src { color: #ffc7bd; border: 1px solid rgba(255, 107, 87, .55); }
.chat[data-state="after"] .chat__src { color: var(--added); border: 1px solid rgba(92, 225, 230, .55); }

.approve { margin-top: 1.5em; padding: 18px 18px 16px; border-radius: 10px; background: rgba(11, 16, 29, .86); border: 1px solid rgba(232, 238, 242, .24); box-shadow: 0 22px 60px rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: border-color .4s; }
.approve__head { display: flex; align-items: center; gap: 12px; }
.approve__head img { width: 22px; height: auto; }
.approve__head h3 { margin: 0; font: 500 1.04rem/1.3 Archivo, sans-serif; color: var(--glass); }
.approve__summary { margin: .9em 0 .2em !important; font-size: .95rem; }
.beliefs--flat { margin-top: .5em; background: rgba(5, 8, 15, .55); -webkit-backdrop-filter: none; backdrop-filter: none; }
.approve__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.approve__declined { display: none; margin: 12px 0 0 !important; font-size: .92rem; }
.approve__again { padding: 0; margin-left: 4px; border: 0; background: none; color: var(--glass); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.approve[data-state="declined"] .approve__actions { display: none; }
.approve[data-state="declined"] .approve__declined { display: block; }
.approve[data-state="done"] { border-color: rgba(92, 225, 230, .6); }
.approve[data-state="done"] .approve__actions { display: none; }
@media (prefers-reduced-motion: reduce) { .tool { transition: none; } .tool[data-state="running"] .tool__dot { animation: none; } }

/* the diff table: fact, 21:00, 02:10, and why */
.dtable-wrap { margin-top: 1em; background: var(--panel); border: 1px solid var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dtable { width: 100%; border-collapse: collapse; font-size: .96rem; }
.dtable thead th { padding: 10px 14px; text-align: left; font: 500 .74rem Azeret, monospace; color: var(--glass-2); border-bottom: 1px solid var(--line); }
.dt th, .dt td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.dt:last-child th, .dt:last-child td { border-bottom: 0; }
.dt th { font-weight: 400; box-shadow: inset 2px 0 0 var(--bar-colour, transparent); }
.dt--added { --bar-colour: var(--added); }
.dt--modified { --bar-colour: var(--changed); }
.dt--removed { --bar-colour: var(--removed); }
.dt__key { display: block; font: 500 .8rem Azeret, monospace; color: var(--glass); }
.dt__tag { display: inline-block; margin-top: 6px; padding: 1px 7px; border-radius: 4px; font: 500 .7rem Azeret, monospace; color: var(--bar-colour); border: 1px solid var(--bar-colour); }
.dt__before s { color: rgba(232, 238, 242, .62); text-decoration-thickness: 1px; }
.dt__after { color: var(--glass); }
.dt__src { display: block; margin-top: 4px; font: 400 .74rem Azeret, monospace; color: rgba(232, 238, 242, .66); }
.dt__none { font: 400 .8rem Azeret, monospace; color: rgba(232, 238, 242, .66); }
.dt[data-lit] th, .dt[data-lit] td { animation: dt-sweep 1.1s ease-out; }
@keyframes dt-sweep { 0% { background: rgba(232, 238, 242, .1); } 100% { background: transparent; } }

/* what recall brought back, with its source */
.ctx { margin-top: .7em; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(5, 8, 15, .55); animation: ctx-in .35s ease-out; }
.ctx__src { margin: 0 0 4px !important; display: flex; align-items: center; gap: 8px; font: 500 .74rem Azeret, monospace; color: var(--glass-2) !important; }
.ctx__n { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid currentColor; font-size: .66rem; }
.ctx__fact { margin: 0 !important; color: var(--glass) !important; }
.ctx__key { margin-right: 10px; font: 500 .8rem Azeret, monospace; color: var(--glass-2); }
.chat[data-state="before"] .ctx { border-color: rgba(255, 107, 87, .45); }
.chat[data-state="after"] .ctx { border-color: rgba(92, 225, 230, .45); }
.chat__src { min-width: 20px; height: 20px; padding: 0 !important; border-radius: 50% !important; display: inline-grid !important; place-items: center; font-size: .68rem !important; }
@keyframes ctx-in { from { transform: translateY(4px); } to { transform: none; } }

/* setup: each command with one line on what it does */
.cmd--task { align-items: flex-start; transition: transform .35s, border-color .35s; transform: translateY(4px); }
.cmd--task[data-lit] { transform: none; border-color: rgba(232, 238, 242, .28); }
.cmd__body { flex: 1; display: grid; gap: 4px; }
.cmd__what { font-size: .88rem; color: var(--glass-2); }
@media (max-width: 760px) {
  .dtable thead { display: none; }
  .dtable, .dtable tbody, .dt, .dt th, .dt td { display: block; width: 100%; }
  .dt { padding: 4px 0; border-bottom: 1px solid var(--line); box-shadow: inset 2px 0 0 var(--bar-colour, transparent); }
  .dt th { box-shadow: none; }
  .dt th, .dt td { border-bottom: 0; padding: 6px 14px; }
}
@media (prefers-reduced-motion: reduce) { .dt[data-lit] th, .dt[data-lit] td, .ctx { animation: none; } .cmd--task { transition: none; transform: none; } }

/* ---- footer: the whole night in one exposure ------------------------------------------ */

/* ---- footer: the whole night in one exposure, and the way back in --------------------------- */
.foot { position: relative; z-index: 3; background: #05080f; }
.foot__sky { position: relative; min-height: max(100vh, 760px); overflow: hidden; display: grid; align-items: end; }
#trails { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.foot__mark { position: absolute; left: 0; top: 0; width: 52px; height: auto; margin: -33px 0 0 -26px; filter: drop-shadow(0 0 24px rgba(92, 225, 230, .4)); }
.foot__sky::after { content: ''; position: absolute; inset: auto 0 0; height: 62%; background: linear-gradient(transparent, rgba(5, 8, 15, .86) 52%, #05080f); pointer-events: none; }
.foot__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 6vw; align-items: end; padding: 0 var(--gut) 9vh; }
.foot__eyebrow { margin: 0 0 1em; font: 500 .8rem Azeret, monospace; color: var(--glass-2); }
.foot__head h2 { margin: 0 0 .4em; font-weight: 330; font-stretch: 116%; font-size: clamp(2.4rem, 4.8vw, 4.6rem); line-height: 1; letter-spacing: -.035em; max-width: 12ch; }
.foot__head p { color: var(--glass-2); margin: 0 0 1.4em; max-width: 30rem; }
.cmd--foot { max-width: 26rem; margin-top: 1.6em; }
.cmd--foot::before { content: '$'; }
/* the big index: a few large destinations, each with one plain line */
.foot__big { display: grid; border-top: 1px solid var(--line); }
.foot__big a { display: grid; grid-template-columns: minmax(9ch, auto) 1fr auto; align-items: baseline; gap: 20px; padding: 16px 0 14px; border-bottom: 1px solid var(--line); text-decoration: none; transition: padding .3s; }
.foot__big a::after { content: '\2197'; font: 400 1.1rem Archivo, sans-serif; color: var(--glass-2); opacity: 0; transform: translate(-6px, 4px); transition: opacity .25s, transform .25s; }
.foot__big-name { font-weight: 340; font-stretch: 114%; font-size: clamp(1.7rem, 2.6vw, 2.5rem); line-height: 1.05; letter-spacing: -.02em; color: var(--glass); }
.foot__big-note { font: 400 .82rem Azeret, monospace; color: rgba(232, 238, 242, .62); transition: color .25s; }
.foot__big a:hover, .foot__big a:focus-visible { padding-left: 10px; }
.foot__big a:hover::after, .foot__big a:focus-visible::after { opacity: 1; transform: none; }
.foot__big a:hover .foot__big-note { color: var(--glass); }
.foot__base { padding: 26px var(--gut) 30px; border-top: 1px solid var(--line); display: grid; gap: 18px; }
.foot__trust { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot__trust a { color: var(--glass-2); text-decoration: none; font-size: .92rem; }
.foot__trust a:hover { color: var(--glass); text-decoration: underline; text-underline-offset: 4px; }
.foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 30px; font-size: .88rem; color: rgba(232, 238, 242, .66); }
.foot__legal a { color: var(--glass-2); }
.foot__social { display: inline-flex; gap: 16px; }
.foot__social a { display: inline-flex; color: var(--glass-2); }
.foot__social a:hover { color: var(--glass); }

/* ---- phones ---------------------------------------------------------------------------- */
@media (max-width: 760px) {
  :root { --bar: 72px; }
  .bar { grid-template-columns: auto 1fr; gap: 12px; }
  .bar__brand img { height: 44px; }
  .bar__scene, .bar__nav, .bar__signin { display: none; }
  .bar__actions { justify-self: end; gap: 10px; }
  .bar__menu { display: inline-flex; align-items: center; }
  .foot__grid { grid-template-columns: 1fr; gap: 40px; padding-top: 300px; padding-bottom: 7vh; }
  .foot__big a { grid-template-columns: 1fr auto; }
  .foot__big-note { grid-column: 1; }
  .foot__big a::after { grid-row: 1; grid-column: 2; opacity: .6; transform: none; }
  #scene-trails { -webkit-mask-image: linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .35)); mask-image: linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .35)); }
  .stage::after { background: linear-gradient(180deg, rgba(7, 11, 20, .7), rgba(7, 11, 20, .4) 55%, transparent 80%); }
  .rail li a .rail__time { display: none; }
  .scene { padding: 16vh 20px 14vh; min-height: 125vh; }
  .scene--hero { padding-top: 12vh; align-items: flex-start; }
  .scene h1 { font-size: clamp(2.2rem, 10.4vw, 2.9rem); }
  .lede { font-size: 1.02rem; }
  .rail { top: auto; bottom: 14px; right: 14px; width: auto; height: auto; }
  .rail::before, .rail ol { display: none; }
  .rail__now { position: static; transform: none; display: block; }
  .mark__label { font-size: .66rem; }
  .belief { grid-template-columns: 1fr; padding: 10px 12px; }
  .belief__source { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .mark, .ground, #streak-line { transition: none; }
}

@media (max-width: 1180px) and (min-width: 761px) {
  .bar__scene { display: none; }
  .bar { grid-template-columns: auto 1fr auto; }
  .bar__nav { justify-self: end; gap: 20px; }
  .bar__release { display: none !important; }
}

/* ==== the other pages ====================================================================
   Every page but the homepage stands at one hour of the same night. Its plate is the sky at
   that hour over the same ridge, drawn once; below it the page reads on the night itself. */
.bar__nav a[aria-current="page"] { color: var(--glass); }
.bar__nav a[aria-current="page"]::after { transform: scaleX(1); }
.menu nav a[aria-current="page"] { color: var(--added); }

.plate { position: relative; z-index: 1; isolation: isolate; overflow: hidden; display: flex; align-items: flex-start; min-height: clamp(620px, 92vh, 980px); padding: calc(var(--bar) + 7vh) var(--gut) 16vh; --night: 1; --dawn: 0; }
.plate--short { min-height: 0; padding-top: calc(var(--bar) + 64px); padding-bottom: 168px; }
.plate__sky, .plate__trails { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -4; }
.plate.no-sky .plate__sky { background: linear-gradient(#0b1730, #070b14 70%); }
.plate__trails { z-index: -3; -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .12) 0, rgba(0, 0, 0, .12) 36%, #000 60%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .12) 0, rgba(0, 0, 0, .12) 36%, #000 60%); }
.plate__ground { position: absolute; inset: 0; z-index: -2; pointer-events: none; background-repeat: no-repeat; background-size: cover; background-position: 50% 100%; }
.plate__ground--dusk { background-image: url(../assets/dusk-wide16-fg.webp?v=6665031cfb); filter: brightness(calc(1 - .74 * var(--night))) saturate(calc(1 - .45 * var(--night))); opacity: calc(1 - var(--dawn)); }
.plate__ground--dawn { background-image: url(../assets/dawn-wide-fg.webp?v=15b6263266); opacity: var(--dawn); }
@media (max-aspect-ratio: 20/21) {
  .plate__ground--dusk { background-image: url(../assets/dusk-tall-fg.webp?v=8535bf29b9); background-position: 64% 100%; }
  .plate__ground--dawn { background-image: url(../assets/dawn-tall-fg.webp?v=6e3841ef62); background-position: 64% 100%; }
}
/* the dome's slit keeps its light through the night */
.plate__slit { position: absolute; left: -100px; top: 0; z-index: -2; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 205, 140, .62), rgba(255, 170, 90, .16) 62%, rgba(255, 160, 80, 0)); mix-blend-mode: screen; opacity: calc(.7 * var(--night)); transition: opacity 1.4s ease; }
.plate[data-connect]:not([data-connected="true"]) .plate__slit { opacity: calc(.18 * var(--night)); }
.plate::after { content: ''; position: absolute; inset: auto 0 0; height: 26%; z-index: -1; pointer-events: none; background: linear-gradient(rgba(7, 11, 20, 0), var(--bg)); }
.plate--dawn::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(7, 11, 20, .62), rgba(7, 11, 20, .3) 44%, transparent 66%); }
.plate__copy { position: relative; width: min(40rem, 100%); }
.plate__copy h1 { margin: 0; font-weight: 330; font-stretch: 116%; font-size: clamp(2.5rem, 4.7vw, 4.4rem); line-height: 1; letter-spacing: -.034em; max-width: 14ch; }
.plate--short .plate__copy h1 { font-size: clamp(2.3rem, 4.4vw, 3.8rem); max-width: 18ch; }
.plate__copy .lede { margin: 1.1em 0 0; color: var(--glass-2); font-size: clamp(1.08rem, 1.35vw, 1.26rem); max-width: 34rem; }
.plate__copy .actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.7em 0 0; }
.plate__copy .when { margin: 0 0 1.2em; }
.plate__copy .fine { margin: 1em 0 0; color: var(--glass-2); font-size: .92rem; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1.2em; padding: 0; list-style: none; font: 500 .8rem Azeret, monospace; color: var(--glass-2); }
.crumbs li + li::before { content: '/'; margin-right: 8px; color: rgba(232, 238, 242, .4); }
.crumbs a { color: var(--glass-2); text-decoration: none; }
.crumbs a:hover { color: var(--glass); text-decoration: underline; text-underline-offset: 4px; }
/* one fact pinned to a star, as on the homepage */
.plate__mark { opacity: 1; z-index: -1; }
.plate__mark[hidden] { display: none; }
.plate__mark .mark__ring { border: 2px solid var(--added); box-shadow: 0 0 16px rgba(92, 225, 230, .35); }
.plate[data-connect] .plate__mark { opacity: 0; transition: opacity .5s; }
.plate[data-connected="star"] .plate__mark, .plate[data-connected="true"] .plate__mark { opacity: 1; }
.plate__beam { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; overflow: visible; pointer-events: none; }
.plate__beam[hidden] { display: none; }
.plate__beam line { stroke: url(#beam-g); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: var(--len, 2000) var(--len, 2000); stroke-dashoffset: var(--len, 2000); transition: stroke-dashoffset .9s cubic-bezier(.55, 0, .2, 1); }
.plate[data-connected] .plate__beam line { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .plate__beam line, .plate__slit, .plate__mark { transition: none !important; } }

/* the address an MCP client points at */
.endpoint { display: flex; align-items: stretch; margin-top: 1.6em; max-width: 34rem; border: 1px solid rgba(232, 238, 242, .32); background: rgba(5, 8, 15, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.endpoint code { flex: 1; min-width: 0; padding: 14px 16px; font-size: 1.02rem; color: var(--glass); white-space: nowrap; overflow-x: auto; }
.endpoint button { flex: none; padding: 0 16px; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--glass); font: 500 .9rem Archivo, sans-serif; cursor: pointer; }
.endpoint button:hover { background: rgba(232, 238, 242, .08); }
.plate__copy .trace { margin-top: 1em; }

/* ---- sections: the heading on the left, the matter on the right ---------------------------- */
.sec { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); gap: clamp(28px, 5vw, 88px); padding: clamp(64px, 8vw, 112px) var(--gut); border-top: 1px solid var(--line); scroll-margin-top: var(--bar); }
.sec--first { border-top: 0; padding-top: clamp(24px, 4vw, 48px); }
.has-rail .sec { padding-right: calc(var(--gut) + 120px); }
.sec__head { align-self: start; position: sticky; top: calc(var(--bar) + 28px); }
.sec__head h2 { margin: 0 0 .5em; font-weight: 360; font-stretch: 112%; font-size: clamp(1.75rem, 2.7vw, 2.5rem); line-height: 1.06; letter-spacing: -.022em; }
.sec__head p { margin: 0 0 .8em; color: var(--glass-2); }
.sec__body { min-width: 0; max-width: 56rem; }
.sec__body > p, .sec__body > ul:not([class]) { color: var(--glass-2); max-width: 42rem; }
.sec__body > p:first-child { margin-top: 0; }
.sec__body h3 { margin: 2em 0 .6em; font: 500 1.14rem/1.3 Archivo, sans-serif; color: var(--glass); }
.sec__body h3:first-child { margin-top: 0; }
.sec--wide { grid-template-columns: 1fr; }
.sec--wide .sec__head { position: static; max-width: 46rem; }
.sec--wide .sec__body { max-width: none; }

/* tabs: one segmented row, the panel below */
.tabs__list { display: flex; flex-wrap: wrap; gap: 4px; width: fit-content; max-width: 100%; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: rgba(5, 8, 15, .6); }
.tabs__list [role="tab"] { min-height: 40px; padding: 0 14px; border: 0; border-radius: 8px; background: none; color: var(--glass-2); font: 500 .95rem Archivo, sans-serif; cursor: pointer; transition: background .2s, color .2s; }
.tabs__list [role="tab"]:hover { color: var(--glass); background: rgba(232, 238, 242, .07); }
.tabs__list [role="tab"][aria-selected="true"] { background: var(--glass); color: var(--bg); }
.tabs__panel { margin-top: 22px; }
.tabs__panel:focus-visible { outline-offset: 6px; }
.tabs__panel > p { color: var(--glass-2); max-width: 42rem; }

/* code: a quiet block, its language and a copy button */
.code { margin: 16px 0; border: 1px solid var(--line); border-radius: 10px; background: #050810; overflow: hidden; }
.code__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0 8px 0 14px; border-bottom: 1px solid var(--line); font: 500 .74rem Azeret, monospace; color: rgba(232, 238, 242, .66); }
.code__copy { padding: 5px 10px; border: 1px solid var(--line); background: transparent; color: var(--glass); font: 500 .8rem Archivo, sans-serif; cursor: pointer; }
.code__copy:hover { border-color: rgba(232, 238, 242, .5); }
.code pre { margin: 0; padding: 16px 18px; overflow-x: auto; font: 400 .88rem/1.7 Azeret, ui-monospace, monospace; color: var(--glass); tab-size: 2; }
.code pre code { font-size: inherit; }
.code--wrap pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.tk-k { color: #a9c3ff; }
.tk-s { color: #e8eef2; }
.tk-n { color: #c9d6ff; }
.tk-p, .tk-c { color: rgba(232, 238, 242, .5); }
.tk-c { font-style: italic; }
.tk-x { color: #a9c3ff; }

/* numbered steps */
.steps { list-style: none; margin: 0 0 1.4em; padding: 0; counter-reset: s; display: grid; gap: 14px; }
.steps > li { counter-increment: s; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; color: var(--glass-2); }
.steps > li::before { content: counter(s); display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(232, 238, 242, .3); border-radius: 50%; font: 500 .72rem Azeret, monospace; color: var(--glass); }
.steps > li > :first-child { margin-top: 2px; }
.steps strong { color: var(--glass); font-weight: 500; }
.check { display: flex; gap: 10px; align-items: baseline; margin: 1.2em 0 0; padding: 12px 14px; border-left: 2px solid var(--added); background: rgba(92, 225, 230, .06); color: var(--glass); max-width: 42rem; }
.check b { font: 500 .74rem Azeret, monospace; color: var(--added); white-space: nowrap; }

/* tables: data on the night, thin rules, monospace keys */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: rgba(5, 8, 15, .5); }
.table { width: 100%; border-collapse: collapse; font-size: .97rem; }
.table th, .table td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.table tr:last-child > * { border-bottom: 0; }
.table thead th { font: 500 .74rem Azeret, monospace; color: var(--glass-2); background: rgba(232, 238, 242, .03); }
.table tbody th { font-weight: 500; color: var(--glass); }
.table td { color: var(--glass-2); }
.table code { color: var(--glass); }
.tag { display: inline-block; padding: 1px 7px; border-radius: 4px; border: 1px solid var(--line); font: 500 .7rem Azeret, monospace; color: var(--glass-2); white-space: nowrap; }
.tag--write { color: var(--changed); border-color: rgba(233, 180, 95, .55); }
.tag--read { color: var(--added); border-color: rgba(92, 225, 230, .5); }

/* questions and answers */
.faq { border-top: 1px solid var(--line); max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 18px 0; cursor: pointer; list-style: none; font-size: 1.08rem; color: var(--glass); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; font: 300 1.5rem/1 Archivo, sans-serif; color: var(--glass-2); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 20px; color: var(--glass-2); max-width: 44rem; }
.faq details > div p { margin: 0 0 .8em; }

/* the page rail: the homepage's hours, here the page's sections */
.rail--page { transition: opacity .3s; }
.rail--page[data-hidden="true"] { opacity: 0; pointer-events: none; }
.rail--page li a[aria-current] { color: var(--glass); }
.rail--page .rail__now { font-weight: 500; }
.rail--page .rail__time { white-space: nowrap; }
@media (max-width: 1180px) { .rail--page { display: none; } .has-rail .sec { padding-right: var(--gut); } }

/* a list of destinations, each with one plain line (the footer's big index, in the page) */
.index { display: grid; border-top: 1px solid var(--line); }
.index a { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(0, 2fr) auto; align-items: baseline; gap: 20px; padding: 18px 0 16px; border-bottom: 1px solid var(--line); text-decoration: none; transition: padding .3s; }
.index a::after { content: '\2197'; color: var(--glass-2); opacity: 0; transform: translate(-6px, 4px); transition: opacity .25s, transform .25s; }
.index a:hover, .index a:focus-visible { padding-left: 10px; }
.index a:hover::after, .index a:focus-visible::after { opacity: 1; transform: none; }
.index__name { font-weight: 360; font-stretch: 112%; font-size: clamp(1.3rem, 1.9vw, 1.7rem); line-height: 1.15; letter-spacing: -.015em; color: var(--glass); }
.index__note { color: var(--glass-2); font-size: .96rem; }

/* reading: docs, policies */
.prose { max-width: 46rem; font-size: 1.04rem; line-height: 1.72; color: rgba(232, 238, 242, .86); }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin: 2.1em 0 .55em; font-weight: 380; font-stretch: 110%; font-size: clamp(1.45rem, 2vw, 1.8rem); line-height: 1.15; letter-spacing: -.015em; color: var(--glass); scroll-margin-top: calc(var(--bar) + 24px); }
.prose h3 { margin: 1.8em 0 .45em; font: 500 1.16rem/1.35 Archivo, sans-serif; color: var(--glass); scroll-margin-top: calc(var(--bar) + 24px); }
.prose h4 { margin: 1.5em 0 .4em; font: 600 1rem/1.4 Archivo, sans-serif; color: var(--glass); }
.prose p, .prose ul, .prose ol { margin: 0 0 1em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: .3em 0; }
.prose li::marker { color: rgba(232, 238, 242, .5); }
.prose a { color: var(--glass); text-decoration: underline; text-decoration-color: rgba(92, 225, 230, .6); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--added); }
.prose strong { color: var(--glass); font-weight: 600; }
.prose :not(pre) > code { padding: .12em .38em; border-radius: 4px; background: rgba(232, 238, 242, .08); color: var(--glass); font-size: .86em; overflow-wrap: anywhere; }
.prose blockquote { margin: 1.4em 0; padding: .3em 0 .3em 1.2em; border-left: 2px solid rgba(232, 238, 242, .3); color: var(--glass-2); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.prose .table-wrap { margin: 1.4em 0; }
.prose table { font-size: .94rem; }
.prose img { max-width: 100%; height: auto; }

@media (max-width: 960px) {
  .sec { grid-template-columns: 1fr; gap: 22px; }
  .sec__head { position: static; }
}
@media (max-width: 760px) {
  .plate { min-height: 0; padding: calc(var(--bar) + 44px) 20px 300px; }
  .plate--short { padding-bottom: 150px; }
  .plate__copy h1 { font-size: clamp(2.3rem, 10.6vw, 3rem); }
  .plate--short .plate__copy h1 { font-size: clamp(2.1rem, 9.4vw, 2.7rem); }
  .plate::after { height: 18%; }
  .sec { padding: 56px 20px; }
  .index a { grid-template-columns: 1fr auto; gap: 4px 16px; }
  .index__note { grid-column: 1; }
  .index a::after { grid-row: 1; grid-column: 2; opacity: .6; transform: none; }
  .table th, .table td { padding: 11px 12px; }
}

/* small lists: pairs of a name and one line, and checked promises */
.pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 1.2em; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.pairs > div { padding: 16px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pairs dt { margin: 0 0 4px; font-weight: 500; color: var(--glass); }
.pairs dd { margin: 0; color: var(--glass-2); font-size: .95rem; }
.checks { list-style: none; margin: 0 0 1.8em; padding: 0; display: grid; gap: 12px; max-width: 44rem; }
.checks li { position: relative; padding-left: 32px; color: var(--glass); }
.checks li::before { content: ''; position: absolute; left: 3px; top: .42em; width: 13px; height: 7px; border-left: 2px solid var(--added); border-bottom: 2px solid var(--added); transform: rotate(-45deg); }
.asks { color: var(--glass); }
.fine a, .sec__body p a:not(.btn) { color: var(--glass); text-decoration: underline; text-decoration-color: rgba(92, 225, 230, .6); text-underline-offset: 3px; }
@media (max-width: 760px) { .pairs { grid-template-columns: 1fr; } }

/* tables that stack into one card per row on phones */
.table--tools td:nth-child(3), .table--tools td:nth-child(4) { white-space: nowrap; }
@media (max-width: 760px) {
  .endpoint code { font-size: .88rem; padding: 13px 12px; }
  .table--stack thead { display: none; }
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack th, .table--stack td { display: block; width: 100%; }
  .table--stack tr { padding: 10px 0 12px; border-bottom: 1px solid var(--line); }
  .table--stack tr:last-child { border-bottom: 0; }
  .table--stack th, .table--stack td { border: 0 !important; padding: 4px 14px; white-space: normal !important; }
  .table--stack td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 500 .7rem Azeret, monospace; color: rgba(232, 238, 242, .6); }
}

/* ---- pricing: the plans side by side, the estimate, what counts ------------------------------ */
.plans { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 1.4em; }
.plan { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 28px 22px 26px; border-left: 1px solid var(--line); transition: background .3s, box-shadow .3s; }
.plan:first-child { border-left: 0; padding-left: 0; }
.plan[data-fit] { background: linear-gradient(rgba(92, 225, 230, .07), rgba(92, 225, 230, 0) 46%); box-shadow: inset 0 2px 0 var(--added); }
.plan:first-child[data-fit] { padding-left: 22px; }
.plan__head h3 { margin: 0 0 .3em; font-weight: 380; font-stretch: 112%; font-size: 1.55rem; letter-spacing: -.015em; }
.plan__who { margin: 0 0 1.1em; min-height: 2.9em; font-size: .9rem; color: var(--glass-2); }
.plan__cost { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.plan__price { font-weight: 320; font-stretch: 110%; font-size: clamp(2.2rem, 2.8vw, 2.8rem); line-height: 1; letter-spacing: -.03em; color: var(--glass); }
.plan__per { font-size: .92rem; color: var(--glass-2); }
.plan__year { flex-basis: 100%; font-size: .84rem; color: rgba(232, 238, 242, .62); }
.plan__ops { margin: .9em 0 0; font-size: .9rem; color: var(--glass-2); }
.plan__ops b { display: block; font: 500 1.05rem Azeret, monospace; color: var(--glass); }
.plan__fit { position: absolute; top: 12px; right: 14px; padding: 1px 7px; border: 1px solid rgba(92, 225, 230, .55); border-radius: 4px; font: 500 .66rem Azeret, monospace; color: var(--added); opacity: 0; transition: opacity .3s; }
.plan[data-fit] .plan__fit { opacity: 1; }
.plan__cta { justify-content: center; width: 100%; }
.plan__note { margin: -6px 0 0; font-size: .84rem; color: var(--glass-2); }
.plan__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .92rem; color: var(--glass); }
.plan__list li { position: relative; padding-left: 20px; }
.plan__list li::before { content: ''; position: absolute; left: 1px; top: .5em; width: 9px; height: 5px; border-left: 1.5px solid var(--added); border-bottom: 1.5px solid var(--added); transform: rotate(-45deg); }
.plan__specs { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.plan__specs div { display: flex; justify-content: space-between; gap: 10px; font-size: .84rem; }
.plan__specs dt { font: 500 .72rem Azeret, monospace; color: rgba(232, 238, 242, .6); padding-top: 2px; }
.plan__specs dd { margin: 0; text-align: right; color: var(--glass); }

.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border: 1px solid var(--line); border-radius: 12px; background: rgba(5, 8, 15, .5); }
.calc__inputs { display: grid; gap: 26px; padding: 26px 26px 28px; border-right: 1px solid var(--line); }
.field { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 16px; }
.field__label { grid-row: 1; grid-column: 1; font-weight: 500; color: var(--glass); }
.field__out { grid-row: 1; grid-column: 2; font: 500 1rem Azeret, monospace; color: var(--glass); min-width: 7ch; text-align: right; }
.field input[type="range"] { grid-row: 2; grid-column: 1 / -1; }
.field__help { grid-row: 3; grid-column: 1 / -1; margin: -4px 0 0; font-size: .84rem; color: rgba(232, 238, 242, .64); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; margin: 0; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: rgba(232, 238, 242, .28); }
input[type="range"]::-moz-range-track { height: 2px; background: rgba(232, 238, 242, .28); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -8px; border-radius: 50%; background: var(--glass); border: 3px solid var(--bg); box-shadow: 0 0 0 1px rgba(232, 238, 242, .6); }
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--glass); border: 3px solid var(--bg); box-shadow: 0 0 0 1px rgba(232, 238, 242, .6); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--added); }
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--added); }
.calc__out { display: flex; flex-direction: column; gap: 18px; padding: 26px 26px 28px; }
.calc__total { margin: 0; color: var(--glass-2); }
.calc__n { display: block; font-weight: 320; font-stretch: 112%; font-size: clamp(2.6rem, 4vw, 3.6rem); line-height: 1.05; letter-spacing: -.03em; color: var(--glass); font-variant-numeric: tabular-nums; }
.meter { position: relative; padding-bottom: 42px; }
.meter__bar { position: relative; height: 4px; background: rgba(232, 238, 242, .14); border-radius: 2px; }
.meter__fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--at) * 100%); background: rgba(92, 225, 230, .55); border-radius: 2px; transition: width .25s; }
.meter__mark { position: absolute; top: -7px; left: calc(var(--at) * 100%); width: 2px; height: 18px; margin-left: -1px; background: var(--added); box-shadow: 0 0 10px var(--added); transition: left .25s; }
.calc .meter__fill { width: calc(var(--at) * 100%); }
.calc .meter__mark { left: calc(var(--at) * 100%); }
.meter__ticks { list-style: none; margin: 0; padding: 0; }
.meter__ticks li { position: absolute; top: 12px; transform: translateX(-50%); display: grid; justify-items: center; font-size: .74rem; color: var(--glass-2); white-space: nowrap; }
.meter__ticks li::before { content: ''; position: absolute; top: -14px; width: 1px; height: 10px; background: rgba(232, 238, 242, .45); }
.meter__ticks b { font: 500 .7rem Azeret, monospace; color: rgba(232, 238, 242, .6); }
.calc__fit { margin: 0; color: var(--glass); font-size: 1.04rem; min-height: 3.2em; }
.calc__go { margin: auto 0 0; }
@media (prefers-reduced-motion: reduce) { .meter__fill, .meter__mark { transition: none; } }
@media (max-width: 1180px) {
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plan:nth-child(4) { border-left: 0; padding-left: 0; }
  .plan:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@media (max-width: 860px) {
  .plans { grid-template-columns: 1fr; }
  .plan, .plan:first-child, .plan:nth-child(4) { border-left: 0; padding: 26px 0; }
  .plan + .plan { border-top: 1px solid var(--line); }
  .plan[data-fit] { padding-left: 16px; padding-right: 16px; }
  .plan__who { min-height: 0; }
  .calc { grid-template-columns: 1fr; }
  .calc__inputs { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 760px) { .calc__inputs, .calc__out { padding: 20px 18px 22px; } }

/* ---- compare: two sides in their own words, which one fits ---------------------------------- */
.index--big .index__name { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
.index--big a { grid-template-columns: minmax(14rem, 1fr) minmax(0, 1.6fr) auto; padding: 22px 0 20px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.duo__side { margin: 0; padding: 26px 28px 20px 0; }
.duo__side + .duo__side { padding-left: 28px; border-left: 1px solid var(--line); }
.duo figcaption { margin: 0 0 12px; font: 500 .78rem Azeret, monospace; color: var(--glass-2); }
.duo blockquote { margin: 0 0 16px; font-weight: 340; font-stretch: 108%; font-size: clamp(1.15rem, 1.5vw, 1.36rem); line-height: 1.38; color: var(--glass); }
.duo .fine { margin: 0; }
.table--compare td:last-child { color: var(--glass); }
.table--compare tbody th { width: 15%; }
.fits { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.fits__col { padding: 24px 28px 6px 0; }
.fits__col + .fits__col { padding-left: 28px; border-left: 1px solid var(--line); }
.fits h3 { margin: 0 0 .9em; }
.fits ul { margin: 0; padding-left: 1.1em; display: grid; gap: 9px; color: var(--glass-2); }
.fits__col--us ul { color: var(--glass); }

/* ---- enterprise: the boundary, the fourteen days -------------------------------------------- */
.pairs--loose > div { padding: 22px 22px 20px; }
.boundary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; margin: 0 0 28px; }
.boundary__in { position: relative; padding: 40px 26px 30px; border: 1px dashed rgba(232, 238, 242, .42); border-radius: 14px; }
.boundary__label { position: absolute; top: -10px; left: 18px; margin: 0; padding: 0 8px; background: var(--bg); font: 500 .74rem Azeret, monospace; color: var(--glass-2); }
.boundary__flow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(104px, 1fr) minmax(0, 1.1fr) minmax(104px, 1fr) minmax(0, 1fr); align-items: center; }
.node { padding: 14px 12px; border: 1px solid rgba(232, 238, 242, .26); background: rgba(5, 8, 15, .7); text-align: center; font-size: .95rem; font-weight: 500; color: var(--glass); }
.node--bilinc { display: grid; justify-items: center; gap: 8px; padding: 18px 12px; border-color: rgba(92, 225, 230, .7); box-shadow: 0 0 28px rgba(92, 225, 230, .14); }
.node--bilinc img { width: 22px; height: auto; }
.wire { position: relative; height: 1px; background: rgba(232, 238, 242, .5); }
.wire span { position: absolute; left: 6px; right: 6px; bottom: 9px; text-align: center; font: 500 .66rem/1.35 Azeret, monospace; color: var(--glass-2); }
.wire::after { content: ''; position: absolute; right: -1px; top: -4px; border-left: 7px solid rgba(232, 238, 242, .7); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.wire--back::after { right: auto; left: -1px; border-left: 0; border-right: 7px solid rgba(232, 238, 242, .7); }
.boundary__out { display: flex; align-items: center; gap: 12px; }
.boundary__out p { margin: 0; max-width: 9.5em; font: 500 .7rem/1.45 Azeret, monospace; color: rgba(255, 199, 189, .9); }
.boundary__x { position: relative; flex: none; width: 34px; border-top: 1px dashed var(--removed); }
.boundary__x::after { content: '\00d7'; position: absolute; right: -10px; top: -14px; font: 400 1.2rem/1 Archivo, sans-serif; color: var(--removed); }
.days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); column-gap: 3px; }
.days li { padding-top: 12px; border-top: 4px solid rgba(232, 238, 242, .5); }
.days li:last-child { border-top-color: var(--added); }
.days__when { font: 500 .76rem Azeret, monospace; color: var(--glass); white-space: nowrap; }
.days__notes { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.days__notes li { display: grid; align-content: start; gap: 6px; font-size: .94rem; color: var(--glass-2); }
.days__notes b { font: 500 .76rem Azeret, monospace; color: var(--glass); }
.days__scale { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); column-gap: 3px; margin-top: 22px; padding-top: 8px; border-top: 1px solid var(--line); }
.days__scale span { font: 500 .66rem Azeret, monospace; color: rgba(232, 238, 242, .5); }
@media (max-width: 960px) {
  .boundary { grid-template-columns: 1fr; gap: 18px; }
  .boundary__flow { grid-template-columns: 1fr; }
  .wire { width: 1px; height: 46px; margin: 0 auto; }
  .wire span { left: 14px; bottom: auto; top: 50%; transform: translateY(-50%); }
  .wire::after { right: auto; left: -4px; top: auto; bottom: -1px; border: 0; border-top: 7px solid rgba(232, 238, 242, .7); border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; }
  .wire--back::after { top: -1px; bottom: auto; border-top: 0; border-bottom: 7px solid rgba(232, 238, 242, .7); }
  .boundary__x { width: 40px; }
}
@media (max-width: 760px) {
  .duo, .fits { grid-template-columns: 1fr; }
  .duo__side + .duo__side, .fits__col + .fits__col { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .index--big a { grid-template-columns: 1fr auto; }
  .days__when { font-size: .66rem; }
  .days__notes { grid-template-columns: 1fr 1fr; }
  .days__scale span:nth-child(even) { visibility: hidden; }
}

/* ---- changelog: since your version, then every release --------------------------------------- */
.cmd--plate { max-width: 30rem; margin-top: 1.5em; }
.cmd--plate::before { content: '$'; }
.since { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: rgba(5, 8, 15, .55); }
.since__pick { display: flex; align-items: center; gap: 12px; }
.since__pick label { font-weight: 500; color: var(--glass); }
.select { position: relative; display: inline-flex; }
.select::after { content: ''; position: absolute; right: 15px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 1.5px solid var(--glass); border-bottom: 1.5px solid var(--glass); transform: rotate(45deg); pointer-events: none; }
.select select { min-height: 42px; padding: 0 40px 0 14px; border: 1px solid rgba(232, 238, 242, .4); border-radius: 8px; background: #0b111d; color: var(--glass); font: 500 .95rem Azeret, monospace; -webkit-appearance: none; appearance: none; cursor: pointer; }
.since__out { display: grid; gap: 6px; flex: 1; min-width: 16rem; }
.since__out .trace { margin: 0; }
.since__counts { margin: 0 !important; font-size: .94rem; color: var(--glass-2); }
.rels { list-style: none; margin: 2.2em 0 0; padding: 0; border-left: 1px solid var(--line); }
.rel__month { margin: 40px 0 0; padding: 0 0 10px 26px; font: 500 .78rem Azeret, monospace; color: var(--glass-2); }
.rel__month:first-child { margin-top: 6px; }
.rel { position: relative; padding: 18px 0 22px 26px; border-top: 1px solid var(--line); transition: opacity .3s, box-shadow .3s; scroll-margin-top: calc(var(--bar) + 20px); }
.rel::before { content: ''; position: absolute; left: -5px; top: 28px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1px solid rgba(232, 238, 242, .55); transition: background .3s, border-color .3s; }
.rel__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.rels .rel__v { margin: 0; font: 360 1.7rem/1.1 Archivo, sans-serif; font-stretch: 112%; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--glass); }
.rel time { font: 500 .8rem Azeret, monospace; color: var(--glass-2); }
.rel__items { margin: 12px 0 0; padding-left: 1.1em; display: grid; gap: 7px; max-width: 46rem; color: rgba(232, 238, 242, .86); }
.rel__items li::marker { color: rgba(232, 238, 242, .45); }
.rel--quiet { padding-top: 14px; padding-bottom: 14px; }
.rels .rel--quiet .rel__v { font-size: 1.25rem; }
.rel--quiet::before { top: 22px; }
.rel__none { margin: 6px 0 0; font-size: .9rem; color: rgba(232, 238, 242, .62); }
.tag--gone { color: #ffc7bd; border-color: rgba(255, 107, 87, .6); }
.rels[data-since] .rel[data-state="new"] { box-shadow: inset 2px 0 0 var(--added); }
.rels[data-since] .rel[data-state="new"]::before { background: var(--added); border-color: var(--added); box-shadow: 0 0 10px rgba(92, 225, 230, .6); }
.rels[data-since] .rel[data-state="here"]::before { background: var(--glass); border-color: var(--glass); }
.rels[data-since] .rel[data-state="here"] .rel__head::after { content: 'You run this'; padding: 1px 7px; border: 1px solid rgba(232, 238, 242, .4); border-radius: 4px; font: 500 .7rem Azeret, monospace; color: var(--glass); }
.rels[data-since] .rel[data-state="old"] { opacity: .42; }
@media (prefers-reduced-motion: reduce) { .rel, .rel::before { transition: none; } }

/* ---- docs: the sidebar, the page, its outline -------------------------------------------- */
.is-docs .plate--short { padding-bottom: 116px; }
.docs { position: relative; z-index: 2; display: grid; grid-template-columns: 15.5rem minmax(0, 1fr) 13rem; gap: clamp(28px, 4vw, 64px); align-items: start; padding: 8px var(--gut) 120px; }
.docs__col { position: sticky; top: calc(var(--bar) + 18px); max-height: calc(100vh - var(--bar) - 36px); overflow: auto; padding: 2px 8px 24px 2px; scrollbar-width: thin; scrollbar-color: rgba(232, 238, 242, .2) transparent; }
.docs__side > summary { display: none; }
.docs__group { margin: 0 0 22px; }
.docs__group-name { margin: 0 0 6px; font: 500 .74rem Azeret, monospace; color: rgba(232, 238, 242, .6); }
.docs__group ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.docs__group a { display: block; margin-left: -1px; padding: 5px 0 5px 14px; border-left: 1px solid transparent; color: var(--glass-2); text-decoration: none; font-size: .94rem; line-height: 1.35; }
.docs__group a:hover { color: var(--glass); }
.docs__group a[aria-current="page"] { color: var(--glass); border-left-color: var(--added); }
.docs__page { min-width: 0; }
.docs__toc { position: sticky; top: calc(var(--bar) + 22px); }
.docs__toc p { margin: 0 0 10px; font: 500 .74rem Azeret, monospace; color: rgba(232, 238, 242, .6); }
.docs__toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.docs__toc li { line-height: 1.3; }
.docs__toc a { color: rgba(232, 238, 242, .66); text-decoration: none; font-size: .88rem; line-height: 1.35; }
.docs__toc a:hover, .docs__toc a[aria-current] { color: var(--glass); }
.docs__toc a[aria-current] { box-shadow: -10px 0 0 -8px var(--added); }
.docs__pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); }
.prose .docs__pager a { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); text-decoration: none; color: var(--glass); transition: border-color .2s; }
.prose .docs__pager a:hover { border-color: rgba(232, 238, 242, .45); }
.docs__pager a span { font: 500 .72rem Azeret, monospace; color: var(--glass-2); }
.docs__next { text-align: right; }
.docs__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 56px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.docs__card { padding: 20px 22px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.prose .docs__card h2 { margin: 0 0 .3em; font-size: 1.28rem; }
.prose .docs__card p { margin: 0 0 .8em; font-size: .92rem; color: var(--glass-2); }
.docs__card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.prose .docs__card li { margin: 0; font-size: .95rem; }
.search { position: relative; margin: 0 0 22px; }
.search__input { width: 100%; min-height: 40px; padding: 0 36px 0 12px; border: 1px solid rgba(232, 238, 242, .3); border-radius: 8px; background: #0b111d; color: var(--glass); font: 400 .95rem Archivo, sans-serif; -webkit-appearance: none; appearance: none; }
.search__input::placeholder { color: rgba(232, 238, 242, .6); }
.search__input::-webkit-search-cancel-button { display: none; }
.search__key { position: absolute; right: 9px; top: 9px; padding: 1px 6px; border: 1px solid var(--line); border-radius: 4px; font: 500 .7rem Azeret, monospace; color: var(--glass-2); }
.search__results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 6; list-style: none; margin: 0; padding: 6px; max-height: 60vh; overflow: auto; border: 1px solid rgba(232, 238, 242, .24); border-radius: 10px; background: #0b111d; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); }
.search__results a { display: grid; gap: 2px; padding: 8px 10px; border-radius: 6px; color: var(--glass); text-decoration: none; }
.search__results [aria-selected="true"] a, .search__results a:hover { background: rgba(232, 238, 242, .09); }
.search__t { font-size: .95rem; }
.search__g { font: 500 .7rem Azeret, monospace; color: var(--glass-2); }
.search__none { padding: 10px; font-size: .9rem; color: var(--glass-2); }
@media (max-width: 1180px) { .docs { grid-template-columns: 14rem minmax(0, 1fr); } .docs__toc { display: none; } }
@media (max-width: 860px) {
  .docs { grid-template-columns: 1fr; gap: 26px; padding: 0 20px 90px; }
  .docs__col { position: static; max-height: none; overflow: visible; padding: 0; }
  .docs__side { border: 1px solid var(--line); border-radius: 10px; }
  .docs__side > summary { display: flex; justify-content: space-between; align-items: center; min-height: 46px; padding: 0 14px; cursor: pointer; list-style: none; font-weight: 500; color: var(--glass); }
  .docs__side > summary::-webkit-details-marker { display: none; }
  .docs__side > summary::after { content: '+'; font: 300 1.4rem/1 Archivo, sans-serif; color: var(--glass-2); }
  .docs__side[open] > summary::after { content: '\2212'; }
  .docs__side .docs__nav { padding: 6px 14px 4px; }
  .docs__groups { grid-template-columns: 1fr; }
  .docs__pager { grid-template-columns: 1fr; }
}

/* an endpoint heading: the method as a tag, the path as code */
.method { display: inline-block; min-width: 3.6em; margin-right: 10px; padding: 1px 7px; border: 1px solid rgba(232, 238, 242, .32); border-radius: 4px; font: 500 .72rem/1.6 Azeret, monospace; text-align: center; vertical-align: 3px; color: var(--glass-2); }
.method--post { color: var(--changed); border-color: rgba(233, 180, 95, .5); }
.method--get { color: var(--added); border-color: rgba(92, 225, 230, .45); }
.prose h3 .path { font: 500 1.02rem Azeret, monospace; background: none; padding: 0; }

/* ---- status and trust ------------------------------------------------------------------------ */
.status { list-style: none; margin: 0 0 1.2em; padding: 0; border-top: 1px solid var(--line); }
.status__row { display: grid; grid-template-columns: 14px minmax(9rem, 1fr) minmax(0, 2fr) auto; align-items: baseline; gap: 4px 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.status__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(232, 238, 242, .35); align-self: center; }
.status__row[data-state="ok"] .status__dot { background: var(--added); box-shadow: 0 0 10px rgba(92, 225, 230, .6); }
.status__row[data-state="down"] .status__dot { background: var(--removed); box-shadow: 0 0 10px rgba(255, 107, 87, .6); }
.status__name { font-weight: 500; color: var(--glass); }
.status__what { font-size: .92rem; color: var(--glass-2); }
.status__state { font: 500 .8rem Azeret, monospace; color: var(--glass-2); }
.status__row[data-state="ok"] .status__state { color: var(--added); }
.status__row[data-state="down"] .status__state { color: #ffc7bd; }
.status__overall { margin: 0 0 .3em !important; font-weight: 360; font-stretch: 110%; font-size: 1.5rem !important; line-height: 1.2; color: var(--glass) !important; }
.status__overall[data-state="down"] { color: #ffc7bd !important; }
.signals { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); gap: 10px 26px; margin: 1.6em 0 0; }
.signals div { padding-left: 12px; border-left: 1px solid rgba(232, 238, 242, .3); }
.signals dt { font: 500 .72rem Azeret, monospace; color: rgba(232, 238, 242, .66); }
.signals dd { margin: 2px 0 0; color: var(--glass); font-size: .95rem; }
.mailto { margin: 1.2em 0 !important; }
.list { margin: 0 0 1.2em; padding-left: 1.2em; display: grid; gap: 8px; color: var(--glass-2); max-width: 44rem; }
.pairs__links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; }
.pairs__links a { font-size: .9rem; color: var(--glass); text-decoration: underline; text-decoration-color: rgba(92, 225, 230, .6); text-underline-offset: 3px; }
@media (max-width: 760px) {
  .status__row { grid-template-columns: 14px 1fr auto; }
  .status__what { grid-column: 2 / -1; }
  .signals { grid-template-columns: 1fr 1fr; }
}
.topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.topic { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--bar) + 30px); transition: box-shadow .3s; }
.topic[data-current] { box-shadow: inset 0 2px 0 var(--added); background: linear-gradient(rgba(92, 225, 230, .07), rgba(92, 225, 230, 0) 60%), var(--bg); }
.topic h3 { margin: 0; font: 500 1.08rem/1.3 Archivo, sans-serif; color: var(--glass); }
.topic p { margin: 0; font-size: .94rem; color: var(--glass-2); }
.topic .topic__inc { margin-top: 4px; font: 500 .72rem Azeret, monospace; color: rgba(232, 238, 242, .62); }
.topic ul { margin: 0 0 6px; padding-left: 1.1em; display: grid; gap: 4px; font-size: .92rem; color: var(--glass); }
.topic .btn { margin-top: auto; align-self: flex-start; }

/* ---- policies: the outline and the text ------------------------------------------------------ */
.read { position: relative; z-index: 2; display: grid; grid-template-columns: 15rem minmax(0, 46rem); gap: clamp(28px, 5vw, 80px); align-items: start; padding: 8px var(--gut) 110px; }
.read__toc { position: sticky; top: calc(var(--bar) + 22px); }
.read__toc p { margin: 0 0 10px; font: 500 .74rem Azeret, monospace; color: rgba(232, 238, 242, .6); }
.read__toc ol { margin: 0; padding-left: 1.4em; display: grid; gap: 7px; color: rgba(232, 238, 242, .5); font: 500 .74rem Azeret, monospace; }
.read__toc li { line-height: 1.3; }
.read__toc a { font: 400 .9rem Archivo, sans-serif; color: var(--glass-2); text-decoration: none; }
.read__toc a:hover { color: var(--glass); }
.read__body h2:first-of-type { margin-top: 1.2em; }
.read__more { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; margin-top: 3em; padding-top: 22px; border-top: 1px solid var(--line); }
.read__more p { margin: 0; font: 500 .74rem Azeret, monospace; color: rgba(232, 238, 242, .6); }
@media (max-width: 860px) {
  .read { grid-template-columns: 1fr; padding: 0 20px 80px; }
  .read__toc { position: static; padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px; }
}
.code pre:focus-visible { outline: 2px solid var(--added); outline-offset: -2px; }
.table-wrap:focus-visible { outline: 2px solid var(--added); outline-offset: 2px; }

/* ---- devtools: fields on the left, the request on the right ---------------------------------- */
.builder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 0; border: 1px solid var(--line); border-radius: 12px; background: rgba(5, 8, 15, .5); }
.builder__in { display: grid; align-content: start; gap: 20px; padding: 24px; border-right: 1px solid var(--line); }
.builder__out { padding: 8px 18px; min-width: 0; }
.builder__out .code { border: 0; background: transparent; }
.field--form { grid-template-columns: 1fr auto; }
.field--form .text, .field--form .select { grid-row: 2; grid-column: 1 / -1; }
.field--form .field__help { grid-row: 3; }
.field--form input[type="range"] { grid-row: 2; grid-column: 1; }
.field--form input[type="range"] + .field__out { grid-row: 2; grid-column: 2; }
.text { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid rgba(232, 238, 242, .32); border-radius: 8px; background: #0b111d; color: var(--glass); font: 400 .92rem Azeret, monospace; }
.text--area { min-height: 120px; resize: vertical; line-height: 1.55; }
.text--num { max-width: 8rem; }
.text:focus-visible, .select select:focus-visible { outline: 2px solid var(--added); outline-offset: 1px; }
.select select { width: 100%; }
#c-error { color: #ffc7bd; }
@media (max-width: 860px) { .builder { grid-template-columns: 1fr; } .builder__in { border-right: 0; border-bottom: 1px solid var(--line); } }

/* the maker and the programs: ReARC's mark, then the four startup programs in white */
.foot__makers { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px 48px; padding: 4px 0 2px; }
.foot__label { display: block; margin: 0 0 12px; font: 500 .72rem Azeret, monospace; color: rgba(232, 238, 242, .6); }
.foot__maker { display: block; text-decoration: none; }
.foot__maker img { display: block; width: 184px; height: auto; opacity: .92; transition: opacity .2s; }
.foot__maker:hover img, .foot__maker:focus-visible img { opacity: 1; }
.foot__programs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; }
.foot__programs li { display: flex; align-items: center; }
.foot__programs img { display: block; width: var(--w); height: auto; opacity: .78; transition: opacity .2s; }
.foot__programs a { display: block; }
.foot__programs a:hover img, .foot__programs a:focus-visible img { opacity: 1; }
@media (max-width: 760px) {
  .foot__makers { flex-direction: column; align-items: flex-start; gap: 26px; }
  .foot__programs ul { gap: 18px 26px; }
  .foot__programs img { width: calc(var(--w) * .86); }
}

/* shooting stars: above the sky, behind the ridge */
#meteors { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.plate__meteors { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -3; pointer-events: none; }

/* the cookie bar and its way back from the footer (as the app's components/CookieConsent.tsx) */
.cookie-bar { position: fixed; z-index: 30; left: 16px; right: 16px; bottom: 16px; max-width: 46rem; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; padding: 14px 16px; border: 1px solid rgba(232, 238, 242, .26); border-radius: 12px; background: rgba(6, 10, 18, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.cookie-bar[hidden] { display: none; }
.cookie-bar p { flex: 1 1 22rem; margin: 0; font-size: .9rem; color: var(--glass-2); }
.cookie-bar a { color: var(--glass); }
.cookie-bar__actions { display: flex; gap: 8px; }
.foot__cookie { padding: 0; border: 0; background: none; color: var(--glass-2); font: inherit; font-size: .92rem; cursor: pointer; }
.foot__cookie:hover { color: var(--glass); text-decoration: underline; text-underline-offset: 4px; }
/* "Cookie settings" in the sign-in pages' footer and in the app's sidebar */
.auth-foot .foot__cookie { font-size: inherit; }
.side__links { display: flex; flex-wrap: wrap; gap: 2px 12px; }