:root {
  --font: "IBM Plex Mono", "Courier New", monospace;
  --bg: #090702;
  --panel: #0d0a03;
  --ink: #ffb51b;
  --bright: #ffd062;
  --dim: #9a6811;
  --faint: #503608;
  --selected: #f2ad22;
  --selected-ink: #160d00;
  --danger: #ff6b47;
  --line: 1px;
  --chrome: 40px;
}

body[data-theme="green"] { --bg:#000801; --panel:#000d03; --ink:#3dff68; --bright:#8dffa4; --dim:#21933b; --faint:#105222; --selected:#42ed69; --selected-ink:#001507; }
body[data-theme="blue"] { --bg:#020610; --panel:#030a16; --ink:#6db7ff; --bright:#b5dcff; --dim:#376c9f; --faint:#1b3a5b; --selected:#75baff; --selected-ink:#03101d; }
body[data-theme="red"] { --bg:#0c0101; --panel:#130202; --ink:#ff4a4a; --bright:#ff9a8f; --dim:#9e2929; --faint:#541515; --selected:#f24c3d; --selected-ink:#1c0202; }

* { box-sizing: border-box; }
html { background: #050505; }
body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  color: var(--ink);
  background:
    radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.32) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0, rgba(255,255,255,.018) 1px, transparent 1px, transparent 4px),
    var(--bg);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  text-shadow: 0 0 7px color-mix(in srgb, var(--ink) 38%, transparent);
}

button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--bright); outline-offset: -2px; }
a { color: var(--bright); }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 2000; padding: .7rem; background: var(--selected); color: var(--selected-ink); }
.skip-link:focus { top: 1rem; }

.boot {
  position: fixed;
  inset: 0;
  z-index: 1000;
  padding: clamp(20px, 5vw, 64px);
  background: #020200;
  color: var(--ink);
}
.boot pre { display: inline; margin: 0; white-space: pre-wrap; font: inherit; line-height: 1.7; }
.boot button { position: fixed; right: 24px; bottom: 22px; border: 0; background: none; cursor: pointer; opacity: .7; }
.boot.fade { opacity: 0; transition: opacity .28s ease; }

.block-cursor, .mini-cursor { display: inline-block; background: var(--ink); animation: blink 1s steps(1) infinite; }
.block-cursor { width: .75em; height: 1.15em; vertical-align: -.18em; }
.mini-cursor { width: .6em; height: 1em; margin-left: 5px; vertical-align: -.12em; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .block-cursor, .mini-cursor { animation: none; } }

.terminal {
  height: 100vh;
  padding: 2.2vh 2.2vw;
  display: grid;
  grid-template-rows: var(--chrome) minmax(0, 1fr) 78px;
  gap: 7px;
}
.terminal::after { content:""; position:fixed; inset:0; pointer-events:none; z-index:999; box-shadow: inset 0 0 80px rgba(0,0,0,.78); }
.status-bar, .command-bar, .pane { border: var(--line) solid var(--ink); background: rgba(5,5,2,.55); }
.status-bar { display: grid; grid-template-columns: minmax(190px, 1.15fr) minmax(145px, .85fr) minmax(90px, .55fr) minmax(125px, .72fr) minmax(190px, .95fr) auto; align-items: center; gap: 0; padding: 0; font-size: 12px; font-weight: 700; letter-spacing: .01em; }
.status-bar > * { height:100%; display:flex; align-items:center; padding:0 12px; border-right:1px solid var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.status-bar > :last-child { border-right:0; }
.wordmark { color: var(--ink); text-decoration: none; }
.feed-status::before { content: "● "; }
.feed-status.offline { color: var(--danger); }
.theme-switcher { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.theme-switcher button { border: 0; padding: 8px 3px; background: none; cursor: pointer; font-weight: 700; }
.theme-switcher button.active { color: var(--selected-ink); background: var(--selected); }

.workspace { display:grid; grid-template-columns:minmax(210px, .75fr) minmax(300px, .9fr) minmax(560px, 2.2fr); gap:7px; min-height:0; }
.pane { min-width: 0; min-height: 0; overflow: hidden; }
.pane-title { height: 40px; display: flex; align-items: center; padding: 0 14px; border-bottom: 1px solid var(--ink); font-weight: 700; color: var(--bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filesystem { display: flex; flex-direction: column; }
.nav-tree { padding: 12px 8px 20px; overflow: auto; }
.nav-item, .folder-label, .file-short, .category-button { width:100%; min-height: 35px; padding: 7px 10px; text-align:left; border:0; background:none; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.folder-label { cursor: default; color: var(--bright); font-weight: 600; margin-top: 4px; }
.article-tree { display:none; }
body[data-page-view="articles"] .article-tree { display:block; }
.file-short { padding-left: 25px; color: var(--dim); font-size: 12px; }
.category-button { padding-left:25px; color:var(--dim); font-size:12px; }
.nav-item:hover, .file-short:hover, .category-button:hover, .nav-item.active { color: var(--selected-ink); background: var(--selected); text-shadow:none; }
.mobile-menu-toggle { display:none; }

.index-pane { display:block; }
.article-index { height:100%; min-height:0; display:grid; grid-template-rows:40px 48px 32px minmax(0,1fr) 34px; }
.article-index[hidden], .context-index[hidden] { display:none; }
.context-index { height:100%; min-height:0; display:grid; grid-template-rows:40px minmax(0,1fr) 34px; }
.context-rows { padding:14px 12px; overflow:auto; }
.context-row { width:100%; min-height:48px; display:grid; grid-template-columns:36px minmax(0,1fr) 10px; align-items:center; gap:6px; margin-bottom:10px; padding:0 10px; border:1px solid var(--dim); background:transparent; color:var(--ink); text-align:left; cursor:pointer; }
.context-row span { color:var(--bright); }
.context-row strong { font-weight:500; }
.context-row i { width:7px; height:22px; background:transparent; }
.context-row:hover, .context-row.active { border-color:var(--bright); background:color-mix(in srgb, var(--selected) 11%, transparent); }
.context-row.active i { background:var(--selected); box-shadow:0 0 8px var(--selected); }
.search-line { display:flex; align-items:center; padding:0 13px; border-bottom:1px solid var(--dim); white-space:nowrap; color:var(--bright); }
.search-line label { margin-right:13px; font-weight:700; }
.search-line input { min-width:0; width:100%; border:0; outline:0; padding:0 2px; color:var(--ink); background:transparent; }
.search-line input::-webkit-search-cancel-button { display:none; }
.article-head, .article-row { display:grid; grid-template-columns: 78px minmax(0,1fr) 65px; gap:8px; }
.article-head { align-items:center; padding:0 12px; border-bottom:1px solid var(--dim); font-size:11px; color:var(--bright); font-weight:700; }
.article-list { overflow:auto; padding:6px; scroll-behavior:smooth; }
.article-row { width:100%; align-items:start; padding:9px 6px; border:0; color:var(--ink); background:none; text-align:left; cursor:pointer; line-height:1.25; }
.article-row:hover { background:color-mix(in srgb, var(--selected) 16%, transparent); }
.article-row[aria-selected="true"] { color:var(--selected-ink); background:var(--selected); text-shadow:none; }
.article-row .date, .article-row .cat { font-size:11px; padding-top:2px; overflow:hidden; text-overflow:ellipsis; }
.article-row .title { font-weight:500; }
.pane-footer { display:flex; justify-content:space-between; align-items:center; padding:0 12px; border-top:1px solid var(--ink); }
.empty-list { padding:20px 12px; color:var(--dim); }

.reader { position:relative; overflow:auto; padding:0; }
.reader-content { min-height:100%; padding:24px 26px 34px; }
.reader h1 { margin:0 0 14px; color:var(--bright); font-size:clamp(22px, 2vw, 34px); line-height:1.2; letter-spacing:.01em; }
.meta { padding:10px 0; margin-bottom:18px; border-top:1px dashed var(--dim); border-bottom:1px dashed var(--dim); color:var(--dim); font-size:12px; text-transform:uppercase; }
.article-image { position:relative; width:100%; aspect-ratio:16/7; margin:0 0 20px; overflow:hidden; border:1px solid var(--ink); background:var(--faint); }
.article-image img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) sepia(1) saturate(3.2) contrast(1.35) brightness(.8); opacity:.78; mix-blend-mode:screen; }
.article-image::after { content:""; position:absolute; inset:0; background:repeating-radial-gradient(circle at 0 0, transparent 0 1px, var(--bg) 1.5px 2.5px); background-size:4px 4px; opacity:.34; pointer-events:none; }
.excerpt { font-size:15px; line-height:1.7; color:var(--bright); max-width:72ch; }
.tags { margin:24px 0 20px; padding:12px 0; border-top:1px dashed var(--dim); border-bottom:1px dashed var(--dim); color:var(--dim); }
.open-article { display:block; width:max-content; max-width:100%; margin:0 auto; padding:10px 20px; border:1px solid var(--ink); color:var(--selected-ink); background:var(--selected); text-decoration:none; text-align:center; text-shadow:none; font-weight:700; }
.open-article:hover { color:var(--selected-ink); background:var(--bright); }
.text-screen { max-width:72ch; }
.text-screen h1 { font-size:26px; }
.text-screen p, .text-screen li { line-height:1.75; }
.text-screen hr { border:0; border-top:1px dashed var(--dim); margin:24px 0; }
.readme-screen { max-width:82ch; }
.readme-screen section { margin:0 0 30px; scroll-margin-top:18px; }
.readme-screen h2 { margin:0 0 10px; padding:0 0 7px; border-bottom:1px solid var(--dim); color:var(--bright); font-size:17px; }
.readme-screen p { margin:10px 0; }
.readme-screen strong { color:var(--bright); }
.home-screen, .about-screen { max-width:900px; margin:0 auto; }
.boot-complete { display:flex; gap:18px; margin:-2px 0 28px; padding-bottom:10px; border-bottom:1px dashed var(--dim); color:var(--dim); font-size:12px; }
.home-screen h1 { margin:0; font-size:clamp(44px, 5.2vw, 82px); line-height:1; letter-spacing:.065em; font-weight:500; }
.home-role { margin:25px 0 0; color:var(--bright); font-size:clamp(22px, 2.2vw, 34px); line-height:1.1; }
.home-tagline { margin:7px 0 0; color:var(--bright); font-size:16px; }
.home-intro { max-width:58ch; margin:33px 0 0; color:var(--bright); font-size:16px; line-height:1.65; }
.experience-line { width:max-content; max-width:100%; margin:28px 0 24px; padding:18px 0; border-top:2px solid var(--dim); border-bottom:2px solid var(--dim); color:var(--bright); font-weight:700; }
.capability-ledger { max-width:760px; margin:0 0 28px; }
.capability-ledger > div { display:grid; grid-template-columns:minmax(210px, .8fr) minmax(260px, 1.2fr); gap:20px; padding:5px 0; }
.capability-ledger strong { color:var(--ink); font-weight:600; }
.capability-ledger span { color:var(--dim); }
.terminal-actions { display:flex; flex-wrap:wrap; gap:18px; }
.terminal-cta { display:inline-flex; min-height:46px; align-items:center; justify-content:center; padding:0 20px; border:1px solid var(--ink); color:var(--bright); background:transparent; text-decoration:none; text-shadow:inherit; cursor:pointer; font-weight:600; }
.terminal-cta:hover { color:var(--selected-ink); background:var(--selected); text-shadow:none; }
.terminal-loading-line { opacity:0; }
.terminal-loading-line.is-rendering { opacity:1; }
.terminal-token { opacity:0; }
.terminal-token.is-rendered { opacity:1; }
.about-screen h1 { margin:0 0 28px; padding-bottom:10px; border-bottom:1px dashed var(--dim); font-size:22px; }
.about-screen > p { max-width:76ch; color:var(--bright); font-size:14px; line-height:1.7; }
.about-screen .about-lede { margin-top:0; font-size:20px; font-weight:600; }
.about-section { margin-top:28px; }
.about-section h2 { margin:0 0 12px; padding-bottom:6px; border-bottom:1px solid var(--ink); color:var(--bright); font-size:20px; }
.about-list { margin:0; }
.about-list > div { display:grid; grid-template-columns:minmax(250px, .95fr) minmax(260px, 1.05fr); gap:20px; padding:6px 0; }
.about-list dt { color:var(--ink); font-weight:600; }
.about-list dd { margin:0; color:var(--dim); }
.principles { margin:0; padding:0; list-style:none; }
.principles li { padding:4px 0; color:var(--bright); }
.principles li::before { content:"//  "; color:var(--ink); }
.about-screen .about-close { margin:25px 0 16px; font-size:16px; font-weight:600; }
.mobile-back { display:none; }

.command-bar { padding:8px 15px; overflow:hidden; }
.command-form { display:flex; align-items:center; height:26px; font-size:16px; font-weight:700; }
.command-form label { flex:none; }
.command-form input { min-width:20px; flex:1; border:0; outline:0; padding:0 7px; color:var(--ink); background:transparent; caret-color:transparent; }
.key-hints { color:var(--bright); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.command-message { min-height:16px; color:var(--dim); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.noscript { margin:30px; padding:20px; border:1px solid var(--ink); }

::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:var(--bg); border-left:1px solid var(--faint); }
::-webkit-scrollbar-thumb { background:var(--dim); border:2px solid var(--bg); }
::selection { color:var(--selected-ink); background:var(--selected); text-shadow:none; }

@media (max-width: 980px) {
  body { overflow:auto; font-size:13px; }
  .terminal { min-height:100dvh; height:auto; padding:8px; grid-template-rows:auto auto auto; }
  .status-bar { min-height:66px; grid-template-columns:1fr auto; gap:2px 10px; padding:8px 10px; }
  .status-bar > * { height:auto; padding:0; border:0; }
  .machine-id, .user-id { display:none; }
  .feed-status, #clock { font-size:11px; }
  .theme-switcher { justify-self:end; }
  .workspace { grid-template-columns:1fr; }
  .filesystem { overflow:visible; }
  .filesystem .pane-title { display:none; }
  .mobile-menu-toggle { display:block; width:100%; min-height:44px; border:0; background:none; text-align:left; padding:0 12px; cursor:pointer; }
  .nav-tree { display:none; padding:4px 8px 12px; max-height:50vh; border-top:1px solid var(--ink); }
  .nav-tree.open { display:block; }
  .index-pane { min-height:calc(100dvh - 190px); }
  .article-index { grid-template-rows:40px 48px 32px minmax(420px,1fr) 34px; }
  .reader { display:none; position:fixed; z-index:1100; inset:0; background:var(--bg); border:0; }
  .reader.mobile-open { display:block; }
  .reader-content { width:100%; max-width:100vw; padding:68px 18px 36px; overflow-x:hidden; }
  .home-screen, .about-screen { width:100%; max-width:100%; overflow-wrap:anywhere; }
  .home-screen h1 { font-size:clamp(38px, 12vw, 62px); }
  .capability-ledger > div, .about-list > div { grid-template-columns:1fr; gap:2px; padding:8px 0; }
  .capability-ledger span, .about-list dd { padding-left:24px; }
  .experience-line { width:100%; }
  .terminal-actions { flex-direction:column; align-items:stretch; }
  .terminal-cta { width:100%; }
  .mobile-back { display:block; position:fixed; z-index:2; top:10px; left:10px; min-height:44px; padding:0 12px; color:var(--selected-ink); background:var(--selected); border:1px solid var(--bright); text-shadow:none; }
  .command-bar { min-height:66px; }
  .key-hints { font-size:10px; }
}

@media (min-width: 981px) and (max-width: 1160px) {
  .status-bar { grid-template-columns:minmax(190px,1fr) minmax(120px,.7fr) minmax(100px,.55fr) minmax(120px,.65fr) auto; }
  .user-id { display:none; }
  #clock { display:none; }
}

@media (max-width: 560px) {
  body { text-shadow:none; }
  .reader { width:100vw; min-width:100vw; max-width:100vw; }
  .reader-content { width:100vw; max-width:100vw; padding-right:36px; }
  .home-screen, .about-screen { width:calc(100% - 72px); max-width:calc(100% - 72px); margin:0; }
  .wordmark { font-size:12px; }
  .status-bar { grid-template-columns:1fr 1fr; }
  .status-bar .machine-id, .status-bar .user-id { display:none; }
  .theme-switcher { grid-column:1 / -1; justify-self:start; }
  .article-head, .article-row { grid-template-columns:63px minmax(0,1fr) 48px; gap:6px; }
  .article-row { min-height:54px; padding:9px 4px; }
  .article-row .cat { font-size:9px; }
  .article-image { aspect-ratio:4/3; }
  .home-tagline, .home-intro { font-size:14px; }
  .experience-line { font-size:12px; }
  .readme-screen { width:calc(100% - 72px); max-width:calc(100% - 72px); margin:0; }
}