.ub { --ub-primary:#1f78f0; --ub-ink:#191919; --ub-radius:20px; --ub-title-font:var(--the7-h2-font-family,inherit); color:var(--ub-ink); font-family:var(--the7-base-font-family,inherit); line-height:1.65; width:100%; max-width:1120px; margin-inline:auto; }
.ub *, .ub *::before, .ub *::after { box-sizing:border-box; }
.ub [hidden] { display:none !important; }
.ub h2,.ub h3 { color:var(--ub-ink); font-family:var(--ub-title-font); font-weight:700; line-height:1.2; letter-spacing:-.025em; margin:0 0 1rem; }
.ub h2 { font-size:clamp(1.8rem,4vw,3rem); }
.ub h3 { font-size:clamp(1.25rem,2.2vw,1.65rem); }
.ub a { color:inherit; text-decoration:underline; text-underline-offset:.2em; }
.ub h3 a { text-decoration:none; }
.ub a:hover { text-decoration:underline; }
.ub :is(a,button,input,select,summary):focus-visible { outline:3px solid var(--ub-ink); outline-offset:4px; }
.ub .ub-intro { display:flex; align-items:center; gap:clamp(24px,5vw,64px); padding:clamp(24px,5vw,56px); background:color-mix(in srgb,var(--ub-primary) 8%,white); border-radius:var(--ub-radius); margin-bottom:40px; }
.ub .ub-cover { aspect-ratio:1; object-fit:cover; border-radius:var(--ub-radius); height:auto; display:block; }
.ub .ub-intro>.ub-cover { width:34%; max-width:320px; flex-shrink:0; }
.ub .ub-eyebrow { font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; margin:0 0 1rem; }
.ub .ub-description { overflow-wrap:anywhere; }
.ub .ub-platforms { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0; }
.ub .ub-platform { padding:8px 16px; border:1px solid currentColor; border-radius:999px; font-size:.9rem; text-decoration:none; }
.ub .ub-filter { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:24px; }
.ub select,.ub button { font:inherit; }
.ub select { min-height:44px; border:1px solid #73777c; border-radius:8px; color:var(--ub-ink); background:white; padding:6px 10px; }
.ub button { cursor:pointer; min-height:44px; border:1px solid #73777c; border-radius:8px; background:white; color:var(--ub-ink); padding:8px 12px; line-height:1.2; }
.ub .ub-button { color:white; background:var(--ub-ink); border-color:var(--ub-ink); font-weight:700; border-radius:999px; padding:10px 20px; }
.ub .ub-episode { display:flex; gap:28px; border-bottom:1px solid #d8dde3; padding:32px 0; }
.ub .ub-episode>.ub-cover { width:170px; height:170px; flex-shrink:0; }
.ub .ub-episode-body { flex:1; min-width:0; }
.ub .ub-meta { font-size:.85rem; margin:0 0 12px; }
.ub .ub-excerpt { margin:0 0 16px; }
.ub .ub-player { margin:16px 0; }
.ub .ub-audio-language { font-size:.8rem; margin:0 0 8px; }
.ub .ub-controls { display:flex; align-items:center; flex-wrap:wrap; gap:8px; background:#f1f4f7; border-radius:12px; padding:10px; }
.ub .ub-controls button { font-size:.85rem; }
.ub .ub-progress { flex:1 1 110px; display:flex; align-items:center; min-height:44px; }
.ub .ub-progress input { width:100%; margin:0; accent-color:var(--ub-ink); cursor:pointer; min-height:24px; }
.ub .ub-time { font-size:.75rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ub .ub-speed select { font-size:.8rem; }
.ub .ub-detail-link { font-size:.9rem; font-weight:700; }
.ub audio { max-width:100%; width:100%; }
.ub .ub-audio-error { padding:12px; background:#fff1ed; color:#802b1c; border-radius:8px; }
.ub .ub-pagination ul { display:flex; flex-wrap:wrap; gap:8px; padding:0; list-style:none; margin:32px 0; }
.ub .ub-pagination a,.ub .ub-pagination span { display:block; padding:8px 14px; border-radius:6px; border:1px solid #d8dde3; }
.ub .ub-pagination .current { background:var(--ub-ink); color:white; }
.ub .ub-transcript { border-block:1px solid #d8dde3; padding:20px 0; margin:32px 0; }
.ub .ub-transcript summary { cursor:pointer; font-weight:700; min-height:44px; }
.ub.ub-single>.ub-cover { width:min(100%,420px); margin-bottom:24px; }
.ub.ub-single>.ub-description { margin:32px 0; }
.ub .ub-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:640px) {
    .ub .ub-intro { flex-direction:column; align-items:flex-start; }
    .ub .ub-intro>.ub-cover { width:min(100%,280px); }
    .ub .ub-episode { flex-direction:column; gap:18px; }
    .ub .ub-episode>.ub-cover { width:120px; height:120px; }
    .ub .ub-controls { gap:6px; }
    .ub .ub-progress { flex-basis:100%; order:5; }
    .ub .ub-time { margin-inline-start:auto; }
}