/* Vanilla Collection — a page-local atlas in ink, verdigris and antique gold. */
body:has(.vn-page) { background: #0b1119; }
.vn-page {
    --vn-ink: #0d151d; --vn-panel: #111c23; --vn-text: #edece4;
    --vn-muted: #a8b4b7; --vn-gold: #d6bf8c; --vn-green: #94d2b5;
    --vn-edge: #aabfb71c; color: var(--vn-text); font-size: 14px;
    position: relative; isolation: isolate; max-width: 1216px; margin: -10px auto 14px;
}
.vn-page *, .vn-page *::before, .vn-page *::after { box-sizing: border-box; }
.vn-page [hidden] { display: none !important; }
.vn-page a, .vn-page button, .vn-page input, .vn-page select, .vn-page summary { -webkit-tap-highlight-color: transparent; }
.vn-page button, .vn-page a, .vn-page summary, .vn-page select { transition: color .2s, background .2s, border-color .2s, box-shadow .2s; }
.vn-page button { cursor: pointer; }
.vn-page a:focus-visible, .vn-page button:focus-visible, .vn-page select:focus-visible, .vn-page input:focus-visible, .vn-page summary:focus-visible, .vn-page [tabindex]:focus-visible { outline: 2px solid var(--vn-gold); outline-offset: 5px; }
.vn-page section[id] { scroll-margin-top: 28px; }
.vn-page::before { content: ''; position: absolute; z-index: -1; inset: -60px 0 auto; height: 800px; pointer-events: none; background: radial-gradient(ellipse at 85% 20%, #2f7e5e0c, transparent 55%); }
.vn-icon { width: 21px; height: 21px; flex-shrink: 0; }
.vn-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.vn-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: #929da8; font-size: 11px; margin: 0 0 25px; min-height: 30px; }
.vn-breadcrumb a { padding-block: 7px; }
.vn-breadcrumb a:hover { color: var(--vn-gold); }
.vn-breadcrumb .vn-icon { width: 10px; height: 10px; opacity: .5; }
.vn-breadcrumb [aria-current] { color: #d2c9b5; }
.vn-hero { display: grid; grid-template-columns: 1.12fr 1fr; position: relative; overflow: hidden; border: 1px solid #baa77930; border-radius: 22px; background: radial-gradient(ellipse at 75% 40%, #23433326, transparent 65%), linear-gradient(130deg, #182126, #10191e 60%, #0d171b); box-shadow: 0 22px 75px #00000024, inset 0 1px 0 #eeddbc08; }
.vn-hero::before { content: ''; position: absolute; left: 42px; right: 42px; height: 1px; top: 0; background: linear-gradient(90deg, transparent, #e3cea5aa, transparent); }
.vn-hero-copy { padding: 52px 0 36px 48px; z-index: 1; }
.vn-eyebrow { color: #c5b48d; font-size: 9px; font-weight: 650; letter-spacing: .19em; line-height: 1.8; display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.vn-mini-mark { border: 1px solid #d6bf8c4a; background: #d6bf8c08; height: 28px; width: 28px; display: grid; place-items: center; font-family: Georgia, serif; font-size: 17px; font-weight: 400; }
.vn-edition { color: #9cabac; font-size: 8px; letter-spacing: .09em; border-left: 1px solid #ffffff20; padding-left: 12px; }
.vn-hero h1 { font-size: clamp(44px, 5.35vw, 72px); line-height: 1.06; letter-spacing: -.055em; font-weight: 600; margin: 22px 0 25px; }
.vn-hero h1 > span { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; color: #dfc795; letter-spacing: -.055em; }
.vn-hero-lead { font-size: 19px; line-height: 1.55; color: #d3ddd7; letter-spacing: -.018em; }
.vn-hero-lead strong { color: #acbdb7; font-weight: 400; }
.vn-hero-description { max-width: 410px; color: #a6b4b6; font-size: 13px; line-height: 1.9; margin-top: 18px; }
.vn-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 28px 0 0; }
.vn-button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 11px; padding: 13px 19px; font-size: 11px; font-weight: 650; border: 1px solid transparent; border-radius: 8px; line-height: 1.5; }
.vn-button .vn-icon { width: 17px; height: 17px; }
.vn-button-gold { color: #20241c; background: linear-gradient(115deg, #e6d4ad, #c9b282); border-color: #e6d4ad; box-shadow: 0 4px 20px #b39a600c, inset 0 1px 0 #fff4; }
.vn-button-gold:hover { background: #eddbb3; border-color: #f3e4c6; box-shadow: 0 4px 24px #b39a6025; }
.vn-button-outline { color: #d6c9ac; border-color: #d6bf8c45; background: #b29c5d08; }
.vn-button-outline:hover { background: #b29c5d15; border-color: #d6bf8c88; }
.vn-button:disabled { opacity: .5; cursor: default; }
.vn-text-link { display: inline-flex; align-items: center; gap: 9px; color: #c5d5cc; font-size: 11px; min-height: 44px; }
.vn-text-link:hover { color: #eee1bd; }
.vn-text-link .vn-icon { width: 16px; height: 16px; }
.vn-hero-signature { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 7px; letter-spacing: .13em; color: #9baaab; margin-top: 26px; }
.vn-hero-signature > span { width: 17px; height: 1px; background: #9c895c; }
.vn-hero-signature i { color: #5b6c67; font-style: normal; }
.vn-hero-visual { align-self: center; padding: 25px 25px 19px 7px; min-width: 0; }
.vn-world { width: 100%; height: auto; display: block; margin: -4px 0; }
.vn-art-caption { display: flex; align-items: center; gap: 12px; font-size: 8px; letter-spacing: .17em; color: #9fafa3; padding: 0 22px; }
.vn-art-caption > :last-child { margin-left: auto; color: #b8a882; }
.vn-art-line { width: 26px; height: 1px; background: #7e95696b; }
.vn-art-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 24px; margin-top: -4px; }
.vn-art-footer > span { display: flex; align-items: center; gap: 7px; font-size: 7px; letter-spacing: .13em; color: #a6b0a1; }
.vn-art-footer .vn-icon { width: 12px; height: 12px; }
.vn-motion { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 8px; color: #afbcad; min-height: 44px; border-radius: 5px; }
.vn-motion:hover { color: #e5d5ab; }
.vn-hero-bottom { grid-column: 1 / -1; padding: 16px 48px; display: flex; justify-content: space-between; gap: 15px; border-top: 1px solid #b7c4a11c; font-size: 8px; letter-spacing: .09em; color: #b8beb0; background: #080f1440; }
.vn-hero-bottom > span:first-child { display: flex; align-items: center; gap: 10px; }
.vn-hero-bottom .vn-icon { color: #a8ba97; width: 15px; height: 15px; }
.vn-hero-bottom > span:last-child { color: #87978c; display: flex; gap: 12px; font-size: 7px; }
.vn-orbit { transform-origin: 260px 225px; animation: vn-orbit 70s linear infinite; }
.vn-route { animation: vn-route 22s linear infinite; }
.vn-beacon { animation: vn-beacon 5s ease-in-out infinite; }
@keyframes vn-orbit { to { transform: rotate(360deg); } }
@keyframes vn-route { to { stroke-dashoffset: -110; } }
@keyframes vn-beacon { 0%, 100% { opacity: .15; } 50% { opacity: .7; } }
.vn-motion-paused .vn-world * { animation-play-state: paused !important; }
.vn-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 23px 0 33px; border: 1px solid var(--vn-edge); border-radius: 13px; background: #131d2380; overflow: hidden; }
.vn-stats > div { padding: 23px 27px 21px; position: relative; }
.vn-stats > div + div { border-left: 1px solid var(--vn-edge); }
.vn-stats .vn-icon { position: absolute; right: 24px; top: 24px; color: #bca777; width: 21px; height: 21px; opacity: .8; }
.vn-stats dt { color: #a9b6b6; font-size: 10px; padding-right: 22px; }
.vn-stats dd { font-size: 28px; font-weight: 500; letter-spacing: -.04em; line-height: 1.1; margin-top: 12px; }
.vn-stats dd > span { font-size: 12px; color: #9cadad; letter-spacing: 0; }
.vn-stats small { display: block; margin-top: 10px; font-size: 9px; color: #93a3a7; }
.vn-section-nav { display: flex; align-items: center; gap: 26px; border-bottom: 1px solid var(--vn-edge); padding: 0 2px; margin-bottom: 46px; }
.vn-section-nav a { font-size: 11px; color: #a4b2b4; padding: 0 0 18px; min-height: 44px; }
.vn-section-nav a:hover { color: var(--vn-gold); }
.vn-section-nav a:first-child { color: #ddcba6; border-bottom: 1px solid #bea26b; margin-bottom: -1px; }
.vn-section-nav > span { display: flex; align-items: center; gap: 8px; font-size: 7px; letter-spacing: .13em; color: #95a59f; margin-left: auto; padding-bottom: 18px; }
.vn-section-nav .vn-icon { width: 14px; height: 14px; color: #c5b181; }
.vn-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 25px; }
.vn-section-heading .vn-eyebrow, .vn-faq .vn-eyebrow { font-size: 8px; margin-bottom: 8px; }
.vn-page h2 { font-weight: 500; font-size: 31px; line-height: 1.3; letter-spacing: -.035em; }
.vn-page h2 > span { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; color: #d1be93; }
.vn-section-heading h2 + p { font-size: 11px; color: #a6b2b6; margin-top: 9px; line-height: 1.8; }
.vn-count { display: flex; align-items: center; gap: 8px; border: 1px solid #87af9626; background: #385b450d; border-radius: 20px; padding: 7px 12px; font-size: 9px; color: #b7c7b9; white-space: nowrap; }
.vn-count > span { width: 4px; height: 4px; border-radius: 50%; background: #8fbb9b; }
.vn-toolbar { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: 12px; padding: 15px; border: 1px solid var(--vn-edge); border-radius: 12px; background: #131c2480; }
.vn-search { position: relative; display: flex; align-items: center; }
.vn-search > .vn-icon { position: absolute; left: 13px; color: #b7a57a; width: 17px; height: 17px; pointer-events: none; }
.vn-search input { width: 100%; min-width: 0; height: 50px; padding: 12px 32px 12px 40px; border: 1px solid #aabfb726; border-radius: 7px; background: #0a121a; color: #e0e7e1; font-size: 11px; }
.vn-search input::placeholder { color: #97a7ac; }
.vn-select { min-width: 0; position: relative; border: 1px solid #aabfb726; border-radius: 7px; background: #0a121a; }
.vn-select label { display: block; font-size: 7px; letter-spacing: .09em; color: #93a3a7; position: absolute; top: 7px; left: 12px; pointer-events: none; }
.vn-select select { display: block; width: 100%; height: 50px; border-radius: 7px; padding: 19px 28px 4px 12px; color: #d7dfdb; font-size: 10px; cursor: pointer; appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23bfb591' stroke-linecap='round'%3E%3Cpath d='m3 4 3 3 3-3'/%3E%3C/svg%3E") no-repeat right 11px center; }
.vn-select option { background: #111c23; color: #e0e6dc; }
.vn-list-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 2px; min-height: 32px; }
.vn-list-meta p { color: #b4c0bd; font-size: 10px; line-height: 1.7; }
.vn-list-meta p span { color: #91a1a7; margin-left: 5px; }
.vn-reset { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: #bcb69e; font-size: 10px; flex-shrink: 0; padding: 4px 7px; }
.vn-reset:hover { color: #eee0b5; }
.vn-reset .vn-icon { width: 13px; height: 13px; }
.vn-server-list { display: grid; gap: 18px; }
.vn-server { border: 1px solid #aabfb726; background: linear-gradient(115deg, #152026, #111b23 65%); border-radius: 13px; padding: 25px 28px 0; position: relative; overflow: hidden; transition: border-color .25s, box-shadow .25s; }
.vn-server:hover { border-color: #a8b89450; box-shadow: 0 10px 35px #0000001a; }
.vn-server-first { border-color: #c7b38450; background: radial-gradient(ellipse at 0 0, #ac89570a, transparent 70%), linear-gradient(115deg, #172127, #111b23 65%); }
.vn-server-first::before { content: ''; position: absolute; top: 0; left: 28px; right: 65%; height: 1px; background: linear-gradient(90deg, #e4d0a1, transparent); }
.vn-server-identity { display: grid; grid-template-columns: 52px minmax(200px, 33%) minmax(0,1fr); align-items: center; gap: 25px; }
.vn-rank { text-align: center; position: relative; }
.vn-rank > span { display: block; color: #9aa99f; font-size: 7px; letter-spacing: .2em; margin-bottom: 4px; }
.vn-rank strong { font-family: Georgia, serif; color: #b4b7b0; font-size: 32px; font-weight: 400; line-height: 1.3; }
.vn-rank > .vn-icon { display: block; margin: 4px auto 0; height: 16px; width: 16px; color: #94a997; }
.vn-server-first .vn-rank strong, .vn-server-first .vn-rank > .vn-icon { color: #dbc394; }
.vn-server-banner { display: block; aspect-ratio: 4 / 1; border: 1px solid #9eb7a626; border-radius: 7px; position: relative; overflow: hidden; background: #0c191b; }
.vn-server-banner img { display: block; position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.vn-banner-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 17px; padding: 10px 14px; background: repeating-linear-gradient(135deg, transparent 0 28px, #829d7510 28px 29px), radial-gradient(ellipse at 20% 90%, #335541, #0e2024 70%); color: #c9bb8f; }
.vn-banner-underlay { position: absolute; inset: 0; }
.vn-banner-fallback > .vn-icon { width: 39px; height: 39px; stroke-width: .8; opacity: .8; }
.vn-banner-fallback > span { font-family: Georgia, serif; font-size: 20px; letter-spacing: .2em; }
.vn-banner-fallback small { font-family: ui-sans-serif, sans-serif; display: block; font-size: 6px; letter-spacing: .15em; margin-top: 3px; color: #a6baaa; }
.vn-banner-fallback .vn-banner-patch { margin-left: auto; font-family: monospace; font-size: 8px; letter-spacing: .05em; opacity: .75; }
.vn-server-title { min-width: 0; }
.vn-server-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 7px; letter-spacing: .14em; color: #a8bbad; }
.vn-server-first .vn-server-kicker > span:first-child { color: #cfba8c; }
.vn-status { display: inline-flex; align-items: center; gap: 5px; color: #a1d5b8; font-size: 8px; letter-spacing: .02em; }
.vn-status > i { height: 4px; width: 4px; border-radius: 50%; background: #9fceb0; box-shadow: 0 0 0 3px #9fceb00c; }
.vn-status-offline { color: #e7a499; }
.vn-status-offline > i { background: #e7a499; }
.vn-server h3 { font-size: 24px; font-weight: 500; letter-spacing: -.03em; margin: 8px 0 11px; overflow-wrap: anywhere; line-height: 1.3; }
.vn-server h3 a:hover { color: #e3d2aa; }
.vn-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.vn-tags > span { display: flex; align-items: center; gap: 5px; padding: 4px 7px; border: 1px solid #aabfb71f; border-radius: 4px; background: #aabfb704; font-size: 8px; color: #b4c3bb; overflow-wrap: anywhere; }
.vn-tags .vn-icon { width: 11px; height: 11px; color: #b6bd96; }
.vn-server-description { font-size: 11px; color: #a5b3b8; line-height: 1.9; margin: 19px 0 19px 77px; overflow-wrap: anywhere; }
.vn-server-bottom { display: flex; align-items: center; gap: 20px; justify-content: space-between; padding: 16px 0; border-top: 1px solid var(--vn-edge); }
.vn-server-metrics { display: flex; gap: 30px; }
.vn-server-metrics > div + div { border-left: 1px solid var(--vn-edge); padding-left: 30px; }
.vn-server-metrics dt { display: flex; align-items: center; gap: 6px; font-size: 8px; color: #99aaaa; }
.vn-server-metrics .vn-icon { width: 13px; height: 13px; color: #9bb39c; }
.vn-server-metrics dd { font-size: 18px; letter-spacing: -.02em; margin-top: 6px; color: #d2ddd4; }
.vn-server-metrics dd small { font-size: 10px; color: #a6b5ac; }
.vn-server-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; }
.vn-compare-check { display: flex; align-items: center; gap: 7px; cursor: pointer; min-height: 44px; }
.vn-compare-check input { accent-color: #d6bf8c; width: 14px; height: 14px; cursor: pointer; }
.vn-compare-check input:focus-visible { outline: 2px solid #d6bf8c; outline-offset: 4px; }
.vn-compare-check > span { display: flex; align-items: center; gap: 5px; color: #aebaae; font-size: 9px; }
.vn-compare-check .vn-icon { width: 12px; height: 12px; }
.vn-vote-button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 12px; color: #dbc99f; font-size: 10px; border: 1px solid #b9a37440; border-radius: 6px; background: #c4a46307; }
.vn-vote-button:hover { background: #c4a46318; border-color: #d6bf8c80; }
.vn-vote-button .vn-icon { width: 13px; height: 13px; }
.vn-profile-link { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 10px; color: #bbcfc2; min-height: 44px; padding: 8px 11px; }
.vn-profile-link .vn-icon { width: 14px; height: 14px; }
.vn-profile-link:hover { color: #f0ddb3; }
.vn-data-note { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 7px; color: #98a8ae; font-size: 9px; line-height: 1.8; margin: 18px 2px 0; }
.vn-data-note > .vn-icon { width: 13px; height: 13px; margin-top: 2px; }
.vn-data-note > a { color: #b3c5b9; display: inline-flex; align-items: center; gap: 5px; text-decoration: underline; text-underline-offset: 3px; }
.vn-data-note > a > .vn-icon { width: 11px; height: 11px; }
.vn-empty { text-align: center; border: 1px dashed #b5a57640; border-radius: 13px; padding: 42px 24px; background: #111c2360; }
.vn-empty > .vn-icon { width: 38px; height: 38px; color: #d1bb8d; margin: 0 auto 15px; }
.vn-empty h3 { font-size: 20px; font-weight: 500; line-height: 1.5; }
.vn-empty p { color: #a6b5b6; font-size: 12px; line-height: 1.9; max-width: 480px; margin: 10px auto 22px; }
.vn-empty > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.vn-guide { margin-top: 68px; }
.vn-guide .vn-section-heading > .vn-icon { color: #b59e6e; width: 42px; height: 42px; stroke-width: .8; opacity: .7; }
.vn-guide-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 13px; }
.vn-guide-card { padding: 24px 22px; border: 1px solid var(--vn-edge); border-radius: 11px; background: linear-gradient(140deg, #17202860, #111b2340); }
.vn-guide-card > div { display: flex; align-items: center; justify-content: space-between; margin-bottom: 23px; }
.vn-guide-icon { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid #c9b38329; border-radius: 9px; background: #c9b38306; color: #c4b285; }
.vn-guide-icon .vn-icon { width: 21px; height: 21px; stroke-width: 1.2; }
.vn-step { font-family: Georgia, serif; font-size: 29px; color: #b4bca333; }
.vn-guide-card h3 { font-size: 13px; font-weight: 550; line-height: 1.6; margin-bottom: 10px; letter-spacing: -.01em; }
.vn-guide-card p { font-size: 11px; line-height: 1.95; color: #a2b1b7; }
.vn-experience { margin-top: 54px; padding: 38px 40px 21px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px 70px; border: 1px solid #a4b69a26; border-radius: 15px; background: radial-gradient(ellipse at 0 0, #324a341a, transparent 60%), #101b2180; position: relative; overflow: hidden; }
.vn-experience::after { content: ''; position: absolute; top: 0; left: 40px; width: 140px; height: 1px; background: linear-gradient(90deg, #aab69070, transparent); }
.vn-experience h2 { font-size: 33px; line-height: 1.35; }
.vn-experience-copy > p:not(.vn-eyebrow) { font-size: 12px; line-height: 1.95; color: #a6b4b4; margin: 17px 0 13px; max-width: 420px; }
.vn-experience-features { display: grid; align-content: center; }
.vn-experience-features article { display: flex; align-items: flex-start; gap: 16px; padding-block: 17px; }
.vn-experience-features article + article { border-top: 1px solid var(--vn-edge); }
.vn-experience-features .vn-icon { width: 24px; height: 24px; color: #b3bd97; margin-top: 3px; stroke-width: 1.1; }
.vn-experience-features h3 { font-size: 12px; font-weight: 500; margin-bottom: 7px; }
.vn-experience-features p { font-size: 10px; line-height: 1.9; color: #a6b4b4; }
.vn-experience-source { grid-column: 1/-1; border-top: 1px solid var(--vn-edge); padding-top: 15px; color: #95a3a8; font-size: 8px; line-height: 1.8; }
.vn-experience-source a { color: #b5bca2; text-decoration: underline; text-underline-offset: 3px; }
.vn-faq { display: grid; grid-template-columns: .8fr 1.5fr; gap: 80px; margin-top: 65px; }
.vn-faq-intro > p:not(.vn-eyebrow) { font-size: 12px; line-height: 1.9; color: #a6b4b7; margin: 15px 0; max-width: 290px; }
.vn-faq-list details { border-bottom: 1px solid #aabfb722; }
.vn-faq-list details:first-child { border-top: 1px solid #aabfb722; }
.vn-faq-list summary { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; list-style: none; cursor: pointer; font-size: 12px; color: #d7dfd8; padding: 19px 0; line-height: 1.7; }
.vn-faq-list summary::-webkit-details-marker { display: none; }
.vn-faq-list summary .vn-icon { width: 16px; height: 16px; color: #b7a47d; transition: transform .25s; }
.vn-faq-list details[open] summary { color: #decca5; }
.vn-faq-list details[open] summary .vn-icon { transform: rotate(45deg); }
.vn-faq-list p { color: #a4b4b7; font-size: 11px; line-height: 2; padding: 0 30px 21px 0; }
.vn-other-worlds { display: flex; align-items: center; gap: 20px; margin-top: 58px; padding: 22px 24px; border: 1px solid var(--vn-edge); border-radius: 10px; background: #131c2260; }
.vn-other-worlds > div { display: flex; gap: 14px; align-items: center; margin-right: auto; }
.vn-other-worlds > div > .vn-icon { color: #acb797; width: 26px; height: 26px; }
.vn-other-worlds > div > span { font-size: 9px; color: #a1b0b4; }
.vn-other-worlds strong { display: block; font-size: 12px; color: #c9d5cb; font-weight: 500; margin-top: 5px; }
.vn-other-worlds a { min-height: 44px; display: flex; align-items: center; gap: 10px; color: #c3ccb8; font-size: 10px; }
.vn-other-worlds a:hover { color: #e6d3a6; }
.vn-other-worlds a > span { font-family: monospace; font-size: 8px; color: #94a5a5; padding: 3px 6px; border: 1px solid var(--vn-edge); border-radius: 4px; }
.vn-other-worlds a > .vn-icon { width: 15px; height: 15px; }
.vn-compare-dock { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); width: min(760px, calc(100% - 32px)); z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 20px; border: 1px solid #c7b38466; border-radius: 12px; background: #101d22f5; box-shadow: 0 10px 45px #0008; }
.vn-compare-dock > div { display: flex; align-items: center; gap: 14px; min-width: 0; }
.vn-compare-dock > div > .vn-icon { color: #d6bf8c; }
.vn-compare-dock strong { display: block; font-size: 11px; font-weight: 600; }
.vn-compare-dock [data-compare-names] { display: block; font-size: 9px; color: #a8bbae; margin-top: 5px; max-width: 300px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vn-dialog { color: var(--vn-text); background: linear-gradient(145deg, #17242a, #101b23 75%); border: 1px solid #d6bf8c60; border-radius: 15px; padding: 29px; width: min(850px, calc(100% - 32px)); max-height: calc(100dvh - 40px); margin: auto; overflow-y: auto; box-shadow: 0 25px 100px #0009; }
.vn-dialog::backdrop { background: #060b10d9; backdrop-filter: blur(7px); }
html:has(.vn-dialog[open]) { overflow: hidden; }
.vn-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 13px; }
.vn-dialog-heading .vn-eyebrow { font-size: 8px; margin-bottom: 8px; }
.vn-dialog h2 { font-size: 27px; }
.vn-dialog > p { color: #a8b8b5; font-size: 11px; line-height: 1.9; }
.vn-close { display: grid; place-items: center; height: 44px; width: 44px; flex-shrink: 0; border: 1px solid #d6bf8c30; border-radius: 7px; color: #c9ba99; }
.vn-close:hover { background: #d6bf8c12; }
.vn-close .vn-icon { width: 19px; height: 19px; }
.vn-comparison-scroll { overflow-x: auto; margin-top: 24px; border: 1px solid var(--vn-edge); border-radius: 9px; }
.vn-comparison table { width: 100%; border-collapse: collapse; font-size: 11px; min-width: 460px; }
.vn-comparison th, .vn-comparison td { text-align: left; padding: 15px; border-bottom: 1px solid var(--vn-edge); }
.vn-comparison thead th { background: #d6bf8c07; font-weight: 500; color: #e0cea6; min-width: 130px; }
.vn-comparison tbody th { color: #a9b8b4; font-weight: 400; font-size: 10px; }
.vn-comparison thead a { font-size: 14px; display: inline-block; overflow-wrap: anywhere; }
.vn-comparison a:hover { text-decoration: underline; }
.vn-comparison tbody tr:last-child > * { border-bottom: 0; }
.vn-vote-dialog { width: min(460px, calc(100% - 32px)); }
.vn-vote-dialog h2 { overflow-wrap: anywhere; }
.vn-captcha { margin: 25px 0 15px; min-height: 140px; display: flex; justify-content: center; }
.vn-vote-message { font-size: 12px; line-height: 1.9; color: #efb5a4; margin-bottom: 15px; }
.vn-vote-message[data-state="success"] { color: #a9dec0; }
.vn-vote-form, .vn-vote-dialog form > .vn-button { width: 100%; }
@media (min-width: 1280px) { .vn-hero-actions { flex-wrap: nowrap; gap: 16px; } .vn-hero-actions .vn-text-link { font-size: 10px; } }
@media (max-width: 1100px) {
    .vn-hero-copy { padding-left: 32px; } .vn-hero h1 { font-size: 58px; }
    .vn-hero-visual { padding-right: 16px; } .vn-stats > div { padding: 22px 20px; }
    .vn-stats .vn-icon { right: 17px; width: 17px; }
    .vn-server-bottom { flex-wrap: wrap; } .vn-server-actions { margin-left: auto; }
    .vn-server-identity { gap: 20px; grid-template-columns: 45px minmax(180px, 31%) minmax(0, 1fr); }
    .vn-guide-card { padding: 20px 17px; } .vn-other-worlds { flex-wrap: wrap; gap: 14px 25px; }
    .vn-experience { gap: 25px 38px; }
}
@media (max-width: 800px) {
    .vn-hero { grid-template-columns: 1fr; } .vn-hero-copy { padding: 36px 32px 12px; }
    .vn-hero h1 { font-size: 63px; } .vn-hero-description { max-width: 550px; }
    .vn-hero-visual { width: min(100%, 440px); justify-self: center; padding: 24px 20px 14px; }
    .vn-hero-bottom { padding: 15px 24px; } .vn-hero-signature { margin-top: 22px; }
    .vn-stats { grid-template-columns: 1fr 1fr; } .vn-stats > div:nth-child(3) { border-left: 0; }
    .vn-stats > div:nth-child(n+3) { border-top: 1px solid var(--vn-edge); }
    .vn-stats .vn-icon { right: 24px; width: 21px; }
    .vn-toolbar { grid-template-columns: repeat(3,minmax(0,1fr)); } .vn-search { grid-column: 1/-1; }
    .vn-section-nav { gap: 24px; justify-content: space-between; margin-bottom: 35px; }
    .vn-section-nav > span { display: none; }
    .vn-guide-grid { grid-template-columns: 1fr 1fr; }
    .vn-guide-card { padding: 25px; } .vn-guide { margin-top: 50px; }
    .vn-server-identity { grid-template-columns: 40px 1fr; gap: 17px; }
    .vn-server-banner { grid-column: 2; max-width: 340px; }
    .vn-rank { grid-column: 1; grid-row: 1/3; align-self: start; }
    .vn-server-title { grid-column: 2; } .vn-server-description { margin-left: 57px; }
    .vn-experience { grid-template-columns: 1fr; padding: 30px; gap: 15px; }
    .vn-experience-features { grid-template-columns: 1fr; }
    .vn-faq { gap: 30px; grid-template-columns: .7fr 1.3fr; }
    .vn-page h2 { font-size: 28px; }
}
@media (max-width: 540px) {
    .vn-page { margin-top: -15px; } .vn-breadcrumb { font-size: 9px; gap: 7px; margin-bottom: 18px; }
    .vn-hero { border-radius: 14px; } .vn-hero-copy { padding: 26px 22px 8px; }
    .vn-eyebrow { font-size: 7px; letter-spacing: .13em; gap: 8px; }
    .vn-edition { font-size: 6px; padding-left: 8px; } .vn-mini-mark { width: 24px; height: 24px; font-size: 15px; }
    .vn-hero h1 { font-size: clamp(43px, 11vw, 58px); margin-top: 19px; margin-bottom: 21px; }
    .vn-hero-lead { font-size: 16px; } .vn-hero-description { font-size: 12px; line-height: 1.9; }
    .vn-hero-actions { display: grid; justify-items: start; gap: 4px; margin-top: 23px; }
    .vn-hero-signature { gap: 7px; font-size: 6px; letter-spacing: .04em; }
    .vn-hero-visual { padding: 25px 7px 9px; }
    .vn-art-caption { font-size: 7px; padding-inline: 23px; }
    .vn-art-footer { padding-inline: 22px; } .vn-art-footer > span { font-size: 6px; letter-spacing: .07em; }
    .vn-motion { font-size: 7px; gap: 4px; }
    .vn-hero-bottom { padding: 13px 22px; font-size: 7px; } .vn-hero-bottom > span:last-child { display: none; }
    .vn-stats { margin: 17px 0 24px; border-radius: 10px; } .vn-stats > div { padding: 18px 15px; }
    .vn-stats dt { font-size: 8px; } .vn-stats dd { font-size: 25px; } .vn-stats dd > span { font-size: 10px; }
    .vn-stats small { font-size: 7px; line-height: 1.5; } .vn-stats .vn-icon { right: 12px; top: 18px; width: 15px; height: 15px; }
    .vn-section-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 15px; margin-bottom: 29px; }
    .vn-section-nav a { font-size: 10px; padding: 12px 0; } .vn-section-nav a:first-child { border-bottom: 0; }
    .vn-section-heading { align-items: flex-start; gap: 10px; margin-bottom: 18px; }
    .vn-page h2 { font-size: 25px; } .vn-section-heading .vn-eyebrow { font-size: 7px; }
    .vn-section-heading h2 + p { font-size: 10px; } .vn-count { margin-top: 4px; font-size: 8px; padding: 6px 8px; }
    .vn-toolbar { grid-template-columns: 1fr 1fr; gap: 9px; padding: 11px; }
    .vn-toolbar > :last-child { grid-column: 1/-1; } .vn-list-meta p { font-size: 9px; }
    .vn-list-meta p > span { display: block; margin-left: 0; } .vn-reset { font-size: 9px; }
    .vn-server { padding: 21px 16px 0; border-radius: 10px; }
    .vn-server-identity { grid-template-columns: 30px minmax(0,1fr); gap: 14px; }
    .vn-rank strong { font-size: 27px; } .vn-rank > span { font-size: 6px; }
    .vn-server h3 { font-size: 24px; } .vn-server-kicker { font-size: 6px; gap: 10px; }
    .vn-server-description { margin-left: 0; font-size: 10px; } .vn-tags { gap: 5px; }
    .vn-tags > span { font-size: 7px; } .vn-banner-fallback > span { font-size: 16px; }
    .vn-banner-fallback > .vn-icon { width: 30px; height: 30px; } .vn-banner-fallback .vn-banner-patch { display: none; }
    .vn-server-bottom { gap: 15px; padding-top: 17px; }
    .vn-server-metrics { width: 100%; justify-content: space-between; gap: 14px; }
    .vn-server-metrics > div + div { padding-left: 14px; flex: 1; }
    .vn-server-metrics dd { font-size: 17px; } .vn-server-metrics dt { font-size: 7px; }
    .vn-server-actions { width: 100%; justify-content: space-between; gap: 4px; border-top: 1px solid var(--vn-edge); padding-top: 13px; }
    .vn-compare-check > span { font-size: 8px; } .vn-compare-check .vn-icon { display: none; }
    .vn-profile-link { padding-inline: 5px; font-size: 9px; gap: 5px; } .vn-vote-button { font-size: 9px; padding-inline: 9px; }
    .vn-data-note { font-size: 8px; line-height: 1.9; } .vn-guide { margin-top: 43px; }
    .vn-guide .vn-section-heading > .vn-icon { width: 30px; height: 30px; }
    .vn-guide-grid { gap: 10px; } .vn-guide-card { padding: 18px 14px; }
    .vn-guide-card > div { margin-bottom: 18px; } .vn-step { font-size: 23px; }
    .vn-guide-icon { width: 32px; height: 32px; } .vn-guide-icon > .vn-icon { width: 18px; height: 18px; }
    .vn-guide-card h3 { font-size: 11px; } .vn-guide-card p { font-size: 10px; line-height: 1.9; }
    .vn-experience { padding: 27px 22px 18px; margin-top: 35px; }
    .vn-experience-copy > p:not(.vn-eyebrow) { font-size: 11px; } .vn-experience-features p { font-size: 10px; }
    .vn-faq { grid-template-columns: 1fr; gap: 22px; margin-top: 42px; }
    .vn-faq-intro > p:not(.vn-eyebrow) { max-width: 100%; font-size: 11px; margin-block: 10px; }
    .vn-faq-list summary { font-size: 11px; gap: 15px; }
    .vn-other-worlds { padding: 18px; flex-direction: column; align-items: stretch; margin-top: 35px; gap: 12px; }
    .vn-other-worlds > div { margin-bottom: 5px; } .vn-other-worlds a { border-top: 1px solid var(--vn-edge); padding-top: 10px; flex-wrap: wrap; }
    .vn-other-worlds a > .vn-icon { margin-left: auto; } .vn-other-worlds a > span { margin-left: auto; }
    .vn-compare-dock { bottom: 9px; padding: 12px; flex-wrap: wrap; gap: 9px; }
    .vn-compare-dock > div { width: 100%; } .vn-compare-dock > div:last-child { justify-content: flex-end; gap: 12px; }
    .vn-compare-dock [data-compare-names] { max-width: 220px; }
    .vn-compare-dock .vn-button { min-height: 44px; padding: 10px 13px; font-size: 10px; }
    .vn-dialog { padding: 20px; width: calc(100% - 24px); } .vn-dialog h2 { font-size: 23px; }
    .vn-dialog-heading { gap: 10px; } .vn-dialog .vn-eyebrow { font-size: 7px; }
    .vn-dialog-heading .vn-close { width: 36px; height: 44px; }
    .vn-vote-dialog { padding: 18px 13px; } .vn-comparison th, .vn-comparison td { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .vn-page *, .vn-page *::before, .vn-page *::after { animation: none !important; transition: none !important; }
    .vn-motion { display: none !important; }
}
@media (forced-colors: active) {
    .vn-page { --vn-edge: CanvasText; --vn-text: CanvasText; }
    .vn-button, .vn-vote-button, .vn-close { border: 1px solid ButtonText; }
    .vn-stats, .vn-server, .vn-hero, .vn-guide-card, .vn-toolbar, .vn-other-worlds { border-color: CanvasText; }
}