/* ---- reset (trimmed from site style.css) ---- */
html,body,div,span,h1,h2,h3,h4,h5,h6,p,a,b,i,em,strong,img,ol,ul,li,footer,header,section,button{
  margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;
}
footer,header,section{display:block}
body{line-height:1}
ol,ul{list-style:none}

/* ---- tokens: identical to site style.css ---- */
:root{
  --color-bg:#FFFBF7;
  --color-bg-dark:#efefef;
  --color-border:#888;
  --color-text:#34345D;
  --color-text-muted:#444;
  --color-primary:#0056B3;
  --color-primary-hover:#007BFF;
  --color-disabled:#CCC;
  --color-success:#28A745;
  --color-error:#DC3545;
  --font-family:"Nunito",sans-serif;
  --font-size-lg:22px;
  --font-size-md:18px;
  --font-size-sm:14px;
  --line-height:1.6;
  --radius:4px;
  --gap:1em;
  /* perspective accents, drawn from the site's CMYK band */
  --p-cynic:#34345D;
  --p-empiricist:#2B8FCC;
  --p-speculator:#B58B00;
  --p-empath:#D82E8A;
  --demo-surface:#fff;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --color-bg:#18150f;
    --color-bg-dark:#252119;
    --color-border:#5a4f42;
    --color-text:#e8dcc8;
    --color-text-muted:#9c8e7c;
    --color-primary:#d4920a;
    --color-primary-hover:#f0a500;
    --color-disabled:#4a4035;
    --p-cynic:#9c8e7c;
    --p-empiricist:#6fb6e0;
    --p-speculator:#e0b44a;
    --p-empath:#e06aa8;
    --demo-surface:#201c15;
    color-scheme:dark;
  }
  :root:not([data-theme="light"]) #logo img,
  :root:not([data-theme="light"]) #logo svg{filter:invert(1) brightness(1.6) sepia(1)}
}
[data-theme="dark"]{
  --color-bg:#18150f;--color-bg-dark:#252119;--color-border:#5a4f42;
  --color-text:#e8dcc8;--color-text-muted:#9c8e7c;--color-primary:#d4920a;
  --color-primary-hover:#f0a500;--color-disabled:#4a4035;
  --p-cynic:#9c8e7c;--p-empiricist:#6fb6e0;--p-speculator:#e0b44a;--p-empath:#e06aa8;
  --demo-surface:#201c15;color-scheme:dark;
}
[data-theme="dark"] #logo img,[data-theme="dark"] #logo svg{filter:invert(1) brightness(1.6) sepia(1)}

body *{box-sizing:border-box}
body{
  font-family:var(--font-family);
  font-weight:400;
  font-size:var(--font-size-md);
  line-height:var(--line-height);
  color:var(--color-text);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--color-text)}
a:hover{color:var(--color-primary-hover)}
i,em{font-style:italic}
b,strong{font-weight:700}
#logo img{width:10%;min-width:200px;max-width:250px;display:block}
#logo svg{width:100%;height:auto;display:block}
#wrapper{width:100%;padding:0 4vw;margin:0 auto;max-width:1200px}

/* ---- color band + chrome (matches site) ---- */
#color-band{display:flex}
#color-band>*{width:25%;border-top:5px solid var(--color-border)}
#color-band .cyan{border-color:#4DABE9}
#color-band .magenta{border-color:#D82E8A}
#color-band .yellow{border-color:#FDF251}
header,footer{padding-top:1.5rem;font-size:1em;position:relative}
header{display:flex;gap:var(--gap);justify-content:space-between;align-items:center}
header .links li,footer .links li{display:inline}
header .links li+li,footer .links li+li{margin-left:16px}
footer{margin:3em 0 2em}
footer #copyright{margin-bottom:.5em}

/* ---- page ---- */
#chat-page{max-width:840px;margin:0 auto}
#chat-page .hero{
  font-family:"Libre Caslon Text",Georgia,serif;
  font-size:clamp(2rem,5vw,3.4rem);
  line-height:1.22;
  font-weight:400;
  margin:2em 0 .5em;
  text-wrap:balance;
}
#chat-page .standfirst{
  font-size:clamp(1.05rem,2.2vw,var(--font-size-lg));
  color:var(--color-text-muted);
  max-width:33em;
  margin-bottom:2.5em;
}

/* ---- the demo ---- */
#chat-page .demo{
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  background:var(--demo-surface);
  padding:1.25em;
}
#chat-page .demo-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:1em;
  padding-bottom:.9em;margin-bottom:1.1em;
  border-bottom:1px solid var(--color-border);
  font-size:var(--font-size-sm);color:var(--color-text-muted);
}
#chat-page .demo-head .agent{color:var(--color-text);font-weight:700;font-size:var(--font-size-md)}
#chat-page .replay{
  display: none;
  font:inherit;font-size:var(--font-size-sm);cursor:pointer;
  background:none;border:1px solid var(--color-border);
  border-radius:var(--radius);padding:.35em .8em;color:var(--color-text);
}
#chat-page .replay:hover{border-color:var(--color-primary-hover);color:var(--color-primary-hover)}
#chat-page .replay:focus-visible,#chat-page .cta:focus-visible{outline:2px solid var(--color-primary-hover);outline-offset:2px}

#chat-page .you{
  margin-bottom:1.4em;padding-left:.9em;
  border-left:3px solid var(--color-border);
}
#chat-page .you .who{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:.25em}
#chat-page .you .said{font-size:var(--font-size-md)}

#chat-page .perspectives{margin-bottom:1.3em}
#chat-page .perspectives .caption{
  font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:.8em;
}
#chat-page .p{
  display:grid;grid-template-columns:2.1em 1fr;gap:.6em;
  margin-bottom:.95em;opacity:0;transform:translateY(4px);
  transition:opacity .45s ease,transform .45s ease;
}
#chat-page .p.in{opacity:1;transform:none}
#chat-page .p .avatar{font-size:1.3em;line-height:1.3;text-align:center}
#chat-page .p .name{font-weight:700;font-size:var(--font-size-sm);letter-spacing:.01em}
#chat-page .p .take{font-size:var(--font-size-sm);color:var(--color-text-muted);line-height:1.55}
#chat-page .p--cynic .name{color:var(--p-cynic)}
#chat-page .p--empiricist .name{color:var(--p-empiricist)}
#chat-page .p--speculator .name{color:var(--p-speculator)}
#chat-page .p--empath .name{color:var(--p-empath)}

#chat-page .weave{display:flex;height:10px;margin:1.3em 0 1.1em;gap:0}
#chat-page .weave span{flex:1;height:2px;align-self:center;opacity:0;transition:opacity .5s ease}
#chat-page .weave.in span{opacity:1}
#chat-page .weave span:nth-child(1){background:var(--p-cynic)}
#chat-page .weave span:nth-child(2){background:var(--p-empiricist)}
#chat-page .weave span:nth-child(3){background:var(--p-speculator)}
#chat-page .weave span:nth-child(4){background:var(--p-empath)}

#chat-page .answer{opacity:0;transition:opacity .4s ease}
#chat-page .answer.in{opacity:1}
#chat-page .answer .who{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:.35em}
#chat-page .answer .body{min-height:7.5em}
#chat-page .answer .body p+p{margin-top:.7em}
#chat-page .caret{
  display:inline-block;width:.55em;height:1.05em;vertical-align:-.15em;
  background:var(--color-text);margin-left:1px;animation:blink 1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}
#chat-page .caret.done{display:none}

/* ---- CTA ---- */
#chat-page .cta-block{margin:2.2em 0 1em;text-align:center}
#chat-page .cta{
  display:inline-block;font-weight:700;text-decoration:none;
  background:var(--color-primary);color:#fff;
  padding:.75em 1.7em;border-radius:var(--radius);border:1px solid transparent;
}
#chat-page .cta:hover{background:var(--color-primary-hover);color:#fff}
#chat-page .cta-note{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-top:.7em}

/* ---- prose + features ---- */
#chat-page .prose{margin:3em auto 0;text-align:justify;max-width:38em}
#chat-page .prose p+p{margin-top:1em}
#chat-page .features{margin-top:2.5em;display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
#chat-page .features li{border:1px solid var(--color-border);border-radius:var(--radius);padding:1em}
#chat-page .features h3{font-weight:700;margin-bottom:.4em}
#chat-page .features p{font-size:var(--font-size-sm);color:var(--color-text-muted)}
#chat-page .closing{
  font-family:"Libre Caslon Text",Georgia,serif;
  font-size:clamp(1.4rem,3vw,2rem);line-height:1.3;
  text-align:center;margin:2.5em auto 0;max-width:20em;
}

@media only screen and (max-width:800px){
  header .links{display:block;text-align:right}
  #chat-page .features{grid-template-columns:1fr}
  #chat-page .prose{text-align:left}
  #chat-page .p{grid-template-columns:1.8em 1fr}
}
@media (prefers-reduced-motion: reduce){
  #chat-page .p,#chat-page .answer,#chat-page .weave span{transition:none}
  #chat-page .caret{animation:none}
}