/* Scene 9 - themes: one Today UI, eight accent seeds and light/dark, all live.
 * The stage carries data-seed (the whole scene recolours, with the token system's own colour transitions);
 * the UI exists twice - a light and a dark twin - and a curtain line sweeps across them as you scroll. */
.themes-slot { left: max(33%, calc(var(--gutter) + min(24rem, 32vw) + 24px)); right: 108px; top: 70px; bottom: 22px; z-index: 3; }
.themes-copy { width: min(24rem, 32vw); }

/* seed chips: each wears its own M3E shape */
.seeds { display: grid; grid-template-columns: repeat(4, 48px); gap: 14px 16px; margin-top: 26px; }
.tseed { position: relative; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; will-change: transform; }
.tseed svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tseed path { fill: var(--sc); }
.tseed .ms { position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; color: #fff; opacity: 0; font-variation-settings: 'wght' 700; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.tseed .sr { position: absolute; left: -5px; top: -5px; right: -5px; bottom: -5px; border-radius: 50%; border: 2.5px solid var(--ink); opacity: 0; }
.tseed.on .ms { opacity: 1; } .tseed.on .sr { opacity: 0.85; }
.tseed:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }
.seed-cap { display: flex; align-items: center; gap: 12px; margin-top: 20px; min-height: 34px; }
.seed-cap b { font-size: 15px; font-weight: 700; color: var(--accent-ink); min-width: 4.5em; }
.modes { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--inset); }
.modes span { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--ink2);
  transition: background var(--dur-effects) var(--ease-effects), color var(--dur-effects) var(--ease-effects); }
.modes span .ms { font-size: 17px; }
.modes span.on { background: var(--accent); color: var(--on-accent); }

/* the twin windows */
.th-pair { position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; will-change: transform, opacity; }
.th-pair .appwin { left: 0; top: 0; transform: none; width: 100%; height: 100%; will-change: auto; }
.th-pair .th-dark { will-change: clip-path; }
.th-handle { position: absolute; top: 0; bottom: 0; left: 0; width: 0; z-index: 5; pointer-events: none; will-change: transform, opacity; }
.th-handle::before { content: ''; position: absolute; left: -1.5px; top: 0; bottom: 0; width: 3px; border-radius: 2px; background: var(--accent); }
.th-knob { position: absolute; left: -22px; top: 50%; margin-top: -22px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface); color: var(--accent-ink); box-shadow: var(--shadow-lift), inset 0 0 0 2px var(--accent); }
.th-knob .ms { position: absolute; font-size: 24px; font-variation-settings: 'FILL' 1; transition: opacity 0.2s, transform var(--dur-spatial) var(--ease-spatial); }
.th-knob .k-dark { opacity: 0; transform: scale(0.4) rotate(-70deg); }
.th-knob.dk .k-dark { opacity: 1; transform: none; } .th-knob.dk .k-light { opacity: 0; transform: scale(0.4) rotate(70deg); }

@media (max-width: 759px) {
  .th-pair .tcards .tcard:nth-child(n+4) { display: none; }
  .themes-slot { left: 0; right: 0; top: 250px; bottom: 56px; }
  .themes-copy { width: auto; }
  .themes-copy .lead { display: none; }
  .static .themes-copy .lead { display: block; }
  .seeds { grid-template-columns: repeat(8, 1fr); gap: 0 6px; margin-top: 14px; }
  .tseed { width: auto; height: 34px; aspect-ratio: 1; }
  .tseed .ms { font-size: 17px; } .tseed .sr { left: -3px; top: -3px; right: -3px; bottom: -3px; border-width: 2px; }
  .seed-cap { margin-top: 10px; min-height: 30px; }
  .static #themes .stage { min-height: 1060px; }
  .static #themes .themes-slot { top: 470px; bottom: 24px; }
}