@layer base {
* { box-sizing:border-box; }
body { margin:0;background:#f7f7f2;color:#20332e;font:16px/1.6 system-ui,sans-serif; }
main { max-width:1280px;margin:auto;padding:24px; }
header,footer { display:flex;align-items:center;gap:24px;flex-wrap:wrap; }
header { border-bottom:1px solid #d9dfd5;padding-bottom:18px; }
header .brand { margin-right:auto; }
.brand { color:inherit;text-decoration:none;font-weight:750;letter-spacing:.16em; }
.welcome { max-width:660px;margin:10vh auto; }
h1 { font-size:clamp(2rem,4vw,3.3rem);line-height:1.15;letter-spacing:-.035em;overflow-wrap:anywhere; }
h2 { font-size:1.1rem; }
.eyebrow { font-size:.75rem;letter-spacing:.15em; }
.service-state,.muted { color:#586b63;font-size:.85rem; }
button,.button { display:inline-block;background:#254c40;color:white;padding:10px 16px;border:1px solid transparent;border-radius:6px;font:inherit;cursor:pointer;text-decoration:none; }
button:disabled { opacity:.5;cursor:default; }
.quiet { background:transparent;color:inherit;border-color:#cbd5cd; }
:where(button,a,input,select):focus-visible { outline:3px solid #b08430;outline-offset:3px; }
.workspace { display:grid;grid-template-columns:280px minmax(0,1fr);gap:44px;min-height:60vh; }
aside { border-right:1px solid #d9dfd5;padding-right:24px; }
form { display:grid;gap:8px;margin-bottom:28px; }
label { font-size:.8rem;font-weight:600; }
input,select { min-width:0;width:100%;padding:10px;border:1px solid #bfcac1;border-radius:5px;background:#fff;color:inherit;font:inherit; }
nav { display:grid;gap:5px; }
.conversation { width:100%;text-align:left;background:transparent;color:inherit;overflow-wrap:anywhere; }
.conversation:hover,.conversation[aria-current=page] { background:#e4ebe3; }
.conversation-view { padding:22px 0; }
footer { padding-top:20px;margin-top:32px;border-top:1px solid #d9dfd5;font-size:.8rem;color:#586b63; }
footer button { margin-left:auto; }
[role=alert] { background:#f8e9df;border-left:3px solid #a15030;padding:12px 16px; }
@media(max-width:700px) { main{padding:16px}.workspace{grid-template-columns:1fr;gap:20px}aside{border-right:0;padding-right:0;border-bottom:1px solid #d9dfd5;padding-bottom:20px}.conversation-view{min-height:30vh}header{gap:12px} }
}