/* Developer hub — dark. Design tokens come from the linked ak-design dev bundle (see index.html). */

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--fg1); font-family: var(--font-body); }

.app { min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- Nav ---------- */
.dh-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px;
  background: rgba(21, 19, 29, 0.82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.dh-brand { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.dh-brand img { height: 30px; display: block; }
.dh-brand b { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--fg1); letter-spacing: -0.01em; }
.dh-nav .links { display: flex; gap: 22px; }
.dh-nav .links a { font-family: var(--font-mono); font-size: 13px; color: var(--fg2); text-decoration: none; cursor: pointer; }
.dh-nav .links a:hover { color: var(--accent); }
.dh-nav .links a.active { color: var(--accent); }
.dh-nav .right { display: flex; align-items: center; gap: 14px; }
.dh-switch { display: flex; gap: 0; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; }
.dh-switch button { font-family: var(--font-mono); font-size: 12px; padding: 6px 11px; background: transparent; color: var(--fg2); border: 0; cursor: pointer; }
.dh-switch button.on { background: var(--accent); color: var(--fg-on-accent); }
.dh-personal { font-family: var(--font-mono); font-size: 12px; color: var(--accent-2); text-decoration: none; border: 1px solid var(--border-strong); border-radius: 8px; padding: 6px 11px; cursor: pointer; white-space: nowrap; }
.dh-personal:hover { border-color: var(--accent-2); }

.dh-page { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 40px 28px 80px; }

/* ---------- Section heading ---------- */
.dh-sec { display: flex; align-items: baseline; justify-content: space-between; margin: 44px 0 18px; }
.dh-sec h2 { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin: 0; color: var(--fg1); display: flex; align-items: center; gap: 10px; }
.dh-sec h2::before { content: ""; width: 12px; height: 18px; background: var(--accent); display: inline-block; box-shadow: 3px 0 0 var(--accent-2-soft); }
.dh-sec .hint { font-family: var(--font-mono); font-size: 12px; color: var(--fg3); }
.dh-eyebrow { font-family: var(--font-mono); font-size: 12px; color: var(--accent); letter-spacing: 0.04em; }

/* ---------- Terminal hero — random OS skin (mac / Win95·XP·7·10 / GNOME2·3·Ubuntu).
   Click the title bar for the hidden OS selector. ---------- */
.term { position: relative; border-radius: 6px; overflow: hidden; box-shadow: 6px 6px 0 #000; font-family: var(--font-mono); }
.term .bar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: default; user-select: none; position: relative; }
.term .dots { display: none; gap: 8px; }
.term .dots i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.term .ttl { font-size: 12px; white-space: nowrap; }
.term .caption { display: none; margin-left: auto; gap: 3px; align-items: center; }
.term .caption b { font-weight: 400; font-size: 11px; width: 22px; height: 18px; display: inline-flex; align-items: center; justify-content: center; }
.term .body { padding: 20px 20px 24px; font-size: 15px; line-height: 1.7; position: relative; }
.term .body .gap { height: 10px; }
.term .body .p { white-space: pre; }
.term .body .cursor { display: inline-block; width: 8px; height: 17px; vertical-align: -3px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.term .scanlines { display: none; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.16) 3px, rgba(0,0,0,0) 4px); mix-blend-mode: multiply; }

/* hidden OS selector — revealed by clicking the title bar */
.term .os-menu { position: absolute; top: calc(100% + 4px); left: 8px; z-index: 20; display: grid; gap: 1px; padding: 4px; background: #14121d; border: 1px solid var(--border-strong); border-radius: 6px; box-shadow: 0 14px 30px -10px rgba(0,0,0,.7); }
.term .os-menu button { font-family: var(--font-mono); font-size: 12px; text-align: left; padding: 5px 12px; background: none; border: 0; color: var(--fg2); cursor: pointer; border-radius: 4px; white-space: nowrap; }
.term .os-menu button:hover { background: var(--surface-2); color: var(--fg1); }
.term .os-menu button.on { color: var(--accent); }

/* macOS */
.term[data-os="macos"] { background: var(--bg-sunken); border: 1px solid #000; }
.term[data-os="macos"] .bar { background: #2b2733; justify-content: center; }
.term[data-os="macos"] .dots { display: flex; position: absolute; left: 12px; }
.term[data-os="macos"] .dots i:nth-child(1) { background: #ff5f56; }
.term[data-os="macos"] .dots i:nth-child(2) { background: #ffbd2e; }
.term[data-os="macos"] .dots i:nth-child(3) { background: #27c93f; }
.term[data-os="macos"] .ttl { color: #c9c4d6; }
.term[data-os="macos"] .body { background: var(--bg-sunken); }
.term[data-os="macos"] .p { color: var(--seagreen-300); } .term[data-os="macos"] .cmd { color: var(--fg1); } .term[data-os="macos"] .out { color: var(--fg2); } .term[data-os="macos"] .k { color: var(--accent); } .term[data-os="macos"] .cursor { background: var(--accent); }
.term[data-os="macos"] .scanlines { display: block; }

/* Windows 95 */
.term[data-os="win95"] { background: #c0c0c0; border: 2px solid #000; border-radius: 0; box-shadow: 6px 6px 0 rgba(0,0,0,.4); }
.term[data-os="win95"] .bar { background: linear-gradient(90deg,#000080,#1084d0); padding: 4px 4px 4px 8px; }
.term[data-os="win95"] .ttl { color: #fff; font-family: "MS Sans Serif", Tahoma, sans-serif; font-weight: 700; }
.term[data-os="win95"] .caption { display: flex; }
.term[data-os="win95"] .caption b { background: #c0c0c0; color: #000; width: 17px; height: 15px; border: 1px solid #fff; border-right-color: #000; border-bottom-color: #000; box-shadow: inset -1px -1px 0 #808080; }
.term[data-os="win95"] .body { background: #000; }
.term[data-os="win95"] .p, .term[data-os="win95"] .cmd, .term[data-os="win95"] .out { color: #c0c0c0; } .term[data-os="win95"] .k { color: #fff; font-weight: 700; } .term[data-os="win95"] .cursor { background: #c0c0c0; }

/* Windows XP */
.term[data-os="winxp"] { background: #ece9d8; border: 1px solid #0831d9; border-radius: 8px 8px 0 0; }
.term[data-os="winxp"] .bar { background: linear-gradient(180deg,#0058e6,#3f8cf3 9%,#0257e9 45%,#0257e9 90%,#0146b3); padding: 5px 6px 5px 10px; }
.term[data-os="winxp"] .ttl { color: #fff; font-family: "Trebuchet MS", Tahoma, sans-serif; font-weight: 700; text-shadow: 1px 1px 1px rgba(0,0,0,.45); }
.term[data-os="winxp"] .caption { display: flex; }
.term[data-os="winxp"] .caption b { color: #fff; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.5); border-radius: 3px; }
.term[data-os="winxp"] .caption b.close { background: #e14b35; }
.term[data-os="winxp"] .body { background: #000; }
.term[data-os="winxp"] .p, .term[data-os="winxp"] .cmd, .term[data-os="winxp"] .out { color: #c8c8c8; } .term[data-os="winxp"] .k { color: #fff; } .term[data-os="winxp"] .cursor { background: #c8c8c8; }

/* Windows 7 (aero) */
.term[data-os="win7"] { background: #dfe7f2; border: 1px solid #6fa8dc; border-radius: 8px 8px 0 0; }
.term[data-os="win7"] .bar { background: linear-gradient(180deg, rgba(232,242,253,.96), rgba(199,221,246,.96)); padding: 7px 8px 7px 12px; border-bottom: 1px solid #a9c7e8; }
.term[data-os="win7"] .ttl { color: #1f3a5f; font-family: "Segoe UI", sans-serif; }
.term[data-os="win7"] .caption { display: flex; }
.term[data-os="win7"] .caption b { color: #1f3a5f; border: 1px solid #9bb8de; border-radius: 3px; background: rgba(255,255,255,.55); }
.term[data-os="win7"] .caption b.close { background: #d6453b; color: #fff; border-color: #b03127; }
.term[data-os="win7"] .body { background: #0c0c0c; }
.term[data-os="win7"] .p, .term[data-os="win7"] .cmd, .term[data-os="win7"] .out { color: #cccccc; } .term[data-os="win7"] .k { color: #fff; } .term[data-os="win7"] .cursor { background: #cccccc; }

/* Windows 10 (PowerShell) */
.term[data-os="win10"] { background: #1f1f1f; border: 1px solid #2b2b2b; border-radius: 0; }
.term[data-os="win10"] .bar { background: #1f1f1f; padding: 6px 4px 6px 12px; }
.term[data-os="win10"] .ttl { color: #cccccc; font-family: "Segoe UI", sans-serif; }
.term[data-os="win10"] .caption { display: flex; }
.term[data-os="win10"] .caption b { color: #cccccc; }
.term[data-os="win10"] .caption b.close:hover { background: #e81123; color: #fff; }
.term[data-os="win10"] .body { background: #012456; }
.term[data-os="win10"] .p { color: #ffd75f; } .term[data-os="win10"] .cmd { color: #fff; } .term[data-os="win10"] .out { color: #d6d6d6; } .term[data-os="win10"] .k { color: #4ec9b0; } .term[data-os="win10"] .cursor { background: #eeeeee; }

/* GNOME 2 (classic) */
.term[data-os="gnome2"] { background: #d6d2c8; border: 1px solid #7a756b; border-radius: 5px 5px 0 0; }
.term[data-os="gnome2"] .bar { background: linear-gradient(180deg,#e9e6df,#cfcabf); padding: 6px 8px 6px 12px; border-bottom: 1px solid #9a958b; }
.term[data-os="gnome2"] .ttl { color: #2b2b2b; font-family: "DejaVu Sans","Segoe UI",sans-serif; }
.term[data-os="gnome2"] .caption { display: flex; }
.term[data-os="gnome2"] .caption b { color: #2b2b2b; border: 1px solid #9a958b; border-radius: 3px; background: #e9e6df; }
.term[data-os="gnome2"] .body { background: #ffffff; }
.term[data-os="gnome2"] .p { color: #1e7d1e; } .term[data-os="gnome2"] .cmd { color: #000; } .term[data-os="gnome2"] .out { color: #444; } .term[data-os="gnome2"] .k { color: #b03000; } .term[data-os="gnome2"] .cursor { background: #2e2e2e; }

/* GNOME 3 (Adwaita dark) */
.term[data-os="gnome3"] { background: #241f31; border: 1px solid #1c1726; border-radius: 12px 12px 0 0; }
.term[data-os="gnome3"] .bar { background: #2d2842; padding: 9px 10px 9px 14px; border-bottom: 1px solid #1c1726; justify-content: center; }
.term[data-os="gnome3"] .ttl { color: #e6e1f0; font-family: "Cantarell","Segoe UI",sans-serif; font-weight: 700; }
.term[data-os="gnome3"] .caption { display: flex; position: absolute; right: 10px; }
.term[data-os="gnome3"] .caption b.min, .term[data-os="gnome3"] .caption b.max { display: none; }
.term[data-os="gnome3"] .caption b.close { background: #3a3450; color: #e6e1f0; border-radius: 50%; width: 22px; height: 22px; }
.term[data-os="gnome3"] .body { background: #1d1b26; }
.term[data-os="gnome3"] .p { color: #8ff0a4; } .term[data-os="gnome3"] .cmd { color: #fff; } .term[data-os="gnome3"] .out { color: #c0bccc; } .term[data-os="gnome3"] .k { color: #99c1f1; } .term[data-os="gnome3"] .cursor { background: #d8d4e0; }

/* Ubuntu */
.term[data-os="ubuntu"] { background: #3a2d36; border: 1px solid #1f1a1d; border-radius: 7px 7px 0 0; }
.term[data-os="ubuntu"] .bar { background: linear-gradient(180deg,#504050,#3c2f38); padding: 8px 10px 8px 14px; }
.term[data-os="ubuntu"] .ttl { color: #fff; font-family: "Ubuntu","Segoe UI",sans-serif; }
.term[data-os="ubuntu"] .caption { display: flex; }
.term[data-os="ubuntu"] .caption b { color: #fff; }
.term[data-os="ubuntu"] .caption b.close { background: #e95420; color: #fff; border-radius: 50%; width: 18px; height: 18px; }
.term[data-os="ubuntu"] .body { background: #300a24; }
.term[data-os="ubuntu"] .p { color: #8ae234; } .term[data-os="ubuntu"] .cmd { color: #fff; } .term[data-os="ubuntu"] .out { color: #d3c6cf; } .term[data-os="ubuntu"] .k { color: #e95420; } .term[data-os="ubuntu"] .cursor { background: #eeeeee; }

/* ---------- “The other side” cross-link — rendered in the LIGHT palette ---------- */
.dh-other { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 40px; text-decoration: none; background: var(--paper); color: var(--ink-900); border: 2px solid var(--ink-900); border-radius: 0; box-shadow: 4px 4px 0 var(--punk-lilac); padding: 12px 16px; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.dh-other:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--punk-lilac); }
.dh-other .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: #6b558f; }
.dh-other h3 { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; margin: 2px 0 1px; color: var(--ink-900); }
.dh-other p { font-family: var(--font-body); font-size: 12.5px; color: #4b4666; margin: 0; max-width: 52ch; }
.dh-other .go { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: #1f7fb4; white-space: nowrap; }
.dh-other .pips { display: none; }

/* ---------- Magazine hero (Layout C) ---------- */
.mag { display: grid; grid-template-columns: 1.5fr 1fr; gap: 44px; align-items: center; }
.mag h1 { font-family: var(--font-display); font-size: clamp(44px, 6vw, 76px); line-height: 1; letter-spacing: -0.03em; margin: 14px 0 0; color: var(--fg1); }
.mag h1 .a { color: var(--accent); }
.mag p { font-size: 17px; color: var(--fg2); margin: 20px 0 0; max-width: 42ch; }
.mag .ctas { display: flex; gap: 12px; margin-top: 26px; }
.mag .logo { display: flex; justify-content: center; }
.mag .logo img { height: 230px; filter: drop-shadow(8px 8px 0 rgba(0,0,0,0.5)); }

/* ---------- Buttons ---------- */
.dh-btn { font-family: var(--font-body); font-size: 14px; font-weight: 600; border: 0; padding: 11px 18px; border-radius: 10px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast); }
.dh-btn.primary { background: var(--accent); color: var(--fg-on-accent); }
.dh-btn.primary:hover { transform: translateY(-1px); background: var(--accent-hover); }
.dh-btn.ghost { background: transparent; color: var(--fg1); border: 1px solid var(--border-strong); }
.dh-btn.ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Stat tiles ---------- */
.dh-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dh-tile { background: var(--bg-elevated); border: 3px solid var(--ink-900); box-shadow: 4px 4px 0 #000; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.dh-tile .ico { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.dh-tile .num { font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1; color: var(--fg1); letter-spacing: -0.02em; }
.dh-tile .cap { font-family: var(--font-mono); font-size: 11px; color: var(--fg3); }

/* ---------- Repo grid ---------- */
.dh-repos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dh-repo { background: var(--bg-elevated); border: 2px solid var(--ink-900); border-left: 5px solid var(--cat-color, var(--accent)); border-radius: 4px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; box-shadow: 4px 4px 0 #000; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.dh-repo:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 #000; }
.dh-repo .name { font-family: var(--font-mono); font-size: 14px; color: var(--accent); font-weight: 600; text-decoration: none; }
.dh-repo .name:hover { text-decoration: underline; }
.dh-repo .meta a { color: var(--fg3); text-decoration: none; }
.dh-repo .meta a:hover { color: var(--accent); }
.dh-repo .meta a.docs { color: var(--accent-2); }
.dh-repo .desc { font-family: var(--font-body); font-size: 13px; color: var(--fg2); line-height: 1.45; margin: 0; flex: 1; }
.dh-repo .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.dh-repo .tag { font-family: var(--font-body); font-size: 11px; color: var(--accent-2); background: var(--accent-2-soft); border-radius: 999px; padding: 2px 9px; }
.dh-repo .meta { display: flex; gap: 14px; align-items: center; font-family: var(--font-mono); font-size: 12px; color: var(--fg3); }
.dh-repo .lang { display: flex; align-items: center; gap: 6px; }
.dh-repo .dot { width: 10px; height: 10px; border-radius: 999px; }
/* private client work (case study, no public repo): dashed border as a STYLE cue, so the
   category-coloured left stripe stays the dominant colour signal. */
.dh-repo.is-private { border-top-style: dashed; border-right-style: dashed; border-bottom-style: dashed; }
.dh-repo .client-tag { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-2); background: var(--accent-2-soft); border-radius: 999px; padding: 2px 8px; align-self: flex-start; }
.dh-repo span.name { font-family: var(--font-mono); font-size: 14px; color: var(--accent); font-weight: 600; }
/* category colour chip (hue from ak-design --viz-* via --cat-color) */
.dh-repo .cat-chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.03em; color: var(--fg3); align-self: flex-start; }
.dh-repo .cat-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--cat-color, var(--accent)); }

/* ---------- Data panel ---------- */
.dh-data { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
.dh-panel { background: var(--bg-elevated); border: 2px solid var(--ink-900); border-radius: 4px; padding: 18px; box-shadow: 4px 4px 0 #000; }
.dh-panel h3 { font-family: var(--font-mono); font-size: 13px; color: var(--fg2); margin: 0 0 14px; font-weight: 500; letter-spacing: 0.04em; }
.dh-bars { display: flex; align-items: flex-end; gap: 10px; height: 150px; }
.dh-bars .b { flex: 1; border-radius: 5px 5px 0 0; position: relative; }
.dh-bars .b span { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-family: var(--font-mono); font-size: 10px; color: var(--fg3); }
.dh-legend { display: flex; flex-direction: column; gap: 12px; }
.dh-legend .row { display: flex; align-items: center; gap: 10px; }
.dh-legend .sw { width: 12px; height: 12px; border-radius: 3px; }
.dh-legend .lbl { font-family: var(--font-body); font-size: 13px; color: var(--fg1); flex: 1; }
.dh-legend .val { font-family: var(--font-mono); font-size: 13px; color: var(--fg2); }
.spark { width: 100%; height: 54px; display: block; }

/* Reading & playing card → shared/reading-playing.css (.rp-*), linked in index.html. */

/* ---------- Footer ---------- */
.dh-foot { border-top: 1px solid var(--border); padding: 26px 28px 44px; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-family: var(--font-mono); font-size: 12px; color: var(--fg3); flex-wrap: wrap; }
.dh-foot a { color: var(--accent); text-decoration: none; }
.dh-foot .sig { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--fg2); }
.dh-foot .ai-note { opacity: 0.7; }

/* ---------- plain toggle button ---------- */
.dh-plain { font-family: var(--font-mono); font-size: 12px; background: transparent; color: var(--fg2); border: 1px solid var(--border-strong); border-radius: 8px; padding: 6px 11px; cursor: pointer; white-space: nowrap; }
.dh-plain:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- writing: post list + article ---------- */
.dh-posts { display: flex; flex-direction: column; gap: 12px; }
.dh-post { display: grid; grid-template-columns: 110px 1fr; gap: 4px 18px; background: var(--bg-elevated); border: 2px solid var(--ink-900); border-radius: 4px; padding: 14px 18px; cursor: pointer; box-shadow: 4px 4px 0 #000; text-decoration: none; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.dh-post:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 #000; }
.dh-post .date { grid-row: 1 / 3; font-family: var(--font-mono); font-size: 12px; color: var(--fg3); }
.dh-post .title { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--accent); letter-spacing: -0.01em; }
.dh-post .blurb { font-family: var(--font-body); font-size: 13px; color: var(--fg2); margin: 0; }
.dh-post .tags { grid-column: 2; display: flex; gap: 6px; flex-wrap: wrap; }
.dh-post .tag { font-family: var(--font-body); font-size: 11px; color: var(--accent-2); background: var(--accent-2-soft); border-radius: 999px; padding: 2px 9px; }
.dh-empty { font-family: var(--font-mono); font-size: 13px; color: var(--fg3); }
.dh-article { max-width: 68ch; margin: 0 auto; }
.dh-article .meta { display: flex; gap: 12px; align-items: center; font-family: var(--font-mono); font-size: 12px; color: var(--fg3); margin-bottom: 10px; }
.dh-article .meta .tag { color: var(--accent-2); }
.dh-article h1 { font-family: var(--font-display); font-size: clamp(32px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 24px; }
.dh-article .prose { font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--fg2); }
.dh-article .prose h2 { font-family: var(--font-display); font-size: 28px; color: var(--fg1); margin: 34px 0 12px; }
.dh-article .prose h3 { font-family: var(--font-display); font-size: 21px; color: var(--fg1); margin: 26px 0 10px; }
.dh-article .prose p { margin: 0 0 18px; }
.dh-article .prose a { color: var(--accent); }
.dh-article .prose pre { background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; overflow-x: auto; font-family: var(--font-mono); font-size: 14px; color: var(--fg1); }
.dh-article .prose pre code { background: none; border: 0; padding: 0; border-radius: 0; color: inherit; font-size: inherit; }
.dh-article .prose :where(p, li) code { font-family: var(--font-mono); background: var(--accent-soft); color: var(--accent); border-radius: var(--radius-sm); padding: 0.08em 0.4em; }
.dh-article .prose blockquote { border-left: 3px solid var(--accent); margin: 18px 0; padding-left: 16px; color: var(--fg2); font-style: italic; }
.dh-article .prose ul, .dh-article .prose ol { padding-left: 22px; margin: 0 0 18px; }
.dh-back { font-family: var(--font-mono); font-size: 13px; color: var(--accent); cursor: pointer; }

/* ---------- plain view (data-view="plain") — bare HTML, borderless table, no visible lines ---------- */
html[data-view="plain"] body { background: #fff; color: #111; font-family: Georgia, "Times New Roman", serif; }
.plain-root { max-width: 720px; margin: 0 auto; padding: 28px 18px 60px; }
.plain-root a { color: #0645ad; cursor: pointer; }
.plain-root table { border-collapse: collapse; border: 0; }
.plain-root td, .plain-root th { border: 0; vertical-align: top; padding: 6px 14px 6px 0; }
.plain-root h1 { font-size: 1.8rem; margin: 0 0 .3rem; }
.plain-root h2 { font-size: 1.3rem; margin: 1rem 0 .5rem; }
.plain-root hr { border: 0; border-top: 1px solid #ccc; margin: .8rem 0; }
.plain-root pre { white-space: pre-wrap; background: #f4f4f4; padding: 10px; color: #111; }
html[data-view="plain"] .plain-root,
html[data-view="plain"] .plain-root :where(h1,h2,h3,h4,h5,p,li,td,th,strong,em,b,blockquote,figcaption) { color: #111; }