/* Line Mode. The accent is amber because the subject is a terminal, and it marks exactly two things: a reply that carries a code, and the moment the client sends something other than what you typed. */ :root { --accent: #e4d820; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--la-font-ui); background: var(--la-page); color: var(--la-ink); line-height: var(--la-leading-body); -webkit-font-smoothing: antialiased; } main.byte { max-width: var(--la-measure); margin: 0 auto; padding: 3rem 1.25rem 3rem; } main.byte p, main.byte ul, main.byte ol, main.byte dl, main.byte h1, main.byte h2 { max-width: none; } /* The studio footer sat as a bare child of here — the only site in the family where it had no container to take a gutter from — so on a phone the machine list ran into both screen edges. It gets the same box the page content gets, so the footer's lines start where the page's lines start. */ footer { max-width: var(--la-measure); margin: 0 auto; padding: 0 1.25rem 3rem; } .lm-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .lm-kicker { margin-bottom: var(--la-space-2); color: var(--la-ink-dim); font-size: var(--la-text-sm); } .lm-kicker a { color: var(--la-ink-dim); } .lm-tier, .lm-era { display: inline-block; margin-left: 0.5rem; padding: 0.05rem 0.55rem; border: 1px solid var(--la-hairline-strong); border-radius: 999px; font-family: var(--la-font-mono); font-size: var(--la-text-xs); } .lm-tier { color: var(--accent); border-color: var(--accent); } h1 { font-size: var(--la-text-3xl, 2.6rem); margin-bottom: var(--la-space-3); } h2 { font-size: var(--la-text-xl, 1.4rem); margin-bottom: var(--la-space-3); } .lm-lede { margin-bottom: var(--la-space-4); color: var(--la-ink-dim); } /* The notebook is prose, and this stylesheet was written for an instrument. The reset zeroes every margin and the front page puts the spacing back on the two classes it uses for commentary, .lm-hint and .lm-caption. A page made of plain paragraphs got none of it and ran together in one block. Scoped so the front page is untouched, and the headings come down a step: 2.6rem is right for the word "Line Mode" and too loud for a page title that wraps to two lines at 1000px. */ body[data-page="notebook"] main.byte p { margin-bottom: var(--la-space-3); } body[data-page="notebook"] main.byte p:last-child { margin-bottom: 0; } body[data-page="notebook"] h1 { font-size: var(--la-text-2xl, 1.9rem); } body[data-page="notebook"] h2 { font-size: var(--la-text-lg, 1.2rem); } body[data-page="notebook"] .lm-panel { margin-top: var(--la-space-5); } body[data-page="notebook"] .la-sources { margin: 0; } .lm-personal { border-left: 3px solid var(--accent); padding-left: 0.9rem; } .lm-panel { margin-top: var(--la-space-6); } .lm-hint, .lm-caption { margin: var(--la-space-3) 0; color: var(--la-ink-dim); } .lm-caption { font-size: var(--la-text-sm); } .lm-hintline { margin: 0.4rem 0 0; color: var(--la-ink-dim); font-size: var(--la-text-sm); font-family: var(--la-font-mono); } .lm-presets { display: flex; flex-wrap: wrap; gap: var(--la-space-2); margin: var(--la-space-3) 0; } .lm-btn { padding: 0.45rem 0.9rem; border: 1px solid var(--la-hairline-strong); border-radius: var(--la-radius-sm, 4px); background: var(--la-raised); color: var(--la-ink); font-family: var(--la-font-mono); font-size: var(--la-text-sm); cursor: pointer; } .lm-btn:hover:not(:disabled) { border-color: var(--accent); } .lm-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); } .lm-btn:disabled { opacity: 0.45; cursor: default; } .lm-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---- the terminal ------------------------------------------------------- */ .lm-terminal { height: 20rem; overflow-y: auto; padding: 0.8rem 1rem; border: 1px solid var(--la-hairline-strong); border-radius: var(--la-radius-sm, 4px); background: var(--la-sunken); font-family: var(--la-font-mono); font-size: 0.8rem; line-height: 1.7; } .lm-terminal:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .lm-line { white-space: pre-wrap; word-break: break-word; } .lm-out-line { color: var(--la-ink); } .lm-in { color: var(--la-ink-dim); } /* Measured, not chosen: the hairline colour composites to about 1.6:1 on the terminal's background and axe was right to call it a serious violation. #78828d is 5.10:1 on #08090b, still visibly quieter than the transcript. */ .lm-meta { color: #78828d; font-style: italic; } /* A line the client changed on its way out. Marked by a rule as well as by colour, so it survives forced colours. */ .lm-out-line[data-mark="stuffed"] { color: var(--accent); border-left: 3px solid var(--accent); padding-left: 0.5rem; } /* A Gopher item type, which is one character and carries the meaning. The title attribute says what it means; this only makes it findable. */ .lm-in[data-type] { color: var(--la-ink); } .lm-form { display: flex; gap: var(--la-space-2); margin-top: var(--la-space-3); } .lm-input { flex: 1 1 auto; min-width: 0; padding: 0.5rem 0.7rem; border: 1px solid var(--la-hairline-strong); border-radius: var(--la-radius-sm, 4px); background: var(--la-sunken); color: var(--la-ink); font-family: var(--la-font-mono); font-size: var(--la-text-sm); } .lm-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---- readouts and tables ------------------------------------------------ */ .lm-readout { margin: var(--la-space-4) 0 0; } .lm-row { display: flex; justify-content: space-between; gap: var(--la-space-3); padding: 0.4rem 0; border-bottom: 1px solid var(--la-hairline); } .lm-row dt { color: var(--la-ink-dim); font-size: var(--la-text-sm); } .lm-num { font-family: var(--la-font-mono); color: var(--la-ink); margin: 0; word-break: break-word; } .lm-row.lm-strong dd { color: var(--accent); } .lm-table { width: 100%; border-collapse: collapse; font-size: var(--la-text-sm); } .lm-table th, .lm-table td { text-align: left; padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--la-hairline); } .lm-table thead th { font-size: var(--la-text-xs); letter-spacing: 0.05em; text-transform: uppercase; color: var(--la-ink-dim); font-weight: 600; } .lm-table tbody th, .lm-table td { font-family: var(--la-font-mono); font-size: 0.8rem; color: var(--la-ink-dim); font-weight: 400; } .lm-table tr[data-mark="yes"] th { border-left: 3px solid var(--accent); padding-left: 0.45rem; color: var(--accent); } .lm-table tr[data-mark="yes"] td { color: var(--accent); } .lm-table tr[data-mark="here"] { background: var(--la-raised); } .lm-table tr[data-mark="bad"] td { color: var(--accent); } .lm-table tr[data-mark="bad"] th { border-left: 3px solid var(--accent); padding-left: 0.45rem; } .lm-verdict, .lm-warn { margin: var(--la-space-3) 0 0; color: var(--la-ink-dim); font-size: var(--la-text-sm); } .lm-warn:empty { display: none; } .lm-warn:not(:empty) { border-left: 3px solid var(--accent); padding-left: 0.7rem; color: var(--la-ink); } .lm-honest details { margin: var(--la-space-3) 0; padding-bottom: var(--la-space-2); border-bottom: 1px solid var(--la-hairline); } .lm-honest summary { cursor: pointer; color: var(--la-ink); font-weight: 600; } .lm-honest summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .lm-honest p { margin-top: var(--la-space-2); color: var(--la-ink-dim); } .la-sources { list-style: none; } .la-sources li { margin: var(--la-space-2) 0; color: var(--la-ink-dim); font-size: var(--la-text-sm); } .la-sources a { color: var(--la-ink-dim); } .la-sources a:hover { color: var(--accent); } .la-tablewrap { overflow-x: auto; margin: var(--la-space-3) 0; } .la-tablewrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* The visible breadcrumb the BreadcrumbList JSON-LD describes. Structured data has to correspond to something a person can see; the first version of this page had the JSON-LD from the managed region and no nav, which is a Google policy violation and which the canonical audit caught. */ .breadcrumb { display: inline; } .breadcrumb a, .breadcrumb span { margin-right: 0.35rem; } .breadcrumb [aria-current="page"] { color: var(--la-ink); }