.media-demo { --media-blue: var(--blue, #075de8); --media-ink: var(--text, #17243b); --media-muted: var(--muted, #65738a); width: min(100%, 560px); min-width: 0; color: var(--media-ink); font: 12px/1.4 "DM Sans", sans-serif; }
.media-demo *, .media-demo *::before, .media-demo *::after { box-sizing: border-box; }
.media-demo figure, .media-demo p, .media-demo address { margin: 0; }
.media-demo button, .media-demo input { color: inherit; font: inherit; }
.media-demo button { min-height: 28px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); padding: 5px 9px; cursor: pointer; }
.media-demo button:hover, .media-demo button:focus-visible { border-color: var(--media-blue); color: var(--media-blue); outline: 0; }
.media-demo [hidden] { display: none !important; }
.media-demo small { color: var(--media-muted); }
.media-art { position: relative; overflow: hidden; min-height: 92px; border-radius: 7px; background: linear-gradient(145deg, #12365f 0 36%, #146fa2 36% 61%, #efb96e 61% 67%, #f6e6be 67%); color: white; }
.media-art > i { position: absolute; display: block; background: rgba(255,255,255,.78); transform: rotate(-17deg); }.media-art > i:nth-of-type(1) { width: 45%; height: 12px; right: 0; top: 20%; }.media-art > i:nth-of-type(2) { width: 32%; height: 35%; left: 15%; bottom: 0; clip-path: polygon(50% 0,100% 100%,0 100%); }.media-art > i:nth-of-type(3) { width: 18%; height: 50%; right: 22%; bottom: 0; }
.media-art strong, .media-art small, .media-art span, .media-art b { position: relative; z-index: 1; }

.media-content-image { width: 100%; }.media-content-image .media-art { min-height: 112px; }.media-content-image figcaption { display: grid; padding-top: 6px; }.media-content-image figcaption span { color: var(--media-muted); font-size: 9px; }
.media-decorative { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 10px; min-height: 128px; padding: 11px; }.media-decorative > span { color: #dd8b2a; font-size: 38px; }.media-decorative article { display: grid; gap: 3px; }.media-decorative small { color: var(--media-blue); font-size: 8px; font-weight: 800; letter-spacing: .13em; }.media-decorative strong { font-family: "DM Serif Display", serif; font-size: 22px; font-weight: 400; }
.media-responsive-image, .media-fit-stage { display: grid; gap: 7px; }.media-responsive-image footer, .media-fit-stage footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; }.media-responsive-image code, .media-fit-stage code { font: 9px "IBM Plex Mono", monospace; }.media-responsive-image.desktop .media-art { min-height: 104px; background-position: center; }.media-responsive-image.desktop code::before { content: "1280w · "; }
.media-art-direction { position: relative; display: grid; gap: 6px; justify-items: start; }.media-art-direction .media-art { width: 58%; min-height: 112px; }.media-art-direction.wide .media-art { width: 100%; min-height: 82px; }.media-art-direction > span { position: absolute; right: 0; top: 12px; width: 36%; color: var(--media-muted); font-size: 9px; }.media-art-direction > button { position: absolute; right: 0; bottom: 8px; }
.media-art-portrait { background: linear-gradient(145deg,#0f3159 0 45%,#2f8bb5 45% 65%,#efc982 65%); }.media-ratio-stage { display: grid; gap: 8px; justify-items: start; }.media-ratio-stage .media-art { display: grid; width: 100%; aspect-ratio: 16/9; min-height: 0; place-items: center; }.media-ratio-stage.square .media-art { width: 116px; aspect-ratio: 1; }.media-ratio-stage .media-art b { border-radius: 99px; background: rgba(5,20,39,.68); padding: 4px 8px; }
.media-fit-stage > div { display: grid; height: 104px; place-items: center; overflow: hidden; border: 1px dashed var(--border-strong); border-radius: 7px; background: var(--surface); }.media-fit-stage > div .media-art { width: 100%; height: 100%; border-radius: 0; }.media-fit-stage.contain > div .media-art { width: 58%; height: 88%; border-radius: 5px; }
.media-blur-stage { display: grid; gap: 8px; }.media-blur-stage .media-art { display: grid; min-height: 118px; place-items: center; transition: filter .25s ease; }.media-blur-stage .blurred { filter: blur(6px); }.media-blur-stage .media-art span { border-radius: 99px; background: rgba(8,20,39,.68); padding: 4px 7px; }.media-blur-stage button { justify-self: start; }
.media-lazy-stage { display: grid; gap: 8px; }.media-lazy-stage > div { display: grid; min-height: 112px; place-items: center; align-content: center; gap: 3px; border: 1px dashed var(--border-strong); border-radius: 7px; background: repeating-linear-gradient(-45deg,var(--surface),var(--surface) 8px,var(--surface-subtle) 8px,var(--surface-subtle) 16px); }.media-lazy-stage > div > span { color: var(--media-blue); font-size: 25px; }.media-lazy-stage.loaded > div { border-style: solid; background: linear-gradient(145deg,#12365f 0 40%,#2d92b7 40% 65%,#f0cc8c 65%); color: white; }.media-lazy-stage button { justify-self: start; }
.media-vector-stage { display: grid; justify-items: center; gap: 5px; }.media-vector-stage svg { width: 100%; max-width: 250px; fill: var(--blue-soft); stroke: var(--media-blue); stroke-width: 3; }.media-vector-stage circle { fill: #efb34f; stroke: none; }.media-vector-stage span { color: var(--media-muted); font-size: 9px; }

.media-figure .media-art { min-height: 105px; }.media-figure figcaption { display: flex; justify-content: space-between; gap: 7px; padding-top: 6px; }.media-figure figcaption span { color: var(--media-muted); font-size: 9px; }
.media-gallery { display: grid; grid-template-columns: repeat(2,1fr); gap: 5px; margin: 0; padding: 0; list-style: none; }.media-gallery li, .media-masonry span { display: grid; min-height: 58px; place-items: end start; border-radius: 5px; background: linear-gradient(145deg,#163e6d,#2c93b7 63%,#f0c57d 64%); padding: 6px; color: white; font-weight: 800; }.media-gallery li:nth-child(2),.media-gallery li:nth-child(3) { background: linear-gradient(145deg,#6f3d63,#dc7a7a); }
.media-masonry { display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: 52px 34px 43px; gap: 5px; }.media-masonry span { min-height: 0; }.media-masonry span:nth-child(1) { grid-row: span 2; }.media-masonry span:nth-child(3) { grid-row: span 2; background: linear-gradient(145deg,#6f3d63,#dc7a7a); }.media-masonry span:nth-child(4) { grid-column: span 2; }
.media-carousel { position: relative; }.media-carousel .media-art { display: grid; min-height: 120px; place-items: center; }.media-carousel .media-art strong { font: 32px "DM Serif Display",serif; }.media-carousel > button { position: absolute; top: 45px; display: grid; width: 29px; height: 29px; min-height: 0; place-items: center; border-radius: 50%; background: rgba(255,255,255,.9); color: #10233c; padding: 0; font-size: 19px; }.media-carousel > button:first-of-type { left: 7px; }.media-carousel > button:nth-of-type(2) { right: 7px; }.media-carousel > small { display: block; padding-top: 5px; text-align: center; }
.media-thumbnails { display: grid; gap: 7px; }.media-thumbnails .media-art { display: grid; min-height: 92px; place-items: center; }.media-thumbnails .media-art strong { font-size: 26px; }.media-thumbnails nav { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; }.media-thumbnails nav button { min-height: 27px; padding: 3px; font-size: 9px; }.media-thumbnails nav button.active { border-color: var(--media-blue); background: var(--blue-soft); color: var(--media-blue); }
.media-compare { position: relative; height: 128px; overflow: hidden; border-radius: 7px; background: #264260; }.media-before,.media-after { position: absolute; inset: 0; background: linear-gradient(145deg,#142d47,#607187); }.media-after { width: var(--reveal); overflow: hidden; background: linear-gradient(145deg,#125b85,#28a2b4 64%,#f0ca83 65%); }.media-before span,.media-after span { position: absolute; top: 7px; border-radius: 99px; background: rgba(9,20,35,.66); padding: 3px 6px; color: white; font-size: 8px; }.media-before span { right: 7px; }.media-after span { left: 7px; }.media-compare > i { position: absolute; top: 0; bottom: 0; left: var(--reveal); width: 2px; background: white; transform: translateX(-1px); }.media-compare input { position: absolute; inset: auto 8px 8px; width: calc(100% - 16px); accent-color: white; }.media-compare small { position: absolute; left: 50%; bottom: 30px; border-radius: 99px; background: rgba(9,20,35,.66); padding: 2px 5px; color: white; transform: translateX(-50%); }
.media-zoom { display: grid; gap: 7px; overflow: hidden; }.media-zoom .media-art { display: grid; min-height: 112px; place-items: center; transition: transform .18s ease; }.media-zoom .media-art b { border-radius: 4px; background: rgba(9,20,35,.65); padding: 5px; }.media-zoom footer { display: flex; align-items: center; justify-content: center; gap: 7px; }.media-zoom footer button { width: 28px; padding: 2px; }.media-zoom.zoom-2 .media-art { transform: scale(1.2); }.media-zoom.zoom-3 .media-art { transform: scale(1.45); }
.media-lightbox { position: relative; min-height: 128px; overflow: hidden; border-radius: 7px; }.media-gallery-under { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; padding: 10px; }.media-gallery-under span { height: 60px; border-radius: 4px; background: var(--surface-selected); }.media-lightbox section { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr; align-content: center; background: rgba(8,14,26,.86); padding: 12px; color: white; }.media-lightbox section > button { position: absolute; top: 4px; right: 4px; border: 0; background: transparent; color: white; }.media-lightbox section .media-art { display: grid; min-height: 82px; place-items: center; }.media-lightbox section small { padding-top: 4px; color: #dce7f5; }.media-lightbox .media-open { position: absolute; inset: 48px auto auto 50%; transform: translateX(-50%); }
.media-hotspot { position: relative; }.media-hotspot .media-art { min-height: 128px; }.media-hotspot .media-art button { position: absolute; z-index: 2; left: var(--x); top: var(--y); display: grid; width: 25px; height: 25px; min-height: 0; place-items: center; border: 2px solid white; border-radius: 50%; background: var(--media-blue); color: white; padding: 0; box-shadow: 0 0 0 4px rgba(255,255,255,.35); }.media-hotspot aside { position: absolute; z-index: 3; left: 8px; bottom: 7px; display: grid; max-width: 135px; border-radius: 5px; background: rgba(9,20,35,.88); padding: 6px 8px; color: white; pointer-events: none; }.media-hotspot aside span { font-size: 8px; color: #d7e4f2; }

.media-video-player,.media-custom-controls,.media-caption-player,.media-subtitle-player { overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: #101b2a; color: white; }.media-video-screen { display: grid; min-height: 92px; place-items: center; align-content: center; gap: 5px; background: linear-gradient(145deg,#112b4a,#215f80); }.media-video-screen small { color: #d8e8f4; letter-spacing: .11em; }.media-play { display: inline-flex; align-items: center; gap: 5px; border: 0 !important; border-radius: 99px !important; background: white !important; color: #10233c !important; }.media-progress,.media-scrubber { height: 3px; background: #526276; }.media-progress i,.media-scrubber i { display: block; width: 36%; height: 100%; background: #4aa7ff; }.media-video-player footer,.media-custom-controls footer { display: flex; align-items: center; gap: 4px; padding: 5px; }.media-video-player footer button,.media-custom-controls footer button { min-width: 26px; min-height: 24px; border: 0; background: transparent; color: white; padding: 2px; }.media-video-player footer span { margin-left: auto; }
.media-audio-player { display: grid; gap: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: 10px; }.media-audio-player header { display: grid; grid-template-columns: 35px minmax(0,1fr); gap: 8px; }.media-audio-player header > span { display: grid; place-items: center; border-radius: 5px; background: var(--blue-soft); color: var(--media-blue); font-weight: 800; }.media-audio-player header div { display: grid; min-width: 0; }.media-audio-player header strong { overflow-wrap: anywhere; }.media-wave { display: flex; height: 38px; align-items: center; gap: 2px; overflow: hidden; }.media-wave i { display: block; width: auto; min-width: 0; height: var(--h); flex: 1; border-radius: 99px; background: var(--surface-selected); }.media-audio-player footer,.media-waveform footer { display: flex; min-width: 0; align-items: center; gap: 7px; }.media-audio-player footer > span,.media-waveform footer > span { min-width: 0; flex: 1; color: var(--media-muted); font-size: 9px; }.media-audio-player .media-play { background: var(--media-blue) !important; color: white !important; }
.media-poster { position: relative; }.media-poster .media-art { display: grid; min-height: 132px; place-items: center; align-content: center; gap: 2px; }.media-poster .media-art small { color: white; letter-spacing: .12em; }.media-poster .media-art strong { font-family: "DM Serif Display",serif; font-size: 22px; }.media-poster .media-art span { position: absolute; right: 7px; bottom: 7px; border-radius: 3px; background: rgba(9,20,35,.72); padding: 2px 4px; }.media-poster > button { position: absolute; left: 50%; bottom: 9px; transform: translateX(-50%); }
.media-custom-controls .media-art { display: grid; min-height: 96px; place-items: end start; border-radius: 0; padding: 8px; }.media-custom-controls footer button:nth-last-child(1) { margin-left: auto; }.media-custom-controls button[aria-pressed="true"] { background: #fff; color: #10233c; }
.media-caption-player .media-art,.media-subtitle-player .media-art { display: grid; min-height: 112px; place-items: end center; border-radius: 0; padding: 8px; }.media-caption-player .media-art p,.media-subtitle-player .media-art p { max-width: 90%; background: rgba(0,0,0,.82); padding: 3px 6px; text-align: center; }.media-caption-player footer,.media-subtitle-player footer { display: flex; align-items: center; gap: 7px; padding: 6px; }.media-caption-player footer span,.media-subtitle-player footer span { flex: 1; color: #dce7f5; font-size: 9px; }.media-caption-player button[aria-pressed="true"] { background: white; color: #10233c; }
.media-transcript { display: grid; gap: 4px; }.media-transcript header { display: flex; justify-content: space-between; }.media-transcript > button { display: grid; grid-template-columns: 38px 1fr; border-color: transparent; background: transparent; padding: 5px; text-align: left; }.media-transcript > button.active { border-color: var(--media-blue); background: var(--blue-soft); }.media-transcript time { color: var(--media-blue); font: 9px "IBM Plex Mono",monospace; }.media-transcript > small { text-align: right; }
.media-description { display: grid; gap: 7px; }.media-description .media-art { display: grid; min-height: 105px; place-items: center; }.media-description .media-art > span { display: grid; width: 34px; height: 34px; place-items: center; border: 2px solid white; border-radius: 50%; font-weight: 800; }.media-description footer { display: flex; align-items: center; gap: 8px; }.media-description footer div { display: grid; flex: 1; }.media-description button[aria-pressed="true"] { border-color: var(--media-blue); background: var(--blue-soft); color: var(--media-blue); }
.media-live .media-art { display: grid; min-height: 115px; align-content: end; gap: 3px; padding: 9px; }.media-live .media-art > span { justify-self: start; border-radius: 4px; background: #d92d3a; padding: 3px 5px; font-size: 8px; font-weight: 800; }.media-live .media-art > span i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: white; }.media-live .media-art small { color: #e8f0f8; }.media-live footer { display: flex; align-items: center; justify-content: space-between; padding-top: 6px; }.media-live footer span { color: var(--media-muted); font-size: 9px; }

.media-embed-video { display: grid; gap: 8px; }.media-embed-video > div { display: grid; min-height: 110px; place-items: center; align-content: center; gap: 4px; border: 1px dashed var(--border-strong); border-radius: 7px; background: var(--surface); text-align: center; }.media-embed-video > div > span { color: var(--media-blue); font-size: 25px; }.media-embed-video.loaded > div { border-style: solid; background: linear-gradient(145deg,#102b49,#245d7e); color: white; }.media-embed-video.loaded > div small { color: #d7e6f3; }.media-embed-video > button { justify-self: start; }
.media-iframe { overflow: hidden; border: 1px solid var(--border); border-radius: 8px; }.media-iframe header { display: flex; justify-content: space-between; border-bottom: 1px solid var(--border); background: var(--surface-subtle); padding: 5px 8px; }.media-iframe code { color: var(--media-blue); font-size: 9px; }.media-iframe > div { padding: 12px; }.media-iframe > div p { color: var(--media-muted); }.media-iframe a { color: var(--media-blue); }.media-iframe > small { display: block; border-top: 1px solid var(--border); padding: 5px 8px; }
.media-map > div { position: relative; min-height: 102px; overflow: hidden; border-radius: 7px; background: #dbe6d4; }.media-map > div::before,.media-map > div::after,.media-map > div i { position: absolute; background: #fff; content: ""; }.media-map > div::before { inset: 45% -10% auto; height: 10px; transform: rotate(-14deg); }.media-map > div::after { inset: -20% auto -20% 42%; width: 9px; transform: rotate(8deg); }.media-map > div i { width: 4px; height: 150%; background: #b7d2ac; transform: rotate(45deg); }.media-map > div i:nth-child(2){left:65%;}.media-map > div i:nth-child(3){left:25%;}.media-map > div span { position: absolute; z-index: 2; left: 50%; top: 32%; color: #d84242; font-size: 28px; }.media-map > div b { position: absolute; z-index: 2; left: 45%; top: 63%; border-radius: 4px; background: white; padding: 3px 5px; font-size: 8px; }.media-map footer { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px; padding-top: 6px; }.media-map address { font-size: 9px; }
.media-social { display: grid; gap: 7px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: 9px; }.media-social header { display: grid; grid-template-columns: 32px 1fr; gap: 7px; }.media-social header > span { display: grid; place-items: center; border-radius: 50%; background: var(--blue-soft); color: var(--media-blue); font-weight: 800; }.media-social header div { display: grid; }.media-social .media-art { min-height: 55px; }.media-social footer { display: flex; justify-content: space-between; }.media-social a { color: var(--media-blue); }
.media-model > div { position: relative; display: grid; min-height: 105px; place-items: center; overflow: hidden; border-radius: 7px; background: radial-gradient(circle,#d8e7f6,#aabbd0); }.media-model > div > span { color: #1e5a8f; font-size: 58px; transition: transform .2s ease; }.media-model > div > i { position: absolute; width: 90px; height: 16px; bottom: 16px; border-radius: 50%; background: rgba(24,51,79,.2); filter: blur(4px); }.media-model > div > small { position: absolute; bottom: 3px; }.media-model footer { display: flex; align-items: center; gap: 4px; padding-top: 6px; }.media-model footer span { margin-left: auto; color: var(--media-muted); font-size: 9px; }.media-model.rotated > div > span { transform: rotate(35deg) scale(1.12); }
.media-canvas > div { position: relative; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); padding: 8px; }.media-canvas svg { width: 100%; fill: none; stroke: var(--media-blue); stroke-width: 3; }.media-canvas svg .area { fill: color-mix(in srgb,var(--blue-soft) 68%,transparent); stroke: none; }.media-canvas button { position: absolute; right: 6px; top: 6px; }.media-canvas > p { margin-top: 6px; color: var(--media-muted); font: 9px/1.5 "IBM Plex Mono",monospace; }
.media-interactive-svg { display: grid; justify-items: center; }.media-interactive-svg svg { width: 100%; max-width: 260px; }.media-interactive-svg svg > path { stroke: var(--border-strong); stroke-width: 4; }.media-interactive-svg circle { fill: var(--surface); stroke: var(--media-blue); stroke-width: 3; }.media-interactive-svg text { fill: var(--media-blue); font: 800 12px "DM Sans",sans-serif; text-anchor: middle; }.media-interactive-svg g { cursor: pointer; }.media-interactive-svg g.active circle { fill: var(--media-blue); }.media-interactive-svg g.active text { fill: white; }
.media-waveform { display: grid; gap: 4px; }.media-waveform .media-wave i.played { background: var(--media-blue); }.media-waveform input { width: 100%; accent-color: var(--media-blue); }.media-waveform footer button { width: 29px; border-radius: 50%; padding: 2px; }
.media-playlist { display: grid; gap: 3px; }.media-playlist header { display: flex; justify-content: space-between; padding: 0 4px 4px; }.media-playlist > button { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 5px; min-width: 0; border-color: transparent; background: transparent; padding: 5px; text-align: left; }.media-playlist > button.active { border-color: var(--media-blue); background: var(--blue-soft); }.media-playlist > button span { color: var(--media-blue); font: 9px "IBM Plex Mono",monospace; }.media-playlist > button b { overflow: hidden; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }.media-playlist footer { padding-top: 4px; color: var(--media-muted); font-size: 9px; }

.concept-card-preview .media-demo { width: 100%; overflow: hidden; font-size: 9px; }.concept-card-preview .media-demo button { min-width: 0; min-height: 23px; padding: 3px 6px; font-size: 8px; }.concept-card-preview .media-art { min-height: 80px; }.concept-card-preview .media-content-image .media-art,.concept-card-preview .media-blur-stage .media-art,.concept-card-preview .media-live .media-art { min-height: 100px; }.concept-card-preview .media-decorative { grid-template-columns: 22px minmax(0,1fr); gap: 5px; min-height: 116px; overflow: hidden; padding: 5px; }.concept-card-preview .media-decorative > span { font-size: 24px; }.concept-card-preview .media-decorative article { min-width: 0; }.concept-card-preview .media-decorative strong { font-size: 14px; overflow-wrap: anywhere; }.concept-card-preview .media-art-direction .media-art { min-height: 95px; }.concept-card-preview .media-ratio-stage.square .media-art { width: 98px; }.concept-card-preview .media-masonry { grid-template-rows: 46px 30px 38px; }.concept-card-preview .media-compare { height: 116px; }.concept-card-preview .media-hotspot .media-art { min-height: 115px; }.concept-card-preview .media-caption-player .media-art,.concept-card-preview .media-subtitle-player .media-art { min-height: 98px; }.concept-card-preview .media-audio-player,.concept-card-preview .media-thumbnails,.concept-card-preview .media-waveform { overflow: hidden; }.concept-card-preview .media-audio-player { padding: 7px; }.concept-card-preview .media-audio-player header { grid-template-columns: 28px minmax(0,1fr); gap: 5px; }.concept-card-preview .media-audio-player footer { gap: 3px; }.concept-card-preview .media-audio-player footer .media-play [data-media-label] { display: none; }.concept-card-preview .media-social { padding: 6px; }.concept-card-preview .media-social p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }.concept-card-preview .media-model > div { min-height: 94px; }

.concept-card-preview .media-social { gap: 4px; padding: 5px; }
.concept-card-preview .media-social .media-art { min-height: 44px; }

@media (max-width: 480px) { .media-demo { font-size: 11px; }.media-art-direction > span { font-size: 10px; }.media-video-player footer,.media-custom-controls footer { gap: 7px; } }
@media (prefers-reduced-motion: reduce) { .media-demo *, .media-demo *::before, .media-demo *::after { transition: none !important; animation: none !important; } }