/* ── LEARN CHASSIS — the concept pages share one shell ───────────────────── Same brand system as the landing page: paper, ink, pastels, Anton shouts, Handjet machine voice, JetBrains Mono body. Each page tints itself with its piece's colors via --pc (pastel) / --ac (vibrant) / --deep (card hue) set on . Visuals are dashed PLACEHOLDERS this pass. */ /* ── headline font slots — switch pairs by editing --display / --accent in :root. All trialed faces stay registered below; pairs log: fonts/README.md ── */ @font-face { font-family: "Inkognito"; src: url("../fonts/Inkognito.woff2") format("woff2"), url("../fonts/Inkognito.woff") format("woff"); font-weight: 400; font-display: swap; } @font-face { font-family: "Florens"; src: url("../fonts/CSFlorensPixel-Regular.woff2") format("woff2"), url("../fonts/CSFlorensPixel-Regular.woff") format("woff"); font-weight: 400; font-display: swap; } @font-face { font-family: "Golem"; src: url("../fonts/CSGolem-Regular.woff2") format("woff2"), url("../fonts/CSGolem-Regular.woff") format("woff"); font-weight: 400; font-display: swap; } /* Braked: the Bold cut is registered at weight 400 on purpose — every display spot says 400, and the display face should land heavy like Anton did. */ @font-face { font-family: "Braked"; src: url("../fonts/BRAKED-Bold.woff") format("woff"); font-weight: 400; font-display: swap; } @font-face { font-family: "Braked"; src: url("../fonts/BRAKED-Semibold.woff") format("woff"); font-weight: 600; font-display: swap; } @font-face { font-family: "Warlock"; src: url("../fonts/UMWarlock.woff") format("woff"); font-weight: 400; font-display: swap; } @font-face { font-family: "Groothan"; src: url("../fonts/GroothanMixed-Regular.woff2") format("woff2"), url("../fonts/GroothanMixed-Regular.woff") format("woff"); font-weight: 400; font-display: block; } @font-face { font-family: "Groothan"; src: url("../fonts/GroothanMixed-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Muzzaro"; src: url("../fonts/Muzzaro.woff2") format("woff2"), url("../fonts/Muzzaro.woff") format("woff"); font-weight: 400; font-display: swap; } :root { --paper: #f7f6f1; --ink: #121316; --bloom: #13d943; --display: "Groothan", "Warlock", "Anton", sans-serif; --accent: "Groothan", "Muzzaro", "Handjet", sans-serif; --mono: "JetBrains Mono", monospace; --dim: #565b54; } * { box-sizing: border-box; margin: 0; } html { scroll-behavior: smooth; } body { background: var(--paper); color: var(--ink); font-family: var(--mono); overflow-x: hidden; } ::selection { background: var(--pc); } /* ── the house scrollbar — dotted track, solid 2px thumb, neutral ink ───── Standard across the whole site (page-level); terminals keep their piece-accent version of the same idea. */ html { scrollbar-width: thin; scrollbar-color: #565b54 transparent; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background-image: repeating-linear-gradient(180deg, rgba(86,91,84,.4) 0 4px, transparent 4px 9px); background-size: 2px 100%; background-position: center; background-repeat: no-repeat; } ::-webkit-scrollbar-thumb { background-color: #565b54; background-clip: padding-box; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; } /* ── hero band — a chapter opener, not a second landing hero ───────────── */ .lhero { position: relative; padding: 168px 7vw 64px; max-width: 1180px; margin: 0 auto; } .lhero .kicker { font-size: 11px; font-weight: 700; letter-spacing: .34em; text-transform: uppercase; color: var(--dim); margin-bottom: 20px; } .lhero .kicker b { color: var(--ac); } .lhero .row { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 34vw, 440px); gap: 72px; align-items: stretch; } .lhero .lcol { display: flex; flex-direction: column; min-height: 100%; } .lhero .lcol h1 { margin: 22px 0 auto; } /* auto bottom margin pins dek+meta to the base */ .lhero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(46px, 6.4vw, 92px); line-height: .84; max-width: 14ch; display: flex; flex-direction: column; align-items: flex-start; } /* the grotesque lines — tight between consecutive normal lines; the bubble line carries its own overlap. Extra normal lines stack at this same tight rhythm. */ .lhero h1 .ln { display: block; line-height: .9; } /* the bubble line — Groothan's UPPERCASE glyphs as a real SVG outline (nav.js swaps the text for paint-order:stroke SVG, fixed scale, Safari-safe). The fill is the page's category color (--pc); the ring weight is --bub-stroke. */ .lhero h1 .bub { position: relative; z-index: 2; margin: -.20em 0 -.16em; line-height: 1; color: var(--pc, #fff); --bub-stroke: 5.2; } .lhero h1 em, .lhero h1 i { font-family: var(--accent); font-style: normal; font-weight: 400; font-synthesis: none; } .lhero .dek { margin-top: 30px; font-size: 13px; line-height: 1.9; color: var(--dim); max-width: 58ch; } .lhero .dek b { color: var(--ink); } /* the hero art — retrofuturist plate in the house frame language: hard ink border, hard offset shadow, DNA strip fused along the bottom edge, the piece icon capsule overlapping the corner */ .lhero .heroart { position: relative; margin: 0; } .lhero .heroart .plate { display: flex; flex-direction: column; overflow: hidden; height: 100%; border: 2px solid var(--ink); border-radius: 16px; box-shadow: 9px 9px 0 var(--ink); } .lhero .heroart .plate img { display: block; width: 100%; height: 100%; flex: 1; object-fit: cover; } .lhero .heroart .plate .dnaMini { display: flex; height: 12px; border-top: 2px solid var(--ink); } .lhero .heroart .plate .dnaMini i { display: block; height: 100%; } .lhero .heroart .cap { position: absolute; left: -20px; top: -16px; display: flex; align-items: center; gap: 11px; padding-right: 16px; border-radius: 12px; overflow: hidden; border: 2px solid var(--ink); background: var(--pc); } .lhero .heroart .cap .face { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; background: rgba(18,19,22,.08); } .lhero .heroart .cap .face img { height: 26px; filter: invert(.92); } .lhero .heroart .cap span { font-family: var(--accent); font-weight: 400; font-synthesis: none; font-size: 19px; letter-spacing: .05em; color: var(--ink); } .lhero .meta { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; } .lhero .meta span { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border: 1.5px solid rgba(18,19,22,.35); border-radius: 5px; padding: 5px 9px; color: var(--dim); } .lhero .meta span.on { background: var(--pc); color: var(--ink); border-color: var(--pc); } /* ── body grid: sticky TOC rail + prose column ─────────────────────────── */ .lwrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 64px; max-width: 1180px; margin: 0 auto; padding: 24px 7vw 0; } .ltoc { position: sticky; top: 110px; align-self: start; padding-bottom: 40px; } .ltoc .t { font-family: var(--accent); font-weight: 400; font-synthesis: none; font-size: 15px; letter-spacing: .08em; margin-bottom: 14px; } .ltoc a { display: block; font-size: 11px; line-height: 1.5; color: var(--dim); text-decoration: none; padding: 6px 0 6px 14px; border-left: 2px dotted rgba(18,19,22,.25); } .ltoc a:hover { color: var(--ink); } .ltoc a.on { color: var(--ink); font-weight: 700; border-left: 2px solid var(--ac); } article { max-width: 680px; padding-bottom: 30px; min-width: 0; } article section { padding: 34px 0 14px; } article h2 { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.04; margin-bottom: 18px; scroll-margin-top: 110px; } article h2 em, article h2 i { font-family: var(--accent); font-style: normal; font-weight: 400; font-synthesis: none; } article h3 { font: 700 13px var(--mono); letter-spacing: .12em; text-transform: uppercase; margin: 26px 0 10px; color: var(--ink); } article p { font-size: 13px; line-height: 1.95; color: #3a3e38; margin-bottom: 14px; } article p b, article li b { color: var(--ink); } article a { color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--pc); } article a:hover { color: var(--ac); border-bottom-color: var(--ac); } article code { font-size: 12px; background: rgba(18,19,22,.07); padding: 2px 6px; border-radius: 4px; } article ul { list-style: none; padding: 0; margin: 4px 0 16px; display: flex; flex-direction: column; gap: 10px; } article ul li { font-size: 12.5px; line-height: 1.8; color: #3a3e38; padding-left: 20px; position: relative; } article ul li::before { content: "■"; position: absolute; left: 0; top: 4px; font-size: 9px; color: var(--ac); } /* the definition — a classic dictionary entry: serif voice on white, the one place the page deliberately changes typeface */ .defcard { background: #fff; border: 2px solid var(--ink); border-radius: 14px; box-shadow: 7px 7px 0 var(--ink); padding: 30px 36px; margin: 12px 0 24px; font-family: "EB Garamond", Georgia, serif; color: var(--ink); } .defcard .head { display: flex; align-items: baseline; gap: 13px; flex-wrap: wrap; } .defcard .hw { font-size: 37px; font-weight: 600; letter-spacing: .005em; line-height: 1; } .defcard .pr { font-size: 16.5px; color: #6a6f68; } .defcard .pos { font-style: italic; font-size: 16.5px; color: #6a6f68; } .defcard .rule { height: 3px; background: var(--pc); width: 64px; margin: 15px 0 14px; border-radius: 2px; } .defcard p { font-family: inherit; font-size: 18px; line-height: 1.66; color: #26282b; margin: 0; } .defcard p b { color: var(--ink); font-weight: 600; } .defcard .num { font-weight: 700; margin-right: 4px; } /* skippable-depth note — the ladder rung label */ .skip { font-family: var(--accent); font-weight: 400; font-synthesis: none; font-size: 14px; letter-spacing: .06em; color: var(--dim); border: 1.5px dashed rgba(18,19,22,.3); border-radius: 7px; display: inline-block; padding: 5px 11px; margin-bottom: 14px; } .skip b { color: var(--ac); } /* visual placeholder — dashed slot, pastel wash, Handjet caption */ .viz { border: 2px dashed rgba(18,19,22,.3); border-radius: 14px; background: color-mix(in srgb, var(--pc) 16%, var(--paper)); padding: 44px 30px; margin: 22px 0; text-align: center; } .viz .vt { font-family: var(--accent); font-weight: 400; font-synthesis: none; font-size: 17px; letter-spacing: .1em; text-transform: uppercase; } .viz .vd { font-size: 11px; color: var(--dim); margin-top: 8px; line-height: 1.7; } /* aside rail-quote — a held thought, accent bar (no tape quotes; voice lives in prose) */ .note { border-left: 3px solid var(--pc); padding: 4px 0 4px 16px; margin: 18px 0; } .note p { margin: 0; color: var(--dim); font-size: 12.5px; } .note p b { color: var(--ink); } /* comparison table */ .cmp { width: 100%; border-collapse: collapse; margin: 18px 0 10px; font-size: 12px; } .cmp th { font: 700 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--ink); } .cmp td { padding: 11px 12px; border-bottom: 1px solid rgba(18,19,22,.15); line-height: 1.6; color: #3a3e38; vertical-align: top; } .cmp td:first-child { font-weight: 700; color: var(--ink); white-space: nowrap; } .cmp .y { color: var(--ink); font-weight: 700; } .cmp .n { color: rgba(18,19,22,.35); } /* ── terminal block — the dark leaf, branded scrollbar, typed story ────── */ .termblock { background: var(--ink); border-radius: 16px; margin: 24px 0; overflow: hidden; } .termblock .tb-head { display: flex; align-items: center; gap: 10px; padding: 14px 22px 0; } .termblock .tb-head .sw { width: 24px; height: 24px; border-radius: 6px; background: var(--pc); display: inline-flex; align-items: center; justify-content: center; } .termblock .tb-head .sw img { height: 13px; filter: invert(.92); } .termblock .tb-head span { font: 700 10px var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--pc); } .termblock .tb-wrap { position: relative; padding: 18px 30px 24px 22px; } .lterm { font: 400 12.5px var(--mono); line-height: 2.05; color: #9ba095; max-height: 380px; overflow-y: auto; padding-right: 12px; scrollbar-width: none; } .lterm::-webkit-scrollbar { display: none; } .lterm .ln { white-space: pre-wrap; word-break: break-word; } .lterm .ps { color: var(--pc); font-weight: 700; } .lterm .cmd { color: var(--paper); font-weight: 700; } .lterm .ok { color: var(--ac); } .lterm .dim { color: #6a7064; } .lterm .hi { color: var(--paper); } .lterm .q { color: var(--pc); } .lterm .caret { display: inline-block; width: 7px; height: 13px; background: var(--paper); vertical-align: -2px; animation: blink 1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } .lscroll { position: absolute; top: 18px; bottom: 24px; right: 14px; width: 2px; background-image: repeating-linear-gradient(180deg, rgba(247,246,241,.22) 0 4px, transparent 4px 9px); } .lscroll .thumb { position: absolute; left: 0; width: 2px; background: var(--ac); } /* ── FAQ — flat rows, hard plus ────────────────────────────────────────── */ .faq details { border-bottom: 1px solid rgba(18,19,22,.18); } .faq details:first-of-type { border-top: 2px solid var(--ink); } .faq summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 14px; font: 700 13px var(--mono); padding: 17px 4px; color: var(--ink); } .faq summary::-webkit-details-marker { display: none; } .faq summary::before { content: "+"; font-family: var(--accent); font-weight: 400; font-synthesis: none; font-size: 19px; color: var(--ac); flex: 0 0 auto; } .faq details[open] summary::before { content: "–"; } .faq details p { padding: 0 4px 18px 33px; margin: 0; } /* ── footer: next steps + sibling pager ────────────────────────────────── */ .lnext { padding: 30px 0 10px; } .lnext .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; } .lnext .cards a { display: flex; align-items: center; gap: 14px; text-decoration: none; border: none; background: rgba(255,255,255,.6); border: 1.5px solid rgba(18,19,22,.18); border-radius: 12px; padding: 16px 18px; font: 700 12px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); transition: transform .15s ease; } .lnext .cards a:hover { transform: translateY(-2px); border-color: var(--ink); } .lnext .cards a .sw { width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; } .lnext .cards a .sw img { height: 17px; filter: invert(.92); } .lnext .cards a small { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--dim); display: block; margin-top: 3px; } .lnext .cards a .go { margin-left: auto; color: var(--ac); } .lnext .cards a > div small { font-size: 10.5px; } .lfoot { max-width: 1180px; margin: 50px auto 0; padding: 0 7vw 46px; } .lfoot .strip { display: flex; height: 14px; border-radius: 4px; overflow: hidden; margin-bottom: 22px; } .lfoot .strip i { display: block; height: 100%; } .lfoot .row { display: flex; justify-content: space-between; align-items: center; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); } .lfoot .row a { color: var(--ink); text-decoration: none; font-weight: 700; } .lfoot .row a:hover { color: var(--ac); } @media (max-width: 1000px) { .lwrap { grid-template-columns: 1fr; gap: 0; } .ltoc { display: none; } .lhero .row { grid-template-columns: 1fr; gap: 48px; } .lhero .heroart { order: -1; max-width: 420px; } .lnext .cards { grid-template-columns: 1fr; } } /* ── architectural diagrams — the empties, filled. White plate, ink lines, mono labels, pastel fills; pure HTML/CSS, no runtime. ─────────────────── */ .diag { border: 2px solid var(--ink); border-radius: 14px; background: #fff; padding: 30px 28px 20px; margin: 24px 0; } .diag .dcap { margin-top: 22px; text-align: center; font: 700 10px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); } .diag .dcap b { color: var(--ac); font-weight: 700; } .diag .lbl { font: 700 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); } .diag .sub { font: 400 10.5px/1.6 var(--mono); color: var(--dim); } /* the dashed file shell (a workbook drawn as its outline) */ .d-file { border: 2px dashed rgba(18,19,22,.45); border-radius: 12px; padding: 20px 16px 12px; position: relative; } .d-file > .ftag { position: absolute; top: -9px; left: 16px; background: #fff; padding: 0 8px; font: 700 11px var(--mono); letter-spacing: .05em; } .d-row { display: flex; align-items: center; gap: 16px; padding: 10px 6px; } .d-row + .d-row { border-top: 1px dotted rgba(18,19,22,.3); } .d-chip { flex: 0 0 128px; text-align: center; border: 1.5px solid var(--ink); border-radius: 7px; padding: 8px 6px; font: 700 10px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); } .d-row .sub { flex: 1; } /* the strip of five faces */ .d-strip { display: flex; gap: 12px; flex-wrap: wrap; } .d-card { flex: 1 1 96px; border: 1.5px solid var(--ink); border-radius: 10px; overflow: hidden; text-align: center; background: #fff; } .d-card .face { height: 54px; display: flex; align-items: center; justify-content: center; gap: 5px; font: 700 17px var(--mono); color: var(--ink); } .d-card .face i { display: block; border-radius: 2px; } .d-card .lbl { display: block; border-top: 1.5px solid var(--ink); padding: 7px 4px 6px; font-size: 9px; letter-spacing: .08em; } /* the cutaway room */ .d-os { border: 2px dashed rgba(18,19,22,.45); border-radius: 12px; padding: 26px 18px 16px; position: relative; } .d-os > .ftag { position: absolute; top: -9px; left: 16px; background: #fff; padding: 0 8px; font: 700 11px var(--mono); letter-spacing: .05em; color: var(--dim); } .d-room { border: 2px solid var(--ink); border-radius: 10px; padding: 16px 14px 14px; position: relative; } .d-room > .ftag { position: absolute; top: -9px; left: 14px; background: #fff; padding: 0 8px; font: 700 11px var(--mono); letter-spacing: .05em; } .d-cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; } .d-cell { border: 1.5px solid var(--ink); border-radius: 8px; padding: 11px 10px; } .d-cell .sub { display: block; margin-top: 3px; color: #41463f; } /* the dock */ .d-dock { display: flex; flex-direction: column; align-items: center; } .d-filechip { border: 2px solid var(--ink); border-radius: 10px; padding: 10px 24px; font: 700 11.5px var(--mono); letter-spacing: .05em; background: #fff; box-shadow: 4px 4px 0 var(--ink); } .d-stem { width: 2px; height: 20px; background-image: repeating-linear-gradient(180deg, var(--ink) 0 4px, transparent 4px 8px); } .d-engine { display: flex; align-items: center; gap: 22px; background: var(--ink); color: var(--paper); border-radius: 12px; padding: 13px 24px; } .d-engine .lbl { color: var(--paper); } .d-engine .place { font: 400 10px var(--mono); color: var(--pc); letter-spacing: .06em; } .d-lights { display: flex; gap: 16px; } .d-light { display: flex; flex-direction: column; align-items: center; } .d-light .chip { border: 1.5px solid var(--ink); border-radius: 7px; padding: 7px 13px; font: 700 10px var(--mono); letter-spacing: .05em; text-transform: uppercase; } /* the hex stack */ .d-levels { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin-left: 8px; } .d-level { display: flex; align-items: center; gap: 20px; } .d-level .hexo { width: 62px; height: 54px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: var(--ink); } .d-level .hexi { width: 56px; height: 48px; display: flex; align-items: center; justify-content: center; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); font: 700 9px var(--mono); letter-spacing: .04em; } .d-level + .d-level { margin-top: -2px; } .d-levelstem { width: 2px; height: 18px; margin-left: 30px; background-image: repeating-linear-gradient(180deg, var(--ink) 0 4px, transparent 4px 8px); } @media (max-width: 700px) { .d-cells { grid-template-columns: 1fr; } .d-chip { flex-basis: 104px; } } /* ── "open one up" — the live download + the downloads-corner callout ──── */ .wbdl { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; margin: 20px 0 10px; } .wbdl .dlbtn { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; border-bottom: none; font: 700 12.5px var(--mono); letter-spacing: .02em; color: var(--paper) !important; background: var(--ink); padding: 13px 20px; border-radius: 10px; box-shadow: 5px 5px 0 var(--pc); transition: transform .15s ease; } .wbdl .dlbtn:hover { transform: translateY(-2px); border-bottom: none; } .wbdl .dlbtn svg { height: 14px; width: auto; display: block; } .wbdl .dlsub { font-size: 11px; color: var(--dim); } .dlhint { position: fixed; top: 16px; right: 20px; z-index: 60; max-width: 270px; display: none; align-items: flex-start; gap: 11px; background: var(--paper); border: 2px solid var(--ink); border-radius: 12px; box-shadow: 5px 5px 0 var(--ink); padding: 13px 16px 13px 14px; font: 400 11.5px/1.65 var(--mono); color: #3a3e38; } .dlhint.on { display: flex; animation: hintIn .25s ease; } .dlhint b { color: var(--ink); } .dlhint .arr { font-size: 17px; line-height: 1; color: var(--ac); animation: hintBob 1.1s ease infinite; } @keyframes hintIn { from { opacity: 0; transform: translateY(-8px); } } @keyframes hintBob { 50% { transform: translateY(-4px); } } @media (max-width: 700px) { .dlhint { left: 20px; max-width: none; } } /* ── learn dropdown tier 2 + glyph swatches + org sample block ─────────── */ .lnext .cards a .sw b { font: 700 13px var(--mono); color: var(--ink); } .lhero .heroart .cap .face b { font: 700 22px var(--mono); color: var(--ink); } pre.orgsample { background: #fff; border: 2px solid var(--ink); border-radius: 12px; max-width: 100%; padding: 18px 20px; margin: 16px 0; font: 400 12px/1.9 var(--mono); color: var(--ink); overflow-x: auto; white-space: pre; } pre.orgsample i { color: var(--dim); font-style: normal; } /* ── mobile ──────────────────────────────────────────────────────────── */ @media (max-width: 820px) { .lhero { padding-top: 120px; } .lhero h1 { font-size: clamp(40px, 11.5vw, 54px); line-height: 1; } .lhero h1 .bub { margin: -.16em 0 -.13em; } .d-row { flex-wrap: wrap; row-gap: 6px; } .cmp-wrap, .faq, article section { min-width: 0; } .cmp { display: block; overflow-x: auto; } .d-lights { flex-wrap: wrap; justify-content: center; row-gap: 10px; } .d-engine { flex-direction: column; gap: 6px; text-align: center; padding: 12px 18px; } pre.orgsample { font-size: 10.5px; } .wbdl .dlbtn { font-size: 11.5px; padding: 12px 14px; } } /* reading state — the TOC is quietly an org task list: sections you've read flip to done and the page remembers across visits */ .ltoc a.done { color: rgba(86,91,84,.55); } .ltoc a.done::after { content: " ✓"; color: var(--ac); font-weight: 700; }