@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Rajdhani:wght@400;500;600&display=swap');
*{box-sizing:border-box}body{margin:0;background:#edf4f8;color:#18384f;font-family:Rajdhani,Arial,sans-serif;padding:24px}main{max-width:1150px;margin:auto;background:white;border:1px solid #ccdeea;border-radius:12px;overflow:hidden;box-shadow:0 15px 80px #153a5510}header{display:flex;justify-content:space-between;align-items:center;padding:26px 36px;border-bottom:1px solid #d6e7f2}header strong{font:700 27px Orbitron,'Trebuchet MS',sans-serif;color:#075f99;letter-spacing:2px}header strong span{font-weight:400}h1{font:500 12px Orbitron,'Trebuchet MS',sans-serif;letter-spacing:2px;margin:12px 0 0}header p{font-size:12px;letter-spacing:2px;color:#56758a}.board{position:relative;width:100%;aspect-ratio:927/791;overflow:hidden;background:#fff;isolation:isolate}.grid{position:absolute;inset:0;background-image:linear-gradient(#bbddee20 1px,transparent 1px),linear-gradient(90deg,#bbddee20 1px,transparent 1px);background-size:48px 48px}.assembly{position:absolute;inset:0;will-change:transform;animation-duration:6s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}.assembly img{display:block;width:100%;height:100%;mix-blend-mode:multiply}.upper-left{clip-path:inset(0 36% 52% 0);animation-name:leftmove}.upper-right{clip-path:inset(0 0 52% 65%);animation-name:rightmove}.lower-left{clip-path:inset(51% 66% 0 0);animation-name:leftmove}.lower-right{clip-path:inset(51% 0 0 35%);animation-name:rightmove}.board svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.labels text{font:500 15px Orbitron,'Trebuchet MS',sans-serif;fill:#18384f;letter-spacing:.25px}.labels path{fill:none;stroke:#0786cb;stroke-width:1.8}.labels circle{fill:#0786cb}.labels .callout{opacity:.65;transition:opacity .4s}.labels .callout.active{opacity:1}.labels .active text{fill:#0066a8;font-weight:700}.labels .active .target{fill:#ffffff70;stroke:#009de8;stroke-width:2;r:13}.target{fill:transparent;stroke:transparent}.divider{stroke:#c9dfed;stroke-width:1}.panel{padding:25px 36px;border-top:1px solid #d6e7f2;background:#f2f8fc;display:flex;align-items:center;justify-content:space-between;gap:20px}.panel small{font:500 9px Orbitron,Arial,sans-serif;letter-spacing:2px;color:#0874b4}.panel h2{font:500 22px Orbitron,'Trebuchet MS',sans-serif;margin:12px 0}.panel p{font-size:12px;letter-spacing:1px;margin:0;color:#56758a}.controls{display:flex;gap:8px}button{border:1px solid #abcfe5;background:white;border-radius:4px;padding:12px 15px;font:500 11px Orbitron,Arial,sans-serif;color:#075f99;cursor:pointer}button:hover{background:#e7f3fc}button:focus-visible{outline:3px solid #087de0;outline-offset:3px}#pause{background:#0879bf;color:white}footer{padding:18px 36px;display:flex;justify-content:space-between;font-size:11px;color:#56758a}.paused .assembly{animation-play-state:paused}@keyframes leftmove{0%,100%{transform:translate(0,0)}50%{transform:translate(-1.1%,-.8%)}}@keyframes rightmove{0%,100%{transform:translate(0,0)}50%{transform:translate(1.1%,.8%)}}@media(max-width:650px){body{padding:0}main{border-radius:0}header{padding:20px}header p{display:none}h1{font-size:9px}.panel{padding:20px;display:block}.panel h2{font-size:17px}.controls{margin-top:20px}footer{padding:16px;font-size:9px;gap:12px}.labels text{font-size:16px}}@media(prefers-reduced-motion:reduce){.assembly{animation:none}.labels .callout{transition:none}}
.assembly{animation:none}
body{padding:0;background:white}main{max-width:none;border:0;border-radius:0;box-shadow:none}.panel{min-height:145px}.panel h2{line-height:1.3}@media(max-width:650px){.panel{min-height:210px}}

.panel{min-height:260px;align-items:center}.panel>div:first-child{flex:1;min-width:0;max-width:700px}.panel .fyi-copy,.panel .fyi-purpose{font-family:Rajdhani,Arial,sans-serif;font-size:17px;line-height:1.5;letter-spacing:0;color:#294e65;margin:8px 0}.panel #position{margin-top:16px}.controls{flex-wrap:wrap;justify-content:flex-end;max-width:250px}.info-enter #active,.info-enter .fyi-copy,.info-enter .fyi-purpose{animation:fyiIn .45s ease-out both}@keyframes fyiIn{from{opacity:.35;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media(max-width:650px){.panel{min-height:365px}.panel .fyi-copy,.panel .fyi-purpose{font-size:16px}.controls{max-width:none;justify-content:flex-start}}@media(prefers-reduced-motion:reduce){.info-enter #active,.info-enter .fyi-copy,.info-enter .fyi-purpose{animation:none}}