:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #202621; background: #f6f7f3; font-size: 16px; }
* { box-sizing: border-box; }
body { margin: 0; }
button, textarea, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .55; }
[hidden] { display: none !important; }
.bar { height: 64px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e2e6dc; background: #f6f7f3; }
.brand { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: .95rem; letter-spacing: -.02em; }
.mark { width: 28px; height: 28px; display: grid; place-items: center; background: #dceac4; border-radius: 8px; font-size: 1.2rem; }
.live { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: #596452; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #5c7d38; }
.revision { margin-left: 8px; color: #7b8574; }
.canvas { height: 100dvh; background: white; }
iframe { display: block; width: 100%; height: 100%; border: 0; background: white; }
.bubble { position: fixed; right: 28px; bottom: 24px; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 999px; padding: 16px 22px; color: white; background: #263d2d; box-shadow: 0 5px 24px #172c2426; font-weight: 600; }
.bubble span { font-size: 1.3rem; color: #d7ecb8; }
.bubble:hover, #submit:hover { background: #37563f; }
.chat { position: fixed; right: 28px; bottom: 92px; width: 410px; max-height: min(680px, calc(100dvh - 120px)); display: flex; flex-direction: column; border: 1px solid #dae1d5; border-radius: 20px; background: #fafbf8; box-shadow: 0 18px 70px #20312a26; overflow: hidden; }
.chat-head { display: flex; justify-content: space-between; gap: 14px; padding: 24px; border-bottom: 1px solid #e5e9df; }
.chat-head strong { font-size: 1.15rem; letter-spacing: -.025em; }
.chat-head p { margin: 7px 0 0; color: #74806a; font-size: .875rem; }
.icon-button { border: none; background: transparent; font-size: 1.6rem; color: #687561; padding: 0 4px; align-self: flex-start; }
.messages { overflow-y: auto; min-height: 150px; max-height: 370px; padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.messages:empty { display: none; }
.request { padding: 12px 15px; border-radius: 14px 14px 3px 14px; background: #e6eedb; align-self: flex-end; max-width: 93%; font-size: .95rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.reply { padding: 10px 0; line-height: 1.5; font-size: .875rem; color: #57644f; }
.phase { display: block; text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; font-weight: 650; color: #67785a; margin-bottom: 5px; }
form { margin: 0 18px; padding: 13px; background: white; border: 1px solid #d8dfcf; border-radius: 13px; }
textarea { width: 100%; border: none; background: none; resize: none; padding: 0; color: #263226; font-size: 1rem; line-height: 1.5; }
textarea:focus { outline: none; }
form:focus-within { outline: 2px solid #779a57; outline-offset: 2px; }
.compose-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; }
.compose-foot > span { font-size: .75rem; color: #76826c; }
#queue { flex: 1; }
#prompt-count { white-space: nowrap; }
#submit { border: none; border-radius: 8px; background: #263d2d; color: white; padding: 9px 12px; font-size: .875rem; }
#submit span { margin-left: 8px; }
.footnote { font-size: .75rem; line-height: 1.4; color: #7b8573; padding: 0 23px; margin: 12px 0 18px; }
.error { margin: 0 22px 12px; color: #963c35; font-size: .875rem; }
.connection { position: fixed; top: 76px; left: 50%; transform: translateX(-50%); background: #fff5da; padding: 12px 18px; border-radius: 10px; font-size: .875rem; max-width: 90%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
button:focus-visible, a:focus-visible { outline: 3px solid #83a962; outline-offset: 3px; }
.owner { max-width: 850px; margin: 50px auto; padding: 24px; }
.owner h1 { font-size: 2rem; letter-spacing: -.04em; }
.owner form { margin: 20px 0; }
.owner input { width: 100%; padding: 12px; border: 1px solid #ccd7c2; border-radius: 8px; margin: 10px 0; }
.owner button { border: 1px solid #ccd7c2; border-radius: 8px; padding: 10px 16px; background: white; }
.owner ul { padding: 0; list-style: none; }
.owner li { padding: 16px 0; border-bottom: 1px solid #dbe2d3; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.owner li span { overflow-wrap: anywhere; }
.owner-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.usage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.usage-grid > div { padding: 16px; background: white; border: 1px solid #dbe2d3; border-radius: 10px; }
.usage-grid dt { font-size: .875rem; color: #687561; }
.usage-grid dd { margin: 8px 0 0; font-size: 1.5rem; font-weight: 600; }
#logging-since { color: #687561; font-size: .875rem; line-height: 1.5; }
#snapshot-source { overflow: auto; max-height: 500px; padding: 16px; background: white; border: 1px solid #dbe2d3; font-size: .875rem; }
#snapshot-meta { overflow-wrap: anywhere; font-size: .875rem; }
@media (max-width: 650px) { .owner li { flex-direction: column; align-items: flex-start; } }
@media (max-width: 520px) { .bar { padding: 0 16px; } .revision { margin-left: 0; } .bubble { right: 16px; bottom: 16px; } .chat { right: 12px; left: 12px; width: auto; bottom: 84px; max-height: calc(100dvh - 100px); } .chat-head { padding: 18px; } .messages { padding: 18px; } }
@media (prefers-reduced-motion: no-preference) { .bubble, #submit { transition: background .15s ease; } }