:root {
  --ink: #0b1220;
  --ink-soft: #182336;
  --paper: #f2f4f0;
  --line: #d9ded9;
  --muted: #6a746f;
  --lime: #d7f95b;
  --lime-dark: #a7cb27;
  --blue: #4d8cff;
  --white: #fbfcfa;
  --mono: 'DM Mono', monospace;
  --sans: 'Manrope', 'Noto Sans SC', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
.site-shell { min-width: 320px; overflow: hidden; }
.topbar { align-items: center; background: var(--paper); display: flex; height: 80px; justify-content: space-between; padding: 0 5vw; position: sticky; top: 0; z-index: 10; }
.brand { align-items: center; display: flex; gap: 11px; line-height: 1; }
.brand-mark { align-items: center; background: var(--ink); color: var(--lime); display: inline-flex; font-size: 18px; font-weight: 900; height: 36px; justify-content: center; letter-spacing: -2px; width: 36px; }
.brand strong { display: block; font-size: 16px; letter-spacing: .04em; }
.brand small { color: var(--muted); display: block; font-family: var(--mono); font-size: 9px; margin-top: 6px; }
.main-nav { display: flex; gap: 34px; margin-left: auto; margin-right: 34px; }
.main-nav a, .footer-links a { color: #46514c; font-size: 12px; font-weight: 700; transition: color .2s; }
.main-nav a:hover, .footer-links a:hover { color: var(--ink); }
.top-actions { align-items: center; display: flex; gap: 24px; }
.qq-link { align-items: center; color: #46514c; display: flex; font-family: var(--mono); font-size: 10px; gap: 7px; }
.dot { background: var(--lime-dark); border-radius: 50%; display: inline-block; height: 6px; width: 6px; }
.button { align-items: center; border: 0; cursor: pointer; display: inline-flex; font-size: 11px; font-weight: 800; gap: 20px; justify-content: center; letter-spacing: .02em; padding: 14px 18px; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-dark { background: var(--ink); color: var(--white); }
.button-lime { background: var(--lime); color: var(--ink); }
.button-full { width: 100%; }
.menu-toggle, .icon-button { background: transparent; border: 0; cursor: pointer; }
.menu-toggle { display: none; font-size: 18px; }
.section-pad { padding-left: 10vw; padding-right: 10vw; }
.hero { align-items: center; display: grid; gap: 7vw; grid-template-columns: .87fr 1.13fr; min-height: calc(100vh - 80px); padding-bottom: 75px; padding-top: 60px; }
.hero-content { max-width: 520px; }
.eyebrow { align-items: center; color: var(--muted); display: flex; font-family: var(--mono); font-size: 10px; gap: 10px; letter-spacing: .09em; margin: 0 0 22px; }
.eyebrow-line { background: var(--lime-dark); display: inline-block; height: 2px; width: 24px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(48px, 6vw, 84px); letter-spacing: -.07em; line-height: 1.02; margin-bottom: 28px; }
h1 em, h2 em { color: var(--lime-dark); font-style: normal; }
.hero-copy { color: #59635e; font-size: 14px; line-height: 1.95; max-width: 410px; }
.hero-actions { align-items: center; display: flex; gap: 26px; margin-top: 34px; }
.text-button { background: transparent; border: 0; color: var(--ink); cursor: pointer; font-size: 11px; font-weight: 800; padding: 8px 0; }
.text-button span { font-family: var(--mono); margin-left: 10px; }
.hero-note { align-items: center; color: var(--muted); display: flex; font-family: var(--mono); font-size: 9px; gap: 9px; margin-top: 65px; text-transform: uppercase; }
.status-dot { border-radius: 50%; display: inline-block; height: 7px; width: 7px; }
.status-dot-live { background: var(--lime-dark); box-shadow: 0 0 0 4px rgba(167,203,39,.15); }
.mono { font-family: var(--mono); }
.hero-visual { min-height: 550px; position: relative; }
.hero-image { background-image: linear-gradient(180deg, rgba(10,18,32,.04), rgba(10,18,32,.34)), url('https://images.unsplash.com/photo-1470770841072-f978cf4d019e?auto=format&fit=crop&w=1800&q=85'); background-position: center; background-size: cover; height: 100%; min-height: 550px; position: relative; }
.hero-image::after { border: 1px solid rgba(255,255,255,.3); content: ''; inset: 18px; position: absolute; }
.image-label { color: #fff; display: flex; font-family: var(--mono); font-size: 9px; justify-content: space-between; left: 34px; letter-spacing: .08em; position: absolute; right: 34px; z-index: 1; }
.image-label-top { top: 35px; }.image-label-bottom { bottom: 35px; }.crosshair { font-size: 18px; line-height: 8px; }
.trust-strip { background: var(--ink); color: #ced5d0; }
.strip-inner { align-items: center; display: flex; gap: 40px; justify-content: space-between; min-height: 70px; padding: 0 10vw; }
.strip-label { color: var(--lime); font-size: 11px; font-weight: 800; }.strip-item { font-family: var(--mono); font-size: 10px; }.strip-item b { color: #76837b; font-size: 9px; margin-right: 10px; }.strip-item i { color: var(--lime); font-style: normal; margin-left: 4px; }
.section-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 34px; }.section-heading h2 { font-size: 38px; letter-spacing: -.06em; margin: 0; }.section-heading > p { color: var(--muted); font-size: 11px; margin: 0 0 3px; }
.server-section, .chat-section, .commands-section { padding-bottom: 115px; padding-top: 125px; }
.status-layout { display: grid; gap: 16px; grid-template-columns: 1.4fr 1fr; }.panel { background: var(--white); border: 1px solid var(--line); }
.status-main { padding: 31px 34px 27px; }.status-main-top { align-items: start; display: flex; justify-content: space-between; }.live-pill { align-items: center; background: #edf7d2; color: #66821a; display: inline-flex; font-family: var(--mono); font-size: 9px; gap: 8px; letter-spacing: .05em; padding: 7px 10px; }.status-main h3 { font-size: 22px; letter-spacing: -.04em; margin: 20px 0 0; }.status-clock { color: var(--muted); font-size: 9px; }.player-count { align-items: baseline; display: flex; gap: 13px; margin-top: 52px; }.player-count strong { font-size: 67px; letter-spacing: -.08em; line-height: .9; }.player-count span { color: var(--muted); font-family: var(--mono); font-size: 9px; line-height: 1.6; }.player-bar { background: #e9eee9; height: 4px; margin-top: 26px; overflow: hidden; }.player-bar span { background: var(--lime-dark); display: block; height: 100%; transition: width .5s; width: 0; }.player-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; min-height: 25px; }.player-list span { align-items: center; border: 1px solid var(--line); color: #5b6760; display: inline-flex; font-family: var(--mono); font-size: 9px; gap: 6px; padding: 7px 9px; }.player-list span::before { background: var(--lime-dark); border-radius: 50%; content: ''; height: 5px; width: 5px; }.player-placeholder { border: 0 !important; color: var(--muted) !important; padding-left: 0 !important; }.player-placeholder::before { display: none; }.metrics-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }.metric { display: flex; flex-direction: column; justify-content: space-between; min-height: 165px; padding: 25px 27px; }.metric-label { color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; }.metric strong { font-size: 37px; letter-spacing: -.07em; }.metric-foot { color: var(--muted); font-family: var(--mono); font-size: 9px; }.metric-wide { grid-column: span 2; min-height: 130px; }.metric-wide strong { font-size: 22px; letter-spacing: -.04em; }
.metric-tps { min-height: 165px; }.tps-values { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); margin: 18px 0 10px; }.tps-values div { border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }.tps-values div:last-child { border-right: 0; }.tps-values strong { font-size: 27px; }.tps-values span { color: var(--muted); font-family: var(--mono); font-size: 8px; }
.join-section { background: #e6ebe6; padding-bottom: 120px; padding-top: 110px; }.address-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }.address-card { background: var(--white); border: 1px solid var(--line); min-height: 218px; padding: 26px 29px; position: relative; }.address-primary { background: var(--ink); border-color: var(--ink); color: var(--white); }.address-card-head { align-items: center; display: flex; justify-content: space-between; }.device-tag, .copy-state { font-family: var(--mono); font-size: 9px; letter-spacing: .09em; }.device-tag { color: var(--muted); }.address-primary .device-tag { color: var(--lime); }.copy-state { color: var(--muted); }.address-primary .copy-state { color: #9eada6; }.address-card > strong { display: block; font-family: var(--mono); font-size: clamp(24px, 3vw, 39px); letter-spacing: -.09em; margin: 38px 0 9px; }.address-card p { color: var(--muted); font-size: 10px; line-height: 1.6; margin: 0; }.address-primary p { color: #99a79e; }.copy-button, .mini-copy { background: transparent; border: 1px solid currentColor; cursor: pointer; font-size: 16px; height: 34px; position: absolute; right: 29px; top: 83px; width: 34px; }.port-line { color: var(--muted); font-family: var(--mono); font-size: 10px; }.port-line b { color: var(--ink); font-size: 15px; margin-left: 4px; }.mini-copy { border: 0; color: var(--muted); font-size: 14px; height: 25px; position: static; width: 25px; }
.chat-layout { margin: auto; max-width: 950px; }.chat-head { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 20px 25px; }.chat-head > div { align-items: center; display: flex; gap: 13px; }.chat-head strong { font-size: 12px; }.chat-head > span { color: var(--muted); font-size: 9px; }.chat-messages { height: 310px; overflow-y: auto; padding: 20px 25px; }.empty-chat { align-items: center; color: var(--muted); display: flex; font-size: 12px; height: 100%; justify-content: center; text-align: center; }.chat-message { align-items: baseline; display: flex; gap: 10px; margin-bottom: 14px; }.chat-message .chat-author { color: var(--ink); font-size: 11px; font-weight: 800; }.chat-message .chat-time { color: var(--muted); font-family: var(--mono); font-size: 8px; }.chat-message .chat-text { color: #58635d; font-size: 12px; }.chat-message.is-server .chat-author { color: var(--lime-dark); }.chat-form { border-top: 1px solid var(--line); display: flex; gap: 10px; padding: 15px 18px; }.chat-form input { background: #f2f5f1; border: 1px solid transparent; color: var(--ink); flex: 1; font-size: 11px; outline: 0; padding: 13px 14px; }.chat-form input:focus { border-color: var(--lime-dark); }.chat-login-tip { color: var(--muted); font-family: var(--mono); font-size: 9px; padding: 0 25px 18px; }.chat-login-tip button { background: none; border: 0; color: var(--ink); cursor: pointer; font-family: inherit; font-size: inherit; font-weight: 700; padding: 0; text-decoration: underline; }
.guide-section { background: var(--white); padding-bottom: 115px; padding-top: 125px; }.guide-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }.guide-card { border: 1px solid var(--line); min-height: 270px; padding: 25px 27px; position: relative; }.guide-card-accent { background: var(--lime); border-color: var(--lime); }.guide-number { color: var(--muted); font-family: var(--mono); font-size: 10px; }.guide-icon { bottom: 25px; font-family: var(--mono); font-size: 28px; position: absolute; right: 27px; }.guide-card h3 { font-size: 19px; letter-spacing: -.04em; margin: 73px 0 15px; }.guide-card p { color: #59645e; font-size: 11px; line-height: 1.8; max-width: 240px; }.guide-card p b { color: var(--ink); font-family: var(--mono); font-size: 10px; }.guide-details { border-top: 1px solid var(--line); display: grid; gap: 40px; grid-template-columns: 1fr 1fr; margin-top: 16px; padding-top: 32px; }.detail-block h3 { font-size: 13px; margin: 0 0 17px; }.detail-block ol { color: #59645e; font-size: 11px; line-height: 2.15; margin: 0; padding-left: 18px; }.detail-block code { background: #e8eee6; color: var(--ink); font-family: var(--mono); font-size: 10px; padding: 3px 5px; }
.commands-section { background: #e6ebe6; }.commands-table { overflow: hidden; }.command-row { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 20px; grid-template-columns: 1.25fr 1fr 1fr; min-height: 60px; padding: 0 27px; }.command-row:last-child { border-bottom: 0; }.command-head { background: #edf1ed; color: var(--muted); font-family: var(--mono); font-size: 9px; min-height: 42px; }.command-row code { color: var(--ink); font-family: var(--mono); font-size: 11px; }.command-row span, .command-row small { color: #59645e; font-size: 11px; }.command-row small { font-family: var(--mono); font-size: 9px; }
.account-section { background: var(--ink); color: var(--white); padding-bottom: 125px; padding-top: 125px; }.account-inner { align-items: center; display: grid; gap: 11vw; grid-template-columns: 1fr .8fr; }.account-section .eyebrow { color: #96a39c; }.account-section h2 { font-size: clamp(38px, 5vw, 65px); letter-spacing: -.08em; line-height: 1.05; }.account-section > .account-inner > div > p:last-child { color: #9aa8a0; font-size: 12px; line-height: 1.9; max-width: 380px; }.account-box { background: #131d2e; border-color: #263346; min-height: 275px; padding: 30px; }.account-logged-out { align-items: center; display: flex; flex-direction: column; justify-content: center; min-height: 213px; text-align: center; }.account-icon { color: var(--lime); font-family: var(--mono); font-size: 27px; }.account-box h3 { font-size: 18px; margin: 13px 0 8px; }.account-box p { color: #91a097; font-size: 10px; margin-bottom: 22px; }.account-logged-in { min-height: 213px; }.account-summary { align-items: center; display: flex; gap: 14px; }.account-avatar { align-items: center; background: var(--lime); color: var(--ink); display: flex; font-size: 18px; font-weight: 900; height: 42px; justify-content: center; width: 42px; }.account-summary small { color: #91a097; display: block; font-family: var(--mono); font-size: 9px; margin-top: 5px; }.bound-state { border-top: 1px solid #263346; margin-top: 26px; padding-top: 22px; }.bound-state > span { color: #91a097; display: block; font-family: var(--mono); font-size: 9px; margin-bottom: 10px; }.bound-row { align-items: center; display: flex; justify-content: space-between; }.bound-name { color: var(--lime); font-family: var(--mono); font-size: 13px; }.link-code { background: #1c2a3e; color: var(--lime); font-family: var(--mono); font-size: 18px; letter-spacing: .16em; padding: 12px; }.account-actions { display: flex; gap: 10px; margin-top: 21px; }.small-dark-button { background: transparent; border: 1px solid #33445b; color: #c6d0ca; cursor: pointer; font-family: var(--mono); font-size: 9px; padding: 10px 12px; }
.footer { align-items: center; background: #080e18; color: #8b9890; display: flex; gap: 26px; justify-content: space-between; padding-bottom: 28px; padding-top: 28px; }.footer-brand { align-items: center; color: var(--white); display: flex; font-size: 12px; gap: 10px; }.footer-brand .brand-mark { font-size: 14px; height: 28px; width: 28px; }.footer p { font-size: 10px; margin: 0; }.footer-links { display: flex; gap: 20px; }.footer-links a { color: #8b9890; font-family: var(--mono); font-size: 9px; }
.modal-backdrop { align-items: center; background: rgba(7,13,22,.72); display: flex; inset: 0; justify-content: center; padding: 20px; position: fixed; z-index: 20; }.modal-backdrop[hidden] { display: none; }.auth-modal { background: var(--paper); max-width: 410px; padding: 38px; position: relative; width: 100%; }.modal-close { background: transparent; border: 0; cursor: pointer; font-size: 24px; line-height: 1; position: absolute; right: 18px; top: 15px; }.auth-heading h2 { font-size: 29px; letter-spacing: -.06em; margin-bottom: 10px; }.auth-heading p:last-child { color: var(--muted); font-size: 11px; }.auth-tabs { border-bottom: 1px solid var(--line); display: flex; gap: 24px; margin-top: 27px; }.auth-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer; font-size: 11px; padding: 0 0 11px; }.auth-tab.is-active { border-color: var(--lime-dark); color: var(--ink); font-weight: 800; }.auth-form { display: grid; gap: 16px; margin-top: 24px; }.auth-form label { color: var(--muted); display: grid; font-family: var(--mono); font-size: 9px; gap: 8px; }.auth-form input { background: var(--white); border: 1px solid var(--line); color: var(--ink); font-size: 12px; outline: 0; padding: 13px; }.auth-form input:focus { border-color: var(--lime-dark); }.form-message { color: #b33e36; font-size: 10px; margin: 0; min-height: 15px; }.toast { background: var(--ink); bottom: 24px; color: var(--white); font-family: var(--mono); font-size: 10px; left: 50%; opacity: 0; padding: 13px 17px; pointer-events: none; position: fixed; transform: translate(-50%, 20px); transition: .25s; z-index: 30; }.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 900px) { .section-pad { padding-left: 6vw; padding-right: 6vw; }.main-nav { gap: 16px; margin-right: 16px; }.qq-link { display: none; }.hero { gap: 5vw; }.hero-visual, .hero-image { min-height: 450px; }.strip-inner { gap: 18px; padding-left: 6vw; padding-right: 6vw; }.strip-label { display: none; }.account-inner { gap: 6vw; } }
@media (max-width: 700px) { .topbar { height: 67px; padding: 0 5vw; }.top-actions { margin-left: auto; margin-right: 13px; }.button-login { padding: 11px 13px; }.main-nav { background: var(--paper); border-bottom: 1px solid var(--line); display: none; flex-direction: column; gap: 0; left: 0; margin: 0; padding: 10px 5vw 18px; position: absolute; right: 0; top: 67px; }.main-nav.is-open { display: flex; }.main-nav a { padding: 12px 0; }.menu-toggle { display: block; }.hero { display: flex; flex-direction: column; min-height: auto; padding-bottom: 60px; padding-top: 65px; }.hero-content { max-width: none; width: 100%; }.hero-visual { min-height: 390px; width: 100%; }.hero-image { min-height: 390px; }.hero-note { margin-top: 37px; }.trust-strip { overflow: auto; }.strip-inner { justify-content: flex-start; min-width: max-content; padding: 0 5vw; }.section-heading { align-items: start; flex-direction: column; gap: 10px; }.section-heading h2 { font-size: 31px; }.server-section, .chat-section, .commands-section { padding-bottom: 72px; padding-top: 76px; }.status-layout, .address-grid, .guide-grid, .guide-details, .account-inner { grid-template-columns: 1fr; }.status-main { padding: 24px 20px; }.metrics-grid { gap: 10px; }.metric { min-height: 138px; padding: 20px; }.metric-tps { min-height: 138px; }.tps-values { margin-top: 12px; }.tps-values strong { font-size: 24px; }.metric-wide { min-height: 110px; }.metric strong { font-size: 30px; }.player-count strong { font-size: 56px; }.join-section, .guide-section, .account-section { padding-bottom: 75px; padding-top: 76px; }.address-card { min-height: 204px; }.guide-card { min-height: 220px; }.guide-card h3 { margin-top: 45px; }.command-row { gap: 10px; grid-template-columns: 1.3fr 1fr; min-height: 66px; padding: 0 15px; }.command-row small { display: none; }.command-head { grid-template-columns: 1.3fr 1fr; min-height: 38px; }.account-inner { gap: 30px; }.footer { align-items: start; flex-direction: column; gap: 14px; }.footer p { line-height: 1.6; }.auth-modal { padding: 31px 24px; } }
@media (max-width: 420px) { h1 { font-size: 46px; }.hero-actions { align-items: start; flex-direction: column; gap: 14px; }.hero-visual, .hero-image { min-height: 320px; }.hero-note { align-items: start; flex-wrap: wrap; line-height: 1.5; }.chat-head, .chat-messages { padding-left: 16px; padding-right: 16px; }.chat-login-tip { padding-left: 16px; padding-right: 16px; }.chat-form { padding-left: 12px; padding-right: 12px; }.chat-form .button { gap: 7px; padding-left: 13px; padding-right: 13px; }.command-row code { font-size: 9px; } }