:root{color-scheme:dark;--line:#29443b;--panel:#0d1c17;--ink:#f4f0e7;--muted:#9dc9bb;--orange:#ff8a2a;--aqua:#62ead7}
*{box-sizing:border-box}
body{margin:0;background:#06110e;color:var(--ink);font:17px/1.55 system-ui,sans-serif}
header{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:14px;padding:14px clamp(18px,4vw,52px);background:#07130ff2;border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
header div{display:grid}
header small,.library-hero small,.article-reader>small,.article-link small{color:var(--orange);font:700 .72rem/1.2 ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase}
.mark{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--orange);color:var(--orange);text-decoration:none;transform:rotate(45deg)}
header .quiet{margin-left:auto}
main{width:min(1180px,calc(100% - 32px));margin:auto;padding:54px 0 80px}
.library-hero{max-width:780px}
.library-hero h1,.article-reader h1{font:700 clamp(2.2rem,6vw,4.7rem)/1 Georgia,serif;margin:.3em 0}
.library-hero p{font-size:1.2rem;color:var(--muted)}
.library-tools{display:grid;gap:18px;margin:38px 0 24px;padding:24px;background:var(--panel);border:1px solid var(--line)}
label{display:grid;gap:8px;font-weight:700}
input{width:100%;padding:14px 16px;background:#07130f;border:1px solid #46675d;color:var(--ink);font:inherit}
.category-row{display:flex;gap:8px;flex-wrap:wrap}
button,.button-link{border:1px solid var(--line);background:#10231d;color:var(--ink);padding:10px 14px;font:inherit;text-decoration:none;cursor:pointer}
.category-row button.selected,.article-link.selected{border-color:var(--aqua);background:#153029}
.library-layout{display:grid;grid-template-columns:minmax(260px,360px) minmax(0,1fr);gap:24px}
.article-list{position:static;inset:auto;z-index:auto;display:grid;align-content:start;justify-content:stretch;gap:10px;min-height:0;padding:0;background:transparent;border:0}
.article-link{display:grid;gap:7px;text-align:left;padding:16px}
.article-link span{color:var(--muted);font-size:.9rem}
.article-reader{min-height:520px;padding:clamp(24px,5vw,58px);background:var(--panel);border:1px solid var(--line)}
.article-reader h1{font-size:clamp(2rem,4vw,3.5rem)}
.article-reader .lede{font-size:1.25rem;color:var(--aqua)}
.article-reader footer{display:grid;gap:5px;margin-top:42px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted)}
.empty{color:var(--muted)}
@media(max-width:760px){.library-layout{grid-template-columns:1fr}.article-reader{min-height:0}header strong{font-size:.9rem}}