/* Visual Blog 1.0.49 — PUBLIC MEDIA CONTRACT.
 * One definition for inline video/audio/YouTube/document players.
 */
.visual-blog-public-note .visual-blog-youtube-card,.visual-blog-public-note .visual-blog-local-video-card,.visual-blog-public-note>figure:has(>video):not(.visual-blog-html-doc-card){float:left;clear:none;width:min(340px,42%);max-width:340px;margin:.35em 18px .7em 0;overflow:hidden;border:1px solid #dbe3ef;border-radius:13px;background:#0f172a;box-shadow:0 8px 24px rgba(15,23,42,.08)}
.visual-blog-public-note .visual-blog-youtube-card>a{position:relative;display:block;overflow:hidden;aspect-ratio:16/9;background:#0f172a}
.visual-blog-public-note .visual-blog-youtube-card>a::after{content:'▶';position:absolute;left:50%;top:50%;display:grid;place-items:center;width:58px;height:42px;transform:translate(-50%,-50%);border-radius:12px;background:rgba(0,0,0,.74);color:#fff;font-size:23px;line-height:1;box-shadow:0 5px 20px rgba(0,0,0,.24)}
.visual-blog-public-note .visual-blog-youtube-card img{display:block!important;width:100%!important;height:100%!important;margin:0!important;border-radius:0!important;object-fit:cover!important}
.visual-blog-public-note .visual-blog-youtube-card figcaption,.visual-blog-local-video-card figcaption{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 9px;background:#fff;color:#64748b;font-size:11px;font-weight:700;line-height:1.3}
.visual-blog-public-note .visual-blog-youtube-card figcaption a{color:var(--dp-public-accent);font-weight:750;text-decoration:none}
.visual-blog-public-note .visual-blog-youtube-card.is-playing iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.visual-blog-local-video-card video,.visual-blog-public-note>figure:has(>video):not(.visual-blog-html-doc-card)>video{display:block;width:100%;height:auto;max-height:480px;background:#000}
.visual-blog-local-video-extra{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:7px 9px;border-top:1px solid #e2e8f0;background:#fff;color:#64748b;font-size:11px}
.visual-blog-local-video-extra label{display:flex;align-items:center;gap:5px;font-weight:700}.visual-blog-local-video-extra select{min-height:32px;height:32px;padding:0 24px 0 7px}.visual-blog-local-video-extra a{color:var(--dp-public-accent);font-weight:800;text-decoration:none}.visual-blog-local-video-warning{flex:1 0 100%;color:#b45309}

.visual-blog-public-note .visual-blog-inline-audio,.visual-blog-public-note>figure:has(>audio){--vb-wave-color:#94a3b8;--vb-wave-played:var(--dp-public-accent);--vb-audio-progress:0%;float:none;clear:both;display:block;width:min(860px,calc(100% - 24px));max-width:860px;margin:18px auto;padding:12px;border:1px solid #dbe3ef;border-radius:14px;background:#f8fafc;box-shadow:0 8px 22px rgba(15,23,42,.05)}
.visual-blog-inline-audio[data-vb-audio-bound="1"]>.visual-blog-audio-native-fallback{display:none}
.visual-blog-public-note>figure:has(>audio)>audio{display:block;width:100%;max-width:100%;margin:0}
.visual-blog-wave-player{display:grid;grid-template-columns:42px 42px minmax(180px,1fr) 42px max-content max-content minmax(100px,140px) max-content;gap:8px;align-items:center}
.visual-blog-wave-play,.visual-blog-wave-skip{height:38px;min-width:38px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;color:#172033;font-weight:800;cursor:pointer}.visual-blog-wave-play{border-color:var(--dp-public-accent);background:var(--dp-public-accent);color:#fff;font-size:16px}
.visual-blog-wave-track{position:relative;height:68px;overflow:hidden;border:1px solid #d6deea;border-radius:10px;background:#fff;cursor:pointer}.visual-blog-wave-track::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--vb-audio-progress);background:color-mix(in srgb,var(--dp-public-accent) 11%,transparent);pointer-events:none}.visual-blog-wave-canvas{position:relative;z-index:1;display:block;width:100%;height:68px}
.visual-blog-wave-time{color:#475569;font:700 12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap}.visual-blog-wave-speed{display:flex;align-items:center;gap:5px;min-width:max-content;color:#64748b;font-size:11px;font-weight:700;white-space:nowrap}.visual-blog-wave-speed select{min-height:34px;height:34px;padding:0 25px 0 8px}.visual-blog-wave-volume{display:flex;align-items:center;gap:5px;min-width:100px}.visual-blog-wave-volume input{width:100%}.visual-blog-media-download{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 10px;border:1px solid #cbd5e1;border-radius:9px;background:#fff;color:var(--dp-public-accent);font-size:12px;font-weight:800;text-decoration:none!important;white-space:nowrap}.visual-blog-inline-audio figcaption{margin-top:7px;color:#64748b;font-size:12px;font-weight:700}

.visual-blog-html-doc-card{display:block;float:none;clear:both;width:100%;margin:1em 0;border:1px solid #dbe3ef;border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 8px 24px rgba(15,23,42,.06)}
.visual-blog-html-doc-frame{display:block;width:100%;height:680px;min-height:520px;overflow:hidden;border:0;background:#fff}.visual-blog-html-doc-card figcaption{padding:8px 12px;border-top:1px solid #e5e7eb;color:#64748b;font-size:12px;font-weight:700}

.visual-blog-public-gallery{display:flex;gap:10px;overflow-x:auto;padding:0 26px 22px;scrollbar-width:thin}.visual-blog-public-gallery a{flex:0 0 88px;height:72px;overflow:hidden;border-radius:12px}.visual-blog-public-gallery img{width:100%;height:100%;object-fit:cover}
.visual-blog-public-audio{width:min(860px,calc(100% - 52px));margin:0 auto 24px;padding:12px;border:1px solid #dfe5f0;border-radius:18px;background:#f8faff}.visual-blog-public-audio audio{display:block;width:100%}.visual-blog-public-audio figcaption{display:none}

@media(max-width:900px){.visual-blog-wave-player{grid-template-columns:42px 42px minmax(160px,1fr) 42px max-content max-content}.visual-blog-wave-volume{display:none}}
@media(max-width:700px){
    .visual-blog-public-note .visual-blog-youtube-card,.visual-blog-public-note .visual-blog-local-video-card,.visual-blog-public-note>figure:has(>video):not(.visual-blog-html-doc-card){float:none;width:min(100%,360px);max-width:100%;margin:.75em auto}
    .visual-blog-wave-player{grid-template-columns:42px minmax(0,1fr) 42px}.visual-blog-wave-skip[data-seconds="-10"]{display:none}.visual-blog-wave-time,.visual-blog-wave-speed,.visual-blog-wave-volume,.visual-blog-media-download{font-size:11px}
    .visual-blog-html-doc-frame{height:520px;min-height:420px}
    .visual-blog-public-gallery{padding-left:18px;padding-right:18px}.visual-blog-public-audio{width:calc(100% - 36px);margin-left:18px;margin-right:18px}
}