.frame:has(.media-screen) { aspect-ratio:auto; background:#f7f7ee }
.frame:has(.media-screen)::before { display:none }
.frame:has(.media-screen) #content { display:block; height:auto }
.frame:fullscreen:has(.media-screen), #expanded-view .frame:has(.media-screen) { overflow-y:auto }
.media-screen { position:relative }
.media-art { position:relative }
.frame .media-sheet, .frame .media-cards img { width:100%; height:auto }
.media-cards { display:grid }
.media-cards button { cursor:pointer; border:0; padding:0; background:transparent; border-radius:8%; color:inherit }
.media-cards button:focus-visible { outline:3px solid #345a26; outline-offset:2px }
.media-player {
  width:min(92vw, calc(48dvh + 40px)); max-width:96vw; max-height:96dvh;
  padding:10px; border:0; border-radius:14px; color:#25382b; background:#faf8f0;
}
.media-player::backdrop { background:rgb(12 20 14 / .86) }
.media-player header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px }
.media-player h2 { margin:0; font-size:clamp(15px,2vw,20px); line-height:1.2 }
.media-player button { min-height:44px; padding:6px 10px; border:0; border-radius:8px; color:white; background:#253e2c; cursor:pointer }
.frame .media-player video { width:100%; height:min(76dvh,155vw); border-radius:8px; background:#101410; object-fit:contain }
.media-error { margin:6px 0 }
.media-error a { color:inherit }
@container (width > 800px) {
  .media-screen h1, .media-journey { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); padding:0; margin:0 }
  .media-cards { position:absolute; inset:13.8% 3.6% 13.6% 4.25%; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.85% }
  .media-cards button:hover { outline:2px solid rgb(55 85 39 / .7); outline-offset:1px }
  .frame .media-cards img { display:none }
}
@container (max-width:800px) {
  .media-screen { padding:16px }
  .frame .media-sheet { display:none }
  .media-screen h1 { padding:0 45px 0 0; margin:0 0 18px; font:800 clamp(24px,5cqw,36px)/1.08 PanoManrope,"Segoe UI",sans-serif; letter-spacing:-.035em; text-transform:uppercase }
  .media-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
  .media-cards img { border-radius:7% / 4% }
  .media-journey { margin:16px 0 0; text-align:center; color:#3e5829; font-weight:650 }
}
@container (max-width:520px) {
  .media-cards { grid-template-columns:minmax(0,1fr) }
}
.media-screen [hidden] { display:none }
.media-switch { margin:0; padding:16px 0 14px 16px }
.hymn-stage { position:relative; color:#173b27 }
.frame .hymn-sheet { width:100%; height:auto }
.hymn-player { box-sizing:border-box; color:#fffced; background:linear-gradient(110deg,#8a8054,#555b36); }
.hymn-player input { display:block; width:100%; height:18px; margin:0; accent-color:#fff2b5; cursor:pointer }
.hymn-time,.hymn-buttons { display:flex; align-items:center; justify-content:space-between }
.hymn-time { font:500 13px/1.2 "Segoe UI",sans-serif; font-variant-numeric:tabular-nums }
.hymn-buttons { justify-content:center; gap:clamp(6px,1cqw,14px) }
.hymn-buttons button { min-height:36px; padding:4px 8px; font:inherit; font-size:14px; font-weight:600; line-height:1.2; color:inherit; background:transparent; border:0; border-radius:20px; cursor:pointer }
.hymn-buttons .hymn-play { padding:8px 15px; color:#16371f; background:#fff6d9; font-weight:700 }
.hymn-error { padding:8px 16px }
.hymn-error a { color:inherit }
@container (width > 800px) {
  .hymn-copy,.hymn-name,.hymn-result { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); margin:0 }
  .hymn-player { position:absolute; inset:52% 4.35% 30.4% 59.65%; border-radius:8px; display:flex; flex-direction:column; justify-content:center; padding:0 2.2% }
}
@container (max-width:800px) {
  .media-switch { padding:0; margin-bottom:16px }
  .frame .hymn-sheet { display:none }
  .hymn-copy span { display:inline-block; padding:4px 12px; background:#e7e9d8; border-radius:20px; font-size:14px }
  .media-screen .hymn-copy h1 { margin:14px 0; padding:0; color:#172d16; text-transform:none }
  .hymn-copy h2 { font-size:18px; margin:12px 0 }
  .hymn-copy p,.hymn-result { line-height:1.5 }
  .hymn-player { max-width:540px; margin:auto; padding:14px; border-radius:20px }
  .hymn-cover { aspect-ratio:551/345; border-radius:12px; background-image:url('../3.2) Аудио/Аудио.png'); background-size:303.45% 272.75%; background-position:91.53% 13.76% }
  .hymn-name { display:block; margin:10px 0 6px; font-size:20px }
  .hymn-buttons button { min-height:44px }
  .hymn-result { margin:16px 0 0; padding:14px; border-radius:14px; background:#e9eadc }
}