/* Additive Riviera tutorials: every selector targets NEW dct-* elements only. */
.dct-addition{box-sizing:border-box;width:calc(100% - 28px);max-width:1000px;margin:20px auto;grid-column:1/-1;clear:both}
.dct-addition *{box-sizing:border-box}
.dct-addition :is(#dct-home,.dct-film).dct-film {
  --dct-ink:var(--rv-ink,#173e42);--dct-paper:var(--rv-card,#fffaf2);--dct-sea-tint:var(--rv-sea-tint,#e2eee7);
  --dct-sand:var(--rv-sand,#f2e3c7);--dct-line:var(--rv-line,#d5c5aa);--dct-copper:var(--rv-copper,#9c3d24);
  --dct-green:var(--rv-green,#306d4a);--dct-sun:#f2c14e;
  display:block;min-width:0;width:100%;margin:0!important;padding:0!important;border:1px solid var(--dct-line);border-radius:14px;
  background:var(--dct-paper)!important;color:var(--dct-ink)!important;font-family:'Atkinson Hyperlegible',sans-serif;
  overflow:hidden;text-align:left;box-shadow:none;align-self:start!important;height:auto!important;min-height:0!important;
}
.dct-addition :is(#dct-home,.dct-film) .dct-head {padding:12px 14px 4px!important;background:transparent!important;color:inherit!important}
.dct-addition :is(#dct-home,.dct-film) .dct-kicker {margin:0 0 5px!important;font-size:16px!important;line-height:1.3!important;color:var(--dct-copper)!important;-webkit-text-fill-color:currentColor!important}
.dct-addition :is(#dct-home,.dct-film) h2 {font:400 24px/1.2 'Fraunces',Georgia,serif!important;margin:0!important;padding:0!important;color:var(--dct-ink)!important;-webkit-text-fill-color:currentColor!important;background:none!important}
.dct-addition :is(#dct-home,.dct-film) .dct-art {display:block;width:100%;height:160px;max-width:none;margin:0;overflow:visible}
.dct-stroke {stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
/* Attribute fills and strokes are intentional, unlike the existing jf-* animation. */
.dct-stroke:not([fill]){fill:none}
.dct-stroke:not([stroke]){stroke:var(--dct-ink)}
.dct-scene[hidden], .dct-film [hidden] {display:none!important}
.dct-film.dct-animate .dct-scene:not([hidden]) .dct-stroke {stroke-dasharray:1;animation:dct-draw 900ms both;animation-delay:calc(var(--order)*120ms)}
.dct-film.dct-paused .dct-stroke {animation-play-state:paused!important}
@keyframes dct-draw {from{stroke-dashoffset:1;fill-opacity:0}to{stroke-dashoffset:0;fill-opacity:1}}
.dct-addition :is(#dct-home,.dct-film) .dct-captions {position:relative;padding:12px 14px;min-height:max(130px,var(--dct-caption-height,0px));background:var(--dct-sea-tint);color:var(--dct-ink)}
.dct-addition :is(#dct-home,.dct-film) .dct-caption p {font-size:18px!important;line-height:1.45!important;color:var(--dct-ink)!important;-webkit-text-fill-color:currentColor!important;margin:0!important;padding:0!important}
.dct-addition :is(#dct-home,.dct-film) .dct-caption .dct-step-title {font-size:16px!important;font-weight:700;margin:0 0 5px!important}
.dct-addition :is(#dct-home,.dct-film) .dct-controls {display:flex;align-items:center;justify-content:space-between;gap:4px;flex-wrap:wrap;padding:6px 10px}
.dct-addition :is(#dct-home,.dct-film) .dct-controls button {
  appearance:none;background:var(--dct-paper)!important;color:var(--dct-ink)!important;-webkit-text-fill-color:currentColor!important;
  border:1px solid var(--dct-line)!important;border-radius:22px;padding:9px 12px!important;min-height:44px!important;
  font:400 16px/1.3 'Atkinson Hyperlegible',sans-serif!important;margin:0!important;box-shadow:none!important;cursor:pointer;
}
.dct-addition :is(#dct-home,.dct-film) .dct-count {font-size:16px!important;color:var(--dct-ink)!important;-webkit-text-fill-color:currentColor!important}
.dct-controls button:disabled {opacity:.5;cursor:default}
.dct-film :is(button,summary):focus-visible {outline:3px solid var(--dct-copper)!important;outline-offset:2px}
.dct-addition :is(#dct-home,.dct-film) .dct-transcript {padding:0 14px;border-top:1px solid var(--dct-line);margin:0;background:var(--dct-paper)}
.dct-addition :is(#dct-home,.dct-film) .dct-transcript summary {font-size:16px!important;line-height:1.4!important;padding:10px 0!important;min-height:44px;color:var(--dct-ink)!important;cursor:pointer}
.dct-addition :is(#dct-home,.dct-film) .dct-transcript ol {list-style:decimal!important;margin:4px 0 14px!important;padding-left:22px!important}
.dct-addition :is(#dct-home,.dct-film) .dct-transcript li {display:list-item!important;font-size:18px!important;line-height:1.45!important;margin:10px 0!important;color:var(--dct-ink)!important}
.dct-addition :is(#dct-home,.dct-film) .dct-transcript strong {color:var(--dct-ink)!important}
@media(min-width:768px){
  .dct-addition :is(#dct-home,.dct-film).dct-film{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .dct-addition :is(#dct-home,.dct-film) .dct-head{grid-column:1;grid-row:1}
  .dct-addition :is(#dct-home,.dct-film) .dct-art{grid-column:1;grid-row:2/4;height:155px}
  .dct-addition :is(#dct-home,.dct-film) .dct-captions{grid-column:2;grid-row:1/3;display:flex;align-items:center;min-height:max(160px,var(--dct-caption-height,0px))}
  .dct-addition :is(#dct-home,.dct-film) .dct-controls{grid-column:2;grid-row:3}
  .dct-addition :is(#dct-home,.dct-film) .dct-transcript{grid-column:1/-1;grid-row:4}
}
@media(max-width:767px){
  .dct-addition{margin:14px auto}
  .dct-addition :is(#dct-home,.dct-film) .dct-art{height:125px}
  .dct-addition :is(#dct-home,.dct-film) h2{font-size:22px!important}
  .dct-addition :is(#dct-home,.dct-film) .dct-captions{min-height:max(144px,var(--dct-caption-height,0px))}
  .dct-addition :is(#dct-home,.dct-film) .dct-controls{padding:5px 8px;gap:3px}
  .dct-addition :is(#dct-home,.dct-film) .dct-controls button{padding:9px!important}
}

@media(max-width:400px){
  .dct-addition :is(#dct-home,.dct-film) .dct-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .dct-addition :is(#dct-home,.dct-film) .dct-controls button{padding:9px 4px!important;min-width:0}
  .dct-addition :is(#dct-home,.dct-film) .dct-count{grid-column:2;grid-row:1;text-align:center}
}

html.dw-contrast .dct-addition :is(#dct-home,.dct-film){--dct-ink:#111;--dct-paper:#fffaf2;--dct-copper:#111;--dct-green:#111;--dct-line:#111;--dct-sea-tint:#fffaf2;--dct-sand:#fffaf2}
@media(prefers-reduced-motion:reduce){.dct-film .dct-stroke{animation:none!important}}
@media(forced-colors:active){.dct-film .dct-stroke{animation:none!important;stroke:CanvasText!important}.dct-film{border:1px solid CanvasText!important}}
@media print{.dct-film .dct-controls{display:none!important}.dct-film .dct-transcript{display:block!important}.dct-film .dct-transcript>ol{display:block!important}}