@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500;600;700;800;900&family=Rubik:wght@500;600;700;800;900&display=swap');
:root{--blue:#2daaf4;--deep:#102c53;--ink:#132c4d;--paper:#fffdf5;--yellow:#ffe365;--red:#ff6556;--purple:#7254df;--green:#b6df57;--line:#d7e0eb;--max:1160px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Nunito,'Trebuchet MS',sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit}
.topbar{height:76px;padding:0 max(24px,calc((100vw - var(--max))/2));display:flex;align-items:center;justify-content:space-between;background:white;border-bottom:3px solid var(--deep)}
.wordmark{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:Rubik,Arial,sans-serif;font-size:13px;font-weight:900;letter-spacing:.07em}.wordmark b{color:#4e8cc9}.wordmark-icon{display:grid;place-items:center;width:30px;height:30px;background:var(--yellow);border:2px solid var(--deep);border-radius:8px;box-shadow:2px 2px 0 var(--deep);font-weight:900;font-size:18px;transform:rotate(-5deg)}
.nav-join{font-size:13px;font-weight:900;text-decoration:none;background:var(--green);border:2px solid var(--deep);padding:9px 13px;border-radius:12px;box-shadow:3px 3px 0 var(--deep)}.nav-join span{margin-left:6px}
.hero{position:relative;min-height:550px;max-width:var(--max);margin:30px auto 0;padding:50px;display:flex;align-items:center;overflow:hidden;border:3px solid var(--deep);border-radius:28px;background:var(--blue);box-shadow:8px 8px 0 var(--deep);isolation:isolate}
.hero-art{position:absolute;z-index:-2;inset:0;background-image:linear-gradient(90deg,#62c4fa 0%,#62c4faee 27%,#62c4fa99 48%,transparent 75%),url('assets/block-game-world.png');background-size:cover;background-position:center}
.hero:after{position:absolute;content:'';inset:0;z-index:-1;background:linear-gradient(180deg,transparent 70%,#102c531a)}
.hero-copy{width:min(520px,56%);position:relative;z-index:1}.game-tag{display:inline-flex;align-items:center;gap:8px;background:white;border:2px solid var(--deep);box-shadow:3px 3px 0 var(--deep);border-radius:9px;padding:8px 11px;font:800 10px Rubik,Arial,sans-serif;letter-spacing:.09em;color:var(--deep);margin-bottom:23px}.live-dot{width:9px;height:9px;background:#78cc47;border:1px solid var(--deep);border-radius:50%}
h1,h2,p{margin-top:0}h1{font:900 clamp(46px,6vw,74px)/.98 Rubik,Arial,sans-serif;letter-spacing:-.065em;color:var(--deep);margin-bottom:18px;text-shadow:2px 3px 0 #ffffff80}h1 span{color:white;-webkit-text-stroke:1px var(--deep);text-shadow:3px 4px 0 var(--deep)}
.hero-copy>p{max-width:410px;font-size:16px;line-height:1.65;font-weight:700;color:#163253;margin:0 0 25px}.cta-button{display:inline-flex;align-items:center;gap:17px;background:var(--yellow);border:2px solid var(--deep);border-radius:13px;box-shadow:4px 4px 0 var(--deep);padding:13px 16px;text-decoration:none;font-size:13px;font-weight:900;transition:transform .16s ease,box-shadow .16s ease}.cta-button:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--deep)}
.hero-sticker{position:absolute;display:grid;place-items:center;border:2px solid var(--deep);box-shadow:3px 3px 0 var(--deep);font-family:Rubik,Arial,sans-serif;font-weight:900}.sticker-star{width:56px;height:56px;top:35px;right:43%;background:var(--yellow);font-size:32px;color:#ff9a28;clip-path:polygon(50% 0,62% 34%,98% 35%,70% 58%,80% 94%,50% 73%,19% 94%,29% 58%,2% 35%,38% 34%);border:0;box-shadow:none;transform:rotate(10deg)}.sticker-smile{width:44px;height:44px;bottom:46px;left:48%;background:#ff8674;border-radius:14px;transform:rotate(10deg);font-size:14px}.image-caption{position:absolute;right:18px;bottom:14px;color:white;text-shadow:1px 1px 2px #102c53;font:800 9px Rubik,Arial,sans-serif;letter-spacing:.14em}
.server-section{max-width:var(--max);margin:95px auto 100px;padding:0 20px;display:grid;grid-template-columns:.8fr 1.2fr;gap:68px;align-items:center}.eyebrow{font:900 10px Rubik,Arial,sans-serif;letter-spacing:.14em;color:#4779b2;margin-bottom:14px}.section-intro h2{font:900 38px/1.04 Rubik,Arial,sans-serif;letter-spacing:-.05em;margin:0 0 15px;color:var(--deep)}.section-intro>p:last-child{font-size:14px;line-height:1.75;color:#526880;max-width:340px;margin:0}
.server-console{background:white;border:2px solid var(--deep);border-radius:18px;box-shadow:6px 6px 0 var(--deep);overflow:hidden}.console-tabs{display:flex;gap:4px;padding:12px 13px 0;background:#e9f6ff;border-bottom:2px solid var(--deep)}.console-tab{border:2px solid transparent;border-bottom:0;background:transparent;border-radius:11px 11px 0 0;padding:10px 14px;color:#52708c;font:800 12px Nunito,sans-serif;cursor:pointer}.console-tab:hover{color:var(--deep);background:#ffffff80}.console-tab.is-active{background:white;color:var(--deep);border-color:var(--deep);position:relative;top:2px}
.console-body{padding:28px 24px 23px;min-height:153px}.tab-panel{display:flex;align-items:center;justify-content:space-between;gap:15px}.panel-copy{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0}.panel-label{font:900 9px Rubik,Arial,sans-serif;letter-spacing:.15em;color:#6184a4}.panel-copy strong{font:900 23px Rubik,Arial,sans-serif;color:var(--deep);overflow-wrap:anywhere}.panel-copy .server-address{font-size:31px;letter-spacing:.03em}.port-line{color:#62778d;font-size:12px;line-height:1.55}.port-line code{font:900 12px Rubik,Arial,sans-serif;background:#eff5fb;padding:3px 6px;border-radius:5px;color:var(--deep)}.copy-button{flex:0 0 auto;display:flex;align-items:center;gap:9px;padding:11px 14px;border:2px solid var(--deep);border-radius:11px;background:var(--yellow);box-shadow:3px 3px 0 var(--deep);color:var(--deep);font:900 12px Nunito,sans-serif;cursor:pointer;transition:transform .14s ease,box-shadow .14s ease}.copy-button:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--deep)}.copy-icon{font-size:17px;line-height:1}.panel-symbol{display:grid;place-items:center;flex:0 0 56px;height:56px;border:2px solid var(--deep);border-radius:14px;background:#fff2b2;font-size:26px;box-shadow:3px 3px 0 var(--deep)}.console-footer{display:flex;align-items:center;gap:7px;padding:9px 16px;background:#f3f8fc;border-top:1px solid var(--line);font:800 9px Rubik,Arial,sans-serif;letter-spacing:.13em;color:#69819a}.console-led{width:7px;height:7px;border-radius:50%;background:#72ca47;border:1px solid #456f2e}
.switch-panel{align-items:flex-start}.switch-panel .panel-copy{width:100%}.switch-panel .panel-copy strong{max-width:580px}.switch-details{width:100%;margin-top:5px;border-top:1px solid var(--line)}.switch-details summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0 2px;cursor:pointer;color:#376ca1;font-size:12px;font-weight:900}.switch-details summary::-webkit-details-marker{display:none}.switch-details summary b{display:grid;place-items:center;width:23px;height:23px;border:1px solid var(--deep);border-radius:7px;background:var(--yellow);color:var(--deep);font-size:17px;transition:transform .16s ease}.switch-details[open] summary b{transform:rotate(45deg)}.switch-instructions{padding:9px 0 2px}.switch-instructions p{font-size:12px;line-height:1.65;color:#536d84;margin:0 0 9px}.switch-instructions strong{font:800 12px Nunito,sans-serif;color:var(--deep)}.switch-instructions code{font:900 11px Rubik,Arial,sans-serif;background:#eff5fb;color:var(--deep);padding:2px 5px;border-radius:4px}.switch-instructions a{display:inline-block;margin-top:3px;color:#376ca1;font-size:11px;font-weight:900;text-underline-offset:3px}
.switch-guide-link{display:inline-block;margin-top:8px;color:#376ca1;font-size:12px;font-weight:900;text-underline-offset:3px}
.join-banner{position:relative;overflow:hidden;max-width:var(--max);margin:0 auto 94px;padding:35px 42px;min-height:234px;background:var(--purple);color:white;border:3px solid var(--deep);border-radius:25px;box-shadow:7px 7px 0 var(--deep);display:grid;grid-template-columns:1fr 1fr;gap:20px 45px;align-items:center}.join-banner .eyebrow{color:#e3dbff;margin-bottom:12px}.join-banner h2{font:900 37px/1 Rubik,Arial,sans-serif;letter-spacing:-.05em;text-shadow:2px 3px 0 #3d2c98;margin:0}.join-details{position:relative;z-index:2;background:white;color:var(--deep);border:2px solid var(--deep);border-radius:13px;box-shadow:4px 4px 0 var(--deep);padding:0 15px}.join-details summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 0;font-weight:900;font-size:14px}.join-details summary::-webkit-details-marker{display:none}.join-details summary b{display:grid;place-items:center;width:25px;height:25px;background:var(--yellow);border:1px solid var(--deep);border-radius:7px;font-size:19px;transition:transform .18s ease}.join-details[open] summary b{transform:rotate(45deg)}.join-details p{font-size:13px;line-height:1.65;color:#526880;margin:0;padding:0 0 15px}.banner-spark{position:absolute;left:46%;top:26px;color:var(--yellow);font-size:42px;transform:rotate(12deg)}.banner-orb{position:absolute;width:144px;height:144px;right:-48px;bottom:-70px;border-radius:50%;background:#55bff5;border:3px solid var(--deep);box-shadow:inset -11px -13px 0 #3086d6}.banner-orb span{position:absolute;width:25px;height:25px;background:#fff4b4;border:2px solid var(--deep);border-radius:50%;left:26px;top:26px}
footer{max-width:var(--max);margin:auto;padding:0 20px 27px;display:flex;align-items:center;justify-content:space-between}footer p{font-size:11px;color:#6c8094;margin:0}.footer-mark{font-size:11px}.footer-mark .wordmark-icon{width:25px;height:25px;font-size:15px}.toast{position:fixed;z-index:10;left:50%;bottom:23px;transform:translate(-50%,12px);opacity:0;pointer-events:none;padding:11px 15px;background:var(--deep);border:2px solid white;border-radius:11px;box-shadow:3px 3px 0 #081729;color:white;font-weight:800;font-size:12px;transition:opacity .18s ease,transform .18s ease}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){.hero{margin:20px 20px 0;min-height:510px;padding:37px}.hero-art{background-image:linear-gradient(90deg,#62c4fa 0%,#62c4faed 34%,#62c4fa99 61%,transparent 100%),url('assets/block-game-world.png');background-position:60% center}.server-section{gap:34px}.join-banner{margin-left:20px;margin-right:20px}}
@media(max-width:680px){.topbar{height:66px;padding:0 18px}.wordmark{font-size:11px}.wordmark-icon{width:27px;height:27px}.nav-join{font-size:12px;padding:8px 10px}.hero{margin:15px 13px 0;padding:25px 22px;min-height:635px;align-items:flex-start;border-radius:22px;box-shadow:5px 5px 0 var(--deep)}.hero-art{background-image:linear-gradient(180deg,#62c4fa 0%,#62c4f9f2 33%,#62c4fa88 58%,transparent 76%),url('assets/block-game-world.png');background-position:61% bottom;background-size:auto 100%,auto 72%;background-repeat:no-repeat;background-color:#65c1f2}.hero-copy{width:100%}.game-tag{font-size:9px;margin-bottom:21px}h1{font-size:clamp(43px,12vw,65px)}.hero-copy>p{font-size:14px;max-width:330px}.sticker-star{right:14%;top:36%}.sticker-smile{left:14%;bottom:19%}.image-caption{font-size:8px;right:11px;bottom:11px}.server-section{margin:72px auto 78px;padding:0 18px;grid-template-columns:1fr;gap:24px}.section-intro h2{font-size:32px}.section-intro>p:last-child{font-size:13px}.console-tabs{padding:9px 8px 0}.console-tab{padding:9px 10px;font-size:11px}.console-body{padding:21px 17px;min-height:142px}.panel-copy strong{font-size:19px}.panel-copy .server-address{font-size:27px}.copy-button{padding:10px 11px;font-size:11px;gap:6px}.panel-symbol{flex-basis:45px;height:45px;font-size:21px}.join-banner{margin:0 13px 64px;padding:26px 22px;grid-template-columns:1fr;gap:20px;min-height:unset}.join-banner h2{font-size:32px}.banner-spark{left:auto;right:30px;top:20px}.join-details{margin-right:13px}footer{padding:0 18px 22px;gap:13px}footer p{text-align:right;max-width:145px;line-height:1.5}}
@media(max-width:360px){.hero{min-height:605px;padding:21px 17px}.game-tag{font-size:8px}.console-tab{padding:8px 7px;font-size:10px}.tab-panel{align-items:flex-start}.copy-button{flex-direction:column;padding:9px 8px}.copy-button span:last-child{max-width:62px;text-align:center}.panel-copy .server-address{font-size:24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}