:root{
  --canvas:#f5f1e8;--paper:#fcfaf4;--ink:#1f2a25;--muted:#747970;
  --line:#d9d2c4;--green:#173f37;--accent:#a65c35;
  --shadow:0 18px 50px rgba(33,42,36,.08)
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{
  color:var(--ink);
  background:radial-gradient(circle at 18% 0%,rgba(255,255,255,.72),transparent 30rem),var(--canvas);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased
}
button,textarea,select{font:inherit}
button,select{color:inherit}
.app{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.masthead{
  width:min(100% - 40px,960px);min-height:92px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  border-bottom:1px solid var(--line);flex:0 0 auto
}
.wordmark{display:flex;align-items:center;gap:13px}
.mark{
  width:31px;height:31px;display:grid;place-items:center;border:1px solid var(--ink);
  border-radius:50%;font-family:Georgia,"Times New Roman",serif;font-size:16px;
  transform:rotate(-7deg)
}
.wordmark strong{display:block;font:600 20px/1.1 Georgia,"Times New Roman",serif;letter-spacing:.01em}
.wordmark span{display:block;margin-top:4px;color:var(--muted);font-size:11px;letter-spacing:.025em}
.new{padding:7px 0;border:0;border-bottom:1px solid transparent;background:none;color:var(--muted);font-size:12px;cursor:pointer}
.new:hover{color:var(--ink);border-color:var(--ink)}
.conversation{flex:1;min-height:0;width:min(100% - 40px,760px);margin:0 auto;display:flex;flex-direction:column;overflow:hidden}
.messages{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.stream{padding:66px 0 48px;display:flex;flex-direction:column;gap:38px}
.message{max-width:88%}
.message.user{align-self:flex-end;max-width:78%}
.who{margin-bottom:10px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.assistant .who{display:flex;align-items:center;gap:8px}
.assistant .who::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.user .who{text-align:right}
.bubble{white-space:pre-wrap}
.assistant .bubble{max-width:690px;font:400 clamp(18px,2.3vw,23px)/1.67 Georgia,"Times New Roman",serif;letter-spacing:-.008em}
.user .bubble{padding:13px 17px;border-radius:18px 18px 4px 18px;background:var(--green);color:#fff;font-size:14px;line-height:1.65;box-shadow:0 9px 26px rgba(23,63,55,.12)}
.thinking{display:none;align-items:center;gap:9px;margin-bottom:34px;color:var(--muted);font:italic 14px Georgia,"Times New Roman",serif}
.thinking.show{display:flex}
.thinking i{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:breathe 1.2s ease-in-out infinite}
@keyframes breathe{50%{opacity:.25;transform:scale(.7)}}
.starter-wrap{padding-bottom:16px}
.starter-title{margin-bottom:11px;color:var(--muted);font-size:10px;letter-spacing:.13em;text-transform:uppercase}
.starters{display:flex;flex-wrap:wrap;gap:8px 18px}
.starter{padding:5px 0;border:0;border-bottom:1px solid var(--line);background:none;color:#525b55;font:400 13px/1.5 Georgia,"Times New Roman",serif;cursor:pointer;text-align:left}
.starter:hover{color:var(--green);border-color:var(--green)}
.composer{position:relative;flex:0 0 auto;padding:12px 0 20px;background:linear-gradient(180deg,rgba(245,241,232,0),var(--canvas) 18%,var(--canvas))}
.compose-card{padding:12px 12px 10px 17px;border:1px solid var(--line);border-radius:14px;background:rgba(252,250,244,.96);box-shadow:var(--shadow)}
textarea{display:block;width:100%;min-height:55px;max-height:150px;resize:none;padding:7px 4px 8px;border:0;outline:0;background:transparent;color:var(--ink);font-size:15px;line-height:1.55}
textarea::placeholder{color:#989990}
.compose-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.relationship{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11px}
.relationship select{max-width:150px;padding:3px 18px 3px 0;border:0;border-bottom:1px solid var(--line);outline:0;background:transparent;font-size:11px;cursor:pointer}
.relationship.locked{color:#8b8c84}
.relationship.locked::after{content:"locked";padding:2px 6px;border:1px solid var(--line);border-radius:999px;font-size:9px;letter-spacing:.06em;text-transform:uppercase}
.relationship select:disabled{color:#63675f;cursor:not-allowed;opacity:1}
.send{width:38px;height:38px;border:0;border-radius:50%;background:var(--green);color:#fff;font-size:18px;cursor:pointer;transition:transform .18s ease,opacity .18s ease}
.send:hover:not(:disabled){transform:translateY(-1px)}
.send:disabled{opacity:.28;cursor:not-allowed}
.fineprint{max-width:650px;margin:10px auto 0;text-align:center;color:#858980;font-size:10px;line-height:1.55}
@media(max-width:640px){
  .masthead{width:min(100% - 28px,960px);min-height:80px}
  .conversation{width:min(100% - 28px,760px)}
  .wordmark span{display:none}
  .stream{padding:42px 0 38px;gap:30px}
  .message{max-width:96%}.message.user{max-width:88%}
  .assistant .bubble{font-size:18px;line-height:1.62}
  .starter-title,.relationship span{display:none}
  .starters{gap:5px 14px}
  .compose-card{padding-left:13px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}