:root { --paper:#F5EBDA; --card:#FBF5EA; --loess:#D9B47A; --loess-lt:#EBD3A6; --ochre:#8B4A2B; --red:#B8322A; --ink:#2B2420; }
  * { box-sizing:border-box; }
  html { background:var(--paper) url(assets/c7843d08ca90e957.jpg) center/cover fixed; }
  html, body { margin:0; height:100%; }
  body { font-family:"华文楷体","STKaiti","KaiTi",serif;
         color:var(--ink); display:flex; flex-direction:column; overflow:hidden; }
  header { display:flex; align-items:center; gap:18px; padding:2.2vh 3vw 1vh; }
  header img { width:6vh; height:6vh; }
  header h1 { margin:0; font:700 4.2vh "黑体","SimHei",sans-serif; letter-spacing:.2vh; white-space:nowrap; }
  header .sub { color:var(--ochre); font-size:2.4vh; white-space:nowrap; }
  .tabs { margin-left:auto; display:flex; gap:1vw; }
  .tabs button, .ctrl button { font:inherit; font-size:2.6vh; border:2px solid var(--ochre); background:var(--card); color:var(--ochre);
         border-radius:999px; padding:.8vh 1.6vw; cursor:pointer; white-space:nowrap; }
  .tabs button.on { background:var(--red); border-color:var(--red); color:var(--paper); }
  main { flex:1; display:flex; flex-direction:column; justify-content:center; gap:2.4vh; padding:0 3vw 2vh; }
  .lane { display:grid; grid-template-columns:22vh 1fr; gap:2vw; align-items:center; background:var(--card);
          border:2px solid var(--ochre); border-radius:2vh; padding:2vh 2vw; box-shadow:0 .6vh 1.6vh rgba(139,74,43,.15);
          transition:opacity .3s, transform .3s; }
  .lane.dim { opacity:.4; transform:scale(.985); }
  .who { position:relative; height:26vh; }
  .who img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:transform .08s ease-out; }
  .who img.heavy { opacity:0; }
  .who.down img { transform:translateY(1.6vh) scaleY(.97); }
  .who.pose-heavy img.walk { opacity:0; } .who.pose-heavy img.heavy { opacity:1; }
  .head { display:flex; align-items:baseline; gap:2vw; margin-bottom:1.4vh; flex-wrap:nowrap; }
  .tag { background:var(--red); color:var(--paper); padding:.4vh 1.4vw; border-radius:.6vh; font-size:2.8vh; font-weight:700; white-space:nowrap; }
  .tag.even { background:var(--ochre); }
  .nota { font:700 4.2vh "Times New Roman",serif; white-space:nowrap; }
  .desc { font-size:3vh; font-weight:700; white-space:nowrap; }
  .say { font-size:2.6vh; color:var(--ochre); white-space:nowrap; margin-left:auto; }
  .track { position:relative; display:grid; grid-template-columns:repeat(4,1fr); height:9vh; border-left:.5vh solid var(--ink); border-right:.5vh solid var(--ink); }
  .beat { position:relative; display:flex; gap:.5vw; padding:0 .5vw; align-items:center; border-right:2px dashed var(--loess); }
  .beat:nth-child(2) { border-right:.5vh solid var(--ink); }
  .beat:last-child { border-right:0; }
  .blk { height:7vh; border-radius:1.2vh; background:var(--loess); transition:transform .08s, box-shadow .08s, filter .08s;
         display:flex; align-items:center; justify-content:center; color:var(--paper); font-size:3vh; font-weight:700; }
  .blk.long { background:var(--red); }
  .blk.hit { transform:translateY(-.8vh) scale(1.04); box-shadow:0 0 0 .5vh rgba(184,50,42,.25), 0 1vh 2vh rgba(43,36,32,.25); filter:brightness(1.12); }
  .feet { display:grid; grid-template-columns:repeat(4,1fr); height:7vh; margin-top:1vh; }
  .feet div { display:flex; align-items:center; gap:.5vw; padding:0 .5vw; }
  .feet span { display:flex; justify-content:center; align-items:center; height:100%; }
  .feet img { opacity:.18; transition:opacity .1s, transform .1s; }
  .feet img.on { opacity:1; transform:scale(1.12); }
  .lyric { display:grid; grid-template-columns:repeat(4,1fr); margin-top:.6vh; font-size:3.4vh; font-weight:700; color:var(--ochre); }
  .lyric div { display:flex; gap:.5vw; padding:0 .5vw; }
  .lyric span { text-align:center; }
  .playhead { position:absolute; top:-1vh; bottom:-1vh; width:.6vh; border-radius:.3vh; background:var(--red); left:0; display:none;
              box-shadow:0 0 1vh rgba(184,50,42,.6); }
  .ctrl { display:flex; align-items:center; justify-content:center; gap:2vw; font-size:2.6vh; }
  .ctrl .go { background:var(--red); color:var(--paper); border-color:var(--red); min-width:12vw; }
  .ctrl input[type=range] { width:16vw; accent-color:var(--red); }
  .ctrl input[type=checkbox] { width:2.4vh; height:2.4vh; accent-color:var(--red); vertical-align:middle; }
  .ctrl { margin:0 auto 3vh; padding:1.2vh 2vw; background:rgba(251,245,234,.94); border:2px solid var(--loess); border-radius:999px; }
  .u { border-bottom:.35vh solid var(--ink); padding-bottom:.2vh; }
  .u2 { border-bottom:.35vh solid var(--ink); padding-bottom:.9vh; }
  .count { position:fixed; inset:0; display:none; align-items:center; justify-content:center; font:700 22vh "华文行楷","STXingkai",serif;
           color:var(--red); text-shadow:0 1vh 3vh rgba(0,0,0,.2); pointer-events:none; }

h1{font-family:"Microsoft YaHei","微软雅黑",sans-serif!important;font-weight:700!important}.return-note{position:fixed;right:18px;top:10px;font:14px "Microsoft YaHei",sans-serif;color:#fff;background:#70442bd9;padding:5px 9px;z-index:99;pointer-events:none}
.who{transform:none!important}.who video{width:100%;height:100%;object-fit:contain;display:block}.who.down{transform:none!important}
header{gap:12px!important;flex-wrap:wrap;min-height:9vh;height:auto!important}header .sub{display:none}header h1{font-size:clamp(24px,2.5vw,36px)!important;white-space:nowrap}header .tabs{margin-left:auto;gap:8px;display:flex;flex-wrap:wrap;justify-content:flex-end}header .tabs button{white-space:nowrap;font-size:clamp(16px,1.6vw,23px);padding:.6vh 1vw}.return-note{top:auto!important;bottom:8px!important}