:root{color-scheme:dark;font:22px/1.35 system-ui,sans-serif;background:#000;color:#fff}
*{box-sizing:border-box}body{margin:0}main{max-width:600px;height:100dvh;min-height:360px;margin:auto;padding:18px 22px;display:flex;flex-direction:column;gap:10px}
header{display:flex;justify-content:space-between;align-items:center;min-height:30px}header strong{font-size:26px}#connection{font-size:16px;color:#9fd4ff}
textarea,button,.card{font:inherit;color:inherit;background:#000;border:2px solid #697586;border-radius:14px}
textarea{width:100%;resize:none;min-height:76px;padding:10px 14px;flex-shrink:0}textarea::placeholder{color:#c3cbd6}
button{padding:9px 11px;cursor:pointer;font-size:19px;min-height:48px;flex:1;white-space:nowrap}button:disabled{color:#66707d;border-color:#303945;cursor:default}
[data-nav]:focus{outline:3px solid #b9e6ff;outline-offset:2px;border-color:#b9e6ff;background:#10212d}[data-nav]:focus:not(:focus-visible){outline:3px solid #b9e6ff}
#status{font-size:18px;color:#c3cbd6;margin:0;min-height:24px}#transcript{overflow:auto;flex:1;min-height:0;padding:4px;scroll-padding:8px;overscroll-behavior:contain}
.card{margin:0 0 12px;padding:12px 14px;overflow-wrap:anywhere;white-space:pre-wrap}.card strong{display:block;font-size:16px;color:#9fd4ff;margin-bottom:6px}.card p{margin:0}
.question-card{border-color:#384452;color:#d0d9e6}footer{flex-shrink:0;display:grid;gap:10px}.rail{display:flex;gap:8px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
@media(max-width:460px){main{padding:12px;font-size:20px}.rail{flex-wrap:wrap}button{font-size:17px;padding:7px}}