.spx-lchrome-sheet{container:stage/inline-size}.spx-showcase{grid-template-columns:1fr;align-items:start;display:grid}@container stage (width>=44rem){.spx-showcase{grid-template-columns:13rem minmax(0,48rem) 1fr}}.spx-showcase__main{min-width:0;padding:var(--space-2) 0 var(--space-16) var(--space-8);container:detail/inline-size}.spx-showcase-nav{align-self:start;gap:var(--space-4);max-height:100dvh;padding:var(--space-2) var(--space-5) var(--space-8) 0;border-right:.5px solid var(--border);font-family:var(--font-sans);flex-direction:column;display:flex;position:sticky;top:0;overflow-y:auto}.spx-showcase-nav__toggle{display:none}.spx-showcase-nav__list{display:contents}@container stage (width<=44rem){.spx-showcase-nav{max-height:none;margin-bottom:var(--space-5);border-right:none;gap:0;padding:0;position:static}.spx-showcase-nav__toggle{width:100%;padding:var(--space-3) var(--space-4);border:.5px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm);font-family:var(--font-sans);font-size:var(--text-base);font-weight:var(--weight-medium);color:var(--text);cursor:pointer;justify-content:space-between;align-items:center;display:flex}.spx-showcase-nav__chevron{color:var(--text-secondary);transition:transform .15s}.spx-showcase-nav[data-open=true] .spx-showcase-nav__chevron{transform:rotate(180deg)}.spx-showcase-nav__list{margin-top:var(--space-2);border:.5px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);max-height:60vh;padding:var(--space-3);display:none;overflow-y:auto}.spx-showcase-nav[data-open=true] .spx-showcase-nav__list{display:block}.spx-showcase__main{padding:0}}.spx-showcase-nav__group{gap:var(--space-1);flex-direction:column;display:flex}.spx-showcase-nav__family{font-family:var(--font-mono);font-size:var(--text-mono);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--text-tertiary,var(--text-secondary));padding:var(--space-2) var(--space-3) var(--space-1)}.spx-showcase-nav__link{padding:var(--space-1) var(--space-3);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--text-secondary);border-left:2px solid #0000;text-decoration:none;transition:color .12s,background .12s;display:block}.spx-showcase-nav__link:hover{color:var(--text);background:color-mix(in oklab, var(--ink,#000) 4%, transparent)}.spx-showcase-nav__link.is-active{color:var(--accent-text,var(--accent));border-left-color:var(--accent);font-weight:var(--weight-medium)}.spx-doc-component{gap:var(--space-8);max-width:60rem;font-family:var(--font-sans);flex-direction:column;display:flex}.spx-doc-component__header{gap:var(--space-4);padding-bottom:var(--space-6);border-bottom:.5px solid var(--border);flex-direction:column;display:flex}.spx-doc-component__titlerow{align-items:baseline;gap:var(--space-4);flex-wrap:wrap;display:flex}.spx-doc-component__name{font-size:var(--text-h1);line-height:var(--leading-h1);letter-spacing:var(--tracking-h1);font-weight:var(--weight-bold);color:var(--ink);margin:0}.spx-doc-component__badges{gap:var(--space-2);align-items:center;display:inline-flex}.spx-doc-component__badge{padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);background:var(--bg-sunken);border:.5px solid var(--border);font-family:var(--font-mono);font-size:var(--text-mono);letter-spacing:var(--tracking-mono);font-weight:var(--weight-medium);color:var(--text-secondary);text-transform:lowercase;align-items:center;display:inline-flex}.spx-doc-component__badge--status{background:var(--accent-subtle);border-color:var(--accent-5);color:var(--accent-text)}.spx-doc-component__lead{max-width:60ch;font-size:var(--text-lg);line-height:var(--leading-lg);letter-spacing:var(--tracking-lg);color:var(--text-secondary);margin:0}.spx-doc-component__body{gap:var(--space-8);flex-direction:column;min-width:0;display:flex}.spx-play{gap:var(--space-4);grid-template-columns:1fr;align-items:stretch;display:grid}@container detail (width>=34rem){.spx-play{grid-template-columns:minmax(16rem,1fr) 14rem}}.spx-play__stage{min-height:9rem;max-height:30rem;padding:var(--space-8);border-radius:var(--radius-lg);background:var(--bg-sunken);border:.5px solid var(--border);justify-content:center;align-items:center;display:flex;overflow:auto}.spx-play__panel{gap:var(--space-4);padding:var(--space-5);border-radius:var(--radius-lg);background:var(--surface);border:.5px solid var(--border);box-shadow:var(--shadow-sm);flex-direction:column;display:flex}.spx-play__panel-title{font-family:var(--font-mono);font-size:var(--text-mono);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--text-tertiary,var(--text-secondary))}.spx-play__control{gap:var(--space-2);flex-direction:column;display:flex}.spx-play__control--row{flex-direction:row;justify-content:space-between;align-items:center}.spx-play__control-name{font-family:var(--font-mono);font-size:var(--text-mono);letter-spacing:var(--tracking-mono);color:var(--text-secondary)}.spx-play__seg{border-radius:var(--radius-md);background:var(--bg-sunken);border:.5px solid var(--border);flex-wrap:wrap;gap:2px;padding:2px;display:flex}.spx-play__seg button{appearance:none;cursor:pointer;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:var(--text-mono);color:var(--text-secondary);background:0 0;border:none;transition:color .12s,background .12s}.spx-play__seg button:hover{color:var(--text)}.spx-play__seg button.is-active{background:var(--surface);color:var(--accent-text,var(--accent));box-shadow:var(--shadow-sm)}.spx-play__switch{--w:2.2rem;--h:1.25rem;width:var(--w);height:var(--h);cursor:pointer;border-radius:var(--radius-full);background:color-mix(in oklab, var(--ink,#000) 15%, transparent);border:none;flex:none;transition:background .15s;position:relative}.spx-play__switch.is-on{background:var(--accent)}.spx-play__switch-dot{width:calc(var(--h) - 4px);height:calc(var(--h) - 4px);background:#fff;border-radius:50%;transition:transform .15s;position:absolute;top:2px;left:2px}.spx-play__switch.is-on .spx-play__switch-dot{transform:translateX(calc(var(--w) - var(--h)))}.spx-play__input{padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:var(--bg-sunken);border:.5px solid var(--border);color:var(--text);font-family:var(--font-sans);font-size:var(--text-sm)}.spx-play__input:focus{border-color:var(--accent);outline:none}.spx-play__trigger{appearance:none;cursor:pointer;padding:var(--space-2) var(--space-5);border-radius:var(--radius-full);background:var(--surface);border:.5px solid var(--border);box-shadow:var(--shadow-sm);font-family:var(--font-sans);font-size:var(--text-sm);color:var(--text);transition:background .12s,border-color .12s}.spx-play__trigger:hover{border-color:var(--accent);color:var(--accent-text,var(--accent))}.spx-play__stage{position:relative}.spx-play__hint{bottom:var(--space-3);text-align:center;font-family:var(--font-mono);font-size:var(--text-mono);letter-spacing:var(--tracking-mono);color:var(--text-tertiary,var(--text-secondary));pointer-events:none;position:absolute;left:0;right:0}