.demo-entry{display:grid;gap:var(--space-6);max-width:36rem;margin-top:var(--space-8)}.demo-entry__code{font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.demo-entry__hint{margin:0;color:var(--text-secondary);font-size:var(--text-sm)}.demo-entry__note{margin:0;padding:var(--space-3) var(--space-4);border-left:3px solid var(--status-available);background:var(--surface-raised)}.demo-viewer{display:grid;gap:var(--space-4)}.demo-bar{position:sticky;top:var(--header-height);z-index:5;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3) var(--space-6);padding:var(--space-4);border-radius:var(--radius-md);background:var(--surface-inverse);color:var(--text-on-inverse);box-shadow:var(--shadow-md)}.demo-bar p{margin:0}.demo-bar__label{font-weight:var(--weight-semibold)}.demo-bar__notice,.demo-bar__expiry{font-size:var(--text-sm)}.demo-bar__actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}.demo-bar__actions form{margin:0}.demo-bar .button--secondary{border-color:var(--sand-200);color:var(--text-on-inverse)}.demo-frame{display:block;width:100%;height:calc(100vh - var(--header-height) - 12rem);min-height:28rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-raised)}.demo-bar__icon{flex:none}.demo-checking{min-height:50vh}.demo-loading{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-6);background:color-mix(in srgb,var(--surface) 90%,transparent)}.demo-loading__spinner{width:4.5rem;height:4.5rem;border:6px solid var(--border);border-top-color:var(--cta-fill);border-radius:var(--radius-pill);animation:demo-spin .9s linear infinite}.demo-loading__label{margin:0;color:var(--text-strong);font-size:var(--text-lg);font-weight:var(--weight-semibold)}@keyframes demo-spin{to{transform:rotate(360deg)}}.demo-tabs{display:flex;gap:var(--space-2);border-bottom:1px solid var(--border)}.demo-tabs__tab{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;padding:var(--space-2) var(--space-4);border:0;border-bottom:3px solid transparent;background:none;color:var(--text-primary);font:inherit;font-weight:var(--weight-semibold);cursor:pointer}.demo-tabs__tab[aria-selected=true]{border-bottom-color:var(--cta-fill);color:var(--text-strong)}.demo-tabs__spinner{width:1rem;height:1rem;border:2px solid var(--border);border-top-color:var(--cta-fill);border-radius:var(--radius-pill);animation:demo-spin .9s linear infinite}.demo-player{display:flex;flex-direction:column;width:100%;max-width:1280px;margin-inline:auto;overflow:hidden;border-radius:var(--radius-md);background:var(--surface-inverse);color:var(--text-on-inverse)}.demo-player:fullscreen{max-width:none;border-radius:0}.demo-player :focus-visible{outline-color:var(--text-on-inverse)}.demo-player__stage{position:relative;aspect-ratio:16 / 9;max-width:100%}.demo-player:fullscreen .demo-player__stage{flex:1 1 auto;aspect-ratio:auto}.demo-player__video{display:block;width:100%;height:100%;object-fit:contain;background:var(--surface-inverse)}.demo-player__big-play{position:absolute;top:50%;left:50%;display:flex;align-items:center;justify-content:center;width:4.5rem;height:4.5rem;border:0;border-radius:var(--radius-pill);background:var(--cta-fill);color:var(--cta-text);box-shadow:var(--shadow-md);cursor:pointer;transform:translate(-50%,-50%)}.demo-player__big-play:hover{background:var(--cta-fill-hover)}.demo-player__big-play svg{width:2.25rem;height:2.25rem}.demo-player__status,.demo-player__failure{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);padding:var(--space-4);text-align:center}.demo-player__failure{background:var(--surface-inverse)}.demo-player__failure p{margin:0}.demo-player__spinner{width:3.5rem;height:3.5rem;border:5px solid var(--gray-500);border-top-color:var(--text-on-inverse);border-radius:var(--radius-pill);animation:demo-spin .9s linear infinite}.demo-player__controls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-2);padding:var(--space-1) var(--space-2)}.demo-player__button{display:inline-flex;flex:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--radius-sm);background:none;color:var(--text-on-inverse);cursor:pointer}.demo-player__time{flex:none;font-size:var(--text-sm);font-variant-numeric:tabular-nums;white-space:nowrap}.demo-player__range{position:relative;display:flex;align-items:center;height:44px}.demo-player__range--seek{flex:1 1 10rem;min-width:8rem}.demo-player__range--volume{flex:0 1 6rem;min-width:4rem}.demo-player__rail{position:absolute;right:0;left:0;height:6px;overflow:hidden;border-radius:var(--radius-pill);background:var(--ocean-700)}.demo-player__buffered,.demo-player__played{position:absolute;top:0;bottom:0;left:0}.demo-player__buffered{background:var(--gray-500)}.demo-player__played{background:var(--sky-400)}.demo-player__input{position:relative;width:100%;height:44px;margin:0;background:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.demo-player__input:disabled{cursor:default}.demo-player__input::-webkit-slider-runnable-track{height:44px;background:none}.demo-player__input::-moz-range-track{height:44px;background:none}.demo-player__input::-webkit-slider-thumb{width:16px;height:16px;margin-top:14px;border:0;border-radius:var(--radius-pill);background:var(--text-on-inverse);-webkit-appearance:none;-moz-appearance:none;appearance:none}.demo-player__input::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:var(--radius-pill);background:var(--text-on-inverse)}.demo-dialog{width:min(40rem,calc(100vw - 2 * var(--space-4)));max-height:calc(100vh - 2 * var(--space-8));padding:var(--space-6);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface-raised);color:var(--text-primary);box-shadow:var(--shadow-md)}.demo-dialog::backdrop{background:color-mix(in srgb,var(--surface-inverse) 55%,transparent)}.demo-dialog h2{margin-top:0}.demo-dialog__note{color:var(--text-secondary)}.demo-dialog__actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}@media(max-width:40rem){.demo-bar{padding:var(--space-3)}.demo-bar__actions{width:100%}.demo-bar__actions>*,.demo-bar__actions form .button{flex:1 1 auto;width:100%}.demo-tabs__tab{flex:1 1 0;padding-inline:var(--space-2)}.demo-player__range--seek{flex-basis:100%;order:-1}.demo-player__range--volume{display:none}}