:root {color-scheme: dark; font-family: system-ui, sans-serif; background: #0d1915; color: #eef6ef;}
* {box-sizing: border-box;}
body {margin: 0; min-height: 100svh; display: grid; place-items: center; padding: 24px;}
main {width: min(100%, 440px); text-align: center;}
.orb {width: 112px; height: 112px; border-radius: 50%; margin: auto; display: grid; place-items: center; font-size: 48px; background: #28483b; border: 1px solid #629676;}
h1 {font-size: 36px; margin: 18px 0 8px;}
p {line-height: 1.9;}
#status {min-height: 60px; color: #acd6ba;}
button {width: 100%; min-height: 58px; border: 0; border-radius: 18px; background: #b9ebc4; color: #13271b; font: inherit; font-size: 19px; cursor: pointer;}
button:disabled {opacity: .45; cursor: default;}
button:focus-visible {outline: 3px solid #fff; outline-offset: 4px;}
.hint {font-size: 13px; color: #a0b4a8;}
#transcript {text-align: right; max-height: 32svh; overflow: auto;}
#transcript p {padding: 10px 14px; border-radius: 14px; background: #1c3127; overflow-wrap: anywhere;}