@font-face{font-family:"Source Sans 3";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/SourceSans3-400.ttf") format("truetype")}
@font-face{font-family:"Source Sans 3";font-weight:600;font-style:normal;font-display:swap;src:url("fonts/SourceSans3-600.ttf") format("truetype")}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/IBMPlexSans-400.ttf") format("truetype")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-style:normal;font-display:swap;src:url("fonts/IBMPlexSans-500.ttf") format("truetype")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-style:normal;font-display:swap;src:url("fonts/IBMPlexSans-600.ttf") format("truetype")}
@font-face{font-family:"Newsreader";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/Newsreader-400.ttf") format("truetype")}
@font-face{font-family:"Newsreader";font-weight:500;font-style:normal;font-display:swap;src:url("fonts/Newsreader-500.ttf") format("truetype")}

:root{--ui-font:"Source Sans 3",sans-serif;--heading-font:var(--ui-font);--muted:#62626a;--heading-weight:600;--heading-tracking:-.035em}
:root[data-type="plex"]{--ui-font:"IBM Plex Sans",sans-serif;--heading-weight:500;--heading-tracking:-.045em}
:root[data-type="newsreader"]{--heading-font:"Newsreader",Georgia,serif;--heading-weight:400;--heading-tracking:-.025em}
body{font-family:var(--ui-font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
header{height:68px}
.hero{padding:48px 0 40px;gap:64px}
section:not(.hero){padding:42px 0}
h1,h2{font-family:var(--heading-font);font-weight:var(--heading-weight)}
h1{font-size:clamp(38px,3.35vw,52px);line-height:1.12;letter-spacing:var(--heading-tracking);max-width:720px;margin:0 0 25px}
.headline-line{display:block;white-space:nowrap}
.intro{font-size:20px;line-height:1.5;color:#62626a;max-width:53ch;margin:0}
.prototype-note{font-size:14px;line-height:1.55;color:#6b6b73;max-width:55ch;margin:15px 0 0}
.prototype-note a{color:inherit;text-decoration-color:#b8b8c0;text-underline-offset:3px}
.prototype-note a:hover{color:var(--ink);text-decoration-color:currentColor}
.hero-actions{margin-top:27px;margin-bottom:0;font-size:15px}
.hero-actions .pill{font-size:15px}
.hero-chat{padding:26px;gap:0;min-height:340px}
.hero-chat .chat-caption{font-size:12px;line-height:1.4;color:#62626a;margin-bottom:9px;order:1}
.hero-chat .bubble.user{order:0;margin-bottom:18px}
.hero-chat .bubble.answer{order:2;font-family:"Libre Caslon Text",Georgia,serif;font-size:17px;line-height:1.5;padding:15px 17px;max-height:210px}
.hero-chat .hero-label{order:3;font:600 19px/1.35 var(--ui-font);letter-spacing:-.015em;margin:15px 0 0;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.hero-dose{font-size:13px;font-weight:400;color:#62626a;letter-spacing:0}
.hero-dose::before{content:"·";margin-right:7px}
.hero-chat #hero-open{order:4;margin-top:10px;color:#62626a}
.hero-meta{order:3;display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:15px;width:100%;min-width:0}
.hero-identity{display:flex;align-items:center;gap:10px;min-width:0}
.hero-identity-copy{min-width:0}
.hero-icon{width:64px;height:76px;object-fit:contain;flex:none}
.hero-meta .hero-label{display:block;margin:0;font-size:18px;line-height:1.3}
.hero-meta .persona-name{display:block;overflow-wrap:anywhere}
.hero-meta .hero-dose{display:block;margin-top:3px;font-size:12px}
.hero-meta .hero-dose::before{display:none}
.hero-meta #hero-open{margin-top:4px;text-align:left}
.hero-controls{display:flex;align-items:center;gap:5px;flex:none}
.hero-arrow{width:34px;height:34px;display:grid;place-items:center;border:1px solid #dddde3;background:#fff;border-radius:50%;color:#414148;padding:0;transition:background .16s ease,border-color .16s ease,transform .16s ease}
.hero-arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hero-arrow:hover:not(:disabled){border-color:#a0a0a9;background:#eaeaee;color:#191a1b;transform:translateY(-1px)}
.hero-arrow:active:not(:disabled){transform:scale(.94)}
.hero-arrow:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.hero-arrow:disabled{opacity:.35}
.hero-counter{font-size:11px;font-variant-numeric:tabular-nums;color:#62626a;min-width:28px;text-align:center}
.hero-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
h2{font-size:34px;line-height:1.15;letter-spacing:-.025em}
#atlas>.muted{font-size:17px;line-height:1.5;margin:9px 0 0;color:#62626a;max-width:75ch}
.section-top h2{margin:0}
.legend{margin-top:23px;margin-bottom:18px}
.sample-note{margin-top:22px}
.card h3{font:600 22px/1.2 var(--ui-font);letter-spacing:-.025em;margin-bottom:12px}
.pair-parents{font:400 14px/1.45 var(--ui-font);color:#62626a}
.pair-parents span{font:inherit}
.parent-chips button{font:600 17px/1.35 var(--ui-font)}
.modal-head h2{font-family:var(--ui-font);font-weight:600;letter-spacing:-.025em}
.bars{grid-template-columns:repeat(40,minmax(0,1fr))}
.bar{min-width:0}
#morph{display:inline-block;position:relative;vertical-align:baseline;white-space:nowrap}
.morph-base{display:inline-block}
.morph-historical{position:absolute;inset:0;display:flex;align-items:baseline;justify-content:center;visibility:hidden;pointer-events:none;letter-spacing:-.025em}
#morph.is-historical .morph-base{visibility:hidden}
#morph.is-historical .morph-historical{visibility:visible}
@media(max-width:1100px){.headline-line{white-space:normal}}
@media(max-width:900px) and (min-width:651px){.hero{grid-template-columns:1.15fr .85fr;gap:30px;padding-top:38px}.intro{font-size:18px}.hero-chat{padding:20px}h1{font-size:42px}.headline-line{display:inline}}
@media(max-width:650px){header{height:60px;gap:12px}.brand{font-size:12px}nav{gap:13px}.hero{padding:30px 0;gap:26px}section:not(.hero){padding:30px 0}h1{font-size:clamp(36px,8.6vw,48px);letter-spacing:var(--heading-tracking)}.headline-line{display:inline;white-space:normal}.headline-line+.headline-line:before{content:" "}.intro{font-size:18px}.prototype-note{font-size:13px}.hero-chat{min-height:0;padding:22px}.hero-chat .bubble.answer{max-height:245px}h2{font-size:30px}.hero-actions{gap:22px}.hero-actions .pill{padding:11px 18px}#atlas>.muted{font-size:16px}}
@media(min-width:651px) and (max-width:820px){.hero{grid-template-columns:1fr;gap:28px}h1{font-size:44px}.headline-line{display:block}}
@media(max-width:400px){.hero-meta{flex-wrap:wrap;gap:10px}.hero-identity{width:100%}.hero-controls{margin-left:auto}}
.hero-chat .bubble.answer{height:224px;max-height:224px;scrollbar-width:thin;scrollbar-color:#c9c9d1 transparent;overscroll-behavior:contain;touch-action:pan-y}
.hero-identity{flex:1;min-width:0}
.hero-identity-copy{flex:1}
@media(max-width:650px){.hero-icon{width:56px;height:67px}.hero-chat .bubble.answer{height:220px;max-height:220px}.hero-controls{gap:7px}.hero-arrow{width:38px;height:38px}}
@media(prefers-reduced-motion:reduce){.hero-arrow{transition:none}.hero-arrow:hover:not(:disabled),.hero-arrow:active:not(:disabled){transform:none}}

/* Reserve the whole card, including two-line names, rather than only the reply. */
.hero{border-bottom:1px solid var(--line)}
.hero-chat{height:480px;min-height:480px;max-height:480px}
.hero-chat .bubble.user{flex:0 0 auto}
.hero-chat .chat-caption{flex:0 0 34px;min-height:34px;max-height:34px;display:flex;align-items:flex-end}
.hero-chat .bubble.answer{flex:1 1 0;min-height:0;height:auto;max-height:none}
.hero-chat .hero-meta{flex:0 0 96px;min-height:96px;max-height:96px}
@media(max-width:1000px){.hero{grid-template-columns:1fr;gap:28px}}
@media(max-width:400px){.hero-chat{height:520px;min-height:520px;max-height:520px}.hero-chat .hero-meta{flex-basis:140px;min-height:140px;max-height:140px;align-content:space-between}.hero-chat .hero-identity{flex:0 0 100%;width:100%}}
