:root{color-scheme:light;--ink:#171717;--muted:#737373;--accent:#b68000;--yellow:#f5ca45;--border:#e8e8e8;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
*{box-sizing:border-box}
html{overflow-x:clip}
body{margin:0;background:#fff;color:var(--ink);font-size:1rem;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,textarea{font:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;top:-5rem;left:1rem;padding:.7rem 1rem;background:var(--ink);color:#fff;z-index:10}
.skip-link:focus{top:1rem}
a:focus-visible,button:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.site-header{min-height:5.5rem;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;justify-content:center;padding:1.25rem 1.5rem}
.site-header nav{display:flex;gap:2.75rem;align-items:center;font-size:.9375rem}
.site-header nav a{position:relative;padding:.5rem 0;color:#737373;transition:color .2s}
.site-header nav a:hover,.site-header nav a[aria-current=page]{color:var(--ink)}
.site-header nav a[aria-current=page]:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--yellow)}
.home-main{width:min(100% - 4rem,72rem);margin:0 auto;padding:clamp(4rem,10vh,7rem) 0 4rem}
.introduction{position:relative;text-align:center}
.introduction h1{font-size:clamp(1.5rem,6.2vw,5rem);font-weight:550;line-height:1.18;letter-spacing:-.055em;margin:0}
.intro-line{display:block}
.greeting-line{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;white-space:nowrap;gap:0 .22em}
.role-line{display:flex;justify-content:center;margin-top:.08em}
.name-group{display:inline-flex;align-items:center;gap:.2em;white-space:nowrap}
.inline-portrait{width:1.1em;height:1.15em;object-fit:cover;object-position:50% 35%;border-radius:.23em;vertical-align:middle;flex-shrink:0;margin:0 .025em;box-shadow:0 0 0 1px #00000006}
.accent{color:var(--accent)}
.role-rotator{font-size:clamp(2.6rem,12.5vw,10rem);letter-spacing:-.055em;display:inline-grid;grid-template-columns:minmax(0,1fr);vertical-align:bottom;overflow:hidden;position:relative;text-align:left}
.role-rotator.is-sized{transition:width .55s cubic-bezier(.2,.75,.2,1)}
.role-sizing,.role-text{grid-area:1/1}
.role-sizing{visibility:hidden;display:grid}
.role-sizing>span{grid-area:1/1;white-space:nowrap;justify-self:start}
.role-text{white-space:nowrap;text-align:left}
.role-text:after,.role-sizing>span:after{content:"";display:inline-block;width:.07em;height:.82em;margin-left:.06em;vertical-align:-.06em;background:currentColor}
.role-text:after{animation:caret-blink 1.05s steps(1) infinite}
.role-text.is-typing:after{animation:none}
@keyframes caret-blink{50%{opacity:0}}
.location{display:flex;align-items:center;justify-content:center;gap:.4rem;margin:1.2rem 0 0;color:var(--muted);font-size:.875rem;letter-spacing:0}
.location svg{flex-shrink:0}
.home-chat{max-width:64rem;margin:3rem auto 0}
.question-suggestion{display:flex;align-items:center;justify-content:center;min-height:3rem;margin-bottom:1rem;text-align:center}
.question-suggestion button{appearance:none;display:inline-flex;align-items:center;gap:.7rem;border:1px solid #ece4cf;border-radius:1.4rem;background:#fffdf7;color:#5f5a4e;font-size:1.0625rem;line-height:1.45;letter-spacing:-.02em;padding:.45rem .9rem .45rem .5rem;max-width:100%;text-align:left;transition:border-color .2s,background .2s,color .2s,transform .2s,box-shadow .2s}
.question-suggestion button:not([aria-disabled=true]):hover{border-color:#e2c56d;background:#fdf6e1;color:#2f2b22;transform:translateY(-1px);box-shadow:0 .4rem 1.2rem #9a6f0b12}
.suggestion-label{flex-shrink:0;padding:.28rem .6rem;border-radius:1rem;background:#fcefc6;color:#83600a;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.suggestion-arrow{flex-shrink:0;color:#b08a1e;transition:transform .25s cubic-bezier(.2,.75,.2,1)}
.question-suggestion button:not([aria-disabled=true]):hover .suggestion-arrow{transform:translate(2px,-2px)}
.question-suggestion button[aria-disabled=true]{cursor:default}
#question-text{display:block;opacity:1;transition:opacity .45s ease}
#question-text.fading-out{opacity:0}
.chat-form{--glass-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' rx='21'/%3E%3C/svg%3E");position:relative;z-index:0;padding:1.6rem 1.75rem 1.4rem;background:none;border:1px solid transparent;border-radius:1.4rem;--rim:#e4e4e4d9;transition:--rim .2s}
.chat-form:focus-within{--rim:#c4b17cd9}
@property --rim{syntax:"<color>";inherits:true;initial-value:#e4e4e4d9}
.chat-form textarea{display:block;width:100%;min-height:7rem;max-height:16rem;resize:none;background:transparent;border:0;outline:none!important;padding:.15rem 0 .8rem;color:var(--ink);font-size:1.375rem;line-height:1.6;font-weight:400;letter-spacing:-.025em}
.chat-form textarea::placeholder{color:#908773;opacity:1}
.composer-bottom{display:flex;justify-content:flex-end;align-items:center;gap:1rem}
.composer-actions{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.chat-send{width:3rem;height:3rem;flex-shrink:0;border:0;border-radius:.9rem;background:var(--yellow);color:var(--ink);display:grid;place-items:center;transition:background .2s,transform .2s}
.chat-send:hover{background:#edbd2d;transform:translateY(-1px)}
button:disabled{opacity:.45;cursor:wait;transform:none}
.chat-status{color:#6d571d;font-size:.875rem;margin:.75rem .5rem 0;white-space:pre-line}
.chat-status:empty{display:none}
.chat-messages{padding:1rem .25rem .5rem;text-align:left}
.chat-message{margin:0 0 1.5rem;max-width:70ch;font-size:1rem;animation:message-in .45s cubic-bezier(.2,.75,.2,1) both}
.chat-message.user{animation-duration:.35s}
@keyframes message-in{from{opacity:0;transform:translateY(.6rem)}}
.chat-message.user{margin-left:auto;background:#fcf5e3;border:1px solid #f0e2bf;padding:.75rem 1rem;border-radius:1rem 1rem .25rem 1rem;max-width:85%;width:fit-content;color:#302b22}
.chat-message.assistant{color:#4d4d4d}
.chat-message.assistant p:first-of-type{color:#252525}
.chat-message.assistant p+p{margin-top:1rem}
.chat-message.pending{font-size:.9375rem}
.chat-message.assistant.pending p{color:transparent;background:linear-gradient(90deg,#a39a86 0 35%,#e9e2cf 50%,#a39a86 65% 100%) 0 0/300% 100%;-webkit-background-clip:text;background-clip:text;animation:thinking 1.6s linear infinite;width:fit-content}
@keyframes thinking{from{background-position:100% 0}to{background-position:0 0}}
.chat-message p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7}
.chat-sources{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.8rem;font-size:.8125rem}
.chat-sources a{border-bottom:1px solid #d4b24e;padding-bottom:.15rem;color:#755300}
.chat-panel.is-active .chat-form{position:sticky;bottom:1rem;z-index:2;display:grid;grid-template-columns:minmax(0,1fr);gap:.7rem;padding:1rem 1.2rem}
/* The frosted layer overhangs the box and is masked back to its rounded shape, so the
   blur stays as strong at the rim as in the middle. The overhang stays within the phone's
   side margins, so the page never scrolls sideways. Clipping with overflow:hidden
   would stop the blur from seeing the text behind the box. */
.chat-form:after{content:"";position:absolute;inset:-1.25rem;padding:1.25rem;z-index:-1;background:var(--glass-tint,#ffffff70);-webkit-backdrop-filter:var(--glass-blur,blur(6px) saturate(1.8));backdrop-filter:var(--glass-blur,blur(6px) saturate(1.8));-webkit-mask:var(--glass-mask) content-box 0 0/100% 100% no-repeat;mask:var(--glass-mask) content-box 0 0/100% 100% no-repeat;pointer-events:none}
/* The rim is drawn here, above the glass, so the blur never smears a grey border inward.
   A light sheen runs along it, brightest at the top-left edge. */
.chat-form:before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(145deg,#ffffff8c 0%,#fff0 35% 70%,#ffffff66 100%),linear-gradient(var(--rim),var(--rim));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
/* Softly fade the conversation out at the very bottom edge of the screen, below the glass. */
.home-chat:has(.chat-panel.is-active):after{content:"";position:fixed;left:0;right:0;bottom:0;height:1.25rem;background:linear-gradient(#fff0,#fff);pointer-events:none;z-index:1}
/* Typing on a phone: the whole page scrolls inside the body, which is sized to the visible
   area above the keyboard (set up in home-chat.js). Safari has nothing left to pan, so the
   glass composer stays put just above the keyboard while the page scrolls as usual. */
.chat-typing body{position:fixed;left:0;right:0;top:var(--vv-top,0px);height:var(--vv-height,100%);min-height:0;display:block;overflow:hidden auto;overscroll-behavior:contain}
.chat-typing .home-chat:has(.chat-panel.is-active):after{display:none}
.chat-typing .chat-panel.is-active .chat-form{bottom:1.25rem}
/* The composer is sticky within the chat panel, so it can only pin as high as the panel
   reaches. Stretch the panel's (invisible) box up to the top of the page, without moving
   anything, so the composer stays above the keyboard even at the top of the page. */
.chat-typing .chat-panel.is-active{margin-top:-300vh;pointer-events:none}
.chat-typing .chat-panel.is-active:before{content:"";display:block;height:300vh}
.chat-typing .chat-panel.is-active>*{pointer-events:auto}
.chat-panel.is-active .chat-form textarea{min-height:1.5rem;max-height:10.5rem;resize:none;padding:0;font-size:1rem;line-height:1.5;letter-spacing:-.015em;align-self:center;scrollbar-width:thin;scrollbar-color:#ded8c8 transparent}
.chat-panel.is-active .composer-bottom{grid-column:1/-1;justify-content:flex-end;align-items:center;gap:1rem}
.chat-panel.is-active .chat-send{width:2.4rem;height:2.4rem;border-radius:.7rem}
.chat-reset{appearance:none;border:1px solid #0000001a;border-radius:.65rem;padding:.5rem .8rem;min-height:2.4rem;background:#ffffff99;color:#5b564c;font-size:.8125rem;white-space:nowrap}
.chat-reset:hover{background:#fffc}
.composer-hint{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem 1rem;margin-right:auto;font-size:.75rem;color:#807766;line-height:1.5}
.composer-hint button{border:0;background:none;font-size:.75rem;color:inherit;padding:0;white-space:nowrap;text-decoration:underline;text-underline-offset:.2em}
.chat-panel.is-active .chat-status{grid-column:1/-1;margin:0;font-size:.875rem}
.paste-attachment{grid-column:1/-1;display:flex;align-items:center;gap:.6rem;border:1px solid #e8ddc8;background:#fff;border-radius:.65rem;padding:.5rem .65rem;width:fit-content;max-width:100%;color:#514a3d;font-size:.875rem}
.paste-badge{color:#9a6f0b;background:#fcf5e3;border-radius:.2rem;padding:.1rem .3rem;font-size:.6875rem;letter-spacing:.08em;flex-shrink:0}
.paste-attachment button{appearance:none;border:0;background:none;color:#8a806c;font-size:1.125rem;line-height:1;padding:.2rem .25rem;margin-left:auto;flex-shrink:0}
.paste-preview{grid-column:1/-1;border:1px solid #ece4d4;border-radius:.65rem;background:#fff;padding:.7rem}
.paste-preview pre,.message-paste pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;line-height:1.6;max-height:12rem;overflow:auto;margin:0;font-size:.875rem}
.message-paste{border-top:1px solid #eee0bd;padding-top:.5rem;margin-top:.6rem;font-size:.8125rem}
.message-paste summary{cursor:pointer;color:#82714d}
.message-paste pre{margin-top:.6rem}
.message-paste:only-child{border:0;padding:0;margin:0}
.home-page{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.home-page .home-main{flex:1 0 auto}
@keyframes home-rise{from{opacity:0;transform:translateY(.45em)}}
@keyframes home-pop{from{opacity:0;transform:scale(.5) rotate(-10deg)}}
@keyframes home-fade-up{from{opacity:0;transform:translateY(1.1rem)}}
.greeting-words{display:inline-block;animation:home-rise .85s cubic-bezier(.2,.75,.2,1) .05s both}
.name-group .accent{display:inline-block;animation:home-rise .85s cubic-bezier(.2,.75,.2,1) .22s both}
.inline-portrait{animation:home-pop .75s cubic-bezier(.3,1.35,.5,1) .3s both}
.intro-connector{display:inline-block;animation:home-rise .85s cubic-bezier(.2,.75,.2,1) .38s both}
.role-rotator{animation:home-rise .85s cubic-bezier(.2,.75,.2,1) .48s both}
.location{animation:home-fade-up .7s cubic-bezier(.2,.75,.2,1) .7s both}
.question-suggestion{animation:home-fade-up .7s cubic-bezier(.2,.75,.2,1) .8s both}
.chat-panel{animation:home-fade-up .8s cubic-bezier(.2,.75,.2,1) .9s backwards}
.flock-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .5s}
.flock-canvas.is-on{opacity:1}
.role-text{transition:opacity .5s}
.role-rotator.is-flock .role-text{opacity:0}
.role-rotator.is-flock .role-text:after,.role-rotator.is-flock .role-sizing>span:after{display:none}
@media(min-width:1450px){.home-main{padding-top:8rem}.home-chat{margin-top:3.5rem}}
@media(max-width:800px){.home-main{width:calc(100% - 2.5rem);padding-top:4rem}.question-suggestion{min-height:4.6rem}.home-chat{margin-top:2.5rem}.chat-form{padding:1.3rem}.chat-form textarea{font-size:1.125rem}}
@media(max-width:500px){.site-header{min-height:4.5rem}.suggestion-label{display:none}.site-header nav{gap:2rem}.home-main{padding-top:3rem;padding-bottom:2rem}.introduction{width:calc(100vw - 1.5rem);margin-left:50%;transform:translateX(-50%)}.home-chat{margin-top:2rem}.question-suggestion{min-height:4.4rem;margin-bottom:.6rem}.question-suggestion button{font-size:.95rem;padding:.5rem .85rem}.location{margin-top:1rem}.chat-form textarea{min-height:6.5rem}.composer-bottom{gap:.5rem}.chat-send{width:2.75rem;height:2.75rem}.chat-form{border-radius:1.15rem;--glass-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' rx='17'/%3E%3C/svg%3E")}.chat-messages{padding:.75rem 0 .25rem}.chat-message{max-width:100%}.chat-panel.is-active .chat-form{bottom:.75rem;padding:.85rem 1rem;gap:.6rem}.chat-panel.is-active .chat-form textarea{grid-column:1/-1}.chat-panel.is-active .composer-bottom{grid-column:1/-1}.chat-panel.is-active .composer-hint{gap:.6rem}.chat-message.user{max-width:92%}}
@media(max-width:400px){.question-suggestion{min-height:5.4rem}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.role-text:after{visibility:hidden}}
