.qs { position: relative; z-index: 3; margin-top: -48px; border-radius: 48px 48px 0 0; background: var(--yvo-goldenrod); color: var(--yvo-brunswick);
  padding: clamp(100px, 13vw, 170px) var(--copy-x) clamp(140px, 16vw, 200px); }
.qs-in { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: clamp(40px, 7vw, 120px); row-gap: 18px; align-items: start; }
.qs .cap { grid-column: 1 / -1; color: var(--yvo-brunswick); opacity: .75; }
.qs-title { font-size: clamp(36px, 4.4vw, 68px); line-height: 1.04; letter-spacing: -.025em; font-weight: 300; text-wrap: balance; }
.qs-title b { font-weight: 800; }
.qs-text { display: grid; gap: 18px; padding-top: .6em; }
.qs-text p { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; font-weight: 300; color: #1f3d38; }
.qs-text p:first-child::first-line { font-weight: 500; }

.tw { position: relative; z-index: 4; margin-top: -48px; border-radius: 48px 48px 0 0; background: var(--yvo-black); color: var(--yvo-goldenrod); overflow: clip; }
.tw-track { position: relative; height: 900vh; }
.tw-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; --tw-out: 0;
  background: radial-gradient(70% 60% at 50% 55%, rgba(0, 77, 67, .45), transparent 70%), var(--yvo-black); }
.tw-view { position: absolute; inset: var(--header-h) 0 0; outline: none; transform: scale(calc(1 - var(--tw-out) * .18)); }
.tw-view:focus-visible { outline: 2px solid var(--yvo-yellow-green); outline-offset: -6px; }
.tw-wheel { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; }
.tw-card { position: absolute; margin: 0; backface-visibility: hidden; will-change: transform; }
.tw-face { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 14px; background: #0b1512;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8), 0 0 0 1px rgba(240, 254, 220, .1); }
.tw-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tw-card[aria-selected="true"] .tw-face { box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9), 0 0 0 2px var(--yvo-yellow-green); }

.tw-label { position: absolute; inset: var(--header-h) 0 0; display: grid; place-items: center; margin: 0; pointer-events: none;
  font-size: var(--tw-title, 40px); letter-spacing: -.02em; font-weight: 300; color: var(--yvo-goldenrod); }
.tw-label b { font-weight: 800; color: var(--yvo-yellow-green); }
.tw-title { position: absolute; left: 5%; top: calc(50% + var(--header-h) / 2); translate: 0 -50%; width: 24%; margin: 0; pointer-events: none; opacity: 0;
  font-size: calc(var(--tw-title, 40px) * .82); line-height: 1.08; letter-spacing: -.02em; font-weight: 700; color: var(--yvo-goldenrod); text-wrap: balance; }
.tw-index { position: absolute; right: 3%; top: calc(var(--header-h) + 6%); margin: 0; padding: 0; list-style: none; text-align: right; }
.tw-index button { font: inherit; font-size: 14px; line-height: 2; border: 0; background: none; cursor: pointer; color: rgba(240, 254, 220, .45); transition: color .3s var(--e-expo); }
.tw-index button:hover { color: var(--yvo-goldenrod); }
.tw-index button.on { color: var(--yvo-yellow-green); font-weight: 700; }
.tw-index button.on::before { content: "— "; }

.tw-veil { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: var(--yvo-black); }

#time + .sb-close, .tw ~ .sb-close { margin-top: 0; }

@media (max-width: 900px) {
  .qs-in { grid-template-columns: 1fr; }
  .qs, .tw { border-radius: 32px 32px 0 0; }
  .tw-track { height: 780vh; }
  .tw-title { left: 6%; right: 6%; width: auto; top: auto; bottom: 7%; translate: none; text-align: center; font-size: 24px; }
  .tw-index { display: none; }
}
html.rm .tw-track { height: auto; }
html.rm .tw-stage { position: relative; }