:root {
  color-scheme: light;
  --paper: #edede8;
  --panel: #dddfd3;
  --cell: #f4f4f0;
  --track: #d1d4c4;
  --ink: #252626;
  --yellow: #fab633;
}

* { box-sizing: border-box; }
html {
  min-width: 280px;
  min-height: 100%;
  background: var(--paper);
}
html, body, body * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
body {
  margin: 0;
  min-width: 280px;
  min-height: 100dvh;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, output { font: inherit; }
button {
  border: 0;
  color: inherit;
  background: none;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button:active { opacity: .7; }
button:disabled { opacity: .3; cursor: default; }
button:focus-visible, input:focus-visible, output:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}
img, canvas {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-user-drag: none;
}

.metronome {
  position: relative;
  width: min(100%, 402px);
  height: clamp(540px, 100svh, 1000px);
  margin: 0 auto;
  padding: max(44px, env(safe-area-inset-top)) 20px max(4px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 72px 28px minmax(0, 1fr) 40px 60px 48px 16px;
  row-gap: clamp(10px, 2.3svh, 24px);
  overflow: hidden;
}

.tempo-overview {
  position: relative;
  z-index: 2;
  grid-row: 1;
  justify-self: center;
  width: min(340px, 100%);
  height: 72px;
  display: flex;
  gap: 8px;
}
#edit-tempo {
  width: 100px;
  height: 72px;
  flex: 0 0 100px;
  border-radius: 16px;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
#bpm {
  font-size: 34px;
  font-weight: 600;
  line-height: 40px;
  pointer-events: none;
}
#edit-tempo.decimal #bpm { font-size: 30px; }
#edit-tempo span {
  color: #a2a693;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}
.beat-panel {
  min-width: 0;
  flex: 1;
  height: 72px;
  padding: 8px;
  border-radius: 16px;
  background: var(--panel);
  overflow: hidden;
}
.beat-pattern {
  --columns: 4;
  --column-gap: 8px;
  width: 100%;
  height: 56px;
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  grid-auto-rows: 56px;
  column-gap: var(--column-gap);
  row-gap: 4px;
  align-content: center;
  justify-content: stretch;
}
.beat-pattern[data-count="1"] { --columns: 1; grid-template-columns: 42px; justify-content: center; }
.beat-pattern[data-count="2"] { --columns: 2; grid-template-columns: repeat(2, 42px); justify-content: center; }
.beat-pattern[data-count="3"] { --columns: 3; grid-template-columns: repeat(3, 42px); justify-content: center; }
.beat-pattern[data-count="4"] { --columns: 4; --column-gap: clamp(6px, 4vw, 16px); }
.beat-pattern[data-count="5"] { --columns: 5; --column-gap: 8px; }
.beat-pattern[data-count="6"] { --columns: 6; --column-gap: 6px; }
.beat-pattern[data-count="7"], .beat-pattern[data-count="8"] { --columns: 4; --column-gap: 8px; grid-auto-rows: 26px; }
.beat-pattern[data-count="9"] { --columns: 5; --column-gap: 8px; grid-auto-rows: 26px; }
.beat-pattern[data-count="12"] { --columns: 6; --column-gap: 6px; grid-auto-rows: 26px; }
.beat-cell {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border: 1.5px solid var(--cell);
  border-radius: 12px;
  background: var(--cell);
}
.beat-pattern[data-count="6"] .beat-cell,
.beat-pattern[data-count="7"] .beat-cell,
.beat-pattern[data-count="8"] .beat-cell,
.beat-pattern[data-count="9"] .beat-cell,
.beat-pattern[data-count="12"] .beat-cell { border-radius: 8px; }
.beat-cell.accent { background: var(--ink); }
.beat-cell.normal::after {
  content: "";
  position: absolute;
  left: -1.5px;
  right: -1.5px;
  bottom: -1.5px;
  height: calc(50% + 1.5px);
  background: var(--ink);
}
.beat-cell.mute { background: var(--cell); }
.beat-cell.current.accent { background: var(--yellow); }
.beat-cell.current.normal::after { background: var(--yellow); }
.beat-cell:focus-visible { outline-width: 2px; outline-offset: 1px; }

.tempo-controls {
  position: relative;
  z-index: 2;
  grid-row: 2;
  justify-self: center;
  width: min(340px, 100%);
  height: 28px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.step { width: 28px; height: 28px; flex: 0 0 28px; }
#quick-speed {
  position: relative;
  min-width: 0;
  flex: 1;
  height: 28px;
  cursor: ew-resize;
  touch-action: none;
  --position: 37.93%;
}
.quick-track {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 13px;
  height: 2px;
  border-radius: 7px;
  background: var(--track);
  overflow: hidden;
}
.quick-track i {
  display: block;
  width: var(--position);
  height: 100%;
  background: var(--ink);
}
#quick-speed > img {
  position: absolute;
  top: 4px;
  left: calc(var(--thumb-x, 106.62px) - 12px);
  width: 24px;
  height: 20px;
  pointer-events: none;
}
#quick-speed:focus-visible { outline: 2px solid var(--yellow); border-radius: 8px; }

.character {
  position: relative;
  grid-row: 3;
  justify-self: center;
  align-self: stretch;
  width: min(301px, 80%, 40svh);
  height: 100%;
  mix-blend-mode: multiply;
  pointer-events: auto;
  touch-action: pan-y;
  cursor: grab;
}
.character:active { cursor: grabbing; }
.character:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; border-radius: 20px; }
.character [hidden] { display: none !important; }
.sprite {
  position: absolute;
  width: 125%;
  height: auto;
  left: -12.5%;
  aspect-ratio: 1;
  top: 50%;
  transform: translateY(-50%) scale(.9);
}
.bird-sprite {
  position: absolute;
  width: 125%;
  height: auto;
  left: -12.5%;
  aspect-ratio: 16 / 9;
  top: 50%;
  transform: translateY(-50%) scale(.9);
  pointer-events: none;
}
.animal-loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  z-index: 3;
  font-size: 16px;
  line-height: 20px;
}
.animal-loading[hidden] { display: none; }
.loading-frames { position: relative; width: 100px; height: 100px; }
.loading-frames img {
  position: absolute;
  inset: 0;
  width: 100px;
  height: 100px;
  image-rendering: pixelated;
  animation: loading-frame 600ms steps(1, end) infinite;
}
.loading-frames img + img { animation-delay: -300ms; }
@keyframes loading-frame { 0% { visibility: visible; } 50%, 100% { visibility: hidden; } }

#practice-time {
  position: relative;
  grid-row: 4;
  justify-self: center;
  align-self: center;
  width: 132px;
  height: 40px;
}
#practice-time[hidden] { display: none; }
#practice-value {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: 12px;
  background: #fff;
  font-size: 20px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
#cancel-timer { position: absolute; left: 140px; top: 0; width: 40px; height: 40px; display: grid; place-items: center; }
#cancel-timer img { width: 20px; height: 20px; }
#toggle, .confirm {
  width: 150px;
  min-width: 150px;
  max-width: 150px;
  height: 60px;
  border-radius: 20px;
  background: var(--ink);
  color: #fff;
  font-size: 32px;
  font-weight: 400;
  line-height: 32px;
}
#toggle {
  position: relative;
  grid-row: 5;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
#toggle img { width: 36px; height: 36px; object-fit: contain; }
#toggle .pause-icon { display: none; }
#toggle[aria-pressed="true"] .play-icon { display: none; }
#toggle[aria-pressed="true"] .pause-icon { display: block; }

footer {
  position: relative;
  grid-row: 6;
  justify-self: center;
  width: min(269px, 100%);
  height: 48px;
  display: grid;
  grid-template-columns: 48px repeat(3, 44px);
  justify-content: space-between;
  align-items: center;
}
footer button { width: 44px; height: 44px; display: grid; place-items: center; }
footer .signature {
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22.8px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
footer .signature.long { font-size: 18px; }
footer .note img, footer .sound img { width: 25.6px; height: 25.6px; margin: auto; }
footer .note img { filter: grayscale(1) brightness(.25); }
footer .alarm img { width: 20px; height: 20px; margin: 2.8px auto; }
footer .alarm.active { position: relative; }
footer .alarm.active img { visibility: hidden; }
footer .alarm.active::after {
  content: "";
  position: absolute;
  inset: 2.8px;
  background: var(--yellow);
  mask: url("assets/ui/alarm.svg") center / contain no-repeat;
  -webkit-mask: url("assets/ui/alarm.svg") center / contain no-repeat;
}
#message {
  position: relative;
  grid-row: 7;
  align-self: center;
  margin: 0;
  text-align: center;
  font-size: 12px;
  color: #726c67;
}
#message span { opacity: 0; }

.sheet {
  position: fixed;
  inset: auto 0 max(20px, env(safe-area-inset-bottom));
  width: min(362px, calc(100vw - 40px));
  height: min(540px, calc(100dvh - 24px));
  max-width: none;
  max-height: calc(100svh - 40px);
  margin: 0 auto;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  border-radius: 30px;
  background: #fff;
  color: var(--ink);
  overscroll-behavior: contain;
}
.sheet::backdrop { background: rgba(0, 0, 0, .4); }
.sheet :focus-visible, .sheet .close:focus { outline: none; }
.sheet .close { position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; }
.sheet .confirm { position: absolute; left: 50%; top: 456px; transform: translateX(-50%); }

.meter-grid {
  position: absolute;
  top: 93px;
  left: 50%;
  transform: translateX(-50%);
  width: 228px;
  display: grid;
  grid-template-columns: repeat(3, 60px);
  gap: 24px;
}
.meter-grid button, .keypad button {
  min-width: 0;
  height: 60px;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  font-weight: 400;
  line-height: 1;
}
.meter-grid button { font-size: 20px; }
.keypad button { font-size: 30px; }
.meter-grid button.long { font-size: 20px; }
.meter-grid button[aria-pressed="true"] { color: var(--yellow); border-color: var(--yellow); }

#rhythm-beats {
  position: absolute;
  left: 50%;
  top: 152px;
  transform: translateX(-50%);
  width: min(290px, calc(100% - 72px));
}
#rhythm-beats[data-count="4"] { --column-gap: 16px; justify-content: stretch; }
#rhythm-beats:not([data-count="4"]) { justify-content: center; }
.rhythm-divider {
  position: absolute;
  left: 37px;
  right: 37px;
  top: 323px;
  height: 1px;
  background: var(--ink);
}
.sub-grid {
  position: absolute;
  top: 348px;
  left: 37px;
  right: 37px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 60px));
  gap: clamp(4px, 3vw, 16px);
  justify-content: space-between;
}
.sub-grid button {
  position: relative;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1.5px solid var(--ink);
  border-radius: 15px;
}
.sub-grid img { width: min(32px, calc(72% - 8px)); height: min(32px, calc(72% - 8px)); filter: brightness(0); }
.sub-grid button[aria-pressed="true"] { border-color: var(--yellow); }
.sub-grid button[aria-pressed="true"] img { filter: none; }

#tempo-draft {
  position: absolute;
  left: 40px;
  right: 40px;
  top: 4px;
  display: block;
  text-align: center;
  font-size: 80px;
  font-weight: 600;
  line-height: 96px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#tempo-draft.decimal { font-size: 62px; }
.tempo-divider { position: absolute; top: 120px; left: 41px; right: 41px; height: 1px; background: var(--ink); }
.keypad {
  position: absolute;
  left: 40px;
  right: 110px;
  top: 145px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.slider-wrap { position: absolute; right: 44px; top: 145px; width: 37px; height: 288px; --value: 37.93%; }
.slider-track { position: absolute; left: 8px; top: 0; width: 21px; height: 288px; border-radius: 7px; background: rgba(53, 44, 40, .14); overflow: hidden; }
#slider-fill { position: absolute; bottom: 0; width: 100%; height: var(--value); background: var(--ink); }
#slider-thumb { position: absolute; left: 0; bottom: calc(var(--value) - 9px); width: 37px; height: 18px; pointer-events: none; }
#tempo-slider { position: absolute; inset: 0; width: 37px; height: 288px; margin: 0; opacity: 0; writing-mode: vertical-lr; direction: rtl; cursor: ns-resize; touch-action: none; }
#tempo-error { position: absolute; top: 100px; left: 20px; right: 20px; min-height: 18px; margin: 0; text-align: center; color: #a3452a; font-size: 12px; line-height: 18px; }

.sound-options {
  position: absolute;
  top: 87px;
  left: 50%;
  transform: translateX(-50%);
  width: min(260px, calc(100% - 48px));
  display: grid;
  gap: 20px;
}
.sound-options button { height: 52px; border: 1.5px solid var(--ink); border-radius: 15px; font-size: 24px; }
.sound-options button[aria-pressed="true"] { color: var(--yellow); border-color: var(--yellow); }

#timer-dialog h2 { position: absolute; left: 0; right: 0; margin: 0; text-align: center; font-size: 20px; font-weight: 500; line-height: 28px; }
.stopwatch-title { top: 40px; }
.countdown-title { top: 295px; }
#stopwatch-preview { position: absolute; top: 74px; left: 0; right: 0; text-align: center; font-size: 60px; font-weight: 400; line-height: 72px; font-variant-numeric: tabular-nums; }
#timer-dialog #start-stopwatch { top: 170px; }
#timer-dialog #start-countdown { top: 440px; }
.timer-divider { position: absolute; top: 270px; left: 37px; right: 37px; height: 1px; background: var(--ink); }
#countdown-presets { position: absolute; top: 344px; left: 37px; right: 37px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
#countdown-presets::-webkit-scrollbar { display: none; }
#countdown-presets button { width: 60px; height: 60px; flex-shrink: 0; border: 1.5px solid var(--ink); border-radius: 15px; scroll-snap-align: start; }
#countdown-presets span { display: block; font-size: 28px; line-height: 32px; }
#countdown-presets small { display: block; font-size: 16px; line-height: 19px; }
#countdown-presets button[aria-pressed="true"] { color: var(--yellow); border-color: var(--yellow); }

@media (max-width: 370px) {
  .metronome { padding-left: 14px; padding-right: 14px; }
  .tempo-overview, .tempo-controls { width: 100%; }
  .tempo-overview { gap: 6px; }
  #edit-tempo { width: 92px; flex-basis: 92px; }
  .beat-panel { padding-left: 5px; padding-right: 5px; }
  .keypad { left: 24px; right: 88px; gap: 12px; }
  .slider-wrap { right: 26px; }
  .rhythm-divider, .sub-grid { left: 24px; right: 24px; }
}

@media (max-height: 650px) and (orientation: portrait) {
  .character { width: min(80%, 33svh); }
}

@media (min-width: 600px) and (max-width: 1023px), (min-width: 600px) and (orientation: portrait) {
  body { display: grid; place-items: center; }
  .metronome {
    width: min(560px, calc(100vw - 48px));
    height: clamp(680px, calc(100svh - 32px), 960px);
    padding-left: 32px;
    padding-right: 32px;
  }
  .tempo-overview, .tempo-controls { width: min(460px, 100%); }
  #edit-tempo { width: 112px; flex-basis: 112px; }
  .character { width: min(340px, 72%, 38svh); }
  footer { width: 300px; }
  .sheet {
    inset: 50% auto auto 50%;
    width: min(420px, calc(100vw - 64px));
    height: min(540px, calc(100dvh - 64px));
    transform: translate(-50%, -50%);
  }
}

/* Desktop canvas follows the 1120 × 630 Figma panel. */
.brand { display: none; }
.animal-switcher { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 7.5px; white-space: nowrap; color: rgba(0,0,0,.3); font-size: 16px; font-weight: 500; line-height: 22px; }
.animal-switcher button { width: 32px; height: 32px; display: grid; place-items: center; }
.animal-switcher button:disabled { opacity: .5; cursor: default; }
.animal-switcher button img { display: block; width: 7px; height: 10px; }
#animal-next img { transform: rotate(180deg); }
.animal-caption { min-width: 82px; text-align: center; }
footer .alarm.active::after { inset: auto; width: 20px; height: 20px; }
@media (min-width: 1024px) and (orientation: landscape), (orientation: landscape) and (min-width: 700px) and (max-height: 700px) {
  html, body { background: #fff; }
  body { display: grid; place-items: center; }
  .metronome {
    --controls-left: calc(50% + 79px);
    width: min(1120px, calc(100vw - 80px));
    height: 630px;
    padding: 0;
    display: block;
    border-radius: 40px;
    background: var(--paper);
    margin: 32px auto;
  }
  .brand { display: block; position: absolute; left: 40px; top: 40px; height: 24px; color: var(--ink); font-family: ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif; font-size: 26px; font-weight: 800; line-height: 1; white-space: nowrap; }
  .tempo-overview, .tempo-controls { position: absolute; left: var(--controls-left); width: 348px; }
  .tempo-overview { top: 154.8px; }
  #edit-tempo { width: 100px; flex-basis: 100px; }
  .tempo-controls { top: 266.8px; }
  .character { position: absolute; left: calc(24.15% - 192px); top: 114px; width: 384px; height: 424px; }
  .character canvas { top: 47.4%; transform: translate(12px, -50%) scale(.9); }
  .animal-switcher { bottom: -5px; }
  .animal-loading { left: 24.15%; top: 50%; }
  #toggle { position: absolute; top: 414.8px; left: calc(var(--controls-left) + 99px); }
  footer { display: contents; }
  footer button, footer .alarm.active { position: absolute; }
  footer .signature, footer .note { top: 414.8px; width: 60px; height: 60px; border-radius: 16px; background: var(--panel); }
  footer .signature { left: var(--controls-left); font-size: 20px; }
  footer .signature.long { font-size: 20px; }
  footer .note { left: calc(var(--controls-left) + 288px); }
  footer .sound { right: 93.6px; bottom: 28px; }
  footer .alarm { right: 28px; bottom: 28px; }
  #practice-time { position: absolute; right: 171px; bottom: 32px; width: 161px; height: 36px; padding: 0 10px; display: flex; align-items: center; gap: 10px; background: white; border-radius: 12px; }
  #practice-time[hidden] { display: none; }
  #practice-value { flex: 1; min-width: 0; height: 36px; background: none; }
  #cancel-timer { position: static; width: 20px; height: 20px; flex: 0 0 20px; }
  #message { position: absolute; left: var(--controls-left); bottom: 100px; width: 348px; }
  .sheet { inset: 50% auto auto 50%; width: min(362px, calc(100vw - 40px)); height: min(540px, calc(100dvh - 32px)); transform: translate(-50%, -50%); }
  #rhythm-beats { width: 232px; }
}
@media (orientation: landscape) and (min-width: 700px) and (max-width: 1100px) {
  .metronome { --controls-left: calc(100% - 380px); width: calc(100vw - 32px); }
  .character { left: calc((100% - 380px) / 2 - 160px); width: 320px; }
}
@media (orientation: landscape) and (min-width: 700px) and (max-height: 700px) {
  .metronome { height: max(360px, calc(100svh - 32px)); margin: 16px auto; }
  .brand { top: 24px; left: 24px; }
  .tempo-overview { top: 20%; }
  .tempo-controls { top: calc(20% + 100px); }
  #toggle, footer .signature, footer .note { top: auto; bottom: 85px; }
  .character { top: 70px; height: calc(100% - 110px); width: min(320px, 54svh); left: calc((100% - 380px) / 2 - min(160px, 27svh)); }
  footer .sound, footer .alarm { bottom: 28px; }
  #practice-time { bottom: 32px; }
}
/* Balance the two main columns on compact tablet landscape screens. */
@media (orientation: landscape) and (min-width: 960px) and (max-width: 1100px) and (min-height: 521px) {
  .metronome { --controls-left: calc(73% - 174px); }
  .character { left: calc(27% - min(160px, 27svh)); }
  .animal-loading { left: 27%; }
}
/* Keep the desktop two-column UI on phones rotated to landscape. */
@media (orientation: landscape) and (min-width: 480px) and (max-height: 520px) {
  html, body { background: #fff; }
  body { display: grid; place-items: center; }
  .metronome {
    --controls-left: max(40%, calc(100% - 380px));
    --controls-width: min(348px, calc(100% - var(--controls-left) - 16px));
    display: block;
    width: min(1120px, calc(100vw - 16px));
    height: calc(100svh - 16px);
    min-height: 0;
    margin: 8px auto;
    padding: 0;
    border-radius: 24px;
    background: var(--paper);
  }
  .brand { display: block; position: absolute; left: 20px; top: 16px; height: 24px; color: var(--ink); font-family: ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif; font-size: 26px; font-weight: 800; line-height: 1; white-space: nowrap; }
  .tempo-overview, .tempo-controls { position: absolute; left: var(--controls-left); width: var(--controls-width); }
  .tempo-overview { top: max(46px, calc(20% - 8px)); }
  #edit-tempo { width: 100px; flex-basis: 100px; }
  .tempo-controls { top: calc(max(46px, 20% - 8px) + 92px); }
  .character { position: absolute; top: clamp(52px, 18%, 70px); left: calc(50% - 190px); width: min(320px, 54svh); height: calc(100% - 112px); transform: translateX(-50%); }
  .character canvas { top: 47.4%; transform: translate(12px, -50%) scale(.9); }
  .animal-switcher { bottom: -5px; }
  .animal-loading { left: calc(50% - 190px); top: 50%; }
  #toggle { position: absolute; left: calc(var(--controls-left) + 99px); top: auto; bottom: clamp(55px, 18%, 75px); }
  footer { display: contents; }
  footer button, footer .alarm.active { position: absolute; }
  footer .signature, footer .note { top: auto; bottom: clamp(55px, 18%, 75px); width: 60px; height: 60px; border-radius: 16px; background: var(--panel); }
  footer .signature { left: var(--controls-left); font-size: 20px; }
  footer .signature.long { font-size: 20px; }
  footer .note { left: auto; right: max(16px, calc(100% - var(--controls-left) - 348px)); }
  footer .sound { right: 93.6px; bottom: 28px; }
  footer .alarm { right: 28px; bottom: 28px; }
  #practice-time { position: absolute; right: 171px; bottom: 32px; width: 161px; height: 36px; padding: 0 10px; display: flex; align-items: center; gap: 10px; background: white; border-radius: 12px; }
  #practice-time[hidden] { display: none; }
  #practice-value { flex: 1; min-width: 0; height: 36px; background: none; }
  #cancel-timer { position: static; width: 20px; height: 20px; flex: 0 0 20px; }
  #message { position: absolute; left: 10px; bottom: 8px; width: calc(var(--controls-left) - 20px); font-size: 11px; line-height: 15px; }
  .sheet { inset: 50% auto auto 50%; width: min(362px, calc(100vw - 24px)); height: min(540px, calc(100dvh - 16px)); max-height: calc(100dvh - 16px); transform: translate(-50%, -50%); }
  #rhythm-beats { width: 232px; }
}
@media (orientation: landscape) and (min-width: 560px) and (max-width: 650px) and (max-height: 520px) {
  .character, .animal-loading { left: 20%; }
  #toggle { left: calc(var(--controls-left) + 82px); }
}
@media (orientation: landscape) and (min-width: 480px) and (max-width: 559px) and (max-height: 520px) {
  .brand { height: 20px; font-size: 21px; }
  .tempo-overview, .beat-panel, #edit-tempo { height: 60px; }
  #edit-tempo { width: 80px; flex-basis: 80px; }
  #bpm { font-size: 28px; line-height: 32px; }
  #edit-tempo span { font-size: 11px; }
  .beat-panel { padding: 6px; }
  #beats { height: 48px; grid-auto-rows: 48px; }
  #beats[data-count="7"], #beats[data-count="8"], #beats[data-count="9"], #beats[data-count="12"] { grid-auto-rows: 22px; }
  .tempo-controls { top: calc(max(46px, 20% - 8px) + 74px); }
  .character { left: 20%; width: min(145px, 46svh); height: calc(100% - 124px); }
  .animal-loading { left: 20%; }
  #toggle { left: calc(var(--controls-left) + 66px); width: 130px; min-width: 130px; max-width: 130px; height: 52px; }
  footer .signature, footer .note { width: 48px; height: 52px; }
  footer .note { right: 16px; }
}
@media (orientation: landscape) and (min-width: 480px) and (max-height: 340px) {
  #toggle, footer .signature, footer .note { bottom: 59px; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}