@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Instrument+Serif:ital@0;1&display=swap');

:root { --ink:#111310; --paper:#f8f7f2; --muted:#72736c; --line:#deded7; --acid:#d8fb52; --serif:'Instrument Serif', Georgia, serif; --sans:'DM Sans', Arial, sans-serif; --mono:'DM Mono', monospace; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); }
button, input { font:inherit; }
button { cursor:pointer; }
.shell { max-width:1160px; margin:auto; padding:24px 38px 32px; min-height:100vh; display:flex; flex-direction:column; position:relative; }
.masthead { display:flex; align-items:center; justify-content:space-between; }
.brand { color:var(--ink); text-decoration:none; font-size:24px; font-weight:700; letter-spacing:-1.6px; }.brand span { font-family:var(--serif); font-style:italic; font-weight:400; }.brand i { color:#78a300; font-style:normal; }
.settings-trigger { border:1px solid var(--line); background:transparent; color:#464741; border-radius:100px; padding:8px 13px; font:11px var(--mono); letter-spacing:.02em; }.key-dot { display:inline-block; width:6px; height:6px; background:#a4a59d; border-radius:50%; margin:0 6px 1px 0; }.key-dot.ready { background:#72a100; }.key-dot.needs-setup { background:#d26a51; animation:pulse 1.2s infinite; }@keyframes pulse{50%{opacity:.25;transform:scale(1.35)}}
.hero { width:min(800px,100%); margin:clamp(48px,8vw,88px) auto 60px; }.eyebrow { font:10px var(--mono); letter-spacing:.13em; color:#74756e; margin:0 0 18px; }.hero h1 { font-size:clamp(58px,9vw,114px); letter-spacing:-.065em; line-height:.82; margin:0; font-weight:600; }.hero h1 em { font-family:var(--serif); font-weight:400; }.lede { font-size:18px; line-height:1.45; color:#64655e; max-width:420px; margin:31px 0; }
.topic-form { background:white; border:1px solid #d1d2ca; border-radius:9px; padding:6px; display:flex; box-shadow:0 11px 28px #2728140b; }.topic-form input { flex:1; min-width:0; border:0; outline:0; padding:13px 14px; font-size:16px; background:transparent; }.topic-form input::placeholder { color:#999a93; }.topic-form button { border:0; border-radius:5px; background:var(--ink); color:white; padding:12px 17px; font-size:13px; font-weight:600; white-space:nowrap; }.topic-form button:hover,.dark-button:hover { background:#32352e; }.topic-form button span { color:var(--acid); font-size:17px; margin-left:6px; }
.suggestions { display:flex; gap:12px; align-items:center; margin:15px 2px; font:10px var(--mono); color:#85867f; }.suggestions button { color:#51524c; background:transparent; border:0; padding:0; border-bottom:1px solid #bfc0b9; }
.settings { position:absolute; z-index:10; right:38px; top:67px; width:min(800px,calc(100% - 76px)); margin:0; padding:25px; background:#efeee8; display:grid; grid-template-columns:1fr 1fr; gap:38px; border-radius:8px; box-shadow:0 12px 32px #23240c1f; }.close-settings { position:absolute; right:10px; top:8px; border:0; background:transparent; color:#60615a; font-size:22px; line-height:1; padding:5px 9px; }.close-settings:hover { color:var(--ink); }.settings h2 { font-size:25px; letter-spacing:-.04em; margin:0 0 8px; }.settings p:not(.eyebrow) { font-size:13px; line-height:1.5; color:#60615a; margin:0; }.key-form label { display:block; font-size:11px; font-weight:600; margin-bottom:7px; }.key-input-row { display:flex; border:1px solid #c9cac3; background:white; }.key-input-row input { border:0; outline:0; padding:10px; flex:1; min-width:0; font:12px var(--mono); }.key-input-row button { background:transparent; border:0; border-left:1px solid #ddd; color:#5c5d56; font-size:11px; padding:0 9px; }.key-actions { display:flex; align-items:center; gap:15px; margin-top:10px; }.save-key,.use-model { border:0; background:var(--ink); color:white; padding:8px 11px; border-radius:4px; font-size:11px; font-weight:600; }.use-model { margin:0 0 8px; }.use-model:disabled { background:#a4a59d; cursor:not-allowed; }.text-button { border:0; padding:0; background:transparent; font-size:11px; color:#71726b; text-decoration:underline; }.generation-controls { border-top:1px solid #d7d7d0; margin-top:18px; padding-top:16px; }.model-label-row { display:flex; justify-content:space-between; align-items:start; }.model-label-row .text-button { margin-top:0; }.generation-controls input,.generation-controls select { width:100%; border:1px solid #c9cac3; border-radius:3px; outline:0; padding:9px 10px; background:#fff; color:var(--ink); font:12px var(--sans); margin-bottom:7px; }.generation-controls input:disabled,.generation-controls select:disabled { color:#888982; background:#f8f8f5; }.generation-controls p { margin:0 0 12px!important; font-size:11px!important; }.active-model { color:#31332d!important; font:10px var(--mono)!important; }
.loading { margin:90px auto; text-align:center; }.loading-mark { display:flex; justify-content:center; gap:5px; margin-bottom:15px; }.loading-mark span { height:10px; width:10px; border-radius:50%; background:#8cbe00; animation:bounce 1s infinite alternate; }.loading-mark span:nth-child(2){animation-delay:.16s}.loading-mark span:nth-child(3){animation-delay:.32s}@keyframes bounce{to{transform:translateY(-9px);opacity:.35}}.loading p{font:12px var(--mono); color:#6d6e67;}
.result { width:min(210mm,100%); margin:0 auto 50px; }.result-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; gap:10px; }.result-toolbar p { margin:0; color:#707169; font:10px var(--mono); }.result-toolbar > div:last-child { display:flex; gap:7px; }.result-context { display:grid; gap:3px; }.result-toolbar .print-hint { font-size:9px; color:#989991; }.result-toolbar button { background:transparent; border:1px solid #cbccc5; border-radius:4px; padding:8px 11px; font-size:11px; color:#383a34; }.result-toolbar .dark-button { border-color:var(--ink); background:var(--ink); color:#fff; }
.paper { background:#fff; padding:13mm; box-shadow:0 3px 20px #23240c11; border:1px solid #e4e4dd; }.paper > :first-child { margin-top:0; }.paper h1 { font-size:42px; letter-spacing:-.06em; line-height:.91; max-width:620px; margin:0 0 9px; }.paper .title-row { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; }.paper .topic-icon { width:42px; height:42px; flex:0 0 42px; border:1px solid var(--ink); border-radius:50%; display:grid; place-items:center; }.paper .topic-icon svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }.paper .deck { font:italic 20px/1.1 var(--serif); color:#5d5e57; max-width:620px; margin:0 0 21px; }.paper h2 { border-top:1px solid var(--ink); padding-top:7px; margin:18px 0 7px; font:600 10px var(--mono); letter-spacing:.12em; }.paper p { font-size:11px; line-height:1.38; margin:0 0 8px; }.paper ul { margin:0; padding-left:15px; font-size:10.5px; line-height:1.35; }.paper li { margin:0 0 4px; }.paper strong { font-weight:700; }.paper .fact-grid { border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:grid; grid-template-columns:repeat(3,1fr); margin:17px 0; }.paper .fact { padding:9px 10px 10px 0; border-right:1px solid var(--line); margin-right:10px; }.paper .fact:last-child { border:0; }.paper .fact b { display:block; font:9px var(--mono); letter-spacing:.09em; color:#777870; margin-bottom:4px; }.paper .fact span { font-size:10px; line-height:1.25; display:block; }.brief-content { column-count:2; column-gap:10mm; column-fill:balance; }.brief-content section,.visual { break-inside:avoid; }.visual { margin:0 0 13px; border-top:1px solid var(--ink); border-bottom:1px solid var(--line); padding:7px 0 9px; }.visual-head { display:flex; justify-content:space-between; gap:12px; align-items:baseline; margin-bottom:7px; }.visual-head b { font:600 9px var(--mono); letter-spacing:.11em; }.visual-head span { color:#696a63; font:italic 13px/1 var(--serif); text-align:right; }.visual-items { display:grid; gap:6px; }.visual-item { font-size:9.5px; line-height:1.25; }.visual-item b { display:block; font:9px var(--mono); letter-spacing:.06em; margin-bottom:1px; }.visual.timeline .visual-items { grid-template-columns:repeat(var(--steps),1fr); gap:0; }.visual.timeline .visual-item { position:relative; padding:7px 6px 0 0; border-top:1px solid var(--ink); }.visual.timeline .visual-item::before { content:''; position:absolute; top:-3px; left:0; width:5px; height:5px; background:var(--ink); border-radius:50%; }.visual.process .visual-items { grid-template-columns:repeat(var(--steps),1fr); gap:7px; }.visual.process .visual-item { border:1px solid var(--line); padding:6px; position:relative; }.visual.process .visual-item:not(:last-child)::after { content:'→'; position:absolute; right:-7px; top:50%; transform:translateY(-50%); background:#fff; font-size:12px; }.visual.comparison .visual-items { grid-template-columns:1fr 1fr; gap:8px; }.visual.comparison .visual-item { padding:7px; border-left:2px solid var(--ink); background:#f6f6f2; }.visual.metric .visual-items { grid-template-columns:repeat(var(--steps),1fr); gap:8px; }.visual.metric .visual-item { border-top:3px solid var(--ink); padding-top:5px; }.visual.metric .visual-item b { font-size:14px; letter-spacing:-.05em; }.paper .sources { break-inside:avoid; margin-top:16px; padding-top:7px; border-top:1px solid var(--line); color:#5c5d57; font-size:8px; line-height:1.4; }.paper .sources b { font:9px var(--mono); letter-spacing:.1em; color:#242620; }.paper .sources a { color:inherit; word-break:break-word; }.error { width:min(800px,100%); margin:0 auto 40px; border-left:3px solid #c14632; background:#fff0eb; padding:13px 15px; color:#81311f; font-size:13px; line-height:1.4; }
.notice { position:fixed; z-index:30; right:24px; top:18px; width:min(420px,calc(100vw - 48px)); background:#20231e; color:#fff; border-radius:5px; box-shadow:0 10px 28px #22230e33; padding:12px 14px; font-size:12px; line-height:1.4; }.notice.error { background:#81311f; }.notice.success { background:#3d5f18; }
.app-health { color:#8a5e22!important; font:10px var(--mono)!important; margin-bottom:12px!important; }.app-health.ready { color:#48721b!important; }.app-health.failed { color:#9b321f!important; }
footer { margin-top:auto; padding-top:18px; border-top:1px solid var(--line); display:flex; justify-content:space-between; color:#8b8c85; font:10px var(--mono); }
.sr-only { position:absolute; height:1px;width:1px;clip:rect(0,0,0,0);overflow:hidden;white-space:nowrap; }
@media (max-width:620px) { .shell{padding:18px 18px 24px}.hero{margin:64px auto 50px}.topic-form{display:block}.topic-form button{width:100%;}.settings{right:18px;top:62px;width:calc(100% - 36px);grid-template-columns:1fr;gap:22px;padding:20px}.paper{padding:28px}.paper .fact-grid{grid-template-columns:1fr}.paper .fact{border-right:0;border-bottom:1px solid var(--line);padding:11px 0;margin:0}.paper .fact:last-child{border:0}.brief-content{column-count:1}.visual.timeline .visual-items,.visual.process .visual-items,.visual.metric .visual-items{grid-template-columns:1fr}.visual.timeline .visual-item{padding:7px 0}.visual.process .visual-item:not(:last-child)::after{content:'↓';right:8px;top:auto;bottom:-11px}.result-toolbar{align-items:flex-start;gap:10px}.result-toolbar > div:last-child{flex-wrap:wrap;justify-content:flex-end}.result-toolbar .print-hint{display:none}footer{gap:9px;line-height:1.4}.lede{font-size:16px}}
@media print { @page { size:A4 portrait; margin:10mm 12mm; } body { background:#fff; }.shell{display:block;padding:0;max-width:none}.masthead,.hero,.settings,.loading,.result-toolbar,footer,.error{display:none!important}.result{display:block!important;width:auto;margin:0}.paper{width:auto;padding:0;border:0;box-shadow:none}.paper h1{font-size:30pt;margin-bottom:5px}.paper .deck{font-size:14pt;line-height:1.02;margin-bottom:12px}.paper .fact-grid{margin:10px 0}.paper .fact{padding:6px 8px 7px 0}.paper h2{padding-top:5px;margin:12px 0 5px;font-size:8.5px}.paper p{font-size:8pt;line-height:1.27;margin-bottom:6px}.paper ul{font-size:7.5pt;line-height:1.23}.paper li{margin-bottom:2px}.visual{margin:0 0 8px;padding:5px 0 6px}.visual-head{margin-bottom:5px}.visual-item{font-size:8.5px;line-height:1.18}.visual.process .visual-item{padding:4px}.visual.metric .visual-item b{font-size:12px}.paper .sources{margin-top:8px;padding-top:5px;font-size:6pt} }