:root{color-scheme:dark;--bg:#0d1015;--surface:#10171b;--line:#253136;--muted:#969eae;--white:#f4f5f7;--accent:#03dd98}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--white);font:14px/1.65 Inter,Arial,sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,input{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:wait}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:5px}::selection{color:var(--bg);background:var(--accent)}.shell{width:min(1240px,calc(100% - 80px));margin:auto}.site-header{height:90px;border-bottom:1px solid var(--line);background:#0d1015ed;position:sticky;top:0;z-index:20;backdrop-filter:blur(16px)}.nav-shell{width:min(1360px,calc(100% - 64px));height:100%;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:13px;white-space:nowrap}.brand-mark{font:italic 800 42px/.9 'Barlow Condensed',Impact,sans-serif;letter-spacing:-3px}.brand-mark span{color:var(--accent)}.brand-name{font-size:12px;font-weight:800;letter-spacing:1.6px}.brand-name>span{display:block;font-size:7px;letter-spacing:1.2px;color:var(--muted);margin-top:3px}.site-header nav{display:flex;gap:30px;font-size:12px;font-weight:600;color:var(--muted)}.site-header nav a:hover,.site-header nav .nav-active{color:var(--white)}.button{display:inline-flex;align-items:center;justify-content:center;gap:28px;padding:15px 24px;border:1px solid var(--line);border-radius:5px;font-size:12px;font-weight:700;transition:background .18s,transform .18s}.button:hover{background:#262d39;transform:translateY(-2px)}.button-small{padding:11px 17px;gap:14px}.button-primary{background:var(--accent);color:#0b1713;border-color:var(--accent)}.button-primary:hover{background:#5ff0c0}.steam-icon{font-size:19px}.menu-toggle{display:none}.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:24px;align-items:center;padding-top:76px;padding-bottom:76px;min-height:645px}.eyebrow{font-size:9px;font-weight:700;letter-spacing:1.8px;display:flex;align-items:center;gap:10px;color:#b0b8c5}.status-dot{width:6px;height:6px;display:inline-block;background:var(--accent);border-radius:50%;box-shadow:0 0 12px #03dd9840;flex-shrink:0}h1,h2,h3,p{margin:0}h1{font:800 clamp(64px,6.8vw,94px)/.94 'Barlow Condensed',Impact,sans-serif;letter-spacing:-1px;margin:26px 0}h1>span{color:var(--accent)}.hero-copy>p{max-width:410px;color:var(--muted);font-size:14px;line-height:1.85}.hero-actions{display:flex;gap:26px;align-items:center;margin-top:30px}.text-link{display:inline-flex;align-items:center;gap:18px;font-size:11px;font-weight:600;background:none;border:0;padding:0;color:var(--white)}.text-link:hover{color:var(--accent)}.hero-note{font-size:9px;color:#707b8d;margin-top:30px}.mini-cross{color:var(--accent);font-size:14px;margin-right:8px}.hero-art{height:440px;position:relative;isolation:isolate;overflow:hidden;border:1px solid #29322f;border-radius:8px;background:radial-gradient(ellipse at 55% 40%,#2f433c80,transparent 65%),#111614}.art-grid{position:absolute;inset:0;opacity:.4;background-image:linear-gradient(#4d8b7617 1px,transparent 1px),linear-gradient(90deg,#4d8b7617 1px,transparent 1px);background-size:40px 40px;mask-image:linear-gradient(black,transparent)}.art-word{position:absolute;inset:53px 0 0;text-align:center;font:800 105px/.88 'Barlow Condensed',Impact,sans-serif;letter-spacing:-2px;color:#95d9c212}.orbit{position:absolute;border:1px solid #91d7c019;border-radius:50%;width:335px;height:335px;left:50%;top:45%;transform:translate(-50%,-50%)}.orbit-two{width:260px;height:260px;border-style:dashed}.art-coordinate{position:absolute;left:24px;top:20px;font-size:8px;letter-spacing:2px;color:#91a19c}.art-cross{position:absolute;right:24px;top:13px;color:var(--accent);font-size:24px;font-weight:300}.hero-weapon{position:absolute;width:112%;height:310px;object-fit:contain;top:36px;left:-5%;transform:rotate(-13deg);filter:drop-shadow(0 30px 14px #0008);z-index:2}.weapon-label{position:absolute;left:26px;right:26px;bottom:53px;display:flex;align-items:center;gap:12px}.rarity-line{height:37px;width:3px;background:#eb7465}.weapon-label small{font-size:7px;letter-spacing:1.6px;color:#96a8a2}.weapon-label strong{display:block;font-size:13px}.weapon-label strong span{color:#99a7a2;font-weight:400}.weapon-badge{margin-left:auto;border:1px solid #e784602e;padding:3px 8px;color:#e69579;font-size:7px;letter-spacing:1px}.art-caption{display:flex;justify-content:space-between;position:absolute;bottom:0;left:0;right:0;padding:13px 25px;border-top:1px solid #5e8e7e26;font-size:7px;color:#798f88;letter-spacing:1px}.feature-strip{border-block:1px solid var(--line);background:#0e1117}.feature-strip .shell{display:flex;align-items:center;justify-content:space-between;padding-block:22px;font-size:10px;font-weight:600;letter-spacing:1.2px;color:#bcc1cb}.feature-strip b{font-size:8px;color:#626c7b;margin-right:11px}.feature-strip i{font-size:14px;color:var(--accent);font-style:normal}.section{padding-top:82px;padding-bottom:18px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:30px}h2{font:700 48px/1.08 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.5px;margin-top:12px}h2 span{color:#8d95a3}.live-label{display:flex;align-items:center;gap:9px;font-size:8px;letter-spacing:1px;padding-bottom:8px;color:var(--muted)}.server-toolbar{display:flex;justify-content:space-between;gap:16px;margin-bottom:20px}.filter-tabs{display:flex;gap:7px}.filter-tabs button{border:1px solid transparent;border-radius:4px;padding:9px 16px;background:none;color:var(--muted);font-size:10px}.filter-tabs button.active{border-color:#30453e;background:#03dd980c;color:var(--accent)}.filter-tabs button span{margin-left:8px;font-size:9px}.search-box{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:4px;padding:0 12px;color:var(--muted)}.search-box>span{font-size:23px}.search-box input{border:0;background:transparent;color:var(--white);width:200px;padding:9px 0;font-size:10px;outline-offset:0}.server-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.server-empty{grid-column:1/-1;text-align:center;padding:38px 24px;border:1px solid var(--line);border-radius:6px;background:linear-gradient(120deg,#131923,#10141b)}.empty-icon{color:var(--accent);font-size:28px;line-height:1.2}.server-empty h3{font-size:15px;margin:8px 0}.server-empty p{color:var(--muted);font-size:11px}.server-card{border:1px solid var(--line);border-radius:6px;background:var(--surface);overflow:hidden}.server-cover{height:86px;padding:18px;display:flex;justify-content:space-between;align-items:flex-start;background:radial-gradient(at 80% 80%,#3a584e65,transparent),repeating-linear-gradient(125deg,transparent 0 28px,#ffffff03 29px 30px),#1a2320}.server-cover>strong{font:700 23px 'Barlow Condensed',sans-serif;text-transform:uppercase}.server-state{color:var(--accent);font-size:8px;letter-spacing:1px}.server-state.offline{color:#9ca4b3}.server-body{padding:18px}.server-body h3{font-size:13px;overflow-wrap:anywhere}.server-info{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;margin-top:12px}.capacity{height:3px;background:#272e38;margin:12px 0 18px}.capacity span{display:block;height:100%;background:var(--accent)}.server-actions{display:flex;gap:8px}.server-actions .button{flex:1;padding:8px 12px;font-size:10px}.copy-address{border:1px solid var(--line);border-radius:4px;color:#b4bdca;background:#1b212b;padding:8px 11px}.section-foot{display:flex;justify-content:space-between;margin-top:16px;color:#697587;font-size:9px}.section-foot .text-link{font-size:9px;color:#919bab}.section-heading>p{color:var(--muted);font-size:12px;line-height:1.9}.experience-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.loadout-card,.rank-card{background:var(--surface);border:1px solid var(--line);border-radius:7px;overflow:hidden;position:relative}.card-topline{display:flex;justify-content:space-between;align-items:center;margin:24px 26px 0;font-size:7px;color:#697588;letter-spacing:1.2px}.pill{font-size:7px;color:#b6c0ce;border:1px solid #343e4b;border-radius:3px;padding:5px 8px;letter-spacing:1px}.loadout-image{height:230px;position:relative;background:radial-gradient(ellipse,#5d386735,transparent 65%)}.loadout-image img{width:86%;height:100%;object-fit:contain;transform:rotate(-10deg);margin-left:6%;filter:drop-shadow(0 20px 10px #0008)}.skin-caption{position:absolute;right:28px;bottom:17px;font-size:8px;color:#ac94b3;letter-spacing:2px}.skin-caption b{display:block;font-size:11px;color:#c7a9d1}.feature-copy{padding:5px 30px 28px}.feature-copy h3{font:600 32px/1.15 'Barlow Condensed',Impact,sans-serif}.feature-copy p{font-size:11px;color:var(--muted);max-width:370px;margin:14px 0 20px;line-height:1.9}.feature-copy .text-link{color:var(--accent)}.feature-copy small{display:block;color:#667286;font-size:8px;margin-top:25px}.rank-art{height:230px;display:flex;justify-content:center;align-items:center;position:relative;background:radial-gradient(ellipse,#03dd9812,transparent 60%)}.rank-emblem{font-size:65px;color:#acedd7;width:100px;height:112px;display:grid;place-items:center;clip-path:polygon(50% 0,100% 20%,90% 73%,50% 100%,10% 73%,0 20%);background:linear-gradient(120deg,#4e7a6b,#30271f 50%,#578576);text-shadow:0 2px 10px #81ffd555}.rank-wing{font-size:30px;color:#5d8f7e;letter-spacing:-12px;margin:0 20px 0 8px;transform:rotate(-14deg)}.rank-wing.left{transform:rotate(14deg);margin:0 8px 0 20px}.rank-art-label{position:absolute;bottom:18px;font-size:7px;letter-spacing:3px;color:#81b0a0}.getting-started{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding-bottom:70px;margin-top:20px;border-bottom:1px solid var(--line)}.getting-started ol{margin:0;padding:0;list-style:none}.getting-started li{display:flex;gap:22px;padding:18px 0;border-bottom:1px solid var(--line)}.getting-started li:first-child{padding-top:0}.getting-started li:last-child{border:0}.getting-started li>span{font:600 30px 'Barlow Condensed',sans-serif;color:var(--accent)}.getting-started h3{font-size:12px;margin-bottom:5px}.getting-started p{font-size:11px;color:var(--muted)}.community-banner{margin-top:70px;margin-bottom:70px;padding:42px 48px;background:linear-gradient(105deg,#19201e,#111715);border:1px solid #2c3d37;border-radius:7px;position:relative;overflow:hidden}.community-banner h2{font-size:55px;position:relative;z-index:1}.community-banner h2 span{color:var(--accent)}.community-banner p{font-size:11px;color:#99a9a4;margin:20px 0 24px;position:relative;z-index:1}.banner-symbol{position:absolute;right:75px;top:20px;color:#03dd9820;font-size:240px;line-height:1}.site-footer{display:flex;flex-wrap:wrap;align-items:center;gap:26px;padding-top:28px;padding-bottom:30px;border-top:1px solid var(--line)}.site-footer .brand-mark{font-size:33px}.site-footer .brand-name{font-size:9px}.site-footer p{color:#677183;font-size:10px}.site-footer nav{display:flex;gap:24px;margin-left:auto;font-size:10px;color:#a0a7b3}.site-footer small{flex-basis:100%;font-size:8px;color:#5d687a}.skip-link{position:fixed;top:-100px;z-index:100;padding:10px;background:var(--accent);color:#000}.skip-link:focus{top:10px}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);z-index:30;background:#1f312b;border:1px solid #4d8774;border-radius:5px;padding:12px 22px;font-size:12px}.toast[hidden]{display:none}
@media(min-width:1500px){.hero{padding-block:90px}}@media(max-width:1000px){.shell{width:calc(100% - 48px)}.nav-shell{width:calc(100% - 40px)}.site-header nav{gap:17px}.brand-name>span{display:none}.hero{gap:14px;padding-block:55px;min-height:auto}h1{font-size:72px}.hero-art{height:390px}.hero-weapon{top:40px;height:265px}.hero-actions{gap:15px}.hero-actions .text-link{font-size:9px}.feature-strip .shell{font-size:8px;letter-spacing:.5px}.feature-strip b{margin-right:4px}.art-word{font-size:85px}.server-grid{grid-template-columns:repeat(2,1fr)}.feature-copy{padding-inline:24px}.banner-symbol{right:20px}}@media(max-width:720px){.shell{width:calc(100% - 36px)}.site-header{height:72px}.nav-shell{gap:14px;width:calc(100% - 32px)}.brand-name{font-size:8px}.brand-mark{font-size:35px}.brand{gap:8px}.button-small{font-size:9px;padding:8px 10px;gap:8px}.steam-icon{display:none}.menu-toggle{display:block;margin-left:auto;background:none;border:0;color:var(--white);font-size:21px}.site-header nav{display:none;position:absolute;top:71px;left:0;right:0;background:#10141b;padding:22px;flex-direction:column;border-bottom:1px solid var(--line)}.site-header nav.open{display:flex}.hero{grid-template-columns:1fr;padding-block:42px;gap:36px}.eyebrow{font-size:8px;letter-spacing:1.1px}h1{font-size:78px}.hero-copy>p{font-size:13px}.hero-note{margin-top:23px}.hero-art{height:360px}.hero-weapon{height:275px;top:15px}.art-word{font-size:95px;top:38px}.hero-actions{gap:22px}.hero-actions .text-link{font-size:10px}.feature-strip .shell{display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:8px}.feature-strip i{display:none}.section{padding-top:52px}.section-heading{align-items:flex-start;gap:18px}.section-heading h2{font-size:38px}.section-heading .live-label{font-size:6px;margin-top:10px;white-space:nowrap}.server-toolbar{flex-direction:column}.search-box input{width:100%}.filter-tabs button{font-size:9px;padding:8px 13px}.server-grid{grid-template-columns:1fr}.server-empty{padding:30px 16px}.section-foot{font-size:8px;gap:12px}.section-foot .text-link{font-size:8px}.experience-grid{grid-template-columns:1fr}.section-heading>p{font-size:10px;max-width:130px}.loadout-image,.rank-art{height:220px}.getting-started{grid-template-columns:1fr;gap:30px;padding-bottom:40px}.getting-started h2{font-size:42px}.community-banner{padding:30px 24px;margin-block:42px}.community-banner h2{font-size:43px}.banner-symbol{right:-45px;top:70px;font-size:180px}.community-banner p{max-width:260px;font-size:10px}.site-footer{gap:18px}.site-footer nav{width:100%;margin:0}.site-footer small{line-height:1.8}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Desktop reading scale. Keep the compact tablet and phone layouts. */
@media (min-width: 1024px) {
  .shell { width: min(1440px, calc(100% - 96px)); }
  body { font-size: 16px; }
  .site-header { height: 100px; }
  .nav-shell { width: min(1560px, calc(100% - 80px)); }
  .brand-mark { font-size: 50px; }
  .brand-name { font-size: 15px; }
  .brand-name > span { font-size: 9px; }
  .site-header nav { font-size: 15px; gap: 32px; }
  .button { font-size: 15px; padding: 17px 28px; min-height: 54px; }
  .button-small { font-size: 13px; padding: 13px 20px; min-height: 48px; }
  .hero { min-height: 720px; gap: 44px; padding-block: 88px; }
  .eyebrow { font-size: 12px; letter-spacing: 1.5px; }
  h1 { font-size: clamp(90px, 7vw, 112px); }
  .hero-copy > p { max-width: 510px; font-size: 17px; }
  .hero-actions { gap: 28px; margin-top: 36px; }
  .text-link, .hero-actions .text-link { font-size: 14px; }
  .hero-note { font-size: 12px; margin-top: 34px; }
  .hero-art { height: 500px; }
  .hero-weapon { height: 355px; top: 40px; }
  .art-word { font-size: 124px; top: 62px; }
  .art-coordinate, .art-caption { font-size: 10px; }
  .weapon-label { bottom: 65px; gap: 16px; }
  .weapon-label small, .weapon-badge { font-size: 10px; }
  .weapon-label strong { font-size: 17px; }
  .art-caption { padding-block: 17px; }
  .feature-strip .shell { padding-block: 26px; font-size: 12px; letter-spacing: 1px; }
  .feature-strip b { font-size: 11px; }
  .section { padding-top: 100px; }
  h2 { font-size: 58px; }
  .section-heading { margin-bottom: 36px; }
  .section-heading > p { font-size: 15px; }
  .live-label { font-size: 11px; }
  .filter-tabs button { font-size: 14px; padding: 12px 20px; min-height: 46px; }
  .filter-tabs button span { font-size: 12px; }
  .search-box { padding-inline: 16px; }
  .search-box input { font-size: 14px; width: 250px; padding-block: 13px; }
  .server-grid { gap: 22px; }
  .server-empty { padding: 48px 32px; }
  .server-empty h3 { font-size: 20px; }
  .server-empty p { font-size: 14px; }
  .server-cover { height: 108px; padding: 22px; }
  .server-cover > strong { font-size: 29px; }
  .server-state { font-size: 11px; }
  .server-body { padding: 24px; }
  .server-body h3 { font-size: 17px; }
  .server-info { font-size: 13px; margin-top: 16px; }
  .server-actions .button { font-size: 13px; padding: 11px 14px; min-height: 44px; }
  .copy-address { font-size: 18px; min-width: 44px; }
  .section-foot, .section-foot .text-link { font-size: 12px; }
  .experience-grid { gap: 28px; }
  .card-topline { margin: 30px 34px 0; font-size: 10px; }
  .pill { font-size: 10px; padding: 7px 11px; }
  .loadout-image, .rank-art { height: 285px; }
  .skin-caption { font-size: 11px; }
  .skin-caption b { font-size: 14px; }
  .feature-copy { padding: 8px 36px 36px; }
  .feature-copy h3 { font-size: 40px; }
  .feature-copy p { font-size: 15px; max-width: 480px; margin: 18px 0 25px; }
  .feature-copy small { font-size: 11px; }
  .rank-art-label { font-size: 10px; }
  .rank-emblem { width: 120px; height: 135px; font-size: 78px; }
  .rank-wing { font-size: 36px; }
  .getting-started { gap: 80px; padding-bottom: 86px; }
  .getting-started li { gap: 26px; padding-block: 24px; }
  .getting-started li > span { font-size: 38px; }
  .getting-started h3 { font-size: 16px; }
  .getting-started p { font-size: 14px; }
  .community-banner { margin-block: 88px; padding: 54px 60px; }
  .community-banner h2 { font-size: 68px; }
  .community-banner p { font-size: 15px; }
  .banner-symbol { font-size: 290px; }
  .site-footer { padding-block: 34px; }
  .site-footer .brand-mark { font-size: 42px; }
  .site-footer .brand-name { font-size: 12px; }
  .site-footer p, .site-footer nav { font-size: 13px; }
  .site-footer small { font-size: 11px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .nav-shell { width: calc(100% - 48px); gap: 18px; }
  .site-header nav { gap: 20px; font-size: 14px; }
  .brand-name { font-size: 12px; }
  .hero { gap: 26px; }
  h1 { font-size: 88px; }
  .hero-art { height: 450px; }
  .hero-weapon { height: 310px; }
  .hero-actions { gap: 18px; flex-wrap: wrap; }
  .feature-strip .shell { font-size: 10px; }
}
