@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Manrope:wght@400;500;600;700&display=swap");
:root { --ink:#eee9e0; --muted:#aaa398; --bg:#161514; --panel:#201e1b; --line:#37332e; --accent:#e09b65; --accent-soft:#443125; --code:#121110; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:Manrope,system-ui,sans-serif; }
.site-shell { min-height:100vh; display:grid; grid-template-columns:318px minmax(0,1fr); }
.sidebar { position:sticky; top:0; height:100vh; overflow:auto; background:var(--panel); border-right:1px solid var(--line); padding:31px 18px 26px; }
.brand { padding:0 8px 24px; } .eyebrow,.meta-label,.topbar-note { color:var(--accent); font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
h1 { margin:7px 0 8px; font:600 31px/1.05 Fraunces,Georgia,serif; letter-spacing:-.04em; } .brand p { margin:0; color:var(--muted); font-size:13px; }
.search-label { display:block; padding:0 8px 7px; color:var(--muted); font-size:12px; font-weight:700; } input { width:100%; border:1px solid var(--line); border-radius:8px; padding:11px 12px; background:#171615; color:var(--ink); font:14px Manrope,sans-serif; outline:none; } input:focus { border-color:var(--accent); box-shadow:0 0 0 3px #e09b6526; }
.chat-list { margin-top:16px; display:grid; gap:3px; } .chat-link { width:100%; border:0; border-radius:8px; padding:11px 10px; text-align:left; color:var(--muted); background:transparent; cursor:pointer; font:inherit; } .chat-link:hover { background:#2a2723; color:var(--ink); } .chat-link.active { background:var(--accent-soft); color:var(--ink); } .link-title { display:block; font-size:13px; font-weight:700; line-height:1.28; } .link-subtitle { display:block; margin-top:4px; color:inherit; opacity:.74; font:10px "DM Mono",monospace; }
.main-content { min-width:0; } .topbar { height:61px; display:flex; align-items:center; justify-content:space-between; padding:0 6.4vw; border-bottom:1px solid var(--line); } .menu-button { display:none; } .chat { max-width:950px; margin:0 auto; padding:57px 6.4vw 80px; }
.chat h2 { margin:8px 0 10px; font:600 clamp(32px,4vw,52px)/1 Fraunces,Georgia,serif; letter-spacing:-.05em; } .lede { max-width:700px; margin:0; color:var(--muted); font-size:15px; line-height:1.65; }
.meta-grid { display:flex; flex-wrap:wrap; gap:10px; margin:31px 0 34px; } .meta { min-width:135px; padding:12px 14px; border:1px solid var(--line); border-radius:9px; background:#1b1917; } .meta strong { display:block; margin-top:5px; color:var(--ink); font-size:12px; font-weight:600; line-height:1.35; } .transcript-heading { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; } .transcript-heading h3 { margin:0; font:600 20px Fraunces,Georgia,serif; } .transcript-heading span { color:var(--muted); font-size:12px; }
.transcript { margin:0; padding:24px; border:1px solid var(--line); border-radius:12px; overflow:auto; background:var(--code); color:#ddd7cf; font:13px/1.68 "DM Mono",ui-monospace,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
.empty { color:var(--muted); padding:18px 9px; font-size:14px; } .menu-button { border:1px solid var(--line); border-radius:7px; padding:7px 10px; background:#201e1b; color:var(--ink); font:600 12px Manrope,sans-serif; }
@media (max-width:760px) { .site-shell { display:block; } .sidebar { position:fixed; z-index:3; width:min(88vw,330px); transform:translateX(-102%); transition:transform .18s ease; box-shadow:20px 0 50px #0008; } .sidebar.open { transform:translateX(0); } .menu-button { display:inline-block; } .topbar { padding:0 20px; } .chat { padding:36px 20px 58px; } .transcript { padding:16px; font-size:12px; } }