@font-face{
  font-display:swap;
  font-family:"Inter";
  font-style:normal;
  font-weight:100 900;
  src:url("../fonts/inter-latin-variable.woff2") format("woff2");
}

:root{
  color-scheme:dark;
  --ink:#f2eee7;
  --texture-shell:none;
  --texture-workspace:none;
  --texture-surface:none;
  --texture-card:none;
  --texture-pr:none;
  --muted:#9098a1;
  --muted-2:#717a84;
  --line:rgba(255,255,255,.07);
  --gold-1:#efd9b7;
  --gold-2:#d5ad7d;
  --gold-3:#bd8752;
  --gold-4:#8e6038;
  --signal:#c9785f;
  --steel-1:#56616b;
  --steel-2:#dce2e7;
  --steel-3:#fff;
  --steel-4:#a8b1ba;
  --led-off:#303740;
  --led-normal:#788694;
  --led-accent:#f0dfc7;
}
*{box-sizing:border-box}
html,body{
  margin:0;
  min-inline-size:0;
  min-block-size:100%;
  overflow-wrap:anywhere;
  word-break:normal;
  line-break:strict;
  background:
    radial-gradient(circle at 50% -12%,rgba(255,255,255,.036),transparent 28rem),
    radial-gradient(circle at 14% 8%,rgba(201,120,95,.045),transparent 20rem),
    linear-gradient(180deg,#15191f 0%,#0c0f13 54%,#090b0e 100%);
  color:var(--ink);
  font-family:
    "Inter",
    "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Noto Sans JP",
    sans-serif;
}
button,input{font:inherit}
button{color:inherit;-webkit-tap-highlight-color:transparent}
button:not(:disabled){cursor:pointer}
:focus-visible{outline:2px solid rgba(239,217,183,.9);outline-offset:2px}
.page{
  min-block-size:100svh;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  justify-items:center;
  align-content:start;
  gap:0;
  padding-block:6px 0;
  padding-inline:6px;
}
.app{
  --app-min-height:620px;
  --app-max-height:720px;
  --app-viewport-reserve:69px;
  --workspace-padding:10px;
  --display-top:30px;
  --display-min-height:116px;
  --display-label-row:14px;
  --display-value-row:76px;
  --display-unit-row:12px;
  --display-row-gap:5px;
  --display-value-height:76px;
  --display-size-2:clamp(60px,15vw,66px);
  --display-size-3:clamp(56px,14vw,60px);
  --scale-top:183px;
  --scale-height:218px;
  --pendulum-top:169px;
  --pendulum-pivot:282px;
  --pendulum-pivot-max:282px;
  --pendulum-height:356px;
  --pendulum-bottom-reserve:156px;
  --blade-height:282px;
  --bob-size:40px;
  --bob-ring-inset:7px;
  --bob-core-inset:16px;
  --accent-bottom:6px;
  --accent-height:66px;
  --control-gap:8px;
  --control-shift:clamp(26px,5cqh,34px);
  --quick-height:58px;
  --quick-padding:8px;
  --quick-label-row:11px;
  --quick-value-row:25px;
  --front-padding:8px;
  --tempo-row-margin:6px;
  --tempo-row-height:38px;
  --transport-height:48px;
  --secondary-height:60px;
  --practice-height:32px;
  position:relative;
  inline-size:min(100%,430px);
  block-size:clamp(
    var(--app-min-height),
    calc(100svh - var(--app-viewport-reserve)),
    var(--app-max-height)
  );
  min-block-size:var(--app-min-height);
  container-name:metronome;
  container-type:size;
  display:grid;
  grid-template-rows:50px minmax(0,1fr);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.048);
  border-radius:22px;
  background:
    var(--texture-shell),
    linear-gradient(180deg,rgba(255,255,255,.012),transparent 16%),
    linear-gradient(180deg,#171b21 0%,#101419 52%,#0b0e12 100%);
  box-shadow:
    inset 0 1px rgba(255,255,255,.05),
    0 32px 90px rgba(0,0,0,.46);
}
.header{
  display:grid;
  grid-template-columns:1fr 36px;
  align-items:center;
  padding-inline:15px;
  border-block-end:1px solid rgba(255,255,255,.038);
}
.brand{
  display:grid;
  grid-template-columns:15px auto;
  align-items:center;
  gap:10px;
}
.brand-mark{
  position:relative;
  inline-size:14px;
  block-size:24px;
}
.brand-mark::before{
  content:"";
  position:absolute;
  inset-inline-start:50%;
  inset-block:0 5px;
  inline-size:1.5px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,#505354,#c4c6c2 45%,#777b79);
  box-shadow:0 1px 2px rgba(0,0,0,.35);
}
.brand-mark::after{
  content:"";
  position:absolute;
  inset-inline-start:50%;
  inset-block-end:0;
  inline-size:8px;
  block-size:8px;
  transform:translateX(-50%);
  border-radius:50%;
  border:1px solid rgba(190,145,96,.55);
  background:radial-gradient(circle at 35% 35%,#545754,#1a1917 74%);
  box-shadow:0 2px 4px rgba(0,0,0,.38);
}
.brand-title{
  margin:0;
  display:grid;
  grid-auto-flow:column;
  justify-content:start;
  align-items:center;
  gap:7px;
}
.brand-title strong{
  color:#ddd2c5;
  font-size:9.5px;
  font-weight:650;
  letter-spacing:.32em;
}
.icon-btn{
  position:relative;
  inline-size:40px;
  block-size:40px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.048);
  border-radius:50%;
  background:rgba(255,255,255,.010);
}
.icon-btn svg{inline-size:16px;block-size:16px;stroke:#d4d9de}
#settingsTop::before,
#settingsTop::after{
  content:"";
  position:absolute;
  inline-size:15px;
  block-size:1.5px;
  border-radius:999px;
  background:#d4cfc8;
  opacity:0;
  transform:rotate(0);
  transition:opacity .14s ease,transform .18s ease;
}
#settingsTop[aria-expanded="true"] svg{
  opacity:0;
}
#settingsTop[aria-expanded="true"]::before{
  opacity:1;
  transform:rotate(45deg);
}
#settingsTop[aria-expanded="true"]::after{
  opacity:1;
  transform:rotate(-45deg);
}
.icon-btn[aria-expanded="true"]{
  border-color:rgba(205,171,130,.26);
  background:rgba(205,171,130,.045);
}
.workspace{
  min-block-size:0;
  padding:var(--workspace-padding);
  background:
    var(--texture-workspace),
    radial-gradient(ellipse at 42% 7%,rgba(255,255,255,.04),transparent 32%),
    linear-gradient(180deg,#10151a 0%,#0b0f14 100%);
}
.instrument{
  position:relative;
  block-size:100%;
  overflow:clip;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  background:
    var(--texture-surface),
    linear-gradient(180deg,rgba(255,255,255,.012),transparent 14%),
    radial-gradient(ellipse at 30% 72%,rgba(255,255,255,.032),transparent 30%),
    linear-gradient(180deg,#151a20 0%,#0e1318 100%);
  box-shadow:
    inset 0 1px rgba(255,255,255,.024),
    inset 0 0 0 1px rgba(0,0,0,.22);
}
.instrument::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(116deg,rgba(255,255,255,.012),transparent 18%,transparent 84%,rgba(255,255,255,.008));
}
.front{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:minmax(0,55%) minmax(0,45%);
}
.pendulum-zone{
  position:relative;
  min-inline-size:0;
  border-inline-end:1px solid rgba(255,255,255,.038);
}
.display-head{
  position:absolute;
  inset-block-start:var(--display-top);
  inset-inline:12px;
  min-block-size:var(--display-min-height);
  display:grid;
  grid-template-rows:var(--display-label-row) var(--display-value-row) var(--display-unit-row);
  justify-items:center;
  align-items:center;
  row-gap:var(--display-row-gap);
}
.display-head small{
  align-self:end;
  color:#a89074;
  font-size:9px;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.display-head strong{
  inline-size:100%;
  block-size:var(--display-value-height);
  display:grid;
  place-items:center;
  overflow:visible;
  text-align:center;
  font-family:
    "Bodoni 72",
    Didot,
    "Iowan Old Style",
    Georgia,
    "Times New Roman",
    serif;
  font-size:clamp(60px,16.4vw,66px);
  line-height:1;
  font-weight:500;
  letter-spacing:-.035em;
  font-kerning:none;
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1,"kern" 0;
}
.display-head > span{
  align-self:start;
  color:#c0c6cc;
  font-size:9px;
  line-height:1;
  letter-spacing:.14em;
}

.display-head[data-digits="2"] strong{
  font-size:var(--display-size-2);
}
.display-head[data-digits="3"] strong{
  font-size:var(--display-size-3);
}
.scale-track{
  position:absolute;
  inset-inline-start:50%;
  inset-block-start:var(--scale-top);
  inline-size:96px;
  block-size:var(--scale-height);
  transform:translateX(-50%);
  pointer-events:none;
  z-index:1;
}
.scale-track::before{
  content:"";
  position:absolute;
  inset-inline-start:50%;
  inset-block:0;
  inline-size:1px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(217,183,143,.36),rgba(217,183,143,.15) 50%,rgba(217,183,143,.32));
}
.scale-mark{
  position:absolute;
  inset-inline:0;
  block-size:1px;
  transform:translateY(-50%);
}
.scale-mark i{
  position:absolute;
  inset-block-start:0;
  block-size:1px;
}
.scale-mark--major i{
  inset-inline-start:31px;
  inline-size:30px;
  background:rgba(217,183,143,.58);
}
.scale-mark--minor i{
  inset-inline-start:38px;
  inline-size:16px;
  background:rgba(220,226,231,.22);
}
.scale-mark span{
  position:absolute;
  inset-inline-end:64px;
  inset-block-start:50%;
  transform:translateY(-50%);
  color:#978674;
  font-size:9px;
  font-variant-numeric:tabular-nums;
}
.scale-mark--minor span{display:none}
.scale-cursor{
  display:none;
}
.pendulum-wrap{
  --pivot-y:var(--pendulum-pivot);
  position:absolute;
  inset-inline-start:50%;
  inset-block-start:var(--pendulum-top);
  inline-size:100px;
  block-size:var(--pendulum-height);
  transform:translateX(calc(-50% + var(--pixel-snap-x,0px)));
  z-index:4;
  pointer-events:none;
}
.pendulum-wrap::after{
  content:"";
  position:absolute;
  z-index:6;
  inset-inline-start:50%;
  inset-block-start:var(--pivot-y);
  inline-size:11px;
  block-size:11px;
  transform:translate(-50%,-50%);
  border:1px solid rgba(221,217,207,.18);
  border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#9a9b95 0 12%,#454844 30%,#171816 72%);
  box-shadow:0 1px 5px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.12);
}
.pendulum{
  --blade-metal:#999c98;
  position:absolute;
  inset:0;
  transform-origin:50% var(--pivot-y);
  will-change:transform;
}
.pendulum::before{
  content:"";
  position:absolute;
  z-index:0;
  inset-inline-start:50%;
  inset-block-start:calc(var(--pivot-y) - 7px);
  inline-size:8px;
  block-size:calc(100% - var(--pivot-y) - 13px);
  transform:translateX(-50%);
  background:var(--blade-metal);
  border-inline:1px solid #505352;
  box-shadow:none;
  box-sizing:border-box;
}
.blade{
  position:absolute;
  inset-inline-start:50%;
  inset-block-start:0;
  inline-size:8px;
  block-size:var(--blade-height);
  transform:translateX(-50%);
  background:var(--blade-metal);
  border-inline:1px solid #505352;
  box-shadow:none;
  box-sizing:border-box;
}
.blade::before{
  content:none;
}
.blade::after{
  content:none;
}
.weight{
  position:absolute;
  inset-inline-start:50%;
  inset-block-start:14px;
  inline-size:36px;
  block-size:24px;
  transform:translateX(-50%);
  padding:0;
  border:1px solid rgba(229,226,216,.22);
  border-radius:3px;
  pointer-events:auto;
  touch-action:none;
  cursor:ns-resize;
  background:
    repeating-linear-gradient(180deg,transparent 0 4px,rgba(255,255,255,.045) 4px 5px),
    linear-gradient(105deg,#38332e 0%,#87796b 15%,#c1ad93 31%,#706456 48%,#b69a79 64%,#61584e 82%,#302d29 100%);
  box-shadow:
    inset 0 1px rgba(255,255,255,.27),
    inset 1px 0 rgba(255,255,255,.10),
    inset -1px 0 rgba(0,0,0,.32),
    0 9px 15px rgba(0,0,0,.22);
}
.weight::before,.weight::after{
  content:"";
  position:absolute;
  inset-block-start:50%;
  inline-size:4px;
  block-size:4px;
  transform:translateY(-50%);
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#d8d8d2 0 15%,#747775 34%,#292b2b 74%);
  box-shadow:0 1px 2px rgba(0,0,0,.45);
}
.weight::before{inset-inline-start:6px}
.weight::after{inset-inline-end:6px}
.weight.dragging{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.24),
    0 0 0 1px rgba(217,183,143,.28),
    0 12px 20px rgba(0,0,0,.22);
}
.weight-hit{position:absolute;inset:-10px -8px}
.bob{
  position:absolute;
  inset-inline-start:50%;
  inset-block-end:0;
  inline-size:var(--bob-size);
  block-size:var(--bob-size);
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#5d6872,#161c21 74%);
  z-index:2;
  box-shadow:0 10px 18px rgba(0,0,0,.24);
}
.bob::before{
  content:"";
  position:absolute;
  inset:var(--bob-ring-inset);
  border:3px solid rgba(198,149,109,.78);
  border-radius:50%;
}
.bob::after{
  content:"";
  position:absolute;
  inset:var(--bob-core-inset);
  border-radius:50%;
  background:#2d343c;
  box-shadow:inset 0 1px rgba(255,255,255,.14);
}
.control-zone{
  min-inline-size:0;
  inline-size:100%;
  max-inline-size:286px;
  justify-self:center;
  align-self:center;
  transform:translateY(var(--control-shift));
  padding-block:0;
  padding-inline:9px;
  display:grid;
  grid-auto-rows:auto;
  align-content:start;
  gap:var(--control-gap);
}
.quick-actions{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:8px;
}
.quick-button{
  position:relative;
  min-inline-size:0;
  min-block-size:var(--quick-height);
  display:grid;
  grid-template-columns:minmax(0,1fr) 8px;
  grid-template-rows:var(--quick-label-row) var(--quick-value-row);
  align-items:center;
  column-gap:3px;
  row-gap:3px;
  padding-block:var(--quick-padding);
  padding-inline:9px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:8px;
  background:
    var(--texture-card),
    rgba(255,255,255,.010);
  text-align:start;
  transition:border-color .16s ease,background-color .16s ease,transform .12s ease;
}
.quick-button strong{
  grid-column:1;
  grid-row:2;
  display:grid;
  align-items:center;
  justify-items:start;
  min-block-size:25px;
  font-size:18px;
  line-height:1;
  font-weight:560;
}
.selector-label{
  grid-column:1 / -1;
  grid-row:1;
  align-self:end;
  color:#8f8780;
  font-size:9.5px;
  font-weight:560;
  letter-spacing:.02em;
  line-height:1;
  overflow-wrap:normal;
  white-space:nowrap;
}
.selector-value--meter{
  font-variant-numeric:tabular-nums;
  letter-spacing:-.015em;
}
.quick-button [data-subdivision]{
  color:#eee9e1;
}
.quick-button::after{
  content:"";
  grid-column:2;
  grid-row:2;
  justify-self:center;
  inline-size:6px;
  block-size:6px;
  border-inline-end:1px solid rgba(205,171,130,.72);
  border-block-end:1px solid rgba(205,171,130,.72);
  transform:rotate(-45deg);
  transition:transform .16s ease;
}
.quick-button:active{
  transform:translateY(1px);
}
.quick-button[aria-expanded="true"]{
  border-color:rgba(205,171,130,.26);
  background:rgba(205,171,130,.045);
}
.quick-button[aria-expanded="true"]::after{
  transform:rotate(45deg);
}
@media(hover:hover){
  .quick-button:hover{
    border-color:rgba(205,171,130,.18);
    background-color:rgba(205,171,130,.025);
  }
}
.front-section{
  min-inline-size:0;
  padding:var(--front-padding);
  border:0;
  border-radius:8px;
  background:
    var(--texture-card),
    linear-gradient(180deg,rgba(255,255,255,.012),transparent),
    rgba(255,255,255,.012);
  box-shadow:inset 0 1px rgba(255,255,255,.018);
}
.section-label{
  display:grid;
  grid-auto-flow:column;
  justify-content:start;
  align-items:center;
  gap:8px;
  color:#8b949d;
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.tempo-panel .row{
  margin-block-start:var(--tempo-row-margin);
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 34px;
  align-items:center;
  gap:0;
  min-block-size:var(--tempo-row-height);
  padding-block:2px;
  padding-inline:1px;
  border:0;
  border-radius:8px;
  background:rgba(0,0,0,.10);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.16);
}
.tempo-panel button{
  position:relative;
  inline-size:34px;
  block-size:34px;
  padding:0;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#aaa39a;
  font-size:15px;
  line-height:1;
  transition:color .14s ease,background-color .14s ease;
}
.tempo-panel button::before{
  content:"";
  position:absolute;
  inset:4px;
  border:1px solid rgba(238,231,221,.055);
  border-radius:6px;
  background:rgba(238,231,221,.008);
  box-shadow:inset 0 1px rgba(255,255,255,.018);
}
.tempo-panel button:active{
  color:#ddc5a7;
}
.tempo-panel button:active::before{
  border-color:rgba(205,171,130,.16);
  background:rgba(205,171,130,.035);
}
.tempo-panel .section-label{
  grid-template-columns:1fr auto;
  justify-content:stretch;
}
.tempo-marking{
  color:#a88b6e;
  font-size:9px;
  font-weight:600;
  line-height:1;
  letter-spacing:.075em;
  white-space:nowrap;
}
@media(hover:hover){
  .tempo-panel button:hover{
    color:#d5cec5;
  }
  .tempo-panel button:hover::before{
    border-color:rgba(238,231,221,.09);
    background:rgba(238,231,221,.015);
  }
}
input[type=range]{
  inline-size:100%;
  block-size:34px;
  margin:0;
  padding-inline:2px;
  appearance:none;
  background:transparent;
  touch-action:pan-y;
}
input[type=range]::-webkit-slider-runnable-track{
  block-size:3px;
  border:0;
  border-radius:999px;
  background:linear-gradient(90deg,
    rgba(198,158,111,.82) 0 var(--range-progress,26.3%),
    rgba(238,231,221,.34) var(--range-progress,26.3%) 100%);
  box-shadow:0 1px rgba(0,0,0,.28);
}
input[type=range]::-webkit-slider-thumb{
  inline-size:16px;
  block-size:16px;
  margin-block-start:-6.5px;
  appearance:none;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  background:linear-gradient(145deg,var(--gold-2),var(--gold-3));
  box-shadow:0 2px 6px rgba(0,0,0,.42),0 0 0 2px rgba(170,117,73,.06);
}
input[type=range]::-moz-range-track{
  block-size:3px;
  border:0;
  border-radius:999px;
  background:linear-gradient(90deg,
    rgba(198,158,111,.82) 0 var(--range-progress,26.3%),
    rgba(238,231,221,.34) var(--range-progress,26.3%) 100%);
  box-shadow:0 1px rgba(0,0,0,.28);
}
input[type=range]::-moz-range-thumb{
  inline-size:16px;
  block-size:16px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  background:linear-gradient(145deg,var(--gold-2),var(--gold-3));
  box-shadow:0 2px 6px rgba(0,0,0,.42),0 0 0 2px rgba(170,117,73,.06);
}
.accent-dock{
  position:absolute;
  inset-inline-start:50%;
  inset-block-end:var(--accent-bottom);
  z-index:7;
  inline-size:min(158px,calc(100% - 10px));
  min-block-size:var(--accent-height);
  transform:translateX(-50%);
  display:grid;
  place-items:center;
}
.led-sequence{
  inline-size:158px;
  min-block-size:66px;
  display:grid;
  grid-template-columns:repeat(4,32px);
  grid-auto-rows:32px;
  justify-content:center;
  align-content:center;
  column-gap:6px;
  row-gap:2px;
  padding:0;
  overflow:visible;
}
.led-step{
  position:relative;
  min-inline-size:32px;
  min-block-size:32px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#7c858e;
  transition:background-color .12s ease;
}
.led-step::before{
  content:"";
  position:absolute;
  inset:0;
}
.led{
  inline-size:8px;
  block-size:8px;
  border-radius:50%;
  background:var(--led-off);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.045),
    0 1px 2px rgba(0,0,0,.42);
  transition:none;
}
.led-step.normal .led{
  inline-size:7px;
  block-size:7px;
  background:var(--led-normal);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    0 0 5px rgba(120,134,148,.10);
}
.led-step.accent .led{
  inline-size:10px;
  block-size:10px;
  background:var(--led-accent);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 0 0 1px rgba(205,171,130,.16),
    0 0 10px rgba(240,223,199,.24);
}
.led-step.mute .led{
  inline-size:6px;
  block-size:6px;
  background:var(--led-off);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 1px 2px rgba(0,0,0,.38);
}
.led-step.current{background:transparent}
.led-step.current .led{
  transform:scale(1.32);
  background:#d7c2a7;
  box-shadow:
    0 0 0 2px rgba(205,171,130,.18),
    0 0 12px rgba(205,171,130,.52);
}
.led-step.current.accent .led{
  transform:scale(1.2);
  background:#f0ddc2;
  box-shadow:
    0 0 0 2px rgba(235,211,181,.28),
    0 0 16px rgba(235,211,181,.72);
}
.led-step.current.mute .led{
  transform:none;
  background:var(--led-off);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}
.note-mark{
  display:block;
  inline-size:44px;
  block-size:28px;
  color:currentColor;
}
.quick-button .note-mark{
  inline-size:40px;
  block-size:26px;
}
.note-option{
  display:grid;
  place-items:center;
  gap:2px;
  color:inherit;
}
.note-option .note-mark{
  inline-size:54px;
  block-size:27px;
}
.note-option__label{
  font-size:10px;
  font-weight:600;
  letter-spacing:.02em;
}
@media(hover:hover){
  .led-step:hover{background:rgba(238,231,221,.018)}
}
.tap-pad{
  position:relative;
  inline-size:100%;
  min-block-size:var(--secondary-height);
  justify-self:stretch;
  overflow:hidden;
  padding:0;
  border:1px solid rgba(255,255,255,.07);
  border-radius:8px;
  background:
    radial-gradient(circle at 50% 48%,rgba(205,171,130,.038),transparent 60%),
    repeating-linear-gradient(45deg,rgba(238,231,221,.015) 0 1px,transparent 1px 11px),
    repeating-linear-gradient(-45deg,rgba(238,231,221,.012) 0 1px,transparent 1px 11px),
    linear-gradient(180deg,rgba(238,231,221,.016),rgba(238,231,221,.004)),
    #12110f;
  box-shadow:
    inset 0 1px rgba(255,255,255,.026),
    inset 0 0 0 1px rgba(0,0,0,.20);
  display:grid;
  place-items:center;
  color:#d8d2ca;
}
.tap-pad::before{
  content:"";
  position:absolute;
  inset:6px;
  border:1px solid rgba(255,255,255,.018);
  border-radius:5px;
  pointer-events:none;
}
.tap-pad::after{
  content:"";
  position:absolute;
  inset-inline:16px;
  inset-block:50% auto;
  block-size:1px;
  background:linear-gradient(90deg,transparent,rgba(205,171,130,.11),transparent);
  pointer-events:none;
}
.tap-pad strong{
  position:relative;
  z-index:1;
  font-size:12px;
  letter-spacing:.12em;
  text-shadow:0 1px 10px rgba(0,0,0,.45);
}
.tap-pad:active{
  background-position:center,1px 1px,-1px 1px,center,center;
  box-shadow:
    inset 0 0 18px rgba(217,183,143,.055),
    inset 0 0 0 1px rgba(217,183,143,.08);
}
.transport-toggle{
  inline-size:100%;
  min-block-size:var(--transport-height);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:0;
  border-radius:9px;
  color:#19120d;
  background:linear-gradient(180deg,var(--gold-1),var(--gold-2) 58%,var(--gold-3));
  box-shadow:inset 0 1px rgba(255,255,255,.34),0 10px 20px rgba(187,134,82,.15);
  font-weight:760;
}
.transport-toggle.active{
  box-shadow:
    inset 0 1px rgba(255,255,255,.34),
    inset 0 0 0 2px rgba(106,68,34,.28),
    0 10px 20px rgba(187,134,82,.15);
}

.control-bottom-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:8px;
  align-items:stretch;
}
.transport-glyph{position:relative;inline-size:12px;block-size:12px}
.transport-glyph::before{
  content:"";
  position:absolute;
  inset-inline-start:2px;
  inset-block-start:1px;
  border-block:5px solid transparent;
  border-inline-start:8px solid #1c150f;
}
.transport-toggle.active .transport-glyph::before{inset:2px;border:0;background:#1c150f}
.transport-label{
  min-inline-size:0;
  text-align:center;
  white-space:nowrap;
  font-size:12px;
  letter-spacing:.02em;
}
.drawer-toggle{
  position:relative;
  min-block-size:var(--secondary-height);
  inline-size:100%;
  border:1px solid rgba(255,255,255,.07);
  border-radius:8px;
  background:
    var(--texture-card),
    linear-gradient(180deg,rgba(238,231,221,.016),rgba(238,231,221,.004)),
    #141210;
  box-shadow:
    inset 0 1px rgba(255,255,255,.026),
    inset 0 0 0 1px rgba(0,0,0,.18);
  color:#beb7af;
  display:grid;
  place-items:center;
  padding-inline:6px;
  font-size:9px;
  font-weight:650;
  letter-spacing:.065em;
  text-transform:uppercase;
  white-space:nowrap;
}
.drawer-toggle[aria-expanded="true"]{
  border-color:rgba(205,171,130,.26);
  background:
    linear-gradient(180deg,rgba(205,171,130,.065),rgba(205,171,130,.022)),
    #15120f;
  color:#ddd0c0;
}



[hidden]{display:none!important}
.visually-hidden{
  position:absolute!important;
  inline-size:1px!important;
  block-size:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  border:0!important;
}



.app[data-texture="ebony-deep"]{
  --texture-shell:
    linear-gradient(180deg,rgba(78,70,65,.015),transparent 30%),
    radial-gradient(ellipse at 18% 14%,rgba(255,255,255,.010),transparent 28%),
    linear-gradient(90deg,
      rgba(37,36,35,.28) 0%,
      rgba(44,42,40,.30) 12%,
      rgba(34,34,33,.27) 25%,
      rgba(49,46,43,.31) 40%,
      rgba(33,32,31,.27) 56%,
      rgba(47,44,42,.30) 70%,
      rgba(36,35,34,.28) 85%,
      rgba(43,41,39,.30) 100%);
  --texture-workspace:
    linear-gradient(90deg,
      rgba(33,32,31,.21) 0%,
      rgba(40,38,37,.23) 16%,
      rgba(31,30,30,.20) 32%,
      rgba(44,42,40,.24) 48%,
      rgba(31,30,29,.20) 64%,
      rgba(42,40,38,.23) 82%,
      rgba(34,33,32,.21) 100%);
  --texture-surface:
    linear-gradient(180deg,rgba(82,72,66,.018),transparent 32%),
    linear-gradient(112deg,
      transparent 0 16%,
      rgba(255,255,255,.008) 29%,
      rgba(255,255,255,.026) 42%,
      transparent 67% 100%),
    radial-gradient(ellipse at 80% 78%,rgba(0,0,0,.085),transparent 42%),
    linear-gradient(90deg,
      rgba(38,37,35,.30) 0%,
      rgba(45,43,41,.32) 12%,
      rgba(34,33,32,.28) 26%,
      rgba(50,47,44,.33) 42%,
      rgba(33,32,31,.28) 57%,
      rgba(48,45,42,.32) 71%,
      rgba(36,35,34,.29) 85%,
      rgba(44,42,40,.31) 100%);
  --texture-card:
    linear-gradient(180deg,rgba(255,255,255,.008),transparent 72%),
    linear-gradient(90deg,
      rgba(38,37,35,.09) 0%,
      rgba(45,43,41,.10) 38%,
      rgba(34,33,32,.09) 76%,
      rgba(43,41,39,.10) 100%);
  --texture-pr:
    linear-gradient(180deg,rgba(255,255,255,.006),transparent 74%);
}
@media(max-width:430px){
.app[data-texture="ebony-deep"]{
    --texture-shell:
      linear-gradient(180deg,rgba(82,74,68,.020),transparent 34%),
      linear-gradient(90deg,
        rgba(38,37,35,.36) 0%,
        rgba(46,43,41,.39) 12%,
        rgba(34,33,32,.34) 26%,
        rgba(51,48,45,.40) 42%,
        rgba(33,32,31,.34) 57%,
        rgba(49,46,43,.39) 71%,
        rgba(36,35,34,.35) 85%,
        rgba(45,42,40,.38) 100%);
    --texture-workspace:
      linear-gradient(90deg,
        rgba(34,33,32,.25) 0%,
        rgba(41,39,37,.28) 16%,
        rgba(31,30,29,.24) 32%,
        rgba(45,43,40,.29) 48%,
        rgba(31,30,29,.24) 64%,
        rgba(43,41,39,.28) 82%,
        rgba(34,33,32,.25) 100%);
    --texture-surface:
      linear-gradient(112deg,transparent 0 12%,rgba(255,255,255,.014) 28%,rgba(255,255,255,.042) 43%,transparent 69% 100%),
      linear-gradient(90deg,
        rgba(39,38,36,.39) 0%,
        rgba(47,44,42,.42) 12%,
        rgba(35,34,32,.37) 26%,
        rgba(52,49,46,.43) 42%,
        rgba(34,33,31,.37) 57%,
        rgba(50,47,44,.42) 71%,
        rgba(37,36,34,.38) 85%,
        rgba(46,43,41,.41) 100%);
  }
}


[data-drawer-panel].drawer-panel-hidden{
  display:none;
}

.practice-slot{
  min-block-size:var(--practice-height);
}
.practice-status{
  position:relative;
  z-index:6;
  inline-size:100%;
  block-size:var(--practice-height);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:4px;
  padding-block:2px;
  padding-inline:7px 3px;
  border:1px solid rgba(217,183,143,.13);
  border-radius:6px;
  background:
    linear-gradient(180deg,rgba(17,21,26,.92),rgba(10,13,17,.94));
  box-shadow:
    inset 0 1px rgba(255,255,255,.035),
    0 6px 14px rgba(0,0,0,.18);
}
.practice-status__end{
  min-block-size:26px;
  padding-inline:6px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:4px;
  background:rgba(255,255,255,.014);
  color:#9ba4ad;
  font-size:8px;
  font-weight:650;
  letter-spacing:.08em;
}
.practice-status__primary{
  color:#e0e4e8;
  font-size:9px;
  line-height:1.2;
  font-weight:650;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.visual-pulse{
  position:absolute;
  inset:0;
  z-index:5;
  border-radius:11px 0 0 11px;
  pointer-events:none;
  opacity:0;
  background:
    linear-gradient(180deg,rgba(177,129,79,.16),rgba(125,87,54,.10));
  box-shadow:
    inset 0 0 0 1px rgba(205,171,130,.10),
    inset 0 0 26px rgba(205,171,130,.08);
  will-change:opacity;
}
.visual-pulse.is-on{
  animation:visual-pulse var(--visual-pulse-duration,170ms) cubic-bezier(.22,.72,.2,1) both;
}
.visual-pulse.is-accent{
  animation:visual-pulse-accent var(--visual-pulse-duration,210ms) cubic-bezier(.22,.72,.2,1) both;
}
@keyframes visual-pulse{
  0%{opacity:0}
  18%{opacity:.55}
  100%{opacity:0}
}
@keyframes visual-pulse-accent{
  0%{opacity:0}
  18%{opacity:.85}
  100%{opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .visual-pulse.is-on,
  .visual-pulse.is-accent{animation-duration:1ms}
}

.practice-config{
  padding:10px;
  border:1px solid rgba(217,183,143,.12);
  border-radius:10px;
  background:rgba(217,183,143,.025);
}
.setting-fields{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.setting-field{
  min-inline-size:0;
  display:grid;
  gap:5px;
}
.setting-field span{
  color:#7f8992;
  font-size:10px;
  line-height:1.3;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.setting-field input{
  min-inline-size:0;
  inline-size:100%;
  min-block-size:40px;
  padding-inline:9px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  background:rgba(255,255,255,.018);
  color:#d7dce1;
  font-size:12px;
  font-variant-numeric:tabular-nums;
}
.setting-note{
  margin-block:8px 0;
  margin-inline:0;
  color:#6f7882;
  font-size:10px;
  line-height:1.6;
}
.toggle-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:7px;
}
.setting-toggle{
  min-inline-size:0;
  min-block-size:50px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 30px;
  grid-template-rows:auto auto;
  align-content:center;
  align-items:center;
  gap:3px;
  padding:7px 8px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:9px;
  background:rgba(255,255,255,.013);
  text-align:start;
}
.setting-toggle strong{
  grid-column:1;
  grid-row:1;
  color:#bfc6cd;
  font-size:10px;
  font-weight:650;
  line-height:1.2;
}
.setting-toggle span{
  grid-column:1;
  grid-row:2;
  color:#707a84;
  font-size:9.5px;
  line-height:1.35;
}
.setting-toggle::after{
  content:"";
  grid-column:2;
  grid-row:1 / 3;
  inline-size:28px;
  block-size:16px;
  justify-self:end;
  border:1px solid rgba(255,255,255,.07);
  border-radius:999px;
  background:
    radial-gradient(circle at 7px 50%,#918b84 0 5px,transparent 5.5px),
    rgba(255,255,255,.025);
  transition:background .16s ease,border-color .16s ease;
}
#practiceModeGrid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:3px;
  padding:3px;
  border:1px solid rgba(255,255,255,.048);
  border-radius:11px;
  background:rgba(0,0,0,.16);
}
#soundGrid{
  gap:3px;
  padding:3px;
  border:1px solid rgba(255,255,255,.048);
  border-radius:11px;
  background:rgba(0,0,0,.16);
}
#soundGrid .chip{
  min-block-size:52px;
  border-color:transparent;
  border-radius:8px;
  background:transparent;
}
.sound-option{
  display:grid;
  place-items:center;
  gap:4px;
  line-height:1;
}
.sound-option strong{
  color:inherit;
  font-size:10px;
  font-weight:650;
}
.sound-option span{
  color:#746d66;
  font-size:8px;
  font-weight:520;
  white-space:nowrap;
}
#soundGrid .chip.active .sound-option span{
  color:#a68e73;
}
#soundGrid .chip.active{
  border-color:rgba(217,183,143,.23);
  background:rgba(217,183,143,.055);
}
.practice-tab{
  min-inline-size:0;
  min-block-size:42px;
  padding-inline:5px;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:#858e97;
  font-size:10px;
  font-weight:650;
  white-space:nowrap;
}
.practice-tab[aria-selected="true"]{
  border-color:rgba(217,183,143,.23);
  background:rgba(217,183,143,.055);
  color:#e0c6a7;
  box-shadow:inset 0 0 0 1px rgba(217,183,143,.04);
}
.practice-panel{
  block-size:146px;
  min-block-size:146px;
  align-content:center;
}
.practice-panel__message{
  margin:0;
  color:#736d67;
  font-size:10px;
  line-height:1.6;
  text-align:center;
}
.setting-toggle[aria-pressed="true"]{
  border-color:rgba(217,183,143,.23);
  background:rgba(217,183,143,.055);
}
.setting-toggle[aria-pressed="true"]::after{
  border-color:rgba(217,183,143,.23);
  background:
    radial-gradient(circle at 21px 50%,#dfc4a2 0 5px,transparent 5.5px),
    rgba(217,183,143,.055);
}
.setting-toggle[aria-pressed="true"] strong{
  color:#e0c6a7;
}
.setting-toggle:disabled,
.setting-toggle[aria-disabled="true"]{
  cursor:not-allowed;
  opacity:.42;
}
.drawer-body{
  padding-block-end:max(18px,env(safe-area-inset-bottom));
}
@media(max-width:375px){
  .practice-status{
    inline-size:100%;
  }
  .setting-fields,
  .toggle-grid{
    grid-template-columns:minmax(0,1fr);
  }
}

.tool-after{
  inline-size:min(100%,520px);
  display:grid;
  gap:16px;
  padding-block:16px 20px;
  padding-inline:clamp(12px,3.2vw,20px);
  color:#7f8892;
}
.tool-pr{
  position:relative;
  inline-size:min(100%,420px);
  justify-self:center;
  display:grid;
  gap:6px;
  padding-block:10px 8px;
  padding-inline:34px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:11px;
  background:
    var(--texture-pr),
    rgba(255,255,255,.012);
}
.tool-pr__badge{
  position:absolute;
  inset-block-start:8px;
  inset-inline-end:8px;
  min-inline-size:22px;
  block-size:18px;
  display:grid;
  place-items:center;
  border:1px solid rgba(217,183,143,.22);
  border-radius:5px;
  color:#b99a78;
  font-size:9px;
}
.tool-pr__link{
  inline-size:calc(100% - 18px);
  justify-self:center;
  min-block-size:36px;
  display:grid;
  place-items:center;
  padding-block:5px;
  padding-inline:12px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--gold-1),var(--gold-2) 58%,var(--gold-3));
  box-shadow:inset 0 1px rgba(255,255,255,.28),0 8px 18px rgba(187,134,82,.13);
  color:#1b140e;
  font-size:9px;
  font-weight:690;
  line-height:1.35;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
}
@media(hover:hover){
  .tool-pr__link:hover{
    filter:brightness(1.04);
  }
}
.tool-pr__note{
  margin-block:0;
  margin-inline:0;
  color:#7f8892;
  font-size:10px;
  line-height:1.55;
  text-align:center;
}
.tool-legal{
  display:grid;
  justify-items:center;
  gap:5px;
  color:#7f8892;
  font-size:10px;
  line-height:1.55;
  letter-spacing:0;
  text-align:center;
}
.tool-legal p{
  margin-block:0;
  margin-inline:0;
  white-space:nowrap;
}
.tool-legal a{
  margin-block-start:2px;
  color:#8d97a1;
  font-size:10px;
  white-space:nowrap;
  text-decoration:none;
}
.helper-content{
  inline-size:min(100%,620px);
  padding-block:22px 44px;
  padding-inline:clamp(12px,3vw,22px);
  border-block-start:1px solid rgba(255,255,255,.065);
}
.helper-content h2{
  margin-block:20px 4px;
  margin-inline:0;
  color:#d7d0c8;
  font-size:clamp(15px,3.1vw,17px);
  line-height:1.45;
  letter-spacing:.005em;
  font-weight:650;
}
.helper-content__lead{
  max-inline-size:560px;
  margin-block:10px 18px;
  color:#aaa39b;
  font-size:13px;
  font-weight:430;
  line-height:1.8;
}
.helper-content details{
  border-block-start:1px solid rgba(255,255,255,.07);
}
.helper-content details:last-child{
  border-block-end:1px solid rgba(255,255,255,.07);
}
.helper-content summary{
  min-block-size:46px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  padding-inline:2px;
  color:#d3ccc4;
  font-size:13px;
  font-weight:620;
  cursor:pointer;
  list-style:none;
}
.helper-content summary::-webkit-details-marker{display:none}
.helper-content summary::after{
  content:"+";
  color:#9d8468;
  font-size:18px;
  font-weight:400;
}
.helper-content details[open] summary::after{content:"−"}
.helper-content__body{
  padding-block:0 16px;
  color:#aaa39b;
  font-size:13px;
  font-weight:430;
  line-height:1.8;
}
.helper-content__body p{
  margin-block:0 10px;
  margin-inline:0;
}
.helper-content__body p:last-child{
  margin-block-end:0;
}
.helper-content__body ol,
.helper-content__body ul{
  display:grid;
  gap:6px;
  margin-block:0 10px;
  padding-inline-start:1.5em;
}
.helper-related{
  inline-size:min(calc(100% - 24px),576px);
  display:grid;
  border-block:1px solid rgba(255,255,255,.065);
}
.helper-related a{
  min-block-size:44px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  padding-inline:4px;
  border-block-end:1px solid rgba(255,255,255,.055);
  color:#aaa39b;
  font-size:12px;
  font-weight:600;
  text-decoration:none;
}
.helper-related a:last-child{
  border-block-end:0;
}
.helper-related a::after{
  color:#9c8166;
  content:"›";
  font-size:17px;
  line-height:1;
}
.tool-footer{
  inline-size:min(100%,620px);
  margin-inline:auto;
  padding-block:26px max(10px,env(safe-area-inset-bottom));
  padding-inline:12px;
  color:#77716b;
  font-size:11px;
  text-align:center;
}
.tool-footer__copyright{
  margin:0;
}
.tool-footer__copyright a{
  color:inherit;
  text-decoration:none;
}

.backdrop{
  position:absolute;
  inset:0;
  z-index:15;
  padding:0;
  border:0;
  background:rgba(0,0,0,.42);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}
.backdrop.show{opacity:1;pointer-events:auto}
.drawer{
  position:absolute;
  inset-inline:10px;
  inset-block-end:10px;
  z-index:20;
  max-block-size:72%;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.048);
  border-radius:18px 18px 14px 14px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.04),transparent 12%),
    linear-gradient(180deg,#1a2027 0%,#10151a 100%);
  box-shadow:0 -18px 44px rgba(0,0,0,.46),inset 0 1px rgba(255,255,255,.05);
  transform:translate3d(0,calc(100% + 12px),0);
  opacity:0;
  visibility:hidden;
  backface-visibility:hidden;
  contain:paint;
  will-change:transform;
  transition:transform .24s cubic-bezier(.22,.72,.2,1),opacity .18s ease,visibility 0s linear .24s;
}
.drawer.open{
  transform:translate3d(0,0,0);
  opacity:1;
  visibility:visible;
  transition:transform .24s cubic-bezier(.22,.72,.2,1),opacity .18s ease,visibility 0s;
}
.drawer.is-preparing{
  opacity:0;
  visibility:hidden;
  transition:none;
}
.drawer[data-variant="bottom"]{
  block-size:min(52%,320px);
  max-block-size:min(52%,320px);
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
}
.drawer[data-variant="bottom"] .drawer-body{
  min-block-size:0;
  max-block-size:none;
  align-content:start;
  grid-auto-rows:max-content;
}
.drawer[data-variant="side"]{
  inset-inline-start:auto;
  inset-inline-end:0;
  inset-block:0;
  inline-size:min(88%,360px);
  max-block-size:none;
  border-inline-end:0;
  border-radius:14px 0 0 14px;
  box-shadow:-18px 0 44px rgba(0,0,0,.46),inset 1px 0 rgba(255,255,255,.04);
  transform:translate3d(calc(100% + 12px),0,0);
}
.drawer[data-variant="side"].open{
  transform:translate3d(0,0,0);
}
.drawer[data-variant="side"] .drawer-body{
  max-block-size:calc(100% - 58px);
}
.drawer[data-variant="side"] .drawer-head{
  grid-template-columns:minmax(0,1fr) auto;
}
.drawer[data-variant="side"] .drawer-close{
  display:none;
}
.drawer[data-variant="side"] .drawer-head::before,
.drawer[data-variant="popover"] .drawer-head::before{
  display:none;
}
.drawer[data-variant="side"] .drawer-heading,
.drawer[data-variant="popover"] .drawer-heading{
  padding-block-start:0;
}
.drawer[data-variant="popover"]{
  inset:auto;
  inset-inline-start:var(--popover-inline-start,10px);
  inset-block-start:var(--popover-block-start,80px);
  inline-size:min(304px,calc(100% - 20px));
  max-block-size:min(66%,410px);
  border-radius:14px;
  box-shadow:0 18px 42px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.05);
  transform:translate3d(0,-8px,0) scale(.985);
  transform-origin:var(--popover-origin-x,50%) 0;
}
.drawer[data-variant="popover"].open{
  transform:translate3d(0,0,0) scale(1);
}
.drawer[data-variant="popover"] .drawer-head{
  min-block-size:50px;
  grid-template-columns:1fr 52px;
  padding:10px 12px;
}
.drawer[data-variant="popover"] .drawer-head::before{
  inset-block-start:6px;
  inline-size:34px;
  block-size:3px;
}
.drawer[data-variant="popover"] .drawer-body{
  max-block-size:310px;
  padding:12px;
  gap:14px;
}
.drawer[data-variant="popover"] .drawer-title{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:none;
}
.drawer[data-variant="popover"] .drawer-close{
  font-size:11px;
}
.drawer[data-variant="popover"] .setting-head{
  font-size:10px;
  line-height:1.4;
}
.drawer[data-variant="popover"] .chip{
  font-size:12px;
}
.drawer[data-variant="popover"] .setting-note{
  font-size:10px;
  line-height:1.55;
}
.drawer-head{
  position:sticky;
  inset-block-start:0;
  z-index:1;
  min-block-size:58px;
  display:grid;
  grid-template-columns:1fr 60px;
  align-items:center;
  padding:14px;
  border-block-end:1px solid rgba(255,255,255,.038);
  background:rgba(24,30,37,.96);
}
.drawer-head-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}
.drawer-reset{
  display:none;
  min-block-size:40px;
  padding-inline:12px;
  border:1px solid rgba(205,171,130,.15);
  border-radius:9px;
  background:rgba(255,255,255,.012);
  color:#bfb6ab;
  font-size:11px;
  font-weight:600;
}
.drawer[data-variant="side"] .drawer-reset{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.drawer-head::before{
  content:"";
  position:absolute;
  inset-inline-start:50%;
  inset-block-start:8px;
  inline-size:42px;
  block-size:4px;
  transform:translateX(-50%);
  border-radius:999px;
  background:rgba(255,255,255,.18);
}
.drawer-heading{
  min-inline-size:0;
  display:grid;
  gap:3px;
  padding-block-start:6px;
}
.drawer-title{
  color:#ddd6cc;
  font-size:14px;
  font-weight:650;
  letter-spacing:.035em;
  line-height:1.2;
}
.drawer-close{
  min-block-size:40px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:9px;
  background:rgba(255,255,255,.010);
  font-size:11px;
  font-weight:600;
}
.drawer-body{
  max-block-size:calc(72svh - 58px);
  overflow:auto;
  overscroll-behavior:contain;
  padding:14px;
  display:grid;
  gap:16px;
}
.setting-group{display:grid;gap:10px}
.settings-related{
  display:grid;
  gap:7px;
  padding-block-start:16px;
  border-block-start:1px solid rgba(238,231,221,.055);
}
.setting-menu-link{
  min-block-size:42px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding-inline:11px;
  border:1px solid rgba(238,231,221,.058);
  border-radius:9px;
  background:rgba(238,231,221,.010);
  color:#bdb6ae;
  font-size:11px;
  font-weight:600;
  text-decoration:none;
}
.setting-menu-link span:last-child{
  color:#9c8166;
  font-size:17px;
  line-height:1;
}
.drawer:not([data-variant="popover"]) .setting-group:not(.drawer-panel-hidden) + .setting-group:not(.drawer-panel-hidden):not(.practice-config){
  padding-block-start:16px;
  border-block-start:1px solid rgba(238,231,221,.055);
}
.setting-head{
  margin-block:0;
  margin-inline:0;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:baseline;
  gap:8px;
  color:#929aa3;
  font-size:10px;
  font-weight:650;
  letter-spacing:.1em;
}
.setting-head span:last-child{
  color:#6f7882;
  font-weight:500;
  letter-spacing:.04em;
  text-align:end;
}
.chip-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}
.chip{
  min-inline-size:0;
  min-block-size:44px;
  padding-inline:6px;
  border:1px solid rgba(255,255,255,.036);
  border-radius:10px;
  background:rgba(255,255,255,.013);
  color:#858e97;
  font-size:11px;
}
.chip.active{
  color:#e0c6a7;
  border-color:rgba(217,183,143,.23);
  background:rgba(217,183,143,.055);
  box-shadow:inset 0 0 0 1px rgba(217,183,143,.04);
}
#meterGrid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.beat-option{
  display:grid;
  place-items:center;
  gap:3px;
  min-block-size:38px;
}
.beat-option__meter{
  color:inherit;
  font-size:14px;
  font-weight:650;
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.beat-option__group{
  min-block-size:11px;
  color:#858d95;
  font-size:10px;
  font-weight:560;
  font-variant-numeric:tabular-nums;
  letter-spacing:.035em;
  line-height:1;
}
.chip.active .beat-option__group{
  color:#c0a17e;
}
#subdivisionGrid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
#subdivisionGrid .chip{
  min-block-size:54px;
  padding-block:4px;
}

@media(max-width:430px){
  .workspace{
    --workspace-padding:8px;
    --display-min-height:108px;
    --display-label-row:13px;
    --display-value-row:68px;
    --display-unit-row:12px;
    --display-size-2:clamp(54px,16cqi,56px);
    --display-size-3:clamp(50px,14.7cqi,52px);
    --pendulum-pivot:272px;
    --pendulum-pivot-max:272px;
    --pendulum-height:344px;
    --blade-height:272px;
    --control-gap:8px;
    --quick-height:58px;
    --quick-padding:8px;
    --front-padding:8px;
    --transport-height:48px;
    --secondary-height:60px;
    padding:var(--workspace-padding);
  }
  .front{
    grid-template-columns:minmax(0,54%) minmax(0,46%);
  }
  .display-head{
    inset-inline:8px;
  }
  .weight{
    inline-size:34px;
    block-size:23px;
  }
  .display-head > span,
  .display-head small{
    font-size:9px;
  }
  .control-zone{
    padding-inline:8px;
    padding-block:0;
  }
  .quick-actions{
    gap:6px;
  }
  .quick-button{
    padding-inline:7px;
  }
  .quick-button strong{
    font-size:19px;
  }
  .tempo-panel .row{
    grid-template-columns:34px minmax(0,1fr) 34px;
    gap:0;
  }
  .tempo-panel button{
    min-block-size:34px;
    font-size:15px;
  }
  .section-label{
    gap:6px;
    font-size:9px;
  }
  .led-sequence{
    inline-size:150px;
    grid-template-columns:repeat(4,30px);
    column-gap:8px;
    row-gap:2px;
  }
  .led-step{
    min-inline-size:0;
    min-block-size:32px;
    padding:0;
  }
  .led{
    inline-size:8px;
    block-size:8px;
  }
  .transport-label{
    font-size:11px;
  }
  .control-bottom-row{
    gap:8px;
  }
  .tap-pad strong{
    font-size:12px;
    letter-spacing:.11em;
  }
  .drawer-toggle{
    font-size:9px;
    letter-spacing:.065em;
    line-height:1.2;
    font-weight:650;
    padding-inline:6px;
  }
  .tool-after{
    inline-size:min(100%,420px);
  }
  .tool-pr{
    inline-size:min(100%,390px);
  }
  .tool-legal{
    font-size:10px;
  }
  .tool-legal a{
    font-size:10px;
  }
  .helper-content{
    inline-size:min(100%,420px);
    padding-block:18px 36px;
  }
}

@media(max-width:480px){
  .page{
    padding-block-start:4px;
  }
  .app{
    --app-min-height:488px;
    --app-max-height:668px;
    --app-viewport-reserve:65px;
    min-block-size:0;
  }
  .tool-after{
    gap:16px;
    padding-block:16px 14px;
  }
  .tool-pr{
    gap:6px;
    padding-block:8px;
  }
  .tool-pr__badge{
    inset-block-start:7px;
  }
}

@media(max-width:375px){
  .workspace{
    --pendulum-bottom-reserve:152px;
    --accent-bottom:3px;
    --accent-height:64px;
    padding-inline:7px;
  }
  .front{grid-template-columns:minmax(0,55%) minmax(0,45%)}
  .control-zone{
    align-self:center;
    padding-block:0;
    padding-inline:7px;
  }
  .quick-actions{gap:5px}
  .quick-button{padding-inline:7px}
  .display-head{
    inset-inline:8px;
  }
  .weight{
    inline-size:32px;
  }
  .tap-pad{
    inline-size:100%;
  }
  .accent-dock{
    inline-size:min(150px,calc(100% - 8px));
  }
  .led-sequence{
    inline-size:150px;
    min-block-size:64px;
    grid-template-columns:repeat(4,30px);
    column-gap:8px;
    row-gap:0;
  }
}
@media(max-width:340px){
  .front{grid-template-columns:minmax(0,53%) minmax(0,47%)}
  .control-zone{padding-inline:5px}
  .control-bottom-row{gap:6px}
  .drawer-toggle{
    padding-inline:3px;
    font-size:8px;
    letter-spacing:.04em;
  }
  .tool-pr,
  .tool-legal{
    inline-size:auto;
    max-inline-size:100%;
    min-inline-size:0;
    justify-self:stretch;
  }
  .tool-legal p{white-space:normal}
}
@media(min-width:700px){
  .app{
    inline-size:min(780px,calc(100vw - 28px));
  }
  .front{
    grid-template-columns:minmax(0,54%) minmax(300px,46%);
  }
  .control-zone{
    max-inline-size:312px;
    padding-inline:18px;
    transform:translateY(var(--control-shift));
  }
  .tool-after{
    inline-size:min(520px,calc(100vw - 28px));
  }
  .helper-content{
    inline-size:min(620px,calc(100vw - 28px));
  }
}
@media(min-width:1080px){
  .app{
    inline-size:min(820px,calc(100vw - 40px));
  }
  .front{
    grid-template-columns:minmax(0,53%) minmax(320px,47%);
  }
  .control-zone{
    max-inline-size:324px;
    gap:10px;
  }
}

@media(prefers-reduced-motion:reduce){
  .backdrop,
  .drawer,
  .quick-button,
  .quick-button::after{
    transition-duration:.01ms;
  }
}

:root{
  --ink:#eee9e1;
  --muted:#99928a;
  --muted-2:#78716a;
  --line:rgba(238,231,221,.065);
  --gold-1:#e4cfad;
  --gold-2:#c69e6f;
  --gold-3:#aa7549;
  --gold-4:#755039;
  --signal:#ae6d59;
  --steel-1:#505354;
  --steel-2:#c4c6c2;
  --steel-3:#f0ede7;
  --steel-4:#8d918f;
  --led-off:#2c2d2c;
  --led-normal:#787a76;
  --led-accent:#dfcfb6;
}
html,body{
  background:
    radial-gradient(circle at 50% -12%,rgba(240,233,223,.032),transparent 28rem),
    radial-gradient(circle at 14% 8%,rgba(174,109,89,.030),transparent 20rem),
    linear-gradient(180deg,#171513 0%,#0e0d0c 54%,#090807 100%);
}
:focus-visible{
  outline-color:rgba(228,207,173,.9);
}
.app{
  border-color:rgba(238,231,221,.052);
  background:
    var(--texture-shell),
    linear-gradient(180deg,rgba(240,233,223,.012),transparent 16%),
    linear-gradient(180deg,#1a1816 0%,#12110f 52%,#0d0c0b 100%);
  box-shadow:
    inset 0 1px rgba(240,233,223,.045),
    0 32px 90px rgba(0,0,0,.48);
}
.header{
  border-block-end-color:rgba(238,231,221,.040);
}
.brand-mark::before{
  background:linear-gradient(90deg,#505354,#c4c6c2 45%,#777b79);
}
.brand-mark::after{
  box-shadow:0 2px 4px rgba(0,0,0,.38);
}
.brand-title strong{
  color:#dcd3c8;
}
.icon-btn{
  border-color:rgba(238,231,221,.052);
  background:rgba(238,231,221,.010);
}
.icon-btn svg{
  stroke:#d2cdc6;
}
.workspace{
  background:
    var(--texture-workspace),
    radial-gradient(ellipse at 42% 7%,rgba(240,233,223,.030),transparent 32%),
    linear-gradient(180deg,#141210 0%,#0d0c0b 100%);
}
.instrument{
  border-color:rgba(238,231,221,.060);
  background:
    var(--texture-surface),
    linear-gradient(180deg,rgba(240,233,223,.012),transparent 14%),
    radial-gradient(ellipse at 30% 72%,rgba(240,233,223,.022),transparent 30%),
    linear-gradient(180deg,#191714 0%,#100f0d 100%);
  box-shadow:
    inset 0 1px rgba(240,233,223,.025),
    inset 0 0 0 1px rgba(0,0,0,.24);
}
.instrument::after{
  background:linear-gradient(116deg,rgba(240,233,223,.010),transparent 18%,transparent 84%,rgba(240,233,223,.006));
}
.pendulum-zone{
  border-inline-end-color:rgba(238,231,221,.040);
}
.display-head small{
  color:#a28a73;
}
.display-head > span{
  color:#beb8b0;
}
.scale-track::before{
  background:linear-gradient(180deg,rgba(205,171,130,.34),rgba(205,171,130,.14) 50%,rgba(205,171,130,.30));
}
.scale-mark--major i{
  background:rgba(205,171,130,.54);
}
.scale-mark--minor i{
  background:rgba(216,211,203,.18);
}
.scale-mark span{
  color:#95816e;
}
.bob{
  background:radial-gradient(circle at 35% 35%,#535654,#181715 74%);
}
.bob::before{
  border-color:rgba(190,145,96,.72);
}
.bob::after{
  background:#2b2b29;
}
.quick-button,
.front-section,
.drawer-toggle,
.setting-toggle,
.chip,
.practice-status__end{
  border-color:rgba(238,231,221,.058);
}
.quick-button,
.setting-toggle,
.chip,
.practice-status__end{
  background:rgba(238,231,221,.010);
}
.front-section,
.drawer-toggle{
  background:
    var(--texture-card),
    linear-gradient(180deg,rgba(238,231,221,.014),rgba(238,231,221,.004)),
    rgba(238,231,221,.008);
}
.section-label,
.setting-head,
.setting-field span{
  color:#918981;
}
.tap-pad{
  border-color:rgba(238,231,221,.066);
  background:
    radial-gradient(circle at 50% 48%,rgba(205,171,130,.038),transparent 60%),
    repeating-linear-gradient(45deg,rgba(238,231,221,.015) 0 1px,transparent 1px 11px),
    repeating-linear-gradient(-45deg,rgba(238,231,221,.012) 0 1px,transparent 1px 11px),
    linear-gradient(180deg,rgba(238,231,221,.016),rgba(238,231,221,.004)),
    #12110f;
  color:#d8d2ca;
}
.tap-pad::after{
  background:linear-gradient(90deg,transparent,rgba(205,171,130,.11),transparent);
}
.transport-toggle{
  color:#19130f;
}
.transport-glyph::before{
  border-inline-start-color:#1b1510;
}
.transport-toggle.active .transport-glyph::before{
  background:#1b1510;
}
.drawer-toggle{
  background:
    var(--texture-card),
    linear-gradient(180deg,rgba(238,231,221,.016),rgba(238,231,221,.004)),
    #141210;
  color:#beb7af;
}
.drawer-toggle[aria-expanded="true"]{
  border-color:rgba(205,171,130,.24);
  background:
    linear-gradient(180deg,rgba(205,171,130,.065),rgba(205,171,130,.022)),
    #15120f;
  color:#ddd0c0;
}
.practice-status{
  border-color:rgba(205,171,130,.14);
  background:linear-gradient(180deg,rgba(24,22,20,.92),rgba(13,12,11,.94));
}
.practice-status__end{
  border-color:rgba(205,171,130,.28);
  background:rgba(205,171,130,.065);
  color:#d7bea0;
  box-shadow:inset 0 1px rgba(255,255,255,.035);
}
.practice-status__end:active{
  border-color:rgba(205,171,130,.38);
  background:rgba(205,171,130,.11);
}
@media(hover:hover){
  .practice-status__end:hover{
    border-color:rgba(205,171,130,.36);
    background:rgba(205,171,130,.09);
    color:#ead4b8;
  }
}
.practice-status__primary{
  color:#e1dcd5;
}
.practice-config{
  border-color:rgba(205,171,130,.12);
  background:rgba(205,171,130,.022);
}
.setting-toggle strong{
  color:#c0bab2;
}
.setting-toggle span,
.setting-note,
.setting-head span:last-child{
  color:#736d67;
}
.setting-toggle[aria-pressed="true"],
.chip.active{
  border-color:rgba(205,171,130,.24);
  background:rgba(205,171,130,.050);
}
.setting-toggle[aria-pressed="true"] strong,
.chip.active{
  color:#dfc4a2;
}
.drawer{
  border-color:rgba(205,171,130,.17);
  background:
    linear-gradient(180deg,rgba(240,233,223,.035),transparent 14%),
    linear-gradient(180deg,#211e1b 0%,#151310 100%);
  box-shadow:0 -18px 44px rgba(0,0,0,.54),inset 0 1px rgba(238,231,221,.07);
}
.drawer-head{
  border-block-end-color:rgba(205,171,130,.09);
  background:rgba(33,30,27,.98);
}
.drawer[data-variant="side"]{
  box-shadow:-18px 0 44px rgba(0,0,0,.54),inset 1px 0 rgba(238,231,221,.06);
}
.drawer[data-variant="popover"]{
  border-color:rgba(205,171,130,.20);
  box-shadow:0 18px 42px rgba(0,0,0,.56),inset 0 1px rgba(238,231,221,.07);
}
.drawer-title{
  color:#dcd4ca;
}
.tool-legal{
  color:#817b74;
}
.tool-pr{
  border-color:rgba(238,231,221,.055);
  background:rgba(238,231,221,.008);
}
.tool-pr__badge{
  border-color:rgba(205,171,130,.22);
  color:#b89670;
}
.tool-pr__note{
  color:#817b74;
}
.tool-legal a{
  color:#918b84;
}
.helper-content{
  border-block-start-color:rgba(238,231,221,.055);
}
.helper-content h2{
  color:#ded8d0;
}
.helper-content__lead{
  color:#aaa39b;
}
.helper-content details,
.helper-content details:last-child{
  border-color:rgba(238,231,221,.060);
}
.helper-content summary{
  color:#d3ccc4;
}
.helper-content summary::after{
  color:#9c8166;
}
.helper-content__body{
  color:#aaa39b;
}

@container metronome (max-width:430px) and (max-height:668px){
  .workspace{
    --display-top:clamp(24px,calc(18cqh - 84px),36px);
    --display-size-2:clamp(50px,9cqh,56px);
    --display-size-3:clamp(47px,8.5cqh,52px);
    --pendulum-pivot:clamp(196px,calc(63cqh - 148px),var(--pendulum-pivot-max));
    --pendulum-height:calc(var(--pendulum-pivot) + 64px);
    --pendulum-top:calc(100cqh - var(--pendulum-bottom-reserve) - var(--pendulum-height));
    --blade-height:var(--pendulum-pivot);
    --scale-top:calc(var(--pendulum-top) + 10px);
    --scale-height:clamp(150px,calc(100cqh - 394px),218px);
  }
}

@container metronome (max-width:430px) and (max-height:550px){
  .workspace{
    --workspace-padding:6px;
    --display-top:8px;
    --display-min-height:72px;
    --display-label-row:10px;
    --display-value-row:48px;
    --display-unit-row:10px;
    --display-row-gap:2px;
    --display-value-height:48px;
    --display-size-2:46px;
    --display-size-3:43px;
    --pendulum-bottom-reserve:144px;
    --bob-size:36px;
    --bob-ring-inset:6px;
    --bob-core-inset:14px;
    --accent-bottom:0px;
    --accent-height:64px;
    --control-gap:5px;
    --quick-height:50px;
    --quick-padding:6px;
    --quick-label-row:10px;
    --quick-value-row:22px;
    --front-padding:6px;
    --tempo-row-margin:3px;
    --tempo-row-height:36px;
    --transport-height:44px;
    --secondary-height:50px;
    --practice-height:28px;
    padding:var(--workspace-padding);
  }
  .quick-button{
    row-gap:2px;
  }
  .quick-button strong{
    min-block-size:22px;
    font-size:17px;
  }
}