:root {
  --bg: #FAFAF7;
  --ink: #1A1A1A;
  --mid: #999690;
  --muted: #6B6B66;
  --line: #E5E3DC;
  --soft: #F1EFE8;
  --accent: #B55A30;
  --research: #B55A30;
  --content: #5A7C5A;
  --documents: #6B6BAA;
  --images: #A05A7A;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Outfit', system-ui, -apple-system, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{
  font-family:var(--sans);font-weight:400;color:var(--ink);
  line-height:1.5;min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* ── NAV ── */
.nav{max-width:960px;margin:0 auto;padding:28px 48px 0;display:flex;justify-content:space-between;align-items:center}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none}
.brand-logo{height:22px;width:auto;margin-right:8px;vertical-align:middle}
.brand-name{font-family:var(--serif);font-weight:400;font-size:18px;color:var(--ink)}
.brand-name i{color:var(--accent);font-style:normal}
.brand-by{font-size:11px;color:var(--mid);font-weight:400;letter-spacing:.04em}
.nav-back{font-size:13px;color:var(--mid);text-decoration:none;transition:color .2s}
.nav-back:hover{color:var(--ink)}

/* ── HERO ── */
.hero{max-width:960px;margin:0 auto;padding:72px 48px 0}
.hero-top{display:block;margin-bottom:16px}
.hero h1{
  font-family:var(--serif);font-weight:300;font-size:52px;
  letter-spacing:-0.035em;line-height:1;color:var(--ink);
}
.hero p{font-size:16px;color:var(--mid);font-weight:300;max-width:480px;line-height:1.6;margin-bottom:24px}

/* ── MODES ── */
.modes{max-width:960px;margin:0 auto;padding:0 48px 48px}
.mode{
  display:flex;align-items:stretch;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--line);position:relative;cursor:pointer;
  transition:background .2s;
}
.mode:hover{background:var(--soft)}
.mode-color{width:2px;flex-shrink:0;transition:opacity .1s;opacity:0}
.mode:hover .mode-color{opacity:1}
.mode-primary h2{font-size:40px}
.mode-stacked .mode-content{flex-direction:column;align-items:flex-start;gap:8px}
.mode-stacked .desc{text-align:left;max-width:none}
.mode-content{
  flex:1;display:flex;align-items:baseline;justify-content:space-between;
  gap:32px;padding:32px 0 32px 20px;
}
.mode-left{flex:1}
.mode h2{
  font-family:var(--serif);font-weight:400;font-size:32px;
  letter-spacing:-0.02em;line-height:1.2;
  transition:color .2s;margin-bottom:4px;
}
.mode:hover h2{color:var(--mode-color)}
.mode .desc{
  font-size:14px;color:var(--mid);font-weight:300;
  text-align:right;max-width:240px;line-height:1.5;
  flex-shrink:0;
}
.mode .arrow-hint{
  font-size:14px;color:var(--mid);opacity:0;
  transition:opacity .2s,transform .2s;margin-left:8px;
}
.mode:hover .arrow-hint{opacity:1;transform:translateX(3px)}

/* unavailable */
.mode.dim{cursor:default}
.mode.dim:hover{background:transparent}
.mode.dim:hover .mode-color{opacity:0}
.mode.dim h2{color:var(--mid);font-weight:300}
.mode.dim .desc{color:var(--mid)}
.mode.dim:hover h2{color:var(--mid)}

/* ── FOOTER ── */
.footer{max-width:960px;margin:0 auto;padding:32px 48px 48px;display:flex;justify-content:flex-start;align-items:center}
.footer-left{font-size:12px;color:var(--mid);font-weight:300}
.footer-left a{color:var(--mid);text-decoration:none;transition:color .15s}
.footer-left a:hover{color:var(--ink)}

/* ── MODEBAR ── */
.modebar{position:fixed;top:0;left:0;right:0;height:3px;z-index:50}

/* ── FORM ── */
.form-wrap{max-width:960px;margin:0 auto;padding:72px 48px 96px}
.form-wrap h1{
  font-family:var(--serif);font-weight:300;font-size:44px;
  letter-spacing:-0.03em;line-height:1.15;margin-bottom:48px;
}
.field{margin-bottom:44px}
.field-label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--mid);font-weight:500;margin-bottom:14px}
.topic-input{
  width:100%;border:none;border-bottom:1px solid var(--line);
  background:transparent;padding:12px 0;font-size:22px;
  font-family:var(--sans);font-weight:300;color:var(--ink);
  outline:none;transition:border-color .2s;
}
.topic-input:focus{border-bottom-color:var(--accent)}
.topic-input::placeholder{color:var(--line)}

.pills{display:flex;gap:6px;flex-wrap:wrap}
.pill{
  font-family:var(--sans);font-size:13px;font-weight:400;
  padding:8px 16px;border:1px solid var(--line);background:transparent;
  color:var(--muted);cursor:pointer;border-radius:0;transition:all .15s;
}
.pill:hover{border-color:var(--ink);color:var(--ink)}
.pill.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pill .sub{margin-left:6px;font-size:11px;opacity:.5}

.btn-go{
  background:var(--ink);color:var(--bg);border:none;
  padding:14px 32px;font-family:var(--sans);font-size:14px;
  font-weight:500;cursor:pointer;letter-spacing:.02em;transition:opacity .15s;
}
.btn-go:hover{opacity:.8}
.btn-go:disabled{opacity:.25;cursor:not-allowed}
.btn-outline{
  background:transparent;color:var(--ink);border:1px solid var(--line);
  padding:14px 32px;font-family:var(--sans);font-size:14px;
  font-weight:500;cursor:pointer;transition:border-color .15s;
}
.btn-outline:hover{border-color:var(--ink)}

/* ── OUTPUT ── */
.output-wrap{max-width:960px;margin:0 auto;padding:56px 48px 96px}
.output-wrap .eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--accent);font-weight:500;margin-bottom:10px}
.output-wrap h1{font-family:var(--serif);font-weight:300;font-size:38px;letter-spacing:-0.025em;line-height:1.15;margin-bottom:10px}
.out-meta{font-size:13px;color:var(--mid);font-weight:300;margin-bottom:32px}
.out-meta span+span::before{content:' · ';opacity:.4}

.progress{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 0 40px;padding:6px 0}
.progress-line{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13px;color:var(--mid)}
.progress-line .dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0}
.progress-line.running .dot{animation:pulse 1.4s ease-in-out infinite}
.progress-line.done .dot{background:var(--line)}
.progress-line.error .dot{background:#c0392b}
.progress-line .label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.progress-line.done{opacity:.45}
.progress-line .ico{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);font-weight:500;flex-shrink:0}
.progress-line.done .ico{color:var(--mid)}
@keyframes pulse{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}

.report{max-width:680px;font-size:16px;line-height:1.7;color:var(--ink)}
.report h1,.report h2,.report h3{font-family:var(--serif);color:var(--ink);font-weight:400}
.report h1{font-size:28px;margin:48px 0 14px}
.report h2{font-size:24px;margin:44px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.report h2:first-child{margin-top:0}
.report h3{font-size:18px;margin:28px 0 10px}
.report p{margin:0 0 16px}
.report ul,.report ol{margin:0 0 16px;padding-left:22px}
.report li{margin-bottom:5px}
.report a{color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor;transition:opacity .15s}
.report a:hover{opacity:.7}
.report strong{font-weight:600}
.report em{font-style:italic}
.report code{font-family:'SF Mono',Menlo,Consolas,monospace;font-size:13px;background:var(--soft);padding:2px 5px}
.report pre{background:var(--soft);padding:14px 16px;overflow-x:auto;margin:16px 0;font-size:13px;line-height:1.55}
.report pre code{background:none;padding:0;font-size:inherit}
.report blockquote{border-left:2px solid var(--accent);padding-left:16px;margin:16px 0;color:var(--muted);font-style:italic}
.report .caret{display:inline-block;width:2px;height:18px;background:var(--accent);margin-left:2px;vertical-align:text-bottom;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

.sources{max-width:680px;margin-top:56px;padding-top:24px;border-top:1px solid var(--line)}
.sources h3{font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--accent);font-weight:500;margin:0 0 16px}
.sources ol{list-style:none;padding:0;counter-reset:src}
.sources li{font-size:13px;color:var(--mid);margin-bottom:8px;padding-left:24px;position:relative;word-break:break-all;counter-increment:src}
.sources li::before{content:counter(src);position:absolute;left:0;font-size:11px;color:var(--accent);font-weight:500}
.sources a{color:var(--mid);text-decoration:none;border-bottom:1px solid transparent;transition:all .15s}
.sources a:hover{color:var(--ink);border-bottom-color:var(--ink)}

.actions{max-width:680px;margin-top:48px;padding-top:24px;border-top:1px solid var(--line);display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.status-pill{margin-left:auto;font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--accent);font-weight:500}
.status-pill.error{color:#c0392b}

/* ── DOCUMENTS ── */
.dropzone{border:2px dashed var(--line);height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:border-color .2s,background .2s;text-align:center;padding:32px;border-radius:0}
.dropzone:hover,.dropzone.dragover{border-color:var(--accent);background:var(--soft)}
.dropzone.processing{opacity:.55;pointer-events:none;cursor:progress}
.dropzone-text{font-size:18px;color:var(--ink);font-weight:400}
.dropzone-meta{font-size:11px;color:var(--mid);font-weight:300;letter-spacing:.06em;text-transform:uppercase}
.dropzone-status{margin-top:24px;font-size:14px;color:var(--mid);font-weight:300;animation:pulse-text 1.6s ease-in-out infinite}
.dropzone-error{margin-top:24px;font-size:14px;color:#c0392b;font-weight:400;line-height:1.5}

.doc-qa-section{margin-top:56px;padding-top:28px;border-top:1px solid var(--line);max-width:680px}
.qa-pair{margin-bottom:36px}
.qa-question{font-size:14px;color:var(--documents);font-weight:500;margin-bottom:14px;line-height:1.5;letter-spacing:.005em}
.qa-question::before{content:'Q · ';font-weight:500;letter-spacing:.14em;font-size:10px;text-transform:uppercase;opacity:.85}
.qa-answer{font-size:15px;line-height:1.65;color:var(--ink)}
.qa-input-row{display:flex;gap:16px;align-items:flex-end;margin-top:24px}
.qa-input-row .qa-input{flex:1;font-size:18px;padding:10px 0}
.qa-input-row .btn-go{flex-shrink:0;padding:11px 24px}

/* ── IMAGE STUDIO ── */
.img-result{display:block;max-width:680px;width:100%;height:auto;border:1px solid var(--line);margin:0 0 20px}
.img-loading{font-size:16px;color:var(--mid);font-weight:300;margin:48px 0;animation:pulse-text 1.6s ease-in-out infinite;letter-spacing:.01em}
@keyframes pulse-text{0%,100%{opacity:.45}50%{opacity:1}}
.img-prompt-used{font-size:13px;color:var(--mid);font-weight:300;font-style:italic;max-width:680px;line-height:1.55;margin:0 0 8px}
.img-error{font-size:14px;color:#c0392b;font-weight:400;margin:32px 0;max-width:680px;line-height:1.5}

.hidden{display:none !important}

@media(max-width:720px){
  .nav{padding:20px 24px 0}
  .hero{padding:48px 24px 0}
  .hero h1{font-size:42px}
  .modes{padding:0 24px 40px}
  .mode-content{padding:24px 0 24px 14px;flex-direction:column;gap:6px}
  .mode h2{font-size:24px}
  .mode .desc{text-align:left;max-width:none}
  .footer{padding:24px 24px 40px;flex-direction:column;gap:12px;align-items:flex-start}
  .form-wrap{padding:48px 24px 72px}
  .form-wrap h1{font-size:30px;margin-bottom:36px}
  .topic-input{font-size:18px}
  .output-wrap{padding:36px 24px 72px}
  .output-wrap h1{font-size:28px}
}