.speler {
  --sp-azul: var(--azul, #0C004C);
  --sp-inkt: var(--inkt, #1c1c1e);
  --sp-zacht: var(--zacht, #4d4d55);
  --sp-stil: var(--stil, var(--zacht, #6b6980));
  --sp-accent: var(--accent-zacht, var(--zacht, #554d82));
  --sp-papier: var(--papier, #ffffff);
  --sp-veld: var(--veld, #f2f3fa);
  --sp-lijn: var(--lijn, #cfcde2);
  --sp-noot-bg: var(--balk-bg, #fdf1b8);
  --sp-noot-tekst: var(--balk-tekst, #3b3000);
  --sp-koppen: var(--koppen, "Schibsted Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
  --sp-tekst: var(--tekst, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
  --sp-label: var(--font-label, "Inter", system-ui, sans-serif);
  --sp-warm: #b4532a;
  --sp-hover-papier: var(--sp-lijn);
  --sp-hover-veld: var(--sp-lijn);

  box-sizing: border-box;
  display: grid;
  gap: 16px;
  padding: 20px 18px 18px;
  background: var(--sp-veld);
  color: var(--sp-inkt);
  border: 1px solid var(--sp-lijn);
  border-radius: 0 8px 8px 8px;
  font: 400 16px/1.5 var(--sp-tekst);
}
[data-theme="dark"] .speler { --sp-warm: #e39a72; }
.speler *, .speler *::before, .speler *::after { box-sizing: border-box; }
.speler p, .speler ol, .speler li { margin: 0; padding: 0; }
.speler ol { list-style: none; }

@supports (background: color-mix(in srgb, red 50%, blue)) {
  .speler {
    --sp-hover-papier: color-mix(in srgb, var(--sp-azul) 16%, var(--sp-papier));
    --sp-hover-veld: color-mix(in srgb, var(--sp-azul) 16%, var(--sp-veld));
  }
}
.speler .speler-tijdlijn-lijst { display: flex; flex-wrap: wrap; gap: 8px; }
.speler .speler-moment-knop {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 14px;
  border: 1px solid var(--sp-stil); border-radius: 4px; background: var(--sp-papier); color: var(--sp-zacht);
  font: 400 13px/1.2 var(--sp-label); font-variant-numeric: tabular-nums; letter-spacing: .02em; cursor: pointer;
  transition: color .15s cubic-bezier(.4, 0, .2, 1), border-color .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), box-shadow .15s cubic-bezier(.4, 0, .2, 1);
}
@media (hover: hover) {
  .speler .speler-moment-knop:not([aria-current="step"]):hover { color: var(--sp-azul); background: var(--sp-hover-papier); border-color: var(--sp-inkt); box-shadow: inset 0 0 0 1px var(--sp-inkt); }
}
.speler .speler-moment-knop[aria-disabled="true"]:not([aria-current="step"]) { border-style: dashed; color: var(--sp-zacht); cursor: default; }
.speler .speler-moment-knop[aria-current="step"] {
  background: var(--sp-azul); border-color: var(--sp-azul); color: var(--sp-papier); font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.speler .speler-moment-knop[aria-current="step"]::before {
  content: ""; flex: none; width: 8px; height: 8px; margin-right: 8px; background: currentColor;
}

.speler .speler-doe { display: none; }
.speler.is-actief .speler-doe { display: block; }
.speler .speler-doe-label { display: flex; align-items: center; gap: .5rem; font: 500 12px/1.4 var(--sp-label); letter-spacing: .1em; text-transform: uppercase; color: var(--sp-azul); }
.speler .speler-doe-label .ik { stroke-width: 1.5; }
.speler .speler-doe-regel { margin-top: .5rem; font: 500 16px/1.5 var(--sp-tekst); color: var(--sp-inkt); }

.speler .speler-start { display: grid; justify-items: start; gap: 14px; }
.speler .speler-start-tekst { max-width: 36em; font: 400 17px/1.5 var(--sp-tekst); color: var(--sp-inkt); }

.speler .speler-reeks-les { display: grid; gap: 8px; padding-top: 12px; border-top: 1px dashed var(--sp-stil); }
.speler .speler-reeks-kop { font: 700 17px/1.3 var(--sp-koppen); color: var(--sp-azul); }
.speler .speler-reeks-noot { font-size: 15px; line-height: 1.5; color: var(--sp-zacht); }
.speler .speler-reeks-uitkomst { font: 600 17px/1.45 var(--sp-koppen); color: var(--sp-inkt); }

.speler .speler-lijst { list-style: decimal; padding-left: 1.6em; display: grid; gap: 14px; }
.speler .speler-lijst li { padding-left: .3em; }
.speler .speler-lijst li::marker { font: 500 13px/1.3 var(--sp-label); font-variant-numeric: tabular-nums; color: var(--sp-accent); }
.speler .speler-lijst-moment { display: block; font: 600 12px/1.3 var(--sp-label); font-variant-numeric: tabular-nums; text-transform: uppercase; letter-spacing: .1em; color: var(--sp-accent); }
.speler .speler-lijst-tekst { display: block; font: 600 17px/1.4 var(--sp-koppen); color: var(--sp-inkt); }
.speler .speler-lijst-waarom, .speler .speler-lijst-eind { display: block; margin-top: 6px; font: 400 15px/1.5 var(--sp-tekst); color: var(--sp-inkt); }
.speler .speler-lijst-label { font: 600 12px/1.3 var(--sp-label); text-transform: uppercase; letter-spacing: .1em; color: var(--sp-accent); margin-right: 4px; }
.speler .speler-lijst-eind { font-weight: 600; }

.speler .speler-stappen { display: grid; }
.speler .speler-stap { grid-area: 1 / 1; display: block; visibility: hidden; }
.speler .speler-stap.is-actief { visibility: visible; }
.speler .speler-stap, .speler .speler-stap * { transition-property: none; }
.speler .speler-kopregel { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.speler .speler-moment { display: block; font: 600 12px/1.3 var(--sp-label); font-variant-numeric: tabular-nums; text-transform: uppercase; letter-spacing: .1em; color: var(--sp-accent); }
.speler .speler-nr { flex: none; font: 400 13px/1.3 var(--sp-label); font-variant-numeric: tabular-nums; letter-spacing: .08em; color: var(--sp-accent); }
.speler .speler-tekst { display: block; font: 600 18px/1.4 var(--sp-koppen); color: var(--sp-inkt); }

.speler .speler-waarom { display: block; margin-top: 12px; padding: 10px 14px 12px; border-left: 3px solid var(--sp-accent); border-radius: 0 6px 6px 0; background: var(--sp-papier); }
.speler .speler-waarom-label { display: block; margin-bottom: 2px; font: 600 12px/1.3 var(--sp-label); text-transform: uppercase; letter-spacing: .1em; color: var(--sp-accent); }
.speler .speler-waarom-tekst { display: block; font: 400 16px/1.5 var(--sp-tekst); color: var(--sp-inkt); }

.speler .speler-tellers { display: grid; gap: 14px; }
.speler .speler-teller-kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 6px; }
.speler .speler-naamvak { display: grid; gap: 2px; min-width: 0; }
.speler .speler-naam { font-size: 15px; line-height: 1.3; color: var(--sp-inkt); }
.speler .speler-label { font: 600 12px/1.3 var(--sp-label); text-transform: uppercase; letter-spacing: .1em; color: var(--sp-stil); }
.speler .speler-getal { flex: none; font: 700 30px/1 var(--sp-koppen); font-variant-numeric: tabular-nums; color: var(--sp-azul); }
.speler .speler-getal .ca { font: 600 14px/1 var(--sp-tekst); color: var(--sp-zacht); margin-right: 2px; }
.speler .speler-balk { height: 12px; border-radius: 99px; background: var(--sp-lijn); overflow: hidden; }
.speler .speler-balk span { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--sp-azul); transition: width .35s cubic-bezier(.22, 1, .36, 1); }
.speler .speler-teller:nth-child(even) .speler-balk span {
  background: repeating-linear-gradient(135deg, var(--sp-azul) 0 6px, var(--sp-zacht) 6px 10px);
}

.speler .speler-noot { padding: 10px 14px; border-left: 4px solid var(--sp-noot-tekst); border-radius: 4px 10px 10px 4px; background: var(--sp-noot-bg); color: var(--sp-noot-tekst); font-size: 15px; line-height: 1.4; }

.speler .speler-regelaar { display: grid; gap: 6px; }
.speler .speler-regel-label { font: 700 15px/1.3 var(--sp-koppen); color: var(--sp-inkt); }
.speler input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; min-height: 44px; margin: 0; background: transparent; cursor: pointer; border-radius: 8px; }
.speler input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: var(--sp-zacht); }
.speler input[type="range"]::-moz-range-track { height: 8px; border-radius: 99px; background: var(--sp-zacht); }
.speler input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: var(--sp-azul); border: 4px solid var(--sp-papier); box-shadow: 0 0 0 1px var(--sp-zacht); }
.speler input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--sp-azul); border: 4px solid var(--sp-papier); box-shadow: 0 0 0 1px var(--sp-zacht); }

.speler { --sp-knop: var(--sp-veld); --sp-knop-sterk: var(--sp-lijn); --sp-schaduw: var(--sp-azul); }
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .speler { --sp-knop: color-mix(in srgb, var(--sp-azul) 11%, var(--sp-papier)); --sp-knop-sterk: color-mix(in srgb, var(--sp-azul) 22%, var(--sp-papier)); --sp-schaduw: color-mix(in srgb, var(--sp-azul) 45%, transparent); }
}
.speler [hidden] { display: none !important; }
.speler .speler-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.speler .speler-knop { min-height: 44px; min-width: 44px; padding: 0 20px; border-radius: 4px; border: 1.5px solid var(--sp-azul); background: var(--sp-knop); color: var(--sp-azul); box-shadow: 0 2px 0 var(--sp-schaduw); font: 600 15px/1.2 var(--sp-koppen); cursor: pointer; transition: background-color .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1), border-color .15s cubic-bezier(.4, 0, .2, 1); }
.speler .speler-knop:not([aria-disabled="true"]):active { transform: translateY(1px); box-shadow: 0 1px 0 var(--sp-schaduw); }
.speler .speler-knop-volgende, .speler .speler-knop-hoofd { background: var(--sp-azul); color: var(--sp-papier); box-shadow: none; }
.speler .speler-knop-volgende:not([aria-disabled="true"]):active, .speler .speler-knop-hoofd:not([aria-disabled="true"]):active { box-shadow: none; }
.speler .speler-knop-speel { margin-left: auto; padding: 0 14px; font: 500 14px/1.2 var(--sp-tekst); }
@media (hover: hover) {
  .speler .speler-knop:not([aria-disabled="true"]):hover { background: var(--sp-knop-sterk); }
  .speler .speler-knop-volgende:not([aria-disabled="true"]):hover, .speler .speler-knop-hoofd:not([aria-disabled="true"]):hover { background: var(--sp-knop-sterk); color: var(--sp-azul); }
}
.speler .speler-knop[aria-disabled="true"] { border-style: dashed; background: var(--sp-papier); color: var(--sp-zacht); box-shadow: none; cursor: default; }

.speler .speler-tijdlijn-kop { margin-bottom: 8px; font: 700 15px/1.3 var(--sp-koppen); color: var(--sp-inkt); }
.speler.speler-opbouw .speler-knop-speel { margin-left: 0; padding: 0 20px; font: 600 15px/1.2 var(--sp-koppen); }

.speler .speler-rem-vak { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.speler .speler-rem-hint { font: 500 15px/1.4 var(--sp-tekst); color: var(--sp-inkt); }

.speler .speler-les { text-align: left; line-height: 1.3; padding-top: 6px; padding-bottom: 6px; }
.speler .speler-les[aria-pressed="true"] { background: var(--sp-azul); color: var(--sp-papier); box-shadow: none; }
@media (hover: hover) {
  .speler .speler-les[aria-pressed="true"]:not([aria-disabled="true"]):hover { background: var(--sp-knop-sterk); color: var(--sp-azul); }
}

.speler .speler-uitkomst { padding: 10px 14px 12px; border-left: 3px solid var(--sp-azul); border-radius: 0 6px 6px 0; background: var(--sp-papier); font: 600 17px/1.45 var(--sp-koppen); color: var(--sp-inkt); }
.speler .speler-uitkomst:empty { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; border: 0; }

.speler :focus-visible { outline: 3px solid var(--sp-azul); outline-offset: 3px; }

.speler .speler-lezers { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (min-width: 700px) {
  .speler { padding: 24px 24px 20px; }
  .speler .speler-tekst { font-size: 20px; }
}
@media (max-width: 759px) {
  .speler.heeft-podium .speler-acties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .speler.heeft-podium .speler-acties .speler-knop { padding: 0 10px; }
  .speler.heeft-podium .speler-acties .speler-rem-vak, .speler.heeft-podium .speler-acties .speler-eind, .speler.heeft-podium .speler-acties .speler-opnieuw, .speler.heeft-podium .speler-acties .speler-les, .speler.heeft-podium .speler-acties .speler-knop-speel { grid-column: 1 / -1; margin-left: 0; }
  .speler.heeft-podium .speler-rem-vak { flex-direction: column; align-items: stretch; gap: 6px; }
}
@media (max-width: 480px) {
  .speler .speler-knop-speel { margin-left: 0; }
  .speler .speler-tijdlijn-lijst { gap: 6px; }
  .speler .speler-moment-knop { padding: 0 10px; }
}
@media (forced-colors: active) {
  .speler .speler-moment-knop[aria-current="step"] { border: 3px solid Highlight; }
  .speler .speler-knop[aria-disabled="true"] { color: GrayText; border-color: GrayText; }
}
@media (prefers-reduced-motion: reduce) {
  .speler .speler-balk span, .speler .speler-knop, .speler .speler-moment-knop { transition: none !important; }
}

.speler .pd { position: relative; padding: 14px 10px 14px; background: var(--sp-papier); border: 1px solid var(--sp-lijn); border-radius: 0 6px 6px 6px; }
.speler .pd-rollen { display: grid; grid-template-columns: minmax(0, 1fr) 2.75rem minmax(0, 1fr); gap: 16px 6px; align-items: start; }
.speler .pd-blok { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; }
.speler .pd-cel { display: block; flex: none; width: 60px; height: auto; overflow: visible; }
.speler .pd-vorm { fill: var(--sp-tint, var(--sp-veld)); stroke: var(--sp-azul); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill .25s cubic-bezier(.4, 0, .2, 1); }
.speler .pd-ring { fill: none; stroke: var(--sp-azul); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .25s cubic-bezier(.4, 0, .2, 1); }
.speler .pd-icoon { color: var(--sp-azul); stroke-width: 1.5; transition: color .25s cubic-bezier(.4, 0, .2, 1); }
.speler .pd-naam { font: 600 15px/1.25 var(--sp-koppen); color: var(--sp-inkt); overflow-wrap: anywhere; }
.speler .pd-stil { display: none; font: 600 12px/1.3 var(--sp-label); letter-spacing: .1em; text-transform: uppercase; color: var(--sp-zacht); }
.speler .pd-kaart { position: relative; width: 100%; }
.speler .pd-regel { width: 100%; padding: 8px 8px 7px; background: var(--sp-veld); color: var(--sp-inkt); border: 1px solid var(--sp-stil); border-radius: 0 6px 6px 6px; font: 400 14px/1.35 var(--sp-tekst); text-align: left; overflow-wrap: anywhere; transition: background-color .25s cubic-bezier(.4, 0, .2, 1), color .25s cubic-bezier(.4, 0, .2, 1), border-color .25s cubic-bezier(.4, 0, .2, 1); }

.speler .pd-af { display: none; position: absolute; z-index: 1; top: -8px; left: 6px; padding: 1px 5px 2px; background: var(--sp-papier); color: var(--sp-azul); border: 1.5px solid var(--sp-azul); border-radius: 0 4px 4px 4px; font: 600 11px/1.1 var(--sp-label); font-variant-numeric: tabular-nums; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.speler .pd-blok.is-af .pd-af { display: block; }

.speler .pd-blok.is-af .pd-vorm { fill: var(--sp-azul); }
.speler .pd-blok.is-af .pd-ring { opacity: 1; }
.speler .pd-blok.is-af .pd-icoon { color: var(--sp-papier); }
.speler .pd-blok.is-af .pd-regel { background: var(--sp-azul); color: var(--sp-papier); border-color: var(--sp-azul); }

.speler .pd-blok.is-stil .pd-vorm { fill: var(--sp-veld); stroke: var(--sp-stil); stroke-dasharray: 4 5; stroke-linecap: round; }
.speler .pd-blok.is-stil .pd-icoon { color: var(--sp-stil); }
.speler .pd-blok.is-stil .pd-naam, .speler .pd-blok.is-stil .pd-regel { color: var(--sp-zacht); }
.speler .pd-blok.is-stil .pd-regel { border-style: dashed; background: var(--sp-papier); }
.speler .pd-blok.is-stil .pd-stil { display: block; }

.speler .pd-meter { display: grid; gap: 3px; width: 100%; }
.speler .pd-meter-label { font: 500 11px/1.3 var(--sp-label); font-variant-numeric: tabular-nums; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-zacht); text-align: left; }
.speler .pd-meter-spoor { display: block; height: 10px; border: 1.5px solid var(--sp-stil); border-radius: 99px; background: var(--sp-papier); overflow: hidden; }
.speler .pd-meter-vul { display: block; width: 0; height: 100%; background: var(--sp-azul); transition: width .5s cubic-bezier(.22, 1, .36, 1); }
.speler .pd-meter-b .pd-meter-vul { background: var(--sp-warm); }

.speler .pd-leeg { display: flex; align-items: flex-start; gap: 6px; width: 100%; padding: 6px 8px 7px; border: 1.5px dashed var(--sp-stil); border-radius: 0 6px 6px 6px; font: 400 14px/1.35 var(--sp-tekst); color: var(--sp-zacht); text-align: left; transition: background-color .25s cubic-bezier(.4, 0, .2, 1), border-color .25s cubic-bezier(.4, 0, .2, 1), color .25s cubic-bezier(.4, 0, .2, 1); }
.speler .pd-leeg .ik { margin-top: 1px; }
.speler .pd-leeg span { min-width: 0; overflow-wrap: anywhere; }
.speler .pd-leeg.is-op { border-style: solid; border-width: 2px; border-color: var(--sp-warm); color: var(--sp-inkt); }
.speler .pd-leeg.is-op .ik { color: var(--sp-warm); }
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .speler { --sp-tint: color-mix(in srgb, var(--sp-azul) 8%, var(--sp-papier)); --sp-warm-tint: color-mix(in srgb, var(--sp-warm) 14%, var(--sp-papier)); }
  .speler .pd-leeg.is-op { background: var(--sp-warm-tint); }
}

.speler .pd-lus { position: relative; display: flex; align-items: flex-start; justify-content: center; margin-top: 15px; }
.speler .pd-lus-svg { display: block; width: 100%; height: auto; overflow: visible; }
.speler .pd-lus-pijl { fill: none; stroke: var(--sp-warm); stroke-linecap: round; stroke-linejoin: round; transition: stroke-width .4s cubic-bezier(.22, 1, .36, 1); }
.speler .pd-lus-pijl path { vector-effect: non-scaling-stroke; }
.speler .pd-lus[data-lus="0"] .pd-lus-pijl { visibility: hidden; stroke-width: 0; }
.speler .pd-lus[data-lus="1"] .pd-lus-pijl { stroke-width: 2px; }
.speler .pd-lus[data-lus="2"] .pd-lus-pijl { stroke-width: 4px; }
.speler .pd-lus[data-lus="3"] .pd-lus-pijl { stroke-width: 6px; }
.speler .pd-rem { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; transform: translate(-50%, -50%); background: var(--sp-papier); color: var(--sp-azul); border: 2px solid var(--sp-azul); border-radius: 0 6px 6px 6px; }
.speler .pd-rem[hidden] { display: none; }
.speler .pd-lus.heeft-rem .pd-lus-pijl { stroke: var(--sp-stil); stroke-dasharray: 3 6; }

.speler .pd-mens[data-toestand=""] { visibility: hidden; }
.speler .pd-mens[data-toestand="wacht"] .pd-vorm { fill: none; stroke-dasharray: 4 5; stroke-linecap: round; }
.speler .pd-mens[data-toestand="komt"] .pd-vorm { fill: var(--sp-azul); }
.speler .pd-mens[data-toestand="komt"] .pd-icoon { color: var(--sp-papier); }

.speler .pd-briefje { position: absolute; left: 0; top: 0; z-index: 2; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: var(--sp-papier); color: var(--sp-azul); border: 1.5px solid var(--sp-azul); border-radius: 0 6px 6px 6px; pointer-events: none; }
.speler .pd-briefje.is-weg { visibility: hidden; }

.speler .pd-rol.pd-weg, .speler .pd-lus.pd-weg { display: none; }
@media (min-width: 760px) {
  .speler .pd-rol.pd-weg, .speler .pd-lus.pd-weg { display: flex; visibility: hidden; }
}

@media (max-width: 759px) {
  .speler .pd-mens[data-toestand=""] { display: none; }
  .speler .pd-rol:nth-child(n+4):nth-child(even) { grid-column: 1; }
  .speler .pd-rol:nth-child(n+4):nth-child(odd) { grid-column: 3; }
  .speler .pd-rol:nth-last-child(2):nth-child(odd) { grid-row: span 2; }
  .speler .pd-rol:nth-last-child(2):nth-child(odd) + .pd-mens { grid-column: 1; }
}
@media (min-width: 760px) {
  .speler .pd { padding: 18px 16px 16px; }
  .speler .pd-rollen { grid-template-columns: minmax(0, 1fr) 3.5rem repeat(var(--pd-rest, 3), minmax(0, 1fr)); gap: 16px 10px; }
  .speler .pd-cel { width: 68px; }
  .speler .pd-lus { margin-top: 19px; }
}
@media (min-width: 760px) and (max-width: 1099px) {
  .speler .pd-leeg { flex-direction: column; gap: 2px; }
}
@media (max-width: 400px) {
  .speler .pd { padding-left: 6px; padding-right: 6px; }
  .speler .pd-rollen { grid-template-columns: minmax(0, 1fr) 2.5rem minmax(0, 1fr); column-gap: 4px; }
  .speler .pd-cel { width: 54px; }
  .speler .pd-leeg { gap: 4px; padding: 5px 6px 6px; }
  .speler .pd-leeg .ik { width: 16px; height: 16px; }
}
@media (max-width: 360px) {
  .speler { padding-left: 12px; padding-right: 12px; }
  .speler .pd { padding-top: 6px; padding-bottom: 6px; }
  .speler .pd-rollen { grid-template-columns: minmax(0, 1fr) 2.25rem minmax(0, 1fr); row-gap: 6px; }
  .speler .pd-blok { gap: 3px; }
  .speler .pd-cel { width: 40px; }
  .speler .pd-lus { margin-top: 9px; }
  .speler .pd-stil { font-size: 11px; line-height: 1.1; }
  .speler .pd-naam { font-size: 14px; line-height: 1.2; }
  .speler .pd-regel, .speler .pd-leeg { padding: 3px 5px 4px; font-size: 12.5px; line-height: 1.3; }
  .speler .pd-regel { padding-top: 9px; }
  .speler .pd-kaart { margin-top: 2px; }
  .speler .pd-af { top: -7px; left: 4px; padding: 0 4px 1px; }
  .speler .pd-leeg { flex-direction: column; gap: 2px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .speler .pd *, .speler .pd *::before { transition: none !important; animation: none !important; }
}

.speler.speler-stapknop { display: flex; flex-direction: column; --sp-px: 24px; padding-left: var(--sp-px); padding-right: var(--sp-px); }
.speler.speler-stapknop .speler-acties {
  position: sticky; bottom: 0; z-index: 3; margin: 0 calc(-1 * var(--sp-px)); padding: 8px var(--sp-px) calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--sp-veld); border-top: 1px solid var(--sp-lijn); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
}
.speler.speler-stapknop .speler-knop-volgende { min-width: 13.5rem; }
.speler.speler-stapknop .speler-acties-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.speler.speler-stapknop .speler-acties-extra .speler-knop-speel { margin-left: 0; }
.speler.speler-stapknop .speler-acties-extra .speler-knop, .speler.speler-stapknop .speler-moment-knop { scroll-margin-bottom: 7rem; }
.speler.speler-stapknop .speler-acties .speler-rem-vak { margin-left: 0; }
.speler.speler-stapknop .speler-les { position: relative; padding: 6px 20px 6px 44px; }
.speler.speler-stapknop .speler-les::before { content: ""; position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border: 2px solid currentColor; border-radius: 4px; background: var(--sp-papier); }
.speler.speler-stapknop .speler-les[aria-pressed="true"] { border-width: 2px; padding-left: 43px; background: var(--sp-knop-sterk); color: var(--sp-azul); box-shadow: none; }
.speler.speler-stapknop .speler-les[aria-pressed="true"]::before { left: 13px; background: var(--sp-azul); border-color: var(--sp-azul); }
.speler.speler-stapknop .speler-les[aria-pressed="true"]::after { content: ""; position: absolute; left: 13px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: var(--sp-papier); clip-path: polygon(22% 52%, 38% 68%, 76% 28%, 86% 38%, 38% 88%, 12% 62%); }
.speler.speler-stapknop .pd-leeg { border-width: 2px; }
.speler.speler-stapknop .speler-stap { display: flex; flex-direction: column; }
.speler.speler-stapknop .speler-waarom { flex: 1 1 auto; }
.speler.speler-stapknop .speler-uitkomst, .speler.speler-stapknop .speler-acties, .speler.speler-stapknop .speler-acties-extra { transition-property: none; }
@media (max-width: 759px) {
  .speler.speler-stapknop { --sp-px: 14px; gap: 10px; padding-top: 12px; padding-bottom: 12px; }
  .speler.speler-stapknop .speler-kopregel { margin-bottom: 3px; }
  .speler.speler-stapknop .speler-tekst { font-size: 16.5px; line-height: 1.33; }
  .speler.speler-stapknop .speler-waarom { margin-top: 6px; padding: 6px 10px 7px; }
  .speler.speler-stapknop .speler-waarom-label { display: inline; margin: 0 6px 0 0; }
  .speler.speler-stapknop .speler-waarom-tekst { display: inline; font-size: 14.5px; line-height: 1.4; }
  .speler.speler-stapknop .speler-acties { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; }
  .speler.speler-stapknop .speler-acties .speler-knop { padding: 0 12px; margin-left: 0; }
  .speler.speler-stapknop .speler-acties .speler-rem-vak { display: contents; }
  .speler.speler-stapknop .speler-acties .speler-knop-volgende, .speler.speler-stapknop .speler-acties .speler-eind { grid-column: 1; grid-row: 1; min-width: 0; }
  .speler.speler-stapknop .speler-acties .speler-rem, .speler.speler-stapknop .speler-acties .speler-opnieuw { grid-column: 2; grid-row: 1; }
  .speler.speler-stapknop .speler-acties .speler-rem-hint { grid-column: 1 / -1; grid-row: 2; justify-self: end; font-size: 14px; line-height: 1.3; }
  .speler.speler-stapknop .speler-acties-extra { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 8px; }
  .speler.speler-stapknop .speler-acties-extra .speler-knop { padding: 0 6px; }
  .speler.speler-stapknop .speler-acties-extra .speler-les { grid-column: 1 / -1; padding: 6px 10px 6px 44px; }
  .speler.speler-stapknop .speler-acties-extra .speler-les[aria-pressed="true"] { padding-left: 43px; }
  .speler.speler-stapknop .pd { padding: 4px 10px 49px; }
  .speler.speler-stapknop .pd-mens[data-toestand=""], .speler.speler-stapknop .pd-rol.pd-weg, .speler.speler-stapknop .pd-lus.pd-weg { display: none; }
  .speler.speler-stapknop .pd { --rij: 34px; }
  .speler.speler-stapknop .pd-rollen { grid-template-columns: minmax(0, 1fr); gap: 0; align-items: stretch; }
  .speler.speler-stapknop .pd-rollen > .pd-blok.pd-blok { grid-column: 1; grid-row: auto; }
  .speler.speler-stapknop .pd-rollen > .pd-lus.pd-lus { position: absolute; right: 10px; top: 4px; width: 2.2rem; height: calc(2 * var(--rij)); margin: 0; padding: 0; align-items: center; justify-content: center; }
  .speler.speler-stapknop .pd-blok { display: grid; grid-template-columns: 34px 6.2rem minmax(0, 1fr); grid-template-rows: auto; column-gap: 8px; row-gap: 0; min-height: var(--rij); align-items: center; justify-items: stretch; text-align: left; }
  .speler.speler-stapknop .pd-cel { grid-column: 1; grid-row: 1; width: 32px; align-self: center; justify-self: center; }
  .speler.speler-stapknop .pd-naam { grid-column: 2; grid-row: 1; font-size: 15px; line-height: 1.2; }
  .speler.speler-stapknop .pd-stil, .speler.speler-stapknop .pd-meter { grid-column: 3; grid-row: 1; }
  .speler.speler-stapknop .pd-stil { justify-self: start; }
  .speler.speler-stapknop .pd-meter { display: flex; align-items: center; gap: 8px; }
  .speler.speler-stapknop .pd-meter-label { flex: none; min-width: 3.4rem; }
  .speler.speler-stapknop .pd-meter-spoor { flex: 1; height: 9px; }
  .speler.speler-stapknop .pd-leeg { grid-column: 1 / -1; grid-row: 2; position: static; width: auto; min-height: 31px; margin: 1px 0 4px; flex-direction: row; gap: 6px; align-items: center; padding: 3px 8px 4px; font-size: 13.5px; line-height: 1.3; }
  .speler.speler-stapknop .pd-kaart { display: none; position: absolute; left: 10px; right: 10px; bottom: 6px; width: auto; }
  .speler.speler-stapknop .pd-blok.is-af .pd-kaart { display: block; }
  .speler.speler-stapknop .pd-regel { padding: 9px 6px 4px 8px; font-size: 13px; line-height: 1.3; }
  .speler.speler-stapknop.speler-les-aan .pd { padding-bottom: 66px; }
  .speler.speler-stapknop .pd-lus-svg { width: 30px; transform: rotate(90deg); }
  .speler.speler-stapknop .pd-rem { width: 30px; height: 30px; }
  .speler.speler-stapknop .pd-briefje { width: 24px; height: 24px; }
  .speler.speler-stapknop .pd-briefje .ik { width: 16px; height: 16px; }
}
@media (max-width: 360px) {
  .speler.speler-stapknop .pd { padding-left: 6px; padding-right: 6px; }
  .speler.speler-stapknop .speler-acties .speler-knop { padding: 0 8px; }
  .speler.speler-stapknop .pd-rollen > .pd-lus.pd-lus { right: 6px; }
  .speler.speler-stapknop .pd-blok { grid-template-columns: 32px 5.6rem minmax(0, 1fr); column-gap: 6px; }
  .speler.speler-stapknop .pd-naam { font-size: 14px; }
  .speler.speler-stapknop .pd-kaart { left: 6px; right: 6px; }
  .speler.speler-stapknop .pd-regel { font-size: 12.5px; }
}
@media (max-width: 345px) {
  .speler.speler-stapknop .pd { padding-bottom: 66px; }
}
@media (min-width: 760px) and (max-height: 800px), (min-width: 760px) and (max-width: 899px) and (max-height: 815px) {
  .speler.speler-stapknop { gap: 12px; padding-top: 16px; padding-bottom: 16px; }
  .speler.speler-stapknop .pd { padding: 10px 14px 10px; }
  .speler.speler-stapknop .pd-rollen { row-gap: 8px; }
  .speler.speler-stapknop .pd-cel { width: 46px; }
  .speler.speler-stapknop .pd-lus { margin-top: 10px; }
  .speler.speler-stapknop .pd-regel { padding: 9px 7px 4px; font-size: 13px; line-height: 1.3; }
  .speler.speler-stapknop .pd-leeg { padding: 4px 7px 4px; font-size: 13px; line-height: 1.3; }
  .speler.speler-stapknop .pd-blok { gap: 4px; }
}