:root { --fg:#111; --bg:#fafafa; --muted:#6b7280; --card:#ffffff; --border:#e5e7eb; }
@media (prefers-color-scheme: dark) {
  :root { --fg:#e5e7eb; --bg:#0b0f14; --muted:#9aa4b2; --card:#0f1620; --border:#1f2937; }
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; color:var(--fg); background:var(--bg); }
.wrap { max-width: 1100px; margin: 0 auto; padding: 1.25rem; }
.header { display:flex; align-items:flex-start; gap:1rem; }
.brand h1 { margin:0; font-size: 1.6rem; }
.tagline { margin:.25rem 0 0; color: var(--muted); }
.grid { display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.card { background: var(--card); border:1px solid var(--border); border-radius: 1rem; padding: 1rem; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.footer { color: var(--muted); }
.prose { line-height: 1.6; }
.muted { color: var(--muted); }
.choices { display:flex; flex-wrap: wrap; gap:.5rem; margin-top:.75rem; }
.choice, .toolbar button { border:1px solid var(--border); background:transparent; padding:.5rem .75rem; border-radius:.75rem; cursor:pointer; }
.choice:hover, .toolbar button:hover { filter: brightness(1.1); }
.toolbar { display:flex; gap:.5rem; margin-top: .75rem; }
.crumb { color: inherit; text-decoration: none; opacity: .9; }
.crumb:hover { text-decoration: underline; }
@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }
/* Add these near the bottom (or replace entire file with your updated one) */
:root { --glow: rgba(99,102,241,.45); }
@media (prefers-color-scheme: dark){ :root { --glow: rgba(99,102,241,.35); } }

.console { margin-top: .75rem; }
.console form { display:flex; gap:.5rem; align-items:center; }
.console input[type="text"] { flex:1; padding:.5rem .6rem; border:1px solid var(--border); border-radius:.6rem; background:transparent; color:inherit; }
.console button { padding:.5rem .8rem; border:1px solid var(--border); background:transparent; border-radius:.6rem; cursor:pointer; }
.console select { border:1px solid var(--border); background:transparent; border-radius:.6rem; padding:.45rem .5rem; color:inherit; }
.response { margin-top:.5rem; min-height:1.25rem; }
.glow { box-shadow: 0 0 0 3px var(--glow); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,1px,1px); white-space:nowrap; border:0; }