html { background: #fff; }
body { max-width: 80rem; min-height: 100vh; margin: 0 auto; padding: 0 0.75rem; background: #f7f7f2; color: #222; font: 14px/1.5 "Courier New", Courier, monospace; }
a { color: #243b53; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
.page-shell { display: grid; grid-template-columns: minmax(0, 1fr) 13rem; grid-template-areas: "content sidebar"; gap: 1.25rem; padding-top: 0.75rem; }
.site-sidebar { grid-area: sidebar; align-self: start; padding: 0.75rem; background: #dce3e8; }
.site-title { color: inherit; font-weight: bold; text-decoration: none; }
.site-nav { display: grid; gap: 0.25rem; margin: 0.75rem 0; }
.site-nav a { color: inherit; text-decoration: none; }
.site-nav a[aria-current="page"] { font-weight: bold; text-decoration: underline; }
.account-nav { padding-top: 0.75rem; border-top: 1px solid #aab5bc; overflow-wrap: anywhere; }
#signed-out, #signed-in { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
main { grid-area: content; min-width: 0; padding: 0.5rem 0.75rem 2rem; }
table { border-collapse: collapse; width: 100%; }
.price-table { width: min(100%, 36rem); }
th, td { border: 1px solid #aaa; padding: 0.5rem; text-align: left; overflow-wrap: anywhere; }
footer { padding: 0 0.75rem 1rem; }
[hidden] { display: none !important; }
#api-key-value { overflow-wrap: anywhere; }
button, textarea { font: inherit; }
pre { overflow-x: auto; }
#demo { box-sizing: border-box; max-width: 56rem; margin: 1rem 0; padding: 1rem; border: 1px solid #aaa; background: #fbfbf8; }
#demo h2 { margin-top: 0; }
#demo-model { overflow-wrap: anywhere; }
#demo-messages { display: flex; flex-direction: column; gap: 0.75rem; list-style: none; min-height: 10rem; max-height: 25rem; overflow-y: auto; margin: 1rem 0; padding: 0.75rem; border: 1px solid #aaa; background: #f7f7f2; }
#demo-messages li { box-sizing: border-box; max-width: 85%; padding: 0.5rem 0.75rem; border: 1px solid #aaa; background: #fff; overflow-wrap: anywhere; }
#demo-messages li[data-role="user"] { align-self: flex-end; background: #e8eef2; }
#demo-messages li[data-role="user"] strong { display: block; text-align: right; }
#demo-messages li[data-role="assistant"] { align-self: flex-start; }
#demo-messages #demo-empty { align-self: center; max-width: 100%; margin: auto; border: 0; background: transparent; color: #555; }
#demo-messages p { margin: 0.25rem 0 0; white-space: pre-wrap; }
#demo-messages small { display: block; margin-top: 0.5rem; color: #555; }
#demo-input { box-sizing: border-box; width: 100%; min-height: 5rem; padding: 0.5rem; border: 1px solid #777; background: #fff; }
#demo-send { margin-top: 0.5rem; padding: 0.3rem 0.75rem; }
@media (max-width: 48rem) { .page-shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "sidebar" "content"; gap: 0.5rem; } }