/* Design System v4.0 tokens (founder Reset Starter v1.1, 2026-10-21). Default look on the t1333 build: active when <html> has class
   "xds4" (on by default; fall back with ?ds=old, back on with ?ds=v4).
   Fonts: "Futuristic Serif" / "Geometric Sans" are not real fonts, so they map to free system stacks (no paid or remote fonts). */
:root{--bg-main:#0A0A0F;--accent-neon:#5F5BFF;--accent-gold:#D4A857;--accent-cyan:#00F0FF;--accent-purple:#A020F0;
--text-primary:#FFFFFF;--text-secondary:#C0C0C0;--radius-card:16px;--radius-button:12px;
--shadow-glow:0 0 24px rgba(95,91,255,.5);--shadow-gold:0 0 18px rgba(212,168,87,.4);
--transition-fast:.15s ease-out;--transition-medium:.3s ease-out;
--font-heading:"Playfair Display",Didot,"Bodoni 72","Times New Roman",Georgia,serif;
--font-body:Inter,"Avenir Next",Avenir,Futura,"Century Gothic","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif}
html.xds4{--bg:#0A0A0F;--text:#FFFFFF;--muted:#C0C0C0;--gold:#D4A857;--purple:#A020F0;--teal:#00F0FF;--radius-card:16px;--radius-btn:12px;
--card:rgba(15,15,25,.9);--border:rgba(212,168,87,.4);--transition:var(--transition-medium)}
html.xds4 body{background:#0A0A0F!important;color:#FFFFFF;font-family:var(--font-body)}
html.xds4 :is(h1,h2,h3,.font-display){font-family:var(--font-heading)}
html.xds4 body .card-base{background:rgba(15,15,25,.9)!important;border:1px solid rgba(212,168,87,.4)!important;border-radius:16px!important;box-shadow:var(--shadow-gold)!important;transition:transform var(--transition-medium),box-shadow var(--transition-medium)}
html.xds4 body .btn-gold{background:linear-gradient(135deg,#5F5BFF,#00F0FF)!important;color:#000!important;border:none!important;border-radius:12px!important;box-shadow:var(--shadow-glow)!important;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}
html.xds4 body .btn-gold:hover{transform:translateY(-1px) scale(1.02);box-shadow:0 0 32px rgba(0,240,255,.55)!important}
html.xds4 body .btn-ghost{background:transparent!important;color:#FFFFFF!important;border:1px solid #5F5BFF!important;border-radius:12px!important;transition:box-shadow var(--transition-fast)}
html.xds4 body .btn-ghost:hover{box-shadow:var(--shadow-glow)!important}
html.xds4 body :is(.text-muted,[style*="color:var(--muted)"]){color:#C0C0C0}
@media (prefers-reduced-motion:reduce){html.xds4 body :is(.btn-gold,.btn-ghost,.card-base){transition:none!important;transform:none!important}}
/* v4.0 + Handoff v3.0 additions (t1333). Still OPT-IN only (html.xds4 via ?ds=v4). Default look unchanged. */
:root{--grid-cols-mobile:4;--grid-margin-mobile:16px;--grid-gutter-mobile:16px;--grid-cols-desktop:12;--grid-margin-desktop:80px;--grid-gutter-desktop:24px;
--fs-h1:48px;--fs-h2:32px;--fs-h3:24px;--fs-body:16px;--fs-caption:12px;--shadow-glow-hover:0 0 32px rgba(95,91,255,.65)}
/* Grid: 4 col / 16px margins + gutters on mobile; 12 col / 80px margins / 24px gutters from 1024px. */
html.xds4 .ds-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding-inline:16px}
html.xds4 .ds-grid-3x2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
html.xds4 .ds-grid-3x2>*{grid-column:span 4}
@media (min-width:640px){html.xds4 .ds-grid-3x2>*{grid-column:span 2}}
@media (min-width:1024px){html.xds4 .ds-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding-inline:80px}
 html.xds4 .ds-grid-3x2{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}html.xds4 .ds-grid-3x2>*{grid-column:auto}}
/* Text sizes: H1 48 / H2 32 (serif), H3 24 (sans, bold), body 16, caption 12. Mobile H1/H2 scale down so nothing overflows at 390px. */
html.xds4 .ds-h1{font:700 clamp(32px,8vw,var(--fs-h1))/1.1 var(--font-heading)}
html.xds4 .ds-h2{font:600 clamp(24px,6vw,var(--fs-h2))/1.2 var(--font-heading)}
html.xds4 .ds-h3{font:700 var(--fs-h3)/1.25 var(--font-body)}
html.xds4 .ds-body{font:400 var(--fs-body)/1.55 var(--font-body)}
html.xds4 .ds-caption{font:500 var(--fs-caption)/1.4 var(--font-body);color:var(--text-secondary)}
/* Buttons: primary / secondary / ghost / icon, with hover, pressed and disabled states. */
html.xds4 .ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:var(--radius-button);font:600 15px/1 var(--font-body);cursor:pointer;transition:box-shadow var(--transition-fast),transform var(--transition-fast),background var(--transition-fast)}
html.xds4 .ds-btn-primary{background:linear-gradient(135deg,#5F5BFF,#00F0FF);color:#000;border:none}
html.xds4 .ds-btn-secondary{background:transparent;color:#5F5BFF;border:1px solid #5F5BFF}
html.xds4 .ds-btn-ghost,html.xds4 body .btn-ghost{background:transparent;color:var(--text-primary);border:1px solid transparent}
html.xds4 .ds-btn-ghost:hover,html.xds4 .ds-btn-ghost:focus-visible{background:rgba(95,91,255,.12);border-color:rgba(95,91,255,.45)}
html.xds4 .ds-btn-icon,html.xds4 body .btn-icon{width:44px;height:44px;min-height:44px;padding:0;border-radius:var(--radius-button);display:inline-flex;align-items:center;justify-content:center;background:rgba(15,15,25,.9);border:1px solid rgba(212,168,87,.4);color:var(--text-primary)}
html.xds4 :is(.ds-btn,.ds-btn-icon):hover{box-shadow:var(--shadow-glow-hover)}
html.xds4 :is(.ds-btn,.ds-btn-icon):active{transform:translateY(1px) scale(.98)}
html.xds4 :is(.ds-btn,.ds-btn-icon):disabled,html.xds4 :is(.ds-btn,.ds-btn-icon)[aria-disabled="true"]{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
/* Cards: base + variants (ecosystem, hub, item, quest, partner, lore) with a hover glow. */
html.xds4 .ds-card{background:rgba(15,15,25,.9);border:1px solid rgba(212,168,87,.4);border-radius:var(--radius-card);padding:16px;transition:box-shadow var(--transition-medium),transform var(--transition-medium),border-color var(--transition-medium)}
html.xds4 .ds-card:hover,html.xds4 .ds-card:focus-within{box-shadow:var(--shadow-glow);border-color:rgba(95,91,255,.6)}
html.xds4 .ds-card--ecosystem{min-height:140px}
html.xds4 .ds-card--hub{display:flex;flex-direction:column;gap:6px}
html.xds4 .ds-card--item{padding:12px}
html.xds4 .ds-card--quest{border-color:rgba(0,240,255,.4)}
html.xds4 .ds-card--partner{border-color:rgba(212,168,87,.6);box-shadow:var(--shadow-gold)}
html.xds4 .ds-card--lore{border-color:rgba(160,32,240,.45)}
html.xds4 body .card-base:hover{box-shadow:var(--shadow-glow)!important}
@media (prefers-reduced-motion:reduce){html.xds4 :is(.ds-btn,.ds-btn-icon,.ds-card){transition:none!important;transform:none!important}}