*{box-sizing:border-box}
body{margin:0;background:#0a0b0d;color:#f5f5f5;font-family:Arial,Helvetica,sans-serif}
header{height:108px;display:flex;align-items:center;gap:22px;padding:18px 32px;background:linear-gradient(105deg,#060606,#20101c 62%,#0b0b0c);border-bottom:1px solid #343434}
header h1{margin:0;font-size:30px;letter-spacing:.5px}
header p{margin:5px 0;color:#ddd}
.mark{font-weight:900;font-size:36px;border-right:1px solid #555;padding-right:22px}
.mark span,.eyebrow,.listhead span,.tab.active,.lvl.active,.section h3{color:#e93e9b}
.topnav{display:flex;gap:12px;padding:14px 30px;border-bottom:1px solid #252525;background:#0d0f12;overflow:auto}
.tab,.lvl{background:#16191f;border:1px solid #333;color:#eee;padding:10px 14px;border-radius:999px;cursor:pointer;font-weight:700}
.tab.active,.lvl.active{border-color:#e93e9b;background:#22131d}
.shell{display:grid;grid-template-columns:330px 1fr;min-height:calc(100vh - 175px)}
aside{padding:22px;border-right:1px solid #252525;background:#0d1013}
main{padding:24px 28px}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:1.4px;margin-bottom:10px}
.levels{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.listhead{display:flex;justify-content:space-between;align-items:center;margin:8px 0 12px}
#search{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #333;background:#11151a;color:#fff;margin-bottom:14px}
.song{padding:12px 13px;border:1px solid #2a2f37;border-radius:12px;background:#12151b;margin-bottom:10px;cursor:pointer}
.song:hover{border-color:#666}
.song.active{background:#21131e;border-color:#e93e9b}
.song b{display:block;margin-bottom:3px}
.song small{color:#cfcfcf}
.hero{border:1px solid #272b31;border-radius:18px;padding:22px;background:linear-gradient(180deg,#12151a,#0f1115)}
.hero h2{margin:0 0 4px 0;font-size:34px}
.meta{color:#d6d6d6;margin:8px 0 4px}
.muted{color:#b8b8b8;font-size:14px}
.section{margin-top:24px}
.section h3{margin:0 0 12px 0;font-size:17px;letter-spacing:.6px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{display:flex;flex-direction:column;text-decoration:none;color:#fff;background:#12161b;border:1px solid #2f353d;border-radius:18px;overflow:hidden;min-height:236px}
.card:hover{transform:translateY(-2px);border-color:#858585}
.thumb{width:100%;aspect-ratio:16/9;object-fit:cover;background:#1a1d23;border-bottom:1px solid #2a2d34}
.cardbody{padding:14px 14px 16px;display:flex;flex-direction:column;gap:10px;flex:1}
.badge{display:inline-block;align-self:flex-start;padding:6px 10px;border-radius:999px;background:#25141f;border:1px solid #5a2842;font-size:11px;font-weight:700;letter-spacing:.4px}
.card strong{font-size:16px;line-height:1.25}
.card small{color:#d7d7d7;margin-top:auto}
.placeholder .thumb{filter:grayscale(.12)}
.empty{border:1px dashed #444;background:#11151a;padding:22px;border-radius:18px;color:#d7d7d7}
footer{padding:18px 30px;color:#cfcfcf;border-top:1px solid #252525;background:#0c0d10;font-size:14px}
@media (max-width: 980px){
  .shell{grid-template-columns:1fr}
  aside{border-right:none;border-bottom:1px solid #252525}
  .cards{grid-template-columns:1fr}
  header h1{font-size:24px}
}

.card{cursor:pointer}

.card{display:flex;flex-direction:column;text-decoration:none;color:#fff;background:#12161b;border:1px solid #2f353d;border-radius:18px;overflow:hidden;min-height:250px}
.card:hover{border-color:#777}
.media-slot{width:100%;aspect-ratio:16/9;background:#090b0e;position:relative;overflow:hidden;border-bottom:1px solid #2a2d34}
.media-slot img{width:100%;height:100%;object-fit:cover;display:block}
.media-slot iframe{width:100%;height:100%;border:0;display:block;background:#090b0e}
.audio-slot{min-height:152px;aspect-ratio:auto;padding:10px;background:#0b0e11}
.audio-slot iframe{width:100%;height:152px;border:0;border-radius:12px}
.play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(transparent,rgba(0,0,0,.22));cursor:pointer}
.playbtn{width:58px;height:58px;border-radius:50%;border:0;background:#e83491;color:white;font-size:25px;cursor:pointer;box-shadow:0 8px 25px rgba(0,0,0,.4)}
.cardbody{padding:14px 14px 16px;display:flex;flex-direction:column;gap:9px;flex:1}
.badge{display:inline-block;align-self:flex-start;padding:5px 9px;border-radius:999px;background:#25141f;border:1px solid #5a2842;font-size:10px;font-weight:700;letter-spacing:.4px}
.card strong{font-size:15px;line-height:1.3}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.source-link,.inline-link{border:1px solid #454b53;border-radius:999px;padding:8px 11px;text-decoration:none;color:#eee;font-size:12px;font-weight:700;background:#171b20;cursor:pointer}
.source-link:hover,.inline-link:hover{border-color:#e93e9b}
.note{font-size:11px;color:#aeb3b8;line-height:1.4}
.score-thumb{aspect-ratio:16/9;display:grid;grid-template-columns:34% 1fr;background:linear-gradient(135deg,#19233a,#0f1219);padding:16px;gap:14px;border-bottom:1px solid #2a2d34}
.paper{background:white;border-radius:5px;box-shadow:0 7px 20px rgba(0,0,0,.35);padding:10px;color:#111;overflow:hidden}
.paper .line{height:8px;border-top:1px solid #222;border-bottom:1px solid #222;margin:9px 0;position:relative}
.paper .line:after{content:"♪  ♩  ♪";font-size:11px;position:absolute;top:-8px;left:8px}
.score-meta{align-self:center}.score-meta b{display:block;font-size:15px}.score-meta small{color:#ccd1d6;display:block;margin-top:7px;line-height:1.35}
.local-notice{display:none;background:#2b1b10;color:#f4d7bd;border-top:1px solid #59412e;padding:9px 24px;font-size:12px}
.local-notice code{background:#161616;padding:3px 6px;border-radius:4px;color:#fff}
.card.error .media-slot{min-height:160px;aspect-ratio:auto;display:flex;align-items:center;justify-content:center;padding:18px}
.inline-error{color:#ddd;font-size:12px;line-height:1.5;text-align:center}
@media(max-width:800px){
  .cards{grid-template-columns:1fr}
  .audio-slot iframe{height:152px}
}

/* V6 compact media treatment */
.compact-thumb{aspect-ratio:16/9;position:relative;overflow:hidden;background:#0a0d11;border-bottom:1px solid #2a2d34}
.compact-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.compact-thumb.generic{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#171b22,#25121e)}
.compact-thumb.generic span{font-weight:900;letter-spacing:1px;color:#ddd}
.center-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;border:0;background:#e73891;color:#fff;font-size:22px;cursor:pointer;box-shadow:0 8px 30px rgba(0,0,0,.45)}
.file-mode-msg{position:absolute;left:12px;right:12px;bottom:12px;background:rgba(0,0,0,.78);padding:9px 11px;border-radius:9px;color:#eee;font-size:11px;line-height:1.4}
.compact-audio{min-height:132px;background:linear-gradient(135deg,#1a1e24,#101316);display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:center;padding:11px;border-bottom:1px solid #2a2d34}
.audio-cover{width:110px;height:110px;border-radius:10px;overflow:hidden;background:#111}
.audio-cover img{width:100%;height:100%;object-fit:cover}
.audio-intro{display:flex;flex-direction:column;gap:7px}
.audio-intro b{font-size:14px}
.audio-intro span{font-size:11px;color:#bfc4ca}
.audio-intro button{align-self:flex-start;border:0;border-radius:999px;background:#1db954;color:#07130a;padding:8px 11px;font-weight:800;cursor:pointer}
.compact-audio.loaded{display:block;padding:8px;min-height:168px}
.compact-audio.loaded iframe{width:100%;height:152px;border:0;border-radius:12px;display:block}
@media(max-width:1250px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.cards{grid-template-columns:1fr}.compact-audio{grid-template-columns:90px 1fr}.audio-cover{width:90px;height:90px}}

/* V7 responsive media sizing */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;
}
.card{
  width:100%;
  min-width:0;
}
.compact-thumb,
.video-thumb{
  width:100%;
  aspect-ratio:16 / 9;
  height:auto;
  position:relative;
  overflow:hidden;
  background:#080a0d;
}
.compact-thumb img,
.video-thumb img,
.compact-thumb iframe,
.video-thumb iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border:0;
  display:block;
}
.compact-thumb iframe,
.video-thumb iframe{
  aspect-ratio:16 / 9;
  background:#000;
}
.center-play{
  z-index:2;
}
@media(max-width:700px){
  .cards{grid-template-columns:1fr}
}

/* V8 — 1080p one-glance dashboard
   Goal: hero + 3 VIDEO + 3 AUDIO + 3 SCORE cards visible together on a 1920x1080-class display. */

@media (min-width:1200px) and (min-height:760px){
  body{
    height:100vh;
    overflow:hidden;
  }

  header{
    height:70px;
    padding:10px 24px;
    gap:16px;
  }
  header h1{font-size:25px}
  header p{font-size:12px;margin-top:2px}
  .mark{font-size:29px;padding-right:16px}

  .topnav{
    height:48px;
    padding:7px 20px;
    align-items:center;
  }
  .tab,.lvl{
    padding:7px 12px;
    font-size:12px;
  }

  .shell{
    grid-template-columns:270px 1fr;
    height:calc(100vh - 148px);
    min-height:0;
  }

  aside{
    padding:13px 14px;
    overflow:hidden;
  }
  .eyebrow{margin-bottom:6px;font-size:10px}
  .levels{margin-bottom:10px;gap:6px}
  .listhead{margin:4px 0 7px;font-size:12px}
  #search{padding:8px 10px;margin-bottom:7px;font-size:11px;border-radius:9px}
  .song{
    padding:7px 9px;
    margin-bottom:5px;
    border-radius:9px;
    line-height:1.08;
  }
  .song b{font-size:11px;margin-bottom:2px}
  .song small{font-size:9px}

  main{
    padding:14px 20px 10px;
    overflow:hidden;
  }

  .hero{
    height:86px;
    padding:12px 16px;
    border-radius:14px;
    overflow:hidden;
  }
  .hero .eyebrow{margin-bottom:4px}
  .hero h2{font-size:27px;line-height:1;margin-bottom:3px}
  .meta{margin:4px 0 1px;font-size:12px}
  .muted{font-size:10px}

  .section{
    margin-top:9px;
  }
  .section h3{
    height:20px;
    margin:0 0 5px;
    font-size:13px;
    display:flex;
    align-items:center;
  }

  .cards{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
  }

  /* Each resource is a compact horizontal card. */
  .card{
    display:grid;
    grid-template-columns:minmax(126px,37%) 1fr;
    grid-template-rows:1fr;
    height:147px;
    min-height:0;
    border-radius:13px;
    overflow:hidden;
  }

  .compact-thumb,
  .video-thumb{
    grid-column:1;
    grid-row:1;
    width:100%;
    height:100%;
    aspect-ratio:auto;
    background:#090b0e;
    display:flex;
    align-items:center;
    justify-content:center;
    border-right:1px solid #2a2d34;
    border-bottom:0;
  }
  .compact-thumb img,
  .video-thumb img{
    position:static;
    width:100%;
    height:auto;
    max-height:100%;
    aspect-ratio:16/9;
    object-fit:contain;
    background:#000;
  }
  .compact-thumb iframe,
  .video-thumb iframe{
    position:static;
    width:100%;
    height:auto;
    aspect-ratio:16/9;
    object-fit:contain;
    background:#000;
  }

  .center-play{
    width:44px;height:44px;font-size:17px;
  }

  .cardbody{
    grid-column:2;
    grid-row:1;
    padding:9px 10px;
    gap:5px;
    min-width:0;
  }
  .badge{
    padding:3px 7px;
    font-size:8px;
  }
  .card strong{
    font-size:11px;
    line-height:1.22;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .note{
    font-size:8.5px;
    line-height:1.28;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .actions{
    gap:5px;
    margin-top:auto;
  }
  .source-link,.inline-link{
    padding:5px 8px;
    font-size:8.5px;
  }

  /* Audio cards use the same compact left-media / right-info layout. */
  .audio-card{
    grid-template-columns:minmax(126px,37%) 1fr;
  }
  .compact-audio{
    grid-column:1;
    grid-row:1;
    width:100%;
    height:100%;
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px;
    gap:7px;
    border-right:1px solid #2a2d34;
    border-bottom:0;
    overflow:hidden;
  }
  .audio-cover{
    width:58px;height:58px;flex:0 0 58px;
  }
  .audio-intro{
    gap:4px;
    min-width:0;
  }
  .audio-intro b{
    font-size:9px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .audio-intro span{font-size:8px}
  .audio-intro button{
    padding:5px 7px;
    font-size:8px;
  }
  .compact-audio.loaded{
    grid-column:1;
    grid-row:1;
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
    min-height:0;
    padding:5px;
  }
  .compact-audio.loaded iframe{
    width:100%;
    height:80px;
    border:0;
  }

  /* Score preview also becomes a small horizontal visual. */
  .score-thumb{
    grid-column:1;
    grid-row:1;
    height:100%;
    min-height:0;
    aspect-ratio:auto;
    grid-template-columns:54px 1fr;
    gap:7px;
    padding:8px;
    border-right:1px solid #2a2d34;
    border-bottom:0;
  }
  .paper{
    padding:5px;
    align-self:center;
  }
  .paper .line{height:5px;margin:6px 0}
  .paper .line:after{font-size:7px;top:-6px}
  .score-meta b{font-size:9px}
  .score-meta small{
    font-size:7.5px;
    line-height:1.22;
  }

  .placeholder .compact-thumb{
    min-height:0;
  }

  footer{
    height:30px;
    padding:7px 20px;
    font-size:9px;
    overflow:hidden;
  }
}

/* Smaller laptop window: keep all nine cards visible but permit tighter cards. */
@media (min-width:1200px) and (max-height:850px){
  .shell{height:calc(100vh - 142px)}
  .hero{height:72px;padding:9px 14px}
  .hero h2{font-size:23px}
  .card{height:128px}
  .section{margin-top:6px}
  .section h3{height:17px;margin-bottom:3px;font-size:12px}
  .note{display:none}
  .song{padding:5px 8px;margin-bottom:3px}
}

/* Normal responsive fallback below desktop. */
@media (max-width:1199px){
  body{overflow:auto;height:auto}
}

/* Compact disclaimer and 1080p vertical rhythm */
.site-disclaimer{
  border:0;
  border-bottom:1px solid #2c3036;
  background:#111319;
  color:#bfc4ca;
  font-size:10.5px;
  line-height:1.3;
}
.site-disclaimer strong{color:#ff3b3b}

@media (min-width:1200px){
  header{
    height:58px !important;
    min-height:58px;
    padding:5px 20px !important;
    gap:14px;
  }
  .header-logo{width:64px !important;height:44px !important}
  header > h1{font-size:26px !important}

  .site-disclaimer{
    height:34px;
    padding:4px 20px;
    overflow:hidden;
  }
  .topnav{
    height:42px !important;
    padding:5px 20px !important;
    gap:8px;
  }
  .tab,.lvl{padding:6px 11px !important}

  .shell{height:calc(100vh - 164px) !important}
  aside:not(.site-disclaimer){padding:10px 12px !important}
  .levels{margin-bottom:8px !important;gap:6px}
  .listhead{margin:3px 0 6px}
  #search{padding:7px 9px;margin-bottom:6px}
  .song{padding:6px 8px;margin-bottom:4px}

  main{padding:8px 16px 6px !important}
  .hero{height:72px !important;padding:7px 12px !important}
  .hero h2{font-size:27px !important}
  .section{margin-top:6px !important}
  .section h3{height:18px;margin-bottom:3px;font-size:14px}

  .video-section .card{height:340px;min-height:340px}
  .video-section .compact-thumb,
  .video-section .video-thumb{
    width:calc(100% - 20px);
    margin:10px 10px 0;
  }
  .video-section .cardbody.video-info{padding:9px 12px 10px;gap:4px}
  .text-resource-card{min-height:88px;padding:9px 11px;gap:5px}
  .text-resource-head{gap:5px 8px}
  footer{height:30px;padding:6px 20px}
}

@media (max-width:1199px){
  .site-disclaimer{padding:8px 14px;font-size:10px}
}

/* Standard artwork for unused resource slots */
.working-thumb{
  background:
    radial-gradient(circle at 18% 20%,rgba(255,255,255,.18),transparent 28%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.045) 0 2px,transparent 2px 14px),
    linear-gradient(135deg,#68113f,#a9226d 55%,#3a1029) !important;
}
.working-inner{position:relative;z-index:1}

.text-resource-empty{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  justify-content:center;
  background:
    radial-gradient(circle at 88% 20%,rgba(233,62,155,.18),transparent 34%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 2px,transparent 2px 13px),
    linear-gradient(135deg,#151920,#101318) !important;
}
.text-resource-empty::after{
  position:absolute;
  right:18px;
  bottom:-18px;
  z-index:-1;
  color:rgba(233,62,155,.12);
  font-size:82px;
  font-weight:900;
  line-height:1;
  pointer-events:none;
}
.audio-placeholder::after{content:"♪"}
.score-placeholder::after{content:"▤"}
.text-resource-empty > *{position:relative;z-index:1}

/* Header logo and single-line library title */
.header-logo{
  width:92px;
  height:62px;
  object-fit:contain;
  flex:0 0 auto;
  filter:brightness(0) invert(1);
}
header h1{
  margin:0;
  white-space:nowrap;
}
header > h1{
  font-size:clamp(20px,2vw,32px);
}

@media (min-width:1200px) and (min-height:760px){
  .header-logo{width:72px;height:48px}
}

@media (max-width:700px){
  header{gap:12px;padding-inline:14px}
  .header-logo{width:64px;height:44px}
  header > h1{
    font-size:clamp(14px,4vw,20px);
    white-space:normal;
    line-height:1.08;
  }
}

/* V9 — Larger VIDEO row + larger type while retaining 1080p one-glance layout */

@media (min-width:1200px) and (min-height:760px){

  /* Overall type: increase roughly 2pt / 3px from V8 */
  body{font-size:15px}

  header h1{font-size:28px}
  header p{font-size:14px}
  .mark{font-size:32px}

  .tab,.lvl{font-size:14px}
  .eyebrow{font-size:12px}
  .listhead{font-size:14px}
  #search{font-size:13px}

  .song b{font-size:13px}
  .song small{font-size:11px}

  .hero h2{font-size:30px}
  .meta{font-size:14px}
  .muted{font-size:12px}

  .section h3{font-size:15px}

  .badge{font-size:10px}
  .card strong{font-size:13px}
  .note{font-size:10.5px}
  .source-link,.inline-link{font-size:10.5px}

  /* VIDEO gets the extra vertical space:
     16:9 media on top, all details/actions underneath. */
  .video-section .cards{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
  }

  .video-section .card{
    display:flex;
    flex-direction:column;
    height:285px;
    min-height:285px;
  }

  .video-section .compact-thumb,
  .video-section .video-thumb{
    width:100%;
    height:auto;
    aspect-ratio:16/9;
    flex:0 0 auto;
    border-right:0;
    border-bottom:1px solid #2a2d34;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#000;
  }

  .video-section .compact-thumb img,
  .video-section .video-thumb img,
  .video-section .compact-thumb iframe,
  .video-section .video-thumb iframe{
    position:static;
    width:100%;
    height:100%;
    aspect-ratio:16/9;
    object-fit:contain;
    background:#000;
  }

  .video-section .cardbody{
    display:flex;
    flex-direction:column;
    width:100%;
    flex:1 1 auto;
    padding:9px 11px 10px;
    gap:5px;
  }

  .video-section .card strong{
    font-size:13.5px;
    line-height:1.25;
  }

  .video-section .note{
    display:block;
    font-size:10px;
    line-height:1.3;
    -webkit-line-clamp:2;
  }

  .video-section .actions{
    margin-top:auto;
  }

  /* AUDIO and SCORES keep V8's compact horizontal cards. */
  .audio-section .card,
  .scores-section .card{
    height:126px;
    min-height:126px;
  }

  .audio-section .card strong,
  .scores-section .card strong{
    font-size:12.5px;
  }

  .audio-section .note,
  .scores-section .note{
    font-size:9.5px;
    line-height:1.25;
  }

  /* Slightly rebalance vertical spacing so all 9 stay on screen. */
  .section{margin-top:7px}
  .section h3{
    height:18px;
    margin-bottom:4px;
  }

  .hero{
    height:82px;
  }

  main{
    padding-top:12px;
  }
}

/* Tighter handling for shorter 1080p browser content areas caused by browser chrome. */
@media (min-width:1200px) and (max-height:900px){
  .video-section .card{
    height:250px;
    min-height:250px;
  }
  .video-section .cardbody{
    padding:7px 10px 8px;
  }
  .video-section .note{
    display:none;
  }
  .audio-section .card,
  .scores-section .card{
    height:112px;
    min-height:112px;
  }
  .hero{
    height:72px;
  }
  .section{margin-top:5px}
  .section h3{height:16px;margin-bottom:3px}
}

/* Preserve normal responsive behaviour below desktop width. */
@media (max-width:1199px){
  body{font-size:16px}
  .video-section .card{
    display:flex;
    flex-direction:column;
    height:auto;
  }
  .video-section .compact-thumb,
  .video-section .video-thumb{
    width:100%;
    aspect-ratio:16/9;
    height:auto;
  }
}

/* V10 — balanced 1080p dashboard
   - left repertoire may scroll independently
   - right side always keeps 3 VIDEO + 3 AUDIO + 3 SCORE resources in view
   - video player/thumbnail is intentionally narrower than the card to save vertical height
   - video information remains visible below every video block
   - typography increased again */

@media (min-width:1200px){

  body{
    height:100vh;
    overflow:hidden;
    font-size:17px;
  }

  header{
    height:64px;
    padding:8px 22px;
  }
  header h1{font-size:30px}
  header p{font-size:15px}
  .mark{font-size:34px}

  .topnav{
    height:46px;
    padding:6px 18px;
  }
  .tab,.lvl{
    font-size:15px;
    padding:7px 12px;
  }

  .shell{
    grid-template-columns:248px 1fr;
    height:calc(100vh - 140px);
    min-height:0;
  }

  /* LEFT: allowed to overflow/scroll */
  aside{
    padding:12px 10px;
    overflow-y:auto;
    overflow-x:hidden;
  }
  .eyebrow{font-size:13px}
  .listhead{font-size:15px}
  #search{font-size:14px;padding:9px 10px}
  .song{
    padding:8px 9px;
    margin-bottom:6px;
  }
  .song b{font-size:14px}
  .song small{font-size:12px}

  /* RIGHT: fixed one-glance dashboard */
  main{
    padding:10px 16px 8px;
    overflow:hidden;
    min-height:0;
  }

  .hero{
    height:76px;
    padding:10px 14px;
    margin-bottom:0;
  }
  .hero h2{font-size:31px}
  .meta{font-size:15px}
  .muted{font-size:13px}

  .section{
    margin-top:5px;
  }
  .section h3{
    height:18px;
    margin:0 0 4px;
    font-size:16px;
  }

  .cards{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
  }

  /* VIDEO:
     card stays compact, but always includes info underneath.
     player is centered and narrower than card; empty side-space is intentional. */
  .video-section .card{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    height:220px;
    min-height:220px;
    overflow:hidden;
  }

  .video-section .compact-thumb,
  .video-section .video-thumb{
    width:min(68%,270px);
    max-width:270px;
    aspect-ratio:16/9;
    height:auto;
    flex:0 0 auto;
    margin:8px auto 0;
    border:1px solid #2b2f36;
    border-radius:8px;
    overflow:hidden;
    background:#000;
  }

  .video-section .compact-thumb img,
  .video-section .video-thumb img,
  .video-section .compact-thumb iframe,
  .video-section .video-thumb iframe{
    width:100%;
    height:100%;
    object-fit:contain;
    background:#000;
  }

  .video-section .cardbody{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    width:100%;
    padding:7px 11px 9px;
    gap:4px;
    min-height:0;
  }

  .video-section .badge{
    font-size:11px;
    padding:3px 7px;
  }
  .video-section .card strong{
    font-size:15px;
    line-height:1.22;
    -webkit-line-clamp:2;
  }
  .video-section .note{
    display:block !important;
    font-size:12px;
    line-height:1.2;
    -webkit-line-clamp:1;
  }
  .video-section .source-link,
  .video-section .inline-link{
    font-size:11px;
    padding:5px 8px;
  }

  /* AUDIO and SCORES remain compact horizontal rows */
  .audio-section .card,
  .scores-section .card{
    display:grid;
    grid-template-columns:minmax(115px,34%) 1fr;
    height:112px;
    min-height:112px;
  }

  .audio-section .cardbody,
  .scores-section .cardbody{
    padding:8px 9px;
    gap:4px;
  }
  .audio-section .badge,
  .scores-section .badge{
    font-size:10px;
  }
  .audio-section .card strong,
  .scores-section .card strong{
    font-size:14px;
    line-height:1.18;
  }
  .audio-section .note,
  .scores-section .note{
    font-size:11px;
    line-height:1.15;
    -webkit-line-clamp:2;
  }
  .audio-section .source-link,
  .audio-section .inline-link,
  .scores-section .source-link,
  .scores-section .inline-link{
    font-size:10.5px;
    padding:5px 8px;
  }

  .compact-audio{
    height:100%;
    min-height:0;
    padding:6px;
  }
  .audio-cover{
    width:58px;
    height:58px;
    flex:0 0 58px;
  }
  .audio-intro b{font-size:10px}
  .audio-intro span{font-size:9px}
  .audio-intro button{font-size:9px;padding:5px 7px}

  .score-thumb{
    height:100%;
    min-height:0;
    padding:7px;
    grid-template-columns:52px 1fr;
  }
  .score-meta b{font-size:10px}
  .score-meta small{font-size:8.5px;line-height:1.15}

  footer{
    height:30px;
    padding:7px 18px;
    font-size:10px;
  }
}

/* Browser chrome can reduce a 1080p display to ~900px usable height.
   Tighten only the RIGHT side; LEFT remains scrollable. */
@media (min-width:1200px) and (max-height:920px){
  .shell{height:calc(100vh - 136px)}
  .hero{height:68px;padding:8px 13px}
  .hero h2{font-size:28px}
  .section{margin-top:4px}
  .section h3{height:16px;margin-bottom:3px;font-size:15px}

  .video-section .card{
    height:200px;
    min-height:200px;
  }
  .video-section .compact-thumb,
  .video-section .video-thumb{
    width:min(60%,235px);
    max-width:235px;
    margin-top:6px;
  }
  .video-section .cardbody{
    padding:6px 10px 7px;
  }
  .video-section .note{
    font-size:11px;
  }

  .audio-section .card,
  .scores-section .card{
    height:100px;
    min-height:100px;
  }
}

/* Very short desktop viewport: keep nine resources visible by shrinking video media further,
   never by removing the information area. */
@media (min-width:1200px) and (max-height:820px){
  .hero{height:60px}
  .hero h2{font-size:26px}
  .meta{font-size:13px}
  .muted{font-size:11px}

  .video-section .card{
    height:174px;
    min-height:174px;
  }
  .video-section .compact-thumb,
  .video-section .video-thumb{
    width:min(52%,190px);
    max-width:190px;
    margin-top:5px;
  }
  .video-section .card strong{font-size:13.5px}
  .video-section .note{font-size:10.5px}
  .video-section .source-link,
  .video-section .inline-link{font-size:10px;padding:4px 7px}

  .audio-section .card,
  .scores-section .card{
    height:90px;
    min-height:90px;
  }
  .audio-section .note,
  .scores-section .note{
    display:none;
  }
}

/* Mobile/tablet fallback */
@media (max-width:1199px){
  body{height:auto;overflow:auto;font-size:17px}
  aside{overflow:visible}
  main{overflow:visible}
}

/* V11 — restore full video information + larger typography.
   The left repertoire list may scroll. The right resource dashboard remains the priority. */

@media (min-width:1200px){

  body{
    font-size:19px;
  }

  header h1{font-size:32px}
  header p{font-size:17px}
  .mark{font-size:36px}

  .tab,.lvl{
    font-size:17px;
  }

  .eyebrow{
    font-size:15px;
  }
  .listhead{
    font-size:17px;
  }
  #search{
    font-size:16px;
  }

  .song{
    padding:10px 10px;
    margin-bottom:7px;
  }
  .song b{
    font-size:16px;
  }
  .song small{
    font-size:14px;
  }

  .hero{
    height:86px;
    padding:11px 15px;
  }
  .hero h2{
    font-size:34px;
  }
  .meta{
    font-size:17px;
  }
  .muted{
    font-size:15px;
  }

  .section h3{
    font-size:18px;
    height:21px;
  }

  /* VIDEO — use more of the spare screen height.
     Media remains proportional and all information is shown below it. */
  .video-section .card{
    display:flex;
    flex-direction:column;
    height:280px;
    min-height:280px;
    overflow:hidden;
  }

  .video-section .compact-thumb,
  .video-section .video-thumb{
    width:min(78%,330px);
    max-width:330px;
    aspect-ratio:16/9;
    height:auto;
    margin:10px auto 0;
    flex:0 0 auto;
    border:1px solid #343941;
    border-radius:10px;
    background:#000;
    overflow:hidden;
  }

  .video-section .compact-thumb img,
  .video-section .video-thumb img,
  .video-section .compact-thumb iframe,
  .video-section .video-thumb iframe{
    width:100%;
    height:100%;
    object-fit:contain;
    background:#000;
  }

  .video-section .cardbody.video-info{
    width:100%;
    flex:1 1 auto;
    padding:9px 13px 10px;
    display:flex;
    flex-direction:column;
    gap:4px;
    min-height:0;
  }

  .video-section .badge{
    font-size:12px;
    padding:4px 8px;
  }

  .video-section .video-title{
    font-size:17px !important;
    line-height:1.22;
    display:block !important;
    overflow:visible !important;
    -webkit-line-clamp:unset !important;
  }

  .video-section .video-description{
    font-size:14px;
    line-height:1.25;
    color:#e5e5e5;
    display:block;
  }

  .video-section .video-source-note{
    font-size:12px;
    line-height:1.25;
    color:#aeb4ba;
    display:block;
  }

  .video-section .actions{
    margin-top:auto;
  }

  .video-section .source-link,
  .video-section .inline-link{
    font-size:13px;
    padding:6px 10px;
  }

  /* AUDIO + SCORES — keep compact, but increase fonts. */
  .audio-section .card,
  .scores-section .card{
    height:126px;
    min-height:126px;
  }

  .audio-section .badge,
  .scores-section .badge{
    font-size:12px;
  }

  .audio-section .card strong,
  .scores-section .card strong{
    font-size:16px;
  }

  .audio-section .note,
  .scores-section .note{
    font-size:13px;
    line-height:1.2;
  }

  .audio-section .source-link,
  .audio-section .inline-link,
  .scores-section .source-link,
  .scores-section .inline-link{
    font-size:12.5px;
    padding:6px 9px;
  }

  .audio-intro b{font-size:12px}
  .audio-intro span{font-size:11px}
  .audio-intro button{font-size:11px}

  .score-meta b{font-size:12px}
  .score-meta small{font-size:10px;line-height:1.18}

  /* Left side can extend beyond one screen as requested. */
  aside{
    overflow-y:auto !important;
  }
}

/* Typical 1080p browser usable height: compact only enough to preserve all 9 resources. */
@media (min-width:1200px) and (max-height:920px){
  .hero{
    height:76px;
  }
  .hero h2{font-size:31px}

  .video-section .card{
    height:250px;
    min-height:250px;
  }
  .video-section .compact-thumb,
  .video-section .video-thumb{
    width:min(68%,290px);
    max-width:290px;
    margin-top:8px;
  }

  .video-section .video-title{font-size:16px !important}
  .video-section .video-description{font-size:13px}
  .video-section .video-source-note{font-size:11px}

  .audio-section .card,
  .scores-section .card{
    height:116px;
    min-height:116px;
  }
}

/* Shorter desktop windows: shrink only media first, never the video information block. */
@media (min-width:1200px) and (max-height:820px){
  .hero{height:68px}
  .hero h2{font-size:29px}

  .video-section .card{
    height:225px;
    min-height:225px;
  }
  .video-section .compact-thumb,
  .video-section .video-thumb{
    width:min(58%,245px);
    max-width:245px;
    margin-top:6px;
  }

  .video-section .video-description{
    font-size:12.5px;
  }
  .video-section .video-source-note{
    font-size:10.5px;
  }

  .audio-section .card,
  .scores-section .card{
    height:105px;
    min-height:105px;
  }
}

/* Below desktop width, allow normal document flow. */
@media (max-width:1199px){
  body{font-size:18px}
  .video-section .video-title{font-size:18px !important}
  .video-section .video-description{font-size:15px}
  .video-section .video-source-note{font-size:13px}
}

/* V12 — use the remaining lower-screen space for a taller VIDEO row.
   AUDIO and SCORES remain unchanged from V11. */

@media (min-width:1200px){

  .video-section .card{
    height:340px;
    min-height:340px;
  }

  .video-section .compact-thumb,
  .video-section .video-thumb{
    width:min(88%,410px);
    max-width:410px;
    aspect-ratio:16/9;
    margin:12px auto 0;
  }

  .video-section .cardbody.video-info{
    padding:10px 14px 12px;
    gap:5px;
  }

  .video-section .video-title{
    font-size:18px !important;
  }

  .video-section .video-description{
    font-size:14.5px;
  }

  .video-section .video-source-note{
    font-size:12.5px;
  }
}

/* Typical 1080p browser usable height. */
@media (min-width:1200px) and (max-height:920px){

  .video-section .card{
    height:315px;
    min-height:315px;
  }

  .video-section .compact-thumb,
  .video-section .video-thumb{
    width:min(84%,375px);
    max-width:375px;
    margin-top:10px;
  }
}

/* Slightly shorter desktop window: still enlarge the video row compared with V11,
   but preserve the full 3 + 3 + 3 resource dashboard. */
@media (min-width:1200px) and (max-height:820px){

  .video-section .card{
    height:275px;
    min-height:275px;
  }

  .video-section .compact-thumb,
  .video-section .video-thumb{
    width:min(72%,315px);
    max-width:315px;
    margin-top:8px;
  }
}

/* V13: corrected direct Spotify embed and genuine score previews */
.spotify-direct{
  grid-column:1;grid-row:1;width:100%;height:100%;min-height:0;
  padding:5px;display:flex;align-items:center;justify-content:center;
  background:#0b0e11;border-right:1px solid #2a2d34;
}
.spotify-direct iframe{width:100%;height:80px;border:0;border-radius:10px;display:block}

.score-image-button{
  grid-column:1;grid-row:1;width:100%;height:100%;
  border:0;border-right:1px solid #2a2d34;background:#0d121b;color:white;
  padding:6px;cursor:pointer;overflow:hidden;
}
.actual-score-preview{
  width:100%;height:76px;object-fit:contain;display:block;
  background:white;border-radius:5px;
}
.score-image-button span{display:block;font-size:9px;margin-top:4px;color:#d6dbe0}

.score-no-preview{
  grid-column:1;grid-row:1;display:grid;grid-template-columns:48px 1fr;
  gap:7px;align-items:center;width:100%;height:100%;padding:7px;
  border-right:1px solid #2a2d34;background:linear-gradient(135deg,#192238,#11151c);
}
.score-no-preview b{display:block;font-size:10px}
.score-no-preview small{display:block;font-size:8px;line-height:1.2;color:#c8cdd2;margin-top:3px}
.score-no-preview .paper{padding:5px}

.score-viewer{display:none;position:fixed;inset:0;z-index:1200}
.score-viewer.open{display:block}
.score-viewer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(4px)}
.score-viewer-panel{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(900px,90vw);max-height:90vh;background:#101318;
  border:1px solid #3a3f46;border-radius:18px;overflow:hidden;
  box-shadow:0 25px 90px rgba(0,0,0,.6)
}
.score-viewer-head{display:flex;justify-content:space-between;align-items:flex-start;padding:14px 18px;border-bottom:1px solid #292d34}
.score-viewer-head h3{margin:2px 0 0;font-size:20px}
.closebtn{width:38px;height:38px;border:0;border-radius:50%;background:#262b31;color:white;font-size:26px;cursor:pointer}
.score-viewer-body{min-height:480px;max-height:68vh;overflow:auto;background:#090b0e;padding:20px;display:flex;justify-content:center;align-items:flex-start}
.score-viewer-body img{max-width:100%;height:auto;background:white;box-shadow:0 10px 40px rgba(0,0,0,.45)}
.score-viewer-actions{padding:12px 16px;border-top:1px solid #292d34;display:flex;justify-content:flex-end}
.open-source{background:#a9226d;color:white;text-decoration:none;padding:9px 14px;border-radius:999px;font-weight:800}

/* V14 — Video priority layout
   Audio and scores are text-only direct-link resources.
   Video row becomes taller with more information area underneath. */

.score-viewer{display:none !important;}

@media (min-width:1200px){
  aside{
    overflow-y:auto !important;
    overflow-x:hidden;
  }

  main{
    padding:12px 18px 10px;
    overflow:hidden;
  }

  .hero{
    height:84px;
  }

  .section{
    margin-top:8px;
  }

  .section h3{
    font-size:18px;
    height:22px;
    margin-bottom:5px;
  }

  /* VIDEO ROW */
  .video-section .cards{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
  }

  .video-section .card{
    display:flex;
    flex-direction:column;
    height:390px;
    min-height:390px;
    border-radius:16px;
    overflow:hidden;
    background:#12161b;
  }

  .video-section .compact-thumb,
  .video-section .video-thumb{
    width:calc(100% - 30px);
    margin:15px 15px 0;
    max-width:none;
    aspect-ratio:16/9;
    border-radius:11px;
    border:1px solid #343941;
    background:#000;
    overflow:hidden;
  }

  .video-section .compact-thumb img,
  .video-section .video-thumb img,
  .video-section .compact-thumb iframe,
  .video-section .video-thumb iframe{
    width:100%;
    height:100%;
    object-fit:cover;
    background:#000;
    display:block;
  }

  .working-thumb{
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#8b1f62,#b92578);
  }
  .working-inner{
    text-align:center;
    color:#fff;
    padding:16px;
  }
  .working-label{
    font-size:28px;
    font-weight:800;
    margin-bottom:8px;
  }
  .working-copy{
    font-size:15px;
    line-height:1.3;
    opacity:.95;
  }

  .video-section .cardbody.video-info{
    flex:1 1 auto;
    width:100%;
    padding:14px 16px 15px;
    display:flex;
    flex-direction:column;
    gap:6px;
  }

  .video-section .badge{
    font-size:13px;
    padding:4px 9px;
  }

  .video-section .video-title{
    font-size:18px !important;
    line-height:1.22;
    display:block !important;
    overflow:visible !important;
    -webkit-line-clamp:unset !important;
  }

  .video-section .video-description{
    font-size:14px;
    line-height:1.3;
    color:#f0f0f0;
  }

  .video-section .video-source-note{
    font-size:12.5px;
    line-height:1.3;
    color:#b4bbc2;
  }

  .video-section .actions{
    margin-top:auto;
    gap:8px;
  }

  .video-section .source-link,
  .video-section .inline-link{
    font-size:13px;
    padding:7px 11px;
  }

  /* AUDIO + SCORE TEXT ROWS */
  .audio-section .cards,
  .scores-section .cards{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
  }

  .text-resource-card{
    background:#12161b;
    border:1px solid #2f353d;
    border-radius:14px;
    padding:14px 15px;
    min-height:118px;
    display:flex;
    flex-direction:column;
    gap:8px;
  }

  .text-resource-head{
    display:flex;
    flex-direction:column;
    gap:7px;
  }

  .text-resource-card .badge{
    align-self:flex-start;
    font-size:12px;
    padding:4px 8px;
  }

  .text-resource-card strong{
    font-size:17px;
    line-height:1.22;
    display:block;
  }

  .text-resource-copy{
    font-size:13.5px;
    line-height:1.3;
    color:#d4d8dd;
  }

  .text-resource-card .actions{
    margin-top:auto;
  }

  .text-resource-card .source-link{
    font-size:13px;
    padding:7px 11px;
  }

  .text-resource-empty{
    justify-content:center;
    background:linear-gradient(135deg,#151920,#11151b);
  }

  .text-resource-empty strong{
    font-size:16px;
  }
}

/* Typical 1080p browser usable area */
@media (min-width:1200px) and (max-height:930px){
  .video-section .card{
    height:350px;
    min-height:350px;
  }
  .text-resource-card{
    min-height:108px;
  }
  .video-section .video-title{
    font-size:17px !important;
  }
}

/* Slightly shorter desktop window */
@media (min-width:1200px) and (max-height:840px){
  .hero{
    height:74px;
  }
  .video-section .card{
    height:315px;
    min-height:315px;
  }
  .video-section .compact-thumb,
  .video-section .video-thumb{
    width:calc(100% - 26px);
    margin:13px 13px 0;
  }
  .video-section .cardbody.video-info{
    padding:11px 13px 12px;
    gap:5px;
  }
  .video-section .video-title{
    font-size:16px !important;
  }
  .video-section .video-description{
    font-size:13px;
  }
  .video-section .video-source-note{
    font-size:11.5px;
  }
  .text-resource-card{
    min-height:96px;
    padding:12px 13px;
    gap:6px;
  }
  .text-resource-card strong{
    font-size:15px;
  }
  .text-resource-copy{
    font-size:12.5px;
  }
}

@media (max-width:1199px){
  .text-resource-card{
    background:#12161b;
    border:1px solid #2f353d;
    border-radius:14px;
    padding:14px 15px;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .text-resource-head{
    display:flex;
    flex-direction:column;
    gap:7px;
  }
  .text-resource-copy{
    font-size:14px;
    line-height:1.35;
    color:#d4d8dd;
  }
  .video-section .compact-thumb img,
  .video-section .video-thumb img,
  .video-section .compact-thumb iframe,
  .video-section .video-thumb iframe{
    object-fit:cover;
  }
}

/* V15 — dedicated mobile responsive pass.
   Desktop V14 layout is preserved. */

.repertoire-toggle{
  display:none;
}

/* Tablet: keep the desktop visual language but reduce density. */
@media (min-width:821px) and (max-width:1199px){
  header{
    height:auto;
    padding:14px 18px;
  }
  header h1{font-size:27px}
  header p{font-size:13px}
  .topnav{
    padding:10px 14px;
    gap:8px;
  }
  .shell{
    grid-template-columns:260px 1fr;
  }
  aside{
    padding:16px 12px;
  }
  main{
    padding:18px;
  }
  .video-section .cards{
    grid-template-columns:1fr;
  }
  .video-section .card{
    height:auto;
  }
  .video-section .compact-thumb,
  .video-section .video-thumb{
    width:100%;
    margin:0;
    border-radius:12px 12px 0 0;
  }
  .audio-section .cards,
  .scores-section .cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Phone experience */
@media (max-width:820px){
  html{
    scroll-behavior:smooth;
  }

  body{
    height:auto !important;
    overflow:auto !important;
    font-size:17px;
  }

  header{
    height:auto;
    padding:12px 14px;
    gap:12px;
    position:relative;
  }
  .mark{
    font-size:27px;
    padding-right:12px;
  }
  header h1{
    font-size:22px;
    line-height:1.05;
  }
  header p{
    font-size:11px;
    margin-top:4px;
    letter-spacing:.2px;
  }

  .topnav{
    position:sticky;
    top:0;
    z-index:30;
    padding:8px 10px;
    gap:7px;
    overflow-x:auto;
    scrollbar-width:none;
    background:rgba(13,15,18,.96);
    backdrop-filter:blur(8px);
  }
  .topnav::-webkit-scrollbar{display:none}
  .tab{
    flex:0 0 auto;
    min-height:42px;
    padding:8px 13px;
    font-size:13px;
  }

  .shell{
    display:block;
    min-height:0;
    height:auto !important;
  }

  aside{
    padding:12px 12px 10px;
    border-right:0;
    border-bottom:1px solid #252525;
    overflow:visible !important;
    position:relative;
  }

  aside > .eyebrow{
    font-size:11px;
    margin-bottom:7px;
  }
  .levels{
    gap:7px;
    margin-bottom:10px;
  }
  .lvl{
    min-height:40px;
    padding:8px 13px;
    font-size:13px;
  }

  .repertoire-toggle{
    display:flex;
    width:100%;
    min-height:50px;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border:1px solid #4b2b40;
    border-radius:12px;
    padding:10px 12px;
    background:linear-gradient(135deg,#21131e,#15171c);
    color:#fff;
    font-weight:800;
    font-size:15px;
    cursor:pointer;
  }
  .repertoire-toggle:after{
    content:"⌄";
    color:#e93e9b;
    font-size:22px;
    line-height:1;
    margin-left:auto;
    transform:translateY(-1px);
  }
  .repertoire-toggle[aria-expanded="true"]:after{
    content:"⌃";
  }
  .toggle-meta{
    color:#bfc3c8;
    font-size:11px;
    font-weight:600;
    white-space:nowrap;
  }

  .repertoire-panel{
    display:none;
    margin-top:9px;
    padding-top:8px;
    border-top:1px solid #2a2d33;
  }
  .repertoire-panel.open{
    display:block;
  }

  .listhead{
    margin:2px 0 8px;
    font-size:12px;
  }
  #search{
    min-height:44px;
    font-size:16px; /* avoids iOS zoom-on-focus */
    padding:10px 12px;
    margin-bottom:9px;
  }
  .song{
    min-height:52px;
    padding:10px 11px;
    margin-bottom:7px;
    border-radius:10px;
  }
  .song b{
    font-size:14px;
    line-height:1.2;
  }
  .song small{
    font-size:12px;
    line-height:1.25;
  }

  main{
    padding:12px 12px 24px;
    overflow:visible !important;
  }

  .hero{
    height:auto !important;
    min-height:0;
    padding:14px;
    border-radius:14px;
  }
  .hero .eyebrow{
    font-size:10px;
    margin-bottom:5px;
  }
  .hero h2{
    font-size:26px;
    line-height:1.06;
    margin-bottom:6px;
  }
  .meta{
    font-size:15px;
    margin:5px 0 4px;
  }
  .muted{
    font-size:12px;
    line-height:1.35;
  }

  .section{
    margin-top:18px;
  }
  .section h3{
    height:auto;
    margin-bottom:8px;
    font-size:16px;
  }
  .cards,
  .video-section .cards,
  .audio-section .cards,
  .scores-section .cards{
    grid-template-columns:1fr !important;
    gap:10px;
  }

  /* Mobile video: one full-width 16:9 card at a time. */
  .video-section .card{
    height:auto !important;
    min-height:0 !important;
    border-radius:14px;
  }
  .video-section .compact-thumb,
  .video-section .video-thumb{
    width:100% !important;
    max-width:none !important;
    aspect-ratio:16/9;
    margin:0 !important;
    border:0;
    border-bottom:1px solid #343941;
    border-radius:14px 14px 0 0;
  }
  .video-section .compact-thumb img,
  .video-section .video-thumb img,
  .video-section .compact-thumb iframe,
  .video-section .video-thumb iframe{
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .video-section .cardbody.video-info{
    padding:12px 13px 13px;
    gap:6px;
  }
  .video-section .badge{
    font-size:11px;
  }
  .video-section .video-title{
    font-size:17px !important;
  }
  .video-section .video-description{
    font-size:13px;
  }
  .video-section .video-source-note{
    font-size:11.5px;
  }
  .video-section .actions{
    gap:7px;
  }
  .video-section .source-link,
  .video-section .inline-link{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 12px;
    font-size:12px;
  }

  .working-label{
    font-size:24px;
  }
  .working-copy{
    font-size:13px;
  }

  /* Mobile Audio / Score: simple touch-friendly direct-link cards. */
  .text-resource-card{
    min-height:0 !important;
    padding:13px 14px;
    border-radius:12px;
    gap:7px;
  }
  .text-resource-head{
    gap:6px;
  }
  .text-resource-card .badge{
    font-size:10px;
  }
  .text-resource-card strong{
    font-size:16px;
    line-height:1.25;
  }
  .text-resource-copy{
    font-size:13px;
    line-height:1.35;
  }
  .text-resource-card .source-link{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    padding:8px 12px;
  }

  footer{
    height:auto !important;
    padding:13px 14px;
    font-size:11px;
    line-height:1.4;
  }

  .local-notice{
    font-size:11px;
    padding:8px 12px;
  }
}

/* Small phones */
@media (max-width:420px){
  header h1{font-size:20px}
  .mark{font-size:24px}
  .tab,.lvl{font-size:12px}
  .hero h2{font-size:24px}
  .video-section .video-title{font-size:16px !important}
}

/* V15 compact alignment refinement */
.text-resource-card > .actions{display:none}

@media (min-width:1200px){
  .hero{
    height:84px !important;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "eyebrow eyebrow"
      "title meta"
      "title details";
    column-gap:24px;
    align-items:center;
    overflow:visible;
  }
  .hero .eyebrow{grid-area:eyebrow;margin:0}
  .hero h2{grid-area:title;margin:0;line-height:1.08}
  .hero .meta{grid-area:meta;margin:0;text-align:right;white-space:nowrap}
  .hero .muted{grid-area:details;text-align:right;white-space:nowrap}

  .video-section .actions{flex-wrap:nowrap}

  .text-resource-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "badge link"
      "title title";
    align-items:center;
    gap:8px 10px;
  }
  .text-resource-head .badge{grid-area:badge;margin:0}
  .text-resource-head strong{grid-area:title;min-width:0}
  .text-resource-head .compact-source-link{
    grid-area:link;
    white-space:nowrap;
    justify-self:end;
  }
}

@media (max-width:1199px){
  .text-resource-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "badge link"
      "title title";
    align-items:center;
    gap:7px 10px;
  }
  .text-resource-head .badge{grid-area:badge}
  .text-resource-head strong{grid-area:title}
  .text-resource-head .compact-source-link{grid-area:link;justify-self:end}
}