:root { color-scheme: light dark; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --line: color-mix(in srgb, CanvasText 14%, transparent); --accent: #3b6cf6; }
body { margin: 0; background: Canvas; color: CanvasText; }
main.narrow { max-width: 26rem; margin: 12vh auto; padding: 0 1.5rem; display: flex; flex-direction: column; gap: .75rem; }
main.narrow h1 { margin: 0; font-size: 2rem; }
a { color: var(--accent); }
.button, button { display: inline-flex; justify-content: center; align-items: center; gap: .4rem; font: inherit; padding: .6rem 1rem; border-radius: 10px; border: 1px solid var(--line); background: color-mix(in srgb, CanvasText 6%, Canvas); color: inherit; text-decoration: none; cursor: pointer; }
button.danger { color: #d33; }
input, textarea { font: inherit; padding: .55rem .7rem; border-radius: 10px; border: 1px solid var(--line); background: Canvas; color: inherit; }
form.dev { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.hint { opacity: .6; font-size: .9rem; margin: 0; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
main.safe { max-width: 1100px; margin: 0 auto; padding: 1rem 1.5rem; }
main.safe header { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.safe-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1rem; align-items: center; }
.safe-body { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 800px) { .safe-body { grid-template-columns: 1fr; } }
.safe-body section { border: 1px solid var(--line); border-radius: 12px; padding: .75rem; min-width: 0; }
.safe-body h2 { margin: 0 0 .5rem; font-size: 1rem; }
#log { height: 55vh; overflow-y: auto; display: flex; flex-direction: column; gap: .4rem; }
#log .item { padding: .4rem .6rem; border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
#log .user { background: color-mix(in srgb, var(--accent) 18%, Canvas); align-self: flex-end; }
#log .agent { background: color-mix(in srgb, CanvasText 7%, Canvas); align-self: flex-start; }
#log .notice { opacity: .6; font-size: .85rem; align-self: center; }
#activity { height: 60vh; overflow-y: auto; font-size: 12px; margin: 0; }
#form { display: flex; gap: .5rem; margin-top: .5rem; }
#form textarea { flex: 1; }
main.prose { max-width: 38rem; margin: 10vh auto; padding: 0 1.5rem 4rem; line-height: 1.55; }
main.prose h1 { margin: 0; font-size: 2.4rem; }
main.prose h2 { margin: 1.75rem 0 .25rem; font-size: 1.1rem; }
main.prose .lede { font-size: 1.25rem; opacity: .75; margin-top: .25rem; }
main.prose > .hint:last-child { margin-top: 2.5rem; }