.studio-player{position:relative;width:100%;min-width:0;overflow:hidden;aspect-ratio:9/16;background:#14141a;border:1px solid rgba(212,175,55,.2);border-radius:8px}.studio-video-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:9px;background:#28190cd9;color:#fff8f0;font-size:12px;pointer-events:none}.studio-play-button,.studio-player video{width:100%;height:100%;object-fit:contain}.studio-player video{display:block;border:0}.studio-video-error{margin-top:8px;font-size:12px;color:#b76133}.studio-video-length{position:absolute;right:12px;bottom:16px;padding:3px 6px;border-radius:3px;background:#221710b3;color:white;font-size:10px}.studio-play-button{position:relative;display:block;border:0;text-align:left}.studio-play-button img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .55s cubic-bezier(.2,.8,.2,1)}.studio-play-button:hover img{transform:scale(1.035)}.studio-play-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:52px;height:52px;padding-left:2px;border-radius:50%;color:white;background:#1d160a66;border:1px solid #ffffff75;backdrop-filter:blur(8px);transition:background .2s}.studio-play-button:hover .studio-play-icon{background:#1d160ab3}.studio-section.studio-showcase{padding-block:64px;background:var(--studio-paper)}.studio-showcase h2{margin:0;text-wrap:balance}.studio-showcase .studio-shell{padding-inline:var(--showcase-gutter,var(--page-gutter))}.studio-showcase-tabs{display:flex;gap:32px;margin-block:24px;padding:5px 5px 0;overflow-x:auto;border-bottom:1px solid var(--border);scrollbar-width:thin;scrollbar-color:var(--workspace-hint) transparent}.studio-showcase-tab{flex:0 0 auto;min-height:48px;padding:8px 0 16px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--workspace-secondary);font-size:15px;font-weight:500;white-space:nowrap;transition:color .16s ease}.studio-showcase-tab:hover{color:var(--page-heading)}.studio-showcase-tab[aria-selected=true]{border-bottom-color:var(--primary);color:var(--brand-text)}.studio-showcase-panel{min-width:0;display:flex;flex-direction:column;justify-content:flex-start}.studio-showcase-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:24px;margin:0;padding:0;list-style:none;width:100%}.studio-showcase-grid.is-horizontal{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:1200px;margin-inline:auto}.studio-showcase-grid.is-vertical{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;max-width:900px;margin-inline:auto;align-items:start}.studio-showcase-grid.is-vertical .studio-showcase-item{display:flex;flex-direction:column;align-items:center}.studio-showcase-grid.is-vertical .studio-example-player{width:100%;max-width:175px}.studio-showcase-grid.is-vertical .studio-player{width:100%;max-width:175px;max-height:310px;aspect-ratio:9/16;margin-inline:auto}.studio-showcase-grid.is-vertical .studio-showcase-caption{text-align:center}.studio-showcase-item{min-width:0}.studio-showcase-item .studio-player{border:0;border-radius:12px}.studio-showcase-item .studio-play-button img{transform:none;transition:none}.studio-showcase-item .studio-play-icon{width:48px;height:48px;backdrop-filter:none}.studio-showcase-item .studio-video-length{bottom:12px;font-size:11px;font-variant-numeric:tabular-nums}.studio-showcase-item .studio-showcase-caption{margin:12px 0 0;color:var(--workspace-secondary);font-size:14px;font-weight:500;line-height:1.5;letter-spacing:normal}.studio-showcase-pagination{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:24px;color:var(--workspace-secondary);font-size:13px;font-variant-numeric:tabular-nums}.studio-showcase-tool-link{display:flex;justify-content:center;margin-top:24px}.studio-showcase-pagination button{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--page-heading)}.studio-showcase-pagination button:hover:not(:disabled){background:var(--surface-hover)}.studio-showcase-pagination button:disabled{opacity:.4;cursor:not-allowed}@media (max-width:767px){.studio-section.studio-showcase{--showcase-gutter:20px;padding-block:40px}.studio-showcase-tabs{gap:24px;margin-block:16px 24px}.studio-showcase-grid.is-horizontal,.studio-showcase-grid.is-vertical{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:86%;gap:16px;margin-inline:calc(-1 * var(--showcase-gutter));padding:5px var(--showcase-gutter) 12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--showcase-gutter);scrollbar-width:none}.studio-showcase-grid::-webkit-scrollbar{display:none}.studio-showcase-grid.is-vertical{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:58%;max-width:none}.studio-showcase-grid.is-vertical .studio-player{max-width:none;max-height:none}.studio-showcase-grid.is-vertical .studio-example-player{max-width:none}.studio-showcase-item{scroll-snap-align:start}}