.duos-root .prime-modes { position: relative; background: var(--color-canvas); color: var(--color-ink); }
.duos-root .prime-modes__viewport { position: relative; padding: var(--spacing-72) var(--page-gutter); }
.duos-root .prime-modes__chapter { max-width: 640px; margin: var(--spacing-72) auto; scroll-margin-top: 140px; }
.duos-root .prime-modes__chapter .body { margin: var(--spacing-22) 0; }
.duos-root .prime-modes__quantity { white-space: nowrap; }
.duos-root .prime-modes__eyebrow { display: flex; align-items: center; gap: var(--spacing-14); margin: 0 0 var(--spacing-22); }
.duos-root .prime-modes__chip { display: inline-flex; flex: 0 0 auto; width: 44px; }
.duos-root .prime-modes__chip svg { display: block; width: 100%; height: auto; }
.duos-root .prime-modes__badges { display: flex; flex-wrap: wrap; gap: var(--spacing-14); list-style: none; margin: 0; padding: 0; }
.duos-root .prime-modes__badges li { padding: var(--spacing-10) var(--spacing-14); border: 1px solid var(--color-paper); border-radius: var(--radius-tags); }
.duos-root .prime-modes__caption { display: flex; justify-content: space-between; align-items: baseline; gap: var(--spacing-22); margin-bottom: var(--spacing-22); }
.duos-root .prime-modes__caption h2, .duos-root .prime-modes__caption p { margin: 0; }
.duos-root .prime-modes__nav { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--spacing-22); }
.duos-root .prime-modes__nav button { position: relative; display: flex; align-items: center; gap: var(--spacing-14); min-height: 66px; padding: 0 0 var(--spacing-14); border: 0; background: transparent; color: var(--color-graphite); font: inherit; font-size: var(--text-caption); cursor: pointer; }
.duos-root .prime-modes__nav button[aria-current] { color: var(--color-ink); }
.duos-root .prime-modes__track { position: absolute; height: 1px; left: 0; right: 0; bottom: 0; background: var(--color-paper); }
.duos-root .prime-modes__track > span { display: block; height: 100%; background: var(--color-ink); transform: scaleX(0); transform-origin: left; }
.duos-root .prime-modes__navShort, .duos-root .prime-modes__ghosts { display: none; }
.duos-root .prime-modes--animated .prime-modes__viewport { height: var(--duos-svh, 100svh); padding: 0; overflow: hidden; z-index: 22; }
.duos-root .prime-modes--animated .prime-modes__chapter { position: absolute; z-index: 22; left: var(--page-gutter); top: 46%; width: 38%; max-width: 540px; margin: 0; opacity: 0; transform: translateY(-50%); }
.duos-root .prime-modes--animated [data-mode-chapter="heat"] { left: auto; right: var(--page-gutter); }
.duos-root .prime-modes--animated .prime-modes__footer { position: absolute; z-index: 22; left: var(--page-gutter); right: var(--page-gutter); bottom: 0; background: var(--color-canvas); padding-top: var(--spacing-14); padding-bottom: var(--spacing-29); }
.duos-root .prime-modes--animated .prime-modes__ghosts { display: block; position: absolute; inset: 0; pointer-events: none; }
.duos-root .prime-modes__ghost { position: absolute; top: 12%; left: 12%; right: 12%; height: 60%; opacity: 0; color: var(--color-ink); }
.duos-root .prime-modes__ghost svg { width: 100%; height: 100%; }
.duos-root .prime-modes__stage { position: fixed; inset: 0; height: var(--duos-svh, 100svh); z-index: 21; overflow: hidden; pointer-events: none; visibility: hidden; }
.duos-root .prime-modes__frame { position: absolute; transform-origin: center; }
.duos-root .prime-modes__viewer { display: block; width: 100%; height: 100%; background: transparent; pointer-events: none; --progress-bar-height: 0px; }
.duos-root .prime-modes__hotspot { width: 0; height: 0; border: 0; opacity: 0; }
.duos-root .prime-modes__power { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 1px solid var(--color-paper); border-radius: 50%; opacity: 0; }
.duos-root .prime-modes__power span { position: absolute; top: 3px; left: 38px; white-space: nowrap; color: var(--color-ink); background: var(--color-canvas); padding: var(--spacing-4) var(--spacing-7); border-radius: var(--radius-tags); }
.duos-root .prime-modes:not(.prime-modes--animated) .prime-modes__eyebrow .prime-modes__chip { width: 100px; }
html.duos-prime-modes-active [data-duos-back-top] { visibility: hidden; }
@media (max-width: 767px) {
  .duos-root .prime-modes__viewport { padding: var(--spacing-43) var(--page-gutter); }
  .duos-root .prime-modes__nav { gap: var(--spacing-10); }
  .duos-root .prime-modes__nav button { flex-direction: column; gap: var(--spacing-7); min-height: 70px; }
  .duos-root .prime-modes__navFull { display: none; }
  .duos-root .prime-modes__navShort { display: inline; }
  .duos-root .prime-modes__caption { display: block; margin-bottom: var(--spacing-10); }
  .duos-root .prime-modes__caption p { margin-top: var(--spacing-7); }
  .duos-root .prime-modes--animated .prime-modes__chapter { top: 55%; left: var(--page-gutter); right: var(--page-gutter); width: auto; max-width: none; transform: none; }
  .duos-root .prime-modes--animated [data-mode-chapter="heat"] { left: var(--page-gutter); right: var(--page-gutter); }
  .duos-root .prime-modes--animated .prime-modes__chapter .heading { font-size: var(--text-heading-sm); }
  .duos-root .prime-modes--animated .prime-modes__chapter .body { margin: var(--spacing-14) 0; font-size: var(--text-caption); }
  .duos-root .prime-modes--animated .prime-modes__eyebrow { margin-bottom: var(--spacing-10); }
  .duos-root .prime-modes--animated .prime-modes__footer { padding-bottom: var(--spacing-16); }
  .duos-root .prime-modes--animated .prime-modes__badges li { padding: var(--spacing-7) var(--spacing-10); }
  .duos-root .prime-modes__stage[data-mode="long"] { mask-image: linear-gradient(#000 0%,#000 45%,transparent 54%); }
}
@media (max-width: 767px) and (max-height: 720px) {
  .duos-root .prime-modes--animated .prime-modes__chapter { top: 44%; }
  .duos-root .prime-modes--animated .prime-modes__caption p { max-width: 260px; }
  .duos-root .prime-modes__stage[data-mode="long"] { mask-image: linear-gradient(#000 0%,#000 36%,transparent 47%); }
}
@media (max-width: 359px) {
  .duos-root .prime-modes--animated .prime-modes__eyebrow { margin-bottom: var(--spacing-7); }
  .duos-root .prime-modes--animated .prime-modes__eyebrow .prime-modes__chip { width: 32px; }
  .duos-root .prime-modes--animated .prime-modes__chapter .body { margin: var(--spacing-7) 0; }
  .duos-root .prime-modes--animated .prime-modes__badges li { padding: var(--spacing-4) var(--spacing-7); }
  .duos-root .prime-modes--animated .prime-modes__footer { padding-top: var(--spacing-10); padding-bottom: var(--spacing-10); }
  .duos-root .prime-modes--animated .prime-modes__caption p { line-height: 1.4; }
  .duos-root .prime-modes--animated .prime-modes__nav button { padding-bottom: var(--spacing-10); }
}