/* node_modules/@fontsource/inter/400.css */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("./assets/inter-cyrillic-ext-400-normal.woff2") format("woff2"), url("./assets/inter-cyrillic-ext-400-normal.woff") format("woff");
  unicode-range:
    U+0460-052F,
    U+1C80-1C8A,
    U+20B4,
    U+2DE0-2DFF,
    U+A640-A69F,
    U+FE2E-FE2F;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("./assets/inter-cyrillic-400-normal.woff2") format("woff2"), url("./assets/inter-cyrillic-400-normal.woff") format("woff");
  unicode-range:
    U+0301,
    U+0400-045F,
    U+0490-0491,
    U+04B0-04B1,
    U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("./assets/inter-greek-ext-400-normal.woff2") format("woff2"), url("./assets/inter-greek-ext-400-normal.woff") format("woff");
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("./assets/inter-greek-400-normal.woff2") format("woff2"), url("./assets/inter-greek-400-normal.woff") format("woff");
  unicode-range:
    U+0370-0377,
    U+037A-037F,
    U+0384-038A,
    U+038C,
    U+038E-03A1,
    U+03A3-03FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("./assets/inter-vietnamese-400-normal.woff2") format("woff2"), url("./assets/inter-vietnamese-400-normal.woff") format("woff");
  unicode-range:
    U+0102-0103,
    U+0110-0111,
    U+0128-0129,
    U+0168-0169,
    U+01A0-01A1,
    U+01AF-01B0,
    U+0300-0301,
    U+0303-0304,
    U+0308-0309,
    U+0323,
    U+0329,
    U+1EA0-1EF9,
    U+20AB;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("./assets/inter-latin-ext-400-normal.woff2") format("woff2"), url("./assets/inter-latin-ext-400-normal.woff") format("woff");
  unicode-range:
    U+0100-02BA,
    U+02BD-02C5,
    U+02C7-02CC,
    U+02CE-02D7,
    U+02DD-02FF,
    U+0304,
    U+0308,
    U+0329,
    U+1D00-1DBF,
    U+1E00-1E9F,
    U+1EF2-1EFF,
    U+2020,
    U+20A0-20AB,
    U+20AD-20C0,
    U+2113,
    U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("./assets/inter-latin-400-normal.woff2") format("woff2"), url("./assets/inter-latin-400-normal.woff") format("woff");
  unicode-range:
    U+0000-00FF,
    U+0131,
    U+0152-0153,
    U+02BB-02BC,
    U+02C6,
    U+02DA,
    U+02DC,
    U+0304,
    U+0308,
    U+0329,
    U+2000-206F,
    U+20AC,
    U+2122,
    U+2191,
    U+2193,
    U+2212,
    U+2215,
    U+FEFF,
    U+FFFD;
}

/* node_modules/@fontsource/inter/500.css */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("./assets/inter-cyrillic-ext-500-normal.woff2") format("woff2"), url("./assets/inter-cyrillic-ext-500-normal.woff") format("woff");
  unicode-range:
    U+0460-052F,
    U+1C80-1C8A,
    U+20B4,
    U+2DE0-2DFF,
    U+A640-A69F,
    U+FE2E-FE2F;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("./assets/inter-cyrillic-500-normal.woff2") format("woff2"), url("./assets/inter-cyrillic-500-normal.woff") format("woff");
  unicode-range:
    U+0301,
    U+0400-045F,
    U+0490-0491,
    U+04B0-04B1,
    U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("./assets/inter-greek-ext-500-normal.woff2") format("woff2"), url("./assets/inter-greek-ext-500-normal.woff") format("woff");
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("./assets/inter-greek-500-normal.woff2") format("woff2"), url("./assets/inter-greek-500-normal.woff") format("woff");
  unicode-range:
    U+0370-0377,
    U+037A-037F,
    U+0384-038A,
    U+038C,
    U+038E-03A1,
    U+03A3-03FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("./assets/inter-vietnamese-500-normal.woff2") format("woff2"), url("./assets/inter-vietnamese-500-normal.woff") format("woff");
  unicode-range:
    U+0102-0103,
    U+0110-0111,
    U+0128-0129,
    U+0168-0169,
    U+01A0-01A1,
    U+01AF-01B0,
    U+0300-0301,
    U+0303-0304,
    U+0308-0309,
    U+0323,
    U+0329,
    U+1EA0-1EF9,
    U+20AB;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("./assets/inter-latin-ext-500-normal.woff2") format("woff2"), url("./assets/inter-latin-ext-500-normal.woff") format("woff");
  unicode-range:
    U+0100-02BA,
    U+02BD-02C5,
    U+02C7-02CC,
    U+02CE-02D7,
    U+02DD-02FF,
    U+0304,
    U+0308,
    U+0329,
    U+1D00-1DBF,
    U+1E00-1E9F,
    U+1EF2-1EFF,
    U+2020,
    U+20A0-20AB,
    U+20AD-20C0,
    U+2113,
    U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("./assets/inter-latin-500-normal.woff2") format("woff2"), url("./assets/inter-latin-500-normal.woff") format("woff");
  unicode-range:
    U+0000-00FF,
    U+0131,
    U+0152-0153,
    U+02BB-02BC,
    U+02C6,
    U+02DA,
    U+02DC,
    U+0304,
    U+0308,
    U+0329,
    U+2000-206F,
    U+20AC,
    U+2122,
    U+2191,
    U+2193,
    U+2212,
    U+2215,
    U+FEFF,
    U+FFFD;
}

/* node_modules/@fontsource/inter/600.css */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("./assets/inter-cyrillic-ext-600-normal.woff2") format("woff2"), url("./assets/inter-cyrillic-ext-600-normal.woff") format("woff");
  unicode-range:
    U+0460-052F,
    U+1C80-1C8A,
    U+20B4,
    U+2DE0-2DFF,
    U+A640-A69F,
    U+FE2E-FE2F;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("./assets/inter-cyrillic-600-normal.woff2") format("woff2"), url("./assets/inter-cyrillic-600-normal.woff") format("woff");
  unicode-range:
    U+0301,
    U+0400-045F,
    U+0490-0491,
    U+04B0-04B1,
    U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("./assets/inter-greek-ext-600-normal.woff2") format("woff2"), url("./assets/inter-greek-ext-600-normal.woff") format("woff");
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("./assets/inter-greek-600-normal.woff2") format("woff2"), url("./assets/inter-greek-600-normal.woff") format("woff");
  unicode-range:
    U+0370-0377,
    U+037A-037F,
    U+0384-038A,
    U+038C,
    U+038E-03A1,
    U+03A3-03FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("./assets/inter-vietnamese-600-normal.woff2") format("woff2"), url("./assets/inter-vietnamese-600-normal.woff") format("woff");
  unicode-range:
    U+0102-0103,
    U+0110-0111,
    U+0128-0129,
    U+0168-0169,
    U+01A0-01A1,
    U+01AF-01B0,
    U+0300-0301,
    U+0303-0304,
    U+0308-0309,
    U+0323,
    U+0329,
    U+1EA0-1EF9,
    U+20AB;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("./assets/inter-latin-ext-600-normal.woff2") format("woff2"), url("./assets/inter-latin-ext-600-normal.woff") format("woff");
  unicode-range:
    U+0100-02BA,
    U+02BD-02C5,
    U+02C7-02CC,
    U+02CE-02D7,
    U+02DD-02FF,
    U+0304,
    U+0308,
    U+0329,
    U+1D00-1DBF,
    U+1E00-1E9F,
    U+1EF2-1EFF,
    U+2020,
    U+20A0-20AB,
    U+20AD-20C0,
    U+2113,
    U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("./assets/inter-latin-600-normal.woff2") format("woff2"), url("./assets/inter-latin-600-normal.woff") format("woff");
  unicode-range:
    U+0000-00FF,
    U+0131,
    U+0152-0153,
    U+02BB-02BC,
    U+02C6,
    U+02DA,
    U+02DC,
    U+0304,
    U+0308,
    U+0329,
    U+2000-206F,
    U+20AC,
    U+2122,
    U+2191,
    U+2193,
    U+2212,
    U+2215,
    U+FEFF,
    U+FFFD;
}

/* node_modules/@fontsource/inter/700.css */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("./assets/inter-cyrillic-ext-700-normal.woff2") format("woff2"), url("./assets/inter-cyrillic-ext-700-normal.woff") format("woff");
  unicode-range:
    U+0460-052F,
    U+1C80-1C8A,
    U+20B4,
    U+2DE0-2DFF,
    U+A640-A69F,
    U+FE2E-FE2F;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("./assets/inter-cyrillic-700-normal.woff2") format("woff2"), url("./assets/inter-cyrillic-700-normal.woff") format("woff");
  unicode-range:
    U+0301,
    U+0400-045F,
    U+0490-0491,
    U+04B0-04B1,
    U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("./assets/inter-greek-ext-700-normal.woff2") format("woff2"), url("./assets/inter-greek-ext-700-normal.woff") format("woff");
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("./assets/inter-greek-700-normal.woff2") format("woff2"), url("./assets/inter-greek-700-normal.woff") format("woff");
  unicode-range:
    U+0370-0377,
    U+037A-037F,
    U+0384-038A,
    U+038C,
    U+038E-03A1,
    U+03A3-03FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("./assets/inter-vietnamese-700-normal.woff2") format("woff2"), url("./assets/inter-vietnamese-700-normal.woff") format("woff");
  unicode-range:
    U+0102-0103,
    U+0110-0111,
    U+0128-0129,
    U+0168-0169,
    U+01A0-01A1,
    U+01AF-01B0,
    U+0300-0301,
    U+0303-0304,
    U+0308-0309,
    U+0323,
    U+0329,
    U+1EA0-1EF9,
    U+20AB;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("./assets/inter-latin-ext-700-normal.woff2") format("woff2"), url("./assets/inter-latin-ext-700-normal.woff") format("woff");
  unicode-range:
    U+0100-02BA,
    U+02BD-02C5,
    U+02C7-02CC,
    U+02CE-02D7,
    U+02DD-02FF,
    U+0304,
    U+0308,
    U+0329,
    U+1D00-1DBF,
    U+1E00-1E9F,
    U+1EF2-1EFF,
    U+2020,
    U+20A0-20AB,
    U+20AD-20C0,
    U+2113,
    U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("./assets/inter-latin-700-normal.woff2") format("woff2"), url("./assets/inter-latin-700-normal.woff") format("woff");
  unicode-range:
    U+0000-00FF,
    U+0131,
    U+0152-0153,
    U+02BB-02BC,
    U+02C6,
    U+02DA,
    U+02DC,
    U+0304,
    U+0308,
    U+0329,
    U+2000-206F,
    U+20AC,
    U+2122,
    U+2191,
    U+2193,
    U+2212,
    U+2215,
    U+FEFF,
    U+FFFD;
}

/* node_modules/@fontsource/patrick-hand/400.css */
@font-face {
  font-family: "Patrick Hand";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("./assets/patrick-hand-vietnamese-400-normal.woff2") format("woff2"), url("./assets/patrick-hand-vietnamese-400-normal.woff") format("woff");
  unicode-range:
    U+0102-0103,
    U+0110-0111,
    U+0128-0129,
    U+0168-0169,
    U+01A0-01A1,
    U+01AF-01B0,
    U+0300-0301,
    U+0303-0304,
    U+0308-0309,
    U+0323,
    U+0329,
    U+1EA0-1EF9,
    U+20AB;
}
@font-face {
  font-family: "Patrick Hand";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("./assets/patrick-hand-latin-ext-400-normal.woff2") format("woff2"), url("./assets/patrick-hand-latin-ext-400-normal.woff") format("woff");
  unicode-range:
    U+0100-02BA,
    U+02BD-02C5,
    U+02C7-02CC,
    U+02CE-02D7,
    U+02DD-02FF,
    U+0304,
    U+0308,
    U+0329,
    U+1D00-1DBF,
    U+1E00-1E9F,
    U+1EF2-1EFF,
    U+2020,
    U+20A0-20AB,
    U+20AD-20C0,
    U+2113,
    U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Patrick Hand";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("./assets/patrick-hand-latin-400-normal.woff2") format("woff2"), url("./assets/patrick-hand-latin-400-normal.woff") format("woff");
  unicode-range:
    U+0000-00FF,
    U+0131,
    U+0152-0153,
    U+02BB-02BC,
    U+02C6,
    U+02DA,
    U+02DC,
    U+0304,
    U+0308,
    U+0329,
    U+2000-206F,
    U+20AC,
    U+2122,
    U+2191,
    U+2193,
    U+2212,
    U+2215,
    U+FEFF,
    U+FFFD;
}

/* node_modules/@fontsource/pangolin/400.css */
@font-face {
  font-family: "Pangolin";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("./assets/pangolin-cyrillic-ext-400-normal.woff2") format("woff2"), url("./assets/pangolin-cyrillic-ext-400-normal.woff") format("woff");
  unicode-range:
    U+0460-052F,
    U+1C80-1C8A,
    U+20B4,
    U+2DE0-2DFF,
    U+A640-A69F,
    U+FE2E-FE2F;
}
@font-face {
  font-family: "Pangolin";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("./assets/pangolin-cyrillic-400-normal.woff2") format("woff2"), url("./assets/pangolin-cyrillic-400-normal.woff") format("woff");
  unicode-range:
    U+0301,
    U+0400-045F,
    U+0490-0491,
    U+04B0-04B1,
    U+2116;
}
@font-face {
  font-family: "Pangolin";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("./assets/pangolin-vietnamese-400-normal.woff2") format("woff2"), url("./assets/pangolin-vietnamese-400-normal.woff") format("woff");
  unicode-range:
    U+0102-0103,
    U+0110-0111,
    U+0128-0129,
    U+0168-0169,
    U+01A0-01A1,
    U+01AF-01B0,
    U+0300-0301,
    U+0303-0304,
    U+0308-0309,
    U+0323,
    U+0329,
    U+1EA0-1EF9,
    U+20AB;
}
@font-face {
  font-family: "Pangolin";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("./assets/pangolin-latin-ext-400-normal.woff2") format("woff2"), url("./assets/pangolin-latin-ext-400-normal.woff") format("woff");
  unicode-range:
    U+0100-02BA,
    U+02BD-02C5,
    U+02C7-02CC,
    U+02CE-02D7,
    U+02DD-02FF,
    U+0304,
    U+0308,
    U+0329,
    U+1D00-1DBF,
    U+1E00-1E9F,
    U+1EF2-1EFF,
    U+2020,
    U+20A0-20AB,
    U+20AD-20C0,
    U+2113,
    U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Pangolin";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("./assets/pangolin-latin-400-normal.woff2") format("woff2"), url("./assets/pangolin-latin-400-normal.woff") format("woff");
  unicode-range:
    U+0000-00FF,
    U+0131,
    U+0152-0153,
    U+02BB-02BC,
    U+02C6,
    U+02DA,
    U+02DC,
    U+0304,
    U+0308,
    U+0329,
    U+2000-206F,
    U+20AC,
    U+2122,
    U+2191,
    U+2193,
    U+2212,
    U+2215,
    U+FEFF,
    U+FFFD;
}

/* src/styles/fonts.css */
@font-face {
  font-family: "MuseJazz";
  src: url("./assets/MuseJazz.woff") format("woff");
  font-display: block;
}
@font-face {
  font-family: "MuseJazz Text";
  src: url("./assets/MuseJazzText.woff") format("woff");
  font-display: block;
}
@font-face {
  font-family: "Finale Broadway Text";
  src: url("./assets/FinaleBroadwayText.woff") format("woff");
  font-display: block;
}
@font-face {
  font-family: "RN Marks";
  src: url("./assets/FinaleBroadwayText.woff") format("woff");
  unicode-range: U+00B0;
  font-display: block;
}
@font-face {
  font-family: "RN Marks";
  src: url("./assets/MuseJazzText.woff") format("woff");
  unicode-range:
    U+00F8,
    U+266D-266F,
    U+E873;
  font-display: block;
}

/* src/style.css */
@layer reset, element, component.base, component.modifier, layout, modifier;
:root {
  --ink: #111111;
  --ink-2: #3A3A3E;
  --muted: #6B6B70;
  --faint: #8A8A8F;
  --line: #E5E5EA;
  --hair: #F0F0F3;
  --fill: #EFEFF2;
  --fill-strong: #E2E2E7;
  --paper: #FFFFFF;
  --accent: #007AFF;
  --select: #1F5FBF;
  --select-fill: #D6E4FB;
  --cursor-fill: #F1F5FC;
  --danger: #D93A2B;
  --shadow-pop: 0 12px 40px rgb(0 0 0 / 0.18), 0 0 0 1px rgb(0 0 0 / 0.05);
  --shadow-float: 0 6px 24px rgb(0 0 0 / 0.14), 0 0 0 1px rgb(0 0 0 / 0.05);
  --font-ui:
    Inter,
    system-ui,
    -apple-system,
    sans-serif;
  --font-sym:
    "MuseJazz Text",
    "Finale Broadway Text",
    Pangolin,
    sans-serif;
  --font-rn:
    "RN Marks",
    "Patrick Hand",
    "Finale Broadway Text",
    Pangolin,
    sans-serif;
  --font-music: "MuseJazz";
  --radius: 12px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  body {
    margin: 0;
  }
  button,
  input {
    font: inherit;
    color: inherit;
  }
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  h1,
  h2,
  p {
    margin: 0;
  }
}
@layer element {
  html {
    -webkit-text-size-adjust: 100%;
  }
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
  }
  button {
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    touch-action: manipulation;
  }
  a {
    color: var(--accent);
  }
  hr {
    border: none;
    height: 1px;
    background: var(--hair);
    margin: 4px 16px 0;
  }
  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
}
@layer component.base {
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .music {
    font-family: var(--font-music);
    font-weight: 400;
  }
  .sym {
    font-family: var(--font-sym);
  }
  .rn {
    font-family: var(--font-rn);
  }
  .spacer {
    flex: 1;
  }
  .empty {
    padding: 40px 20px;
    text-align: center;
    font-size: 15px;
    color: var(--muted);
  }
  .notice {
    margin: 0 16px 8px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: #FFF1E0;
    color: #8A4A00;
    font-size: 14px;
  }
  .hint {
    margin-top: 12px;
    font-size: 13px;
    color: var(--faint);
    line-height: 1.35;
  }
  .icon-button {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    flex: none;
  }
  .link-button {
    height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 4px;
    color: var(--accent);
    font-size: 17px;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
  }
  .danger-link {
    display: block;
    width: 100%;
    height: 44px;
    margin-top: 16px;
    border-radius: var(--radius);
    color: var(--danger);
    font-size: 15px;
    font-weight: 500;
  }
  .group-label {
    padding: 12px 16px 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--muted);
  }
  .segmented {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    background: var(--fill);
    border-radius: 11px;
    padding: 2px;
  }
  .segmented > button {
    height: 40px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #55555A;
  }
  .segmented > button:is(:is([aria-pressed=true], [aria-checked=true], .on)) {
    background: var(--paper);
    color: var(--ink);
    font-weight: 600;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.14);
  }
  .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 0;
  }
  .chips > button {
    height: 36px;
    padding: 0 14px;
    border-radius: 18px;
    background: var(--fill);
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 500;
  }
  .chips > button:is(:is([aria-pressed=true], [aria-checked=true], .on)) {
    background: var(--ink);
    color: var(--paper);
    font-weight: 600;
  }
  .switch-row {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    text-align: left;
    font-size: 15px;
    color: var(--ink);
  }
  .switch-row > span:first-child {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .switch-row:disabled {
    opacity: 0.35;
    cursor: default;
  }
  .switch {
    width: 40px;
    height: 24px;
    border-radius: 12px;
    position: relative;
    flex: none;
    background: var(--fill-strong);
    transition: background 0.15s;
  }
  .switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: var(--paper);
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
    transition: left 0.15s;
  }
  :is([aria-pressed=true], [aria-checked=true], .on) > .switch {
    background: var(--ink);
  }
  :is([aria-pressed=true], [aria-checked=true], .on) > .switch::after {
    left: 18px;
  }
  .popover {
    position: fixed;
    inset: auto;
    margin: 0;
    padding: 6px 0 8px;
    border: none;
    border-radius: 20px;
    background: var(--paper);
    box-shadow: var(--shadow-pop);
  }
  :is(.popover, .bottom-sheet) {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
    transition:
      opacity 0.16s ease,
      transform 0.16s ease,
      overlay 0.16s allow-discrete,
      display 0.16s allow-discrete;
  }
  :is(.popover:popover-open, .bottom-sheet[open]) {
    opacity: 1;
    transform: none;
  }
  @starting-style {
    :is(.popover:popover-open, .bottom-sheet[open]) {
      opacity: 0;
      transform: translateY(4px) scale(0.98);
    }
  }
  .bottom-sheet::backdrop {
    background: rgb(0 0 0 / 0);
    transition:
      background 0.16s ease,
      overlay 0.16s allow-discrete,
      display 0.16s allow-discrete;
  }
  .bottom-sheet[open]::backdrop {
    background: rgb(0 0 0 / 0.28);
  }
  @starting-style {
    .bottom-sheet[open]::backdrop {
      background: rgb(0 0 0 / 0);
    }
  }
  .menu {
    padding: 6px;
    border-radius: 14px;
    min-width: 200px;
  }
  .menu > :is(a, button) {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 9px;
    font-size: 15px;
    color: var(--ink);
    text-decoration: none;
    text-align: left;
  }
  .menu > :is(a, button):hover {
    background: var(--fill);
  }
  .menu > .group-label {
    padding: 6px 10px 2px;
    font-size: 11px;
    color: var(--faint);
  }
  .menu > hr {
    margin: 4px 6px;
  }
  .danger {
    color: var(--danger) !important;
  }
  header.bar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 0 4px;
    position: relative;
  }
}
@layer layout {
  .library {
    max-width: 1024px;
    margin: 0 auto;
    padding-bottom: calc(24px + var(--safe-bottom));
  }
  .library-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 20px 10px;
  }
  @media (min-width: 768px) {
    .library-head {
      padding: 36px 48px 14px;
    }
  }
  .library-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .library-top h1 {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.7px;
  }
  @media (min-width: 768px) {
    .library-top h1 {
      font-size: 36px;
      letter-spacing: -0.8px;
    }
  }
  .library-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: -4px;
  }
  .avatar-button {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
  }
  .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--fill);
    color: var(--ink-2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: none;
    font-size: 14px;
    font-weight: 600;
  }
  .avatar.in {
    background: var(--ink);
    color: var(--paper);
  }
  .avatar.large {
    width: 56px;
    height: 56px;
    background: var(--ink);
    color: var(--paper);
    font-size: 22px;
  }
  .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .library-tabs > button {
    height: 38px;
    font-size: 15px;
  }
  .sync-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    background: #F4F4F6;
  }
  .sync-banner .sync-icon {
    color: var(--ink-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
  }
  .sync-banner .sync-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .sync-banner .sync-copy strong {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
  }
  .sync-banner .sync-copy span {
    font-size: 13px;
    color: var(--muted);
  }
  .sync-banner .link-button {
    height: auto;
    font-size: 16px;
    font-weight: 500;
  }
  .sheet-close {
    display: flex;
    justify-content: flex-end;
    margin-right: -10px;
    color: #55555A;
  }
  .sheet-close .icon-button {
    color: inherit;
  }
  .sheet-title {
    margin-top: 16px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.4px;
  }
  .bottom-sheet:is(.account-sheet, .share-sheet) {
    padding-inline: 20px;
    padding-bottom: calc(30px + var(--safe-bottom));
    display: flex;
    flex-direction: column;
  }
  .bottom-sheet:is(.account-sheet, .share-sheet):not([open]) {
    display: none;
  }
  .bottom-sheet:is(.account-sheet, .share-sheet) .lead {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--ink-2);
  }
  .bottom-sheet:is(.account-sheet, .share-sheet) .fine {
    margin: 12px 2px 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--muted);
  }
  .feature-tile {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: #F4F4F6;
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .wide-button {
    width: 100%;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
  }
  .wide-button.solid {
    background: var(--ink);
    color: var(--paper);
    gap: 8px;
  }
  .wide-button.google {
    margin-top: 22px;
    border: 1px solid #747775;
    background: #FFFFFF;
    color: #1F1F1F;
    font-weight: 500;
  }
  .wide-button.quiet {
    margin-top: 6px;
    height: 46px;
    color: #55555A;
    font-size: 15px;
    font-weight: 500;
  }
  .wide-button.sign-out {
    margin-top: 18px;
    height: 48px;
    background: #F4F4F6;
    color: #C0262D;
  }
  .card {
    margin-top: 20px;
    border-radius: 14px;
    background: #F4F4F6;
  }
  .card > .row {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    font-size: 15px;
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
  }
  .card > .row + .row {
    border-top: 1px solid #E8E8EC;
  }
  .card > .row[role=status] {
    cursor: default;
  }
  .card .grow {
    flex: 1;
    min-width: 0;
  }
  .card .muted {
    font-size: 14px;
    color: #55555A;
  }
  .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1A7F37;
    flex: none;
  }
  .dot.off {
    background: none;
    box-shadow: inset 0 0 0 1.5px #B25E09;
  }
  .card .dot {
    width: 10px;
    height: 10px;
  }
  .account-who {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .account-who > div {
    min-width: 0;
  }
  .account-who .account-name {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.3px;
  }
  .account-who .account-email {
    margin-top: 2px;
    font-size: 14px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .share-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }
  .share-head > div:first-child {
    flex: 1;
    min-width: 0;
    padding-top: 8px;
  }
  .share-head h2 {
    font-family: var(--font-sym);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.15;
  }
  .share-head .sheet-close {
    margin-top: 0;
  }
  .share-meta {
    margin-top: 4px;
    font-size: 13px;
    color: var(--muted);
  }
  .qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 14px;
  }
  .qr p {
    margin-top: 12px;
    font-size: 14px;
    color: var(--ink-2);
    text-align: center;
  }
  .qr-box {
    width: 268px;
    height: 268px;
    box-sizing: border-box;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid var(--line);
    background: #FFFFFF;
  }
  .share-url {
    margin-top: 18px;
    height: 48px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 6px 0 14px;
    border-radius: var(--radius);
    background: #F4F4F6;
  }
  .share-url span {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .share-url button {
    height: 36px;
    padding: 0 12px;
    border-radius: 9px;
    background: var(--paper);
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
  }
  .wide-button.send {
    margin-top: 10px;
  }
  .share-note {
    margin-top: 14px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.4;
    color: var(--muted);
  }
  .share-note svg {
    flex: none;
    margin-top: 1px;
  }
  .shared-strip {
    flex: none;
    height: 36px;
    padding: 0 16px 0 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--hair);
    font-size: 13px;
    color: #55555A;
  }
  .shared-strip > span:first-child {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .shared-strip .link-button {
    height: 36px;
    font-size: 15px;
  }
  .shared-strip .saved {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 15px;
    font-weight: 500;
    color: #1A7F37;
  }
  .sync-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px;
    font-size: 13px;
    color: #55555A;
  }
  .toast {
    position: fixed;
    left: 50%;
    top: 64px;
    translate: -50% 0;
    z-index: 60;
    padding: 10px 18px;
    border-radius: 20px;
    background: rgb(28 28 30 / 0.92);
    color: var(--paper);
    font-size: 14px;
    font-weight: 500;
    box-shadow: var(--shadow-float);
    pointer-events: none;
  }
  .search {
    height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border-radius: var(--radius);
    background: var(--fill);
    color: var(--muted);
  }
  .search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: none;
    color: var(--ink);
    font-size: 16px;
  }
  @media (min-width: 768px) {
    .tune-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 40px;
      padding: 8px 48px 40px;
    }
  }
  .tune-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    margin-left: 20px;
    padding: 10px 20px 10px 0;
    border-bottom: 1px solid var(--hair);
    color: var(--ink);
    text-decoration: none;
  }
  @media (min-width: 768px) {
    .tune-list a {
      min-height: 68px;
      margin: 0;
      padding-right: 0;
    }
  }
  .tune-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .tune-title,
  .tune-sub {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tune-title {
    font-size: 16px;
    font-weight: 600;
  }
  .tune-sub {
    font-size: 13px;
    color: var(--muted);
  }
  .tune-key {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-2);
    white-space: nowrap;
  }
}
@layer layout {
  .sheet-page,
  .editor-page {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
  }
  @media (min-width: 600px) {
    .sheet-page header.bar {
      height: 64px;
      padding: 0 20px 0 12px;
      border-bottom: 1px solid var(--hair);
    }
  }
  .sheet-title-small {
    display: none;
    font-size: 17px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 30vw;
  }
  @media (min-width: 600px) {
    .sheet-title-small {
      display: block;
      margin-right: 8px;
    }
  }
  .key-button {
    anchor-name: --key-picker;
    height: 34px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px 0 9px;
    border: 1px solid #E0E0E5;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    flex: none;
  }
  .key-button .marks {
    font-family: var(--font-sym);
    font-size: 15px;
    font-weight: 400;
  }
  .key-button svg {
    color: var(--muted);
    stroke-width: 2.6;
  }
  .meta {
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .key-picker {
    position-anchor: --key-picker;
    top: anchor(bottom);
    left: anchor(left);
    width: min(320px, calc(100vw - 32px));
    margin-top: 8px;
    padding: 6px 16px 14px;
  }
  .key-picker .group-label {
    padding-left: 0;
  }
  .key-picker .hint {
    margin-top: 10px;
  }
  .key-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
  }
  .key-grid button {
    height: 40px;
    border-radius: 10px;
    background: var(--fill);
    font-size: 15px;
    font-weight: 600;
  }
  .key-grid button:is(:is([aria-pressed=true], [aria-checked=true], .on)) {
    background: var(--select);
    color: var(--paper);
  }
  .more-button {
    anchor-name: --more-menu;
  }
  .more-menu {
    position-anchor: --more-menu;
    top: anchor(bottom);
    right: anchor(right);
    margin-top: 8px;
  }
  .sheet-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 16px 24px;
  }
  @media (min-width: 600px) {
    .sheet-scroll {
      padding: 20px 48px 120px;
    }
  }
  .piece-title {
    text-align: center;
    font-family: var(--font-sym);
    font-weight: 400;
    font-size: 30px;
    line-height: 1.1;
    padding-bottom: 4px;
  }
  @media (min-width: 600px) {
    .piece-title {
      font-size: 40px;
    }
  }
  .composer {
    text-align: right;
    font-family: var(--font-sym);
    font-size: 15px;
    color: var(--ink-2);
  }
  .sheet-body {
    padding-top: 10px;
  }
  .toolbar {
    flex: none;
    position: relative;
    z-index: 25;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px calc(14px + var(--safe-bottom));
    border-top: 1px solid var(--line);
    background: var(--paper);
  }
  .toolbar .views {
    flex: 1;
    border-radius: 12px;
  }
  .toolbar .views > button {
    height: 42px;
    border-radius: 10px;
  }
  @media (min-width: 600px) {
    .toolbar {
      position: absolute;
      left: 50%;
      bottom: calc(28px + var(--safe-bottom));
      translate: -50% 0;
      padding: 8px;
      border: none;
      border-radius: 16px;
      box-shadow: var(--shadow-float);
    }
    .toolbar .views {
      flex: none;
      width: 210px;
    }
  }
  .tool {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fill);
    color: var(--ink);
    flex: none;
  }
  .tool:is(:is([aria-pressed=true], [aria-checked=true], .on), [aria-expanded=true]),
  .tool.popover-trigger:has(+ :popover-open) {
    background: var(--ink);
    color: var(--paper);
  }
  .options {
    position-anchor: --sheet-options;
    right: anchor(right);
    bottom: anchor(top);
    width: min(380px, calc(100vw - 20px));
    margin-bottom: 8px;
  }
  .options .segmented {
    margin: 0 16px 6px;
  }
  .options .chips {
    padding: 6px 16px;
  }
  .options-button {
    anchor-name: --sheet-options;
  }
}
@layer component.base {
  .sheet {
    position: relative;
    color: var(--ink);
    font-family: var(--font-sym);
    line-height: 1;
  }
  .sheet > svg {
    position: absolute;
    inset: 0 auto auto 0;
    overflow: visible;
  }
  .sheet > div {
    position: absolute;
  }
  .staff line {
    stroke: var(--ink);
  }
  rect.ink {
    fill: var(--ink);
  }
  rect.playing {
    fill: var(--accent);
  }
  rect.cursor-bar {
    fill: var(--cursor-fill);
  }
  rect.caret {
    fill: var(--select);
  }
  rect.lyric-caret {
    fill: var(--accent);
  }
  rect.selection {
    fill: var(--select-fill);
    stroke: var(--select);
    stroke-width: 1.5;
  }
  path.tie {
    fill: none;
    stroke: var(--ink);
    stroke-linecap: round;
  }
  path.beam {
    fill: var(--ink);
    stroke: none;
  }
  g.music text {
    font-family: var(--font-music);
    fill: var(--ink);
  }
  g.music text.playing {
    fill: var(--accent);
  }
  .bar-number {
    color: var(--muted);
    font-family: var(--font-sym);
  }
  .section:not(.hit) {
    z-index: 4;
    min-width: calc(var(--sp) * 2.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 1.6px solid var(--ink);
    background: var(--paper);
  }
  .ending {
    border-left: 1.2px solid var(--ink);
    border-top: 1.2px solid var(--ink);
    padding: 2px 0 0 4px;
  }
  .figure {
    color: var(--muted);
  }
  .degree {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    padding-bottom: 2px;
  }
  .lyric {
    text-align: center;
    white-space: nowrap;
  }
  .degree.playing,
  .lyric.playing {
    color: var(--accent);
  }
  .tuplet {
    display: flex;
    align-items: flex-start;
  }
  .tuplet i {
    flex: 1;
    height: 100%;
    border-top: 1.1px solid var(--ink);
  }
  .tuplet i:first-child {
    border-left: 1.1px solid var(--ink);
  }
  .tuplet i:last-child {
    border-right: 1.1px solid var(--ink);
  }
  .tuplet span {
    padding: 0 3px;
    margin-top: -0.62em;
    line-height: 1.2;
  }
  .chord {
    display: flex;
    align-items: flex-start;
    white-space: nowrap;
  }
  .chord-text {
    display: inline-flex;
    align-items: flex-start;
    align-self: stretch;
  }
  .chord-text .q {
    font-size: 0.6em;
    margin-left: 1px;
  }
  .chord-text .tg {
    font-size: 0.72em;
    align-self: flex-end;
  }
  .chord-text .dim {
    font-family: "RN Marks", var(--font-sym);
    font-size: 0.95em;
    margin: 0.06em 0 0 1px;
  }
  .chord-text.alt {
    margin-left: 0.45em;
    color: var(--faint);
    font-size: 0.82em;
  }
  .fig {
    font-size: 0.55em;
    color: var(--muted);
    margin-left: 3px;
  }
  .frac {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-left: 3px;
    font-size: 0.55em;
    line-height: 1.05;
    color: var(--muted);
  }
  .frac span {
    padding: 0 2px;
  }
  .frac span + span {
    border-top: 1.3px solid var(--muted);
  }
  .bo {
    display: inline-flex;
    align-items: flex-end;
    align-self: stretch;
    margin-left: 3px;
    padding-left: 3px;
    border-left: 1.3px solid var(--muted);
    font-size: 0.55em;
    color: var(--muted);
  }
  .hit {
    position: absolute;
    z-index: 3;
    border-radius: 6px;
    background: transparent;
  }
  .hit.slot {
    z-index: 4;
    border-radius: 50%;
    color: rgb(17 17 17 / 0.28);
    font-family: var(--font-ui);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .lyrics-sheet {
    display: flex;
    flex-direction: column;
    gap: 22px;
    font-family: var(--font-sym);
    line-height: 1;
  }
  .lyrics-sheet section {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .section-box {
    align-self: flex-start;
    height: calc(var(--chord) * 1.1);
    min-width: calc(var(--chord) * 1.1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 1.6px solid var(--ink);
    font-size: calc(var(--chord) * 0.7);
  }
  .cells {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    row-gap: 14px;
  }
  .cell {
    display: flex;
    flex-direction: column;
    margin-right: 10px;
  }
  .cell-chords {
    height: calc(var(--chord) * 1.3);
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
    font-size: var(--chord);
  }
  .cell-chords .music {
    font-size: calc(var(--chord) * 1.1);
    line-height: 0.6;
    padding-top: 0.3em;
  }
  .cell-ending {
    font-size: 0.6em;
    color: var(--muted);
  }
  .cell-text {
    font-size: var(--lyric);
    line-height: 1.2;
    white-space: nowrap;
  }
  .cell-text .playing {
    color: var(--accent);
  }
}
@layer layout {
  .editor-head {
    height: 52px;
    padding: 6px 12px 4px 4px;
  }
  .pill {
    height: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 11px;
    border-radius: 9px;
    background: var(--fill);
    font-size: 13px;
    font-weight: 600;
  }
  .pill i {
    width: 1px;
    height: 14px;
    background: #C7C7CC;
  }
  .editor-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 16px 24px;
    border-top: 1px solid var(--hair);
  }
  @media (min-width: 600px) {
    .editor-scroll {
      padding: 8px 48px 24px;
    }
  }
  .title-fields {
    padding: 10px 0 12px;
    font-family: var(--font-sym);
  }
  .title-fields input {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    outline: none;
    font-family: inherit;
    color: var(--ink);
  }
  .title-input {
    text-align: center;
    font-size: 28px;
    line-height: 1.1;
  }
  .composer-input {
    margin-top: 4px;
    text-align: right;
    font-size: 15px;
    color: var(--ink-2) !important;
  }
  .editor-dock {
    flex: none;
    position: relative;
    background: var(--paper);
    padding-bottom: calc(16px + var(--safe-bottom));
  }
  .editor-nav {
    position: relative;
    z-index: 25;
    margin: 0 12px 8px;
    padding: 6px;
    border-radius: 16px;
    background: var(--paper);
    box-shadow: var(--shadow-float);
    display: flex;
    align-items: center;
    gap: 6px;
    translate: 0 -6px;
  }
  .add-button {
    anchor-name: --add-menu;
  }
  .add-menu {
    position-anchor: --add-menu;
    right: anchor(right);
    bottom: anchor(top);
    width: 230px;
    margin-bottom: 8px;
  }
  .nav-btn {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 10px;
    background: var(--fill);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .nav-btn:first-child,
  .nav-btn:nth-child(2) {
    width: 36px;
  }
  .nav-btn:is(:is([aria-pressed=true], [aria-checked=true], .on), [aria-expanded=true]),
  .nav-btn.popover-trigger:has(+ :popover-open) {
    background: var(--ink);
    color: var(--paper);
  }
  .nav-btn[data-dim] {
    opacity: 0.35;
  }
  .nav-field {
    flex: 1;
    min-width: 0;
    height: 40px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    background: var(--fill);
  }
  .nav-field .sep {
    width: 1px;
    height: 22px;
    background: #D5D5DB;
    flex: none;
  }
  .bar-no {
    flex: none;
    height: 40px;
    padding: 0 10px 0 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
  }
  .nav-chord {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 22px;
    line-height: 1;
  }
  .nav-chord.sym {
    font-size: 20px;
  }
  .nav-chord.empty {
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--faint);
  }
  .nav-chord .chord-text {
    align-self: center;
  }
  .editor-tools {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px 0;
    border-top: 1px solid var(--line);
  }
  .editor-tools .kb-settings {
    width: 300px;
    padding: 12px 14px 6px;
    border-radius: 16px;
  }
  .editor-tools .kb-settings .group-label {
    padding: 0 0 8px;
  }
  .editor-tools .kb-settings .segmented > button {
    height: 36px;
  }
  .editor-tools .kb-settings .switch-row {
    padding: 0;
    margin-top: 4px;
  }
  .keyboard-button {
    anchor-name: --keyboard-settings;
  }
  .kb-settings {
    position-anchor: --keyboard-settings;
    left: anchor(left);
    bottom: anchor(top);
    margin-bottom: 4px;
  }
  .tone-dot {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: var(--select);
  }
  .small-tool {
    width: 44px;
    height: 36px;
    border-radius: 9px;
    background: var(--fill);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .small-tool.wide {
    width: 50px;
  }
  .small-tool.on {
    background: var(--ink);
    color: var(--paper);
  }
  .small-tool.popover-trigger:has(+ :popover-open) {
    background: var(--ink);
    color: var(--paper);
  }
  .small-tool .music {
    font-size: 22px;
    line-height: 0;
  }
  .input-mode {
    flex: none;
    display: flex;
    padding: 2px;
    border-radius: 9px;
    background: var(--fill);
  }
  .input-mode button {
    width: 40px;
    height: 32px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #55555A;
    font-size: 14px;
    font-weight: 600;
  }
  .input-mode button.on {
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.14);
  }
  .lyrics-entry {
    position: relative;
    padding: 10px 12px 0;
  }
  .add-lang {
    anchor-name: --lang-menu;
  }
  .lang-menu {
    position-anchor: --lang-menu;
    left: anchor(left);
    bottom: anchor(top);
    width: 220px;
    margin-bottom: 4px;
  }
  .lyrics-langs {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
  }
  .lyrics-langs button {
    height: 30px;
    padding: 0 12px;
    border-radius: 15px;
    background: var(--fill);
    font-size: 13px;
    font-weight: 600;
  }
  .lyrics-langs button.on {
    background: var(--ink);
    color: var(--paper);
  }
  .lyrics-langs .add-lang {
    width: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .lyrics-langs .add-lang:has(+ :popover-open) {
    background: var(--ink);
    color: var(--paper);
  }
  .lyrics-pos {
    font-size: 12px;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .syllable-input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: none;
    border-radius: 12px;
    background: var(--fill);
    outline: none;
    font-family: var(--font-sym);
    font-size: 20px;
    color: var(--ink);
  }
  .syllable-input:disabled {
    opacity: 0.5;
  }
  .lyrics-hints {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--muted);
  }
  .lyrics-hints kbd {
    display: inline-block;
    min-width: 14px;
    margin-right: 5px;
    padding: 2px 6px;
    border-radius: 5px;
    background: var(--fill);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    text-align: center;
  }
  .length {
    display: flex;
    height: 36px;
    border-radius: 9px;
    background: var(--fill);
  }
  .length button {
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
  }
  .length button + button {
    border-left: 1px solid #D5D5DB;
  }
  .length [data-dim] {
    opacity: 0.35;
  }
  .durations {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
    padding: 8px 12px;
  }
  .durations button {
    position: relative;
    height: 44px;
    border-radius: 10px;
    background: var(--fill);
    font-weight: 500;
  }
  .durations button.on {
    background: var(--ink);
    color: var(--paper);
  }
  .durations button[data-dim] {
    opacity: 0.35;
  }
  .durations .music {
    font-size: 22px;
    line-height: 0;
    position: relative;
    top: 2px;
  }
  .durations sup {
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 12px;
    font-weight: 700;
  }
  .durations button > svg {
    display: block;
    margin: auto;
  }
  .piano {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding: 0 8px 2px;
  }
  .piano::-webkit-scrollbar {
    display: none;
  }
  .piano-keys {
    position: relative;
    height: 168px;
  }
  .piano button {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
  }
  .piano .white {
    width: 44px;
    height: 166px;
    gap: 6px;
    padding-bottom: 12px;
    border: 1px solid #D5D5DB;
    border-radius: 9px;
    background: var(--paper);
    box-shadow: inset 0 -3px 0 #E8E8EC;
  }
  .piano .white .lbl {
    font-size: 15px;
    font-weight: 500;
    min-height: 15px;
  }
  .piano .white .dot {
    width: 7px;
    height: 7px;
    border-radius: 4px;
    background: var(--select);
  }
  .piano .white .oct {
    position: absolute;
    top: 108px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    color: var(--faint);
  }
  .piano .white:active {
    background: var(--fill);
  }
  .piano .black {
    z-index: 1;
    width: 30px;
    height: 98px;
    gap: 4px;
    padding-bottom: 9px;
    border-radius: 7px;
    background: #1C1C1E;
    color: var(--paper);
  }
  .piano .black .lbl {
    font-size: 12px;
    font-weight: 600;
    min-height: 12px;
  }
  .piano .black .dot {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: #7FB2FF;
  }
  .piano .black:active {
    background: #3A3A3E;
  }
  .dot[hidden] {
    visibility: hidden;
    display: block;
  }
  .bottom-sheet {
    position: fixed;
    inset: auto 0 0;
    max-height: min(720px, 90dvh);
    overflow-y: auto;
    margin: auto auto 0;
    max-width: 560px;
    width: 100%;
    padding: 8px 16px calc(26px + var(--safe-bottom));
    border: none;
    border-radius: 20px 20px 0 0;
    background: var(--paper);
    box-shadow: 0 -10px 30px rgb(0 0 0 / 0.12);
  }
  .bottom-sheet .segmented {
    margin-top: 2px;
  }
  @media (min-width: 600px) {
    .bottom-sheet {
      inset: min(150px, 12dvh) 0 auto;
      margin: 0 auto;
      width: 390px;
      max-height: calc(100dvh - 2 * min(150px, 12dvh));
      padding-bottom: 26px;
      border-radius: 20px;
      box-shadow: 0 20px 60px rgb(0 0 0 / 0.22);
    }
    .bottom-sheet .grabber {
      height: 10px;
      margin: 0;
      visibility: hidden;
    }
  }
  .grabber {
    width: 36px;
    height: 5px;
    border-radius: 3px;
    background: #D1D1D6;
    margin: 0 auto 10px;
  }
  .sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  .sheet-head h2 {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.3px;
  }
  .sheet-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 18px 0 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--muted);
  }
  .sheet-label span + span {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    font-size: 13px;
  }
  .sheet-label.end {
    justify-content: flex-end;
  }
  .mini-keys {
    position: relative;
    height: 92px;
    margin-bottom: 12px;
  }
  .mini-keys button {
    position: absolute;
    top: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  .mini-keys .mw {
    height: 92px;
    padding-bottom: 9px;
    border: 1px solid #D5D5DB;
    border-radius: 8px;
    background: var(--paper);
    font-size: 14px;
    font-weight: 600;
  }
  .mini-keys .mb {
    z-index: 1;
    width: 34px;
    height: 54px;
    padding-bottom: 6px;
    border-radius: 6px;
    background: #1C1C1E;
    color: var(--paper);
    font-size: 11px;
    font-weight: 700;
  }
  .mini-keys :is(.mw, .mb).on {
    background: var(--select);
    border-color: var(--select);
    color: var(--paper);
  }
  .meter-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 40px 24px minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    height: 44px;
    padding: 2px;
    border-radius: var(--radius);
    background: var(--fill);
    font-variant-numeric: tabular-nums;
  }
  .meter-row > * {
    text-align: center;
  }
  .meter-row > span {
    font-size: 17px;
    font-weight: 600;
  }
  .meter-row button {
    height: 40px;
    border-radius: 10px;
    font-size: 17px;
    color: #3C3C43;
  }
  .meter-row button.on {
    background: var(--paper);
    color: var(--ink);
    font-weight: 600;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.14);
  }
  .meter-row .slash {
    font-size: 20px;
    font-weight: 300;
    color: var(--faint);
  }
  .chord-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 2px 0 16px;
  }
  .chord-head .compact > button {
    min-width: 48px;
    height: 30px;
    padding: 0 10px;
    font-size: 16px;
  }
  .chord-preview {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
    white-space: nowrap;
    overflow: hidden;
    font-size: 30px;
    line-height: 1.1;
  }
  .chord-preview .preview-sub {
    color: var(--faint);
    display: inline-flex;
  }
  .chord-preview .placeholder {
    color: var(--faint);
    font-family: var(--font-sym);
  }
  .degrees {
    position: relative;
    height: 110px;
  }
  .degrees .deg {
    position: absolute;
    width: calc(100% / 7 - 4px);
    height: 52px;
    border-radius: 10px;
    background: var(--fill);
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 1px;
    white-space: nowrap;
    line-height: 52px;
    font-size: 20px;
  }
  .degrees .deg small {
    font-size: 13px;
    line-height: 1;
  }
  .degrees .deg.chromatic {
    background: #F5F5F7;
    color: var(--muted);
    font-size: 17px;
  }
  .degrees .deg.on {
    background: var(--ink);
    color: var(--paper);
  }
  .families {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }
  .families button {
    height: 50px;
    padding: 0 10px;
    border-radius: var(--radius);
    background: var(--fill);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    text-align: left;
    overflow: hidden;
  }
  .families button.on {
    background: var(--ink);
    color: var(--paper);
  }
  .families button:disabled {
    opacity: 0.45;
    cursor: default;
  }
  .families button .sym {
    font-size: 16px;
    line-height: 1;
    white-space: nowrap;
  }
  .families .fam-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
  }
  .families i {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    flex: none;
  }
  .bottom-sheet .chips > button.sym {
    font-size: 17px;
    font-weight: 400;
  }
  .bar-preview {
    position: relative;
    height: 92px;
    margin: 2px 0 14px;
    border-radius: 14px;
    background: #F7F7F9;
  }
  .bar-preview .pv-staff {
    position: absolute;
    left: 44px;
    right: 44px;
    top: 38px;
    height: 33px;
    background:
      repeating-linear-gradient(
        to bottom,
        #B8B8BE 0 1px,
        transparent 1px 8px);
  }
  .bar-preview .pv-left,
  .bar-preview .pv-right {
    position: absolute;
    top: 38px;
    width: 14px;
    height: 33px;
  }
  .bar-preview .pv-left {
    left: 44px;
    border-left: 1.4px solid var(--ink);
  }
  .bar-preview .pv-left.repeat {
    border-left-width: 3px;
    box-shadow: 5px 0 0 -3.6px var(--ink);
  }
  .bar-preview .pv-right {
    right: 44px;
    border-right: 1.4px solid var(--ink);
  }
  .bar-preview .pv-right.double {
    box-shadow: inset -5px 0 0 -3.6px var(--ink);
  }
  .bar-preview .pv-right:is(.final, .repeat) {
    border-right-width: 3.6px;
    box-shadow: inset -6px 0 0 -4.6px var(--ink);
  }
  .bar-preview .pv-ending {
    position: absolute;
    left: 46px;
    top: 14px;
    width: 120px;
    height: 16px;
    padding: 1px 0 0 4px;
    border-left: 1.4px solid var(--ink);
    border-top: 1.4px solid var(--ink);
    font-family: var(--font-sym);
    font-size: 13px;
  }
  .bar-preview .pv-label {
    position: absolute;
    left: 0;
    right: 0;
    top: 76px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--faint);
  }
  .barline-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 8px;
  }
  .barline-row .sheet-label {
    margin-top: 0;
  }
  .barline-opts {
    display: flex;
    gap: 5px;
  }
  .barline-opt {
    position: relative;
    width: 48px;
    height: 44px;
    border-radius: 10px;
    background: var(--fill);
  }
  .barline-opt i {
    position: absolute;
    top: 12px;
    height: 20px;
    width: 0;
    background: currentColor;
  }
  .barline-opt.on {
    background: var(--ink);
    color: var(--paper);
  }
  .barline-opt.single i:nth-child(1) {
    left: 23px;
    width: 1.8px;
  }
  .barline-opt.double i:nth-child(1) {
    left: 20px;
    width: 1.8px;
  }
  .barline-opt.double i:nth-child(2) {
    left: 25.5px;
    width: 1.8px;
  }
  .barline-opt.rep-start i:nth-child(1) {
    left: 16px;
    width: 3.6px;
  }
  .barline-opt.rep-start i:nth-child(2) {
    left: 22px;
    width: 1.6px;
  }
  .barline-opt.rep-start i:nth-child(3),
  .barline-opt.rep-start i:nth-child(4) {
    left: 27px;
    width: 3px;
    height: 3px;
    border-radius: 2px;
  }
  .barline-opt.rep-start i:nth-child(3),
  .barline-opt.rep-end i:nth-child(3) {
    top: 18px;
  }
  .barline-opt.rep-start i:nth-child(4),
  .barline-opt.rep-end i:nth-child(4) {
    top: 23px;
  }
  .barline-opt.rep-end i:nth-child(1) {
    left: 23px;
    width: 1.6px;
  }
  .barline-opt.rep-end i:nth-child(2) {
    left: 28px;
    width: 3.6px;
  }
  .barline-opt.rep-end i:nth-child(3),
  .barline-opt.rep-end i:nth-child(4) {
    left: 17px;
    width: 3px;
    height: 3px;
    border-radius: 2px;
  }
  .barline-opt.final i:nth-child(1) {
    left: 19px;
    width: 1.6px;
  }
  .barline-opt.final i:nth-child(2) {
    left: 24.5px;
    width: 3.8px;
  }
  .field {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: none;
    border-radius: 11px;
    background: var(--fill);
    font-size: 16px;
    outline: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .switch,
  .switch::after {
    transition: none;
  }
  .popover,
  .bottom-sheet,
  .bottom-sheet::backdrop {
    transition-duration: 0s;
  }
}
/*# sourceMappingURL=style.css.map */