/* A colourful, playful ledger using local fonts and CSS-only decoration. */
:root {
  --page: #FFFFFF;
  --panel: #F5F2FF;
  --text: #252039;
  --primary: #6841C6;
  --secondary: #AC4328;
  --border: #DDD5EE;
  --primary-dark: #48268F;
  --primary-light: #EEE7FF;
  --mint: #DDF5E9;
  --peach: #FFE6D3;
  --yellow: #FFF1B8;
  --pink: #FBE2EE;
  --sky: #E3F1FF;
  --unit: 8px;
  --section-space: 64px;
  --page-padding: 40px;
  --cookie-banner-height: 0px;
}

/* Reset and typography */
* { box-sizing: border-box; }
html {
  color-scheme: light;
  scroll-behavior: auto;
  scroll-padding-bottom: calc(var(--cookie-banner-height) + 16px);
}
body {
  margin: 0;
  padding-bottom: var(--cookie-banner-height);
  background: #FFFCF8;
  background-image:
    radial-gradient(ellipse at 0 0, #EEE5FF 0, transparent 44rem),
    radial-gradient(ellipse at 100% 32rem, #FFF0D5 0, transparent 36rem);
  background-repeat: no-repeat;
  color: var(--text);
  font: 17px/1.65 "Trebuchet MS", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
[hidden] { display: none !important; }
h1, h2, h3 {
  font-family: "Trebuchet MS", Arial, sans-serif;
  line-height: 1.15;
  margin: 0 0 24px;
  letter-spacing: -.035em;
}
h1 { font-size: 48px; font-weight: 700; max-width: 22ch; color: #392264; }
h2 { font-size: 30px; }
h3 { font-size: 23px; }
p { margin: 0 0 16px; color: var(--text); }
p, li, dd { max-width: 72ch; }
ul, ol { padding-left: 24px; margin: 16px 0 24px; }
li { margin-bottom: 8px; }
a { color: var(--primary-dark); text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--primary-dark);
  outline-offset: 4px;
}
:target { scroll-margin-top: 24px; }
code { font-size: .92em; overflow-wrap: anywhere; }
small { font-size: 15px; }
figure { margin: 0; }
::selection { color: #302044; background: #F9DA8C; }

/* Header and navigation */
.site-header, .site-footer, .page-grid, .reading-page {
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
  padding-inline: var(--page-padding);
}
.site-header { padding-top: 32px; }
.masthead {
  display: inline-block;
  color: #48268F;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 28px;
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
  letter-spacing: -.045em;
}
.masthead::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 13px;
  border-radius: 6px;
  background: #7951D3;
  box-shadow: 6px 5px 0 #F6BF64;
  transform: rotate(-12deg);
  vertical-align: 1px;
}
.site-label { margin: 6px 0 24px; font-size: 15px; color: #595069; }
.primary-nav {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--border);
  gap: 8px;
  padding: 8px;
  border-radius: 20px;
  background: rgb(255 255 255 / 90%);
  box-shadow: 0 6px 0 rgb(104 65 198 / 5%);
}
.primary-nav a {
  padding: 12px 24px;
  min-height: 48px;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 13px;
  font-weight: 700;
  color: var(--text);
}
.primary-nav a:first-child { padding-left: 24px; }
.primary-nav a[aria-current="page"] {
  border-color: var(--primary-dark);
  background: var(--primary);
  color: #FFFFFF;
  box-shadow: 0 3px 0 #48268F;
}
.primary-nav a:hover { background: var(--yellow); }
.primary-nav a[aria-current="page"]:hover { background: var(--primary-dark); }
.skip-link {
  position: absolute;
  left: 16px;
  top: -160px;
  z-index: 5;
  padding: 16px;
  background: var(--page);
  border: 2px solid var(--primary-dark);
  border-radius: 12px;
}
.skip-link:focus { top: 8px; }

/* Layout and reading columns */
.page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 176px;
  gap: 32px;
  padding-top: 48px;
}
main { min-width: 0; }
main > section, .reading-page > article { margin-bottom: var(--section-space); }
.opening { margin-bottom: 24px; }
.intro { font-size: 19px; max-width: 70ch; }
.eyebrow {
  color: var(--primary-dark);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 16px;
}
.coverage {
  border: 1px solid #CFDFD5;
  border-radius: 14px;
  background: var(--mint);
  padding: 16px 20px;
  font-size: 15px;
  max-width: none;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}
.section-heading h2 { margin-bottom: 0; }
.method-rail {
  border: 1px solid #E6D19A;
  border-radius: 20px;
  padding: 20px 16px;
  background: var(--yellow);
  box-shadow: 5px 6px 0 rgb(232 180 76 / 13%);
  font-size: 15px;
  align-self: start;
}
.method-rail h2 {
  font-size: 21px;
  border-top: 4px solid #C38C25;
  padding-top: 16px;
}
.method-rail a { font-weight: 700; }
.reading-page {
  max-width: calc(720px + 2 * var(--page-padding));
  padding-top: 48px;
  padding-bottom: 16px;
}
.reading-page h1 { max-width: none; }
.reading-page > .contents { margin: 32px 0 48px; }
.contents {
  background: var(--panel);
  padding: 24px;
  border: 1px solid var(--border);
  border-top: 5px solid var(--primary);
  border-radius: 20px;
}
.contents ol { margin: 8px 0 0; }
.contents a, .route-list a, .record-links a {
  display: inline-block;
  padding-block: 6px;
}
.reading-page article { border-top: 1px solid var(--border); padding-top: 32px; }
.reading-page section h2 { margin-top: 0; }

/* Ledger records and tables */
.table-cue { font-size: 15px; margin-bottom: 8px; color: #595069; }
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #FFFFFF;
  margin-bottom: 24px;
  overscroll-behavior-inline: contain;
  box-shadow: 0 7px 0 rgb(104 65 198 / 4%);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
}
caption {
  text-align: left;
  font-weight: 700;
  padding: 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
th, td {
  padding: 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
th:last-child, td:last-child { border-right: 0; }
tbody tr:last-child > * { border-bottom: 0; }
thead th {
  background: #EDE5FD;
  color: #422471;
  font-weight: 700;
}
tbody th { font-weight: 400; }
tbody tr:nth-child(even) { background: #FCFAFF; }
tfoot th, tfoot td {
  border-top: 2px solid var(--border);
  background: var(--mint);
  font-weight: 700;
}
.results-table { min-width: 780px; }
#archive-table { min-width: 960px; }
.results-table tbody th { min-width: 180px; }
.numbers { white-space: nowrap; font-weight: 700; letter-spacing: .02em; }
.euro-cell { border-left: 2px solid #E9C58F; background: #FFF9EB; }
.newest > :first-child { border-left: 4px solid var(--primary); }
.record-label, .snapshot-label { display: block; margin-top: 8px; font-size: 13px; }
.record-label {
  width: fit-content;
  padding: 3px 9px;
  border-radius: 8px;
  background: var(--mint);
  font-weight: 700;
  color: #20523F;
}
.snapshot-label { color: #595069; }
.results-table tr:target > * { background: var(--primary-light); }
.source-note { font-size: 15px; max-width: 78ch; }
.scope-note {
  border-left: 4px solid var(--primary);
  border-radius: 0 12px 12px 0;
  background: var(--panel);
  padding: 14px 18px;
}
.pool-legend {
  margin: 0 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}
.pool-legend > div { padding: 24px; background: var(--primary-light); }
.pool-legend > div + div { border-left: 1px solid var(--border); background: var(--yellow); }
dt { font-weight: 700; margin-bottom: 8px; }
dd { margin: 0; }
.frequency-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.frequency-table { min-width: 240px; }
.frequency-table th, .frequency-table td { padding: 8px 16px; }
.frequency-table tbody td { font-weight: 700; color: var(--primary-dark); }
.sample-chart {
  padding: 24px;
  margin: 24px 0;
  background: #EDF7F4;
  border: 1px solid #CBE2DA;
  border-radius: 20px;
}
.sample-chart figcaption { font-weight: 700; margin-bottom: 24px; }
.chart-row {
  display: grid;
  grid-template-columns: 150px minmax(32px, 1fr) 24px;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}
.bar-track {
  display: block;
  height: 24px;
  background: var(--page);
  border: 1px solid #CADDD6;
  border-radius: 8px;
  overflow: hidden;
}
.bar {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #6841C6, #A57DE4);
  border-radius: 7px;
}
.bar.half { width: 50%; }
.bar.secondary { background: linear-gradient(90deg, #C76439, #EDAD62); }
.sample-chart p { font-size: 15px; margin-bottom: 0; }
.method-list { list-style: decimal-leading-zero; }
.method-list li {
  border-top: 1px solid var(--border);
  padding: 16px 0 8px 8px;
}
.method-list li::marker { color: var(--primary-dark); font-weight: 700; }
.source-register { list-style: decimal-leading-zero; }
.source-register li { padding: 16px 0; border-top: 1px solid var(--border); }
.source-register p { font-size: 15px; margin: 8px 0 0; }

/* Local tools */
.tool-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 5px solid #A68AD8;
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 24px;
}
.filter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
label { display: block; font-weight: 700; margin: 16px 0 8px; }
input, select, textarea, button {
  font: inherit;
  line-height: 1.5;
  color: var(--text);
  border-radius: 12px;
}
input, select, textarea {
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  padding: 12px;
  background: var(--page);
  border: 1px solid #88739F;
}
textarea { resize: vertical; }
fieldset {
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--panel);
  padding: 24px;
  min-width: 0;
  margin: 24px 0;
}
legend { font-weight: 700; padding-inline: 8px; }
fieldset:disabled { opacity: .75; }
button {
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid var(--primary-dark);
  background: var(--primary);
  color: var(--page);
  cursor: pointer;
  font-weight: 700;
  box-shadow: 0 3px 0 var(--primary-dark);
}
button:hover { background: var(--primary-dark); }
button:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }
.secondary-button {
  background: var(--page);
  color: var(--primary-dark);
  box-shadow: 0 3px 0 #DDD1EE;
}
.secondary-button:hover { background: var(--primary-light); }
.button-row { display: flex; flex-wrap: wrap; gap: 16px; margin: 24px 0; }
.field-help, #export-scope, #export-status, #draft-status { font-size: 15px; }
.notice {
  border-left: 4px solid var(--secondary);
  border-radius: 0 14px 14px 0;
  background: var(--peach);
  padding: 16px 24px;
}
.draft-preview {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #FFF9E9;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 16px/1.65 "Trebuchet MS", Arial, sans-serif;
}
.faq-list details {
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-bottom: 12px;
  background: #FFFFFF;
}
.faq-list details:last-child { border-bottom: 1px solid var(--border); }
.faq-list summary {
  padding: 20px;
  min-height: 48px;
  border-radius: 15px;
  font-weight: 700;
  cursor: pointer;
}
.faq-list details p { padding: 16px 20px; }
.faq-list summary::marker { color: var(--primary); }

/* Numbered source-register footer */
.site-footer {
  position: relative;
  border-top: 0;
  border-radius: 28px 28px 0 0;
  background: #EEE7F9;
  padding-top: 40px;
  padding-bottom: 40px;
  margin-top: 32px;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 28px auto;
  height: 7px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(
    90deg,
    #9671D8 0% 20%,
    #E69ABA 20% 40%,
    #EFB679 40% 60%,
    #DEC360 60% 80%,
    #76B99A 80% 100%
  );
}
.footer-name { font-weight: 700; font-size: 23px; color: #48268F; }
.site-footer > p { max-width: 76ch; font-size: 15px; }
.footer-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 40px;
  list-style: decimal-leading-zero;
  padding-left: 32px;
  margin: 24px 0 32px;
}
.footer-links li {
  border-top: 1px solid #D2C5E6;
  margin: 0;
  padding: 8px 0;
  font-size: 15px;
}
.footer-links a { display: inline-block; min-height: 44px; padding-block: 10px; }
.footer-links li::marker { color: var(--primary-dark); font-weight: 700; }

/* Shared, non-modal cookie consent */
.cookie-banner {
  position: fixed;
  inset: auto 0 0;
  z-index: 4;
  max-height: 80vh;
  max-height: 80dvh;
  overflow-y: auto;
  background: #FFF9E9;
  border-top: 4px solid #D7AD4C;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -8px 32px rgb(49 35 65 / 12%);
}
.cookie-banner-inner {
  max-width: 1360px;
  margin-inline: auto;
  padding: 24px var(--page-padding);
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.cookie-banner-copy { flex: 1 1 480px; min-width: 0; }
.cookie-banner h2 { font-size: 23px; margin-bottom: 8px; color: #48268F; }
.cookie-banner p { font-size: 15px; line-height: 1.6; margin-bottom: 0; }
.cookie-banner-actions {
  display: flex;
  flex: 0 1 440px;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.cookie-banner-actions [data-consent-choice] { flex: 1 1 110px; }
.cookie-banner-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px;
  font-size: 15px;
  font-weight: 700;
}
.cookie-close { font-size: 15px; }
.cookie-preference-controls { margin-top: 24px; }
.cookie-settings-button { font-size: 15px; }
.cookie-preference-status { font-size: 15px; margin: 16px 0 0; }
.cookie-preference-status:empty { margin: 0; }

/* Progressive interactions preserve all reading and archive behaviour. */
a {
  transition: color 140ms ease, text-decoration-color 140ms ease;
}
button {
  touch-action: manipulation;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 120ms ease;
}
button:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.primary-nav a {
  transition: background-color 160ms ease, border-color 160ms ease;
}
input, select, textarea {
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 2px var(--primary-light);
}
.contents, .tool-panel, .sample-chart, .pool-legend > div {
  transition: box-shadow 180ms ease, border-color 180ms ease;
}
.contents:focus-within, .tool-panel:focus-within {
  box-shadow: inset 3px 0 0 var(--primary);
}
.results-table tbody > tr > *,
.frequency-table tbody > tr > * {
  transition: background-color 160ms ease;
}
.results-table tbody tr:focus-within > * {
  background-color: var(--primary-light);
}
.number-token {
  display: inline-block;
  position: relative;
  min-width: 30px;
  padding: 3px 6px;
  border: 1px solid #D3C3ED;
  border-radius: 10px;
  background: #EEE6FC;
  color: #48268F;
  text-align: center;
  line-height: 1.6;
  box-shadow: 0 2px 0 #DED1EF;
  transition:
    color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease;
}
.euro-cell .number-token {
  background: #FFE5B1;
  color: #69400D;
  border-color: #E8C27E;
  box-shadow: 0 2px 0 #EBD3A4;
}
.number-token.number-match {
  color: var(--primary-dark);
  background: #DDF5E9;
  box-shadow: 0 0 0 3px #DDF5E9;
  outline: 2px solid var(--primary-dark);
  outline-offset: 2px;
}
.bar { transform-origin: left center; }
.chart-row strong {
  transition: color 160ms ease, transform 160ms ease;
}
.faq-list summary, .number-comparison summary {
  transition: background-color 160ms ease, color 160ms ease;
}
.faq-list details[open] > summary,
.number-comparison[open] > summary {
  color: var(--primary-dark);
  background: var(--primary-light);
}
.number-comparison {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #FFFFFF;
  margin: 0 0 16px;
  font-size: 15px;
}
.number-comparison summary {
  min-height: 48px;
  padding: 12px 16px;
  border-radius: 13px;
  cursor: pointer;
  font-weight: 700;
}
.comparison-body { padding: 16px; }
.comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 640px;
}
.comparison-grid label { margin-top: 0; }
.comparison-actions { margin: 16px 0; }
.comparison-status { margin-bottom: 0; }
.record-copy-button {
  display: block;
  min-height: 44px;
  margin-top: 10px;
  padding: 8px 10px;
  font-size: 13px;
  white-space: nowrap;
}
.record-copy-status {
  font-size: 15px;
  overflow-wrap: anywhere;
}
.record-copy-status:empty { display: none; }

@media (hover: hover) and (pointer: fine) {
  button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 5px 0 rgb(72 38 143 / 22%);
  }
  button:active:not(:disabled) {
    transform: translateY(1px) scale(.985);
    box-shadow: none;
  }
  .contents:hover, .sample-chart:hover {
    box-shadow: 0 6px 18px rgb(72 38 143 / 8%);
  }
  .pool-legend > div:hover {
    box-shadow: inset 0 -3px 0 var(--primary);
  }
  .results-table tbody tr:hover > *,
  .frequency-table tbody tr:hover > * {
    background-color: var(--primary-light);
  }
  .chart-row:hover strong { color: var(--primary-dark); transform: translateY(-1px); }
  .faq-list summary:hover, .number-comparison summary:hover {
    background-color: var(--primary-light);
  }
  .footer-links a:hover, .contents a:hover { text-decoration-thickness: 2px; }
}

/* Lucky Wheel: a self-contained creative break, not a lottery tool. */
.lucky-wheel {
  --wheel-purple: #BFA0E6;
  --wheel-orange: #FFB16A;
  --wheel-yellow: #F8D866;
  --wheel-pink: #EFA9C9;
  --wheel-green: #9BCDAB;
  padding: 32px;
  border: 2px solid #D9C7EE;
  border-radius: 28px;
  background:
    radial-gradient(circle at 96% 8%, #FFE6A6 0 35px, transparent 36px),
    radial-gradient(circle at 2% 96%, #D6F0E1 0 65px, transparent 66px),
    linear-gradient(135deg, #F2E9FF, #FFF3E5);
  box-shadow: 0 8px 0 #EEE2F6;
}
.lucky-wheel-copy .eyebrow {
  color: #624780;
  margin-bottom: 8px;
}
.lucky-wheel h2 {
  margin-bottom: 12px;
  font-size: 34px;
  letter-spacing: -.035em;
  color: #48268F;
}
.lucky-wheel-note {
  color: #54505D;
  font-size: 14px;
  max-width: 74ch;
}
.lucky-wheel-layout {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  align-items: center;
  gap: 40px;
  margin-top: 24px;
}
.lucky-wheel-stage {
  position: relative;
  width: min(100%, 320px);
  aspect-ratio: 1;
  margin: 12px auto;
  padding: 10px;
  border: 1px solid #E2DDE9;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 12px 24px rgb(49 35 65 / 12%);
  isolation: isolate;
}
.lucky-wheel-disc {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    from -36deg,
    var(--wheel-purple) 0deg 71deg,
    #FFFFFF 71deg 72deg,
    var(--wheel-orange) 72deg 143deg,
    #FFFFFF 143deg 144deg,
    var(--wheel-yellow) 144deg 215deg,
    #FFFFFF 215deg 216deg,
    var(--wheel-pink) 216deg 287deg,
    #FFFFFF 287deg 288deg,
    var(--wheel-green) 288deg 359deg,
    #FFFFFF 359deg 360deg
  );
}
.is-spinning .lucky-wheel-disc { will-change: transform; }
.lucky-wheel-pointer {
  position: absolute;
  z-index: 3;
  top: -6px;
  left: 50%;
  width: 26px;
  height: 30px;
  background: #30283C;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform: translateX(-50%);
}
.lucky-wheel-label {
  position: absolute;
  display: block;
  width: 30%;
  text-align: center;
  color: #172121;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}
.lucky-wheel-label-imagine { left: 50%; top: 15%; }
.lucky-wheel-label-explore { left: 83.3%; top: 39.2%; }
.lucky-wheel-label-notice { left: 70.6%; top: 78.3%; }
.lucky-wheel-label-make { left: 29.4%; top: 78.3%; }
.lucky-wheel-label-reset { left: 16.7%; top: 39.2%; }
.lucky-wheel-hub {
  position: absolute;
  z-index: 2;
  inset: 36%;
  display: grid;
  place-items: center;
  border: 1px solid rgb(49 35 65 / 10%);
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 3px 12px rgb(49 35 65 / 10%);
  text-align: center;
  color: #51435F;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}
.lucky-wheel-controls { min-width: 0; }
.lucky-wheel-invitation {
  max-width: 26ch;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.025em;
}
.lucky-wheel-spin {
  min-width: 180px;
  max-width: 100%;
  border: 1px solid #503570;
  border-radius: 12px;
  background: #503570;
  color: #FFFFFF;
}
.lucky-wheel-spin span { margin-left: 16px; }
.lucky-wheel-spin:hover { background: #3E2859; }
.lucky-wheel-spin:focus-visible { outline-color: #503570; }
.lucky-wheel-spin[aria-disabled="true"],
.lucky-wheel-spin[aria-disabled="true"]:hover,
.lucky-wheel-spin[aria-disabled="true"]:active {
  background: #675779;
  border-color: #675779;
  cursor: progress;
  transform: none;
  box-shadow: none;
}
.lucky-wheel-result {
  min-height: 156px;
  margin-top: 24px;
  padding: 18px 20px;
  border: 1px solid #E2DDE9;
  border-left: 4px solid #D8D0E1;
  border-radius: 12px;
  background: #FFFFFF;
}
.lucky-wheel-result.has-result {
  border-left-color: var(--wheel-result-colour, var(--wheel-purple));
}
.lucky-wheel-result-kicker {
  margin-bottom: 8px;
  color: #624780;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.lucky-wheel-result-text {
  margin-bottom: 0;
  font-size: 15px;
  line-height: 1.6;
}
.lucky-wheel-footnote {
  margin: 12px 0 0;
  color: #54505D;
  font-size: 13px;
}
@media (max-width: 767px) {
  .lucky-wheel { padding: 24px; }
  .lucky-wheel-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .lucky-wheel-controls { max-width: 420px; width: 100%; margin-inline: auto; }
  .lucky-wheel-invitation { max-width: none; }
}
@media (max-width: 479px) {
  .lucky-wheel { padding: 20px 16px; border-radius: 18px; }
  .lucky-wheel-spin { width: 100%; }
  .lucky-wheel-label { font-size: 12px; }
  .lucky-wheel-hub { font-size: 10px; }
}
@media (forced-colors: active) {
  .lucky-wheel, .lucky-wheel-stage, .lucky-wheel-hub,
  .lucky-wheel-result, .lucky-wheel-spin {
    border: 1px solid CanvasText;
  }
  .lucky-wheel-pointer { background: CanvasText; }
  .lucky-wheel-disc { border: 1px solid CanvasText; }
  .lucky-wheel-label { color: CanvasText; }
}
@media print {
  .lucky-wheel { display: none !important; }
}

/* Colourful chapter accents without changing content or reading order. */
.opening {
  position: relative;
  padding: 32px;
  border: 1px solid #E2D4EF;
  border-radius: 26px;
  background:
    radial-gradient(circle at 100% 0, #FBE0B9 0 64px, transparent 65px),
    linear-gradient(120deg, #FFFFFF 40%, #F4EDFF);
  box-shadow: 0 8px 0 rgb(104 65 198 / 5%);
}
.opening h1 { position: relative; }
.opening .eyebrow,
.reading-page > .eyebrow {
  width: fit-content;
  max-width: 100%;
  padding: 6px 12px;
  border: 1px solid #DBCDED;
  border-radius: 9px;
  background: #EEE5FC;
}
.opening > :last-child { margin-bottom: 0; }
.section-heading > a {
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--mint);
  color: #20523F;
  font-size: 15px;
  font-weight: 700;
}
#number-pools > h2::before,
#sample-counts > h2::before,
#method-summary > h2::before,
#home-sources > h2::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 22px;
  margin-right: 12px;
  border-radius: 5px;
  background: #A283D8;
  transform: rotate(-10deg);
  vertical-align: -1px;
}
#sample-counts > h2::before { background: #72BFA5; transform: rotate(10deg); }
#method-summary > h2::before { background: #E5AD59; }
#home-sources > h2::before { background: #D68CAF; transform: rotate(10deg); }
#method-summary {
  padding: 28px;
  background: #FFF5D9;
  border: 1px solid #E8D9AF;
  border-radius: 22px;
}
#method-summary .method-list li { border-color: #E8D9AF; }
#method-summary > :last-child { margin-bottom: 0; }
.source-register li::marker { color: #75409B; font-weight: 700; }
.reading-page > section:not(.faq-list),
.reading-page > article {
  padding-top: 24px;
  border-top: 4px solid #D1BDEB;
}
.reading-page > section:nth-of-type(3n + 2),
.reading-page > article:nth-of-type(3n + 2) { border-top-color: #9DD4BD; }
.reading-page > section:nth-of-type(3n),
.reading-page > article:nth-of-type(3n) { border-top-color: #EFBD86; }
.reading-page > article > .eyebrow {
  width: fit-content;
  padding: 4px 10px;
  background: var(--yellow);
  border-radius: 8px;
}
.route-list li::marker, .record-links li::marker { color: #7951BB; }
.route-list a:hover, .record-links a:hover { background: var(--yellow); }
#result-count {
  width: fit-content;
  max-width: 100%;
  padding: 8px 14px;
  border: 1px solid #C5DFD2;
  border-radius: 12px;
  background: var(--mint);
  color: #20523F;
  font-weight: 700;
}
.faq-list details:nth-child(3n + 2) { border-color: #CADFD4; }
.faq-list details:nth-child(3n) { border-color: #EAD3A5; }
.faq-list details:nth-child(3n + 2)[open] > summary { background: var(--mint); color: #20523F; }
.faq-list details:nth-child(3n)[open] > summary { background: var(--yellow); color: #634613; }

/* Required responsive thresholds */
@media (max-width: 1279px) {
  :root { --page-padding: 24px; --section-space: 40px; }
  .page-grid { gap: 24px; padding-top: 40px; }
}
@media (max-width: 999px) {
  .page-grid { grid-template-columns: minmax(0, 1fr); }
  .method-rail { padding: 24px; }
  .method-rail h2 { border-top: 0; padding-top: 0; }
  .method-rail p { max-width: 70ch; }
  .cookie-banner-inner { flex-direction: column; align-items: stretch; gap: 16px; }
  .cookie-banner-copy, .cookie-banner-actions { flex: auto; }
}
@media (max-width: 767px) {
  :root { --page-padding: 16px; --section-space: 28px; }
  body { font-size: 16px; }
  h1 { font-size: 38px; }
  h2 { font-size: 27px; }
  .masthead { font-size: 24px; }
  .masthead::before { width: 14px; height: 14px; margin-right: 10px; }
  .site-header { padding-top: 24px; }
  .primary-nav {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 6px;
    padding: 6px;
    border-radius: 16px;
  }
  .primary-nav a, .primary-nav a:first-child {
    padding: 12px 8px;
    font-size: 15px;
    border-radius: 10px;
  }
  .page-grid, .reading-page { padding-top: 32px; }
  .opening { padding: 24px; border-radius: 22px; }
  .intro { font-size: 17px; }
  .frequency-grid, .filter-grid { grid-template-columns: 1fr; }
  .reading-page > .contents { margin: 24px 0 32px; }
  .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
  .tool-panel, fieldset, .contents, .sample-chart { padding: 16px; }
  .chart-row { grid-template-columns: 120px minmax(32px, 1fr) 20px; gap: 8px; }
  .pool-legend > div { padding: 16px; }
  #method-summary { padding: 20px; }
  .cookie-banner-inner {
    padding-top: 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
}
@media (max-width: 479px) {
  h1 { font-size: 34px; }
  .opening { padding: 20px 16px; }
  .opening .eyebrow { font-size: 12px; }
  .coverage { padding: 14px; }
  .primary-nav a, .primary-nav a:first-child { padding-inline: 5px; font-size: 14px; }
  .pool-legend { grid-template-columns: 1fr; }
  .pool-legend > div + div { border-left: 0; border-top: 1px solid var(--border); }
  .footer-links { grid-template-columns: minmax(0, 1fr); }
  .button-row { flex-direction: column; align-items: stretch; }
  .chart-row { grid-template-columns: 105px minmax(24px, 1fr) 16px; font-size: 15px; }
  .cookie-banner-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cookie-banner-actions button { padding-inline: 12px; }
  .comparison-grid { grid-template-columns: minmax(0, 1fr); }
  .comparison-actions button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  button:hover:not(:disabled), button:active:not(:disabled),
  .chart-row:hover strong { transform: none; }
}
@media (forced-colors: active) {
  body, .opening, .lucky-wheel, .bar, .bar.secondary { background-image: none; }
  .number-token.number-match {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
  .primary-nav a[aria-current="page"] { border-color: Highlight; }
  .bar { background: Highlight; }
  .masthead::before, .site-footer::before,
  #number-pools > h2::before, #sample-counts > h2::before,
  #method-summary > h2::before, #home-sources > h2::before { display: none; }
}
@media print {
  .skip-link, .tool-panel, #feedback-form, .method-rail,
  .cookie-banner, .cookie-preference-controls,
  .number-comparison, .record-copy-button, .record-copy-status {
    display: none !important;
  }
  body { padding-bottom: 0; background: #FFFFFF; color: #000000; }
  .page-grid { display: block; }
  .table-wrap { overflow: visible; box-shadow: none; border-radius: 0; }
  table, #archive-table { min-width: 0; font-size: 10px; }
  th, td { padding: 6px; }
  .site-header, .site-footer, .page-grid, .reading-page {
    max-width: none;
    padding-inline: 0;
  }
  .site-footer, .opening, #method-summary, .contents, .sample-chart {
    background: #FFFFFF;
    box-shadow: none;
    border-radius: 0;
  }
  .site-footer::before, .masthead::before { display: none; }
  a { color: var(--text); }
  .number-token, .euro-cell .number-token, .number-token.number-match {
    min-width: 0;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    box-shadow: none;
    outline: none;
  }
}