/* GENERATED by scripts/build-guide.mjs predicely — do not edit; re-run the script.
   The page look (the "charcoal" board scheme, the quiz's default), the tokens the quiz's rules read
   from style.css's :root (resolved), and the quiz's own rules from quiz-theme.css, quiz-components.css,
   predicely.css and style.css — only those the lifted screens use (#id → .gid-id, .predicely → .pq-gfig). */
.cg-page {
  --pgr-bg: radial-gradient(125% 120% at 50% -10%,#1c1e24 0%,#141519 58%,#0d0e11 100%);
  --pgr-seat: rgba(255,255,255,.025);
  --pgr-panel: rgba(255,255,255,.04);
  --pgr-line: rgba(255,255,255,.075);
  --pgr-txt: #e9e8e4;
  --pgr-dim: #83858b;
  --pgr-track: rgba(255,255,255,.07);
  --pgr-sel: oklch(.74 .14 152);
  --pgr-btn: linear-gradient(180deg,#333841,#22252b);
  --pgr-btnTxt: #e9e8e4;
  --pgr-bubbleBg: #2b2d33;
  --pgr-bubbleTxt: #f1f0ec;
  --pgr-selBg: oklch(.74 .14 152 / .16);
  --pgr-gold: oklch(.80 .15 85);
  --pgr-solid: #15161b;
  --pgr-goldBg: color-mix(in oklch, oklch(.80 .15 85) 16%, transparent);
  --cg-base: #141519;
}
.pq-gfig {
  --pgr-bg: radial-gradient(125% 120% at 50% -10%,#1c1e24 0%,#141519 58%,#0d0e11 100%);
  --pgr-panel: rgba(255,255,255,.04);
  --pgr-track: rgba(255,255,255,.07);
  --pgr-line: rgba(255,255,255,.075);
  --pgr-txt: #e9e8e4;
  --pgr-dim: #83858b;
  --pgr-sel: oklch(.74 .14 152);
  --pgr-selBg: oklch(.74 .14 152 / .16);
  --pgr-btn: linear-gradient(180deg,#333841,#22252b);
  --pgr-btnTxt: #e9e8e4;
  --pgr-font: 'Outfit',system-ui,sans-serif;
}
.pq-gfig { --bg: var(--pgr-bg, radial-gradient(125% 120% at 50% -10%,#1c1e24 0%,#141519 58%,#0d0e11 100%)); --card: var(--pgr-panel, rgba(255,255,255,.038)); --card2: var(--pgr-track, rgba(255,255,255,.07)); --line: var(--pgr-line, rgba(255,255,255,.08)); --lineB: rgba(255,255,255,.15); --txt: var(--pgr-txt, #e9e8e4); --dim: var(--pgr-dim, #7a7c82); --acc: var(--pgr-sel, oklch(.74 .14 152)); --accBg: var(--pgr-selBg, oklch(.74 .14 152 / .15)); --accDim: color-mix(in oklch, var(--acc) 42%, transparent); --btn: var(--pgr-btn, linear-gradient(180deg,#2d3036,#22242a)); --btnTxt: var(--pgr-btnTxt, var(--txt)); --ok: oklch(.70 .18 145); --okBg: oklch(.70 .18 145 / .14); --err: oklch(.68 .16 22); --errBg: oklch(.62 .17 22 / .11); --muted: var(--dim); color-scheme: dark; color: var(--txt); font-family: var(--pgr-font, 'Outfit', system-ui, sans-serif); -webkit-font-smoothing: antialiased; }
.pq-gfig .gid-solo-hud-lives { display: inline-flex; gap: 2px; }
.pq-gfig .pq-heart-empty { filter: grayscale(1) brightness(0.35); opacity: 0.6; }
.pq-gfig .pq-hud-diff.diff-medium { color: oklch(0.78 0.15 70); }
.pq-gfig .pq-hud-diff { font-size: 0.78em; font-weight: 600; }
.pq-gfig .gid-game-roundof { text-align: center; font-family: var(--qz-font-display); font-weight: 800; font-size: 12px; color: var(--qz-text-soft); line-height: 1.2; margin-bottom: -6px; }
.pq-gfig .gid-game-roundof:empty { display: none; }
.pq-gfig .gid-game-chips { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pq-gfig .gid-game-chips > .qz-chip { flex: 0 0 auto; padding-left: 10px; padding-right: 10px; }
.pq-gfig .gid-game-chips > .qz-chip--turn { flex: 0 1 auto; min-width: 0px; text-overflow: clip; }
.pq-gfig .gid-game-chips > .qz-chip--kind { cursor: pointer; }
.qz { --qz-font-display: 'Poppins', sans-serif; --qz-font-body: 'Manrope', sans-serif; --qz-bg-0: #0c1a3a; --qz-bg-1: #14285e; --qz-bg-2: #1e3a8a; --qz-accent: #60a5fa; --qz-accent-hover: #3b82f6; --qz-on-accent: #0c1a3a; --qz-text: #ffffff; --qz-text-soft: #dbeafe; --qz-text-desc: #dbeafe; --qz-text-dim: #8ca3d1; --qz-perk-1: #60a5fa; --qz-perk-2: #3b82f6; --qz-perk-3: #2563eb; --qz-good: #4ade80; --qz-good-soft: rgba(74, 222, 128, .12); --qz-bad: #dc2626; --qz-bad-soft: rgba(220, 38, 38, .14); --qz-bad-border: #f87171; --qz-bad-text: #f3a5a5; --qz-warn: #facc15; --qz-timer-low: #ef4444; --qz-window-bg: linear-gradient(160deg, var(--qz-bg-0) 0%, var(--qz-bg-1) 45%, var(--qz-bg-2) 100%); --qz-card-bg: rgba(0, 0, 0, .18); --qz-chip-bg: rgba(0, 0, 0, .2); --qz-option-bg: rgba(255, 255, 255, .08); --qz-option-locked-bg: rgba(255, 255, 255, .03); --qz-option-locked-border: rgba(255, 255, 255, .12); --qz-option-locked-text: #5b6b8c; --qz-row-bg: rgba(255, 255, 255, .05); --qz-track-bg: rgba(255, 255, 255, .15); --qz-dot-off: rgba(255, 255, 255, .25); --qz-divider: rgba(255, 255, 255, .15); --qz-disabled-bg: rgba(0, 0, 0, .18); --qz-disabled-border: rgba(255, 255, 255, .08); --qz-disabled-text: #5b6b8c; --qz-timer-ring-bg: rgba(0, 0, 0, .3); --qz-window-shadow: 0 20px 40px rgba(0, 0, 0, .35); --qz-accent-glow: 0 0 10px rgba(74, 222, 128, .7); --qz-radius-window: 32px; --qz-radius-card: 24px; --qz-radius-option: 18px; --qz-radius-chip: 20px; --qz-radius-row: 16px; --qz-radius-perk: 14px; --qz-border-w: 2px; --qz-perk-size: 46px; --qz-perk-desc-h: 74px; --qz-timer-h: 6px; --qz-ready-ring: 40px; }
.qz[data-qz-scheme="science"] { --qz-bg-0: #052e16; --qz-bg-1: #14532d; --qz-bg-2: #166534; --qz-accent: #4ade80; --qz-accent-hover: #22c55e; --qz-on-accent: #052e16; --qz-text-soft: #dcfce7; --qz-text-desc: #bbf7d0; --qz-perk-1: #4ade80; --qz-perk-2: #22c55e; --qz-perk-3: #84cc16; --qz-accent-glow: 0 0 10px rgba(74, 222, 128, .7); }
.qz[data-qz-scheme="sports"] { --qz-bg-0: #451a03; --qz-bg-1: #92400e; --qz-bg-2: #b45309; --qz-accent: #facc15; --qz-accent-hover: #eab308; --qz-on-accent: #451a03; --qz-text-soft: #fef9c3; --qz-text-desc: #fef08a; --qz-perk-1: #facc15; --qz-perk-2: #f59e0b; --qz-perk-3: #fb923c; --qz-accent-glow: 0 0 10px rgba(250, 204, 21, .7); }
.qz[data-qz-scheme="history"] { --qz-bg-0: #450a0a; --qz-bg-1: #7f1d1d; --qz-bg-2: #991b1b; --qz-accent: #fbbf24; --qz-accent-hover: #d97706; --qz-on-accent: #450a0a; --qz-text-soft: #fef3c7; --qz-text-desc: #fde68a; --qz-perk-1: #fbbf24; --qz-perk-2: #f59e0b; --qz-perk-3: #ea580c; --qz-accent-glow: 0 0 10px rgba(251, 191, 36, .7); }
.qz[data-qz-scheme="food"] { --qz-bg-0: #2c1810; --qz-bg-1: #5c3a21; --qz-bg-2: #7c4a24; --qz-accent: #f4a340; --qz-accent-hover: #d97b25; --qz-on-accent: #2c1810; --qz-text-soft: #fde8c9; --qz-text-desc: #fbd9a5; --qz-perk-1: #f4a340; --qz-perk-2: #c17f39; --qz-perk-3: #a85f2b; --qz-accent-glow: 0 0 10px rgba(244, 163, 64, .7); }
.qz[data-qz-scheme="terra"] { --qz-bg-0: #1c1917; --qz-bg-1: #33291a; --qz-bg-2: #4d3f25; --qz-accent: #a3e635; --qz-accent-hover: #84cc16; --qz-on-accent: #1c1917; --qz-text-soft: #f7fee7; --qz-text-desc: #ecfccb; --qz-perk-1: #a3e635; --qz-perk-2: #84cc16; --qz-perk-3: #ca8a04; --qz-accent-glow: 0 0 10px rgba(163, 230, 53, .7); }
.qz[data-qz-scheme="other"] { --qz-bg-0: #0c1a3a; --qz-bg-1: #14285e; --qz-bg-2: #1e3a8a; --qz-accent: #60a5fa; --qz-accent-hover: #3b82f6; --qz-on-accent: #0c1a3a; --qz-text-soft: #dbeafe; --qz-text-desc: #dbeafe; --qz-perk-1: #60a5fa; --qz-perk-2: #3b82f6; --qz-perk-3: #2563eb; --qz-accent-glow: 0 0 10px rgba(96, 165, 250, .7); }
.qz[data-qz-scheme="teal"] { --qz-bg-0: #042f2e; --qz-bg-1: #0f4c4a; --qz-bg-2: #0f766e; --qz-accent: #2dd4bf; --qz-accent-hover: #14b8a6; --qz-on-accent: #042f2e; --qz-text-soft: #ccfbf1; --qz-text-desc: #99f6e4; --qz-perk-1: #2dd4bf; --qz-perk-2: #14b8a6; --qz-perk-3: #0d9488; --qz-accent-glow: 0 0 10px rgba(45, 212, 191, .7); }
.qz[data-qz-scheme="electric"] { --qz-bg-0: #000022; --qz-bg-1: #000a5c; --qz-bg-2: #0004ff; --qz-accent: #ff7b00; --qz-accent-hover: #84ff00; --qz-on-accent: #000022; --qz-text-soft: #ffd9b3; --qz-text-desc: #ffd9b3; --qz-perk-1: #ff7b00; --qz-perk-2: #84ff00; --qz-perk-3: #0004ff; --qz-accent-glow: 0 0 10px rgba(255, 123, 0, .7); }
.qz[data-qz-scheme="neon"] { --qz-bg-0: #0a0014; --qz-bg-1: #1a0a2e; --qz-bg-2: #2b0a3d; --qz-accent: #ff00f7; --qz-accent-hover: #f7ff00; --qz-on-accent: #0a0014; --qz-text-soft: #ffd6fb; --qz-text-desc: #ffd6fb; --qz-perk-1: #ff00f7; --qz-perk-2: #00f7ff; --qz-perk-3: #f7ff00; --qz-accent-glow: 0 0 10px rgba(255, 0, 247, .7); }
.qz[data-qz-scheme="magenta"] { --qz-bg-0: #22011a; --qz-bg-1: #3a0166; --qz-bg-2: #440381; --qz-accent: #ec368d; --qz-accent-hover: #d61f78; --qz-on-accent: #22011a; --qz-text-soft: #ffd3e6; --qz-text-desc: #ffd3e6; --qz-perk-1: #ec368d; --qz-perk-2: #51e5ff; --qz-perk-3: #ffa5a5; --qz-accent-glow: 0 0 10px rgba(236, 54, 141, .7); }
.qz[data-qz-scheme="dusk"] { --qz-bg-0: #030027; --qz-bg-1: #0d1230; --qz-bg-2: #151e3f; --qz-accent: #c16e70; --qz-accent-hover: #a85557; --qz-on-accent: #030027; --qz-text-soft: #f2d6d6; --qz-text-desc: #f2d6d6; --qz-perk-1: #c16e70; --qz-perk-2: #dc9e82; --qz-perk-3: #f2f3d9; --qz-accent-glow: 0 0 10px rgba(193, 110, 112, .7); }
.qz[data-qz-scheme="crimson"] { --qz-bg-0: #230007; --qz-bg-1: #3a0006; --qz-bg-2: #5a0002; --qz-accent: #a40606; --qz-accent-hover: #870505; --qz-on-accent: #ffd0d0; --qz-text-soft: #ffd0d0; --qz-text-desc: #ffd0d0; --qz-perk-1: #a40606; --qz-perk-2: #d98324; --qz-perk-3: #d7cf07; --qz-accent-glow: 0 0 10px rgba(164, 6, 6, .7); }
.qz[data-qz-scheme="cherry"] { --qz-bg-0: #3d0d1f; --qz-bg-1: #6b1330; --qz-bg-2: #a11d3f; --qz-accent: #e0115f; --qz-accent-hover: #ba0e4f; --qz-on-accent: #ffd6e4; --qz-text-soft: #ffd6e4; --qz-text-desc: #ffd6e4; --qz-perk-1: #e0115f; --qz-perk-2: #4a7c3f; --qz-perk-3: #fff1e6; --qz-accent-glow: 0 0 10px rgba(224, 17, 95, .7); }
.qz-window { width: 100%; border-radius: var(--qz-radius-window); padding: 20px; background: var(--qz-window-bg); box-shadow: var(--qz-window-shadow); display: flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden; user-select: none; font-family: var(--qz-font-body); box-sizing: border-box; color: var(--qz-text); }
.qz-chips { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.qz-chips > :nth-child(1) { justify-self: start; }
.qz-chips > :nth-child(2) { justify-self: center; }
.qz-chips > :nth-child(3) { justify-self: end; }
.qz-chip { font-family: var(--qz-font-display); font-weight: 800; font-size: 12px; padding: 6px 13px; border-radius: var(--qz-radius-chip); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 128px; box-sizing: border-box; background: var(--qz-chip-bg); border: var(--qz-border-w) solid var(--qz-accent); color: var(--qz-text-soft); }
.qz-chip--solid { background: var(--qz-accent); color: var(--qz-on-accent); border-color: var(--qz-accent); font-weight: 900; }
.qz-hearts { display: flex; justify-content: center; gap: 4px; font-size: 17px; line-height: 1; min-height: 20px; }
.qz-dots { display: flex; justify-content: center; gap: 6px; font-size: 14px; line-height: 1; min-height: 15px; }
.qz-dot-on { color: var(--qz-accent); }
.qz-dot-off { color: var(--qz-dot-off); }
.qz-qcard { background: var(--qz-card-bg); border: var(--qz-border-w) solid var(--qz-accent); border-radius: var(--qz-radius-card); padding: 18px 16px 14px; text-align: center; display: flex; flex-direction: column; gap: 14px; }
.qz-question { margin: 0px; font-family: var(--qz-font-display); font-size: 19px; font-weight: 800; color: var(--qz-text); line-height: 1.32; overflow-wrap: break-word; }
.qz-timer { width: 100%; height: var(--qz-timer-h); border-radius: 3px; background: var(--qz-track-bg); overflow: hidden; }
.qz-timer-fill { width: 100%; height: 100%; border-radius: 3px; background: var(--qz-accent); box-shadow: var(--qz-accent-glow); transition: width 0.25s linear, background 0.3s; }
.qz-opts { display: flex; flex-direction: column; gap: 10px; }
.qz-opt { width: 100%; min-height: 54px; padding: 13px 14px; border-radius: var(--qz-radius-option); background: var(--qz-option-bg); border: var(--qz-border-w) solid var(--qz-accent); color: var(--qz-text); font-weight: 700; font-size: 15px; font-family: var(--qz-font-body); display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left; transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.3s; box-sizing: border-box; }
.qz-opt-badge { width: 24px; height: 24px; border-radius: 50%; background: var(--qz-accent); color: var(--qz-on-accent); font-size: 12px; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--qz-font-display); }
.qz-opt .qz-opt-text { flex: 1 1 0%; min-width: 0px; overflow-wrap: break-word; }
.qz-opt-score { font-size: 11.5px; font-weight: 800; white-space: nowrap; flex-shrink: 0; font-family: var(--qz-font-display); }
.qz-opt.chosen { border-color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.16); }
.qz-opt.correct { border-color: var(--qz-good); background: var(--qz-good-soft); color: var(--qz-good); font-weight: 800; }
.qz-opt.correct .qz-opt-badge { background: var(--qz-good); color: var(--qz-on-accent); }
.qz-opt.wrong { border-color: var(--qz-bad-border); background: var(--qz-bad-soft); color: var(--qz-bad-text); font-weight: 800; }
.qz-opt.wrong .qz-opt-badge { background: var(--qz-bad); color: rgb(255, 255, 255); }
.qz-opt:disabled:not(.chosen):not(.correct):not(.wrong) { background: var(--qz-option-locked-bg); border-color: var(--qz-option-locked-border); color: var(--qz-option-locked-text); cursor: not-allowed; }
.qz-opt:disabled:not(.chosen):not(.correct):not(.wrong) .qz-opt-badge { background: var(--qz-track-bg); color: var(--qz-text-dim); }
.qz-perkbar { border-top: var(--qz-border-w) solid var(--qz-divider); padding-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.qz-perks { display: flex; gap: 12px; }
.qz-perk { width: var(--qz-perk-size); height: var(--qz-perk-size); border-radius: var(--qz-radius-perk); display: flex; align-items: center; justify-content: center; font-size: 19px; cursor: pointer; border: 2px solid transparent; box-sizing: border-box; transition: transform 0.15s; }
.qz-perk--1 { background: var(--qz-perk-1); }
.qz-perk--2 { background: var(--qz-perk-2); }
.qz-perk--3 { background: var(--qz-perk-3); }
.qz-perk--selected { border-color: rgb(255, 255, 255); box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 0px 2px; }
.qz-perk--empty { background: transparent; border: 2px dashed var(--qz-dot-off); cursor: default; }
.qz-perkdesc { height: var(--qz-perk-desc-h); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.qz-perkdesc-title { font-family: var(--qz-font-display); font-weight: 800; font-size: 13.5px; color: var(--qz-text); }
.qz-perkdesc-body { color: var(--qz-text-desc); font-size: 12px; line-height: 1.4; max-width: 280px; margin-top: 2px; }
.qz-status { min-height: 20px; text-align: center; color: var(--qz-text-dim); font-size: 13.5px; font-weight: 600; }
.qz-marq { display: inline-block; white-space: nowrap; will-change: transform; }