
.pr { overflow-x: clip; }
:where(.pr) :is(h1, h2, p, figure) { margin: 0; }


.sw1 { position: relative; padding-top: calc(var(--nav-inset) + var(--nav-height-solid) + var(--space-96)); }   
.sw1-t { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }
.sw1-t :is(h1, h2) { grid-column: 1 / -1; max-width: none; }   

figure.sw-pic { position: relative; z-index: 1; margin-top: var(--space-64); }

figure.sw-pic.on-stage { overflow: hidden; border-radius: var(--radius-media); padding: clamp(28px, 5vw, 80px) clamp(16px, 8vw, 128px); background: #121418 url("../media/s11/auto-lab/sw-stage-al.jpg") 50% 50% / cover no-repeat; }
figure.sw-pic.on-stage .nsx-win { max-width: 1000px; margin: 0 auto; box-shadow: 0 32px 80px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.1); }
@media (max-width: 640px) { figure.sw-pic.on-stage { padding: 0; border-radius: 0; background: none; overflow: visible; } }

.nsx-win { position: relative; width: 100%; overflow: hidden; border-radius: var(--radius-media); background: var(--color-surface-window); box-shadow: 0 0 0 1px var(--p-ink-a08); }
.nsx-win .tb { position: relative; height: var(--window-bar-height); display: flex; align-items: center; gap: 0; padding: 0 var(--space-16) 0 var(--space-12); border-bottom: 1px solid var(--window-bar-rule); background: var(--color-surface-window-bar); }
.nsx-win .tb .tb-dots { display: inline-flex; gap: 6px; flex: none; }
.nsx-win .tb .tb-dots i { width: var(--window-dot); height: var(--window-dot); border-radius: 50%; background: var(--window-dot-fill); }
.nsx-win .tb .tb-t { margin-left: auto; padding-left: var(--space-16); font-size: var(--font-size-caption); line-height: 1; color: var(--color-text-muted); white-space: nowrap; }   
.nsx-frame { position: relative; overflow: hidden; aspect-ratio: 1120 / 700; background: var(--color-surface-window); }   
.nsx-frame iframe { position: absolute; left: 0; top: 0; width: 1120px; height: 700px; border: 0; transform-origin: 0 0; opacity: 0; transition: opacity var(--t-move) var(--ease-std); }
.nsx-frame.live iframe { opacity: 1; }
.nsx-frame.m { aspect-ratio: 390 / 844; max-width: 390px; margin: 0 auto; background-image: none; } .nsx-frame.m iframe { width: 390px; height: 844px; opacity: 1; }


.sw-pic .ap-tabs.sw-tbtabs { align-self: stretch; display: flex; gap: var(--space-4); margin: 0 0 0 var(--space-20); border: 0; overflow: visible; }
.nsx-win .tb .sw-tbtabs span { position: static; transform: none; font-size: var(--font-size-caption); color: inherit; }
.sw-tbtabs .sf { display: none; }   
.sw-tbtabs button { position: relative; display: inline-flex; align-items: center; min-height: 34px; padding: 0 var(--space-12); -webkit-appearance: none; appearance: none; border: 0; border-radius: var(--radius-pill); background: none; font: inherit; font-size: var(--font-size-caption); color: var(--color-text-muted); cursor: pointer; }   
.sw-tbtabs button { min-height: 26px; padding: 0 12px; line-height: 1; white-space: nowrap; }
.sw-tbtabs button:hover { color: var(--color-text); }
.sw-tbtabs button[aria-selected="true"] { color: var(--color-text); background: var(--color-surface-window); box-shadow: 0 0 0 1px var(--window-bar-rule); }   
.sw-tbtabs button::after { bottom: -1px; left: var(--space-12); right: var(--space-12); }
.ap-tabs button .pr { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--color-text); transform: scaleX(0); transform-origin: left; opacity: 0; }
.ap-tabs.auto button[aria-selected="true"]::after { background: var(--color-rule); }
.ap-tabs.auto button[aria-selected="true"] .pr { opacity: 1; animation: sw-pr var(--dwell, 8s) linear forwards; }
.ap-tabs.auto.held button[aria-selected="true"] .pr { animation-play-state: paused; }
@keyframes sw-pr { from { transform: scaleX(0); } to { transform: scaleX(1); } }


.sw2 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: end; align-items: last baseline; margin-top: var(--sec); }
.sw2-say { grid-column: 1 / span 8; max-width: 15em; color: var(--color-text); }
.sw2-go { grid-column: 9 / span 4; justify-self: start; font-size: var(--font-size-body); }
.sw2-go i { font-style: normal; }


.sw3 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: start; margin-top: var(--sec); }
.sw3-w { grid-column: 1 / span 4; }
.sw3-l { margin-top: var(--space-16); color: var(--color-text-muted); max-width: 22em; }
.sw-rec { grid-column: 5 / span 8; min-width: 0; padding: var(--space-32) var(--space-40) var(--space-24); border-radius: var(--radius-media); background: var(--color-surface-window); box-shadow: 0 0 0 1px var(--p-ink-a08); }
.sw-rows { width: 100%; border-collapse: collapse; font-size: var(--font-size-body); line-height: 1.25; font-variant-numeric: tabular-nums; }
.sw-rows th { padding: 0 var(--space-16) var(--space-16) 0; text-align: left; vertical-align: bottom; font-weight: var(--font-weight-regular); font-size: var(--font-size-caption); line-height: 1.3; color: var(--color-text-muted); }
.sw-rows th small { display: block; font-size: inherit; opacity: .72; }
.sw-rows td { padding: var(--space-16) var(--space-16) var(--space-16) 0; border-top: 1px solid var(--color-rule); color: var(--color-text); white-space: nowrap; }
.sw-rows :is(th, td):last-child { padding-right: 0; }
.sw-rows td.v { color: var(--color-text-muted); }
.sw-rows tbody tr:nth-last-child(2) { opacity: .5; }
.sw-rows tbody tr:last-child { opacity: .2; }


.pr-next { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: end; align-items: last baseline; margin-top: var(--sec); padding-bottom: var(--space-block); }   
.sw-doors { grid-column: 1 / span 8; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-32); }

.pr-go.sw-door { display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); }
.sw-door .lb { display: inline-flex; gap: .32em; align-items: baseline; }
.sw-door .who { font-size: var(--font-size-lead); line-height: var(--line-height-lead, 1.4); letter-spacing: 0; color: var(--color-text-muted); }
.pr-go { display: inline-flex; gap: .32em; align-items: baseline; font-size: var(--font-size-title); line-height: var(--line-height-title); letter-spacing: var(--sys-ls-h2, -.03em); color: var(--color-text); }
.pr-go i { font-style: normal; transition: transform var(--t-base) var(--ease-out); }
.pr-go:hover i { transform: translateX(4px); }
.pr-go:active { opacity: .62; }
.pr-next .btn { grid-column: 10 / span 3; justify-self: start; }

@media (max-width: 1023px) {
  .sw1-t :is(h1, h2) { grid-column: 1 / span 10; }
  .sw2-say { grid-column: 1 / span 8; }
  .sw2-go { grid-column: 10 / span 3; }
  .sw3-w { grid-column: 1 / -1; }
  .sw-rec { grid-column: 1 / -1; margin-top: var(--space-40); }
  .pr-next .btn { grid-column: 9 / span 4; }
}
@media (max-width: 860px) {
  .sw1 { padding-top: calc(var(--nav-inset) + var(--nav-height-solid) + var(--space-48)); }
  .sw1-t, .sw2, .sw3, .pr-next { grid-template-columns: minmax(0, 1fr); }
  .sw1-t :is(h1, h2), .sw2-say, .sw2-go, .sw3-w, .sw-rec, .sw-doors, .pr-next .btn { grid-column: 1; }
  figure.sw-pic { margin-top: var(--space-40); }
  
  .nsx-win .tb { height: 44px; }
  .sw-pic .ap-tabs.sw-tbtabs { margin-left: var(--space-12); overflow: visible; }
  .sw-tbtabs .lf { display: none; } .sw-tbtabs .sf { display: inline; }
  .sw-tbtabs button { min-height: 44px; padding: 0 var(--space-12); }
  .ap-tabs button .pr { bottom: 0; }
  #nsxtabs.more-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  #nsxtabs.more-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
  #nsxtabs.more-l.more-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
  .sw2-go { margin: var(--space-24) 0 0; }
  .sw2, .pr-next { align-items: start; }
  .sw-rec { margin-top: var(--space-32); padding: var(--space-24) var(--space-20) var(--space-16); }
  .sw-rows :is(th, td).v { display: none; }   
  .sw-rows td { padding: var(--space-12) var(--space-12) var(--space-12) 0; }
  .pr-next { row-gap: var(--space-32); align-items: start; }
  .pr-next .btn { margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ap-tabs.auto button[aria-selected="true"] .pr { animation: none; opacity: 0; }
  .ap-tabs.auto button[aria-selected="true"]::after { background: var(--color-text); }
  .nsx-frame iframe { transition: none; }
  .pr-go i { transition: none; }
}


html:is([data-theme="dark"], .dusk) .sw-rec { --color-surface-window: #e6e8eb; --color-text: #0c0f17; --color-text-muted: rgba(12,15,23,.62); --color-rule: rgba(12,15,23,.12);
  color: var(--color-text); box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
html:is([data-theme="dark"], .dusk) .nsx-win { box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
