/* norboten.org — dark ground, white text, green where the machine speaks.
   One stylesheet, no framework, no build step. */

:root {
    --bg: #0a0e0c;
    --bg-raised: #101613;
    --bg-sunken: #070a09;
    --line: #1e2b24;
    --line-strong: #2c463a;
    --text: #e8ece9;
    --muted: #93a09a;
    --green: #4ade80;
    --green-dim: #2f9e5b;
    --red: #f87171;
    --amber: #fbbf24;
    --blue: #7cb7ff;
    --violet: #d49cff;
    --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
        Arial, sans-serif;
    --wide: 1180px;
    --text-width: 760px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* The header is sticky, so anything jumped to has to stop below it — otherwise the heading
   the reader clicked is the one thing the header hides. */
[id] { scroll-margin-top: 78px; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3, h4 {
    color: var(--green);
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
h1, h2 { font-family: var(--mono); }
h1 { font-size: clamp(2.1rem, 5vw, 3.1rem); margin: 0 0 0.6rem; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 3rem 0 1rem; }
h3 { font-size: 1.2rem; margin: 2rem 0 0.6rem; }
p { margin: 0 0 1rem; }
strong { color: #fff; font-weight: 620; }

code, kbd, samp, pre { font-family: var(--mono); font-size: 0.92em; }
code { color: #cfe9da; background: var(--bg-raised); padding: 0.12em 0.36em; border-radius: 4px; }
pre {
    background: var(--bg-sunken);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    overflow-x: auto;
    line-height: 1.55;
}
pre code { background: none; padding: 0; color: #d7e5dd; }

hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 1.25rem; }
.prose { max-width: var(--text-width); }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
.center { text-align: center; }

/* ---------- header ---------- */

header.site {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(10, 14, 12, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
header.site .wrap { display: flex; align-items: center; gap: 1.5rem; height: 60px; }
.brand {
    display: inline-flex;
    align-items: center;
    font-family: var(--mono);
    font-weight: 700;
    color: var(--green);
    letter-spacing: -0.02em;
    font-size: 1.05rem;
    line-height: 1;
}
/* One row, one baseline: every item is a box of the same height, so the wordmark, the links and
   the Donate button line up however the row wraps. */
nav.site { display: flex; align-items: center; gap: 1.1rem; margin-inline: auto; flex-wrap: wrap; }
nav.site a {
    display: inline-flex;
    align-items: center;
    height: 32px;
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1;
}
nav.site a:hover, nav.site a[aria-current="page"] { color: var(--green); text-decoration: none; }
/* Section links, then Install/Sign in, then Donate and GitHub: a gap and a hairline per group. */
nav.site a.group { margin-left: 0.5rem; padding-left: 1.1rem; border-left: 1px solid var(--line); }
nav.site a.gh, nav.site a.donate {
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    padding: 0.25rem 0.7rem;
}
nav.site a.donate { margin-left: 0.6rem; }
nav.site a.gh { color: var(--muted); padding: 0.25rem 0.55rem; }
nav.site a.gh + a.gh { margin-left: -0.5rem; }
nav.site a.gh:hover { color: var(--green); }
nav.site a.gh svg { display: block; }
/* GitHub's Sponsor button, in this site's colours: a faint green fill, a heart that is the accent */
nav.site a.donate {
    background: rgba(74, 222, 128, 0.08);
    border-color: var(--green-dim);
    font-weight: 600;
}
nav.site a.donate .heart { color: var(--green); margin-right: 0.2rem; }
nav.site a.donate:hover, nav.site a.donate[aria-current="page"] {
    background: rgba(74, 222, 128, 0.16);
    color: var(--text);
}
footer.site a.sponsor { color: var(--green); font-weight: 700; }

/* ---------- the author pipeline: one accent and one product per step ---------- */

.pipeline {
    list-style: none;
    margin: 0;
    padding: 1.2rem 1.3rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg-raised);
}
.pipe-step {
    position: relative;
    display: grid;
    grid-template-columns: 1.85rem minmax(0, 1fr);
    gap: 0.8rem;
    padding-bottom: 1rem;
}
.pipe-step:last-child { padding-bottom: 0.3rem; }
/* the thread between the numbers, so the five read as one run */
.pipe-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 0.9rem;
    top: 2rem;
    bottom: 0.15rem;
    border-left: 1px dashed var(--line-strong);
}
.pipe-step .num {
    display: grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    border: 1px solid var(--step);
    color: var(--step);
    background: var(--bg);
    font-family: var(--mono);
    font-size: 0.85rem;
    font-weight: 600;
}
.pipe-step strong { color: var(--step); font-weight: 600; }
.pipe-step .what { display: block; color: var(--muted); font-size: 0.88rem; line-height: 1.5; }
.pipeline + pre { margin-top: 1rem; }
pre.small, pre.small code { font-size: 0.8rem; }

/* ---------- hero ---------- */

.hero { padding: 4.5rem 0 3rem; border-bottom: 1px solid var(--line); }
.hero .lede { font-size: 1.2rem; color: var(--muted); max-width: 52ch; }
/* One rule for the space between adjacent buttons, wherever they sit: a row is a `.cta`, and
   two buttons loose in a paragraph get the same gap. */
.cta { display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: center; }
.hero .cta { margin-top: 1.8rem; }
:not(.cta) > .btn + .btn { margin-left: 0.9rem; }

/* <button class="btn"> takes the browser's own buttonface and font unless both are said here; a
   plain .btn on a button was white on Chrome and Safari. .btn.solid below sets its own. */
.btn {
    display: inline-block;
    font: inherit;
    font-weight: 600;
    background: transparent;
    border: 1px solid var(--green-dim);
    color: var(--green);
    border-radius: 8px;
    padding: 0.55rem 1.1rem;
    cursor: pointer;
}
.btn:hover { background: rgba(74, 222, 128, 0.08); text-decoration: none; }
.btn.solid { background: var(--green); color: #07120c; border-color: var(--green); }
.btn.solid:hover { background: #6ee7a0; }

.install {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg-sunken);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
    font-family: var(--mono);
    margin-top: 1.6rem;
    max-width: 560px;
    font-size: 0.86rem;
    white-space: nowrap;
}
.install .prompt { color: var(--green-dim); }
.install > span:not(.prompt) { overflow-x: auto; min-width: 0; }
.install-hero { text-align: center; padding-block: 4.5rem 3.5rem; }
.install-hero .lede { margin-inline: auto; }
.about-me { margin-top: 1.6rem; max-width: var(--text-width); }
.install-note .install-read { display: block; margin-top: 1.6em; }
.install.install-big { max-width: 640px; margin: 2rem auto 0; font-size: 1.1rem; padding: 1rem 1.2rem; text-align: left; }
.install-note { max-width: 620px; margin: 1.2rem auto 0; font-size: 0.92rem; }
ol.steps { margin: 1.2rem 0; padding-left: 1.4rem; max-width: 760px; }
ol.steps li { margin: 0.55rem 0; padding-left: 0.3rem; }
ol.steps li::marker { color: var(--green); font-family: var(--mono); }
kbd {
    background: var(--bg-raised); border: 1px solid var(--line-strong); border-bottom-width: 2px;
    border-radius: 4px; padding: 0.05em 0.4em; color: var(--text);
}
.install button {
    margin-left: auto;
    background: none;
    border: 1px solid var(--line-strong);
    color: var(--muted);
    border-radius: 6px;
    padding: 0.2rem 0.55rem;
    font-family: var(--mono);
    font-size: 0.8rem;
    cursor: pointer;
}
.install button:hover { color: var(--green); border-color: var(--green-dim); }

/* ---------- terminal ---------- */

.terminal {
    background: var(--bg-sunken);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.terminal .bar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--line);
    background: var(--bg-raised);
}
.terminal .dot { width: 10px; height: 10px; border-radius: 50%; background: #26332c; }
.terminal .title { margin-left: 0.6rem; color: var(--muted); font-family: var(--mono); font-size: 0.82rem; }
.terminal pre { border: 0; border-radius: 0; margin: 0; background: none; padding: 1.1rem; }
.t-green { color: var(--green); }
.t-red { color: var(--red); }
.t-amber { color: var(--amber); }
.t-dim { color: var(--muted); }

/* ---------- grids and cards ---------- */

.grid { display: grid; gap: 1.1rem; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.card {
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.2rem 1.3rem;
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
a.card { color: var(--text); display: block; }
a.card:hover { border-color: var(--line-strong); text-decoration: none; }
a.card:hover h3 { color: #6ee7a0; }

.tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    margin-right: 0.35rem;
}
.tag.track { color: var(--green); border-color: var(--green-dim); }
/* the one mark that says a lab is graded by the server */
.tag.rated { color: var(--amber); border-color: #5a4614; }
.dots { font-family: var(--mono); color: var(--green); letter-spacing: 1px; }
.dots .off { color: #263229; }
/* difficulty, drawn as the same machines the track strip uses */
.diff { display: inline-block; line-height: 0; }
.diff svg.difficulty { height: 20px; width: auto; vertical-align: -4px; }

/* ---------- a lab card ---------- */

.lab-card .tags { margin-bottom: 0.9rem; }
.lab-card h3 { margin: 0 0 0.4rem; }
.lab-card .meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 1rem 0 0;
    font-size: 0.85rem;
}

/* ---------- two pills that switch between halves of a page ---------- */

.switcher { display: inline-flex; gap: 0.3rem; margin-top: 2rem; padding: 0.25rem;
    border: 1px solid var(--line); border-radius: 999px; background: var(--bg-raised); }
.switcher .pill {
    border-radius: 999px;
    padding: 0.35rem 1.1rem;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 500;
}
.switcher .pill:hover { color: var(--text); text-decoration: none; }
.switcher .pill[aria-current="true"] { background: rgba(74, 222, 128, 0.12); color: var(--green); }

.section { padding: 3.5rem 0; border-bottom: 1px solid var(--line); }
.section.no-line { border-bottom: 0; }
.kicker {
    font-family: var(--mono);
    font-weight: 500;
    color: var(--green-dim);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.78rem;
    margin-bottom: 0.5rem;
}

table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--line); }
th { color: var(--green); font-weight: 600; }

blockquote {
    margin: 1.2rem 0;
    padding: 0.6rem 1.1rem;
    border-left: 2px solid var(--green-dim);
    color: var(--muted);
}

/* ---------- starting a lab: the keys, in order ---------- */

ol.keysteps { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
ol.keysteps li { display: flex; align-items: center; gap: 0.7rem; color: var(--muted); font-size: 0.95rem; }
ol.keysteps kbd, ol.keysteps .pick {
    flex: none;
    display: grid;
    place-items: center;
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 0.5rem;
    border-radius: 7px;
    font-size: 0.9rem;
}
ol.keysteps .pick { border: 1px dashed var(--line-strong); color: var(--green); background: var(--bg-raised); }

/* ---------- a theory question, answered in place ---------- */

.quiz-grid { display: grid; gap: 1.4rem; margin-top: 1.6rem;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.quiz-grid.one { max-width: var(--text-width); }
.quiz {
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.2rem 1.3rem;
}
.quiz .prompt { font-weight: 600; margin: 0.3rem 0 0.9rem; }
.quiz pre { margin: 0 0 1rem; }
.quiz .choices { display: grid; gap: 0.5rem; }
.quiz .choice {
    display: flex;
    gap: 0.7rem;
    align-items: baseline;
    width: 100%;
    text-align: left;
    background: var(--bg-sunken);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 0.55rem 0.8rem;
    color: var(--text);
    font: inherit;
    font-size: 0.94rem;
    cursor: pointer;
}
.quiz .choice:hover:not(:disabled) { border-color: var(--green-dim); }
.quiz .choice .mark { color: var(--muted); font-size: 0.85rem; }
.quiz .choice:disabled { cursor: default; opacity: 1; }
.quiz .choice.right { border-color: var(--green-dim); background: rgba(74, 222, 128, 0.09); }
.quiz .choice.right .mark { color: var(--green); }
.quiz .choice.wrong { color: var(--muted); }
/* the one that was pressed, right or wrong, keeps a mark of its own */
.quiz .choice.picked { box-shadow: inset 2px 0 0 var(--green); }
.quiz .choice.picked.wrong { box-shadow: inset 2px 0 0 var(--red); }
.quiz .verdict { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 0.9rem; }
.quiz .verdict .answer { margin-bottom: 0.4rem; color: var(--green); }
.quiz .verdict p { font-size: 0.92rem; }
.quiz .verdict .refs { font-size: 0.8rem; margin-bottom: 0; }

/* ---------- docs ---------- */

/* The docs read wider than the rest of the site: the tree and the page index take the same room
   whatever the window is, so a 760px column left the prose cramped between them. */
.wrap.docs-wrap { max-width: 1520px; }
.docs { display: grid; grid-template-columns: 250px minmax(0, 1fr) 190px; gap: 2.2rem; padding: 2.2rem 0; }
.docs-wrap .docs article.prose { max-width: none; }
.docs nav.tree { position: sticky; top: 76px; align-self: start; max-height: calc(100vh - 96px); overflow-y: auto; }
.docs nav.tree .group { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--green-dim); margin: 1.2rem 0 0.4rem; }
.docs nav.tree a { display: block; color: var(--muted); padding: 0.2rem 0; font-size: 0.94rem; }
.docs nav.tree a:hover { color: var(--text); text-decoration: none; }
.docs nav.tree a[aria-current="page"] { color: var(--green); }
.docs .toc { position: sticky; top: 76px; align-self: start; font-size: 0.88rem; }
.docs .toc a { display: block; color: var(--muted); padding: 0.15rem 0; }
.docs .toc .h3 { padding-left: 0.8rem; }
.docs article { min-width: 0; }
.docs article h2 { margin-top: 2.4rem; }

#docsearch {
    width: 100%;
    background: var(--bg-sunken);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 8px;
    padding: 0.45rem 0.7rem;
    font-family: var(--mono);
    font-size: 0.88rem;
}
#docsearch:focus { outline: none; border-color: var(--green-dim); }
#searchresults { margin-top: 0.6rem; }
#searchresults a { display: block; padding: 0.3rem 0; color: var(--text); font-size: 0.9rem; }
#searchresults .ctx { color: var(--muted); font-size: 0.82rem; }

/* ---------- footer ---------- */

footer.site { padding: 2.5rem 0 3.5rem; color: var(--muted); font-size: 0.9rem; }
footer.site .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.5rem; }
footer.site a { color: var(--muted); }
footer.site a:hover { color: var(--green); }
/* the words that name the two kinds of lab, wherever the pair is named */
strong.accent { color: var(--green); font-weight: 700; }
a.accent { color: var(--green); font-weight: 700; }
footer.site .copyright { display: block; margin-top: 0.9rem; }
footer.site .counts { display: block; margin-top: 0.9rem; }
nav.site a.live { font-weight: 700; display: inline-flex; align-items: center; }
nav.site a.live .pulse { width: 7px; height: 7px; margin-right: 0.4rem; }

/* ---------- diagrams ---------- */

figure.diagram { margin: 2rem 0; }
figure.diagram { overflow-x: auto; }
figure.diagram svg { width: 100%; min-width: 760px; height: auto; display: block; }
.toc-strip { display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; margin-top: 1.6rem; }
.toc-strip a {
    font-family: var(--mono); font-size: 0.82rem; color: var(--muted);
    border: 1px solid var(--line); border-radius: 999px; padding: 0.2rem 0.7rem;
}
.toc-strip a:hover { color: var(--green); border-color: var(--line-strong); }
h3.stack-layer { margin-top: 2rem; font-family: var(--mono); font-size: 1rem; color: var(--green); }
table.stack-table { font-size: 0.9rem; min-width: 820px; table-layout: fixed; }
table.stack-table td { vertical-align: top; }
table.stack-table td:nth-child(2), table.stack-table td:nth-child(5) { font-size: 0.82rem; overflow-wrap: anywhere; }
figure.diagram figcaption { color: var(--muted); font-size: 0.9rem; margin-top: 0.6rem; }
.svg-box { fill: #101613; stroke: #2c463a; }
.svg-box-accent { fill: #10201a; stroke: #4ade80; }
.svg-label { fill: #e8ece9; font-family: var(--sans); font-size: 13px; }
.svg-label-sm { fill: #93a09a; font-family: var(--mono); font-size: 11px; }
.svg-title { fill: #4ade80; font-family: var(--sans); font-size: 13px; font-weight: 600; }
.svg-line { stroke: #2c463a; fill: none; }
.svg-line-accent { stroke: #4ade80; fill: none; }

@media (max-width: 900px) {
    .docs { grid-template-columns: 1fr; }
    .docs nav.tree, .docs .toc { position: static; max-height: none; }
    .docs .toc { display: none; }
    header.site .wrap { height: auto; padding-block: 0.7rem; flex-wrap: wrap; }
}

/* the wall's own bar: no transport, a clock, a count, and a way to open it big */
.termbar.wallbar { justify-content: space-between; }
.termbar button.expand {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 0.72rem;
    padding: 0.15rem 0.5rem;
    cursor: pointer;
}
.termbar button.expand { margin-left: 0.9rem; }
.termbar button.expand.logs { margin-left: 1.2rem; }
.termbar button.expand:hover { color: var(--green); border-color: var(--green-dim); }
/* a recording before its first play: what is coming, dimmed, so the pause reads as a pause */
.term.is-preview .termscreen { opacity: 0.4; }
.cmdtable, table.cmdtable td, table.cmdtable th { font-size: 12px; }
.pulse[hidden] { display: none; }

/* ---------- ratings, profiles ---------- */

.note {
    border: 1px solid var(--line-strong);
    border-left: 3px solid var(--green-dim);
    border-radius: 0 8px 8px 0;
    background: var(--bg-sunken);
    color: var(--muted);
    padding: 0.8rem 1rem;
    margin: 1.5rem 0 0;
    max-width: var(--text-width);
    font-size: 0.92rem;
}
.note strong { color: var(--text); }
/* the pre-1.0 warning: amber, so it does not read as one more green aside */
.note-alpha { border-left-color: var(--amber); }

.board-lead {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.4rem;
}
.board-lead p { margin: 0; }
.btn.analytics-link { display: inline-flex; align-items: center; gap: 0.5rem; }

.boardfilter {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 1rem 1.6rem;
    margin-bottom: 1.4rem;
    padding: 1rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg-raised);
}
.boardfilter .field { display: grid; gap: 0.3rem; font-size: 0.85rem; color: var(--muted); }
.boardfilter .field b { color: var(--green); font-family: var(--mono); font-weight: 600; }
.boardfilter .field.range { min-width: 200px; }
.boardfilter input[type="search"], .boardfilter select {
    background: var(--bg-sunken);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
    padding: 0.35rem 0.6rem;
}
.boardfilter input[type="range"] { accent-color: var(--green); }
.boardfilter #filter-count { margin: 0 0 0.3rem auto; }
table.board tr[hidden] { display: none; }

table.board { font-size: 0.92rem; }
table.board td { vertical-align: middle; }
table.board .num, th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.board a { color: var(--text); font-weight: 500; }
table.board a:hover { color: var(--green); }
table.board tr:hover td { background: #0d1310; }

.avatar { width: 40px; }
.avatar svg { display: block; border-radius: 8px; }
.avatar.big { width: 96px; }

.pass { color: var(--green); }
.fail { color: #f0836c; }

.profile-head { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.profile-head h1 { margin: 0.2rem 0; }

svg.radar { width: 100%; max-width: 460px; height: auto; display: block; }
.heatwrap { overflow-x: auto; padding-bottom: 0.5rem; }
svg.heatmap { min-width: 720px; height: auto; display: block; }

.card.plain { background: none; }

/* a day of the heatmap, and the radar's readout */

#heatmap { position: relative; }  /* the day tip is placed against this box */
.heatyear + .heatyear { margin-top: 1rem; }
.heatyear p { margin: 0 0 0.4rem; }
.switcher.years { margin: 0.8rem 0 1rem; }
.switcher.years .pill { background: none; border: 0; font-family: var(--mono); cursor: pointer; }
.switcher.years .pill[aria-current="true"] { background: rgba(74, 222, 128, 0.12); color: var(--green); }
svg.heatmap rect[data-day]:not([data-count="0"]) { cursor: pointer; }
.radar-wrap .spoke { cursor: default; }
.radar-wrap .spoke.on text { fill: var(--green); }
.radar-wrap .spoke:focus { outline: none; }
.radar-wrap .spoke:focus text { fill: var(--green); }
.radar-read { min-height: 1.4em; margin-top: 0.4rem; }
ul.daylist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.dayitem {
    display: flex;
    gap: 0.7rem;
    align-items: baseline;
    width: 100%;
    text-align: left;
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 0.6rem 0.9rem;
    color: var(--text);
    font: inherit;
    cursor: pointer;
}
.dayitem:hover { border-color: var(--green-dim); }
.dayitem .t { flex: 1; }

/* ---------- play: terminals, live and recorded ---------- */

figure.play { margin: 2.2rem 0 2.8rem; }
figure.play figcaption {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
}
figure.play figcaption strong { color: var(--text); font-size: 1.05rem; }
figure.play .blurb { margin: 0 0 0.7rem; font-size: 0.92rem; }
.small { font-size: 0.82rem; }

.term {
    --term-bg: #070a09;
    --term-fg: #e8ece9;
    --term-line: var(--line);
    --term-accent: var(--green);
    position: relative;
    background: var(--term-bg);
    border: 1px solid var(--term-line);
    border-radius: 10px;
    overflow: hidden;
}
.term[data-theme="amber"] { --term-bg: #140e04; --term-fg: #fff1d6; --term-line: #3d2e14; --term-accent: #ffc861; }
.term[data-theme="ice"] { --term-bg: #07101a; --term-fg: #eef5fc; --term-line: #1b2c40; --term-accent: #7cb7ff; }
.term[data-theme="violet"] { --term-bg: #0e0a16; --term-fg: #f4eefc; --term-line: #2c2240; --term-accent: #d49cff; }
.term .termbody { padding: 0.8rem 1rem 0.7rem; overflow-x: auto; }
.term:not(.has-player) { padding: 0.9rem 1rem 0.7rem; overflow-x: auto; }
.term .termlabel {
    position: absolute;
    top: 0.5rem;
    right: 0.8rem;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}
pre.termscreen {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    font-family: var(--mono);
    font-size: 0.78rem;
    line-height: 1.35;
    white-space: pre;
    color: var(--term-fg, var(--text));
    overflow: visible;
}

/* a terminal window with nothing to play: the frame and the lines, as on /live/ */
figure.plain-term { margin: 2rem 0 0; }
figure.plain-term figcaption { margin-top: 0.7rem; font-size: 0.88rem; color: var(--muted); }
.termbar .termtitle { color: var(--muted); font-family: var(--mono); font-size: 0.75rem; }
pre.termscreen.wrap { white-space: pre-wrap; }
pre.termscreen .prompt { color: var(--term-accent); }
.termbar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--term-line);
    background: color-mix(in srgb, var(--term-bg) 80%, #ffffff 4%);
}
.termbar button {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--term-fg);
    background: color-mix(in srgb, var(--term-accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--term-accent) 35%, transparent);
    border-radius: 6px;
    padding: 0.2rem 0.6rem;
    cursor: pointer;
}
.termbar button:hover { border-color: var(--term-accent); color: var(--term-accent); }
/* the heading's live dot: large enough to read as a signal, right against the words */
#live h2 .pulse { width: 14px; height: 14px; margin-right: 0.2rem; position: relative; top: -2px; }
.termstatus { margin-left: auto; color: var(--muted); font-family: var(--mono); font-size: 0.75rem; }

.pulse {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--green);
    margin-right: 0.45rem;
    vertical-align: middle;
    animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.45); }
    50% { opacity: 0.55; box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
}
.tag.live { color: var(--green); border-color: var(--green-dim); }

/* the wall: four terminals, two by two */
.wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin-top: 1.2rem; }
.wallterm { margin: 0; min-width: 0; }
.wallterm figcaption { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.4rem; font-size: 0.9rem; }
.wallterm figcaption strong { color: var(--text); }
.wallterm .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--green); }
.wallterm .dot.amber { background: #ffc861; }
.wallterm .dot.ice { background: #7cb7ff; }
.wallterm .dot.violet { background: #d49cff; }
.wallterm pre.termscreen { font-size: clamp(0.42rem, 0.62vw, 0.62rem); line-height: 1.3; }
.wallterm .termbar button { font-size: 0.7rem; padding: 0.1rem 0.45rem; }
@media (max-width: 900px) { .wall { grid-template-columns: 1fr; } .wallterm pre.termscreen { font-size: 0.5rem; } }

.modal-body .tablewrap { max-height: calc(100vh - 14rem); overflow: auto; }
.tablewrap { overflow-x: auto; }
table.cmdtable td, table.cmdtable th { padding-top: 0.28rem; padding-bottom: 0.28rem; line-height: 1.35; }
table.cmdtable td.cmd { color: var(--text); white-space: pre-wrap; word-break: break-word; }
table.cmdtable tr[data-command] { cursor: pointer; }
table.cmdtable tr.current td { background: #12211a; }
table.cmdtable tr.current td.cmd { color: var(--green); }
table.cmdtable .quiet { color: #56635c; }
.tag.changed { color: var(--amber); border-color: #5a4614; }

/* ---------- journals ---------- */

.prose.journal h2 {
    margin-top: 2.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--line);
}
.prose.journal h3 { margin-top: 1.8rem; color: var(--green); }
.prose.journal blockquote {
    margin: 0.8rem 0 1.6rem;
    padding: 0.6rem 0 0.6rem 1rem;
    border-left: 2px solid var(--green-dim);
    color: var(--muted);
}
.prose.journal blockquote p { margin: 0; }
.prose.journal ol > li { margin-bottom: 1rem; }
.prose.journal pre { font-size: 0.82rem; }

/* ---------- TUI captures ---------- */

.capture-grid { margin-top: 1.6rem; gap: 2rem; }
figure.capture { margin: 0; }
figure.capture img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg-sunken);
}
figure.capture figcaption {
    margin-top: 0.6rem;
    font-size: 0.9rem;
    color: var(--text);
}


/* ---------- the relation graph ---------- */

.relations-wrap { position: relative; }
svg.relations { width: 100%; height: auto; display: block; }
svg.relations .edge { stroke: #1c2620; stroke-width: 0.8; }
svg.relations .edge.text { stroke: #2f9e5b; stroke-opacity: 0.55; }
svg.relations .node { cursor: pointer; outline: none; }
/* while one node is being read, everything that is not part of it steps back */
svg.relations.focused .edge { stroke-opacity: 0.12; }
svg.relations.focused .node circle:first-of-type { opacity: 0.35; }
svg.relations.focused .node text { opacity: 0.25; }
svg.relations .edge.on { stroke: #4ade80; stroke-opacity: 0.95; stroke-width: 1.4; }
svg.relations .node.on circle:first-of-type,
svg.relations .node.near circle:first-of-type { opacity: 1; }
svg.relations .node.on text, svg.relations .node.near text { opacity: 1; fill: #e8ece9; }
svg.relations .node.on circle:first-of-type { stroke: #e8ece9; stroke-width: 1.5; }
.relations-read { min-height: 1.4em; margin: 0.6rem 0 0.2rem; }
.relations-key .key-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 0.3rem;
    vertical-align: -1px;
}
.relations-key .key-dot[data-kind="topic"] { background: var(--amber); }
.relations-key .key-dot[data-kind="lab"] { background: var(--green); }
.relations-key .key-dot[data-kind="questions"] { background: #7dd3fc; }
.relations-key .key-dot[data-kind="journal"] { background: #c4b5fd; }

/* ---------- an index at the top of a long page ---------- */

/* read top to bottom, five to a column, with a dashed arrow down each column */
.page-index {
    display: grid;
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0.2rem 1.4rem;
    margin-top: 2rem;
    border-top: 1px solid var(--line);
    padding-top: 1rem;
}
.page-index a { position: relative; }
.page-index a::after, .page-index a::before {
    content: "";
    position: absolute;
    pointer-events: none;
}
.page-index a::after {
    left: 0.62rem;
    top: 2.1rem;
    bottom: 0.1rem;
    border-left: 1px dashed var(--muted);
    opacity: 0.55;
}
.page-index a::before {
    left: calc(0.62rem - 2.5px);
    bottom: -0.05rem;
    border: 3px solid transparent;
    border-top: 4px solid var(--muted);
    border-bottom: 0;
    opacity: 0.55;
}
.page-index a:nth-child(5n)::after, .page-index a:nth-child(5n)::before,
.page-index a:last-child::after, .page-index a:last-child::before { display: none; }
@media (max-width: 700px) {
    .page-index { grid-template-rows: none; grid-auto-flow: row; }
    .page-index a:nth-child(5n)::after, .page-index a:nth-child(5n)::before { display: block; }
    .page-index a:last-child::after, .page-index a:last-child::before { display: none; }
}
.page-index a {
    display: grid;
    grid-template-columns: 2rem 1fr;
    align-items: baseline;
    gap: 0 0.6rem;
    padding: 0.45rem 0.5rem 0.45rem 0;
    border-radius: 8px;
    color: var(--text);
}
.page-index a:hover { background: var(--bg-raised); text-decoration: none; }
.page-index a:hover .t { color: var(--green); }
.page-index .n { font-family: var(--mono); font-size: 0.78rem; color: var(--green-dim); }
.page-index .t { font-weight: 600; font-size: 0.97rem; }
.page-index .muted { grid-column: 2; font-size: 0.82rem; line-height: 1.35; }

/* ---------- back to the top ---------- */

/* The consultant's button is 60px tall at bottom 1.4rem; this sits a clear 1.5rem above it. */
.to-top {
    position: fixed;
    right: 1.9rem;
    bottom: 7rem;
    z-index: 39;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: var(--bg-raised);
    color: var(--muted);
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}
/* display:grid would otherwise win over the hidden attribute */
.to-top[hidden] { display: none; }
.to-top:hover { color: var(--green); border-color: var(--green-dim); }

/* ---------- the consultant ---------- */

.chat-button {
    position: fixed;
    right: 1.4rem;
    bottom: 1.4rem;
    z-index: 40;
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--green-dim);
    background: radial-gradient(circle at 30% 25%, #1b3a28, #0f1a14 70%);
    color: var(--green);
    cursor: pointer;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 0 0 rgba(74, 222, 128, 0.3);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.chat-button:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55), 0 0 0 6px rgba(74, 222, 128, 0.08); }
.chat-button.is-open { background: #132019; }

.chat-panel {
    position: fixed;
    right: 1.4rem;
    bottom: 5.8rem;
    z-index: 41;
    width: min(560px, calc(100vw - 2.5rem));
    height: min(720px, calc(100vh - 8rem));
    display: flex;
    flex-direction: column;
    background: #0b100d;
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65);
    overflow: hidden;
}
.chat-panel[hidden] { display: none; }  /* the flex above would otherwise win over [hidden] */
.chat-panel header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem 0.8rem 1.1rem;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #101a14, #0b100d);
}
.chat-panel header strong { display: block; color: var(--green); font-family: var(--mono); font-size: 1rem; }
.chat-sub { display: block; color: var(--muted); font-size: 0.8rem; }
.chat-close {
    background: none;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--muted);
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.chat-close:hover { color: var(--green); border-color: var(--line-strong); }

.chat-log { padding: 1rem 1.1rem; overflow-y: auto; flex: 1; scrollbar-width: thin; scrollbar-color: #1f4a33 transparent; }
.chat-msg { margin-bottom: 1rem; font-size: 0.95rem; line-height: 1.55; }
.chat-msg.me .chat-body {
    background: #14201a;
    border: 1px solid var(--line-strong);
    border-radius: 12px 12px 3px 12px;
    padding: 0.55rem 0.8rem;
    margin-left: 3rem;
}
.chat-msg.them .chat-body { color: var(--text); white-space: pre-wrap; }
.chat-body.thinking::after {
    content: "…";
    color: var(--green);
    animation: pulse 1.2s ease-in-out infinite;
}
.chat-offline { color: var(--amber); font-size: 0.85rem; margin: 0 0 0.6rem; white-space: normal; }
.chat-quote {
    white-space: normal;
    border-left: 2px solid var(--green-dim);
    padding: 0.1rem 0 0.1rem 0.8rem;
    margin: 0.7rem 0;
}
.chat-quote a { font-weight: 600; font-size: 0.88rem; }
.chat-quote p { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.88rem; }

.chat-sources { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.chat-sources-label { color: var(--muted); font-size: 0.75rem; }
.chat-sources a {
    font-size: 0.75rem;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
}
.chat-sources a:hover { color: var(--green); border-color: var(--green-dim); }

.chat-sections {
    max-height: 42%;
    overflow-y: auto;
    border-top: 1px solid var(--line);
    padding: 0.4rem 1.1rem 0.6rem;
    scrollbar-width: thin;
    scrollbar-color: #1f4a33 transparent;
}
.chat-group summary {
    cursor: pointer;
    color: var(--green-dim);
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.45rem 0;
    list-style-position: inside;
}
.chat-group summary:hover { color: var(--green); }
.chat-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.1rem 0 0.5rem; }
.chat-chip {
    background: #0f1713;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text);
    font-family: var(--sans);
    font-size: 0.82rem;
    padding: 0.3rem 0.7rem;
    cursor: pointer;
    text-align: left;
}
.chat-chip:hover { color: var(--green); border-color: var(--green-dim); background: #132019; }

.chat-form { display: flex; gap: 0.5rem; padding: 0.8rem 1.1rem; border-top: 1px solid var(--line); background: #0d1410; }
.chat-form input {
    flex: 1;
    background: var(--bg-sunken);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    color: var(--text);
    padding: 0.6rem 0.8rem;
    font-family: var(--sans);
    font-size: 0.95rem;
}
.chat-form input:focus { outline: none; border-color: var(--green); }
.chat-form button[type="submit"] {
    background: var(--green);
    color: #06110a;
    border: 0;
    border-radius: 10px;
    padding: 0 1.1rem;
    font-weight: 600;
    cursor: pointer;
}
.chat-topics {
    background: none;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    color: var(--muted);
    width: 42px;
    cursor: pointer;
    font-size: 1rem;
}
.chat-topics:hover, .chat-topics[aria-expanded="true"] { color: var(--green); border-color: var(--green-dim); }

@media (max-width: 600px) {
    .chat-panel { right: 0.6rem; left: 0.6rem; width: auto; bottom: 5.4rem; height: calc(100vh - 7rem); }
}

/* ---------- home ---------- */

figure.hero-capture img { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
figure.hero-capture figcaption { font-size: 0.85rem; }
.track-card h3 a { color: var(--green); }
ul.lablist { list-style: none; padding: 0; margin: 0.4rem 0 1rem; }
ul.lablist li {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.28rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.93rem;
}
ul.lablist li a { color: var(--text); }
ul.lablist li a:hover { color: var(--green); }
ul.lablist .mono { color: var(--muted); margin-right: 0.35rem; font-size: 0.85rem; }

/* ---------- features: the text wraps around the capture, alternating sides ---------- */

.feature-row { display: flow-root; }
.feature-row > figure.capture { float: left; width: 55%; margin: 0.3rem 2.4rem 1.2rem 0; }
.feature-row.flip > figure.capture { float: right; margin: 0.3rem 0 1.2rem 2.4rem; }
.feature-row h2 { margin-top: 0; }
dl.feature-list { margin: 1.4rem 0 0; }
dl.feature-list.below { clear: both; margin-top: 0; padding-top: 0.2rem; }
dl.feature-list dt { color: var(--green); font-weight: 600; margin-top: 1rem; }
dl.feature-list dd { margin: 0.2rem 0 0; color: var(--muted); }
dl.feature-list .detail { display: block; font-size: 0.82rem; color: #6f7d76; margin-top: 0.2rem; }
@media (max-width: 900px) {
    .feature-row > figure.capture, .feature-row.flip > figure.capture { float: none; width: 100%; margin: 0 0 1.6rem; }
}
.feature-row.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }

/* ---------- journals: a wider column ---------- */

.wrap.wide { max-width: 1500px; }
.docs.journal-layout { grid-template-columns: 230px minmax(0, 1fr); }
.prose.journal { max-width: 1140px; }  /* 1.5 x the reading column elsewhere */

/* ---------- code: scrollbars and syntax colour in the site's palette ---------- */

/* the same thin green scrollbar on everything that scrolls inside the page: code, tables, dialogs */
pre, .tablewrap, .modal-card, .modal-body { scrollbar-width: thin; scrollbar-color: #1f4a33 #0b110e; }
:is(pre, .tablewrap, .modal-card, .modal-body)::-webkit-scrollbar { height: 9px; width: 9px; }
:is(pre, .tablewrap, .modal-card, .modal-body)::-webkit-scrollbar-track { background: #0b110e; border-radius: 0 0 10px 10px; }
:is(pre, .tablewrap, .modal-card, .modal-body)::-webkit-scrollbar-thumb { background: #1f4a33; border-radius: 6px; border: 2px solid #0b110e; }
:is(pre, .tablewrap, .modal-card, .modal-body)::-webkit-scrollbar-thumb:hover { background: #2f7a50; }
:is(pre, .tablewrap, .modal-card, .modal-body)::-webkit-scrollbar-corner { background: #0b110e; }

pre.hl code { color: #d7e5dd; }
.hl-gp { color: var(--green); font-weight: 600; }          /* prompt */
.hl-go { color: #9aa8a1; }                                 /* command output */
.hl-c, .hl-c1, .hl-ch, .hl-cm, .hl-cs, .hl-cp { color: #6b7a72; font-style: italic; }
.hl-k, .hl-kd, .hl-kn, .hl-kr, .hl-kc, .hl-ow { color: #4ade80; }
.hl-nb, .hl-bp, .hl-nf, .hl-fm { color: #7dd3fc; }
.hl-s, .hl-s1, .hl-s2, .hl-sb, .hl-sh, .hl-sd, .hl-se, .hl-si, .hl-sx { color: #fcd34d; }
.hl-m, .hl-mi, .hl-mf, .hl-mh, .hl-il { color: #fda4af; }
.hl-nv, .hl-vg, .hl-vi { color: #c4b5fd; }
.hl-na, .hl-nt, .hl-nc, .hl-nn { color: #86efac; }
.hl-o, .hl-p { color: #a7b5ae; }
.hl-gi { color: #4ade80; background: rgba(74, 222, 128, 0.07); }
.hl-gd { color: #f87171; background: rgba(248, 113, 113, 0.07); }
.hl-gh, .hl-gu { color: #7dd3fc; font-weight: 600; }
.hl-err { color: inherit; background: none; }

/* ---------- profiles: the day under the cursor, and one attempt ---------- */

.heatwrap { position: relative; }
svg.heatmap rect[data-count]:not([data-count="0"]) { cursor: pointer; }
svg.heatmap rect[data-count]:not([data-count="0"]):hover { stroke: #e8ece9; stroke-width: 1.2; }
.heat-tip {
    position: absolute;
    z-index: 5;
    min-width: 220px;
    max-width: 320px;
    background: #0d1511;
    border: 1px solid var(--green-dim);
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    font-size: 0.85rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
    pointer-events: none;
}
.heat-tip ul { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.heat-tip li { padding: 0.1rem 0; }

table.board tr.attempt { cursor: pointer; }
table.board tr.attempt:focus { outline: 1px solid var(--green-dim); outline-offset: -1px; }
.tag.rec { color: var(--green); border-color: var(--green-dim); }

.modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(3, 6, 5, 0.78);
    backdrop-filter: blur(3px);
    display: grid;
    place-items: center;
    padding: 1.5rem;
}
.modal[hidden] { display: none; }
.modal-card {
    width: min(1180px, 100%);
    max-height: calc(100vh - 3rem);
    overflow: auto;
    background: var(--bg);
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    padding: 1.4rem 1.6rem 1.6rem;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}
.modal-card header { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.modal-card h2 { margin: 0.1rem 0 0.3rem; }
.modal-card .note { margin: 0.8rem 0 1rem; max-width: none; }
.modal-close {
    background: none;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    color: var(--muted);
    font-size: 1.4rem;
    line-height: 1;
    width: 40px;
    height: 40px;
    cursor: pointer;
}
.modal-close:hover { color: var(--green); border-color: var(--green-dim); }

/* ---------- account ---------- */

.wrap.narrow { max-width: 720px; }
.acct-card { margin-top: 1.4rem; }
.acct-card h3 { margin-top: 0; }
.acct-card label.acct-switch { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--text); }
.acct-card label.acct-switch input { width: auto; padding: 0; margin-top: 0.25rem; accent-color: var(--green); }
.acct-card form { display: grid; gap: 0.9rem; }
/* `hidden` loses to the grid above without this, and both sign-in steps would show at once */
.acct-card form[hidden] { display: none; }
.acct-card label { display: grid; gap: 0.3rem; color: var(--muted); font-size: 0.9rem; }
.acct-card input {
    background: var(--bg-sunken);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    color: var(--text);
    padding: 0.6rem 0.75rem;
    font-size: 1rem;
    font-family: var(--sans);
}
.acct-card input:focus { outline: none; border-color: var(--green); }
.acct-card .gh-button { display: inline-flex; align-items: center; gap: 0.55rem; }
.acct-card label.acct-switch.after-github { margin-top: 1.1rem; }
.acct-card .acct-no-github { margin-top: 1.5rem; }
.acct-inline { display: flex; gap: 0.8rem; align-items: end; flex-wrap: wrap; }
.acct-github { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 1rem; }
.acct-github img { border-radius: 50%; border: 1px solid var(--line-strong); }
.acct-card .btn { justify-self: start; cursor: pointer; font-size: 1rem; }
.acct-message { margin: 1.2rem 0 0; padding: 0.6rem 0.9rem; border-radius: 8px; }
.acct-message.good { color: var(--green); border: 1px solid var(--green-dim); background: rgba(74, 222, 128, 0.06); }
.acct-message.bad { color: var(--red); border: 1px solid #5a2626; background: rgba(248, 113, 113, 0.06); }
/* a button that has to read as a link: disconnecting is not the card's main action */
button.linkish {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--green);
    cursor: pointer;
}
button.linkish:hover { text-decoration: underline; text-underline-offset: 3px; }
button.linkish:disabled { color: var(--muted); cursor: default; text-decoration: none; }
ul.token-list { list-style: none; padding: 0; margin: 0; }
ul.token-list li { padding: 0.35rem 0; border-bottom: 1px solid var(--line); color: var(--muted); }
/* signing out sits under the list of places this account is signed in on */
#acct-tokens #acct-signout { margin-top: 1.1rem; }

/* ---------- analytics ---------- */

figure.chart { margin: 1.2rem 0; }
figure.chart img { width: 100%; height: auto; display: block; }
.chart-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
@media (max-width: 900px) { .chart-row { grid-template-columns: 1fr; } }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-top: 1.6rem; }
.stat { border: 1px solid var(--line); border-radius: 12px; padding: 0.9rem 1.1rem; background: var(--bg-raised); display: grid; }
.stat-n { font-family: var(--mono); font-size: 1.7rem; color: var(--green); font-weight: 600; }
.fact { color: var(--text); font-weight: 500; }

/* drawn from data (site/graphics.py): a track's machines, a journal's sections */
.map-wrap { margin: 1.2rem 0 0.4rem; max-width: 760px; }
.map-wrap svg { width: 100%; height: auto; display: block; }
.map-wrap.small { margin: 0.6rem 0; }
.map-wrap a:hover rect { opacity: 0.85; }

/* ---------- donate ---------- */

.give {
    max-width: 640px;
    margin: 0 auto;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--bg-raised);
    padding: 1.6rem;
    display: grid;
    gap: 1.1rem;
    text-align: center;
}
.give-interval {
    display: inline-flex;
    justify-self: center;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 3px;
    background: var(--bg-sunken);
}
.give-interval .pill {
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    font-weight: 600;
    padding: 0.4rem 1.2rem;
    border-radius: 999px;
    cursor: pointer;
}
.give-interval .pill[aria-pressed="true"] { background: var(--green); color: #07120c; }
/* four across, so the six tiles and the free amount fill two even rows */
.give-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
.give-amounts .amount.other { grid-column: span 2; }
@media (max-width: 560px) {
    .give-amounts { grid-template-columns: repeat(2, 1fr); }
}
.give-amounts .amount {
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: var(--bg-sunken);
    color: var(--text);
    font-family: var(--mono);
    font-size: 1.1rem;
    font-weight: 600;
    padding: 0.75rem 0.4rem;
    cursor: pointer;
}
.give-amounts .amount:hover { border-color: var(--green-dim); color: var(--green); }
.give-amounts .amount.on {
    border-color: var(--green);
    color: var(--green);
    background: rgba(74, 222, 128, 0.1);
}
.give-amounts .amount.other {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--muted);
    cursor: text;
}
.give-amounts .amount.other input {
    width: 100%;
    min-width: 0;
    border: 0;
    background: none;
    color: var(--text);
    font: inherit;
    text-align: center;
    padding: 0;
    appearance: textfield;
}
.give-amounts .amount.other input::-webkit-outer-spin-button,
.give-amounts .amount.other input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.give-amounts .amount.other input:focus { outline: none; }
.give-amounts .amount.other:focus-within { border-color: var(--green); color: var(--green); }
.give-go { justify-self: center; border: 0; font: inherit; font-weight: 700; cursor: pointer; padding: 0.7rem 1.8rem; }
.give-go:disabled { opacity: 0.55; cursor: not-allowed; }
.give-note { font-size: 0.9rem; margin: 0; }
.give-problem { color: var(--amber); margin: 0; }

/* ---------- community: the server, drawn ---------- */
.server {
    display: grid;
    grid-template-columns: 240px 1fr;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-raised);
    max-width: 960px;
}
.server-rail { background: var(--bg-sunken); padding: 1rem 0.9rem 1.2rem; border-right: 1px solid var(--line); }
.server-rail-name {
    font-family: var(--mono);
    color: var(--green);
    font-weight: 600;
    padding: 0.2rem 0.4rem 0.9rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 0.7rem;
}
.rail-group {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0.9rem 0.4rem 0.35rem;
}
.rail-channel {
    font-family: var(--mono);
    font-size: 0.84rem;
    color: var(--muted);
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
}
.rail-channel.live { color: var(--green); background: rgba(74, 222, 128, 0.07); }
.hash { color: var(--line-strong); margin-right: 0.35rem; }
.rail-channel.live .hash { color: var(--green-dim); }
.server-main { padding: 1rem 1.3rem 1.4rem; }
.server-head {
    font-family: var(--mono);
    color: var(--green);
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--line);
}
.server-post { padding-top: 1rem; }
.server-post p { margin: 0 0 0.7rem; }
.post-who { font-family: var(--mono); font-size: 0.82rem; margin-bottom: 0.6rem; }
.post-who .bot {
    background: var(--green);
    color: #07120c;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    margin-right: 0.45rem;
}
.figure-note { margin-top: 0.8rem; }

.chanlist { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.6rem 2.4rem; }
.chan-group h3 { margin-bottom: 0.8rem; }
.chan-group dl { margin: 0; }
.chan-group dt { font-family: var(--mono); color: var(--green); margin-top: 0.9rem; }
.chan-group dd { margin: 0.15rem 0 0; }

@media (max-width: 720px) {
    .server { grid-template-columns: 1fr; }
    .server-rail { border-right: 0; border-bottom: 1px solid var(--line); }
}
/* a list whose items are paragraphs, not labels */
.spaced > li { margin-bottom: 0.9rem; }
.server-post + .server-post { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 0.4rem; }
.server-main > p.small { margin-top: 1.2rem; }

/* deleting an account: the one card on the site that is meant to look like a stop sign */
.acct-card.danger { border-color: #5a2626; }
.acct-card.danger h3 { color: var(--red); }
.acct-card.danger .btn { border-color: #7a3434; color: var(--red); }
.acct-card.danger .btn:hover { background: rgba(248, 113, 113, 0.08); }
.acct-card.danger .btn.solid { background: var(--red); border-color: var(--red); color: #1a0606; }
.acct-card.danger .btn.solid:hover { background: #fa8f8f; }
.acct-card.danger #delete-nick { margin-top: 0.3rem; }