: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% 7%,#3a2d24,#171514 66%);min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
main{flex:1 0 auto;padding:28px 14px 44px;text-align:center}
.title{margin:0 auto 28px;color:#f6e7ca}
.eyebrow,.tagline{margin:0;text-transform:uppercase}
.eyebrow{color:#e7af75;font-size:clamp(.72rem,2.7vw,1rem);font-weight:850;letter-spacing:.24em}
h1{margin:.12em 0;font:900 clamp(4rem,14vw,8rem)/.96 Georgia,serif;letter-spacing:-.065em;text-shadow:0 .06em #1a130f}
.tagline{color:#d9c0a7;font-size:clamp(.68rem,2.5vw,1.05rem);font-weight:600;letter-spacing:.16em}
.guide-link{display:inline-block;margin-top:16px;border:0;background:none;color:#ffd58c;cursor:pointer;text-decoration:underline;text-underline-offset:.24em;font-size:.88rem}
#status{margin:0 auto 16px;min-height:1.5em;color:#eee1cd}
.board{
  position:relative;margin:auto;width:min(100%,570px);aspect-ratio:1;border-radius:50%;
  isolation:isolate;container-type:inline-size;
  background:radial-gradient(ellipse at 32% 18%,#494a49,#292a2b 56%,#18191b 83%);
  box-shadow:inset 0 0 0 1px #74736f,inset 0 0 0 5px #151515,inset 0 0 0 8px #303032,
    inset 0 0 22px 8px #070707,0 8px 0 #191715,0 13px 0 #0d0c0c,0 27px 34px #000a;
}
.lens{
  position:absolute;width:42.5%;height:42.5%;border:0;cursor:pointer;touch-action:none;
  user-select:none;-webkit-user-select:none;
  background:linear-gradient(155deg,#fff4 1%,transparent 32%,#0003 80%),
    radial-gradient(ellipse at 38% 30%,var(--base),var(--edge));
  box-shadow:0 0 0 2px #151515,0 4px 7px #000c,inset 0 2px 4px #fff6,
    inset 0 -5px 9px #0007,inset 0 0 0 4px #fff1;
}
.lens::after{
  content:"";position:absolute;inset:4%;border-radius:inherit;pointer-events:none;
  background:repeating-radial-gradient(circle at 46% 42%,#ffffff12 0 1px,transparent 1px 3px);
  opacity:.27;
}
.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:25.8%;border-radius:50%;color:#141414;
  background:repeating-radial-gradient(circle,#ffffff28 0 1px,#0001 1px 2px,transparent 2px 3px),
    conic-gradient(from 28deg,#777a7c,#eef0ed 43deg,#999a9c 84deg,#d3d6d6 130deg,
    #929497 174deg,#fafaf5 219deg,#95989a 252deg,#d6dad9 305deg,#777a7c);
  box-shadow:0 0 0 1.65cqw #262729,0 0 0 2.05cqw #141416,0 1cqw 1.1cqw 2cqw #0008,
    inset 0 0 0 .48cqw #757779,inset 0 0 1.5cqw #1117;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2cqw;
}
.logo{font:900 11cqw/.85 Georgia,serif;letter-spacing:-.07em;padding-right:.07em;text-shadow:0 1px #fff7}
.selectors{display:flex;justify-content:center;align-items:flex-start;gap:2.1cqw}
.pushes{width:34cqw;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
.control{display:grid;gap:.75cqw;justify-items:center;font-size:clamp(8px,2.05cqw,12px);font-weight:900;line-height:1.1;text-shadow:0 1px #fff6}
button,select{font:inherit}
select{min-height:4.6cqw;border:1px solid #144273;border-radius:3px;background:#155b9a;color:white}
.selectors select{
  width:10.4cqw;text-align:center;background:linear-gradient(#438cce,#0c447f);
  box-shadow:inset 0 1px #b5ddff80,0 1px 2px #131c27a0;
}
.push{
  --cap-top:#fff6a3;--cap-mid:#f7c629;--cap-edge:#ae6a08;
  position:relative;width:7.4cqw;height:7.4cqw;border-radius:50%;border:0;
  background:linear-gradient(#151515 18%,#4d4b48 90%);
  box-shadow:inset 0 0 0 .55cqw #232220,inset 0 -.35cqw .6cqw #807771,0 .42cqw .5cqw #0009;
  cursor:pointer;
}
.push::after{
  content:"";position:absolute;inset:.73cqw .83cqw 1.22cqw;border-radius:50%;
  background:radial-gradient(ellipse at 37% 22%,var(--cap-top),var(--cap-mid) 52%,var(--cap-edge) 100%);
  box-shadow:inset 0 1px 1px #fff8,0 .44cqw 0 var(--cap-edge),0 .57cqw .32cqw #000b;
}
#start{--cap-top:#ff9995;--cap-mid:#ef3238;--cap-edge:#981621}
#start.ready{--cap-top:#fff1dc;--cap-mid:#ff5148;--cap-edge:#d31e26}
#start.ready:not(:active)::after{
  box-shadow:inset 0 1px 2px #fff,0 .44cqw 0 var(--cap-edge),
    0 0 .85cqw .26cqw #ff7155,0 0 1.8cqw .55cqw #ff382bbb;
}
.push:not(:disabled):active::after{transform:translateY(.4cqw);box-shadow:inset 0 1px 1px #fff5,0 .1cqw .25cqw #000a}
.push:disabled{cursor:default;filter:saturate(.72)}
select:disabled{opacity:.65;cursor:default}
#power{
  border:1px solid #6b141d;border-radius:4px;background:linear-gradient(#d54647,#8a171e);
  box-shadow:inset 0 1px #ff9f92,0 1px 2px #0009;color:white;
  min-width:11cqw;min-height:4.4cqw;cursor:pointer;
}
.extras{margin:clamp(54px,9vw,78px) 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}
.instructions{
  width:min(92vw,850px);max-width:none;margin:auto;text-align:left;padding:0 clamp(16px,4vw,34px) clamp(16px,4vw,34px);
  border:1px solid #dcb7903d;border-radius:16px;background:#271f19;color:#f2e6d4;
  line-height:1.6;
}
.instructions h2,.instructions h3{margin:0 0 .45em;line-height:1.2;color:#f6e7ca}
.instructions h2{font:700 clamp(1.75rem,5vw,2.45rem)/1.1 Georgia,serif}
.instructions-heading{
  position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:14px 0 10px;background:#271f19;z-index:1;
}
.instructions-heading h2{margin:0}
.instructions-heading .guide-close{width:44px;height:44px;padding:0;font-size:1.6rem;line-height:1}
.instructions p{margin:.6em 0 1.15em}
.instructions ol{padding-left:1.45em;margin:.4em 0}
.instructions li + li{margin-top:.65em}
.guide-grid,.button-guide{display:grid;gap:clamp(16px,3vw,28px);margin:1.3em 0}
.guide-grid{grid-template-columns:1.5fr 1fr;border-block:1px solid #dcb7903d;padding:1.25em 0}
.button-guide{grid-template-columns:repeat(3,minmax(0,1fr))}
.skill-list{margin:.6em 0}
.skill-list div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #dcb79030;padding:.25em 0}
.instructions dt{font-weight:750;color:#f5c587}
.instructions dd{margin:0}
kbd{display:inline-block;min-width:1.5em;padding:0 .25em;text-align:center;margin-left:.3em;border:1px solid #c3a78877;border-radius:4px}
.instructions .keyboard{margin-bottom:0}
.site-footer{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem 1.25rem;
  padding:.8rem 1rem;border-top:1px solid #ffffff1f;color:#b7ae9e;font-size:.82rem;
}
@media(max-width:580px){
  .guide-grid,.button-guide{grid-template-columns:1fr}
  .button-guide{gap:.65em}
}
#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}