.home-videos [hidden] { display:none!important; }
.public-surface .home-videos .archive-heading .video-handwriting { width:clamp(240px,20vw,290px); margin:0; }
.video-handwriting img { display:block; width:100%; height:auto; }
.home-videos .archive-heading { margin-bottom:48px; }
.video-group { margin-top:56px; }
.public-surface .home-videos .video-group>h3 { margin:0 0 24px; font-size:22px; font-weight:500; }
.video-mv-grid,.video-remix-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 28px; }
.public-video-card { min-width:0; }
.public-video-thumb { display:block; position:relative; aspect-ratio:16/9; background:var(--ink); overflow:hidden; }
.public-video-thumb>img { display:block; width:100%; height:100%; object-fit:cover; }
.video-play-icon { position:absolute; width:48px; height:48px; left:50%; top:50%; transform:translate(-50%,-50%); }
.public-video-thumb:hover .video-play-icon { opacity:.75; }
.public-surface .home-videos .public-video-card h4 { font-family:var(--sans); font-size:18px; font-weight:500; line-height:1.6; margin:12px 0 0; }
.video-lyrics-row { display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:24px; scrollbar-width:thin; scrollbar-color:var(--coral) transparent; }
.video-lyrics-row .public-video-card { flex:0 0 31%; scroll-snap-align:start; }
.video-remix-group { margin-top:64px; }
.video-remix-group>summary { display:flex; align-items:center; gap:28px; cursor:pointer; list-style:none; }
.video-remix-group>summary::-webkit-details-marker { display:none; }
.video-remix-group>summary>img { width:42%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.video-remix-group>summary strong { display:block; font-size:24px; font-weight:500; }
.video-remix-group>summary span>span { display:block; font-size:14px; margin-top:10px; color:var(--ink-70); }
.video-remix-group .remix-close-label { display:none; }
.video-remix-group[open] .remix-open-label { display:none; }
.video-remix-group[open] .remix-close-label { display:block; }
.video-remix-grid { margin-top:32px; }
.home-videos a:focus-visible,.home-videos summary:focus-visible,.home-videos button:focus-visible,.video-lyrics-row:focus-visible { outline:2px solid var(--coral); outline-offset:5px; }
@media(max-width:700px) {
 .public-surface .home-videos .archive-heading .video-handwriting { width:200px; }
 .video-mv-grid,.video-remix-grid { grid-template-columns:minmax(0,1fr); gap:32px; }
 .video-lyrics-row .public-video-card { flex-basis:86%; }
 .video-remix-group>summary { flex-direction:column; align-items:flex-start; gap:16px; }
 .video-remix-group>summary>img { width:100%; }
 .video-group { margin-top:40px; }
}
/* Native dialog sits in the browser top layer, above the existing dock and entrance film. */
.media-stage { --stage-paper:#e9ebef; box-sizing:border-box; position:fixed; inset:0; width:100%; max-width:none; height:100dvh; max-height:none; margin:0; border:0; padding:0; background:#172336; color:var(--stage-paper); overflow:auto; }
.media-stage::backdrop { background:#172336; }
.media-stage-shell { box-sizing:border-box; min-height:100%; display:flex; flex-direction:column; padding:24px clamp(20px,4vw,64px); gap:24px; }
.media-stage-bar,.media-stage-footer,.media-stage-actions,.media-stage-switch { display:flex; align-items:center; gap:24px; }
.media-stage-bar { justify-content:space-between; }
.media-stage-bar>span { font-size:12px; letter-spacing:.2em; font-weight:700; }
.media-stage button,.media-stage a { font:inherit; font-size:14px; color:var(--stage-paper); }
.media-stage button { border:0; background:transparent; min-height:44px; min-width:44px; padding:8px; cursor:pointer; }
.media-stage a { text-decoration:underline; text-underline-offset:6px; }
.media-stage button:focus-visible,.media-stage a:focus-visible { outline:2px solid #a4bedc; outline-offset:4px; }
.media-stage-content { flex:1; display:grid; align-content:center; min-height:0; }
.media-stage .video-player-frame { width:min(100%,calc((100dvh - 204px)*16/9)); aspect-ratio:16/9; margin:auto; background:#0b1420; }
.video-player-frame iframe { width:100%; height:100%; border:0; display:block; }
.media-stage-footer { justify-content:space-between; }
.public-surface .media-stage-footer h3 { font-size:clamp(18px,2vw,28px); font-weight:500; margin:0; color:var(--stage-paper); }
.media-stage-switch { gap:12px; flex:none; }
.media-stage-switch span { min-width:42px; text-align:center; font-size:12px; font-variant-numeric:tabular-nums; }
.media-stage-footer>a { flex:none; }
.media-stage-record { width:min(100%,1100px); margin:auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:clamp(32px,6vw,96px); }
.media-stage-record>img { width:100%; height:auto; max-height:65dvh; object-fit:contain; }
.public-surface .media-stage-record h3 { font-size:clamp(28px,3.5vw,52px); line-height:1.3; font-weight:500; color:var(--stage-paper); margin:16px 0 24px; }
.media-stage-record p { color:#b8c5d6; line-height:1.8; font-size:14px; }
.media-stage-platforms { display:flex; gap:16px 24px; flex-wrap:wrap; margin-top:28px; }
.media-stage-platforms a { min-height:44px; display:inline-flex; align-items:center; }
@media(prefers-reduced-motion:no-preference) {
 .public-video-thumb img,.music-cover img { transition:transform .5s cubic-bezier(.2,.7,.2,1); }
 .public-video-thumb:hover img,.music-cover:hover img { transform:scale(1.035); }
 .video-play-icon { transition:opacity .2s; }
 .video-remix-group[open] .video-remix-grid { animation:media-reveal .3s ease-out; }
 @keyframes media-reveal { from {opacity:0;transform:translateY(12px)} to {opacity:1;transform:none} }
}
@media(max-width:700px) {
 .media-stage-shell { padding:12px 20px 24px; gap:16px; }
 .media-stage-actions { gap:4px; }
 .media-stage-footer { flex-wrap:wrap; gap:12px 20px; }
 .media-stage-footer h3 { width:100%; }
 .media-stage-record { grid-template-columns:minmax(0,1fr); gap:20px; padding:16px 0; }
 .media-stage-record>img { max-height:38dvh; }
 .media-stage-record h3 { margin:8px 0 12px!important; }
}
.media-stage-shell:fullscreen { width:100%; height:100dvh; overflow:auto; background:#172336; color:#e9ebef; }
.video-more { margin:28px 0 0; text-align:right; }
.video-more a { display:inline-flex; align-items:center; min-height:44px; color:var(--coral); font-size:14px; text-decoration:none; }
.video-more a:hover { text-decoration:underline; text-underline-offset:6px; }
.video-archive-heading { display:flex; align-items:baseline; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.video-archive-heading>a { font-size:14px; color:var(--coral); min-height:44px; display:inline-flex; align-items:center; }
