.va-demo{border:1px solid var(--va-line);border-radius:12px;overflow:clip;background:var(--playht-canvas);color:var(--playht-text)}.va-demo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 20px;border-block-end:1px solid var(--playht-line);font-size:12px}.va-demo-toolbar>div{display:flex;gap:4px}.va-demo-toolbar button{display:grid;place-items:center;width:44px;height:44px;border:1px solid transparent;border-radius:6px;color:inherit;background:transparent;cursor:pointer}.va-demo-toolbar button:hover{background:var(--playht-surface);border-color:var(--playht-line)}.va-demo-recording{display:block;width:100%;height:auto;aspect-ratio:16 / 9;object-fit:contain;direction:ltr}.va-demo-screen{position:relative;aspect-ratio:16 / 9}.va-demo-screen>.va-demo-recording:not(:fullscreen){width:100%;height:100%;max-height:none}.va-demo-cover{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:var(--playht-canvas);cursor:pointer}.va-demo-cover>img{display:block;width:100%;height:100%;object-fit:cover}.va-demo-cover-action{position:absolute;inset-block-start:18px;inset-inline-end:18px;display:grid;justify-items:center;gap:10px;color:var(--primary-foreground);font-size:13px}.va-demo-cover-play{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--primary)}.va-demo-cover:hover .va-demo-cover-play{background:color-mix(in oklch,var(--primary) 85%,var(--playht-canvas))}.va-demo-cover:focus-visible{outline-offset:-5px}@media(max-width:600px){.va-demo-cover-play{width:48px;height:48px}.va-demo-cover-action{inset-block-start:12px;inset-inline-end:12px;gap:5px;font-size:11px}.va-demo-cover-action>span:last-child{display:none}}.va-demo-recording:not(:fullscreen){max-height:max(180px,calc(100svh - 240px))}.va-demo-navigation{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:0;border:0;border-block-start:1px solid var(--playht-line)}.va-demo-navigation button{display:flex;align-items:center;gap:12px;text-align:start;padding:16px;min-height:60px;border:0;border-inline-end:1px solid var(--playht-line);background:transparent;color:var(--playht-muted);font:inherit;font-size:12px;cursor:pointer}.va-demo-navigation button:last-child{border-inline-end:0}.va-demo-navigation button>span:first-child{font-size:10px;opacity:.8}.va-demo-navigation button[aria-pressed=true]{color:var(--playht-accent-text);background:color-mix(in oklch,var(--primary) 16%,var(--playht-surface));box-shadow:inset 0 -2px var(--primary)}.va-demo-navigation button:hover{color:var(--playht-text)}.va-demo-disclosure{color:var(--playht-muted);font-size:11px;line-height:1.7;margin:0;padding:16px 20px;border-block-start:1px solid var(--playht-line)}.va-demo-error{color:var(--playht-text);padding:16px 20px;font-size:13px}.va-demo-error a{color:var(--playht-accent-text)}@media(max-width:900px){.va-demo-navigation button{flex-direction:column;align-items:flex-start;gap:8px;padding:14px 10px}}@media(max-width:600px){.va-demo-toolbar{padding:8px 12px;gap:8px}.va-demo-toolbar>span{max-width:45%;font-size:11px}.va-demo-navigation{grid-template-columns:1fr}.va-demo-navigation button{flex-direction:row;align-items:center;min-height:44px;padding:12px 16px;border-inline-end:0;border-block-end:1px solid var(--playht-line)}.va-demo-navigation button:last-child{border-block-end:0}}.va-demo-toolbar .va-demo-sound{display:flex;align-items:center;gap:8px;width:auto;padding-inline:12px;font:inherit;font-size:12px;line-height:1.3}.va-demo-toolbar .va-demo-sound[data-audible=false]{background:var(--primary);color:var(--primary-foreground)}.va-demo-sound svg{flex-shrink:0}@media(max-width:600px){.va-demo-toolbar{flex-wrap:wrap}.va-demo-toolbar>span{max-width:none;width:100%}.va-demo-toolbar>div{width:100%}.va-demo-toolbar button{flex-shrink:0}.va-demo-toolbar .va-demo-sound{flex:1;min-width:0;height:auto;min-height:44px;font-size:11px;text-align:start;padding:8px}}.va-demo-recording::cue{font-size:clamp(16px,3vw,36px);line-height:1.35;color:#fff;background-color:#101111e5}