/* GENERATED by node scripts/build-brand-tokens.mjs; edit tokens.source.json or components.css.
   Brand DS v2: THINK. SWEAT. COMPETE. / PIENSA. SUDA. COMPITE. Spark is the CTA outside play; in play the CTA is the Game or phase color.
   Amanecer: one spark per product screen (the TU MEJOR ring or an earned rule). Never the chart curve, never an arena CTA, never a large fill.
   Scoped --mb-* layer. MR-TOKENS (apps/web/shared/tokens.css), stimulus fonts, game cues and scoring stay unchanged. */
@font-face{font-family:'MB Archivo Black';src:url('fonts/archivo-black-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'MB Inter';src:url('fonts/inter-var-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'MB Mono';src:url('fonts/mr-mono-500-latin.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'MB Mono';src:url('fonts/mr-mono-700-latin.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
.mb-brand,[data-mb-brand]{
  --mb-bone:#F1ECE3;
  --mb-charcoal:#151514;
  --mb-sand:#E8E2D7;
  --mb-line:#D9D0C1;
  --mb-slate:#4A4844;
  --mb-soft:#B5AFA5;
  --mb-gravel:#8C877F;
  --mb-spark:#D7FF3C;
  --mb-body:#FD6A19;
  --mb-brain:#06A3C4;
  --mb-line-dark:#33322F;
  --mb-input-dark:#1F1F1D;
  --mb-game-001:#3DF5E4;
  --mb-game-002:#FF7A45;
  --mb-game-003:#A99BFF;
  --mb-game-004:#A9BCCF;
  --mb-text-title:28px;
  --mb-text-subtitle:22px;
  --mb-text-body:17px;
  --mb-text-secondary:15px;
  --mb-text-label:13px;
  --mb-text-action:19px;
  --mb-text-score:48px;
  --mb-space-1:4px;
  --mb-space-2:8px;
  --mb-space-3:12px;
  --mb-space-4:16px;
  --mb-space-5:20px;
  --mb-space-6:24px;
  --mb-space-8:32px;
  --mb-space-12:48px;
  --mb-space-16:64px;
  --mb-radius-pill:999px;
  --mb-radius-card:20px;
  --mb-radius-input:14px;
  --mb-radius-tag:6px;
  --mb-control-height:60px;
  --mb-control-secondary-height:52px;
  --mb-control-target-min:44px;
  --mb-control-border-width:2px;
  --mb-control-focus-width:3px;
  --mb-control-focus-offset:3px;
  --mb-motion-fast:120ms;
  --mb-motion-base:200ms;
  --mb-font-display:'MB Archivo Black','Arial Black',Arial,sans-serif;
  --mb-font-ui:'MB Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mb-font-data:'MB Mono','IBM Plex Mono',Menlo,monospace;
  --mb-amanecer:linear-gradient(90deg,#FFA94D 0%,#EE3D96 55%,#E33CC7 100%);
  --mb-amanecer-flat:#EE3D96;
  --mb-g001:var(--mb-game-001);
  --mb-g002:var(--mb-game-002);
  --mb-g003:var(--mb-game-003);
  --mb-station:currentColor;
  --mb-dual:var(--mb-station);
  --mb-game:var(--mb-body);
  --mb-fw-soft:500;
  --mb-fs-hero:clamp(52px,6.3vw,100px);
  --mb-fs-h2:clamp(34px,5.2vw,64px);
  --mb-fs-h3:22px;
  --mb-fs-num:clamp(56px,7vw,104px);
  --mb-fs-l2:clamp(96px,15vw,220px);
  --mb-fs-lead:clamp(18px,1.6vw,22px);
  --mb-fs-body:18px;
  --mb-fs-small:15px;
  --mb-fs-eyebrow:13px;
  --mb-canvas:var(--mb-bone);
  --mb-surface:var(--mb-sand);
  --mb-ink:var(--mb-charcoal);
  --mb-ink-secondary:var(--mb-slate);
  --mb-rule:var(--mb-line);
  --mb-control-border:var(--mb-slate);
  --mb-focus:var(--mb-charcoal);
  color:var(--mb-ink);background:var(--mb-canvas);font:400 var(--mb-text-body)/1.5 var(--mb-font-ui);color-scheme:light;
}
.mb-brand.mb-dark,.mb-brand[data-mb-theme="dark"],[data-mb-brand][data-mb-theme="dark"]{
  --mb-canvas:var(--mb-charcoal);
  --mb-surface:var(--mb-input-dark);
  --mb-ink:var(--mb-bone);
  --mb-ink-secondary:var(--mb-soft);
  --mb-rule:var(--mb-line-dark);
  --mb-control-border:var(--mb-soft);
  --mb-focus:var(--mb-bone);
  color-scheme:dark;
}
/* Shared components of the proposal. Always place inside .mb-brand or [data-mb-brand]. */
:where(.mb-brand,[data-mb-brand]) *{box-sizing:border-box}
:where(.mb-brand,[data-mb-brand]) :is(button,input,select,textarea){font:inherit}
:where(.mb-brand,[data-mb-brand]) :is(h1,h2,h3,.mb-heading){font-family:var(--mb-font-display);font-weight:400;line-height:1.1;letter-spacing:-.02em}
:where(.mb-brand,[data-mb-brand]) h1{font-size:var(--mb-text-title)}
:where(.mb-brand,[data-mb-brand]) h2{font-size:var(--mb-text-subtitle)}
:where(.mb-brand,[data-mb-brand]) .mb-secondary-text{font:400 var(--mb-text-secondary)/1.5 var(--mb-font-ui);color:var(--mb-ink-secondary)}
:where(.mb-brand,[data-mb-brand]) .mb-label{font:700 var(--mb-text-label)/1.4 var(--mb-font-data);letter-spacing:.06em}
:where(.mb-brand,[data-mb-brand]) .mb-number{font-family:var(--mb-font-data);font-variant-numeric:tabular-nums;color:var(--mb-ink)}
:where(.mb-brand,[data-mb-brand]) .mb-score{font:700 var(--mb-text-score)/1 var(--mb-font-data);color:var(--mb-ink);letter-spacing:-.04em}
:where(.mb-brand,[data-mb-brand]) .mb-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--mb-space-3);min-height:var(--mb-control-height);padding:var(--mb-space-4) var(--mb-space-6);border:var(--mb-control-border-width) solid transparent;border-radius:var(--mb-radius-pill);font:400 var(--mb-text-action)/1.2 var(--mb-font-display);text-align:center;text-decoration:none;cursor:pointer;transition:transform var(--mb-motion-fast) ease,outline-offset var(--mb-motion-fast) ease}
:where(.mb-brand,[data-mb-brand]) .mb-btn--primary{background:var(--mb-spark);color:var(--mb-charcoal)}
:where(.mb-brand,[data-mb-brand]) .mb-btn--secondary{background:transparent;color:var(--mb-ink);border-color:var(--mb-control-border);min-height:var(--mb-control-secondary-height);font-family:var(--mb-font-ui);font-size:var(--mb-text-body);font-weight:650}
:where(.mb-brand,[data-mb-brand]) .mb-btn:not(:disabled):active{transform:translateY(1px)}
:where(.mb-brand,[data-mb-brand]) .mb-btn:disabled{background:var(--mb-surface);color:var(--mb-ink-secondary);border-color:var(--mb-rule);cursor:not-allowed;transform:none}
:where(.mb-brand,[data-mb-brand]) .mb-btn[aria-busy="true"]{cursor:progress}
:where(.mb-brand,[data-mb-brand]) .mb-spinner{width:18px;height:18px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:mb-spin .8s linear infinite;flex:0 0 auto}
:where(.mb-brand,[data-mb-brand]) .mb-btn[aria-pressed="true"],:where(.mb-brand,[data-mb-brand]) .mb-option[aria-pressed="true"],:where(.mb-brand,[data-mb-brand]) .mb-option[aria-selected="true"]{background:var(--mb-ink);color:var(--mb-canvas);border-color:var(--mb-ink);font-weight:700}
:where(.mb-brand,[data-mb-brand]) .mb-option{min-height:var(--mb-control-secondary-height);padding:var(--mb-space-3) var(--mb-space-4);border:var(--mb-control-border-width) solid var(--mb-control-border);border-radius:var(--mb-radius-input);background:transparent;color:var(--mb-ink);font:600 var(--mb-text-body)/1.3 var(--mb-font-ui)}
:where(.mb-brand,[data-mb-brand]) .mb-chip{display:inline-flex;align-items:center;gap:var(--mb-space-2);padding:var(--mb-space-2) var(--mb-space-3);border-radius:var(--mb-radius-pill);background:var(--mb-charcoal);color:var(--mb-bone);font:700 var(--mb-text-label)/1.3 var(--mb-font-data)}
:where(.mb-brand,[data-mb-brand]) .mb-chip svg,:where(.mb-brand,[data-mb-brand]) .mb-chip img{width:32px;height:22px;object-fit:contain}
:where(.mb-brand,[data-mb-brand]) .mb-input{display:block;width:100%;min-height:var(--mb-control-secondary-height);padding:var(--mb-space-3) var(--mb-space-4);border:var(--mb-control-border-width) solid var(--mb-control-border);border-radius:var(--mb-radius-input);background:var(--mb-canvas);color:var(--mb-ink);font:400 var(--mb-text-body)/1.4 var(--mb-font-ui)}
:where(.mb-brand,[data-mb-brand]) .mb-input::placeholder{color:var(--mb-ink-secondary);opacity:1}
:where(.mb-brand,[data-mb-brand]) .mb-input[aria-invalid="true"]{outline:2px solid var(--mb-ink);outline-offset:2px}
:where(.mb-brand,[data-mb-brand]) .mb-status{display:flex;gap:var(--mb-space-3);align-items:flex-start;padding:var(--mb-space-4);border:var(--mb-control-border-width) solid var(--mb-control-border);border-radius:var(--mb-radius-input);color:var(--mb-ink);background:var(--mb-canvas);font:400 var(--mb-text-body)/1.4 var(--mb-font-ui)}
:where(.mb-brand,[data-mb-brand]) .mb-status::before{content:'i';display:grid;place-items:center;width:24px;height:24px;flex:0 0 auto;border:2px solid currentColor;border-radius:50%;font:700 15px/1 var(--mb-font-ui)}
:where(.mb-brand,[data-mb-brand]) .mb-status--success::before{content:'✓'}
:where(.mb-brand,[data-mb-brand]) .mb-status--error::before{content:'!'}
:where(.mb-brand,[data-mb-brand]) :focus-visible{outline:var(--mb-control-focus-width) solid var(--mb-focus);outline-offset:var(--mb-control-focus-offset)}
:where(.mb-brand,[data-mb-brand]) .mb-amanecer-rule{height:4px;background:var(--mb-amanecer-flat);background:var(--mb-amanecer)}
/* .mb-amanecer-heading is communication only: poster, social, LIVE face. Not a product screen, not a chart, not an arena CTA. */
:where(.mb-brand,[data-mb-brand]) .mb-amanecer-heading{background:var(--mb-amanecer);-webkit-background-clip:text;background-clip:text;color:transparent;font-family:var(--mb-font-display);font-size:var(--mb-text-title)}
/* Spark fills the primary action outside play, and an achievement chip. Scores stay in ink.
   Phase pills are LIVE (BODY / BRAIN / DUAL). They do not repaint --mr-move or --mr-think.
   Soft is a lighter type weight (.mb-pill--soft), not the color --mb-soft and not a DUAL chip. */
:where(.mb-brand,[data-mb-brand]) .mb-earned{position:relative;padding:var(--mb-space-4);border:var(--mb-control-border-width) solid var(--mb-control-border);border-radius:var(--mb-radius-input);color:var(--mb-ink);background:var(--mb-canvas);overflow:hidden}
:where(.mb-brand,[data-mb-brand]) .mb-earned::before{content:'';display:block;position:absolute;top:0;left:0;right:0;height:4px;background:var(--mb-amanecer-flat);background:var(--mb-amanecer)}
:where(.mb-brand,[data-mb-brand]) .mb-earned-label{display:block;font:700 var(--mb-text-label)/1.4 var(--mb-font-data);color:var(--mb-ink);letter-spacing:.06em}
:where(.mb-brand,[data-mb-brand]) .mb-earned .mb-score{display:block;margin-top:var(--mb-space-3);color:var(--mb-ink)}
:where(.mb-brand,[data-mb-brand]) .mb-btn--juego{background:var(--mb-game);color:var(--mb-charcoal)}
:where(.mb-brand,[data-mb-brand]) .mb-pill{display:inline-flex;align-items:center;gap:8px;border-radius:var(--mb-radius-pill);padding:8px 16px;font:700 14px/1 var(--mb-font-data);letter-spacing:.12em;text-transform:uppercase;color:var(--mb-charcoal)}
:where(.mb-brand,[data-mb-brand]) .mb-pill--body{background:var(--mb-body)}
:where(.mb-brand,[data-mb-brand]) .mb-pill--brain{background:var(--mb-brain)}
:where(.mb-brand,[data-mb-brand]) .mb-pill--dual{background:var(--mb-dual)}
:where(.mb-brand,[data-mb-brand]) .mb-pill--soft{font-weight:var(--mb-fw-soft);font-family:var(--mb-font-ui)}
:where(.mb-brand,[data-mb-brand]) .mb-bar--body{background:var(--mb-body);color:var(--mb-charcoal)}
:where(.mb-brand,[data-mb-brand]) .mb-bar--brain{background:var(--mb-brain);color:var(--mb-charcoal)}
/* AMANECER GUARD. Product charts: the curve is Charcoal (a total, on Bone) or the Game color
   (one Game, on a Charcoal tile). Amanecer is only the TU MEJOR ring, one per chart, which spends
   the one spark allowed on that screen. Never stroke the path, fill the area, glow, paint the score,
   or build an arena CTA with --mb-amanecer. */
:where(.mb-brand,[data-mb-brand]) .mb-chart-line{fill:none;stroke:var(--mb-charcoal);stroke-width:2.5px;stroke-linecap:round;stroke-linejoin:round}
:where(.mb-brand,[data-mb-brand]) .mb-chart-line--g001{stroke:var(--mb-game-001)}
:where(.mb-brand,[data-mb-brand]) .mb-chart-line--g002{stroke:var(--mb-game-002)}
:where(.mb-brand,[data-mb-brand]) .mb-chart-line--g003{stroke:var(--mb-game-003)}
:where(.mb-brand,[data-mb-brand]) .mb-chart-grid{fill:none;stroke:var(--mb-line);stroke-width:1px}
:where(.mb-brand,[data-mb-brand]) .mb-dark .mb-chart-grid,:where(.mb-brand,[data-mb-brand])[data-mb-theme="dark"] .mb-chart-grid{stroke:var(--mb-line-dark)}
:where(.mb-brand,[data-mb-brand]) .mb-tu-mejor{width:16px;height:16px;box-sizing:border-box;border-radius:50%;padding:3px;background:var(--mb-amanecer-flat);background:var(--mb-amanecer);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none}
:where(.mb-brand,[data-mb-brand]) .mb-tu-mejor-label{color:var(--mb-ink);font:700 var(--mb-text-label)/1 var(--mb-font-data);letter-spacing:.06em}
@keyframes mb-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){:where(.mb-brand,[data-mb-brand]) .mb-btn{transition:none}:where(.mb-brand,[data-mb-brand]) .mb-spinner{animation:none;border-right-color:currentColor}}