/* Metronome — a lacquered pyramid metronome with a brass pendulum, on a deck of
 * beat lights. One Page Toys tool family, self-contained, light and dark.
 * Light: an oxblood mahogany case on a pale linen shelf. Dark: a black piano
 * lacquer case under a warm lamp. The brass is the same in both. */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600;1,700&family=Inter:wght@400;500;600;700;800&display=swap");

:root{
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ink: #221a17;
  --bg: #efe9e1;
  --surface: #fbf8f4;
  --surface-2: #e9e1d6;
  --muted: #6e625a;
  --line: #e0d6ca;
  --line-strong: #cbbdac;
  --accent: #8e2a22;
  --accent-ink: #fff4e8;
  --accent-soft: rgba(142, 42, 34, 0.12);
  --brass: #b88a3a;
  --radius: 22px;
  --radius-sm: 14px;
  --radius-pill: 999px;
  --shadow: 0 2px 8px rgba(50, 26, 18, 0.07);
  --shadow-md: 0 8px 22px rgba(50, 26, 18, 0.11);
  --shadow-lg: 0 22px 50px rgba(50, 26, 18, 0.18);
  --glass: rgba(251, 248, 244, 0.8);
  /* the shelf the instrument stands on */
  --shelf-1: #f8f4ee;
  --shelf-2: #e6ddd0;
  --shelf-ink: #2a1f1a;
  --shelf-muted: #7a6c62;
  --shelf-line: rgba(80, 50, 30, 0.12);
  /* read by the canvas */
  --case-lit: #7a2219;
  --case-mid: #4f1410;
  --case-dark: #2a0806;
  --case-gloss: rgba(255, 226, 214, 0.42);
  --case-edge: rgba(255, 200, 180, 0.35);
  --case-grain: rgba(28, 4, 2, 0.22);
  --floor-shadow: rgba(60, 28, 16, 0.32);
  --lamp: rgba(255, 236, 205, 0);
  /* beat lights */
  --jewel-off: #d8cfc3;
  --jewel-on: #c9822b;
  --jewel-hot: #d8452c;
}
:root[data-theme="dark"]{
  --ink: #f1e9df;
  --bg: #0d0b0a;
  --surface: #1a1614;
  --surface-2: #231e1a;
  --muted: #a69788;
  --line: #2a2420;
  --line-strong: #3e352e;
  --accent: #e2b45c;
  --accent-ink: #20150a;
  --accent-soft: rgba(226, 180, 92, 0.14);
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 10px 30px -6px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 24px 56px -10px rgba(0, 0, 0, 0.75);
  --glass: rgba(26, 22, 20, 0.7);
  --shelf-1: #1d1714;
  --shelf-2: #0e0b09;
  --shelf-ink: #f3e8da;
  --shelf-muted: #a59482;
  --shelf-line: rgba(255, 220, 170, 0.1);
  --case-lit: #3a3532;
  --case-mid: #171413;
  --case-dark: #050404;
  --case-gloss: rgba(255, 238, 215, 0.3);
  --case-edge: rgba(255, 225, 190, 0.22);
  --case-grain: rgba(0, 0, 0, 0);
  --floor-shadow: rgba(0, 0, 0, 0.7);
  --lamp: rgba(255, 196, 120, 0.16);
  --jewel-off: #2f2823;
  --jewel-on: #f0ae4a;
  --jewel-hot: #ff6a45;
}

*, *::before, *::after{ box-sizing: border-box; }
html, body{ height: 100%; -webkit-tap-highlight-color: transparent; }
body{
  margin: 0; min-height: 100%;
  display: flex; flex-direction: column;
  font-family: var(--font-sans); color: var(--ink);
  background-color: var(--bg);
  background-image: radial-gradient(64% 46% at 50% 0%, var(--accent-soft), transparent 70%);
  background-repeat: no-repeat;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
.sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
button, input{ font: inherit; -webkit-tap-highlight-color: transparent; }

/* ---------- Top bar ---------- */
.topbar{
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 14px clamp(16px, 4vw, 30px);
  padding-top: max(14px, env(safe-area-inset-top));
  padding-left: max(clamp(16px, 4vw, 30px), env(safe-area-inset-left));
  padding-right: max(clamp(16px, 4vw, 30px), env(safe-area-inset-right));
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.brand{ display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-weight: 800; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); text-decoration: none; white-space: nowrap; }
.brand__mark{ width: 1.1em; height: 1.1em; border: 1.5px solid var(--ink); border-radius: 6px; background: linear-gradient(90deg, var(--ink) 0 50%, var(--surface) 50% 100%); }
.topbar__right{ display: inline-flex; align-items: center; gap: 12px; }
.topbar__tag{ font-family: var(--font-sans); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.13em; white-space: nowrap; text-transform: uppercase; color: var(--muted); }
.iconbtn{ appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; font-size: 1rem; line-height: 1; border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); cursor: pointer; box-shadow: var(--shadow); transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease; }
.iconbtn:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--ink); }
.iconbtn:focus-visible{ outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 5px var(--accent); }
.theme-toggle__sun, .theme-toggle__moon, .theme-toggle__auto{ display: none; }
:root[data-theme-mode="system"] .theme-toggle__auto{ display: inline; }
:root[data-theme-mode="light"] .theme-toggle__sun{ display: inline; }
:root[data-theme-mode="dark"] .theme-toggle__moon{ display: inline; }

/* ---------- Stage ---------- */
.stage{
  position: relative; z-index: 2; flex: 1 0 auto;
  display: flex; flex-direction: column; align-items: center;
  gap: 22px;
  padding: clamp(18px, 4vw, 36px) 16px clamp(48px, 6vw, 72px);
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-bottom: max(clamp(48px, 6vw, 72px), env(safe-area-inset-bottom));
}
.mt{ width: 100%; max-width: 560px; text-align: center; }
.eyebrow{ margin: 0 0 2px; font-family: var(--font-sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.headline{
  margin: 0 0 16px; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.3rem, 9vw, 3.3rem); line-height: 1; letter-spacing: -0.01em; color: var(--ink);
}

/* ---------- The unit: the shelf, the instrument, and its deck ---------- */
.mt-unit{
  position: relative; width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--shelf-line);
  background:
    radial-gradient(90% 55% at 50% 18%, var(--lamp), transparent 70%),
    linear-gradient(180deg, var(--shelf-1), var(--shelf-2));
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: var(--shelf-ink);
  overflow: hidden;
  isolation: isolate;
}
:root[data-theme="dark"] .mt-unit{ box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 230, 200, 0.06); }
.mt-face{
  position: relative; outline: none;
  cursor: grab;
  -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
}
.mt-face{ touch-action: pan-y; }
.mt-face.is-drag{ cursor: grabbing; }
/* a finger grabs the weight in this column around the rod; elsewhere it scrolls */
.mt-handle{ position: absolute; z-index: 1; touch-action: none; cursor: grab; border-radius: 16px; }
.mt-face:focus-visible{ box-shadow: inset 0 0 0 3px var(--accent); border-radius: var(--radius) var(--radius) 0 0; }
.mt-metro{ display: block; width: 100%; aspect-ratio: 1 / 1.02; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.mt-grab{
  position: absolute; right: 12px; top: 12px;
  padding: 4px 11px; border-radius: var(--radius-pill);
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; color: var(--shelf-muted);
  background: color-mix(in srgb, var(--shelf-2) 70%, transparent);
  pointer-events: none; opacity: 0.9; transition: opacity 400ms ease;
}
.mt-grab.is-gone{ opacity: 0; }

.mt-deck{ position: relative; padding: 4px clamp(14px, 4vw, 24px) 20px; border-top: 1px solid var(--shelf-line); }

.mt-tempo{ display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-top: 12px; }
.mt-bpm{ cursor: ew-resize; touch-action: none; user-select: none; -webkit-user-select: none; padding: 2px 0; }
.mt-bpm__row{ display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.mt-bpm__v{
  font-family: var(--font-display); font-weight: 700; font-size: clamp(3.6rem, 17vw, 5rem); line-height: 0.9;
  font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.01em; color: var(--shelf-ink);
  min-width: 2.2ch; text-align: center;
}
.mt-bpm__u{ font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; color: var(--shelf-muted); }
.mt-mark{ display: flex; flex-direction: column; align-items: center; gap: 0; margin-top: 2px; }
.mt-mark__name{ font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.35rem; line-height: 1.1; color: var(--accent); }
.mt-mark__say{ font-size: 0.74rem; color: var(--shelf-muted); }

.mt-step{
  appearance: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  font-family: var(--font-sans); font-size: 1.2rem; font-weight: 600; line-height: 1;
  color: var(--ink); background: var(--surface); border: 1.5px solid var(--line-strong); cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 140ms ease, border-color 140ms ease;
  touch-action: manipulation;
}
.mt-step:hover{ border-color: var(--ink); transform: translateY(-1px); }
.mt-step:active{ transform: scale(0.94); }
.mt-step:focus-visible{ outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 5px var(--accent); }
.mt-step[disabled]{ opacity: 0.4; cursor: default; transform: none; }
.mt-step--big{ width: 54px; height: 54px; font-size: 1.5rem; }

/* beat lights: one column per beat, its height is its accent */
.mt-beats{
  display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: clamp(4px, 1.6vw, 9px);
  margin: 18px auto 0; max-width: 460px;
}
.mt-beat{
  appearance: none; position: relative; min-height: 64px; padding: 7px 0 6px; cursor: pointer;
  display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-start; gap: 3px;
  border-radius: 12px; border: 1px solid var(--shelf-line);
  background: color-mix(in srgb, var(--shelf-2) 55%, transparent);
  color: var(--shelf-muted);
  transition: border-color 140ms ease, background 140ms ease;
  touch-action: manipulation;
}
.mt-beat:hover{ border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.mt-beat:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.mt-beat__n{ font-size: 0.62rem; font-weight: 700; letter-spacing: 0.02em; margin-top: 3px; line-height: 1; font-variant-numeric: tabular-nums; }
.mt-beat i{
  display: block; width: min(70%, 30px); height: 9px; border-radius: 3px;
  background: var(--jewel-off);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.18);
  transition: background 90ms linear, box-shadow 90ms linear, opacity 90ms linear;
}
.mt-beat i.on{ background: color-mix(in srgb, var(--jewel-on) 62%, var(--jewel-off)); }
.mt-beat i.on.top{ background: color-mix(in srgb, var(--jewel-hot) 66%, var(--jewel-off)); }
.mt-beat.is-mute{ border-style: dashed; }
.mt-beat.is-mute .mt-beat__n{ opacity: 0.55; }
/* the flash: driven from the audio clock, a class for one beat */
.mt-beat.is-now{ background: color-mix(in srgb, var(--jewel-on) 16%, transparent); border-color: color-mix(in srgb, var(--jewel-on) 60%, transparent); }
.mt-beat.is-now i.on{ background: var(--jewel-on); box-shadow: 0 0 10px color-mix(in srgb, var(--jewel-on) 85%, transparent); }
.mt-beat.is-now i.on.top{ background: var(--jewel-hot); box-shadow: 0 0 12px color-mix(in srgb, var(--jewel-hot) 85%, transparent); }
.mt-beat.is-now .mt-beat__n{ color: var(--shelf-ink); }
.mt-beat.is-sub i.on{ opacity: 0.85; }
.mt-beats__note{ margin: 8px 0 0; font-size: 0.74rem; color: var(--shelf-muted); min-height: 1.2em; }

.mt-go-row{ display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 16px; }
.mt-go{
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 58px; padding: 12px 24px; border-radius: var(--radius-pill);
  border: 0; cursor: pointer;
  font-family: var(--font-sans); font-size: 1.05rem; font-weight: 800; letter-spacing: 0.01em;
  color: var(--accent-ink); background: var(--accent);
  box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--accent) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -2px 0 rgba(0, 0, 0, 0.18);
  transition: transform 150ms ease, filter 150ms ease, background 200ms ease;
  touch-action: manipulation;
}
:root[data-theme="dark"] .mt-go{ background: linear-gradient(180deg, #f3cf82, #d29a3c); }
.mt-go:hover{ transform: translateY(-2px); filter: brightness(1.06); }
.mt-go:active{ transform: translateY(0); }
.mt-go:focus-visible{ outline: none; box-shadow: 0 0 0 3px var(--shelf-1), 0 0 0 6px var(--accent); }
.mt-go svg{ width: 20px; height: 20px; fill: currentColor; }
.mt-go__stop{ display: none; }
.mt-go[aria-pressed="true"] .mt-go__play{ display: none; }
.mt-go[aria-pressed="true"] .mt-go__stop{ display: block; }
.mt-tap{
  appearance: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 96px; min-height: 58px; padding: 6px 18px; border-radius: var(--radius-pill); cursor: pointer;
  border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow);
  transition: transform 90ms ease, border-color 140ms ease, background 140ms ease;
  touch-action: manipulation;
}
.mt-tap:hover{ border-color: var(--ink); }
.mt-tap:focus-visible{ outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 5px var(--accent); }
.mt-tap.is-hit{ transform: scale(0.95); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.mt-tap__k{ font-size: 1rem; font-weight: 800; line-height: 1.1; }
.mt-tap__sub{ font-size: 0.66rem; font-weight: 600; color: var(--muted); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }

/* ---------- Setting cards ---------- */
.mt-card{
  margin-top: 16px; padding: 14px 16px 16px; text-align: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.mt-card__k{ margin: 0 0 10px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.mt-chips{ display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.mt-chip{
  appearance: none; min-height: 44px; min-width: 44px; padding: 8px 14px;
  font-family: var(--font-sans); font-size: 0.82rem; font-weight: 700;
  color: var(--muted); background: var(--surface); border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill); cursor: pointer; box-shadow: var(--shadow);
  transition: transform 150ms ease, color 150ms ease, background 150ms ease, border-color 150ms ease;
  touch-action: manipulation;
}
.mt-chip:hover{ color: var(--ink); border-color: var(--ink); transform: translateY(-1px); }
.mt-chip[aria-checked="true"]{ color: var(--bg); background: var(--ink); border-color: var(--ink); }
.mt-chip:focus-visible{ outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 5px var(--accent); }
.mt-chip--sig{ font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; padding: 6px 13px; font-variant-numeric: lining-nums; }
.mt-chip__glyph{ display: inline-block; margin-right: 6px; font-size: 1.05em; font-weight: 400; }

.mt-slide{ display: grid; grid-template-columns: auto 1fr 5.6em; align-items: center; gap: 12px; margin-top: 14px; text-align: left; }
.mt-slide[hidden]{ display: none; }
.mt-slide__k{ font-size: 0.8rem; font-weight: 700; color: var(--ink); }
.mt-slide__v{ font-size: 0.8rem; font-weight: 600; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mt-slide input[type="range"]{
  -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer;
  --p: 0%;
}
.mt-slide input[type="range"]::-webkit-slider-runnable-track{
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent) 0 var(--p), var(--line-strong) var(--p) 100%);
}
.mt-slide input[type="range"]::-moz-range-track{ height: 6px; border-radius: 3px; background: var(--line-strong); }
.mt-slide input[type="range"]::-moz-range-progress{ height: 6px; border-radius: 3px; background: var(--accent); }
.mt-slide input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6dc, #e3bd6c 45%, #9c6c26);
  border: 1px solid rgba(80, 50, 10, 0.45); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.mt-slide input[type="range"]::-moz-range-thumb{
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6dc, #e3bd6c 45%, #9c6c26);
  border: 1px solid rgba(80, 50, 10, 0.45); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.mt-slide input[type="range"]:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ---------- Tempo trainer ---------- */
.mt-train__head{ display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 4px; }
.mt-train__head .mt-card__k{ margin: 0; }
.mt-switch{
  appearance: none; position: relative; width: 52px; height: 30px; padding: 0; cursor: pointer;
  border-radius: var(--radius-pill); border: 1.5px solid var(--line-strong); background: var(--surface-2);
  transition: background 180ms ease, border-color 180ms ease;
}
.mt-switch::after{ content: ""; position: absolute; inset: -8px; }
.mt-switch__knob{
  position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
  transition: transform 200ms cubic-bezier(.3, 1.3, .5, 1);
}
.mt-switch[aria-checked="true"]{ background: var(--accent); border-color: var(--accent); }
.mt-switch[aria-checked="true"] .mt-switch__knob{ transform: translateX(22px); }
.mt-switch:focus-visible{ outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 5px var(--accent); }
.mt-train__body{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin-top: 10px; transition: opacity 200ms ease; }
.mt-train:not(.is-on) .mt-train__body{ opacity: 0.55; }
.mt-num{ display: inline-flex; align-items: center; gap: 6px; }
.mt-num__k, .mt-num__u{ font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.mt-num__k{ min-width: 2.6em; text-align: right; }
.mt-num__v{ min-width: 2.2em; font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.mt-num .mt-step{ width: 40px; height: 40px; font-size: 1.05rem; }
.mt-num .mt-step::after{ content: ""; position: absolute; inset: -3px; }
.mt-num .mt-step{ position: relative; }
.mt-train__say{ margin: 12px 0 0; font-size: 0.82rem; color: var(--muted); min-height: 1.3em; }
.mt-train__say b{ color: var(--ink); }

.mt-keys{ margin: 16px 0 0; font-size: 0.74rem; color: var(--muted); }

/* ---------- Tips ---------- */
.mt-tips{
  margin-top: 14px; text-align: left;
  padding: 4px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
}
.mt-tips summary{ cursor: pointer; list-style: none; padding: 12px 0; font-size: 0.88rem; font-weight: 700; color: var(--ink); }
.mt-tips summary::-webkit-details-marker{ display: none; }
.mt-tips summary::after{ content: "+"; float: right; color: var(--muted); font-weight: 700; }
.mt-tips[open] summary::after{ content: "−"; }
.mt-tips summary:focus-visible{ outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.mt-tips ul{ margin: 0 0 14px; padding-left: 1.1em; color: var(--muted); font-size: 0.86rem; line-height: 1.55; }
.mt-tips li + li{ margin-top: 6px; }

.share-row{ display: flex; justify-content: center; margin: -4px 0 -6px; }
.share-row[hidden]{ display: none; }
.share-row .opt-share{ --ops-fg: var(--ink); }
.backlink{ font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; transition: color 140ms ease, border-color 140ms ease; }
.backlink:hover{ color: var(--ink); border-bottom-color: var(--accent); }

/* the shared badges sit at right-center by default, on top of the pendulum
   on a phone; dock them bottom-right instead */
@media (max-width: 760px), (max-height: 500px){
  .opt-tipjar.opt-tipjar{ top: auto; bottom: max(14px, env(safe-area-inset-bottom)); transform: none; }
  .opt-fs.opt-fs{ top: auto; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 50px); transform: none; }
  .opt-tipjar.opt-tipjar.tj-nudge{ animation: none; }
}
@media (max-width: 380px){
  .mt-chip{ padding: 7px 11px; font-size: 0.78rem; }
  .mt-chip--sig{ font-size: 1.02rem; padding: 6px 10px; }
  .mt-tap{ min-width: 84px; padding: 6px 12px; }
  .mt-step--big{ width: 48px; height: 48px; }
}

/* a phone on its side: the instrument on the left, its deck on the right */
@media (orientation: landscape) and (max-height: 500px){
  .mt{ max-width: 820px; }
  .stage{ padding-top: 10px; }
  .eyebrow{ display: none; }
  .headline{ margin-bottom: 8px; font-size: 1.8rem; }
  .mt-unit{ display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; }
  .mt-metro{ width: auto; height: min(330px, calc(100vh - 60px)); margin: 0 auto; }
  .mt-deck{ border-top: 0; border-left: 1px solid var(--shelf-line); padding: 6px 18px 16px; }
  .mt-bpm__v{ font-size: 3.4rem; }
  .mt-beat{ min-height: 54px; }
  .mt-beats{ margin-top: 10px; }
  .mt-go-row{ margin-top: 10px; }
  .mt-go, .mt-tap{ min-height: 50px; }
}
/* a desk or a laptop: the instrument beside its deck, the settings in two columns */
@media (min-width: 920px) and (min-height: 501px){
  .mt{ max-width: 1000px; }
  .mt-unit{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .mt-metro{ width: 100%; max-height: min(560px, calc(100vh - 220px)); height: auto; margin: 0 auto; }
  .mt-deck{ border-top: 0; border-left: 1px solid var(--shelf-line); padding: 18px 30px 26px; }
  .mt-settings{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; align-items: start; }
  .mt-keys, .mt-tips{ max-width: 640px; margin-left: auto; margin-right: auto; }
}

@media (prefers-reduced-motion: reduce){
  .mt-chip, .mt-step, .mt-go, .mt-tap, .mt-beat, .mt-beat i, .mt-switch, .mt-switch__knob, .mt-grab, .mt-train__body{ transition: none; }
  .mt-chip:hover, .mt-step:hover, .mt-go:hover{ transform: none; }
}

/* the brand mark is the app icon's sculpted split square (owner, 2026-10-24: every use of the logo the same) */
.brand__mark{ width: 1.35em !important; height: 1.35em !important; border: 0 !important; border-radius: 0 !important;
  background: url("../../assets/brand-mark-64.png") center / contain no-repeat !important; }