:root { color-scheme: dark; font-family: Inter, system-ui, sans-serif; background: #111419; color: #edf3f6; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
header { display: flex; justify-content: space-between; align-items: center; padding: .8rem max(1rem, calc((100vw - 90rem) / 2)); border-bottom: 1px solid #29323a; }
h1 { color: #6cddc9; font-size: 1.2rem; margin: 0; }
h1 span { color: #bac7d0; font-weight: 400; margin-left: .45rem; }
main { max-width: 90rem; margin: auto; padding: 1rem; }
section:not(#session) { background: #1a2128; border: 1px solid #2d3740; border-radius: .6rem; padding: 1rem; margin-bottom: 1rem; }
#machine { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
#machine div { flex: 1; min-width: 10rem; }
h2 { font-size: 1rem; margin: 0 0 .25rem; }
p { color: #bac7d0; margin: .25rem 0; }
button, input, textarea { font: inherit; color: inherit; background: #252e36; border: 1px solid #43505b; border-radius: .4rem; padding: .6rem .8rem; }
button:not(:disabled) { cursor: pointer; }
button:disabled { opacity: .5; }
.primary { background: #6cddc9; color: #111419; border-color: #6cddc9; font-weight: 650; }
label { display: grid; gap: .35rem; margin: .6rem 0; max-width: 40rem; }
textarea, #host-pin { width: 100%; font-family: ui-monospace, monospace; }
nav { display: flex; gap: .6rem; margin-bottom: .7rem; }
canvas { display: block; width: 100%; height: auto; max-height: calc(100dvh - 11rem); object-fit: contain; background: #080a0c; touch-action: none; }
canvas:focus-visible { outline: 2px solid #6cddc9; }
#status { margin-top: .65rem; }