:root { color-scheme: dark; --bg:#0b0d0c; --panel:#131614; --line:#29302b; --muted:#98a39b; --ink:#edf5ef; --mint:#96f2b1; --mint2:#43c875; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 80% 0%,#15321f 0,transparent 32%),var(--bg); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; }
.shell { width:min(900px,calc(100% - 32px)); min-height:100vh; margin:auto; display:flex; flex-direction:column; }
header { display:flex; align-items:center; gap:12px; padding:24px 0; border-bottom:1px solid var(--line); }
.mark { width:38px; height:38px; display:grid; place-items:center; color:#07140b; background:var(--mint); font-weight:900; clip-path:polygon(50% 0,100% 100%,0 100%); padding-top:9px; }
h1,header p { margin:0; } h1 { font-size:16px; letter-spacing:.04em; } header p { color:var(--muted); font-size:12px; }
.beta { margin-left:auto; padding:6px 9px; border:1px solid #477252; border-radius:999px; color:var(--mint); font:600 10px/1 monospace; letter-spacing:.08em; }
.hero { margin:auto 0; padding:70px 0 44px; }
.eyebrow,.role { color:var(--mint2); font:700 11px/1.3 monospace; letter-spacing:.12em; }
h2 { margin:14px 0 18px; font-size:clamp(38px,7vw,72px); line-height:.98; letter-spacing:-.055em; max-width:820px; }
h2 em { color:var(--mint); font-style:normal; }
.hero>p:not(.eyebrow) { max-width:650px; color:var(--muted); line-height:1.6; }
.suggestions { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:30px; }
.suggestions button { min-height:86px; padding:14px; text-align:left; color:#cfd8d1; background:#111512bb; border:1px solid var(--line); border-radius:12px; cursor:pointer; }
.suggestions button:hover { border-color:var(--mint2); color:var(--ink); }
.messages { display:flex; flex-direction:column; gap:20px; padding:32px 0 160px; }
.message { max-width:84%; scroll-margin-bottom:140px; }
.message.user { align-self:flex-end; padding:14px 17px; border-radius:16px 16px 3px 16px; background:#1d2b21; }
.message.assistant { align-self:flex-start; width:100%; }
.content { margin-top:8px; line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; }
.user .role { color:#8ea095; }.user .content { margin-top:4px; }
.thinking .content::after { content:""; display:inline-block; width:7px; height:7px; margin-left:5px; border-radius:50%; background:var(--mint); animation:pulse 1s infinite alternate; }
.error .content { color:#ff9c9c; }
.sources { display:flex; flex-wrap:wrap; gap:6px; margin-top:15px; padding-top:12px; border-top:1px solid var(--line); }
.sources a,.sources span { color:var(--muted); text-decoration:none; font-size:11px; padding:5px 8px; background:var(--panel); border-radius:999px; }
.composer { position:fixed; left:50%; bottom:45px; transform:translateX(-50%); width:min(900px,calc(100% - 32px)); display:flex; gap:10px; padding:10px; background:#141815f2; border:1px solid #38453c; border-radius:18px; backdrop-filter:blur(12px); box-shadow:0 20px 70px #0009; }
textarea { flex:1; resize:none; border:0; outline:0; background:transparent; color:var(--ink); font:inherit; line-height:1.45; padding:10px; }
.composer button { align-self:flex-end; width:42px; height:42px; border:0; border-radius:12px; color:#07140b; background:var(--mint); font-size:23px; cursor:pointer; }
.composer button:disabled { opacity:.4; }
.access { position:fixed; bottom:12px; font-size:11px; color:var(--muted); }.access input { margin-left:8px; padding:5px 8px; border:1px solid var(--line); border-radius:6px; background:var(--panel); color:var(--ink); }
footer { position:fixed; right:calc((100% - min(900px,calc(100% - 32px)))/2); bottom:15px; color:#647068; font-size:10px; }
@keyframes pulse { to { opacity:.2; transform:scale(.7); } }
@media(max-width:700px){ .suggestions{grid-template-columns:1fr}.hero{padding-top:45px}.message{max-width:94%}footer{display:none}.composer{bottom:38px}.access{bottom:8px} }