/* CNPE curriculum: "operations handbook". Warm graphite ground, aged-metal accents, IBM Plex throughout, hairline rules and margin numerals instead of floating cards. Everything ships with the repo: no network at read time. Fonts: IBM Plex, SIL OFL 1.1 (see assets/fonts/OFL.txt). */ @font-face { font-family: "Plex Sans"; src: url("fonts/plex-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Plex Sans"; src: url("fonts/plex-sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Plex Cond"; src: url("fonts/plex-cond-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Plex Cond"; src: url("fonts/plex-cond-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Plex Mono"; src: url("fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Plex Mono"; src: url("fonts/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } /* ═══════════════════ palette ═══════════════════ Two grounds, one set of names. Every rule below paints with the semantic tokens (--ink, --paper, --copper …); the two raw palettes hold the values and the three mapping blocks decide which one is live: :root → graphite, the console's native ground @media (prefers-color-scheme:light) → paper, unless the reader pinned dark :root[data-theme="light"|"dark"] → the reader's explicit pin assets/theme.js writes data-theme from , so a pinned theme is on the root element before the first paint. No attribute means "follow the system", which is the default and is handled entirely by the media query, so the theme still resolves with scripting off. */ :root { /* ── graphite ── */ --dk-ink: #141416; --dk-ink-sunk: #0E0F11; --dk-surface: #1A1B1E; --dk-surface-2: #212226; --dk-surface-3: #292A2F; --dk-rule: #2C2D32; --dk-rule-2: #3D3F46; --dk-paper: #E9E6E1; --dk-paper-2: #B7B3AC; --dk-paper-3: #918D86; --dk-paper-hi: #FFFDF9; --dk-copper: #D08453; --dk-copper-dim: #8A5433; --dk-copper-lit: #E9A277; --dk-verdigris: #59A79C; --dk-verdigris-lit: #8CC7BE; --dk-moss: #86A96A; --dk-moss-lit: #A6C98C; --dk-brass: #CFA351; --dk-brass-lit: #E2C083; --dk-rust: #D06E6A; --dk-rust-lit: #E08A87; --dk-plum: #A184BE; --dk-code-fg: #D6D2CB; --dk-syn-cm: #88837B; --dk-syn-str: #A9BE86; --dk-syn-key: #8FB8D8; --dk-syn-num: #E0A0A0; --dk-tint: rgba(255,255,255,.015); /* a surface lifted off its ground */ --dk-tint-hi: rgba(255,255,255,.028); /* the same, under the pointer */ --dk-hair: rgba(255,255,255,.02); /* the highlight under a top edge */ --dk-bar-1: rgba(20,20,22,.96); /* the sticky masthead, top… */ --dk-bar-2: rgba(20,20,22,.9); /* …to bottom */ --dk-scrim: rgba(10,10,12,.74); --dk-shadow: rgba(0,0,0,.65); --dk-grain: .5; /* strength of the ground's grain */ --dk-a-line: 45%; /* accent mixed into a hairline */ --dk-a-fill: 9%; /* accent mixed into a wash */ /* ── paper ── */ --lt-ink: #F7F5F1; --lt-ink-sunk: #EFEBE3; --lt-surface: #FDFCFA; --lt-surface-2: #F3F0EA; --lt-surface-3: #E4DFD5; --lt-rule: #DFD9CF; --lt-rule-2: #C0B8AA; --lt-paper: #1A1917; --lt-paper-2: #45423B; --lt-paper-3: #6C6860; --lt-paper-hi: #0B0A08; --lt-copper: #A55A28; --lt-copper-dim: #C08A63; --lt-copper-lit: #7E3F14; --lt-verdigris: #10645B; --lt-verdigris-lit: #0C4F48; --lt-moss: #4C7A2E; --lt-moss-lit: #3B6222; --lt-brass: #8A6512; --lt-brass-lit: #6E5010; --lt-rust: #B03731; --lt-rust-lit: #8F241F; --lt-plum: #6A4B96; --lt-code-fg: #26241F; --lt-syn-cm: #7A756B; --lt-syn-str: #4A6B2C; --lt-syn-key: #275C8C; --lt-syn-num: #9C4A4A; --lt-tint: rgba(26,25,23,.022); --lt-tint-hi: rgba(26,25,23,.055); --lt-hair: transparent; --lt-bar-1: rgba(247,245,241,.96); --lt-bar-2: rgba(247,245,241,.9); --lt-scrim: rgba(52,47,40,.4); --lt-shadow: rgba(60,50,35,.2); --lt-grain: .34; --lt-a-line: 55%; --lt-a-fill: 12%; /* ── live mapping: graphite ── */ color-scheme: dark; --ink: var(--dk-ink); --ink-sunk: var(--dk-ink-sunk); --surface: var(--dk-surface); --surface-2: var(--dk-surface-2); --surface-3: var(--dk-surface-3); --rule: var(--dk-rule); --rule-2: var(--dk-rule-2); --paper: var(--dk-paper); --paper-2: var(--dk-paper-2); --paper-3: var(--dk-paper-3); --paper-hi: var(--dk-paper-hi); --copper: var(--dk-copper); --copper-dim: var(--dk-copper-dim); --copper-lit: var(--dk-copper-lit); --verdigris: var(--dk-verdigris); --verdigris-lit: var(--dk-verdigris-lit); --moss: var(--dk-moss); --moss-lit: var(--dk-moss-lit); --brass: var(--dk-brass); --brass-lit: var(--dk-brass-lit); --rust: var(--dk-rust); --rust-lit: var(--dk-rust-lit); --plum: var(--dk-plum); --code-fg: var(--dk-code-fg); --syn-cm: var(--dk-syn-cm); --syn-str: var(--dk-syn-str); --syn-key: var(--dk-syn-key); --syn-num: var(--dk-syn-num); --tint: var(--dk-tint); --tint-hi: var(--dk-tint-hi); --hair: var(--dk-hair); --bar-1: var(--dk-bar-1); --bar-2: var(--dk-bar-2); --scrim: var(--dk-scrim); --shadow: var(--dk-shadow); --grain: var(--dk-grain); --a-line: var(--dk-a-line); --a-fill: var(--dk-a-fill); /* semantic aliases used by scripts and components */ --brand: var(--copper); --brand-2: var(--brass); --accent: var(--copper); --ok: var(--moss); --warn: var(--brass); --bad: var(--rust); /* accents pre-mixed for the two jobs they do besides being text: ruling a frame, and washing the surface inside it. Derived, so a theme swap carries them along. */ --rule-soft: color-mix(in srgb, var(--rule) 75%, transparent); --copper-line: color-mix(in srgb, var(--copper) var(--a-line), transparent); --copper-fill: color-mix(in srgb, var(--copper) var(--a-fill), transparent); --verdigris-line: color-mix(in srgb, var(--verdigris) var(--a-line), transparent); --verdigris-fill: color-mix(in srgb, var(--verdigris) var(--a-fill), transparent); --moss-line: color-mix(in srgb, var(--moss) var(--a-line), transparent); --moss-fill: color-mix(in srgb, var(--moss) var(--a-fill), transparent); --brass-line: color-mix(in srgb, var(--brass) var(--a-line), transparent); --brass-fill: color-mix(in srgb, var(--brass) var(--a-fill), transparent); --rust-line: color-mix(in srgb, var(--rust) var(--a-line), transparent); --rust-fill: color-mix(in srgb, var(--rust) var(--a-fill), transparent); --plum-line: color-mix(in srgb, var(--plum) var(--a-line), transparent); --plum-fill: color-mix(in srgb, var(--plum) var(--a-fill), transparent); --mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --sans: "Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --disp: "Plex Cond", "Plex Sans", ui-sans-serif, system-ui, sans-serif; --maxw: 1560px; --measure: 78ch; } /* ── live mapping: paper ── Once for the system preference (skipped when dark is pinned) and once for a pinned light theme. Only the two blocks' selectors differ; the values live in --lt-* above, so there is one place to edit. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --ink: var(--lt-ink); --ink-sunk: var(--lt-ink-sunk); --surface: var(--lt-surface); --surface-2: var(--lt-surface-2); --surface-3: var(--lt-surface-3); --rule: var(--lt-rule); --rule-2: var(--lt-rule-2); --paper: var(--lt-paper); --paper-2: var(--lt-paper-2); --paper-3: var(--lt-paper-3); --paper-hi: var(--lt-paper-hi); --copper: var(--lt-copper); --copper-dim: var(--lt-copper-dim); --copper-lit: var(--lt-copper-lit); --verdigris: var(--lt-verdigris); --verdigris-lit: var(--lt-verdigris-lit); --moss: var(--lt-moss); --moss-lit: var(--lt-moss-lit); --brass: var(--lt-brass); --brass-lit: var(--lt-brass-lit); --rust: var(--lt-rust); --rust-lit: var(--lt-rust-lit); --plum: var(--lt-plum); --code-fg: var(--lt-code-fg); --syn-cm: var(--lt-syn-cm); --syn-str: var(--lt-syn-str); --syn-key: var(--lt-syn-key); --syn-num: var(--lt-syn-num); --tint: var(--lt-tint); --tint-hi: var(--lt-tint-hi); --hair: var(--lt-hair); --bar-1: var(--lt-bar-1); --bar-2: var(--lt-bar-2); --scrim: var(--lt-scrim); --shadow: var(--lt-shadow); --grain: var(--lt-grain); --a-line: var(--lt-a-line); --a-fill: var(--lt-a-fill); } } :root[data-theme="light"] { color-scheme: light; --ink: var(--lt-ink); --ink-sunk: var(--lt-ink-sunk); --surface: var(--lt-surface); --surface-2: var(--lt-surface-2); --surface-3: var(--lt-surface-3); --rule: var(--lt-rule); --rule-2: var(--lt-rule-2); --paper: var(--lt-paper); --paper-2: var(--lt-paper-2); --paper-3: var(--lt-paper-3); --paper-hi: var(--lt-paper-hi); --copper: var(--lt-copper); --copper-dim: var(--lt-copper-dim); --copper-lit: var(--lt-copper-lit); --verdigris: var(--lt-verdigris); --verdigris-lit: var(--lt-verdigris-lit); --moss: var(--lt-moss); --moss-lit: var(--lt-moss-lit); --brass: var(--lt-brass); --brass-lit: var(--lt-brass-lit); --rust: var(--lt-rust); --rust-lit: var(--lt-rust-lit); --plum: var(--lt-plum); --code-fg: var(--lt-code-fg); --syn-cm: var(--lt-syn-cm); --syn-str: var(--lt-syn-str); --syn-key: var(--lt-syn-key); --syn-num: var(--lt-syn-num); --tint: var(--lt-tint); --tint-hi: var(--lt-tint-hi); --hair: var(--lt-hair); --bar-1: var(--lt-bar-1); --bar-2: var(--lt-bar-2); --scrim: var(--lt-scrim); --shadow: var(--lt-shadow); --grain: var(--lt-grain); --a-line: var(--lt-a-line); --a-fill: var(--lt-a-fill); } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 82px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 16.5px; line-height: 1.72; font-feature-settings: "kern" 1, "liga" 1; -webkit-font-smoothing: antialiased; } /* a faint warm grain, so the ground is not a flat fill */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: var(--grain); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E"); } body > * { position: relative; z-index: 1; } a { color: var(--copper); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--copper) 32%, transparent); } a:hover { color: var(--copper-lit); border-bottom-color: currentColor; } code, kbd, pre, .mono { font-family: var(--mono); } kbd { font-size: 11.5px; background: var(--surface-2); border: 1px solid var(--rule-2); border-bottom-width: 2px; border-radius: 3px; padding: 1px 6px; color: var(--paper-2); } :focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; border-radius: 2px; } .skip { position: absolute; left: 12px; top: -48px; z-index: 60; background: var(--surface); color: var(--paper); border: 1px solid var(--rule-2); padding: 8px 14px; font-size: 14px; transition: top .15s; border-bottom-width: 1px; } .skip:focus { top: 10px; } article:focus { outline: none; } /* ═══════════════════ masthead ═══════════════════ */ .topbar { position: sticky; top: 0; z-index: 40; height: 58px; background: linear-gradient(180deg, var(--bar-1), var(--bar-2)); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); box-shadow: 0 1px 0 var(--hair); } .topbar .inner { max-width: var(--maxw); margin: 0 auto; height: 100%; padding: 0 26px; display: flex; align-items: center; gap: 18px; } .logo { display: flex; align-items: center; gap: 10px; color: var(--paper); border: none; } .logo:hover { color: var(--paper); } .logo .mark { width: 22px; height: 22px; flex: none; } /* The gradient stops are set here rather than as SVG presentation attributes: var() is not reliably substituted in a presentation attribute, and an unresolved one falls back to black, which on this ground is invisible. The literal hexes in the markup are the floor if this rule ever fails to match. */ .logo .mark .s1 { stop-color: var(--brand-2); } .logo .mark .s2 { stop-color: var(--brand); } .logo .word { font-family: var(--disp); font-weight: 700; letter-spacing: 3px; font-size: 17px; color: var(--paper); } .logo .sub { font-family: var(--mono); color: var(--paper-3); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; padding-left: 11px; border-left: 1px solid var(--rule); } .crumbs { display: flex; align-items: center; gap: 9px; min-width: 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: .6px; color: var(--paper-3); text-transform: uppercase; } .crumbs a { color: var(--paper-3); border: none; } .crumbs a:hover { color: var(--copper); } .crumbs .sep { opacity: .45; } .crumbs .here { color: var(--paper-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: none; letter-spacing: .2px; } .topbar .spacer { flex: 1; } .searchbtn { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px 0 12px; background: transparent; border: 1px solid var(--rule); color: var(--paper-3); font-family: var(--mono); font-size: 12px; cursor: pointer; min-width: 210px; letter-spacing: .3px; } .searchbtn:hover { border-color: var(--copper-dim); color: var(--paper-2); } .searchbtn .k { margin-left: auto; border: 1px solid var(--rule-2); padding: 0 5px; font-size: 11px; } .searchbtn .ic { display: block; flex: none; } .iconbtn { height: 32px; min-width: 32px; padding: 0 9px; background: transparent; border: 1px solid var(--rule); color: var(--paper-2); cursor: pointer; font-family: var(--mono); font-size: 13px; display: inline-flex; align-items: center; gap: 7px; } .iconbtn:hover { border-color: var(--copper-dim); color: var(--copper); } .iconbtn .gh, .iconbtn .thm { display: block; } /* kill the inline-svg baseline gap */ .themebtn { justify-content: center; } .topbar .prog { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11.5px; color: var(--paper-3); font-variant-numeric: tabular-nums; } .topbar .prog .track { width: 88px; height: 3px; background: var(--surface-3); } .topbar .prog .track i { display: block; height: 100%; background: var(--copper); } @media (max-width: 980px) { .crumbs, .topbar .prog { display: none; } } @media (max-width: 560px) { .logo .sub { display: none; } .searchbtn { min-width: 0; } } @media (max-width: 440px) { .searchbtn span:first-of-type, .searchbtn .k { display: none; } .searchbtn { padding: 0 10px; } .topbar .inner { padding: 0 14px; gap: 10px; } } /* ═══════════════════ page frame ═══════════════════ */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 34px 26px 110px; } .cols { display: grid; grid-template-columns: minmax(0, 940px) 236px; gap: 46px; align-items: start; justify-content: center; } article { min-width: 0; } .pagehead { margin: 0 0 26px; } .pagehead .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--paper-3); margin-bottom: 12px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .pagehead h1 { font-family: var(--disp); font-weight: 700; margin: 0 0 12px; font-size: 40px; line-height: 1.1; letter-spacing: -.2px; text-wrap: balance; padding-bottom: 14px; border-bottom: 1px solid var(--rule); position: relative; } .pagehead h1 .id { font-family: var(--mono); font-weight: 400; font-size: 15px; color: var(--copper); display: block; letter-spacing: 2px; margin-bottom: 6px; } .pagehead .sum { color: var(--paper-2); font-size: 17.5px; max-width: var(--measure); margin: 0; } /* the section numeral in the margin, where the manual would print it */ @media (min-width: 1360px) { .pagehead h1 .id { position: absolute; left: -104px; top: 8px; width: 88px; text-align: right; margin: 0; font-size: 26px; color: var(--rule-2); letter-spacing: 1px; } } /* ═══════════════════ instrument readouts ═══════════════════ */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(158px, 100%), 1fr)); gap: 0; margin: 26px 0 30px; border: 1px solid var(--rule); background: var(--surface); } .stat { padding: 12px 16px; border-right: 1px solid var(--rule); position: relative; min-width: 0; } .stat:last-child { border-right: none; } .stat .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--paper-3); display: block; margin-bottom: 4px; } .stat .val { font-family: var(--disp); font-weight: 600; font-size: 26px; line-height: 1.15; color: var(--paper); font-variant-numeric: tabular-nums; letter-spacing: -.2px; } .stat .val.sm { font-family: var(--mono); font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 1.45; } .stat .val .u { font-family: var(--mono); font-size: 11.5px; color: var(--paper-3); font-weight: 400; margin-left: 4px; letter-spacing: 0; } .stat .spark { margin-top: 8px; height: 3px; background: var(--surface-3); } .stat .spark i { display: block; height: 100%; background: var(--moss); } .stat .lbl::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; background: var(--rule-2); vertical-align: 1px; } .stat.g .lbl::before { background: var(--moss); } .stat.y .lbl::before { background: var(--brass); } .stat.c .lbl::before { background: var(--verdigris); } .stat.p .lbl::before { background: var(--plum); } .stat.o .lbl::before { background: var(--copper); } .stat.r .lbl::before { background: var(--rust); } .stat.g .val { color: var(--moss); } @media (max-width: 720px) { .stat { border-right: none; border-bottom: 1px solid var(--rule); } } .badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; padding: 3px 9px; border: 1px solid var(--rule-2); color: var(--paper-2); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 380px) { .badge { letter-spacing: .6px; font-size: 10px; } } .badge.d1 { color: var(--verdigris); border-color: var(--verdigris-line); } .badge.d2 { color: var(--moss); border-color: var(--moss-line); } .badge.d3 { color: var(--plum); border-color: var(--plum-line); } .badge.d4 { color: var(--brass); border-color: var(--brass-line); } .badge.d5 { color: var(--rust); border-color: var(--rust-line); } .badge.ok { color: var(--moss); border-color: var(--moss-line); } .needs { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin: 0 0 26px; } .needs .lbl { font-family: var(--mono); font-size: 10px; color: var(--paper-3); letter-spacing: 1.6px; text-transform: uppercase; } .needs code { font-family: var(--mono); font-size: 12.5px; background: transparent; border: 1px dashed var(--rule-2); padding: 3px 10px; color: var(--moss); cursor: pointer; } .needs code:hover { border-color: var(--moss); border-style: solid; } /* ═══════════════════ panels ═══════════════════ */ .panel { background: var(--surface); border: 1px solid var(--rule); margin: 0 0 26px; } .panel > .phdr { display: flex; align-items: baseline; gap: 14px; padding: 11px 20px 10px 18px; border-bottom: 1px solid var(--rule); background: var(--ink-sunk); box-shadow: inset 3px 0 0 var(--rule-2); } .panel > .phdr h2 { margin: 0; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 2.2px; text-transform: uppercase; color: var(--paper); } .panel > .phdr .meta { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--paper-3); letter-spacing: .4px; text-align: right; } .panel > .pbody { padding: 22px 24px 6px; } .panel.accent-g > .phdr { box-shadow: inset 3px 0 0 var(--moss); } .panel.accent-y > .phdr { box-shadow: inset 3px 0 0 var(--brass); } .panel.accent-p > .phdr { box-shadow: inset 3px 0 0 var(--plum); } .panel.accent-r > .phdr { box-shadow: inset 3px 0 0 var(--rust); } .panel.accent-c > .phdr { box-shadow: inset 3px 0 0 var(--verdigris); } /* ═══════════════════ prose ═══════════════════ */ article h3 { font-family: var(--disp); font-size: 21px; font-weight: 600; margin: 32px 0 10px; color: var(--paper); letter-spacing: -.1px; text-wrap: balance; } article h3:first-child { margin-top: 0; } article h4 { font-family: var(--disp); font-size: 17px; font-weight: 600; margin: 22px 0 6px; color: var(--paper-2); } article p, article li { max-width: var(--measure); } article p { margin: 0 0 15px; } article ul, article ol { margin: 0 0 17px; padding-left: 24px; } article li { margin: 0 0 9px; } article li::marker { color: var(--copper-dim); font-family: var(--mono); font-size: .9em; } article strong { color: var(--paper-hi); font-weight: 600; } .lede { font-size: 18px; color: var(--paper-2); margin: 0 0 22px; max-width: var(--measure); } article p code, article li code, article td code, .callout code, .quiz code, .verify code, .lede code, dd code, .wnote code { font-family: var(--mono); font-size: .87em; color: var(--verdigris-lit); background: var(--verdigris-fill); padding: 1px 5px; overflow-wrap: break-word; } article a code { color: var(--copper); background: var(--copper-fill); } /* ═══════════════════ code ═══════════════════ */ .cb { position: relative; margin: 0 0 20px; background: var(--ink-sunk); border: 1px solid var(--rule); border-left: 2px solid var(--copper-dim); } .cb > .cb-bar { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; border-bottom: 1px solid var(--rule); background: var(--tint); font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--paper-3); } .cb > .cb-bar .spacer { flex: 1; } .cb pre { margin: 0; padding: 15px 16px; overflow-x: auto; font-size: 13.4px; line-height: 1.7; color: var(--code-fg); } .cb pre code, .diagram code { background: none; border: none; padding: 0; color: inherit; white-space: pre; font-size: inherit; } .copy-btn { font-family: var(--mono); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; background: transparent; color: var(--paper-3); border: 1px solid var(--rule-2); padding: 3px 10px; cursor: pointer; transition: color .13s, border-color .13s; } .copy-btn:hover { color: var(--copper); border-color: var(--copper-dim); } .copy-btn.ok { color: var(--moss); border-color: var(--moss-line); } .cb .t-cm { color: var(--syn-cm); font-style: italic; } .cb .t-str { color: var(--syn-str); } .cb .t-kw { color: var(--plum); } .cb .t-cmd { color: var(--verdigris); } .cb .t-flag{ color: var(--brass); } .cb .t-key { color: var(--syn-key); } .cb .t-var { color: var(--copper); } .cb .t-num { color: var(--syn-num); } .diagram { margin: 0 0 22px; padding: 18px 20px; background: var(--ink-sunk); border: 1px solid var(--rule); border-left: 2px solid var(--rule-2); overflow-x: auto; font-family: var(--mono); font-size: 12.7px; line-height: 1.6; color: var(--paper-2); white-space: pre; } .diagram b { color: var(--copper); font-weight: 500; } .diagram i { color: var(--plum); font-style: normal; } .diagram u { color: var(--moss); text-decoration: none; } .diagram s { color: var(--rust); text-decoration: none; } .diagram em { color: var(--brass); font-style: normal; } .figcap { margin: -14px 0 22px; font-size: 13.5px; color: var(--paper-3); max-width: var(--measure); } /* ═══════════════════ tables ═══════════════════ */ .tbl-wrap { overflow-x: auto; margin: 0 0 22px; border: 1px solid var(--rule); } table { border-collapse: collapse; width: 100%; font-size: 14.2px; } thead th { background: var(--ink-sunk); color: var(--paper-3); font-family: var(--mono); font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; text-align: left; font-weight: 400; padding: 9px 14px; border-bottom: 1px solid var(--rule); white-space: nowrap; } tbody td { padding: 11px 14px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; } tbody tr:last-child td { border-bottom: none; } tbody tr:hover { background: var(--tint-hi); } td.mono, th.mono, td .mono { font-family: var(--mono); font-size: 12.8px; } .ok { color: var(--moss); } .bad { color: var(--rust); } .warn { color: var(--brass); } .dimtext { color: var(--paper-3); } /* ═══════════════════ callouts: labelled frames ═══════════════════ */ .callout { position: relative; margin: 26px 0 24px; padding: 20px 18px 14px; border: 1px solid var(--rule-2); background: var(--tint); font-size: 15.8px; max-width: var(--measure); } .callout > .tag { position: absolute; top: -8px; left: 14px; padding: 0 9px; background: var(--surface); font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--paper-2); display: inline-flex; align-items: center; gap: 7px; } .callout p:last-child, .callout ul:last-child, .callout ol:last-child, .callout .cb:last-child, .callout .tbl-wrap:last-child { margin-bottom: 0; } .callout p, .callout li { max-width: none; } .callout.trap { border-color: var(--rust-line); } .callout.trap > .tag { color: var(--rust); } .callout.exam { border-color: var(--brass-line); } .callout.exam > .tag { color: var(--brass); } .callout.model { border-color: var(--plum-line); } .callout.model > .tag { color: var(--plum); } .callout.reflex { border-color: var(--moss-line); } .callout.reflex > .tag { color: var(--moss); } .callout.lab { border-color: var(--copper-line); } .callout.lab > .tag { color: var(--copper); } /* inside a panel the tag sits on the panel's own surface */ .pbody .callout > .tag { background: var(--surface); } /* ═══════════════════ exercises: a numbered procedure ═══════════════════ */ .exercise { margin: 0 0 2px; border: 1px solid var(--rule); background: var(--surface-2); counter-increment: ex; } .exercise + .exercise { border-top: none; } .exercise > header { display: flex; align-items: stretch; background: var(--tint); } .exercise > header .disc { flex: 1; display: flex; align-items: center; gap: 13px; padding: 12px 16px; cursor: pointer; background: none; border: none; color: inherit; font: inherit; text-align: left; } .exercise > header .disc:hover { background: var(--tint-hi); } .exercise > header .dot { flex: none; width: 22px; font-family: var(--mono); font-size: 11px; color: var(--paper-3); letter-spacing: .5px; border: none; background: none; } .exercise > header .dot::before { content: counter(ex, decimal-leading-zero); } .exercise > header h4 { margin: 0; font-family: var(--disp); font-size: 18px; font-weight: 600; color: var(--paper); flex: 1; } .exercise > header .mark { font-family: var(--mono); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--paper-3); background: none; border: none; border-left: 1px solid var(--rule); cursor: pointer; padding: 0 16px; min-height: 44px; } .exercise > header .mark:hover { color: var(--moss); background: var(--moss-fill); } .exercise > header .chev { color: var(--paper-3); font-size: 11px; } .exercise .body { padding: 18px 18px 4px; border-top: 1px solid var(--rule); } .exercise .body p, .exercise .body li { max-width: none; } .exercise.done { border-color: var(--moss-line); } .exercise.done > header .dot { color: var(--moss); } .exercise.done > header h4 { color: var(--moss); } .exercise.done > header .mark { color: var(--moss); } .exercise.done > header .mark::before { content: "✓ "; } .exercise.collapsed .body { display: none; } .pbody { counter-reset: ex; } .verify { margin: 6px -18px 0; padding: 13px 18px; background: color-mix(in srgb, var(--moss) 6%, transparent); border-top: 1px solid var(--rule); font-size: 15px; color: var(--paper-2); } .verify b { color: var(--moss); font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; } /* ═══════════════════ self-check: ruled rows ═══════════════════ */ .quiz { border-bottom: 1px solid var(--rule); } .quiz:first-of-type { border-top: 1px solid var(--rule); } .quiz > summary { list-style: none; cursor: pointer; padding: 14px 14px 14px 40px; font-size: 16px; color: var(--paper); position: relative; max-width: var(--measure); } .quiz > summary::-webkit-details-marker { display: none; } .quiz > summary::before { content: "?"; position: absolute; left: 14px; font-family: var(--mono); color: var(--copper); font-weight: 500; } .quiz > summary:hover { background: var(--tint-hi); } .quiz[open] > summary { color: var(--copper); } .quiz[open] > summary::before { content: "▾"; } .quiz .answer { padding: 4px 14px 16px 40px; font-size: 15.8px; color: var(--paper-2); max-width: var(--measure); border-left: 2px solid var(--rule-2); margin-left: 14px; } .quiz .answer p { max-width: none; } /* ═══════════════════ index rail ═══════════════════ */ .toc { position: sticky; top: 86px; font-size: 13px; max-height: calc(100vh - 120px); overflow-y: auto; padding-right: 6px; } .toc h4 { margin: 0 0 12px; color: var(--paper-3); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-family: var(--mono); font-weight: 400; padding-bottom: 8px; border-bottom: 1px solid var(--rule); } .toc a { display: block; color: var(--paper-3); padding: 5px 0 5px 14px; border: none; line-height: 1.45; border-left: 1px solid var(--rule); font-family: var(--sans); } .toc a:hover { color: var(--paper-2); border-left-color: var(--rule-2); } .toc a.active { color: var(--copper); border-left: 1px solid var(--copper); } .toc .mini { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); } .toc .mini .row { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; color: var(--paper-3); margin-bottom: 6px; letter-spacing: 1.2px; text-transform: uppercase; font-variant-numeric: tabular-nums; } .toc .mini .track { height: 3px; background: var(--surface-3); } .toc .mini .track i { display: block; height: 100%; background: var(--moss); } @media (max-width: 1180px) { .cols { grid-template-columns: minmax(0,1fr); } .toc { display: none; } } /* ═══════════════════ footers ═══════════════════ */ .docs li { margin-bottom: 9px; } .docs li b { color: var(--paper); font-weight: 600; } .pager { display: flex; gap: 2px; margin-top: 40px; border: 1px solid var(--rule); } .pager a { flex: 1; padding: 16px 18px; color: var(--paper-2); background: var(--surface); border: none; font-family: var(--sans); } .pager a + a { border-left: 1px solid var(--rule); } .pager a:hover { background: var(--surface-2); color: var(--paper); } .pager a .dir { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--paper-3); margin-bottom: 6px; } .pager a.next { text-align: right; } .pager a.ghost { visibility: hidden; } .finish { margin-top: 30px; border: 1px solid var(--rule); border-left: 2px solid var(--copper-dim); padding: 17px 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background: var(--surface); } .finish .txt { font-size: 14.8px; color: var(--paper-2); flex: 1; max-width: 62ch; } button.tbtn { font-family: var(--mono); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer; background: transparent; color: var(--paper-2); border: 1px solid var(--rule-2); padding: 9px 16px; } button.tbtn:hover { border-color: var(--copper); color: var(--copper); } button.tbtn.on { color: var(--moss); border-color: var(--moss-line); background: var(--moss-fill); } button.tbtn.ghost { color: var(--paper-3); } a.tbtn { font-family: var(--mono); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; border: 1px solid var(--rule-2); padding: 9px 16px; color: var(--paper-2); } a.tbtn:hover { border-color: var(--copper); } /* progress export/import */ .finish .ionote, .finish .iobox { flex-basis: 100%; } .finish .ionote { font-family: var(--mono); font-size: 12px; color: var(--copper); margin-top: -4px; } .finish .iobox textarea { width: 100%; margin-top: 10px; font-family: var(--mono); font-size: 12px; line-height: 1.55; color: var(--paper-2); background: var(--ink-sunk); border: 1px solid var(--rule-2); padding: 9px 11px; resize: vertical; } /* ═══════════════════ overlays ═══════════════════ */ .overlay { position: fixed; inset: 0; z-index: 60; background: var(--scrim); backdrop-filter: blur(3px); display: none; align-items: flex-start; justify-content: center; padding: 92px 20px 20px; } .overlay.open { display: flex; } .palette { width: min(760px,100%); background: var(--surface); border: 1px solid var(--rule-2); box-shadow: 0 30px 80px var(--shadow); } .palette .pin { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--rule); } .palette .pin span { color: var(--copper); font-family: var(--mono); } .palette input { flex: 1; background: transparent; border: none; outline: none; color: var(--paper); font-family: var(--sans); font-size: 16px; } .palette ul { list-style: none; margin: 0; padding: 4px 0; max-height: 56vh; overflow-y: auto; } .palette li { padding: 9px 18px; display: flex; gap: 14px; align-items: baseline; cursor: pointer; border-left: 2px solid transparent; } .palette li .pid { color: var(--copper); font-family: var(--mono); font-size: 12px; width: 42px; flex: none; letter-spacing: 1px; } .palette li .ptitle { color: var(--paper); flex: 1; font-size: 14.8px; } .palette li .pmeta { color: var(--paper-3); font-size: 11px; font-family: var(--mono); } .palette li.sel { background: var(--copper-fill); border-left-color: var(--copper); } .palette li mark { background: transparent; color: var(--brass); } .palette .hint { padding: 9px 18px; border-top: 1px solid var(--rule); color: var(--paper-3); font-size: 11.5px; font-family: var(--mono); } .helpcard { width: min(660px,100%); background: var(--surface); border: 1px solid var(--rule-2); padding: 26px 28px; box-shadow: 0 30px 80px var(--shadow); } .helpcard h3 { margin: 0 0 18px; font-family: var(--mono); font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--paper-3); font-weight: 400; } .helpcard dl { display: grid; grid-template-columns: 116px 1fr; row-gap: 11px; margin: 0; align-items: baseline; } .helpcard dt { font-family: var(--mono); color: var(--copper); font-size: 13px; } .helpcard dd { margin: 0; color: var(--paper-2); font-size: 14.5px; } /* ═══════════════════ dashboard ═══════════════════ */ .grid-domains { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 18px; margin: 0 0 22px; } .dcard { background: var(--surface); border: 1px solid var(--rule); display: flex; flex-direction: column; } .dcard > header { padding: 13px 16px; border-bottom: 1px solid var(--rule); display: flex; align-items: center; gap: 11px; background: var(--ink-sunk); } .dcard > header h3 { margin: 0; font-family: var(--disp); font-size: 17px; font-weight: 600; } .dcard > header .w { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--paper-3); font-variant-numeric: tabular-nums; } .dcard ol { list-style: none; margin: 0; padding: 4px 0; flex: 1; } .dcard li a { display: flex; gap: 12px; align-items: baseline; padding: 7px 16px; color: var(--paper-2); font-size: 14.4px; border: none; } .dcard li a:hover { background: var(--tint-hi); color: var(--paper); } .dcard li a .sid { font-family: var(--mono); font-size: 12px; color: var(--copper); width: 28px; flex: none; } .dcard li a .st { flex: 1; } .dcard li a .tick { width: 8px; height: 8px; border: 1px solid var(--paper-3); flex: none; align-self: center; } .dcard li a.done .tick { background: var(--moss); border-color: var(--moss); } .dcard li a.done .st { color: var(--paper-3); } .dcard li a.done .sid { color: var(--paper-3); } .dcard .foot { padding: 11px 16px; border-top: 1px solid var(--rule); display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11px; color: var(--paper-3); font-variant-numeric: tabular-nums; } .dcard .foot .track { flex: 1; height: 3px; background: var(--surface-3); } .dcard .foot .track i { display: block; height: 100%; background: var(--moss); } /* ═══════════════════ mock exam ═══════════════════ */ #score-domains { grid-template-columns: repeat(auto-fit, minmax(min(126px, 100%), 1fr)); margin-top: 18px; } #score-domains .wcell { gap: 3px; } .examtimer { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; } .examtimer .clock { font-family: var(--disp); font-weight: 600; font-size: 54px; letter-spacing: 1px; color: var(--paper); line-height: 1; font-variant-numeric: tabular-nums; } .examtimer .clock.low { color: var(--brass); } .examtimer .clock.out { color: var(--rust); } .examtimer .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--paper-3); } .examtimer .score { font-size: 14px; color: var(--paper-2); max-width: 40ch; } .task { margin: 0 0 2px; border: 1px solid var(--rule); background: var(--surface-2); } .task + .task { border-top: none; } .task > header { display: flex; align-items: stretch; } .task > header .dot { width: 38px; min-height: 44px; flex: none; cursor: pointer; background: none; border: none; border-right: 1px solid var(--rule); position: relative; } .task > header .dot::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 11px; height: 11px; border: 1px solid var(--paper-3); } .task > header .dot:hover::before { border-color: var(--moss); } .task > header .disc { flex: 1; display: flex; align-items: center; gap: 13px; padding: 11px 16px; cursor: pointer; background: none; border: none; color: inherit; font: inherit; text-align: left; } .task > header .disc:hover { background: var(--tint-hi); } .task > header .tno { font-family: var(--mono); font-size: 12px; color: var(--copper); } .task > header .tt { flex: 1; font-size: 15px; } .task > header .pts { font-family: var(--mono); font-size: 11px; color: var(--paper-3); letter-spacing: .6px; } .task.done { border-color: var(--moss-line); } .task.done > header .dot::before { background: var(--moss); border-color: var(--moss); } .task .body { padding: 16px 18px 4px; border-top: 1px solid var(--rule); } .task .body p { max-width: none; } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--surface-3); border: 4px solid var(--ink); } ::-webkit-scrollbar-thumb:hover { background: var(--rule-2); } /* ═══════════════════ interactive figures ═══════════════════ */ .wfig { margin: 26px 0 24px; border: 1px solid var(--rule-2); background: var(--surface-2); } .whead { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 11px 18px; border-bottom: 1px solid var(--rule); background: var(--ink-sunk); } .whead .wtitle { font-family: var(--disp); font-size: 17px; font-weight: 600; color: var(--paper); } .whead .whint { font-family: var(--mono); font-size: 10.5px; color: var(--paper-3); margin-left: auto; letter-spacing: .4px; } .wbody { padding: 17px 18px; display: flex; flex-direction: column; gap: 16px; } .wctls { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 10px 24px; } .wctls-row { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; } .wctl { display: grid; grid-template-columns: 132px 1fr 66px; align-items: center; gap: 12px; font-size: 13px; } .wctl .wlbl { font-family: var(--mono); font-size: 11px; color: var(--paper-3); letter-spacing: .3px; } .wctl .wval { font-family: var(--mono); font-size: 12px; color: var(--copper); text-align: right; font-variant-numeric: tabular-nums; } .wfig input[type=range] { -webkit-appearance: none; appearance: none; height: 2px; background: var(--rule-2); outline: none; width: 100%; } .wfig input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; background: var(--copper); border: 2px solid var(--surface-2); cursor: pointer; border-radius: 50%; } .wfig input[type=range]::-moz-range-thumb { width: 11px; height: 11px; background: var(--copper); border: 2px solid var(--surface-2); cursor: pointer; border-radius: 50%; } .wfig input[type=range]:disabled { opacity: .35; } .wfig input[type=range]:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--copper) 30%, transparent); } .wtog { display: flex; align-items: center; gap: 10px; font-size: 13.4px; color: var(--paper-2); cursor: pointer; } .wtog input { accent-color: var(--copper); width: 15px; height: 15px; cursor: pointer; } .wbtn { font-family: var(--mono); font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; padding: 7px 14px; background: transparent; color: var(--paper-2); border: 1px solid var(--rule-2); } .wbtn:hover { border-color: var(--copper); color: var(--copper); } .wbtn.danger:hover { border-color: var(--rust); color: var(--rust); } .wbtn.ghost { color: var(--paper-3); } .wout { display: flex; flex-direction: column; gap: 13px; } .wgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(186px, 100%), 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .wcell { background: var(--surface); padding: 11px 14px; display: flex; flex-direction: column; gap: 5px; min-width: 0; } .wcell.wspan { grid-column: 1 / -1; } .wk { font-family: var(--mono); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--paper-3); } .wv { font-size: 13.6px; color: var(--paper-2); } .wv.wnum { font-family: var(--disp); font-size: 22px; font-weight: 600; color: var(--paper); font-variant-numeric: tabular-nums; } .wv .u { font-family: var(--mono); font-size: 12px; color: var(--paper-3); font-weight: 400; } .wverdict { display: inline-block; align-self: flex-start; font-family: var(--mono); font-size: 12px; padding: 2px 10px; border: 1px solid var(--rule-2); color: var(--paper-2); letter-spacing: .4px; } .wverdict.ok { color: var(--moss); border-color: var(--moss-line); background: var(--moss-fill); } .wverdict.warn { color: var(--brass); border-color: var(--brass-line); background: var(--brass-fill); } .wverdict.bad { color: var(--rust); border-color: var(--rust-line); background: var(--rust-fill); } .wbar { display: block; height: 4px; background: var(--surface-3); overflow: hidden; margin-top: 5px; } .wbar i { display: block; height: 100%; background: var(--copper); transition: width .18s ease; } .wbar i.warn { background: var(--brass); } .wbar i.bad { background: var(--rust); } .wbar i.green { background: var(--moss); } .wbar i.blue { background: var(--verdigris); } .wbar i.dim { background: var(--rule-2); } .wmeter, .wrow { display: grid; grid-template-columns: 100px 1fr; gap: 4px 14px; align-items: center; font-size: 13px; } .wmeter .wk, .wrow .wk { text-align: right; } .wmeter .wv, .wrow .wv { grid-column: 2; font-family: var(--mono); font-size: 11.5px; color: var(--paper-3); } .wstack { display: flex; flex-direction: column; gap: 11px; } .wtable { border: 1px solid var(--rule); background: var(--surface); } .wtr { display: grid; grid-template-columns: 1.4fr .6fr .8fr 1fr; gap: 12px; padding: 9px 14px; font-size: 13.2px; border-bottom: 1px solid var(--rule-soft); } .wtr:last-child { border-bottom: none; } .wtr.wth { font-family: var(--mono); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--paper-3); background: var(--ink-sunk); } .wtr.wtr-hit { background: var(--rust-fill); } .wtable .wtr span { min-width: 0; overflow-wrap: anywhere; } .wtr b.ok { color: var(--moss); } .wtr b.bad { color: var(--rust); } .wtr b.dimtext { color: var(--paper-3); } .wnote { font-size: 13.8px; color: var(--paper-2); background: var(--surface); border: 1px solid var(--rule); border-left: 2px solid var(--rule-2); padding: 11px 14px; } .wnote.ok { border-left-color: var(--moss); } .wnote.warn { border-left-color: var(--brass); } .wnote.bad { border-left-color: var(--rust); } .wnote b.ok { color: var(--moss); } .wnote b.bad { color: var(--rust); } .wproof { font-size: 12.5px; color: var(--paper-3); } .wproof code { font-family: var(--mono); color: var(--paper-2); } .wchips { display: flex; flex-wrap: wrap; gap: 2px; } .wchip { cursor: pointer; font-family: var(--mono); font-size: 11.5px; padding: 8px 13px; text-align: left; background: var(--surface); color: var(--paper-2); border: 1px solid var(--rule); display: flex; flex-direction: column; gap: 3px; letter-spacing: .3px; } .wchip .ch { font-size: 10.5px; color: var(--paper-3); } .wchip:hover { border-color: var(--rule-2); color: var(--paper); } .wchip.sel { border-color: var(--copper); color: var(--paper); background: var(--copper-fill); } .wchip.ok.sel { border-color: var(--moss); background: var(--moss-fill); } .wchip.warn.sel { border-color: var(--brass); background: var(--brass-fill); } .wchip.bad.sel { border-color: var(--rust); background: var(--rust-fill); } .wchip.small { flex-direction: row; padding: 5px 11px; } .wpick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .wpick .wlbl { font-family: var(--mono); font-size: 10.5px; color: var(--paper-3); letter-spacing: 1.2px; text-transform: uppercase; } .wsteps { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; } .wstep { padding: 5px 10px; border: 1px solid var(--rule); color: var(--paper-3); background: var(--surface); letter-spacing: .4px; } .wstep.done { color: var(--moss); border-color: var(--moss-line); } .wstep.cur { color: var(--copper); border-color: var(--copper); background: var(--copper-fill); } .wstep.aborted { color: var(--rust); border-color: var(--rust-line); } .warr { color: var(--rule-2); } .wsplit-bar { display: flex; height: 36px; border: 1px solid var(--rule); } .wsplit-bar i { display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11.5px; transition: width .25s ease; overflow: hidden; white-space: nowrap; letter-spacing: .4px; } .wsplit-bar i.stable { background: color-mix(in srgb, var(--verdigris) 18%, transparent); color: var(--verdigris-lit); } .wsplit-bar i.cnry { background: color-mix(in srgb, var(--copper) 22%, transparent); color: var(--copper-lit); } .wsvg { width: 100%; height: auto; display: block; } .wtl { display: flex; flex-direction: column; gap: 6px; } .wtl-track { position: relative; height: 28px; background: var(--surface); border: 1px solid var(--rule); } .wtl-track i { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 9px; font-family: var(--mono); font-size: 11px; overflow: hidden; white-space: nowrap; transition: .18s; letter-spacing: .3px; } .wtl-track i.cond { background: color-mix(in srgb, var(--verdigris) 18%, transparent); color: var(--verdigris-lit); } .wtl-track i.pend { background: color-mix(in srgb, var(--brass) 18%, transparent); color: var(--brass-lit); } .wtl-track i.fire { background: color-mix(in srgb, var(--rust) 20%, transparent); color: var(--rust-lit); } .wtl-track i.notif { background: color-mix(in srgb, var(--moss) 20%, transparent); color: var(--moss-lit); } .wtl-axis { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: var(--paper-3); padding: 0 2px; font-variant-numeric: tabular-nums; } .wpath { display: flex; flex-direction: column; gap: 2px; } .whop { display: grid; grid-template-columns: 196px 18px 1fr; align-items: baseline; gap: 12px; padding: 9px 14px; border: 1px solid var(--rule); background: var(--surface); font-size: 13.2px; } .whop .whop-n { font-family: var(--mono); font-size: 12.4px; color: var(--paper-2); } .whop .whop-s { font-weight: 700; } .whop .whop-note { color: var(--paper-3); } .whop.pass .whop-s { color: var(--moss); } .whop.fail { border-color: var(--rust-line); background: var(--rust-fill); } .whop.fail .whop-s { color: var(--rust); } .whop.fail .whop-n { color: var(--paper); } .whop.skip { opacity: .4; } .whop-arr { color: var(--rule-2); font-size: 11px; padding-left: 24px; line-height: 1; } .wlog { font-family: var(--mono); font-size: 12px; color: var(--paper-2); background: var(--ink-sunk); border: 1px solid var(--rule); padding: 11px 13px; display: flex; flex-direction: column; gap: 5px; } .wlog div:first-child { color: var(--copper); } @media (max-width: 620px) { .wctl { grid-template-columns: 1fr; } .wtr { grid-template-columns: 1fr; gap: 2px; } .whop { grid-template-columns: 1fr 18px; } .whop .whop-note { grid-column: 1 / -1; } } @media (prefers-reduced-motion: reduce) { .wbar i, .wsplit-bar i, .wtl-track i { transition: none; } } @media (max-width: 520px) { .wrap { padding: 22px 12px 90px; } .panel > .pbody { padding: 16px 13px 4px; } .panel > .phdr { padding: 10px 13px; } .wbody, .exercise .body, .task .body { padding-left: 12px; padding-right: 12px; } .whead { padding: 10px 13px; } .callout { padding: 18px 13px 12px; } .pagehead h1 { font-size: 30px; } .verify { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; } } /* ═══════════════════ print ═══════════════════ */ @media print { /* Ink on paper, whichever theme the screen was showing: the attribute selector has to be in here too, or a pinned theme would out-specify it. */ :root, :root[data-theme] { color-scheme: light; --ink: #fff; --ink-sunk: #f6f5f3; --surface: #fff; --surface-2: #fbfaf9; --surface-3: #eeece9; --rule: #d6d3ce; --rule-2: #b4b0aa; --paper: #14140F; --paper-2: #33322D; --paper-3: #5C5A54; --paper-hi: #000; --copper: #8A4B20; --verdigris: #14615B; --moss: #3D6B28; --brass: #6E5310; --rust: #93242A; --plum: #543C74; --copper-dim: #B0855F; --copper-lit: #6B3616; --verdigris-lit: #0E4B46; --moss-lit: #2E5220; --brass-lit: #5A4310; --rust-lit: #741B21; --code-fg: #16150F; --syn-cm: #5C5A54; --syn-str: #3D6B28; --syn-key: #1E4677; --syn-num: #8A3A3A; --tint: transparent; --tint-hi: transparent; --hair: transparent; --bar-1: #fff; --bar-2: #fff; --scrim: transparent; --shadow: transparent; --grain: 0; --a-line: 55%; --a-fill: 10%; } body::before { display: none; } .topbar, .toc, .overlay, .copy-btn, .pager, .finish, .stats, .widget, .wctls { display: none !important; } body { background: #fff; color: var(--paper); } a { color: var(--copper); } .panel, .cb, .diagram, .tbl-wrap, .exercise, .quiz, .wfig, .wcell, .wnote { background: #fff; border-color: var(--rule); } article p code, article li code, article td code, .callout code, .quiz code, .verify code, .lede code { background: #f4f2ef; border-bottom-color: #cfcbc5; color: #14615B; } .exercise.collapsed .body { display: block !important; } details.quiz > .answer { display: block !important; } details.quiz > summary { color: var(--paper); } .cb pre, .cb pre code, .diagram { white-space: pre-wrap; overflow: visible; word-break: break-word; } .panel, .exercise, .callout, .cb, .quiz, tr { break-inside: avoid; } h1, h2, h3, h4 { break-after: avoid; } }