/* ================= 皮肤变量 ================= */
:root {
  /* 墨绿（默认） */
  --accent: #58BD38;
  --accent-l: #a6f585;
  --accent-d: #3f9a26;
  --accent-d2: #276515;
  --accent-rgb: 88, 189, 56;
  --accent-l-rgb: 166, 245, 133;
  --accent-d2-rgb: 39, 101, 21;
  --btn-l: #7fe45c;
  --btn-d: #3f9a26;
  --btn-text: #05230c;

  /* UI 强调色（刻度尺、拍点、开关、拍号等） */
  --ui: #58BD38;
  --ui-l: #a6f585;
  --ui-rgb: 88, 189, 56;
  --ui-l-rgb: 166, 245, 133;

  --blob-1: rgba(110,216,76,.95);
  --blob-2: rgba(58,150,38,.95);
  --blob-3: rgba(120,230,80,.7);
  --blob-4: rgba(88,189,56,.8);

  --card-tint: rgba(88, 189, 56, .07);
  --card-tint-2: rgba(88, 189, 56, .055);
  --card-bg: rgba(10, 16, 8, .42);
}

[data-theme="silver"] {
  --accent: #CBD8E5;
  --accent-l: #F5FAFF;
  --accent-d: #8FA5BA;
  --accent-d2: #5A6E82;
  --accent-rgb: 203, 216, 229;
  --accent-l-rgb: 245, 250, 255;
  --accent-d2-rgb: 90, 110, 130;
  --btn-l: #E4EDF6;
  --btn-d: #8FA5BA;
  --btn-text: #1a2836;

  --ui: #CBD8E5;
  --ui-l: #F5FAFF;
  --ui-rgb: 203, 216, 229;
  --ui-l-rgb: 245, 250, 255;

  --blob-1: rgba(200,220,240,.85);
  --blob-2: rgba(140,165,190,.85);
  --blob-3: rgba(220,235,250,.6);
  --blob-4: rgba(180,200,220,.7);

  --card-tint: rgba(203, 216, 229, .07);
  --card-tint-2: rgba(203, 216, 229, .055);
  --card-bg: rgba(14, 18, 22, .42);
}

/* 香槟金：金色只用于指针 / 按钮 / BPM 大字，背景与控件沿用银白 */
[data-theme="gold"] {
  --accent: #D4AF6A;
  --accent-l: #F5DCA8;
  --accent-d: #A8843E;
  --accent-d2: #6E5420;
  --accent-rgb: 212, 175, 106;
  --accent-l-rgb: 245, 220, 168;
  --accent-d2-rgb: 110, 84, 32;
  --btn-l: #E8C888;
  --btn-d: #A8843E;
  --btn-text: #2a1f0a;

  --ui: #CBD8E5;
  --ui-l: #F5FAFF;
  --ui-rgb: 203, 216, 229;
  --ui-l-rgb: 245, 250, 255;

  --blob-1: rgba(200,220,240,.85);
  --blob-2: rgba(140,165,190,.85);
  --blob-3: rgba(220,235,250,.6);
  --blob-4: rgba(180,200,220,.7);

  --card-tint: rgba(203, 216, 229, .07);
  --card-tint-2: rgba(203, 216, 229, .055);
  --card-bg: rgba(14, 18, 22, .42);
}

/* 樱花粉：粉色只用于指针 / 按钮 / BPM 大字，背景与控件沿用银白 */
[data-theme="pink"] {
  --accent: #FF9EB5;
  --accent-l: #FFD6E0;
  --accent-d: #E07A94;
  --accent-d2: #B05570;
  --accent-rgb: 255, 158, 181;
  --accent-l-rgb: 255, 214, 224;
  --accent-d2-rgb: 176, 85, 112;
  --btn-l: #FFBCCB;
  --btn-d: #E07A94;
  --btn-text: #33101a;

  --ui: #CBD8E5;
  --ui-l: #F5FAFF;
  --ui-rgb: 203, 216, 229;
  --ui-l-rgb: 245, 250, 255;

  --blob-1: rgba(200,220,240,.85);
  --blob-2: rgba(140,165,190,.85);
  --blob-3: rgba(220,235,250,.6);
  --blob-4: rgba(180,200,220,.7);

  --card-tint: rgba(203, 216, 229, .07);
  --card-tint-2: rgba(203, 216, 229, .055);
  --card-bg: rgba(14, 18, 22, .42);
}

/* ================= 基础 ================= */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  min-height: 100%;
  background: #050505;
  color: #eaeaea;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Helvetica Neue", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 18px 12px;
  overflow-x: hidden;
}

/* ================= 背景光斑 ================= */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(76px);
  will-change: transform;
  transition: background .6s ease;
}
.b1 {
  width: 460px; height: 460px;
  top: -150px; left: -170px;
  background: radial-gradient(circle, var(--blob-1), transparent 66%);
  opacity: .7;
  animation: drift1 17s ease-in-out infinite alternate;
}
.b2 {
  width: 420px; height: 420px;
  bottom: -160px; right: -160px;
  background: radial-gradient(circle, var(--blob-2), transparent 66%);
  opacity: .62;
  animation: drift2 21s ease-in-out infinite alternate;
}
.b3 {
  width: 320px; height: 320px;
  top: 38%; left: 54%;
  background: radial-gradient(circle, var(--blob-3), transparent 68%);
  opacity: .38;
  animation: drift3 25s ease-in-out infinite alternate;
}
.b4 {
  width: 240px; height: 240px;
  top: 62%; left: 8%;
  background: radial-gradient(circle, var(--blob-4), transparent 68%);
  opacity: .3;
  animation: drift4 19s ease-in-out infinite alternate;
}
@keyframes drift1 { to { transform: translate(70px, 90px) scale(1.14); } }
@keyframes drift2 { to { transform: translate(-80px, -60px) scale(1.1); } }
@keyframes drift3 { to { transform: translate(-90px, 70px) scale(1.22); } }
@keyframes drift4 { to { transform: translate(60px, -50px) scale(1.18); } }

/* ================= 卡片主体（水玻璃） ================= */
.metronome {
  position: relative;
  z-index: 1;
  width: min(384px, 100%);
  padding: 30px 22px 24px;
  border-radius: 30px;
  margin: auto 0;

  background:
    radial-gradient(130% 55% at 50% -8%, rgba(255,255,255,.16), transparent 58%),
    linear-gradient(168deg,
      rgba(255,255,255,.085) 0%,
      rgba(255,255,255,.02) 18%,
      var(--card-tint) 52%,
      rgba(0,0,0,.07) 78%,
      var(--card-tint-2) 100%),
    var(--card-bg);

  -webkit-backdrop-filter: blur(30px) saturate(190%) brightness(1.08);
  backdrop-filter: blur(30px) saturate(190%) brightness(1.08);

  box-shadow:
    0 28px 64px rgba(0,0,0,.72),
    0 8px 22px rgba(0,0,0,.4),
    inset 0 0 0 1px rgba(255,255,255,.13),
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -1px 0 rgba(255,255,255,.06),
    inset 1px 0 0 rgba(255,255,255,.05),
    inset -1px 0 0 rgba(255,255,255,.05),
    inset 0 0 46px rgba(var(--ui-rgb), .07),
    inset 0 -44px 80px rgba(0,0,0,.16);

  overflow: hidden;
  transition: background .5s ease, box-shadow .5s ease;
}

.metronome::before {
  content: '';
  position: absolute;
  top: 0; left: 5%; right: 5%;
  height: 28%;
  pointer-events: none;
  border-radius: 30px 30px 0 0;
  background: linear-gradient(180deg,
    rgba(255,255,255,.11) 0%,
    rgba(255,255,255,.035) 48%,
    transparent 100%);
  z-index: 0;
}

.metronome::after {
  content: '';
  position: absolute;
  top: -6%;
  left: 6%;
  width: 30%;
  height: 58%;
  pointer-events: none;
  border-radius: 50% 55% 42% 50% / 62% 55% 42% 38%;
  background: linear-gradient(158deg,
    rgba(255,255,255,.12) 0%,
    rgba(255,255,255,.03) 52%,
    transparent 100%);
  filter: blur(7px);
  z-index: 0;
}

/* ================= BPM 读数（强调色） ================= */
.readout {
  position: relative;
  z-index: 2;
  text-align: center;
  line-height: 1;
  margin-bottom: 4px;
}
.bpm-num {
  display: block;
  font-size: 56px;
  font-weight: 300;
  letter-spacing: -2.5px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  text-shadow:
    0 0 22px rgba(var(--accent-rgb), .72),
    0 0 52px rgba(var(--accent-rgb), .34);
  transition: color .3s ease, text-shadow .3s ease;
}
.bpm-unit {
  display: block;
  margin-top: 8px;
  font-size: 9px;
  letter-spacing: 7px;
  padding-left: 7px;
  color: rgba(255,255,255,.34);
  font-weight: 500;
}

/* ================= 指针舞台 ================= */
.pendulum-area {
  position: relative;
  z-index: 2;
  height: 262px;
  margin-top: 6px;
}

.scale {
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 0;
  height: 0;
  z-index: 1;
}
.tick {
  position: absolute;
  left: -1px;
  bottom: 0;
  width: 2px;
  height: 7px;
  border-radius: 1px;
  background: rgba(255,255,255,.17);
  transform-origin: bottom center;
}
.tick.major {
  width: 2.5px;
  height: 11px;
  background: rgba(var(--ui-l-rgb), .55);
  box-shadow: 0 0 6px rgba(var(--ui-l-rgb), .38);
}
.tick.center {
  height: 15px;
  width: 2.5px;
  background: var(--ui-l);
  box-shadow: 0 0 10px rgba(var(--ui-l-rgb), .95);
}

.pendulum {
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 8px;
  height: 232px;
  margin-left: -4px;
  transform-origin: bottom center;
  z-index: 3;
  will-change: transform;
}

.rod {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: linear-gradient(90deg,
    #191919 0%,
    #484848 10%,
    #9a9a9a 24%,
    #ececec 38%,
    #ffffff 48%,
    #e9e9e9 56%,
    #b2b2b2 69%,
    #6a6a6a 86%,
    #232323 100%);
  box-shadow:
    0 0 12px rgba(var(--accent-rgb), .26),
    0 0 1px rgba(0,0,0,.92);
  transition: box-shadow .09s;
}
.rod::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 26%,
    #ffffff 0%,
    #d8d8d8 34%,
    #929292 66%,
    #454545 100%);
  box-shadow: 0 0 10px rgba(255,255,255,.5);
}
.rod::after {
  content: '';
  position: absolute;
  top: 6px; bottom: 6px;
  left: 50%;
  width: 1.5px;
  margin-left: -.75px;
  background: linear-gradient(180deg,
    rgba(255,255,255,.6),
    rgba(255,255,255,.1) 42%,
    rgba(255,255,255,.02) 100%);
}

/* 配重块（强调色） */
.weight {
  position: absolute;
  left: 50%;
  top: 32%;
  width: 24px;
  height: 16px;
  margin-left: -12px;
  border-radius: 3px 3px 4px 4px;
  background: linear-gradient(180deg,
    var(--accent-l) 0%,
    var(--accent) 34%,
    var(--accent-d) 68%,
    var(--accent-d2) 100%);
  box-shadow:
    0 1px 3px rgba(0,0,0,.7),
    0 0 15px rgba(var(--accent-rgb), .62),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.38);
  transition: top .35s cubic-bezier(.4,0,.2,1), box-shadow .09s;
}
.weight::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #8f8f8f 58%, #3d3d3d 100%);
  box-shadow: 0 0 4px rgba(0,0,0,.7);
}

.pendulum.flash .rod {
  box-shadow:
    0 0 26px rgba(var(--accent-l-rgb), .95),
    0 0 7px rgba(255,255,255,.9);
}
.pendulum.flash .weight {
  box-shadow:
    0 0 28px rgba(var(--accent-l-rgb), 1),
    0 0 9px rgba(255,255,255,.75),
    inset 0 1px 0 rgba(255,255,255,.75);
}

/* 中心枢轴 */
.pivot {
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  z-index: 5;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%,
    #f2f2f2 0%,
    #a8a8a8 36%,
    #616161 66%,
    #292929 100%);
  box-shadow:
    0 0 18px rgba(var(--ui-rgb), .52),
    0 2px 7px rgba(0,0,0,.85),
    inset 0 -1px 2px rgba(0,0,0,.5);
}
.pivot::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--accent), var(--accent-d2) 78%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.55);
}

/* ================= 拍点指示（UI 色） ================= */
.beats {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 28px;
  margin-top: 6px;
}
.beat {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.65);
  transition: background .08s, box-shadow .08s, transform .08s;
}
.beat.on {
  background: var(--ui);
  transform: scale(1.5);
  box-shadow: 0 0 12px var(--ui), 0 0 22px rgba(var(--ui-rgb), .55);
}
.beat.accent.on {
  background: var(--ui-l);
  box-shadow: 0 0 16px var(--ui-l), 0 0 28px rgba(var(--ui-l-rgb), .7);
}

/* ================= 播放按钮（强调色，停止态保持主题色） ================= */
.play-btn {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  margin: 18px 0 22px;
  padding: 17px 0 18px;
  border: none;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 6px;
  padding-left: 6px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;

  color: var(--btn-text);
  background: linear-gradient(180deg, var(--btn-l) 0%, var(--accent) 46%, var(--btn-d) 100%);

  box-shadow:
    /* 紧贴按钮底部的一层硬边阴影，形成清晰分界 */
    0 1px 0 rgba(0,0,0,.55),
    0 3px 0 rgba(0,0,0,.4),
    /* 中距离深色阴影，把按钮从玻璃背景中托起 */
    0 8px 16px rgba(0,0,0,.62),
    /* 远距离扩散阴影，增加纵深 */
    0 16px 34px rgba(0,0,0,.38),
    /* 主题光晕，压低避免干扰边缘 */
    0 8px 20px rgba(var(--accent-rgb), .16),
    /* 按钮内部立体层次 */
    inset 0 -5px 0 rgba(var(--accent-d2-rgb), .55),
    inset 0 -7px 12px rgba(0,0,0,.28),
    inset 0 2px 0 rgba(255,255,255,.55),
    inset 0 8px 14px rgba(255,255,255,.18);

  transform: translateY(0);
  transition:
    transform .08s ease,
    box-shadow .08s ease,
    background .25s ease,
    color .25s ease;
}

/* 按下：下沉 4px，硬边阴影收紧 */
.play-btn:active {
  transform: translateY(4px);
  box-shadow:
    0 0 0 rgba(0,0,0,.55),
    0 1px 0 rgba(0,0,0,.4),
    0 2px 6px rgba(0,0,0,.5),
    0 4px 12px rgba(0,0,0,.3),
    0 2px 8px rgba(var(--accent-rgb), .12),
    inset 0 -2px 0 rgba(var(--accent-d2-rgb), .55),
    inset 0 -3px 8px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 4px 10px rgba(255,255,255,.12);
}

/* 停止态：保持主题色，完全静态，不闪烁不呼吸 */
.play-btn.stop {
  /* 无动画，无变色；状态通过文字“停止”和指针摆动来传达 */
}

/* ================= 控制区 ================= */
.controls {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.ctl-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
}
.ctl-label {
  flex: 0 0 32px;
  font-size: 14px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,.38);
}

.bpm-controls {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
}
.step-btn {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.68);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s, color .15s;
  user-select: none;
}
.step-btn:active {
  background: rgba(var(--ui-rgb), .24);
  border-color: rgba(var(--ui-rgb), .58);
  color: var(--ui);
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 46px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,.14);
  outline: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: none;
  background: radial-gradient(circle at 34% 28%,
    var(--accent-l) 0%, var(--accent) 60%, var(--accent-d) 100%);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), .85), 0 1px 3px rgba(0,0,0,.65);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), .85);
  cursor: pointer;
}

.ts-group {
  flex: 1;
  display: flex;
  gap: 5px;
}
.ts-btn {
  flex: 1;
  padding: 7px 0;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.42);
  font-size: 14px;
  cursor: pointer;
  transition: all .2s;
  user-select: none;
}
.ts-btn.on {
  color: var(--ui);
  border-color: rgba(var(--ui-rgb), .58);
  background: rgba(var(--ui-rgb), .14);
  box-shadow: 0 0 13px rgba(var(--ui-rgb), .28), inset 0 0 9px rgba(var(--ui-rgb), .1);
}

.toggle-row { justify-content: space-between; }

.switch {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.switch input { display: none; }
.switch-track {
  position: relative;
  width: 36px;
  height: 21px;
  border-radius: 11px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.11);
  transition: background .25s, box-shadow .25s, border-color .25s;
}
.switch-knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f0f0f0, #b6b6b6);
  box-shadow: 0 1px 3px rgba(0,0,0,.45);
  transition: transform .25s, background .25s;
}
.switch input:checked + .switch-track {
  background: rgba(var(--ui-rgb), .34);
  border-color: rgba(var(--ui-rgb), .52);
  box-shadow: 0 0 13px rgba(var(--ui-rgb), .38), inset 0 0 7px rgba(var(--ui-rgb), .28);
}
.switch input:checked + .switch-track .switch-knob {
  transform: translateX(15px);
  background: linear-gradient(180deg, var(--ui-l), var(--ui));
}
.switch-text {
  font-size: 14px;
  color: rgba(255,255,255,.48);
  letter-spacing: 0.5px;
}

.mute-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.55);
  font-size: 14px;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: all .2s;
  user-select: none;
}
.mute-btn:active { transform: scale(.96); }
.mute-btn.muted {
  color: #ff9f43;
  border-color: rgba(255,159,67,.48);
  background: rgba(255,159,67,.11);
  box-shadow: 0 0 13px rgba(255,159,67,.26);
}
.mute-btn svg { width: 14px; height: 14px; display: block; }
.mute-btn .ic-off { display: none; }
.mute-btn.muted .ic-on { display: none; }
.mute-btn.muted .ic-off { display: block; }

/* ================= 皮肤选择器 ================= */
.skin-row {
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.skins {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.skin-dot {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: var(--dot);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.45),
    inset 0 -1px 2px rgba(0,0,0,.3),
    0 2px 6px rgba(0,0,0,.45);
  transition: transform .18s ease, box-shadow .25s ease;
}

.skin-dot::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  transition: border-color .22s ease;
}

.skin-dot.active::after {
  border-color: var(--dot);
}

.skin-dot.active {
  transform: scale(1.08);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.55),
    inset 0 -1px 2px rgba(0,0,0,.3),
    0 2px 8px rgba(0,0,0,.5),
    0 0 14px var(--dot);
}

.skin-dot:active {
  transform: scale(.9);
}

/* ================= 页脚 ================= */
.footer_note {
  width: 100%;
  text-align: center;
  margin: 28px 0 20px;
  position: relative;
  z-index: 1;
}
.footer_note p {
  color: rgba(255,255,255,.38);
  line-height: 32px;
  font-size: 14px;
  margin: 0;
}
.footer_note p a {
  color: rgba(255,255,255,.38);
  text-decoration: none;
  transition: color 0.2s;
}
.footer_note p:hover a {
  color: #58BD38;
}

/* ================= 摆动动画 ================= */
@keyframes swing {
  0%   { transform: rotate(0deg);   animation-timing-function: cubic-bezier(0,0,.58,1); }
  25%  { transform: rotate(13deg);  animation-timing-function: cubic-bezier(.42,0,1,1); }
  50%  { transform: rotate(0deg);   animation-timing-function: cubic-bezier(0,0,.58,1); }
  75%  { transform: rotate(-13deg); animation-timing-function: cubic-bezier(.42,0,1,1); }
  100% { transform: rotate(0deg); }
}

/* ================= 窄屏 / 矮屏微调 ================= */
@media (max-width: 360px) {
  .metronome { padding: 24px 16px 20px; }
  .bpm-num { font-size: 48px; }
  .bpm-unit { letter-spacing: 5px; }
  .pendulum-area { height: 236px; }
  .pendulum { height: 208px; width: 7px; margin-left: -3.5px; }
  .ctl-label { flex: 0 0 32px; letter-spacing: 1px; }
  .ts-btn { font-size: 11px; }
  .beats { gap: 10px; height: 26px; }
  .play-btn { font-size: 15px; padding: 15px 0 16px; letter-spacing: 5px; }
  .skin-dot { width: 22px; height: 22px; }
}

@media (max-height: 720px) {
  .pendulum-area { height: 226px; }
  .pendulum { height: 198px; }
  .metronome { padding-top: 24px; }
  .bpm-num { font-size: 50px; }
}