/* Six square stations on one rotating ring. */
#ar-wheel{--tile:96px;--radius:145px;--wheel-size:410px;position:relative;height:var(--wheel-size);max-width:420px;margin:0 auto;touch-action:pan-y;isolation:isolate}
#ar-orbit{position:absolute;left:50%;top:50%;width:calc(var(--radius)*2);height:calc(var(--radius)*2);transform:translate(-50%,-50%);border:1px solid #a0b3bd80;border-radius:50%;box-shadow:0 0 0 12px #7e96a015,inset 0 0 0 12px #7e96a015;pointer-events:none}
#ar-wheel:after{content:'';position:absolute;top:0;left:calc(50% - 5px);width:10px;height:5px;background:var(--frame-color);pointer-events:none}
#ar-wheel-core{position:absolute;top:50%;left:50%;width:42%;transform:translate(-50%,-50%);text-align:center;pointer-events:none}
#ar-wheel-core small{font-size:9px;color:#cbd9de;letter-spacing:.09em}
#ar-select #ar-class-name{font-size:clamp(16px,1.5vw,23px);line-height:1.25;margin:12px 0 6px;overflow-wrap:normal}
#ar-select #ar-class-role{margin:0 0 14px;font-size:10px;color:#f1c796;letter-spacing:.05em}
#ar-class-count{font-size:12px;color:#b7cbd4;border-top:1px solid #859aa6;padding:10px 10px 0;display:inline-block}
#ar-classes{display:block;position:absolute;inset:0;pointer-events:none}
#ar-classes button{pointer-events:auto;position:absolute;left:50%;top:50%;width:var(--tile);height:var(--tile);min-height:0;margin:calc(var(--tile)*-.5);padding:8px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;background:#405868;border:1px solid #829eac;border-bottom:3px solid var(--class-color);box-shadow:0 4px 0 #303f4955;transform:rotate(var(--angle)) translateY(calc(-1*var(--radius))) rotate(calc(-1*var(--angle)));transition:transform .36s cubic-bezier(.22,.8,.26,1),background .16s,border-color .16s;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
#ar-classes button i{position:static;font-size:19px;font-style:normal;color:var(--class-color);text-shadow:0 1px #25343f}
#ar-classes button strong{font-size:11px;margin:0;line-height:1.2;white-space:nowrap}
#ar-classes button span{font-size:8px;color:#e4e9e8;line-height:1.2}
#ar-classes button.selected{background:#456a7e;border-color:#e1edf0;border-bottom-color:var(--class-color);box-shadow:inset 0 0 0 2px #dbe8eb44,0 5px 0 #303f4955;z-index:2}
#ar-classes button:hover{background:#496779}
#ar-wheel-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 0 12px}
#ar-wheel-nav button{width:46px;min-height:40px;padding:4px;font-size:22px}
#ar-wheel-nav span{font-size:9px;letter-spacing:.04em;color:#d4e0e4}
#ar-select .ar-class-stats{margin-top:10px}#ar-select .ar-class-stats>span{padding:9px 12px}#ar-select .ar-class-stats b{font-size:22px;margin:7px 0}
#ar-select #ar-class-copy>p{margin:12px 0;font-size:12px;line-height:1.65}
@media(max-height:720px){#ar-select{padding:12px 16px}#ar-select .ar-class-stats>span{padding:7px 9px}#ar-select .ar-class-stats b{font-size:18px}#ar-wheel-nav{margin-bottom:6px}}
@media(max-width:650px){#ar-select{top:38%;padding:10px 14px}#ar-wheel{max-width:360px}#ar-select #ar-class-name{font-size:17px}#ar-wheel-core small{font-size:8px}#ar-class-count{font-size:10px}#ar-select #ar-class-role{font-size:9px}#ar-classes button{gap:5px;padding:6px 2px}#ar-classes button i{font-size:16px}#ar-classes button strong{font-size:10px}#ar-classes button span{font-size:7px}#ar-ui[data-phase="1"]:before{inset:38% 0 0}#ar-wheel-nav span{font-size:8px}}
@media(max-height:540px) and (min-width:651px){#ar-select{top:72px;bottom:10px;width:42%;left:12px;padding:8px 12px}#ar-wheel-core small{font-size:7px}#ar-select #ar-class-name{font-size:15px;margin:6px 0}#ar-select #ar-class-role{font-size:8px;margin-bottom:8px}#ar-class-count{font-size:9px;padding-top:5px}#ar-classes button{gap:4px;padding:5px 2px}#ar-classes button i{font-size:14px}#ar-classes button strong{font-size:9px}#ar-classes button span{font-size:6px}#ar-wheel-nav button{min-height:36px}#ar-wheel-nav{gap:10px}#ar-wheel-nav span{font-size:8px}#ar-select #ar-enter{margin-top:6px;min-height:42px!important;font-size:11px}}
@media(prefers-reduced-motion:reduce){#ar-classes button{transition:none}}
@media(max-height:540px) and (min-width:651px){#ar-wheel-nav{position:absolute;left:4px;right:4px;top:clamp(90px,calc(50dvh - 100px),118px);justify-content:space-between;pointer-events:none}#ar-wheel-nav span{display:none}#ar-wheel-nav button{pointer-events:auto;width:34px;min-height:44px;font-size:19px}#ar-select .ar-class-stats{margin-top:14px}}