/* Organic quiz theme, isolated from the Painter workspace and spot editor. */
.quiz-reskin {
  color-scheme: light;
  --bg: #f5ead8; --fg: #201e1d; --card: #ebddc5; --muted: #645c50;
  --line: #dcd3c4; --accent: #c67139; --sage: #728157; --wrong: #b66f68; --neutral: #a19786;
  --shadow-sm: 0 1px 2px #2e2b2524;
  --shadow-md: 0 3px 10px #2e2b2529;
  --shadow-lg: 0 12px 32px #2e2b2538;
  font-family: Figtree, sans-serif;
  min-height: 100svh;
}
.quiz-reskin .wrap { max-width: 1180px; padding: 17.6px max(16px, 4vw, env(safe-area-inset-right)) max(35.2px, env(safe-area-inset-bottom)) max(16px, 4vw, env(safe-area-inset-left)); }
.quiz-reskin h2, .quiz-reskin h3, .quiz-reskin h4, .quiz-result > strong { font-family: Caprasimo, Georgia, serif; font-weight: 400; }
.quiz-reskin .quiz-heading { margin: 0 0 26.4px; gap: 16px; flex-wrap: wrap; }
.quiz-brand { display: flex; align-items: center; gap: 13.2px; }
.quiz-brand > span { font-size: 30px; line-height: 1; }
.quiz-reskin .quiz-brand h2 { font-size: 22px; margin: 0; line-height: 1.1; }
.quiz-reskin .quiz-progress { display: flex; gap: 6px; padding: 0; border: 0; }
.progress-dot { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--line); }
.progress-dot.current { background: var(--fg); }
.quiz-reskin .match { background: var(--sage); }
.quiz-reskin .miss { background: var(--wrong); }
.quiz-reskin .quiz { margin: 0; padding: 0; }
.quiz-play { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(20px, 3vw, 40px); align-items: start; }
.quiz-reskin .quiz-photo { margin: 0; display: flex; justify-content: center; background: var(--card); border-radius: 28px; box-shadow: var(--shadow-md); overflow: hidden; }
.quiz-reskin .quiz-image { border-radius: 0; }
.quiz-reskin .quiz-photo .quiz-image { width: 100%; }
.quiz-reskin .quiz-photo img { width: 100%; max-width: 100%; height: min(70vh, 640px); height: min(70svh, 640px); max-height: none; object-fit: cover; }
.quiz-reskin .quiz-target { width: clamp(40px, 7vw, 60px); border: 4px solid #f9f4ed; box-shadow: var(--shadow-lg); }
.quiz-reskin .quiz-target-label { font: 600 13px/1.2 Figtree, sans-serif; padding: 5px 12px; border-radius: 999px; background: #f9f4ed; box-shadow: var(--shadow-md); bottom: calc(100% + 8px); }
.quiz-reskin .quiz-target-label::after { display: none; }
.quiz-reskin .quiz-target[data-vertical="below"] .quiz-target-label { top: calc(100% + 8px); bottom: auto; }
.quiz-reskin .quiz-target[data-align="right"] .quiz-target-label { left: auto; right: -4px; transform: none; }
.quiz-reskin .quiz-target[data-align="left"] .quiz-target-label { left: -4px; transform: none; }
.quiz-reskin .quiz-study, .quiz-reskin .quiz-answer { max-width: none; margin: 0; min-width: 0; padding: clamp(20px, 3vw, 36px); background: var(--card); border-radius: 28px; text-align: left; }
.quiz-reskin .quiz-question, .quiz-reskin .quiz-answer h3, .quiz-result > strong { display: block; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.05; letter-spacing: normal; text-transform: none; text-align: left; text-wrap: balance; margin: 0 0 26.4px; color: var(--fg); }
.quiz-reskin .btn { border-radius: 999px; padding: 14px 26px; font: 600 16px/1.2 Figtree, sans-serif; min-height: 48px; width: auto; background: transparent; gap: 10px; }
.quiz-reskin .btn:hover { background: #201e1d12; color: var(--fg); border-color: var(--muted); }
.quiz-reskin .btn:active { background: #201e1d24; }
.quiz-reskin .quiz-primary { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.quiz-reskin .quiz-primary:hover { background: #b2622d; border-color: #b2622d; color: var(--bg); filter: none; }
.quiz-reskin .quiz-primary:active { background: #8c491a; }
.quiz-reskin .quiz-study > .quiz-primary { margin-top: 0; }
.quiz-reskin :focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.quiz-reskin .quiz-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.6vw, 16px); margin: 0 0 26.4px; }
.quiz-reskin .quiz-option { background: transparent; border: 0; padding: 0; border-radius: 6px; min-height: 44px; font: inherit; color: #474238; }
.quiz-reskin .option-color { width: 50%; margin: 0 auto 8px; border-radius: 50%; box-shadow: var(--shadow-sm); transition: transform .15s; }
.quiz-reskin .quiz-option:hover .option-color { transform: scale(1.04); }
.quiz-reskin .quiz-option[aria-checked="true"] { box-shadow: none; }
.quiz-reskin .quiz-option[aria-checked="true"] .option-color { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--fg); }
.quiz-reskin .quiz-option[aria-checked="true"] { font-weight: 700; }
.quiz-reskin .quiz-result { padding: 0; }
.quiz-reskin .quiz-comparison { max-width: 360px; gap: 6px; font-size: 13px; color: var(--muted); margin: 0 0 17.6px; }
.quiz-reskin .quiz-comparison span { min-width: 0; }
.quiz-reskin .quiz-comparison i { height: 120px; margin-bottom: 8.8px; border-radius: 0; border: 0; box-shadow: var(--shadow-sm); }
.quiz-reskin .quiz-comparison span:first-child i { border-radius: 28px 0 0 28px; }
.quiz-reskin .quiz-comparison span:last-child i { border-radius: 0 28px 28px 0; }
.quiz-reskin .quiz-comparison span:last-child { text-indent: 12px; }
.quiz-reskin .quiz-result .hint { font-size: 14px; margin: 0 0 17.6px; }
.quiz-reskin .quiz-summary { max-width: none; margin: 0; }
.quiz-reskin .quiz-eyebrow { display: inline-block; border-radius: 999px; padding: 5px 14px; background: #fff2eb; color: #643312; text-transform: none; letter-spacing: normal; font-size: 13px; }
.quiz-reskin .quiz-summary h3 { max-width: 720px; font-size: clamp(38px, 6.5vw, 72px); line-height: 1; margin: 17.6px 0; }
.quiz-reskin .quiz-recap { max-width: 720px; font-size: 18px; line-height: 1.55; color: #474238; }
.quiz-reskin .quiz-marks { display: flex; gap: 8px; margin: 20px 0 12px; }
.result-dot { display: block; width: 30px; height: 30px; border-radius: 50%; }
.quiz-legend { display: flex; gap: 13.2px; flex-wrap: wrap; }
.quiz-legend span { display: inline-flex; align-items: center; gap: 6px; }
.quiz-legend i { width: 10px; height: 10px; border-radius: 50%; }
.quiz-reskin .quiz-personal { font-size: 16px; font-weight: 600; color: var(--fg); }
.quiz-reskin .result-actions { flex-direction: row; gap: 13.2px; }
.quiz-reskin .result-actions .btn { width: auto; }
.quiz-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(16px, 2.5vw, 28px); align-items: start; margin-top: 35.2px; }
.quiz-reskin .quiz-community, .quiz-reskin .quiz-peer-review { margin: 0; padding: clamp(20px, 3vw, 32px); border: 0; border-radius: 28px; background: var(--card); min-width: 0; }
.quiz-reskin .quiz-summary h4 { font-size: 24px; line-height: 1.2; margin: 0 0 17.6px; }
.quiz-reskin .distribution-row { grid-template-columns: 36px minmax(0, 1fr) 28px; gap: 13.2px; font-size: 14px; margin: 10px 0; }
.quiz-reskin meter { appearance: none; background: #eee7db; height: 14px; border: 0; border-radius: 999px; overflow: hidden; }
.quiz-reskin meter::-webkit-meter-bar { background: #eee7db; border: 0; height: 14px; border-radius: 999px; }
.quiz-reskin meter::-webkit-meter-optimum-value { background: var(--neutral); border-radius: 999px; }
.quiz-reskin meter::-moz-meter-bar { background: var(--neutral); }
.quiz-reskin .your-score meter::-webkit-meter-optimum-value { background: var(--accent); }
.quiz-reskin .your-score meter::-moz-meter-bar { background: var(--accent); }
.quiz-reskin .quiz-peer { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 6px 13.2px; border: 0; padding: 0; margin-top: 22px; }
.quiz-peer-photo { grid-row: span 3; position: relative; align-self: start; border-radius: 16px; overflow: hidden; }
.quiz-peer-photo img { display: block; width: 88px; aspect-ratio: 4/3; object-fit: cover; }
.quiz-reskin .peer-swatches { grid-column: 2; grid-row: 2; float: none; margin: 0; gap: 8px; }
.quiz-reskin .peer-swatches span { width: 22px; height: 22px; border-radius: 50%; border: 0; }
.quiz-reskin .peer-swatches span:last-child { border: 2px solid var(--sage); }
.quiz-reskin .quiz-peer p { grid-column: 2; font-size: 13px; margin: 0; }
.quiz-reskin .quiz-top-nav { margin-top: 35.2px; padding-top: 17.6px; border-top: 1px solid var(--line); }
.quiz-reskin .quiz-edit-link { font-size: 13px; padding: 10px 18px; }
.quiz-reskin #quizShareStatus { color: #3d472b; }
@media (max-width: 759px) {
  .quiz-reskin .quiz-play { grid-template-columns: minmax(0, 1fr); }
  .quiz-reskin .quiz-photo .quiz-image { width: 100%; }
  .quiz-reskin .quiz-photo img { width: 100%; height: clamp(220px, 42svh, 400px); max-height: none; object-fit: cover; }
  .quiz-reskin .quiz-comparison i { height: 88px; }
  .quiz-reskin .quiz-question, .quiz-reskin .quiz-answer h3, .quiz-result > strong { font-size: clamp(30px, 6vw, 46px); }
  .quiz-reskin .quiz-heading { margin-bottom: 17.6px; }
  .quiz-reskin .btn { padding: 14px 22px; }
  .quiz-reskin .quiz-study > .btn, .quiz-reskin #quizNext, .quiz-reskin #quizCheck { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .quiz-reskin .option-color { transition: none; } }
.quiz-reskin .quiz-comparison b { display: block; font-size: 16px; color: var(--fg); margin-top: 4px; }
.quiz-reskin #quizReady::after, .quiz-reskin #quizCheck::after {
  content: ''; display: inline-block; width: 18px; height: 18px; flex: none;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-7-7 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.quiz-reskin #quizMistakes { margin: 22px 0 0; border-top: 1px solid var(--line); padding-top: 17.6px; }
.quiz-reskin #quizMistakes summary { cursor: pointer; font-weight: 600; }
.quiz-reskin #quizMistakes h4 { font: 600 15px Figtree, sans-serif; }
.quiz-reskin #quizMistakes .quiz-image { border-radius: 16px; }
.quiz-reskin #quizMistakes img { max-height: 45svh; }
.quiz-reskin #quizMistakes .quiz-target { width: 28px; border-width: 2px; }

@media (max-width: 759px) {
  .quiz-reskin [data-phase="result"] .quiz-photo img { height: clamp(180px, 30vh, 280px); height: clamp(180px, 30svh, 280px); }
}


.quiz-reskin .quiz-question, .quiz-reskin #quizAnswerTitle,
.quiz-reskin .quiz-result > strong, .quiz-reskin #quizSummaryTitle {
  white-space: nowrap;
  text-wrap: nowrap;
  overflow-wrap: normal;
}

.quiz-reskin .quiz-play > .quiz-question { grid-column: 1 / -1; margin: 0; }

.quiz-reskin .quiz-study {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.quiz-reskin .quiz-picks { max-width: 720px; margin: 26.4px 0; }
.quiz-reskin .quiz-picks h4 { font-size: 24px; }
.quiz-picks-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; }
.quiz-picks-table th, .quiz-picks-table td { padding: 12px 6px; text-align: center; border-bottom: 1px solid var(--line); }
.quiz-picks-table th:first-child { text-align: left; width: 44%; }
.quiz-picks-table thead th { color: var(--muted); font-weight: 500; }
.quiz-picks-table tbody th { font-weight: 600; }
.quiz-picks-table small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 3px; }
.quiz-review-swatch { display: inline-block; vertical-align: middle; width: 38px; height: 38px; border-radius: 10px; border: 1px solid #8884; }
.review-correct { color: #3d472b; font-weight: 600; }
.review-missed { color: #974d47; font-weight: 600; }
@media (max-width: 450px) {
  .quiz-picks-table { font-size: 12px; }
  .quiz-picks-table th, .quiz-picks-table td { padding: 10px 3px; }
  .quiz-picks-table th:first-child { width: 40%; }
  .quiz-review-swatch { width: 30px; height: 30px; border-radius: 8px; }
}

.quiz-leaderboard-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 20px; }
.quiz-leaderboard-table th, .quiz-leaderboard-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.quiz-leaderboard-table th { color: var(--muted); font-size: 12px; font-weight: 500; }
.quiz-leaderboard-table td:last-child, .quiz-leaderboard-table th:last-child { text-align: right; }
.quiz-leaderboard-table .your-score { color: #643312; font-weight: 700; }