:root {
  --width: 1000px; --edge: 20px; --radius: 22px; --glass-blur: 22px;
  --bar-height: 66px; --bar-radius: 20px; --bar-inner: 14px;
  --display: "Outfit", system-ui, sans-serif; --copy: "Figtree", system-ui, sans-serif;
  --page: #0b0906;
  --backdrop: radial-gradient(50% 38% at 50% -4%, rgba(232, 164, 22, .36), transparent 70%), radial-gradient(34% 40% at -4% 62%, rgba(190, 104, 6, .2), transparent 70%), radial-gradient(38% 44% at 104% 36%, rgba(255, 200, 80, .1), transparent 70%), linear-gradient(180deg, #130e07 0, #0a0805 60%);
  --text: #fdf6e6; --text-soft: #e4d9c2; --text-dim: #b5a688; --text-on-page: #b5a688;
  --menu: #d9ccb0; --menu-on: #fff; --menu-hover: rgba(255, 226, 160, .1); --rule: rgba(255, 222, 150, .14);
  --brand: #f3b62c; --brand-bars: linear-gradient(180deg, #ffe7a8, #e9ab1c 58%, #b97606);
  --glass: linear-gradient(180deg, rgba(255, 236, 190, .085), rgba(255, 236, 190, .035)); --glass-edge: rgba(255, 222, 150, .17); --glass-shadow: 0 30px 60px -40px #000, inset 0 1px 0 rgba(255, 240, 200, .08);
  --tint: rgba(255, 226, 160, .08); --accent: #e9ab1c; --art-bg: #201810; --shimmer: rgba(255, 226, 160, .18);
  --badge: linear-gradient(145deg, #c08205, #875300);
  --field: rgba(255, 244, 214, .08); --field-edge: rgba(255, 214, 130, .36); --field-shadow: 0 24px 60px -30px rgba(232, 164, 22, .5); --field-text: #fff; --field-hint: #a8997a;
  --focus: #f0b429; --halo: rgba(240, 180, 41, .22);
  --main: linear-gradient(180deg, #aa6c03, #7f4f00); --main-edge: rgba(255, 224, 150, .3); --paste: rgba(255, 236, 190, .14);
  --plain: rgba(255, 236, 190, .08); --plain-edge: rgba(255, 222, 150, .24); --plain-hover: rgba(255, 236, 190, .18);
  --quiet: transparent; --quiet-edge: rgba(255, 222, 150, .28);
  --switch: rgba(255, 236, 190, .06); --switch-edge: rgba(255, 222, 150, .18); --switch-text: rgba(255, 255, 255, .8); --switch-on: linear-gradient(180deg, #aa6c03, #7f4f00);
  --pill: rgba(255, 236, 190, .07); --pill-edge: rgba(255, 222, 150, .2); --pill-hover: rgba(255, 236, 190, .16); --pill-on: linear-gradient(180deg, #aa6c03, #7f4f00);
  --round: rgba(255, 236, 190, .08); --round-edge: rgba(255, 222, 150, .22); --round-hover: rgba(255, 236, 190, .2);
  --label: rgba(233, 171, 28, .24);
  --deck: rgba(24, 18, 9, .92); --deck-edge: rgba(255, 222, 150, .22); --deck-main: linear-gradient(180deg, #aa6c03, #7f4f00); --deck-lit: #f0b429; --deck-dim: rgba(255, 236, 190, .2); --deck-ring: rgba(240, 180, 41, .35); --deck-hub: #15100a;
  --dialog: linear-gradient(180deg, #231a0d, #15100a); --dialog-edge: rgba(255, 222, 150, .24); --dialog-text: #fdf6e6; --dialog-dim: #b5a688; --dialog-round: rgba(255, 236, 190, .1); --dialog-switch: rgba(255, 236, 190, .07);
  --veil: rgba(6, 4, 2, .68);
  --choice: rgba(255, 236, 190, .05); --choice-edge: rgba(255, 222, 150, .18); --choice-on: rgba(240, 180, 41, .13); --choice-ring: rgba(255, 222, 150, .5);
  --assist: #1c150b; --assist-edge: rgba(255, 214, 130, .36); --assist-text: #fdf6e6; --assist-dim: #a8997a; --assist-hover: rgba(255, 236, 190, .1); --assist-rule: rgba(255, 222, 150, .16); --assist-chip: #8a5802; --assist-mark: #f0b429;
  --scroll: rgba(255, 222, 150, .28); --select: #8a5802; --select-text: #fff;
  --notice: #2a2010;
}
.masthead { padding-top: 10px; }
.masthead__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; border-bottom: 1px solid var(--rule); }
.locale { border: 1px solid var(--glass-edge); }
.opener { padding: 40px 0 0; }
.brand__name { font-size: 54px; line-height: 54px; background: linear-gradient(180deg, #ffe7a8, #e9ab1c 58%, #b97606); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand__bars { --scale: 1.1; }
.tagline { margin-top: 12px; font: 500 18px/26px var(--copy); color: var(--text-soft); }
.lookup { max-width: 760px; margin: 26px auto 0; }
.board { margin-top: 32px; }
.chart { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(6, auto); column-gap: 10px; }
.pairing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.summary, .howto { padding: 24px 26px 26px; }
.howto .trio { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.howto .trio li { padding: 0; }
.handbook { margin-top: 44px; }
.answers { margin-top: 40px; }
.answers__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.results { margin-top: 30px; padding: 18px; }
.results .hits { margin-inline: -8px; }
@media (max-width: 768px) {
  .opener { padding: 28px 0 0; }
  .brand__name { font-size: 42px; line-height: 44px; }
  .brand__bars { --scale: .92; }
  .tagline { font-size: 16px; line-height: 24px; }
  .lookup { margin-top: 20px; }
  .board { margin-top: 24px; }
  .chart { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-template-rows: none; }
  .pairing { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .summary, .howto { padding: 18px 16px 20px; }
  .handbook { margin-top: 30px; }
  .answers { margin-top: 28px; }
  .answers__list { grid-template-columns: minmax(0, 1fr); }
  .results { margin-top: 22px; padding: 12px 10px; }
  .results .hits { margin-inline: -4px; }
}