body:has(.vanilla-page) { background-image: linear-gradient(145deg, rgba(7,25,43,.36), rgba(7,39,43,.38)), url("assets/background.png"); }
.vanilla-page { flex: 1; width: min(1060px, 100%); margin: 0 auto; padding: 28px 18px 76px; color: #f1f6f6; }
.vanilla-back { display: inline-block; margin-bottom: 40px; color: #c4e2de; font-size: 14px; text-decoration: none; }
.vanilla-back:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.vanilla-hero { max-width: 790px; padding: 30px 0 52px; }
.vanilla-eyebrow, .section-kicker { color: #9fd3c8; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.vanilla-hero h1 { margin: 14px 0 14px; color: #f3f7f3; font-size: clamp(44px, 7vw, 76px); line-height: 1; letter-spacing: -.045em; }
.vanilla-lede { max-width: 700px; margin: 0; color: #f5fbfa; font-size: clamp(18px, 2.4vw, 23px); line-height: 1.55; }
.season-note { margin: 20px 0 0; color: #e0f1ed; font-size: 14px; }
.vanilla-cta { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; padding: 12px 17px; color: #f0f8f7; border: 1px solid rgba(170,220,210,.44); border-radius: 8px; background: rgba(15,45,53,.62); font-size: 14px; font-weight: 700; text-decoration: none; transition: background .18s, border-color .18s; }
.vanilla-cta:hover { border-color: #b5e2d8; background: rgba(28,70,72,.82); }
.vanilla-intro, .shard-explainer { display: grid; grid-template-columns: minmax(210px,.8fr) minmax(0,1.2fr); gap: clamp(24px,6vw,78px); padding: 34px 0 42px; border-top: 1px solid rgba(174,216,211,.25); }
.vanilla-intro h2, .shard-explainer h2, .vanilla-section-heading h2, .vanilla-ranks h2 { margin: 9px 0 0; color: #f0f5f2; font-size: clamp(28px, 4vw, 38px); line-height: 1.15; }
.vanilla-intro p, .shard-copy p { margin: 0; color: #eff7f5; font-size: 16px; line-height: 1.8; }
.vanilla-features { padding: 34px 0 40px; border-top: 1px solid rgba(174,216,211,.25); scroll-margin-top: 28px; }
.vanilla-section-heading { margin-bottom: 18px; }
.vanilla-feature-row { display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 20px; padding: 22px 0; border-top: 1px solid rgba(174,216,211,.17); }
.feature-number { color: #9fd3c8; font: 700 13px var(--font-mono, monospace); padding-top: 3px; }
.vanilla-feature-row h3 { margin: 0 0 6px; color: #f0f5f2; font-size: 18px; }
.vanilla-feature-row p { max-width: 760px; margin: 0; color: #e9f3f1; font-size: 15px; line-height: 1.7; }
.shard-explainer { padding-top: 36px; }
.shard-copy { display: grid; gap: 13px; }
.vanilla-section-heading > p { max-width: 760px; color: #e9f3f1; font-size: 15px; line-height: 1.7; }
.vanilla-limits { padding: 34px 0 40px; border-top: 1px solid rgba(174,216,211,.25); scroll-margin-top: 28px; }
.vanilla-limits > .vanilla-section-heading { margin-bottom: 23px; }
.limit-panel { margin-top: 16px; padding: clamp(18px,3vw,27px); border: 1px solid rgba(174,216,211,.23); border-radius: 12px; background: linear-gradient(135deg,rgba(12,34,43,.88),rgba(14,39,45,.76)); box-shadow: 0 14px 36px rgba(0,0,0,.12); scroll-margin-top: 24px; }
.limit-panel-heading { display:flex; align-items:center; gap:14px; margin-bottom:15px; }
.limit-panel-heading h3 { margin:4px 0 0; color:#f0f5f2; font-size:clamp(21px,3vw,27px); }
.limit-note { margin:10px 0; color:#e1eeeb; font-size:14px; line-height:1.65; }
.limit-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 12px; margin:14px 0 0; padding:0; list-style:none; }
.limit-grid li { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:10px 12px; color:#e3efec; border:1px solid rgba(174,216,211,.14); border-radius:7px; background:rgba(3,18,26,.28); font-size:13px; line-height:1.45; }
.limit-grid b { flex:0 0 auto; color:#b6e5d8; font-variant-numeric:tabular-nums; text-align:right; }
.group-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.group-card { padding:15px; border:1px solid rgba(174,216,211,.17); border-radius:8px; background:rgba(3,18,26,.28); }
.group-card h4 { display:flex; flex-wrap:wrap; justify-content:space-between; gap:9px; margin:0 0 10px; color:#f0f5f2; font-size:15px; }
.group-card h4 b { color:#b6e5d8; font-size:12px; }
.group-card p,.block-list { margin:0; color:#d7e8e3; font-size:13px; line-height:1.75; }
.limit-callout { margin:16px 0 0; padding:13px 15px; color:#e1eeeb; border-left:3px solid #9fd3c8; background:rgba(159,211,200,.08); font-size:13px; line-height:1.7; }
.setting-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.setting-grid > div { display:flex; justify-content:space-between; gap:12px; padding:12px 14px; border:1px solid rgba(174,216,211,.16); border-radius:8px; background:rgba(3,18,26,.28); font-size:14px; }
.setting-grid span { color:#d3e3df; }.setting-grid b { color:#b6e5d8; }
.vanilla-ranks { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 12px; padding: 28px 0 8px; border-top: 1px solid rgba(174,216,211,.25); }
.vanilla-ranks p { margin: 10px 0 0; color: rgba(236,244,243,.75); line-height: 1.6; }
.rank-open-button { display: inline-flex; align-items: center; gap: 14px; flex: 0 0 auto; padding: 13px 18px; color: #102a2c; border: 1px solid #a9d6c9; border-radius: 8px; background: #c5e4da; font: 750 14px var(--font-sans, sans-serif); cursor: pointer; }
.rank-open-button:hover { background: #d7eee6; }
.vanilla-ranks-dialog { width: min(820px, calc(100vw - 30px)); max-height: min(84vh, 850px); padding: 0; overflow: hidden; color: #e6eeed; border: 1px solid #557276; border-radius: 15px; background: #1d262a; box-shadow: 0 24px 80px rgba(0,0,0,.45); }
.vanilla-ranks-dialog::backdrop { background: rgba(5,12,16,.74); backdrop-filter: blur(3px); }
.vanilla-dialog-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 21px 24px 17px; border-bottom: 1px solid #39464a; background: #1d262a; }
.vanilla-dialog-head h2 { margin: 5px 0 0; color: #f1f5f4; font-size: clamp(24px,4vw,32px); }
.vanilla-dialog-tools { display: flex; align-items: center; gap: 9px; }
.vanilla-theme-toggle, .vanilla-dialog-close { color: #e0e8e6; border: 1px solid #536267; background: transparent; cursor: pointer; }
.vanilla-theme-toggle { padding: 8px 11px; border-radius: 8px; font: 650 12px var(--font-sans,sans-serif); }
.vanilla-dialog-close { width: 38px; height: 38px; border-radius: 50%; font-size: 24px; line-height: 1; }
.vanilla-theme-toggle:hover, .vanilla-dialog-close:hover { background: #2b383c; }
.vanilla-dialog-content { max-height: calc(min(84vh,850px) - 88px); padding: 20px 24px 28px; overflow-y: auto; overscroll-behavior: contain; color: #c7d2d1; font-size: 14px; line-height: 1.65; }
.vanilla-rank-tabs { display: flex; gap: 8px; margin: 16px 0; padding-bottom: 4px; overflow-x: auto; }
.vanilla-rank-tabs button { display: grid; gap: 4px; min-width: 112px; padding: 10px 12px; color: #dce5e3; border: 1px solid #48575a; border-radius: 8px; background: #252f33; font: 700 13px var(--font-sans,sans-serif); cursor: pointer; }
.vanilla-rank-tabs button span { color: #a9c3bd; font-size: 10px; font-weight: 600; }
.vanilla-rank-tabs button[aria-selected="true"] { color: #eef8f5; border-color: #82b8a8; background: #314746; }
.vanilla-rank-detail { padding: 18px; border: 1px solid #3d4b4e; border-radius: 10px; background: #242e32; }
.vanilla-rank-detail h3 { margin: 0 0 10px; color: #eef5f3; font-size: 18px; }
.vanilla-rank-detail section + section { margin-top: 17px; padding-top: 14px; border-top: 1px solid #3b494c; }
.vanilla-rank-detail section h4 { margin: 0 0 7px; color: #c9e3da; font-size: 14px; }
.vanilla-rank-detail ul { margin: 0; padding-left: 19px; }
.vanilla-rank-detail li + li { margin-top: 4px; }
.vanilla-rank-price { margin: 0 0 12px; color: #a8d7c8; font-weight: 750; }
.vanilla-rank-buy { display: inline-flex; margin-top: 14px; padding: 9px 13px; color: #102a2c; border-radius: 7px; background: #bddfd3; font-weight: 800; text-decoration: none; }
.vanilla-rank-buy:hover { background: #d5eee5; }
.vanilla-rank-note { margin-top: 15px; padding: 11px 13px; color: #c1cecc; border-left: 2px solid #89b9aa; background: #2b3539; font-size: 12px; }
.vanilla-ranks-dialog[data-theme="light"] { color: #344347; border-color: #bfd2ce; background: #f1f6f4; }
.vanilla-ranks-dialog[data-theme="light"] .vanilla-dialog-head { background: #f1f6f4; border-color: #d4e0dd; }
.vanilla-ranks-dialog[data-theme="light"] .vanilla-dialog-head h2, .vanilla-ranks-dialog[data-theme="light"] .vanilla-rank-detail h3 { color: #1c3035; }
.vanilla-ranks-dialog[data-theme="light"] .vanilla-dialog-content { color: #435357; }
.vanilla-ranks-dialog[data-theme="light"] .vanilla-theme-toggle, .vanilla-ranks-dialog[data-theme="light"] .vanilla-dialog-close { color: #35494d; border-color: #bfcecb; }
.vanilla-ranks-dialog[data-theme="light"] .vanilla-theme-toggle:hover, .vanilla-ranks-dialog[data-theme="light"] .vanilla-dialog-close:hover { background: #e2ece9; }
.vanilla-ranks-dialog[data-theme="light"] .vanilla-rank-tabs button { color: #394d50; border-color: #cad8d4; background: #fff; }
.vanilla-ranks-dialog[data-theme="light"] .vanilla-rank-tabs button[aria-selected="true"] { border-color: #6f9f90; background: #e4f0eb; }
.vanilla-ranks-dialog[data-theme="light"] .vanilla-rank-tabs button span, .vanilla-ranks-dialog[data-theme="light"] .vanilla-rank-price { color: #477a68; }
.vanilla-ranks-dialog[data-theme="light"] .vanilla-rank-detail { border-color: #d4e0dc; background: #fff; }
.vanilla-ranks-dialog[data-theme="light"] .vanilla-rank-detail section + section { border-color: #e0e8e5; }
.vanilla-ranks-dialog[data-theme="light"] .vanilla-rank-detail section h4 { color: #42675d; }
.vanilla-ranks-dialog[data-theme="light"] .vanilla-rank-note { color: #485d58; background: #eaf1ee; }
@media (max-width: 700px) {
    .vanilla-page { padding: 22px 8px 56px; }
    .vanilla-back { margin-bottom: 28px; }
    .vanilla-hero { padding: 18px 0 38px; }
    .vanilla-intro, .shard-explainer { grid-template-columns: 1fr; gap: 14px; padding: 26px 0 30px; }
    .vanilla-feature-row { grid-template-columns: 34px minmax(0,1fr); gap: 12px; padding: 18px 0; }
    .limit-grid { grid-template-columns:1fr; }
    .group-grid { grid-template-columns:1fr; }
    .setting-grid { grid-template-columns:1fr; }
    .vanilla-ranks { align-items: flex-start; flex-direction: column; gap: 17px; }
    .vanilla-dialog-head { padding: 17px 16px 14px; }
    .vanilla-dialog-content { padding: 17px 16px 23px; max-height: calc(84vh - 78px); }
    .vanilla-rank-tabs button { min-width: 98px; }
}

/* Semi-Vanilla page direction: a quiet, field-guide treatment over NepalMC's world art. */
body:has(.vanilla-page) {
    --vanilla-ink: #f4f8f5;
    --vanilla-muted: #c7d9d3;
    --vanilla-line: rgba(181, 221, 207, .22);
    --vanilla-accent: #b7e4c8;
    background-color: #071714;
    background-image: linear-gradient(180deg, rgba(5, 20, 20, .58) 0%, rgba(6, 25, 24, .8) 42%, #071714 100%), url("assets/background.png");
    background-size: cover, cover;
    background-position: center top;
    background-attachment: fixed;
    color: var(--vanilla-ink);
    accent-color: var(--vanilla-accent);
}

body:has(.vanilla-page) ::selection { color: #082018; background: #b7e4c8; }
.vanilla-page { width: min(1120px, 100%); padding: 24px 28px 88px; }
.vanilla-back { margin-bottom: 26px; color: var(--vanilla-muted); transition: color .2s ease; }
.vanilla-back:focus-visible, .vanilla-cta:focus-visible, .vanilla-hero-secondary:focus-visible,
.rank-open-button:focus-visible, .vanilla-ranks-dialog button:focus-visible,
.vanilla-rank-buy:focus-visible { outline: 3px solid #d4f5de; outline-offset: 4px; }

.vanilla-hero {
    position: relative;
    isolation: isolate;
    max-width: none;
    min-height: 410px;
    margin-bottom: 42px;
    padding: clamp(36px, 7vw, 76px) clamp(26px, 7vw, 82px) 30px;
    overflow: hidden;
    border: 1px solid rgba(195, 230, 209, .3);
    border-radius: 18px;
    background: linear-gradient(112deg, rgba(5, 22, 22, .94) 4%, rgba(8, 31, 30, .86) 62%, rgba(15, 54, 45, .68));
    box-shadow: 0 28px 80px rgba(0, 0, 0, .3);
}
.vanilla-hero::before {
    position: absolute;
    z-index: -1;
    top: -165px;
    right: -145px;
    width: 490px;
    height: 490px;
    border: 1px solid rgba(183, 228, 200, .16);
    border-radius: 50%;
    box-shadow: 0 0 0 38px rgba(183, 228, 200, .035), 0 0 0 86px rgba(183, 228, 200, .025), inset 0 0 80px rgba(183, 228, 200, .06);
    content: "";
}
.vanilla-eyebrow, .section-kicker { color: var(--vanilla-accent); }
.vanilla-hero h1 {
    max-width: 720px;
    margin: 22px 0 17px;
    font-size: clamp(58px, 9vw, 96px);
    line-height: .91;
    letter-spacing: -.035em;
    text-wrap: balance;
}
.hero-title-dash { color: #d9e9df; }
.hero-title-period { color: var(--vanilla-accent); }
.vanilla-lede { max-width: 62ch; color: #e5f0e9; font-size: clamp(17px, 2vw, 20px); line-height: 1.65; }
.season-note { display: flex; align-items: center; gap: 10px; max-width: max-content; margin-top: 17px; color: #c4dccf; }
.season-note::before { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #b7e4c8; box-shadow: 0 0 14px rgba(183, 228, 200, .55); content: ""; }
.vanilla-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 28px; }
.vanilla-cta { margin: 0; padding: 13px 18px; border-color: rgba(205, 239, 215, .52); border-radius: 7px; background: #b7e4c8; color: #10271d; transition: transform .2s ease, background .2s ease; }
.vanilla-cta:hover { transform: translateY(-2px); border-color: #d5f1dd; background: #d5f1dd; color: #10271d; }
.vanilla-hero-secondary { color: #e3f0e8; font-size: 14px; font-weight: 650; text-decoration-color: rgba(227, 240, 232, .45); text-underline-offset: 5px; }
.vanilla-hero-secondary:hover { color: #fff; text-decoration-color: currentColor; }
.vanilla-hero-facts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(195, 230, 209, .2); }
.vanilla-hero-facts span { padding: 7px 11px; border: 1px solid rgba(195, 230, 209, .18); border-radius: 999px; color: #cde0d4; background: rgba(4, 22, 20, .36); font-size: 12px; font-weight: 600; }

.vanilla-intro, .shard-explainer, .vanilla-features, .vanilla-limits { border-color: var(--vanilla-line); }
.vanilla-intro, .shard-explainer { gap: clamp(30px, 8vw, 108px); padding-top: 40px; padding-bottom: 48px; }
.vanilla-intro h2, .shard-explainer h2, .vanilla-section-heading h2, .vanilla-ranks h2 { color: var(--vanilla-ink); font-size: clamp(30px, 4vw, 42px); letter-spacing: -.025em; }
.vanilla-intro p, .shard-copy p { max-width: 66ch; color: #d7e6dd; line-height: 1.8; }
.vanilla-features, .vanilla-limits { padding-top: 42px; padding-bottom: 48px; }
.vanilla-section-heading { margin-bottom: 23px; }
.vanilla-feature-row { grid-template-columns: 5px minmax(0,1fr); gap: 23px; padding: 23px 0; border-color: rgba(181, 221, 207, .16); }
.feature-number { width: 3px; height: 30px; overflow: hidden; padding: 0; border-radius: 9px; background: rgba(183, 228, 200, .55); color: transparent; font-size: 0; }
.vanilla-feature-row h3 { margin-bottom: 7px; color: #f1f7f3; font-size: 20px; letter-spacing: -.01em; }
.vanilla-feature-row p { max-width: 68ch; color: #cadbd2; line-height: 1.75; }
.vanilla-section-heading > p { max-width: 66ch; color: #cadbd2; }
.limit-panel { border-color: rgba(181, 221, 207, .2); border-radius: 14px; background: linear-gradient(145deg, rgba(10, 31, 30, .93), rgba(7, 25, 25, .86)); box-shadow: 0 18px 42px rgba(0, 0, 0, .16); }
.limit-panel-heading h3 { color: #f2f7f4; }
.limit-grid li, .group-card, .setting-grid > div { border-color: rgba(181, 221, 207, .13); border-radius: 8px; background: rgba(3, 16, 16, .34); }
.limit-grid li { color: #d5e3dc; }
.limit-grid b, .setting-grid b, .group-card h4 b { color: var(--vanilla-accent); }
.group-card h4 { color: #f1f7f3; }
.group-card p, .block-list { color: #cadbd2; }
.setting-grid span { color: #c4d8ce; }
.limit-callout { border-left-width: 1px; border-left-color: rgba(183, 228, 200, .65); color: #d6e6dc; background: rgba(183, 228, 200, .07); }
.vanilla-ranks { border-color: var(--vanilla-line); }
.vanilla-ranks p { max-width: 58ch; color: #c8d9d0; }
.rank-open-button { border-radius: 7px; background: #b7e4c8; color: #10271d; transition: transform .2s ease, background .2s ease; }
.rank-open-button:hover { transform: translateY(-2px); background: #d5f1dd; }

@media (max-width: 700px) {
    .vanilla-page { padding: 20px 4px 58px; }
    .vanilla-hero { min-height: 0; margin-bottom: 30px; padding: 36px 23px 22px; border-radius: 14px; }
    .vanilla-hero::before { top: -195px; right: -235px; width: 400px; height: 400px; }
    .vanilla-hero h1 { margin-top: 19px; font-size: clamp(54px, 15vw, 76px); }
    .vanilla-hero-facts { gap: 7px; margin-top: 27px; }
    .vanilla-hero-facts span { font-size: 11px; }
    .vanilla-intro, .shard-explainer { gap: 13px; padding-top: 28px; padding-bottom: 34px; }
    .vanilla-features, .vanilla-limits { padding-top: 30px; padding-bottom: 36px; }
    .vanilla-feature-row { grid-template-columns: 3px minmax(0,1fr); gap: 15px; }
    .limit-panel { padding: 18px; }
    .group-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .vanilla-back, .vanilla-cta, .rank-open-button { transition: none; }
    .vanilla-cta:hover, .rank-open-button:hover { transform: none; }
}

/* Match the Economy page's shared dark and warm gold game-mode theme. */
body:has(.vanilla-page) {
    --vanilla-accent: #e8cd83;
    background-image: linear-gradient(145deg, rgba(19,25,31,.30), rgba(27,24,16,.4)), url("assets/background.png");
    background-color: #171a1d;
    color: #f7f8f5;
    accent-color: var(--vanilla-accent);
}
.vanilla-page { width: min(1060px, 100%); padding: 28px 18px 76px; color: #f7f8f5; }
.vanilla-back { margin-bottom: 28px; color: #f0dfb3; }
.vanilla-hero { max-width: 790px; min-height: 0; margin: 0 0 24px; padding: 20px 0 34px; overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
.vanilla-hero::before { content: none; }
.vanilla-eyebrow, .section-kicker { color: #e8cd83; }
.vanilla-hero h1 { max-width: none; margin: 14px 0; color: #fff8e9; font-size: clamp(44px, 7vw, 76px); line-height: 1; letter-spacing: -.035em; text-wrap: balance; }
.vanilla-lede { max-width: 700px; color: #f5f4ef; font-size: clamp(18px, 2.4vw, 23px); line-height: 1.55; }
.season-note { max-width: none; margin-top: 17px; color: #e8cd83; font-size: 14px; }
.season-note::before { display: none; }
.vanilla-disclosure { margin: 0; border-top: 1px solid rgba(230,211,162,.26); scroll-margin-top: 28px; }
.vanilla-disclosure:last-child { border-bottom: 1px solid rgba(230,211,162,.26); }
.vanilla-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 66px; color: #fff8e9; font-size: 18px; font-weight: 700; cursor: pointer; list-style: none; }
.vanilla-disclosure > summary::-webkit-details-marker { display: none; }
.vanilla-disclosure > summary::marker { content: ""; }
.disclosure-arrow { color: #e8cd83; font-size: 24px; font-weight: 400; transition: transform .18s ease; }
.vanilla-disclosure[open] > summary .disclosure-arrow { transform: rotate(45deg); }
.vanilla-disclosure > summary:focus-visible, .vanilla-rank-tabs button:focus-visible { outline: 2px solid #f0d995; outline-offset: 4px; }
.vanilla-disclosure-content { padding: 0 0 28px; color: #f1f2ee; }
.vanilla-disclosure-content > :first-child { margin-top: 0; }
.vanilla-intro, .shard-explainer, .vanilla-features, .vanilla-limits { border: 0; scroll-margin-top: 0; }
.vanilla-intro, .shard-explainer { grid-template-columns: minmax(180px,.7fr) minmax(0,1.3fr); gap: clamp(20px,5vw,58px); padding: 8px 0 18px; }
.vanilla-intro-copy { display: grid; gap: 12px; }
.vanilla-intro-copy p { max-width: 70ch; color: #f1f2ee; font-size: 15px; line-height: 1.75; }
.vanilla-intro h2, .shard-explainer h2, .vanilla-section-heading h2 { color: #fff8e9; }
.vanilla-intro p, .shard-copy p, .vanilla-feature-row p, .vanilla-section-heading > p { color: #f1f2ee; }
.vanilla-features, .vanilla-limits { padding: 0; }
.vanilla-section-heading { margin-bottom: 15px; }
.vanilla-section-heading h2 { font-size: clamp(24px, 3vw, 32px); }
.vanilla-feature-row { grid-template-columns: 34px minmax(0,1fr); gap: 15px; padding: 17px 0; border-color: rgba(230,211,162,.18); }
.feature-number { color: #e8cd83; background: none; font: 700 12px var(--font-mono,monospace); font-size: 12px; }
.vanilla-feature-row h3 { color: #fff8e9; font-size: 17px; }
.limit-panel { border-color: rgba(230,211,162,.24); border-radius: 9px; background: rgba(23,31,38,.68); box-shadow: none; }
.limit-panel-heading h3, .group-card h4 { color: #fff8e9; }
.limit-note, .limit-grid li, .setting-grid span, .group-card p, .block-list { color: #f0f1ed; }
.limit-grid b, .setting-grid b, .group-card h4 b { color: #e8cd83; }
.vanilla-rank-content { padding-top: 2px; }
.ranks-intro { margin: 0 0 12px; color: #f1f2ee; }
.vanilla-rank-tabs button { color: #f0e7d0; border-color: rgba(230,211,162,.25); border-radius: 8px; background: rgba(23,31,38,.68); cursor: pointer; }
.vanilla-rank-tabs button span { color: #e8cd83; }
.vanilla-rank-tabs button[aria-selected="true"] { color: #fff8e9; border-color: #b49346; background: rgba(58,48,28,.7); }
.vanilla-rank-detail { border-color: rgba(230,211,162,.22); border-radius: 9px; background: rgba(23,31,38,.68); }
.vanilla-rank-detail h3 { color: #fff8e9; }
.vanilla-rank-detail section + section { border-color: rgba(230,211,162,.2); }
.vanilla-rank-detail section h4, .vanilla-rank-price { color: #e8cd83; }
.vanilla-rank-note { border-color: #b49346; background: rgba(58,48,28,.45); }
.vanilla-rank-buy { color: #312817; background: #f0d995; }
.vanilla-rank-buy:hover { background: #f7e6b5; }
@media (max-width: 700px) {
    .vanilla-page { padding: 22px 8px 48px; }
    .vanilla-hero { padding: 18px 0 28px; }
    .vanilla-disclosure > summary { min-height: 60px; }
    .vanilla-intro, .shard-explainer { grid-template-columns: 1fr; gap: 10px; padding: 7px 0 15px; }
    .vanilla-feature-row { grid-template-columns: 30px minmax(0,1fr); gap: 12px; }
    .limit-grid, .group-grid, .setting-grid { grid-template-columns: 1fr; }
    .vanilla-rank-tabs button { min-width: 98px; }
}
@media (prefers-reduced-motion: reduce) {
    .disclosure-arrow { transition: none; }
}

.vanilla-actions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vanilla-disclosure { min-width: 0; overflow: hidden; border: 1px solid rgba(230,211,162,.28); border-radius: 10px; background: rgba(23,31,38,.78); transition: border-color .18s ease, background .18s ease; }
.vanilla-disclosure:hover, .vanilla-disclosure[open] { border-color: rgba(232,205,131,.72); background: rgba(23,31,38,.94); }
.vanilla-disclosure:last-child { border-bottom: 1px solid rgba(230,211,162,.28); }
.vanilla-disclosure[open] { grid-column: 1 / -1; }
.vanilla-disclosure > summary { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto; align-content: center; justify-content: initial; gap: 5px 16px; min-height: 104px; padding: 20px 22px; color: #fff8e9; border: 0; font-size: 16px; }
.vanilla-disclosure > summary:hover { color: #fff; }
.vanilla-disclosure > summary:focus-visible { outline-offset: -4px; }
.disclosure-title { font-size: 19px; font-weight: 750; }
.vanilla-disclosure > summary small { grid-column: 1; color: #d8d1c0; font-size: 13px; font-weight: 450; line-height: 1.4; }
.disclosure-arrow { grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(232,205,131,.35); border-radius: 50%; color: #e8cd83; font-size: 21px; line-height: 1; }
.vanilla-disclosure[open] > summary { border-bottom: 1px solid rgba(230,211,162,.2); }
.vanilla-disclosure-content { padding: 22px; }
.vanilla-disclosure[open] .vanilla-disclosure-content { animation: vanilla-panel-in .22s ease-out both; }
@keyframes vanilla-panel-in { from { opacity: .65; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 700px) {
    .vanilla-actions-grid { gap: 9px; }
    .vanilla-disclosure > summary { min-height: 96px; padding: 16px; }
    .vanilla-disclosure-content { padding: 18px; }
}
@media (max-width: 440px) {
    .vanilla-actions-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .vanilla-disclosure { transition: none; }
    .vanilla-disclosure[open] .vanilla-disclosure-content { animation: none; }
}

.vanilla-actions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.vanilla-action { min-width: 0; }
.vanilla-action-button { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto; align-content: center; gap: 7px 16px; width: 100%; min-height: 126px; padding: 22px 24px; text-align: left; color: #eef1f2; border: 1px solid rgba(255,255,255,.17); border-radius: 12px; background: rgba(255,255,255,.055); box-shadow: 0 12px 30px rgba(0,0,0,.15), inset 0 1px rgba(255,255,255,.06); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); cursor: pointer; transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.vanilla-action-button:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.1); box-shadow: 0 16px 34px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.09); }
.vanilla-action-button:focus-visible { outline: 2px solid rgba(255,255,255,.88); outline-offset: 4px; }
.vanilla-action-button .disclosure-title { font-size: 20px; }
.vanilla-action-button small { grid-column: 1; color: rgba(238,241,242,.7); font-size: 13px; font-weight: 500; line-height: 1.45; }
.vanilla-action-button .disclosure-arrow { grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 38px; height: 38px; color: #edf0f1; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: rgba(255,255,255,.045); font-size: 20px; }
.vanilla-how-it-works { margin-bottom: 18px; padding: 18px 0 24px; border-bottom: 1px solid rgba(255,255,255,.14); }
.vanilla-popup { width: min(820px, calc(100vw - 32px)); max-height: min(84vh, 850px); margin: auto; padding: 0; overflow: hidden; color: #e5e5e2; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: #202223; box-shadow: 0 24px 72px rgba(0,0,0,.48); }
.vanilla-popup::backdrop { background: rgba(5,10,16,.76); backdrop-filter: blur(4px); }
.vanilla-popup[open] { animation: vanilla-popup-in .2s cubic-bezier(.2,.75,.25,1) both; }
@keyframes vanilla-popup-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.vanilla-popup-head { position: sticky; z-index: 2; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px 17px; border-bottom: 1px solid rgba(255,255,255,.1); background: #191b1c; }
.vanilla-popup-head h2 { margin: 5px 0 0; color: #f2f1ee; font-size: clamp(24px,4vw,32px); }
.vanilla-popup-close { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; color: #dfdfdc; border: 1px solid rgba(255,255,255,.17); border-radius: 50%; background: transparent; font: 400 25px/1 var(--font-sans,sans-serif); cursor: pointer; }
.vanilla-popup-close:hover { background: rgba(255,255,255,.07); }
.vanilla-popup-close:focus-visible, .vanilla-rank-tabs button:focus-visible { outline: 2px solid #e5e5e2; outline-offset: 3px; }
.vanilla-popup-content { max-height: calc(min(84vh,850px) - 88px); padding: 22px 24px 28px; overflow-y: auto; overscroll-behavior: contain; color: #d6d7d5; font-size: 14px; line-height: 1.7; }
.vanilla-popup-content .vanilla-intro { padding: 4px 0; }
.vanilla-popup-content .vanilla-intro h2 { margin-top: 5px; }
.vanilla-popup-content .vanilla-section-heading { margin-bottom: 12px; }
.vanilla-popup-content .vanilla-feature-row { border-color: rgba(255,255,255,.1); }
.vanilla-popup-content .vanilla-feature-row h3, .vanilla-popup-content .limit-panel-heading h3 { color: #f1f0ec; }
.vanilla-popup-content .vanilla-feature-row p, .vanilla-popup-content .limit-note, .vanilla-popup-content .limit-callout { color: #d2d3d0; }
.vanilla-popup-content .limit-panel { border-color: rgba(255,255,255,.11); background: #252728; box-shadow: none; }
.vanilla-popup-content .vanilla-rank-detail { border-color: rgba(255,255,255,.11); background: #252728; }
.vanilla-popup-content .vanilla-rank-detail h3 { color: #f1f0ec; }
.vanilla-popup-content .vanilla-rank-detail section h4, .vanilla-popup-content .vanilla-rank-price { color: #c9d5cc; }
.vanilla-popup-content .vanilla-rank-detail section + section { border-color: rgba(255,255,255,.1); }
.vanilla-rank-overview { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.1); }
.vanilla-rank-overview h3 { margin: 0; color: #f1f0ec; font-size: 24px; letter-spacing: -.02em; }
.vanilla-rank-price { margin: 3px 0 0; color: #bfc1bd; font-size: 13px; font-weight: 600; }
.vanilla-rank-loss { display: grid; gap: 1px; min-width: 94px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; background: rgba(255,255,255,.035); text-align: right; }
.vanilla-rank-loss span { color: #bfc1bd; font-size: 11px; }
.vanilla-rank-loss strong { color: #f1f0ec; font-size: 17px; font-variant-numeric: tabular-nums; }
.vanilla-rank-perks, .vanilla-rank-kit { margin-top: 16px; }
.vanilla-rank-perks h4, .vanilla-rank-kit-title { margin: 0 0 9px; color: #dfe1dc; font-size: 13px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.vanilla-rank-perks ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px 18px; margin: 0; padding: 0; list-style: none; }
.vanilla-rank-perks li { color: #d1d3ce; }
.vanilla-rank-perks code { color: #f0f1ec; font-family: var(--font-mono,monospace); font-size: .92em; }
.vanilla-rank-kit-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 20px; }
.vanilla-rank-kit-section { min-width: 0; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.1); }
.vanilla-rank-kit-section:nth-child(3) { grid-column: 1 / -1; }
.vanilla-rank-kit-section h4 { margin: 0 0 6px; color: #c7d1ca; font-size: 13px; font-weight: 700; }
.vanilla-rank-kit-section ul { margin: 0; padding-left: 17px; color: #d1d3ce; }
.vanilla-rank-kit-section li + li { margin-top: 3px; }
.vanilla-rank-kit-section:nth-child(3) ul { columns: 3; column-gap: 25px; }
.vanilla-rank-kit-section:nth-child(3) li { break-inside: avoid; }
.vanilla-rank-buy { margin-top: 17px; }
.vanilla-popup-content .vanilla-rank-tabs button { color: #dededb; border-color: rgba(255,255,255,.14); background: #252728; }
.vanilla-popup-content .vanilla-rank-tabs button[aria-selected="true"] { color: #f3f2ef; border-color: #7b827d; background: #343837; }
.vanilla-popup-content .vanilla-rank-tabs button span { color: #c9d5cc; }
.vanilla-popup-content .vanilla-rank-buy { color: #202321; background: #d7e0d9; }
.vanilla-popup-content .vanilla-rank-note { color: #d0d2ce; border-color: rgba(255,255,255,.17); background: #292c2b; }
.vanilla-rules-content section + section { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); }
.vanilla-rules-content h3 { margin: 0 0 8px; color: #f1f0ec; font-size: 17px; }
.vanilla-rules-content ul { margin: 8px 0 0; padding-left: 20px; }
.vanilla-rules-content li + li { margin-top: 7px; }
.vanilla-rules-content a { color: #d2ded5; text-underline-offset: 3px; }
.vanilla-rules-content .rule-important { padding: 14px 16px; border: 1px solid rgba(255,255,255,.11); border-radius: 10px; background: #292c2b; }
.vanilla-rules-content .rule-important strong { color: #e2e5df; }
.vanilla-rules-content .rule-important p { margin: 4px 0 0; }
.vanilla-rules-content .rule-note { margin: 22px 0 0; color: #bdccd2; font-weight: 650; }
@media (max-width: 700px) {
    .vanilla-actions-grid { gap: 10px; }
    .vanilla-action-button { min-height: 108px; padding: 16px; }
    .vanilla-action-button .disclosure-title { font-size: 17px; }
    .vanilla-popup { width: calc(100vw - 20px); max-height: 90vh; }
    .vanilla-popup-head { padding: 17px 17px 14px; }
    .vanilla-popup-content { max-height: calc(90vh - 76px); padding: 17px 16px 23px; }
    .vanilla-rank-kit-grid { grid-template-columns: 1fr; }
    .vanilla-rank-kit-section:nth-child(3) { grid-column: auto; }
    .vanilla-rank-kit-section:nth-child(3) ul { columns: 2; }
    .vanilla-rank-perks ul { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
    .vanilla-actions-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .vanilla-action-button { transition: none; }
    .vanilla-action-button:hover { transform: none; }
    .vanilla-popup[open] { animation: none; }
}