/* greykit-poetry — retro-cyberpunk information-terminal theme. Heavy theming on the chrome (top category bar, left nav, terminal frame, status bar); deliberately calm + readable inside the essay readout. Switchable palettes via : normal — cool slate + cyan/magenta accents amber — monochrome amber CRT green — monochrome green phosphor CRT light — daylight monitor: pale paper + dark ink Every colour flows through palette tokens. Per-category hues ride on --cat-hue (set inline); in the mono themes they collapse toward the phosphor via --mono, so the look stays appropriately retro while accents are still free to pop. */ :root{ /* ── NORMAL palette ───────────────────────────────────────────────── */ --bg:#06080b; --bg-2:#0a0e14; --bg-3:#0e131b; --bg-readout:#0d1117; --line:#1a2330; --line-2:#243042; --text:#c4d2e3; --text-bright:#eaf2fc; --muted:#7a8da6; --faint:#3b485b; --read-text:#d4dce8; --read-em:#e6dcc4; --accent:#2de2e6; --accent-2:#f25fd0; --ok:#46f08a; --danger:#ff6273; --mono:0%; /* how far category hues collapse toward --accent */ --cat-sat:80%; --cat-light:68%; /* category-hue saturation/lightness (light theme darkens these) */ --line-glow:color-mix(in srgb,var(--accent) 32%,transparent); --accent-soft:color-mix(in srgb,var(--accent) 14%,transparent); --accent-line:color-mix(in srgb,var(--accent) 45%,transparent); --glow:0 0 7px; --font-term:'Share Tech Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace; --font-body:'Lora',Georgia,'Times New Roman',serif; --topbar-h:50px; --status-h:30px; --read-w:72ch; /* verse reading column; widened when the nav is collapsed */ } html.nav-collapsed{--read-w:84ch} [data-theme="amber"]{ --bg:#0a0702; --bg-2:#0f0b04; --bg-3:#140e05; --bg-readout:#110c05; --line:#2c2009; --line-2:#3f2f12; --text:#e6ad48; --text-bright:#ffd486; --muted:#a87c38; --faint:#5e471d; --read-text:#e8c789; --read-em:#ffdca2; --accent:#ffb000; --accent-2:#ff8a36; --ok:#ffc24b; --danger:#ff6446; --mono:84%; } [data-theme="green"]{ --bg:#030803; --bg-2:#050d05; --bg-3:#071207; --bg-readout:#050f06; --line:#0f260e; --line-2:#1b3b19; --text:#54d978; --text-bright:#9dffb0; --muted:#45a05e; --faint:#245a2f; --read-text:#abefae; --read-em:#d8ffcb; --accent:#36ff6e; --accent-2:#c2ff44; --ok:#7dff9a; --danger:#ff5d5d; --mono:84%; } /* light — a "daylight monitor": mostly black-on-white. Neutral-grey chrome, categories collapse to grey (no rainbow), and a single strong accent carries the colour (links, tags, selection, prompt path). Green/red stay as the only other accents, for their meanings. Phosphor glow off. */ [data-theme="light"]{ --bg:#ececec; --bg-2:#f4f4f4; --bg-3:#f9f9f9; --bg-readout:#fdfdfd; --line:#dadada; --line-2:#c3c3c3; --text:#1c1c1c; --text-bright:#080808; --muted:#6b6b6b; --faint:#aeaeae; --read-text:#171717; --read-em:#0a0a0a; --accent:#0a7a91; --accent-2:#0a7a91; --ok:#157a3e; --danger:#c81e2e; --mono:0%; --cat-sat:0%; --cat-light:32%; /* categories go greyscale — no rainbow */ --glow:0 0 0; /* no phosphor bloom on a light tube */ } /* resolve each hue-bearing element's category colour from its inline --cat-hue, pulled toward the phosphor by the theme's --mono */ .tree-cat,.post-row,.tree-section,.tree-scoped,.rm-cat,.scope-cwd,.work-strip,.doc-toc-pane,.doc-toc-inline{ --cat:color-mix(in srgb, hsl(var(--cat-hue,200) var(--cat-sat,80%) var(--cat-light,68%)), var(--accent) var(--mono)); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-term); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; background-image: radial-gradient(120% 120% at 50% 0%, transparent 60%, rgba(0,0,0,.55) 100%), repeating-linear-gradient(0deg, color-mix(in srgb,var(--accent) 4%,transparent) 0 1px, transparent 1px 44px), repeating-linear-gradient(90deg, color-mix(in srgb,var(--accent) 4%,transparent) 0 1px, transparent 1px 44px); background-attachment:fixed; } a{color:var(--accent);text-decoration:none} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px} ::selection{background:color-mix(in srgb,var(--accent) 35%,transparent);color:var(--text-bright)} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden} .skip-link:focus{position:fixed;left:0;top:0;width:auto;height:auto;overflow:visible; padding:8px 14px;background:var(--accent);color:var(--bg);font-family:var(--font-term); font-size:.85rem;letter-spacing:.05em;z-index:9999;outline:none;border-bottom-right-radius:4px} *{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent} *::-webkit-scrollbar{width:9px;height:9px} *::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px} *::-webkit-scrollbar-thumb:hover{background:var(--accent-line)} /* ── app shell ──────────────────────────────────────────────────────────── */ .shell{display:grid;grid-template-rows:var(--topbar-h) 1fr var(--status-h); height:100vh;height:100dvh;overflow:hidden} /* ── topbar ──────────────────────────────────────────────────────────────── */ .topbar{display:flex;align-items:stretch;background:linear-gradient(180deg,var(--bg-3),var(--bg-2)); border-bottom:1px solid var(--line-glow);box-shadow:0 1px 0 rgba(0,0,0,.6),0 6px 18px -12px var(--accent);position:relative;z-index:5} .topbar::after{content:"";position:absolute;inset:0;pointer-events:none; background:repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);opacity:.5} .brand{display:flex;align-items:center;gap:2px;padding:0 16px 0 18px;flex-shrink:0; font-size:1.06rem;letter-spacing:.04em;position:relative;z-index:1} .brand-mark{color:var(--accent);text-shadow:var(--glow) var(--accent);margin-right:7px;animation:pulse 2.6s ease-in-out infinite} .brand-name{color:var(--text-bright)} .brand-unit{color:var(--accent);text-shadow:var(--glow) var(--accent)} .brand:hover .brand-name{color:#fff} .topbar-tools{display:flex;align-items:center;gap:6px;padding:0 12px;flex-shrink:0;margin-left:auto;border-left:1px solid var(--line);position:relative;z-index:1} .about-btn{display:inline-flex;align-items:center;align-self:center;flex-shrink:0;height:30px;margin-left:14px;padding:0 13px;border:1px solid var(--line-2);border-radius:5px;background:var(--bg-2);color:var(--muted);font-family:var(--font-term);font-size:.8rem;letter-spacing:.04em;cursor:pointer;transition:.12s;position:relative;z-index:1} .about-btn:hover{color:var(--accent);border-color:var(--accent-line);background:color-mix(in srgb,var(--accent) 8%,var(--bg-2));box-shadow:0 0 10px -2px var(--accent);text-shadow:var(--glow) var(--accent)} .about-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .ab-short{display:none} .tool-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid var(--line-2); border-radius:5px;background:var(--bg-2);color:var(--muted);cursor:pointer;font-size:.95rem;line-height:1;transition:.12s} .tool-btn:hover{color:var(--accent);border-color:var(--accent-line);box-shadow:0 0 10px -2px var(--accent);text-shadow:var(--glow) var(--accent)} .rss-link{width:auto;padding:0 7px;font-size:10px;letter-spacing:.06em} .tool-btn.is-on{color:var(--accent);border-color:var(--accent-line);box-shadow:0 0 10px -2px var(--accent);text-shadow:var(--glow) var(--accent)} /* CRT monitor effect — optional scanlines + tube-curvature vignette, toggled by the monitor button (html.crt). Off by default; choice persisted in localStorage. Full-viewport, pointer-events:none, and below the modal so dialogs stay crisp. */ .crt-scanlines,.crt-vignette{position:fixed;inset:0;pointer-events:none;display:none} html.crt .crt-scanlines,html.crt .crt-vignette{display:block} .crt-scanlines{z-index:120;background:linear-gradient(rgba(0,0,0,.2) 50%,transparent 50%);background-size:100% 3px} .crt-vignette{z-index:121;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.5) 100%)} /* ── workbench: nav + terminal ──────────────────────────────────────────── */ .workbench{display:grid;grid-template-columns:minmax(250px,300px) 1fr;min-height:0;position:relative} /* desktop: collapse the nav sidebar (☰ in the term titlebar) to give the reader the whole width — state persisted in localStorage. Scoped to desktop so it never touches the mobile off-canvas drawer (which uses .sidebar-open below). */ @media (min-width:821px){ html.nav-collapsed .workbench{grid-template-columns:1fr} html.nav-collapsed .sidebar{display:none} } .sidebar{display:flex;flex-direction:column;min-height:0;background:linear-gradient(180deg,var(--bg-2),var(--bg)); border-right:1px solid var(--line-glow);position:relative;z-index:2} .sidebar-head{display:flex;flex-direction:column;gap:8px;padding:11px 12px;border-bottom:1px solid var(--line)} .sb-label{font-size:.72rem;letter-spacing:.22em;color:var(--muted)} .tree-search{width:100%;background:var(--bg-3);border:1px solid var(--line-2);color:var(--text-bright); border-radius:5px;padding:7px 10px;font-family:var(--font-term);font-size:.82rem;outline:none;transition:.12s} .tree-search::placeholder{color:var(--faint)} .tree-search:focus{border-color:var(--accent-line);box-shadow:0 0 0 1px var(--accent-line),0 0 12px -4px var(--accent)} .tree{flex:1;overflow-y:auto;padding:6px 0 16px;min-height:0} .sidebar-foot{padding:7px 12px;border-top:1px solid var(--line);font-size:.72rem;color:var(--muted);letter-spacing:.06em} /* category folders (ALL view) */ .tree-folder{display:flex;align-items:center;gap:7px;padding:5px 12px;cursor:pointer;list-style:none; color:var(--muted);font-size:.84rem;user-select:none;transition:background .1s} .tree-folder::-webkit-details-marker{display:none} .tree-folder:hover{background:color-mix(in srgb,var(--cat) 8%,transparent)} .fold-arrow{width:0;height:0;border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent; opacity:.7;transition:transform .15s;flex-shrink:0} .tree-cat[open]>.tree-folder .fold-arrow{transform:rotate(90deg)} .fold-name{color:var(--cat);text-shadow:0 0 7px color-mix(in srgb,var(--cat) 38%,transparent);letter-spacing:.02em; text-decoration:none;border-bottom:1px solid transparent} .fold-name:hover{border-bottom-color:color-mix(in srgb,var(--cat) 55%,transparent)} .fold-name.is-active{color:color-mix(in srgb,var(--cat),var(--text-bright) 25%);border-bottom-color:var(--cat)} .fold-n{margin-left:auto;font-size:.7rem;color:var(--muted);background:color-mix(in srgb,var(--cat) 13%,transparent); border:1px solid color-mix(in srgb,var(--cat) 30%,transparent);border-radius:3px;padding:0 5px} .tree-children{margin:1px 0 6px;padding-left:18px;border-left:1px solid color-mix(in srgb,var(--cat) 22%,transparent);margin-left:17px} details.tree-cat>.tree-body{display:grid!important;grid-template-rows:0fr;min-width:0;overflow:hidden;transition:grid-template-rows 240ms cubic-bezier(0.25,1,0.5,1)} details.tree-cat[open]>.tree-body{grid-template-rows:1fr} /* min-width:0 lets the grid item shrink to the sidebar instead of letting a long nowrap filename blow the track wider than the panel (which pushed the date column off-screen to the right); leaf-name then ellipsizes as intended */ .tree-body>.tree-children{min-height:0;min-width:0} .tree-subname{padding:4px 10px 2px;font-size:.72rem;color:var(--faint);letter-spacing:.04em} .tree-leaf{display:flex;align-items:baseline;gap:8px;padding:3px 10px 3px 8px;color:var(--muted); font-size:.79rem;border-left:2px solid transparent;transition:.1s} .tree-leaf:hover{color:var(--text-bright);background:var(--accent-soft);border-left-color:var(--accent-line)} .tree-leaf.is-active{color:var(--accent);background:var(--accent-soft);border-left-color:var(--accent);text-shadow:var(--glow) var(--accent)} .leaf-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1} .leaf-date{font-size:.68rem;color:var(--muted);flex-shrink:0} /* scope bar + 2nd-tier folder nav (scoped view) */ .scope-bar{display:flex;align-items:center;gap:9px;padding:7px 12px;flex-shrink:0; border-bottom:1px solid var(--line);background:var(--bg-2);font-size:.78rem} .scope-up{flex-shrink:0;color:var(--muted);border:1px solid var(--line-2);border-radius:4px;padding:1px 7px;font-size:.72rem;letter-spacing:.03em} .scope-up:hover{color:var(--accent);border-color:var(--accent-line);box-shadow:0 0 9px -3px var(--accent)} .scope-cwd{color:var(--cat);text-shadow:0 0 8px color-mix(in srgb,var(--cat) 40%,transparent); letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .scope-cwd.scope-root{color:var(--muted);text-shadow:none} .tree-scoped{padding-top:5px} .tree-scoped>.tree-leaf{padding-left:13px} .sec-link{display:flex;align-items:center;gap:8px;padding:5px 12px;color:var(--muted); font-size:.82rem;border-left:2px solid transparent;transition:.1s} .sec-link .sec-name{letter-spacing:.02em;color:var(--cat);text-shadow:0 0 7px color-mix(in srgb,var(--cat) 35%,transparent)} .sec-link:hover{background:color-mix(in srgb,var(--cat) 9%,transparent);border-left-color:color-mix(in srgb,var(--cat) 55%,transparent)} .sec-link.is-active{background:color-mix(in srgb,var(--cat) 15%,transparent);border-left-color:var(--cat)} .sec-link.is-active .sec-name{color:color-mix(in srgb,var(--cat),var(--text-bright) 22%)} .sec-link .fold-n{margin-left:auto;font-size:.7rem;color:var(--muted);background:color-mix(in srgb,var(--cat) 13%,transparent); border:1px solid color-mix(in srgb,var(--cat) 30%,transparent);border-radius:3px;padding:0 5px} .sec-all{margin-bottom:2px} .sec-all .sec-name{color:var(--text-bright);text-shadow:none} .sec-all::before{content:"▸";opacity:.55;font-size:.7rem} .tree-section{margin:2px 0} .tree-section>.tree-children{margin:1px 0 5px 18px;padding-left:13px;border-left:1px solid color-mix(in srgb,var(--cat) 22%,transparent)} /* ── terminal main pane ─────────────────────────────────────────────────── */ .terminal{display:flex;flex-direction:column;min-height:0;background:var(--bg);position:relative} .term-titlebar{display:flex;align-items:center;gap:12px;padding:0 14px;height:34px;flex-shrink:0; background:linear-gradient(180deg,var(--bg-3),var(--bg-2));border-bottom:1px solid var(--line);position:relative;overflow:hidden} .term-titlebar::after{content:"";position:absolute;inset:0;pointer-events:none; background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);opacity:.5} .dots{display:flex;gap:7px;flex-shrink:0} .dots i{width:11px;height:11px;border-radius:50%;background:var(--line-2)} .dots i:nth-child(1){background:#ff5f57}.dots i:nth-child(2){background:#febc2e}.dots i:nth-child(3){background:#28c840} [data-theme="amber"] .dots i,[data-theme="green"] .dots i{background:color-mix(in srgb,var(--accent) 52%,var(--faint))} .term-path{flex:1;font-size:.8rem;color:var(--muted);letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sb-toggle{display:inline-flex;align-items:center;justify-content:center;background:var(--bg-2); border:1px solid var(--line-2);color:var(--muted);border-radius:4px; width:28px;height:24px;cursor:pointer;font-size:.85rem;line-height:1;flex-shrink:0} .sb-toggle:hover{color:var(--accent);border-color:var(--accent-line)} .sb-toggle.is-on{color:var(--accent);border-color:var(--accent-line)} .term-screen{flex:1;overflow-y:auto;min-height:0;padding:18px 22px 40px; background:radial-gradient(140% 80% at 50% -10%, color-mix(in srgb,var(--accent) 5%,transparent), transparent 60%)} /* flicker on list views only; essay view uses the loaddelay (screen-draw) instead */ @media (prefers-reduced-motion: no-preference){.term-screen{animation:flickerin .5s ease-out both}} html[data-view="essay"] .term-screen{animation:none} /* essay "screen draw": hide the screen before paint so app.js can repaint it top-down with stutters. Only set when JS+motion add .is-drawing (see ), so no-JS / reduced-motion users see the content immediately. */ html.is-drawing .term-screen{clip-path:inset(0 0 100% 0);animation:none} /* prompt line */ .prompt{display:flex;flex-wrap:wrap;align-items:baseline;gap:9px;margin:6px 0 12px;font-size:.92rem} .prompt-tail{margin:22px 0 4px;opacity:.85} .ps1{white-space:nowrap} .ps-user{color:var(--ok)} .ps-at,.ps-colon,.ps-dollar{color:var(--muted)} .ps-host{color:var(--ok);text-shadow:0 0 6px color-mix(in srgb,var(--ok) 55%,transparent)} .ps-cwd{color:var(--accent-2);text-shadow:0 0 6px color-mix(in srgb,var(--accent-2) 50%,transparent)} .ps-dollar{margin-left:6px} .cmd{color:var(--text-bright)} .cursor{display:inline-block;width:9px;height:1.05em;transform:translateY(2px);background:var(--accent);box-shadow:0 0 8px var(--accent)} @media (prefers-reduced-motion: no-preference){.cursor{animation:blink 1.1s steps(1) infinite}} /* interactive command line — progressive enhancement of the tail prompt */ .cmdline{font:inherit;color:var(--text-bright);background:transparent;border:0;outline:0;padding:0;margin:0; caret-color:var(--accent);min-width:1ch;vertical-align:baseline} .cmdline::selection{background:color-mix(in srgb,var(--accent) 35%,transparent);color:var(--text-bright)} .cmd-hint{color:var(--faint);font-size:.78rem;letter-spacing:.03em;user-select:none} .prompt.is-typing .cmd-cursor,.prompt.is-typing .cmd-hint,.prompt.is-used .cmd-hint{display:none} .shell-scroll{display:flex;flex-direction:column;gap:0} .shell-scroll .prompt{margin:4px 0 2px;opacity:1} .sh-out{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text);margin:1px 0 9px;font-size:.92rem;line-height:1.55} .sh-out:last-child{margin-bottom:2px} .sh-err{color:var(--danger)} .sh-note{color:var(--muted);font-size:.84rem} .sh-help{margin:0;line-height:1.5} .sh-help .sh-cmd{display:inline-block;min-width:12ch;padding-right:1.5ch;color:var(--accent-2)} .sh-ls{display:flex;flex-wrap:wrap;gap:3px 20px} .sh-ls .sh-d{color:var(--accent-2)}.sh-ls .sh-d:hover{text-shadow:var(--glow) var(--accent-2)} .sh-ls .sh-f{color:var(--muted)}.sh-ls .sh-f:hover{color:var(--text);text-shadow:var(--glow) var(--accent)} .ls-summary{color:var(--muted);font-size:.84rem;margin:0 0 14px;letter-spacing:.02em} .ls-summary .hl{color:var(--accent);text-shadow:var(--glow) var(--accent)} .filter-clear{color:var(--muted);font-size:.82rem;margin-left:.4em;letter-spacing:.03em;transition:.1s} .filter-clear:hover{color:var(--accent);text-shadow:var(--glow) var(--accent)} .hint{color:var(--muted);font-size:.88rem;margin:10px 0} .sb-hint{color:var(--faint);font-size:.7rem;margin:0;letter-spacing:.06em} .kbd{font-family:var(--font-term);color:var(--accent);background:var(--accent-soft); border:1px solid var(--accent-line);border-radius:4px;padding:.05em .4em;font-size:.85em} .term-error{color:var(--danger);background:color-mix(in srgb,var(--danger) 9%,transparent); border:1px solid color-mix(in srgb,var(--danger) 35%,transparent);border-radius:5px;padding:9px 13px;margin:6px 0;font-size:.9rem} .term-error a{color:var(--accent)} /* ── listing (ls output) ────────────────────────────────────────────────── */ .post-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column} body:not(.is-loaded) .post-row{animation:row-in 300ms cubic-bezier(0.25,1,0.5,1) both;animation-delay:calc((var(--i,1) - 1)*28ms)} .post-row{padding:13px 4px 14px 14px;border-bottom:1px solid var(--line);position:relative; border-left:2px solid transparent;transition:background .12s,border-color .12s} .post-row::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--cat);opacity:.35} .post-row:hover{background:color-mix(in srgb,var(--cat) 6%,transparent);border-left-color:var(--cat)} .post-row:hover::before{opacity:1;box-shadow:0 0 10px var(--cat)} .row-head{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;color:inherit} .row-head::after{content:"";position:absolute;inset:0;z-index:1} .row-tags{position:relative;z-index:2} .row-date{color:var(--muted);font-size:.82rem;flex-shrink:0} .row-cat{color:var(--cat);font-size:.8rem;flex-shrink:0;text-shadow:0 0 7px color-mix(in srgb,var(--cat) 38%,transparent)} .row-title{color:var(--text-bright);font-size:1.04rem;letter-spacing:.01em;transition:color .12s} .post-row:hover .row-title{color:color-mix(in srgb,var(--cat),var(--text-bright) 35%);text-shadow:0 0 12px color-mix(in srgb,var(--cat) 50%,transparent)} .row-byline{font-size:.78rem;color:var(--faint);margin-top:5px;letter-spacing:.03em} .row-sum{font-family:var(--font-body);color:var(--muted);margin:7px 0 0;font-size:.96rem;line-height:1.55;max-width:74ch} .row-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px} .tag{font-size:.74rem;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-line); border-radius:3px;padding:1px 7px;letter-spacing:.02em;transition:.1s} .tag:hover{color:var(--text-bright);background:color-mix(in srgb,var(--accent) 24%,transparent);box-shadow:0 0 9px -2px var(--accent)} /* ── readout (poem — calm + readable) ─────────────────────────────────────── Verse-tuned: serif body, a slightly closer line-height for line-to-line rhythm, and a touch more space between stanzas (

) than between lines so a blank line in the source reads clearly as a stanza break. Line breaks inside a stanza are hard
s emitted by lib.php. */ .readout-head{max-width:var(--read-w);margin:6px auto 0;padding-bottom:20px;border-bottom:1px solid var(--line)} .readout-head h1{font-family:var(--font-body);font-weight:600;color:var(--text-bright); font-size:2.05rem;line-height:1.2;letter-spacing:-.01em;margin:.2em 0 .35em} .readout-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:.82rem;color:var(--muted)} .rm-sep{color:var(--faint)} .rm-cat{color:var(--cat);text-shadow:0 0 7px color-mix(in srgb,var(--cat) 38%,transparent)} .rm-tags{display:flex;flex-wrap:wrap;gap:6px;margin-left:2px} /* bibliographic byline (author · year · collection) + provenance line */ .readout-byline{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin:9px 0 7px;font-family:var(--font-body);font-size:.98rem;color:var(--muted)} .rm-author{color:var(--read-em)} .rm-translator{color:var(--read-em)} .rm-collection{font-style:italic} .readout-source{font-size:.76rem;color:var(--faint);margin:9px 0 0;letter-spacing:.02em} .readout-body{max-width:var(--read-w);margin:26px auto 0;padding:22px 26px;background:var(--bg-readout); border:1px solid var(--line);border-radius:8px;box-shadow:inset 0 0 60px -30px var(--accent),0 10px 40px -28px #000; font-family:var(--font-body);font-size:1.14rem;line-height:1.7;color:var(--read-text)} .readout-body>:first-child{margin-top:0} .readout-body>:last-child{margin-bottom:0} .readout-body h1,.readout-body h2,.readout-body h3,.readout-body h4{font-family:var(--font-body);color:var(--text-bright);line-height:1.3} .readout-body h2{font-size:1.5rem;font-weight:600;margin:1.7em 0 .5em;padding-bottom:.15em;border-bottom:1px solid var(--line)} .readout-body h3{font-size:1.24rem;font-weight:600;margin:1.5em 0 .4em} .readout-body p{margin:0 0 1.4em} /* stanza gap (verse): wider than the line gap */ /* scripture: each verse is its own paragraph. Give verses a little air (not a full paragraph gap), roomier leading, and a raised accent verse number that hangs into a left gutter so the structure scans at a glance. Scoped to .scripture (the `scripture` tag) so ordinary verse is untouched. */ .read-wrap.scripture .readout-body p{margin:0 0 .62em;line-height:1.78;padding-left:2em;text-indent:-2em} .read-wrap.scripture .readout-body p>strong:first-child{ display:inline-block;min-width:1.5em;margin-right:.5em;color:var(--accent); font-family:var(--font-term);font-weight:700;font-size:.74em;vertical-align:.28em; text-align:right;font-feature-settings:"tnum"} .readout-body strong{color:var(--text-bright);font-weight:600} .readout-body em{color:var(--read-em)} .readout-body a{color:var(--accent);border-bottom:1px solid var(--accent-line)} .readout-body a:hover{border-bottom-color:var(--accent);text-shadow:0 0 8px color-mix(in srgb,var(--accent) 45%,transparent)} .readout-body blockquote{margin:1.4em 0;padding:.4em 0 .4em 1.15em;border-left:3px solid var(--accent-2); color:var(--muted);font-style:italic;background:color-mix(in srgb,var(--accent-2) 5%,transparent)} .readout-body blockquote p:last-child{margin-bottom:0} .readout-body ul,.readout-body ol{margin:0 0 1.15em;padding-left:1.5em} .readout-body li{margin:.32em 0} .readout-body ul li::marker{color:var(--accent)} .readout-body ol li::marker{color:var(--accent);font-family:var(--font-term)} .readout-body code{font-family:var(--font-term);font-size:.84em;color:var(--accent); background:var(--bg-2);border:1px solid var(--line-2);border-radius:4px;padding:.08em .4em} .readout-body pre{font-family:var(--font-term);background:color-mix(in srgb,var(--bg) 70%,#000);border:1px solid var(--line-2); border-left:2px solid var(--accent-line);border-radius:7px;padding:14px 16px;overflow-x:auto;margin:1.3em 0; line-height:1.55;box-shadow:inset 0 0 40px -28px var(--accent)} .readout-body pre code{background:none;border:none;padding:0;font-size:.82rem;color:var(--read-text)} .readout-body hr{border:none;border-top:1px dashed var(--line-2);margin:2em 0} .readout-body img{max-width:100%;height:auto;border-radius:7px;border:1px solid var(--line)} .readout-body del{color:var(--faint)} /* Coleridge-style marginal gloss: a prose side-note floated into the right margin, beside the stanza it annotates; the short verse lines wrap to its left. */ .readout-body .gloss{float:right;clear:right;width:13.5em;margin:.3em 0 1em 1.8em; font-family:var(--font-body);font-size:.8rem;font-style:italic;line-height:1.5; color:var(--muted);text-align:left;text-indent:0} .readout-body .gloss em{font-style:normal} @media (max-width:680px){ /* no room for a margin on narrow screens — fall back to an inline note */ .readout-body .gloss{float:none;width:auto;margin:.2em 0 1.1em;padding-left:.9em; border-left:2px solid var(--accent-2);font-size:.86rem} } .post-nav{display:flex;justify-content:space-between;gap:14px;max-width:var(--read-w);margin:30px auto 0;padding-top:20px;border-top:1px solid var(--line)} .post-nav a{max-width:47%;color:var(--muted)} .post-nav .pn-next{text-align:right;margin-left:auto} .post-nav a:hover .pn-t{color:var(--accent);text-shadow:var(--glow) var(--accent)} .post-nav .pn-dir{display:block;font-size:.74rem;color:var(--muted);letter-spacing:.04em} .post-nav .pn-t{font-size:.92rem;color:var(--text)} /* within-work bottom nav: prev/next part + a centered "contents" link back to the work */ .work-pn .pn-contents{align-self:center;max-width:none;color:var(--cat,var(--accent));font-family:var(--font-term); font-size:.82rem;letter-spacing:.02em;text-align:center;text-decoration:none;border-bottom:1px solid transparent} .work-pn .pn-contents:hover{border-bottom-color:color-mix(in srgb,var(--accent) 55%,transparent);text-shadow:var(--glow) var(--accent)} /* document part browser: a collapsible contents panel shown atop a poem that is part of a multi-file work (a book of an epic, a poem in a sequence, …). */ .work-strip{max-width:var(--read-w);margin:22px auto 0} .work-toc{border:1px solid var(--line);border-radius:7px;overflow:hidden; background:color-mix(in srgb,var(--cat) 5%,transparent)} .work-toc>summary{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;list-style:none; font-family:var(--font-term);font-size:.82rem} .work-toc>summary::-webkit-details-marker{display:none} .work-toc>summary:hover{background:color-mix(in srgb,var(--cat) 9%,transparent)} .ws-arrow{width:0;height:0;border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent; opacity:.7;transition:transform .15s;flex-shrink:0;color:var(--cat)} .work-toc[open]>summary .ws-arrow{transform:rotate(90deg)} .ws-label{color:var(--cat);letter-spacing:.02em;text-shadow:0 0 7px color-mix(in srgb,var(--cat) 35%,transparent)} .ws-pos{margin-left:auto;font-size:.72rem;color:var(--muted);letter-spacing:.05em} .ws-list{margin:0;padding:4px 0 6px;list-style:none;border-top:1px solid var(--line)} .ws-list a{display:flex;gap:10px;align-items:baseline;padding:4px 14px 4px 14px;color:var(--muted); font-family:var(--font-term);font-size:.86rem;text-decoration:none;border-left:2px solid transparent} .ws-list a:hover{color:var(--text-bright);background:var(--accent-soft);border-left-color:var(--accent-line)} .ws-list .is-here>a{color:var(--accent);background:var(--accent-soft);border-left-color:var(--accent); text-shadow:var(--glow) var(--accent)} .ws-n{min-width:2.4em;text-align:right;color:var(--cat);opacity:.85;flex-shrink:0} .back-to{max-width:var(--read-w);margin:24px auto 0;font-size:.86rem} .back-to a{color:var(--accent)} /* ── in-document chapter navigation (single-file works) ───────────────────── A whole work can live in one .md file; its `##` chapters become a contents list. Narrow screens get the collapsible .doc-toc-inline (reusing .work-toc) at the top of the piece; wide screens (≥1200px) get a sticky .doc-toc-pane rail in the right gutter, with scroll-spy highlighting the section in view (app.js). */ .doc-toc-inline{max-width:var(--read-w);margin:22px auto 0} .doc-toc-inline .doc-toc{border-top:1px solid var(--line);padding:5px 0 7px} .doc-toc-pane{display:none} /* shown only on the wide layout below */ /* the contents list itself — shared by the inline panel (all widths) and the rail (wide) */ .doc-toc ol,.doc-toc ul{list-style:none;margin:0;padding:0} .doc-toc a{display:block;padding:4px 12px;color:var(--muted);font-family:var(--font-term); font-size:.82rem;line-height:1.35;text-decoration:none;border-left:2px solid var(--line); transition:color .12s,border-color .12s,background .12s} .doc-toc a:hover{color:var(--text-bright);border-left-color:var(--cat);background:var(--accent-soft)} .doc-toc a.is-current{color:var(--accent);border-left-color:var(--accent);text-shadow:var(--glow) var(--accent)} /* h3 sub-sections collapse under their chapter; revealed only while it's current (app.js) */ .doc-toc .toc-sub{display:none} .doc-toc .toc-group.toc-open>.toc-sub{display:block} .doc-toc .toc-sub a{padding-left:26px;font-size:.78rem;opacity:.85} /* small gap above a heading jumped to via the contents links (it scrolls within .term-screen, which has no sticky header of its own) */ .readout-body h2,.readout-body h3{scroll-margin-top:26px} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} @media (min-width:1200px){ .read-wrap.has-toc{display:flex;justify-content:center;align-items:flex-start;gap:34px} .read-wrap.has-toc>.readout{flex:0 1 var(--read-w);min-width:0} .read-wrap.has-toc .doc-toc-inline{display:none} .read-wrap.has-toc>.doc-toc-pane{display:block;flex:0 0 15em;position:sticky;top:18px; align-self:flex-start;max-height:calc(100vh - var(--topbar-h) - var(--status-h) - 44px);overflow:auto;padding:2px 4px 0} .dtp-label{font-family:var(--font-term);font-size:.66rem;letter-spacing:.16em;color:var(--muted); padding:0 10px 8px;border-bottom:1px solid var(--line);margin-bottom:6px} /* in the narrow rail, ellipsize long chapter titles rather than wrap */ .doc-toc-pane .doc-toc a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} } /* ── status bar ─────────────────────────────────────────────────────────── */ .statusbar{display:flex;align-items:center;background:linear-gradient(180deg,var(--bg-2),var(--bg-3)); border-top:1px solid var(--line-glow);font-size:.72rem;letter-spacing:.08em;color:var(--muted);position:relative;z-index:5;overflow:hidden} .statusbar::after{content:"";position:absolute;inset:0;pointer-events:none; background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);opacity:.5} .st-seg{padding:0 13px;height:100%;display:inline-flex;align-items:center;border-right:1px solid var(--line);white-space:nowrap;position:relative;z-index:1} .st-spacer{flex:1;border-right:none} .st-online{color:var(--ok)} .st-online .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);margin-right:7px;box-shadow:0 0 8px var(--ok)} @media (prefers-reduced-motion: no-preference){.st-online .dot{animation:pulse 1.8s ease-in-out infinite}} .st-clock{color:var(--accent);text-shadow:0 0 7px color-mix(in srgb,var(--accent) 45%,transparent)} .statusbar .st-seg:last-child{border-right:none;color:var(--muted)} /* ── warning modal ───────────────────────────────────────────────────────── */ .modal-backdrop:not([hidden]){animation:modal-backdrop-in 180ms ease-out both} .modal-backdrop:not([hidden]) .modal-box{animation:modal-box-in 260ms cubic-bezier(0.16,1,0.3,1) 80ms both} .modal-backdrop{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.88)} .modal-backdrop[hidden]{display:none} .modal-box{width:min(540px,calc(100vw - 32px));background:var(--bg-2);border:1px solid color-mix(in srgb,var(--danger) 45%,transparent);border-radius:7px;box-shadow:0 0 50px -20px var(--danger),0 30px 80px -30px #000;overflow:hidden} .modal-titlebar{display:flex;align-items:center;gap:12px;padding:0 14px;height:34px;flex-shrink:0;background:linear-gradient(180deg,var(--bg-3),var(--bg-2));border-bottom:1px solid color-mix(in srgb,var(--danger) 40%,transparent);position:relative;overflow:hidden} .modal-titlebar::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);opacity:.5} .modal-title-text{font-size:.78rem;letter-spacing:.2em;color:var(--danger);text-shadow:0 0 8px color-mix(in srgb,var(--danger) 60%,transparent);position:relative;z-index:1} .modal-body{padding:22px 24px 26px} .modal-h{font-family:var(--font-term);font-size:.88rem;letter-spacing:.18em;color:var(--danger);text-shadow:0 0 10px color-mix(in srgb,var(--danger) 40%,transparent);margin:0 0 16px;font-weight:600} .modal-text{font-family:var(--font-body);font-size:.98rem;line-height:1.7;color:var(--read-text);margin:0 0 22px} .modal-text strong{color:var(--text-bright);font-weight:600} .modal-text p{margin:0 0 .9em}.modal-text p:last-child{margin-bottom:0} .modal-check{display:flex;align-items:center;gap:9px;font-family:var(--font-term);font-size:.8rem;color:var(--muted);letter-spacing:.04em;margin-bottom:18px;cursor:pointer;user-select:none} .modal-check input[type=checkbox]{width:14px;height:14px;accent-color:var(--accent);cursor:pointer;flex-shrink:0} .modal-actions{display:flex;gap:8px} .modal-back{flex:1;display:flex;align-items:center;justify-content:center;padding:11px 12px;background:color-mix(in srgb,var(--muted) 8%,transparent);border:1px solid color-mix(in srgb,var(--muted) 30%,transparent);color:var(--muted);font-family:var(--font-term);font-size:.84rem;letter-spacing:.06em;border-radius:5px;transition:.15s;text-decoration:none} .modal-back:hover{color:var(--text);border-color:var(--muted);background:color-mix(in srgb,var(--muted) 15%,transparent)} .modal-agree{flex:2;padding:11px 18px;background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid var(--accent-line);color:var(--accent);font-family:var(--font-term);font-size:.84rem;letter-spacing:.1em;cursor:pointer;border-radius:5px;transition:.15s;text-shadow:0 0 8px color-mix(in srgb,var(--accent) 35%,transparent)} .modal-agree:hover{background:color-mix(in srgb,var(--accent) 20%,transparent);border-color:var(--accent);box-shadow:0 0 20px -6px var(--accent)} .modal-agree:focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* about modal — informational variant: accent-themed (not the danger-red warning), a close ✕, and a fun-fact callout */ .modal-info .modal-box{border-color:var(--accent-line);box-shadow:0 0 50px -20px var(--accent),0 30px 80px -30px #000} .modal-info .modal-titlebar{border-bottom-color:color-mix(in srgb,var(--accent) 40%,transparent)} .modal-info .modal-title-text{color:var(--accent);text-shadow:0 0 8px color-mix(in srgb,var(--accent) 60%,transparent)} .modal-info .modal-h{color:var(--accent);text-shadow:0 0 10px color-mix(in srgb,var(--accent) 40%,transparent)} .modal-x{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;background:none;border:0;color:var(--muted);font-size:.82rem;line-height:1;cursor:pointer;border-radius:4px;position:relative;z-index:1;transition:.15s} .modal-x:hover{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)} .modal-x:focus-visible{outline:2px solid var(--accent);outline-offset:1px} .fun-fact{margin:18px 0 0;padding:13px 15px 14px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:5px;background:color-mix(in srgb,var(--accent) 6%,transparent)} .fun-fact .ff-label{display:block;font-family:var(--font-term);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:5px} .fun-fact p{margin:0;font-size:.92rem;line-height:1.6} @media(max-width:560px){.modal-body{padding:18px 16px 20px}} /* ── animations ─────────────────────────────────────────────────────────── */ @keyframes blink{50%{opacity:0}} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}} @keyframes flickerin{0%{opacity:0}30%{opacity:.6}45%{opacity:.3}100%{opacity:1}} @keyframes modal-backdrop-in{from{opacity:0}to{opacity:1}} @keyframes modal-box-in{from{opacity:0;transform:scale(.96) translateY(-8px)}to{opacity:1;transform:none}} @keyframes row-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* ── responsive ─────────────────────────────────────────────────────────── */ @media (max-width:820px){ :root{--topbar-h:46px} .workbench{grid-template-columns:1fr} .sidebar{position:absolute;inset:0 auto 0 0;width:84%;max-width:320px;z-index:20; transform:translateX(-100%);transition:transform .2s ease;box-shadow:14px 0 40px -18px #000; will-change:transform} body.sidebar-open .sidebar{transform:translateX(0)} body.sidebar-open .terminal::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.5);z-index:15} .sb-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px} .tool-btn{min-width:44px;min-height:44px} .tree-leaf{min-height:44px;align-items:center;padding-top:0;padding-bottom:0} .tree-folder{min-height:44px} .tag{min-height:28px;padding:5px 7px;display:inline-flex;align-items:center} .brand-unit{display:none} .term-screen{padding:15px 16px 36px} .readout-body{padding:18px 16px;font-size:1.06rem} } @media (max-width:560px){ .st-hide-sm{display:none} .brand{padding:0 10px} .about-btn{height:38px;margin-left:10px;padding:0 12px;font-size:.74rem} .ab-long{display:none}.ab-short{display:inline} .readout-head h1{font-size:1.7rem} } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none !important;transition-duration:0.01ms !important} } @media print{ .topbar,.sidebar,.statusbar,.term-titlebar,.prompt,.post-nav,.back-to{display:none !important} .shell{display:block;height:auto}.terminal,.term-screen{overflow:visible} body{background:#fff;color:#000} .readout-body{border:none;box-shadow:none;background:#fff;color:#000;max-width:none} }