@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#0b1018;--panel:#121b26;--muted:#90a0b5;--text:#f0f4fa;--accent:#b9f56c}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 30% 40%,#162638 0,transparent 48%),var(--bg);color:var(--text);font-family:'DM Sans',system-ui,sans-serif;font-size:14px}button,select,input{font:inherit}button{cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:5px}header,main,footer{max-width:1240px;margin:auto}header{padding:29px 40px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff12}.brand{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;font-weight:700;letter-spacing:1px}.brand-icon{color:var(--accent);font-size:29px}.brand-sub{font-size:10px;border-left:1px solid #ffffff30;padding-left:14px;color:var(--muted)}.edition{font-size:9px;letter-spacing:1.7px;color:var(--muted)}.edition i{display:inline-block;width:4px;height:4px;background:var(--accent);border-radius:50%;margin:0 10px}main{padding:48px 40px 32px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:600;color:var(--muted)}.eyebrow>span{display:inline-block;background:var(--accent);width:6px;height:6px;border-radius:50%;margin-right:8px}h1{font-family:'Space Grotesk',system-ui,sans-serif;font-size:clamp(32px,4vw,49px);line-height:1.13;letter-spacing:-2px;margin:18px 0}h1 em{font-style:normal;color:var(--accent)}.intro p{color:var(--muted);line-height:1.7;margin:0}.layout{display:grid;grid-template-columns:1.3fr 1fr;gap:50px;align-items:center;margin-top:25px}.arena{min-height:550px;position:relative;display:flex;align-items:center;justify-content:center;isolation:isolate;overflow:hidden}.arena-label{position:absolute;top:16px;left:10px;color:#65788c;font-size:9px;letter-spacing:2px}.orbit{position:absolute;border:1px solid #a0b8d10c;border-radius:50%;z-index:-1}.orbit-one{width:95%;aspect-ratio:1}.orbit-two{width:76%;aspect-ratio:1}.device{width:min(94%,480px);aspect-ratio:1;position:relative;transform:perspective(1000px) rotateX(16deg) rotateZ(-9deg);border-radius:50%;background:linear-gradient(145deg,#4a5868,#0c1119 48%,#293544);padding:12px;box-shadow:0 14px 0 #060b12,0 18px 0 #28313b,0 29px 0 #080c12,0 45px 40px #000a,0 70px 85px #0006,inset 0 2px 2px #c7ddf866}.rim{height:100%;border-radius:50%;background:#090e16;padding:15px;box-shadow:inset 0 4px 12px #000,0 1px 2px #8fa4be50;position:relative}.pads{height:100%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:14px;border-radius:50%;overflow:hidden}.pad{position:relative;border:0;color:#fff9;touch-action:manipulation;transition:filter .12s,box-shadow .12s,transform .12s;box-shadow:inset 0 3px 3px #ffffff65,inset 0 -9px 13px #0007;background:var(--color);background-image:radial-gradient(ellipse at 30% 15%,#ffffff3b,transparent 65%),linear-gradient(160deg,transparent,#0004)}.green{--color:#188e63;border-radius:100% 12px 20px 12px}.red{--color:#c44755;border-radius:12px 100% 12px 20px}.yellow{--color:#cda03c;border-radius:12px 20px 12px 100%}.blue{--color:#2f79bf;border-radius:20px 12px 100% 12px}.pad::after{content:'';position:absolute;inset:10px;border:1px solid #ffffff18;border-radius:inherit;pointer-events:none}.pad.active{filter:brightness(1.85) saturate(1.15);box-shadow:inset 0 0 30px #ffffff80,0 0 40px var(--color);transform:translateY(3px)}.pad:not(:disabled):hover{filter:brightness(1.18)}.pad.active:not(:disabled):hover{filter:brightness(1.85)}.pad-number{position:absolute;font:500 13px 'Space Grotesk',sans-serif;opacity:.65}.green .pad-number{top:37%;left:27%}.red .pad-number{top:37%;right:27%}.yellow .pad-number{bottom:37%;left:27%}.blue .pad-number{bottom:37%;right:27%}.pad-symbol{font-size:21px;position:absolute;opacity:.55}.green .pad-symbol{top:20%;right:28%}.red .pad-symbol{top:20%;left:28%}.yellow .pad-symbol{bottom:20%;right:28%}.blue .pad-symbol{bottom:20%;left:28%}.hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;width:39%;aspect-ratio:1;background:radial-gradient(circle at 35% 20%,#303b48,#141d29 65%);border:9px solid #080e16;box-shadow:0 8px 10px #0008,inset 0 2px 2px #ffffff30;display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:none}.hub-brand{font:700 clamp(13px,2vw,22px) 'Space Grotesk',sans-serif;letter-spacing:4px}.hub strong{font:500 clamp(30px,4vw,49px) 'Space Grotesk',sans-serif;color:var(--accent);line-height:1.15;text-shadow:0 0 20px #b9f56c26}.hub>span:nth-last-child(2){font-size:8px;letter-spacing:2px;color:#91a0b3}.hub-led{width:5px;height:5px;background:var(--accent);border-radius:50%;margin-top:10px;box-shadow:0 0 9px #b9f56c}.arena-bottom{position:absolute;bottom:9px;left:10px;right:10px;display:flex;justify-content:space-between;font-size:8px;color:#73859b;letter-spacing:1.4px}.arena-bottom i{display:inline-block;width:5px;height:5px;background:#69b59a;border-radius:50%;margin-right:6px}.console{background:linear-gradient(135deg,#1b2632,#111924);border:1px solid #ffffff12;border-radius:20px;padding:27px;box-shadow:0 24px 60px #0003}.console-top{display:flex;align-items:center;justify-content:space-between}.phase{font-size:10px;padding:5px 9px;background:#b9f56c12;border:1px solid #b9f56c26;border-radius:20px;color:var(--accent)}.stats{display:grid;grid-template-columns:1fr 1fr;margin:26px 0}.stats>div+div{border-left:1px solid #ffffff15;padding-left:27px}.stats>div>span{font-size:9px;letter-spacing:1.5px;color:var(--muted);display:block}.stats span small{font-size:7px;display:block;margin-top:4px}.stats strong{font:400 38px 'Space Grotesk',sans-serif;display:block;margin-top:8px}.stats b{font-weight:400}.stats strong small{font-size:15px;color:#718096}.status{display:flex;gap:12px;min-height:75px}.status>span{color:var(--accent);background:#b9f56c0c;border-radius:9px;display:grid;place-items:center;width:33px;height:33px;flex-shrink:0;font-size:21px}h2{font-size:15px;margin:0 0 7px}.status p{font-size:12px;color:var(--muted);line-height:1.6;margin:0}.progress{height:4px;background:#ffffff0c;border-radius:4px;overflow:hidden;margin-top:10px}.progress>div{width:0;height:100%;background:var(--accent);transition:width .15s}.step{color:#8c9caf;font-size:10px;margin:9px 0 22px}.primary{width:100%;background:var(--accent);color:#19230e;border:0;border-radius:9px;padding:15px 18px;font-weight:700;display:flex;justify-content:space-between;align-items:center;box-shadow:0 4px 0 #789e48}.primary:hover{background:#cafc91}.secondary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 22px}.secondary button{border:1px solid #ffffff18;border-radius:8px;background:#ffffff03;color:#c2cede;padding:10px}.secondary button:disabled{opacity:.35}.settings{border-top:1px solid #ffffff12;padding-top:18px}.setting{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}.setting label,.volume-row label{font-size:11px;color:var(--muted)}select{max-width:74%;font-size:11px;background:#0e1621;border:1px solid #ffffff15;border-radius:6px;padding:8px;color:#d4dfe9}select:disabled{opacity:.55}.volume-row{display:flex;align-items:center;gap:12px}.volume-row input{width:100%;min-width:30px;accent-color:var(--accent);height:4px}.volume-row output{white-space:nowrap;color:#a1b0c1;font-size:10px;min-width:30px}.settings-note{font-size:9px;color:#6e8095;line-height:1.5;margin-bottom:0}.guide{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;border-top:1px solid #ffffff12;padding-top:27px;margin-top:30px}.guide>div{position:relative;padding-left:37px}.guide-number{position:absolute;left:0;top:1px;color:var(--accent);font:13px 'Space Grotesk',sans-serif}h3{font-size:13px;margin:0 0 8px}.guide p,details p{font-size:12px;line-height:1.7;color:var(--muted);margin:0}details{margin-top:28px;color:var(--muted);font-size:11px}summary{cursor:pointer}details p{margin-top:12px}footer{padding:24px 40px 30px;border-top:1px solid #ffffff12;display:flex;justify-content:space-between;color:#61748c;font-size:9px;letter-spacing:1px}footer b{color:var(--accent);padding:0 7px}@media(max-width:800px){header{padding:20px}.edition{display:none}main{padding:30px 20px}.layout{gap:20px;grid-template-columns:1fr}.intro{text-align:center}h1{letter-spacing:-1.4px}.arena{min-height:490px;max-width:540px;width:100%;margin:auto}.console{max-width:540px;width:100%;margin:auto}.guide{gap:20px}.device{width:min(88%,440px)}footer{padding:24px 20px;gap:15px}footer>span:nth-child(2){display:none}}@media(max-width:430px){.arena{min-height:365px}.device{width:94%;padding:9px}.rim{padding:11px}.pads{gap:11px}.hub{border-width:6px}.hub strong{font-size:36px}.hub-brand{font-size:16px}.hub-led{margin-top:6px}.guide{grid-template-columns:1fr;gap:20px}.console{padding:22px}.intro p{font-size:12px}.eyebrow{font-size:8px}.arena-label{top:5px}.arena-bottom{font-size:7px}.hub>span:nth-last-child(2){font-size:7px}header .brand{font-size:12px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

footer .copyright{margin-left:auto;color:inherit;text-decoration:none;text-align:right}footer .copyright:hover{color:var(--accent);text-decoration:underline}