:root { --ink:#24232a; --muted:#817e86; --paper:#ebe9e4; --card:#f8f7f3; --plum:#6d6071; --orange:#d77b59; --line:#d1cec8; --dark:#302d34; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'Instrument Sans',sans-serif; min-height:100vh; }
body:before { content:''; position:fixed; inset:0; pointer-events:none; opacity:.16; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); }
.shell { max-width:930px; margin:auto; padding:28px 34px 24px; min-height:100vh; display:flex; flex-direction:column; }
.nav { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); padding-bottom:18px; }
.wordmark { color:var(--ink); font-weight:700; letter-spacing:-.06em; font-size:20px; text-decoration:none; }.mark { display:inline-grid; place-items:center; margin-right:5px; width:24px; height:24px; border-radius:7px; background:var(--ink); color:var(--paper); }.dot { color:var(--orange); }.nav-actions { display:flex; align-items:center; gap:18px; }.chips-left,.new-chat,.counter,.disclaimer,footer,.speaker { font-family:'Instrument Sans',sans-serif; }.chips-left { color:var(--muted); font-size:13px; }.chips-left strong { color:var(--orange); font-size:16px; }.chip-icon { color:var(--orange); margin-right:3px; }.new-chat { color:var(--ink); border:1px solid var(--line); background:transparent; padding:8px 11px; cursor:pointer; font-size:13px; font-weight:600; }.new-chat:hover { border-color:var(--ink); background:var(--card); }
.landing { padding:62px 0 35px; min-height:690px; text-align:center; }.eyebrow,.section-label { text-transform:none; letter-spacing:.01em; font-size:13px; font-weight:600; }.eyebrow { display:flex; align-items:center; justify-content:center; gap:9px; color:var(--muted); }.pulse { display:inline-block; width:8px; height:8px; background:var(--orange); border-radius:50%; box-shadow:0 0 0 4px #d77b5920; }h1 { font-family:'Fraunces',serif; font-size:clamp(57px,7vw,82px); line-height:.96; letter-spacing:-.065em; margin:20px auto 17px; font-weight:600; max-width:700px; }h1 em,h2 em { color:var(--plum); font-style:italic; font-weight:500; }.lede { color:var(--muted); font-size:18px; margin:0 auto; max-width:420px; line-height:1.45; }.assistant-stage { position:relative; width:370px; height:430px; margin:4px auto 0; display:flex; align-items:center; justify-content:center; }.assistant { position:relative; border:0; background:transparent; padding:0; cursor:pointer; animation:float 4s ease-in-out infinite; }.assistant img { display:block; width:295px; height:370px; object-fit:contain; filter:drop-shadow(0 18px 12px #302d341c); transition:transform .25s ease; }.assistant:hover img { transform:rotate(-3deg) scale(1.03); }.burp { position:absolute; top:12px; right:12px; opacity:0; color:var(--plum); background:var(--card); border:1px solid var(--line); border-radius:50%; padding:8px 10px; font:13px 'Instrument Sans',sans-serif; transform:rotate(8deg); }.assistant.awake { animation:stumble 1s cubic-bezier(.4,1.5,.6,1) forwards; }.assistant.awake img { animation:burp 1s ease-in-out forwards; }.assistant.awake .burp { animation:pop 1s ease-out forwards; }.tap-hint { position:absolute; bottom:4px; left:0; right:0; color:var(--muted); font:italic 13px 'Instrument Sans',sans-serif; transform:rotate(-2deg); }.tap-hint span { color:var(--orange); font-size:18px; margin-left:4px; }
.conversation[hidden] { display:none; }.conversation { padding:42px 0 35px; }.conversation-head { margin-bottom:28px; }.conversation-head .eyebrow { justify-content:flex-start; }.conversation-title { display:flex; align-items:baseline; gap:18px; margin-top:12px; }.conversation h2 { font-family:'Fraunces',serif; font-size:34px; line-height:1; letter-spacing:-.045em; margin:0; font-weight:600; }.conversation-title .lede { margin:0; max-width:none; font-size:14px; }.chat { display:flex; flex-direction:column; gap:20px; }.message { display:flex; gap:12px; align-items:flex-start; max-width:780px; }.user-message { align-self:flex-end; flex-direction:row-reverse; }.avatar { flex:0 0 32px; height:32px; display:grid; place-items:center; background:var(--orange); color:white; font-weight:700; font-size:14px; }.user-avatar { background:var(--ink); }.bubble { padding:17px 19px 15px; background:var(--dark); color:#fffaf3; max-width:660px; }.user-message .bubble { background:var(--card); color:var(--ink); border:1px solid var(--line); }.speaker { color:#e8aa95; margin-bottom:10px; font-size:13px; font-weight:600; }.user-message .speaker { color:var(--muted); }.speaker span { opacity:.65; }.bubble p { margin:0 0 10px; font-size:17px; line-height:1.47; }.bubble p:last-child { margin-bottom:0; }.composer-wrap { margin-top:39px; }.suggestions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; }.section-label { color:var(--muted); margin-right:5px; }.suggestion { border:1px solid var(--line); background:transparent; color:var(--ink); padding:8px 10px; font-size:13px; cursor:pointer; }.suggestion:hover { border-color:var(--ink); background:var(--card); }.composer { background:var(--card); border:1px solid var(--ink); box-shadow:5px 5px 0 #302d3430; padding:17px 19px 14px; }textarea { display:block; resize:vertical; width:100%; min-height:83px; border:0; outline:0; background:transparent; color:var(--ink); padding:0 0 15px; font:19px/1.4 'Instrument Sans',sans-serif; }textarea::placeholder { color:#aaa7a2; }.composer-bottom { display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); padding-top:12px; }.counter { color:var(--muted); font-size:13px; }.composer button { display:flex; align-items:center; gap:20px; background:var(--plum); color:white; border:0; padding:12px 13px 12px 15px; font-weight:600; cursor:pointer; }.composer button:disabled { opacity:.6; cursor:wait; }.button-icon { font-size:19px; line-height:12px; }.disclaimer { color:var(--muted); margin:16px 0 0; font-size:12px; text-align:center; }footer { margin-top:auto; padding-top:45px; color:var(--muted); display:flex; justify-content:space-between; font-size:12px; }
.markdown { font-size:17px; line-height:1.5; }.markdown p { margin:0 0 13px; }.markdown p:last-child { margin-bottom:0; }.markdown h1,.markdown h2,.markdown h3 { font-family:'Fraunces',serif; line-height:1.1; margin:0 0 12px; color:#fffaf3; }.markdown h1 { font-size:25px; }.markdown h2 { font-size:22px; }.markdown h3 { font-size:19px; }.markdown ul,.markdown ol { margin:0 0 13px; padding-left:24px; }.markdown li { margin:5px 0; }.markdown li:last-child { margin-bottom:0; }.markdown strong { color:#fff; font-weight:700; }.markdown em { color:#f0c1ad; }.markdown code { color:#ffd5c1; background:#ffffff18; padding:2px 5px; border-radius:3px; font: .9em/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; }
.mascot-dock { display:none; position:fixed; z-index:10; left:22px; bottom:18px; align-items:flex-end; gap:8px; pointer-events:none; }.conversation-active .mascot-dock { display:flex; }.mascot-dock button { pointer-events:auto; position:relative; border:0; background:transparent; padding:0; cursor:pointer; animation:float 5s ease-in-out infinite; }.mascot-dock img { display:block; width:105px; height:132px; object-fit:contain; filter:drop-shadow(0 8px 7px #302d3428); transition:transform .2s ease; }.mascot-dock button:hover img { transform:rotate(-5deg) scale(1.06); }.dock-burp { position:absolute; top:-4px; right:-1px; opacity:0; background:var(--card); border:1px solid var(--line); border-radius:50%; padding:5px 7px; color:var(--plum); font-size:11px; transform:rotate(8deg); }.mascot-dock button.nudge img { animation:burp .65s ease-in-out; }.mascot-dock button.nudge .dock-burp { animation:pop .75s ease-out; }.dock-label { margin-bottom:12px; color:var(--muted); font-size:11px; font-style:italic; white-space:nowrap; transform:rotate(-3deg); }
@keyframes float { 0%,100% { transform:translateY(0) rotate(1deg); } 50% { transform:translateY(-8px) rotate(-1deg); } }@keyframes stumble { 0% { transform:translate(0,0) rotate(0); } 20% { transform:translate(-10px,-16px) rotate(-8deg); } 48% { transform:translate(13px,5px) rotate(8deg); } 72% { transform:translate(-6px,9px) rotate(-4deg); } 100% { transform:translate(0,0) rotate(0); } }@keyframes burp { 0%,100% { transform:rotate(0) scale(1); } 24% { transform:rotate(-9deg) scale(1.05); } 42% { transform:rotate(8deg) scale(.95); } 65% { transform:rotate(-3deg) scale(1.01); } }@keyframes pop { 0%,30% { opacity:0; transform:translate(7px,9px) scale(.4) rotate(12deg); } 55% { opacity:1; transform:translate(0,0) scale(1) rotate(8deg); } 100% { opacity:0; transform:translate(18px,-12px) scale(1.1) rotate(12deg); } }
@media (max-width:650px) { .shell { padding:20px 17px 16px; }.nav-actions { gap:10px; }.chips-left { font-size:10px; }.new-chat { font-size:11px; padding:7px 8px; }.landing { padding:45px 0 25px; min-height:690px; }.assistant-stage { width:320px; height:400px; margin-top:10px; }.assistant img { width:255px; height:330px; }.tap-hint { bottom:0; }.conversation { padding-top:32px; padding-bottom:110px; }.conversation-title { display:block; }.conversation h2 { font-size:36px; margin-bottom:5px; }.conversation-title .lede { font-size:14px; }.bubble p,.markdown { font-size:16px; }.markdown h1 { font-size:23px; }.markdown h2 { font-size:20px; }.markdown h3 { font-size:18px; }.suggestions { display:grid; grid-template-columns:1fr 1fr; }.section-label { grid-column:1/-1; }.suggestion { text-align:left; }.composer { box-shadow:4px 4px 0 #302d3430; padding:15px; }.mascot-dock { left:10px; bottom:9px; }.mascot-dock img { width:78px; height:98px; }.dock-label { display:none; }footer { font-size:10px; gap:18px; } }