:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#141516;color:#f7f0df}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 50% 30%,#30312e,#141516 70%);min-height:100vh}
main{padding:28px 14px 44px;text-align:center}
header p{margin:0;color:#e8bd71;font-size:.72rem;font-weight:800;letter-spacing:.28em;text-transform:uppercase}
h1{margin:.2rem 0 .4rem;font-family:Georgia,serif;font-size:clamp(2rem,7vw,3.4rem)}
#status{margin:0 auto 22px;min-height:2.8em;color:#e2d9c9}
.board{position:relative;margin:auto;width:min(100%,570px);aspect-ratio:1;border-radius:50%;isolation:isolate;container-type:inline-size;background:linear-gradient(135deg,#353738,#101112 64%);box-shadow:inset 0 0 0 2px #6e706c,inset 0 0 0 8px #121313,0 14px 0 #090a0a,0 20px 30px #0009}
.lens{position:absolute;width:43%;height:43%;border:0;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;background:radial-gradient(ellipse at 46% 40%,var(--base),var(--edge));box-shadow:inset 0 0 0 2px #0007,inset 0 0 0 5px #fff2,inset 0 -12px 16px #0005,0 3px 5px #000c}
.lens:focus-visible{outline:3px solid white;outline-offset:-8px}
.lens.lit{background:radial-gradient(ellipse at 50% 50%,var(--lit),var(--base));box-shadow:inset 0 0 0 2px #fff7,inset 0 0 32px var(--lit),0 0 15px var(--base)}
.lens[aria-disabled=true]:not(.lit){cursor:default}
.lens.out{filter:saturate(.18) brightness(.56)}
.yellow{top:5.2%;left:5.2%;border-radius:100% 6% 6% 6%;--base:#e9b600;--edge:#846000;--lit:#fffcb4}
.blue{top:5.2%;right:5.2%;border-radius:6% 100% 6% 6%;--base:#007fbb;--edge:#004268;--lit:#a0f3ff}
.red{bottom:5.2%;left:5.2%;border-radius:6% 6% 6% 100%;--base:#ce262a;--edge:#780e19;--lit:#ffc7ae}
.green{bottom:5.2%;right:5.2%;border-radius:6% 6% 100% 6%;--base:#00994c;--edge:#00542b;--lit:#bdffb0}
.hub{position:absolute;inset:26%;border-radius:50%;background:repeating-conic-gradient(#fff0 0deg,#ffffff36 25deg,#0001 46deg,#fff0 61deg),radial-gradient(circle,#e2e3e1,#a5a9aa);box-shadow:0 0 0 2.6cqw #171819,inset 0 0 0 .6cqw #777b7c;color:#141414;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1cqw}
.logo{font:900 11cqw/.9 Georgia,serif;letter-spacing:-.07em;padding-right:.07em}
.selectors,.pushes{display:flex;justify-content:center;align-items:flex-start;gap:1.55cqw}
.control{display:grid;gap:.35cqw;justify-items:center;font-size:clamp(8px,2.05cqw,12px);font-weight:900;line-height:1.1}
button,select{font:inherit}
select{min-height:4.6cqw;border:1px solid #144273;border-radius:3px;background:#155b9a;color:white}
.push{width:6.6cqw;height:6.6cqw;border-radius:50%;border:.6cqw solid #292522;background:#ffcf34;box-shadow:inset 0 -1cqw #ae780c,0 .4cqw .3cqw #0008;cursor:pointer}
#start{background:#ed3136;box-shadow:inset 0 -1cqw #8e131b,0 .4cqw .3cqw #0008}
.push:active{transform:translateY(.45cqw)}
.push:disabled,select:disabled{opacity:.65;cursor:default}
#power{border:1px solid #6b141d;border-radius:4px;background:#ae2229;color:white;min-width:11cqw;min-height:4.4cqw;cursor:pointer}
.extras{margin:32px auto 0;max-width:570px;color:#ded4c2;font-size:.91rem}
.extras button,dialog button{background:#262726;color:#fff3df;border:1px solid #a29580;border-radius:6px;padding:.55em .85em;cursor:pointer}
.extras p{margin:.7em 0}
#setup{margin:24px auto 0;max-width:480px}
#setup select{padding:.3em}
#assignments{display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap;margin:.5em 0}
dialog{max-width:min(92vw,590px);max-height:90vh;padding:20px;border:1px solid #897c6a;border-radius:12px;background:#262523;color:#fff4e0;text-align:left}
dialog::backdrop{background:#0009}
dialog img{display:block;max-width:100%;max-height:42vh;margin:auto;border-radius:6px}
a{color:#ffd58c}
footer{text-align:center;color:#b7ae9e;padding:22px;font-size:.8rem}
#profile-body form{display:grid;gap:8px;margin:14px 0;justify-items:start}
#profile-body label{display:grid;gap:4px}
#profile-body input{font:inherit;padding:.45em;border:1px solid #a29580;border-radius:4px}
#profile-body label:has(input[type=email]){width:min(100%,26rem);min-width:0}
#profile-body input[type=email]{width:100%;min-width:0}
#profile-body li{margin:.35em 0}
#profile-message,#sync-status{color:#e8bd71}
#sync-status:empty{display:none}