:root { font: 16px/1.45 system-ui, sans-serif; color: #17334a; background: #f3f7f8; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 760px; margin: auto; padding: 1rem 1rem 3rem; }
header { background: #183b53; color: white; padding: 1.4rem; border-radius: 1rem; }
header h1 { margin: .1rem 0; font-size: 1.8rem; }
header p { margin: .25rem 0; }
.eyebrow { color: #a8e5cf; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
section { margin-top: 1.2rem; }
#login, #learner, #observer { background: white; border-radius: 1rem; padding: 1.1rem; box-shadow: 0 2px 14px #17334a12; }
label { display: block; margin: .8rem 0; font-weight: 600; }
input:not([type=checkbox]), select { display: block; width: 100%; min-height: 2.8rem; padding: .5rem; margin-top: .3rem; font: inherit; }
input[type=range] { padding: 0; }
button { border: 0; border-radius: .55rem; padding: .7rem 1rem; margin: .2rem .3rem .2rem 0; font: inherit; font-weight: 650; color: white; background: #126078; cursor: pointer; }
button:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #e5a333; outline-offset: 2px; }
.controls { margin: 1rem 0; display: flex; flex-wrap: wrap; gap: .2rem; }
.notice { background: #ecf5f1; border-left: 4px solid #168168; padding: .9rem; border-radius: .4rem; }
.notice p { margin: .4rem 0; }
.check { font-weight: 500; }
.status { padding: .7rem; background: #e9f2f7; border-radius: .4rem; }
.status.failure, .error { color: #9b2525; background: #fff0ee; }
.board { border: 2px solid #d5e7ea; padding: 1rem; border-radius: .8rem; min-height: 13rem; }
.board h2 { margin: .2rem 0; }
.board svg { width: 100%; max-width: 340px; height: auto; display: block; margin: .6rem auto; }
.board .prompt { font-size: 1.08rem; font-weight: 600; }
.muted { color: #516879; }
.gaps { margin-top: 1rem; }
.gaps p { border-left: 4px solid #bc6b2d; padding: .4rem .6rem; background: #fff4e8; }
[hidden] { display: none !important; }