.preview-surface[data-astro-cid-chmparab]{overscroll-behavior:contain;scrollbar-width:thin;place-items:center;block-size:100%;min-block-size:0;inline-size:100%;display:grid;overflow:auto}.wide-control[data-astro-cid-chmparab]{grid-column:1/-1}.media-state-demo[data-astro-cid-chmparab]{gap:var(--gap);border:1px solid color-mix(in oklch, var(--brand-blue) 34%, transparent);border-radius:calc(var(--radius) * .85);corner-shape:var(--corner-shape);background:radial-gradient(circle at 10% 14%, color-mix(in oklch, var(--brand-orange) 22%, transparent), transparent 34%), radial-gradient(circle at 90% 88%, color-mix(in oklch, var(--brand-blue) 24%, transparent), transparent 32%), color-mix(in oklch, var(--surface-strong) 90%, transparent);inline-size:min(100%,48rem);padding:clamp(1rem,4vw,1.5rem);display:grid;box-shadow:inset 0 0 0 1px oklch(100% 5.96046e-8 none/.14),0 1.25rem 2.5rem oklch(0% none none/.18);& .preview-header p,& .state-note{color:var(--text-muted);text-wrap:pretty;line-height:1.55}& .media-grid{gap:var(--gap);grid-template-columns:minmax(0,1.2fr) minmax(14rem,.8fr);display:grid;@media (width<=48rem){grid-template-columns:1fr}}&[data-media-target=video] [data-astro-cid-chmparab][data-media-card=audio],&[data-media-target=audio] [data-astro-cid-chmparab][data-media-card=video]{opacity:.42}& .media-card{min-inline-size:0;padding:var(--padding);border:1px solid color-mix(in oklch, var(--brand-blue) 22%, transparent);border-radius:calc(var(--radius) * .65);corner-shape:var(--corner-shape);background:color-mix(in oklch, var(--surface) 82%, transparent);align-content:start;gap:.65rem;display:grid}& .media-card span{color:var(--text-muted);letter-spacing:.04em;text-transform:uppercase;font-size:.74rem;font-weight:850}& :where(video,audio).media-sample{border:2px solid color-mix(in oklch, var(--brand-blue) 30%, transparent);border-radius:calc(var(--radius) * .55);background-color:color-mix(in oklch, var(--surface-strong) 88%, black);inline-size:100%;transition:background-color .2s,border-color .2s,box-shadow .2s,scale .2s;box-shadow:0 .85rem 1.65rem oklch(0% none none/.14)}& video.media-sample{aspect-ratio:16/9;object-fit:cover}& audio.media-sample{min-block-size:3.25rem}& .media-actions{flex-wrap:wrap;gap:.65rem;display:flex}& .media-actions button{border:1px solid color-mix(in oklch, var(--brand-blue) 32%, transparent);background:color-mix(in oklch, var(--surface) 92%, transparent);color:var(--text);font:inherit;cursor:pointer;border-radius:999px;padding-block:.68rem;padding-inline:.95rem;font-weight:800;transition:border-color .2s,background-color .2s,translate .2s;@media (any-hover:hover){&:hover{border-color:color-mix(in oklch, var(--brand-orange) 58%, var(--text));translate:0 -.05rem}}&:focus-visible{outline:.2rem solid var(--brand-orange);outline-offset:.2rem}}&[data-simulate-state=true][data-media-target=both] :where(video,audio).media-sample[data-astro-cid-chmparab],&[data-simulate-state=true][data-media-target=video] video[data-astro-cid-chmparab].media-sample,&[data-simulate-state=true][data-media-target=audio] audio[data-astro-cid-chmparab].media-sample{border-color:var(--media-state-indicator-color);background-color:var(--media-state-surface-color);box-shadow:0 0 0 var(--media-state-ring-width) color-mix(in oklch, var(--media-state-indicator-color) 44%, transparent), 0 1rem 2rem oklch(0% none none/.18);scale:var(--media-state-scale)}}.media-state-demo[data-astro-cid-chmparab][data-simulate-state=false][data-media-pseudo=playing][data-media-target=both] :where(video,audio).media-sample[data-astro-cid-chmparab]:playing{border-color:var(--media-state-indicator-color);background-color:var(--media-state-surface-color);box-shadow:0 0 0 var(--media-state-ring-width) color-mix(in oklch, var(--media-state-indicator-color) 44%, transparent), 0 1rem 2rem oklch(0% none none/.18);scale:var(--media-state-scale)}.media-state-demo[data-astro-cid-chmparab][data-simulate-state=false][data-media-pseudo=playing][data-media-target=video] video[data-astro-cid-chmparab].media-sample:playing{border-color:var(--media-state-indicator-color);background-color:var(--media-state-surface-color);box-shadow:0 0 0 var(--media-state-ring-width) color-mix(in oklch, var(--media-state-indicator-color) 44%, transparent), 0 1rem 2rem oklch(0% none none/.18);scale:var(--media-state-scale)}.media-state-demo[data-astro-cid-chmparab][data-simulate-state=false][data-media-pseudo=playing][data-media-target=audio] audio[data-astro-cid-chmparab].media-sample:playing{border-color:var(--media-state-indicator-color);background-color:var(--media-state-surface-color);box-shadow:0 0 0 var(--media-state-ring-width) color-mix(in oklch, var(--media-state-indicator-color) 44%, transparent), 0 1rem 2rem oklch(0% none none/.18);scale:var(--media-state-scale)}.media-state-demo[data-astro-cid-chmparab][data-simulate-state=false][data-media-pseudo=paused][data-media-target=both] :where(video,audio).media-sample[data-astro-cid-chmparab]:paused{border-color:var(--media-state-indicator-color);background-color:var(--media-state-surface-color);box-shadow:0 0 0 var(--media-state-ring-width) color-mix(in oklch, var(--media-state-indicator-color) 44%, transparent), 0 1rem 2rem oklch(0% none none/.18);scale:var(--media-state-scale)}.media-state-demo[data-astro-cid-chmparab][data-simulate-state=false][data-media-pseudo=paused][data-media-target=video] video[data-astro-cid-chmparab].media-sample:paused{border-color:var(--media-state-indicator-color);background-color:var(--media-state-surface-color);box-shadow:0 0 0 var(--media-state-ring-width) color-mix(in oklch, var(--media-state-indicator-color) 44%, transparent), 0 1rem 2rem oklch(0% none none/.18);scale:var(--media-state-scale)}.media-state-demo[data-astro-cid-chmparab][data-simulate-state=false][data-media-pseudo=paused][data-media-target=audio] audio[data-astro-cid-chmparab].media-sample:paused{border-color:var(--media-state-indicator-color);background-color:var(--media-state-surface-color);box-shadow:0 0 0 var(--media-state-ring-width) color-mix(in oklch, var(--media-state-indicator-color) 44%, transparent), 0 1rem 2rem oklch(0% none none/.18);scale:var(--media-state-scale)}.media-state-demo[data-astro-cid-chmparab][data-simulate-state=false][data-media-pseudo=seeking][data-media-target=both] :where(video,audio).media-sample[data-astro-cid-chmparab]:seeking{border-color:var(--media-state-indicator-color);background-color:var(--media-state-surface-color);box-shadow:0 0 0 var(--media-state-ring-width) color-mix(in oklch, var(--media-state-indicator-color) 44%, transparent), 0 1rem 2rem oklch(0% none none/.18);scale:var(--media-state-scale)}.media-state-demo[data-astro-cid-chmparab][data-simulate-state=false][data-media-pseudo=seeking][data-media-target=video] video[data-astro-cid-chmparab].media-sample:seeking{border-color:var(--media-state-indicator-color);background-color:var(--media-state-surface-color);box-shadow:0 0 0 var(--media-state-ring-width) color-mix(in oklch, var(--media-state-indicator-color) 44%, transparent), 0 1rem 2rem oklch(0% none none/.18);scale:var(--media-state-scale)}.media-state-demo[data-astro-cid-chmparab][data-simulate-state=false][data-media-pseudo=seeking][data-media-target=audio] audio[data-astro-cid-chmparab].media-sample:seeking{border-color:var(--media-state-indicator-color);background-color:var(--media-state-surface-color);box-shadow:0 0 0 var(--media-state-ring-width) color-mix(in oklch, var(--media-state-indicator-color) 44%, transparent), 0 1rem 2rem oklch(0% none none/.18);scale:var(--media-state-scale)}.media-state-demo[data-astro-cid-chmparab][data-simulate-state=false][data-media-pseudo=buffering][data-media-target=both] :where(video,audio).media-sample[data-astro-cid-chmparab]:buffering{border-color:var(--media-state-indicator-color);background-color:var(--media-state-surface-color);box-shadow:0 0 0 var(--media-state-ring-width) color-mix(in oklch, var(--media-state-indicator-color) 44%, transparent), 0 1rem 2rem oklch(0% none none/.18);scale:var(--media-state-scale)}.media-state-demo[data-astro-cid-chmparab][data-simulate-state=false][data-media-pseudo=buffering][data-media-target=video] video[data-astro-cid-chmparab].media-sample:buffering{border-color:var(--media-state-indicator-color);background-color:var(--media-state-surface-color);box-shadow:0 0 0 var(--media-state-ring-width) color-mix(in oklch, var(--media-state-indicator-color) 44%, transparent), 0 1rem 2rem oklch(0% none none/.18);scale:var(--media-state-scale)}.media-state-demo[data-astro-cid-chmparab][data-simulate-state=false][data-media-pseudo=buffering][data-media-target=audio] audio[data-astro-cid-chmparab].media-sample:buffering{border-color:var(--media-state-indicator-color);background-color:var(--media-state-surface-color);box-shadow:0 0 0 var(--media-state-ring-width) color-mix(in oklch, var(--media-state-indicator-color) 44%, transparent), 0 1rem 2rem oklch(0% none none/.18);scale:var(--media-state-scale)}.media-state-demo[data-astro-cid-chmparab][data-simulate-state=false][data-media-pseudo=stalled][data-media-target=both] :where(video,audio).media-sample[data-astro-cid-chmparab]:stalled{border-color:var(--media-state-indicator-color);background-color:var(--media-state-surface-color);box-shadow:0 0 0 var(--media-state-ring-width) color-mix(in oklch, var(--media-state-indicator-color) 44%, transparent), 0 1rem 2rem oklch(0% none none/.18);scale:var(--media-state-scale)}.media-state-demo[data-astro-cid-chmparab][data-simulate-state=false][data-media-pseudo=stalled][data-media-target=video] video[data-astro-cid-chmparab].media-sample:stalled{border-color:var(--media-state-indicator-color);background-color:var(--media-state-surface-color);box-shadow:0 0 0 var(--media-state-ring-width) color-mix(in oklch, var(--media-state-indicator-color) 44%, transparent), 0 1rem 2rem oklch(0% none none/.18);scale:var(--media-state-scale)}.media-state-demo[data-astro-cid-chmparab][data-simulate-state=false][data-media-pseudo=stalled][data-media-target=audio] audio[data-astro-cid-chmparab].media-sample:stalled{border-color:var(--media-state-indicator-color);background-color:var(--media-state-surface-color);box-shadow:0 0 0 var(--media-state-ring-width) color-mix(in oklch, var(--media-state-indicator-color) 44%, transparent), 0 1rem 2rem oklch(0% none none/.18);scale:var(--media-state-scale)}.media-state-demo[data-astro-cid-chmparab][data-simulate-state=false][data-media-pseudo=muted][data-media-target=both] :where(video,audio).media-sample[data-astro-cid-chmparab]:muted{border-color:var(--media-state-indicator-color);background-color:var(--media-state-surface-color);box-shadow:0 0 0 var(--media-state-ring-width) color-mix(in oklch, var(--media-state-indicator-color) 44%, transparent), 0 1rem 2rem oklch(0% none none/.18);scale:var(--media-state-scale)}.media-state-demo[data-astro-cid-chmparab][data-simulate-state=false][data-media-pseudo=muted][data-media-target=video] video[data-astro-cid-chmparab].media-sample:muted{border-color:var(--media-state-indicator-color);background-color:var(--media-state-surface-color);box-shadow:0 0 0 var(--media-state-ring-width) color-mix(in oklch, var(--media-state-indicator-color) 44%, transparent), 0 1rem 2rem oklch(0% none none/.18);scale:var(--media-state-scale)}.media-state-demo[data-astro-cid-chmparab][data-simulate-state=false][data-media-pseudo=muted][data-media-target=audio] audio[data-astro-cid-chmparab].media-sample:muted{border-color:var(--media-state-indicator-color);background-color:var(--media-state-surface-color);box-shadow:0 0 0 var(--media-state-ring-width) color-mix(in oklch, var(--media-state-indicator-color) 44%, transparent), 0 1rem 2rem oklch(0% none none/.18);scale:var(--media-state-scale)}.media-state-demo[data-astro-cid-chmparab][data-simulate-state=false][data-media-pseudo=volume-locked][data-media-target=both] :where(video,audio).media-sample[data-astro-cid-chmparab]:volume-locked{border-color:var(--media-state-indicator-color);background-color:var(--media-state-surface-color);box-shadow:0 0 0 var(--media-state-ring-width) color-mix(in oklch, var(--media-state-indicator-color) 44%, transparent), 0 1rem 2rem oklch(0% none none/.18);scale:var(--media-state-scale)}.media-state-demo[data-astro-cid-chmparab][data-simulate-state=false][data-media-pseudo=volume-locked][data-media-target=video] video[data-astro-cid-chmparab].media-sample:volume-locked{border-color:var(--media-state-indicator-color);background-color:var(--media-state-surface-color);box-shadow:0 0 0 var(--media-state-ring-width) color-mix(in oklch, var(--media-state-indicator-color) 44%, transparent), 0 1rem 2rem oklch(0% none none/.18);scale:var(--media-state-scale)}.media-state-demo[data-astro-cid-chmparab][data-simulate-state=false][data-media-pseudo=volume-locked][data-media-target=audio] audio[data-astro-cid-chmparab].media-sample:volume-locked{border-color:var(--media-state-indicator-color);background-color:var(--media-state-surface-color);box-shadow:0 0 0 var(--media-state-ring-width) color-mix(in oklch, var(--media-state-indicator-color) 44%, transparent), 0 1rem 2rem oklch(0% none none/.18);scale:var(--media-state-scale)}