/* The machine view (checkpoint 18, D-144): our orange on black, uppercase, block-letter logo and mascot, scanlines, a
   line-by-line wipe on first paint, a human / machine switch. One look by design (a terminal), so no light theme.
   Copied to public/assets/mtz-machine.css by scripts/build.mjs. */
:root { --bg: #000; --ink: #f26625; --ink-hi: #ffb48c; --ink-lo: #9a3a10; --glow: 0 0 6px rgba(242, 102, 37, .38); --scan: rgba(0, 0, 0, .28); color-scheme: dark; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 13px/1.75 "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; text-transform: uppercase; letter-spacing: .01em; text-shadow: var(--glow); -webkit-font-smoothing: antialiased; }
.page { box-sizing: border-box; max-width: calc(92ch + 32px); margin: 0 auto; padding: 56px max(16px, env(safe-area-inset-right, 0px)) 140px max(16px, env(safe-area-inset-left, 0px)); }
.art { margin: 0; max-width: 100%; overflow: hidden; white-space: pre; letter-spacing: 0; text-transform: none; color: var(--ink); font: 400 min(12px, calc((min(100vw, 750px) - 36px) / (var(--art-cols) * .61))) / 1.25 ui-monospace, Menlo, "DejaVu Sans Mono", Consolas, monospace; }
.art[hidden] { display: none; }
.art .s { color: var(--ink-lo); }
.art .m { color: #ffd9c4; }
.art .ms { color: #a85a35; }
.art .d { background: linear-gradient(90deg, #5a61ff, #a070ff, #ff6f8a); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.art .ds { color: #6a4fc0; }
nav.top { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 4px 16px; }
nav.top a { color: var(--ink); text-decoration: none; }
nav.top a[aria-current] { background: var(--ink); color: var(--bg); text-shadow: none; padding: 0 4px; margin: 0 -4px; }
nav.top a:hover, nav.top a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.kicker { margin: 28px 0 0; color: var(--ink-hi); font-weight: 500; }
.hash { margin: 6px 0 0; color: var(--ink-lo); }
.page-h1 { margin: 36px 0 0; font-family: inherit; font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--ink-hi); }
section, .content { margin-top: 36px; }
h2 { display: flex; align-items: center; gap: 10px; margin: 32px 0 14px; font-family: inherit; font-size: 13px; line-height: 1.4; font-weight: 500; color: var(--ink-lo); }
h2::before { content: "──"; }
h2::after { content: "──────────────────────────────────────────────────────────────────────────────────────────────────────────────"; flex: 1; overflow: hidden; white-space: nowrap; }
h3 { margin: 22px 0 6px; font-family: inherit; font-size: 13px; line-height: 1.5; font-weight: 500; color: var(--ink-hi); }
h3::before { content: "* "; color: var(--ink); }
p { margin: 0 0 12px; }
.content p { color: var(--ink); }
.q { color: var(--ink-hi); margin-bottom: 2px; }
.items { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.items li { display: grid; grid-template-columns: 2ch minmax(0, 1fr); }
.items li::before { content: "-"; color: var(--ink-lo); }
.img { color: var(--ink-lo); }
.tbl { overflow-x: auto; margin: 0 0 14px; }
.tbl pre { margin: 0; font: inherit; white-space: pre; }
.kv { display: grid; grid-template-columns: 16ch minmax(0, 1fr); margin: 0; }
.kv dt { color: var(--ink-lo); white-space: nowrap; overflow: hidden; }
.kv dt::after { content: " ............................"; }
.kv dd { margin: 0 0 4px; padding-left: 1ch; color: var(--ink-hi); min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .kv { grid-template-columns: minmax(0, 1fr); } .kv dt::after { content: ""; } .kv dd { padding-left: 0; margin-bottom: 10px; } }
a { color: var(--ink-hi); text-underline-offset: 3px; overflow-wrap: anywhere; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.note { color: var(--ink-lo); }
.eof { margin-top: 44px; color: var(--ink-lo); }
.eof a { color: var(--ink); }
.scan { pointer-events: none; position: fixed; inset: 0; z-index: 10; background: repeating-linear-gradient(var(--scan) 0 1px, transparent 1px 3px); }
.reveal { pointer-events: none; position: fixed; inset: 0; z-index: 9; background: var(--bg); animation: wipe 1.2s steps(28) forwards; }
@keyframes wipe { to { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .reveal { display: none; } }
.hm { position: fixed; z-index: 15; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); pointer-events: none; text-shadow: none; }
.hm div { pointer-events: auto; display: flex; border: 1px solid var(--ink-lo); border-radius: 999px; background: var(--bg); font: 500 13px/1 "IBM Plex Mono", ui-monospace, Menlo, monospace; }
.hm a, .hm span { padding: 8px 14px; border-radius: 999px; text-decoration: none; color: #ffd9c4; }
.hm span { background: var(--ink); color: var(--bg); }