:root { color-scheme: light dark; --gap: .5rem; }
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.4 system-ui, sans-serif; }
header { padding: var(--gap) .75rem; border-bottom: 1px solid #8884; }
section { padding: .75rem; max-width: 1100px; margin: 0 auto; }
h1 { font-size: 1.15rem; margin: .25rem 0 .75rem; }
label { display: block; margin: 0 0 .6rem; }
input[type=password], input[type=text], input:not([type]) { display: block; width: 100%; padding: .55rem; font-size: 16px; margin-top: .2rem; }
button { padding: .55rem .8rem; font-size: 15px; min-height: 2.5rem; border-radius: .35rem; border: 1px solid #8888; background: Canvas; color: CanvasText; }
button:disabled { opacity: .45; }
button.quiet { border-color: transparent; }
.bar { display: flex; flex-wrap: wrap; gap: var(--gap); align-items: center; margin: var(--gap) 0; }
.bar #text { flex: 1 1 12rem; margin: 0; }
.ack { display: flex; gap: .35rem; align-items: center; margin: 0; font-size: 13px; flex: 1 1 14rem; }
#mode { font-weight: 600; flex: 1; }
#stage { border: 2px solid #8886; background: #0002; line-height: 0; }
#stage.live { border-color: #c60; touch-action: none; }
#frame { width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
#session-list { display: flex; flex-direction: column; gap: var(--gap); }
.keys button { min-width: 3rem; }
.error { color: #c22; }
.hint { color: #888; font-size: 13px; }
#notice { min-height: 1.2em; color: #c60; }
code, .secret { font-family: ui-monospace, monospace; word-break: break-all; }