/* Web glass treatment using the existing theme tokens. */
.video-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.video-grid .album-cover{aspect-ratio:16/9;border-radius:16px}
.video-grid .album-cover img{width:100%;height:100%;object-fit:cover}
.video-card h3{white-space:normal}
.video-open{overflow:hidden}
.video-dialog{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:var(--background);color:var(--ink);overscroll-behavior:contain;isolation:isolate}
.video-dialog::backdrop{background:rgba(18,24,35,.4)}
.video-ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;opacity:.11}
.video-ambient img{width:100%;height:100%;object-fit:cover;filter:blur(80px) saturate(.7);transform:scale(1.18)}
.video-surface{width:min(1184px,100%);margin:auto;padding:max(30px,env(safe-area-inset-top)) 40px max(48px,env(safe-area-inset-bottom))}
.video-top{display:flex;align-items:center;gap:20px;margin-bottom:25px;min-height:48px}
.video-heading{min-width:0;flex:1}
.video-top h1{font-size:clamp(21px,2.1vw,29px);line-height:1.35;letter-spacing:-.035em;font-weight:650}
.video-top p{margin-top:5px;font-size:13px;color:var(--muted)}
.video-dialog button:focus:not(:focus-visible),.video-dialog summary:focus:not(:focus-visible){outline:none}
.video-dialog :is(button,summary,select,input):focus-visible{outline:2px solid var(--muted);outline-offset:4px}
.video-frame{border-radius:22px;background:rgba(255,255,255,.3);box-shadow:0 24px 70px -28px rgba(28,37,57,.27),0 0 0 1px rgba(255,255,255,.52);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.video-stage{overflow:hidden;border-radius:22px 22px 0 0;background:#111;display:grid;place-items:center}
.video-stage video{display:block;width:100%;max-height:65dvh;aspect-ratio:16/9;object-fit:contain}
.video-tools{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:70px;padding:12px 20px}
.video-lines{display:flex;align-items:center;gap:4px;min-width:0;padding:4px;background:rgba(100,110,133,.065);border-radius:30px}
.video-lines:empty{display:none}
.video-line{display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 15px;min-height:36px;border-radius:24px;font-size:12px;white-space:nowrap;color:var(--muted);transition:background .18s,color .18s,box-shadow .18s}
.video-line.is-active{background:rgba(255,255,255,.82);color:var(--ink);box-shadow:0 2px 7px rgba(22,30,45,.06),inset 0 0 0 1px rgba(255,255,255,.8)}
.video-actions{display:flex;align-items:center;gap:9px;margin-left:auto}
.video-popover{position:relative}
.video-popover summary{display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;padding:10px 12px;min-height:40px;border-radius:20px;font-size:12px;white-space:nowrap;list-style:none;color:var(--ink)}
.video-popover summary::-webkit-details-marker{display:none}
.video-popover summary .icon{width:17px;height:17px}
.video-popover[open] summary,.video-popover summary:hover{background:rgba(100,110,133,.08)}
.video-popover-panel{position:absolute;right:0;bottom:calc(100% + 16px);z-index:5;width:252px;padding:20px;border-radius:20px;background:rgba(248,249,252,.94);box-shadow:0 12px 50px rgba(15,24,40,.19),inset 0 0 0 1px rgba(255,255,255,.85);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);color:var(--ink)}
.video-popover-panel h2{font-size:14px;margin:0 0 18px;font-weight:650}
.video-popover-panel label{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:12px;margin-top:16px}
.video-popover-panel select{border:0;border-radius:8px;padding:6px;background:rgba(128,138,155,.1);color:inherit;max-width:115px}
.video-popover-panel option{background:var(--background);color:var(--ink)}
.video-auto input{appearance:none;-webkit-appearance:none;width:34px;height:20px;border:0;border-radius:20px;background:#a1a5ae;position:relative;cursor:pointer;margin:0}
.video-auto input::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;left:2px;top:2px;background:white;box-shadow:0 1px 3px #0002;transition:transform .18s}
.video-auto input:checked{background:var(--accent)}
.video-auto input:checked::after{transform:translateX(14px)}
.video-message{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:15px 5px 0;font-size:12px;color:var(--muted)}
.video-message[hidden]{display:none}
.video-message .button{padding:5px 10px;font-size:12px;color:var(--accent)}
.video-message input{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:var(--glass)}
.video-information{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:60px;margin:36px 5px 0}
.video-intro h2,.video-episodes h2{font-size:14px;font-weight:650;margin:0 0 12px}
.video-intro p{font-size:14px;line-height:1.9;white-space:pre-line;color:var(--muted);max-width:65ch;overflow-wrap:anywhere}
.video-episodes[hidden]{display:none}
.video-episodes small{font-size:12px;font-weight:400;color:var(--muted);margin-left:8px}
.video-episodes>div{display:grid;gap:6px;max-height:240px;overflow-y:auto;scrollbar-width:thin}
.video-episodes button{display:flex;align-items:center;gap:12px;width:100%;min-width:0;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.16);color:var(--muted);text-align:left;font-size:12px}
.video-episode-number{font-variant-numeric:tabular-nums;opacity:.7;font-size:11px}
.video-episodes button>span:nth-child(2){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.video-episodes button .icon{width:14px;height:14px;opacity:0}
.video-episodes button.is-current{background:rgba(255,255,255,.65);color:var(--ink)}
.video-episodes button.is-current .icon{color:var(--accent);opacity:1}
html[data-appearance=dark] .video-ambient{opacity:.22}
html[data-appearance=dark] .video-frame{background:rgba(25,29,39,.55);box-shadow:0 22px 70px -24px #0009,0 0 0 1px #ffffff12}
html[data-appearance=dark] .video-line.is-active{background:#ffffff18;box-shadow:inset 0 0 0 1px #ffffff12}
html[data-appearance=dark] .video-popover-panel{background:rgba(34,38,49,.97);box-shadow:0 12px 50px #0008,inset 0 0 0 1px #ffffff18}
html[data-appearance=dark] .video-episodes button{background:#ffffff04}
html[data-appearance=dark] .video-episodes button.is-current{background:#ffffff12}
html[data-motion=off] .video-dialog *{transition:none!important}
@media(prefers-reduced-motion:reduce){html:not([data-motion=force]) .video-dialog *{transition:none!important}}
@media(prefers-reduced-transparency:reduce){.video-ambient{display:none}.video-frame,.video-popover-panel{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--background)}}
@media(max-width:760px){
 .video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
 .video-surface{padding:max(18px,env(safe-area-inset-top)) 16px max(36px,env(safe-area-inset-bottom))}
 .video-top{gap:10px;margin-bottom:20px}
 .video-top h1{font-size:20px;letter-spacing:-.02em}
 .video-frame{border-radius:16px}
 .video-stage{border-radius:16px 16px 0 0}
 .video-stage video{max-height:60dvh}
 .video-tools{padding:10px;gap:6px;min-height:62px}
 .video-line{font-size:11px;padding:8px 10px;gap:5px;min-height:32px}
 .video-actions{gap:2px}
 .video-popover summary{padding:8px;min-width:34px;font-size:11px}
 .video-popover summary>span:not(.icon){display:none}
 .video-popover-panel{position:fixed;bottom:auto;top:max(76px,env(safe-area-inset-top));right:20px;max-width:calc(100vw - 40px)}
 .video-information{grid-template-columns:1fr;gap:28px;margin:28px 4px 0}
 .video-episodes{grid-row:1}
 .video-intro p{font-size:13px}
 .video-message{font-size:11px;line-height:1.65;padding-top:13px}
}

html[data-input-mode=pointer] .video-dialog :is(button,summary):focus{outline:none}

.video-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.video-category-badge{display:inline-block;padding:4px 8px;font-size:10px;line-height:1.4;border-radius:6px;color:var(--muted);background:rgba(128,138,155,.09);white-space:nowrap}
.video-close{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border-radius:50%;background:rgba(128,138,155,.07);color:var(--ink)}
.video-close .icon{width:20px;height:20px}
/* This player deliberately remains static even when site motion is forced on. */
.video-dialog,.video-dialog *,.video-dialog *::before,.video-dialog *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(max-width:760px){.video-title-row{gap:6px 8px}.video-category-badge{font-size:9px;padding:3px 6px}.video-close{width:36px;height:36px;flex-basis:36px}.video-top{align-items:flex-start}}

.video-share .video-popover-panel{width:190px;padding:8px}
.video-share .video-popover-panel button{display:block;text-align:left;width:100%;padding:12px;border-radius:12px;font-size:13px}
.video-share .video-popover-panel button:hover{background:rgba(128,138,155,.1)}