@font-face { font-family: "Instrument Sans"; src: url("/fonts/instrument-sans-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/fonts/space-grotesk-500-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/InstrumentSerif-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }

:root { --ink:#24231f; --muted:#77766f; --line:#e9e8e3; --accent:#d65a36; --accent-soft:#fbf0e9; --canvas:#fff; --white:#fff; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; }
body { color:var(--ink); background:var(--canvas); font-family:"Instrument Sans", sans-serif; -webkit-font-smoothing:antialiased; }
button, textarea { font:inherit; }
button { cursor:pointer; }
.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; }
.app-shell { width:min(900px,100%); min-height:100dvh; margin:auto; background:var(--white); display:flex; flex-direction:column; box-shadow:0 12px 60px rgba(38,34,26,.035); }
.app-header { min-height:84px; padding:18px 38px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:#fff; z-index:2; }
.identity { display:flex; align-items:center; gap:13px; }
.mark { width:43px; height:43px; display:grid; place-items:center; border:1px solid #efe6dc; border-radius:14px; background:#fffaf5; }
.mark img { width:25px; height:25px; }
.identity-copy { display:flex; align-items:center; }
.identity-copy strong { font:500 17px/1.15 "Space Grotesk",sans-serif; letter-spacing:-.03em; }
.brand { color:#99968f; font-size:11px; letter-spacing:.02em; }
.brand strong { font:500 11px "Space Grotesk",sans-serif; color:#4c4943; letter-spacing:.17em; }
.conversation { width:100%; flex:1; min-height:0; max-height:calc(100dvh - 84px - 153px); overflow-y:auto; overscroll-behavior:contain; padding:0 40px 30px; scroll-behavior:smooth; }
.welcome { max-width:650px; margin:clamp(42px,8vh,85px) auto 0; text-align:center; }
.welcome-mark { width:67px; height:67px; margin:0 auto 23px; display:grid; place-items:center; background:#fff8f3; border:1px solid #f3e3d7; border-radius:22px; transform:rotate(-9deg); }
.welcome-mark img { width:46px; height:46px; border-radius:13px; }
.eyebrow { color:var(--accent); font:500 10px "Space Grotesk",sans-serif; letter-spacing:.2em; margin:0 0 12px; }
.welcome h1 { font:400 clamp(50px,7.7vw,79px)/.95 "Instrument Serif", Georgia,serif; letter-spacing:-.055em; margin:0; }
.welcome h1 em { font-weight:400; color:var(--accent); }
.welcome-copy { max-width:430px; margin:22px auto 0; color:#6b6962; font-size:16px; line-height:1.58; }
.suggestions { display:flex; justify-content:center; flex-wrap:wrap; gap:9px; margin:38px 0 0; }
.suggestions button { display:flex; align-items:center; gap:13px; border:1px solid #e9e7e2; border-radius:100px; color:#4d4a44; background:#fff; padding:12px 16px; font-size:13px; transition:border-color .18s,background .18s,transform .18s; }
.suggestions button:hover { border-color:#e3b8a8; background:#fffaf7; transform:translateY(-2px); }
.suggestions button span { color:var(--accent); font-size:15px; }
.messages { max-width:680px; margin:0 auto; padding-top:35px; display:flex; flex-direction:column; gap:25px; }
.message { display:flex; align-items:flex-end; gap:12px; width:100%; }
.message.user { justify-content:flex-end; }
.assistant-avatar { flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:11px; background:#f4f2ec; }
.assistant-avatar img { display:block; width:24px; height:24px; }
.message-content { max-width:min(72%,500px); display:flex; flex-direction:column; gap:5px; }
.message.user .message-content { align-items:flex-end; }
.message-name { font:500 11px "Space Grotesk",sans-serif; color:#99958d; padding:0 3px; }
.message-bubble { white-space:pre-wrap; overflow-wrap:anywhere; font-size:15px; line-height:1.57; padding:13px 17px; border-radius:17px; }
.message.assistant .message-bubble { background:#faf9f6; border:1px solid #efede7; border-bottom-left-radius:5px; }
.message.user .message-bubble { background:#f7eae2; border:1px solid #f1ded3; border-bottom-right-radius:5px; }
.message.notice { justify-content:center; }
.message.notice .message-bubble { max-width:460px; text-align:center; color:var(--muted); background:transparent; font-size:13px; padding:5px; }
.typing { max-width:680px; margin:25px auto 0; align-items:center; gap:10px; color:var(--muted); }
.typing:not([hidden]) { display:flex; }
.typing .assistant-avatar { width:38px; height:38px; border-radius:13px; }
.typing .assistant-avatar img { width:29px; height:29px; }
.typing:not([hidden]) .assistant-avatar img { animation:constal-spin 1.7s linear infinite; }
.typing-label { font-size:12px; }
@keyframes constal-spin { to { transform:rotate(360deg); } }
.composer-wrap { position:sticky; bottom:0; padding:17px 40px max(18px,env(safe-area-inset-bottom)); background:linear-gradient(to bottom,rgba(255,255,255,.95),#fff 30%); border-top:1px solid var(--line); z-index:2; }
.composer { max-width:680px; min-height:63px; margin:auto; border:1px solid #dedbd5; border-radius:20px; box-shadow:0 4px 22px rgba(35,30,24,.055); display:flex; align-items:flex-end; gap:10px; padding:10px 10px 10px 20px; transition:border-color .18s,box-shadow .18s; }
.composer:focus-within { border-color:#e4ad98; box-shadow:0 4px 26px rgba(198,79,46,.09); }
.composer textarea { flex:1; resize:none; outline:none; border:0; min-height:34px; max-height:132px; padding:6px 0 4px; background:transparent; color:var(--ink); font-size:15px; line-height:1.45; }
.composer textarea::placeholder { color:#a8a39d; }
.send { flex:none; width:40px; height:40px; border:0; border-radius:13px; background:var(--accent); color:#fff; display:grid; place-items:center; transition:background .18s,transform .18s; }
.send:hover:not(:disabled) { background:#b84b2b; transform:translateY(-2px); }
.send:disabled { background:#dedbd5; cursor:default; }
.send svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.composer-note { text-align:center; color:#aaa59d; font-size:10px; letter-spacing:.04em; margin:11px 0 0; }
.toast { position:fixed; bottom:160px; left:50%; transform:translateX(-50%); max-width:min(440px,90vw); padding:12px 16px; color:#fff; background:#3a332e; box-shadow:0 10px 30px #0002; border-radius:12px; font-size:13px; z-index:5; }
@media (max-width:640px) {
  body { background:#fff; }
  .app-shell { box-shadow:none; }
  .app-header { min-height:72px; padding:14px 18px; }
  .mark { width:40px; height:40px; }.mark img { width:23px; height:23px; }
  .conversation { max-height:calc(100dvh - 72px - 132px); padding:0 18px 22px; }
  .welcome { margin:clamp(42px,8vh,80px) auto 0; }
  .welcome-copy { font-size:15px; max-width:340px; }
  .suggestions { gap:8px; margin-top:31px; }
  .suggestions button { font-size:12px; padding:10px 13px; }
  .message-content { max-width:85%; }
  .composer-wrap { padding:12px 14px max(12px,env(safe-area-inset-bottom)); }
  .composer { min-height:58px; border-radius:18px; }
  .composer-note { margin-top:8px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; } }