/* Shared by the study page and opt-in previews on the actual site. */
.selection-scope { --selected-bg:#171717; --selected-ink:#fff; --selected-line:transparent; --motion-duration:180ms; --motion-ease:cubic-bezier(.2,0,0,1); }
.selection-scope[data-nav-style=lavender] { --selected-bg:#eadff2; --selected-ink:#28212d; }
.selection-scope[data-nav-style=sage] { --selected-bg:#dbe8df; --selected-ink:#223a2b; }
.selection-scope[data-nav-style=butter] { --selected-bg:#f5edba; --selected-ink:#3b351c; }
.selection-scope[data-nav-style=outline] { --selected-bg:#fff; --selected-ink:#171717; --selected-line:#171717; }
.selection-scope[data-nav-style=rail] { --selected-bg:#f5f5f5; --selected-ink:#111; }
.selection-scope .selection-item,
.selection-scope .selection-item:hover,
.selection-scope .selection-item[aria-current=page],
.selection-scope .selection-item:has(.studio-about[aria-current=page]) { position:relative; isolation:isolate; overflow:hidden; background:#f5f5f5; color:#111; transition:transform var(--motion-duration) var(--motion-ease); }
.selection-scope .selection-item:hover { background:#eeeeee; }
.selection-surface { position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:inherit; border-radius:inherit; pointer-events:none; background:var(--selected-bg); color:var(--selected-ink); box-shadow:inset 0 0 0 2px var(--selected-line); opacity:0; transition:opacity var(--motion-duration) var(--motion-ease); z-index:1; }
.selection-scope .selection-item[data-selected=true] > .selection-surface { opacity:1; }
.selection-surface > span:first-child { min-width:0; }
.selection-scope[data-nav-style=rail] .selection-surface::after { content:''; position:absolute; left:10px; top:calc(50% - 14px); width:3px; height:28px; background:#111; border-radius:2px; }
.selection-scope[data-nav-style=rail] .selection-surface > span:first-child { font-weight:600; }
.selection-surface--intro { display:block; }
.selection-surface--intro p { font:inherit; line-height:1.65; }
.selection-scope .studio-note .studio-actions { position:relative; z-index:2; }
.selection-scope .studio-note .studio-actions .pill { color:#111; }
.selection-scope .selection-item:focus-visible { outline:2px solid #715b82; outline-offset:3px; }
.selection-scope .studio-note:has(.studio-about:focus-visible) { outline:2px solid #715b82; outline-offset:3px; }
.selection-scope[data-nav-motion=wipe] .selection-surface { opacity:1; clip-path:inset(0 100% 0 0 round 10px); transition:clip-path var(--motion-duration) var(--motion-ease); }
.selection-scope[data-nav-motion=wipe] .selection-item[data-selected=true] > .selection-surface { clip-path:inset(0 0 0 0 round 10px); }
.selection-scope[data-nav-motion=rise] .selection-surface { opacity:1; clip-path:inset(100% 0 0 0 round 10px); transition:clip-path var(--motion-duration) var(--motion-ease); }
.selection-scope[data-nav-motion=rise] .selection-item[data-selected=true] > .selection-surface { clip-path:inset(0 0 0 0 round 10px); }
.selection-scope[data-nav-motion=ripple] .selection-surface { opacity:1; clip-path:circle(0% at var(--click-x,50%) var(--click-y,50%)); transition:clip-path var(--motion-duration) var(--motion-ease); }
.selection-scope[data-nav-motion=ripple] .selection-item[data-selected=true] > .selection-surface { clip-path:circle(150% at var(--click-x,50%) var(--click-y,50%)); }
.selection-scope[data-nav-motion=center] .selection-surface { opacity:0; transform:scale(.94); transition:transform var(--motion-duration) var(--motion-ease),opacity var(--motion-duration) var(--motion-ease); }
.selection-scope[data-nav-motion=center] .selection-item[data-selected=true] > .selection-surface { opacity:1; transform:scale(1); }
.selection-scope[data-nav-motion=press] .selection-item:active,
.selection-scope[data-nav-motion=press] .selection-item.is-pressed { transform:scale(.96); }
.selection-scope[data-motion-ready=false] .selection-item,
.selection-scope[data-motion-ready=false] .selection-surface { transition:none!important; }
@media(prefers-reduced-motion:reduce) {
  .selection-scope .selection-item,.selection-scope .selection-surface { transition:none!important; transform:none!important; }
}