@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-variable.woff2?v=20260828-09") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-024F,U+1E00-1EFF,U+2000-206F,U+20A0-20CF,U+2100-214F,U+2190-21FF,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  color-scheme: light;
  --brand-deep: #154653;
  --brand-mid: #1b6071;
  --brand-active: #176f87;
  --brand-cyan: #2b8da7;
  --surface-page: #eaf0f2;
  --surface-ui: #f2f6f7;
  --surface-muted: #e7eef0;
  --surface-raised: #fbfcfc;
  --line-soft: #cbd7dc;
  --line-strong: #b9c9cf;
  --text-main: #1b3039;
  --text-muted: #536a74;
  --shadow-soft: 0 1px 3px rgba(20,44,54,.09);
  --shadow-panel: -6px 0 28px rgba(14,35,44,.2);
  --gradient-brand: linear-gradient(180deg,#2b8fa8 0%,var(--brand-active) 100%);
  --gradient-brand-strong: var(--gradient-brand);
  --gradient-brand-deep: linear-gradient(180deg,var(--brand-mid) 0%,var(--brand-deep) 100%);
  --shadow-brand: 0 2px 5px rgba(14,73,94,.2),inset 0 1px rgba(255,255,255,.17);
  font-family:
    "Inter",
    "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Noto Sans JP",
    sans-serif;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  min-inline-size: 320px;
  min-block-size: 100%;
  background: var(--surface-page);
}

body {
  min-block-size: 100%;
  margin: 0;
  overflow-x: hidden;
  color: var(--text-main);
  background: linear-gradient(180deg,#f0f4f5 0,var(--surface-page) 100%);
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
}

button,
input { font: inherit; }

button { -webkit-tap-highlight-color: transparent; }

:where(button, select, input[type="range"]):enabled:not([aria-disabled="true"]) {
  cursor: pointer;
}

:where(.tuning-setting, .volume-control):has(:enabled:not([aria-disabled="true"])) {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible {
  outline: 2px solid #67b8d5;
  outline-offset: 2px;
}

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

.promo-banner {
  padding: 12px;
  border-block-start: 1px solid #d7e1e5;
  background: #eef3f5;
}

.feature-promo-unit {
  position: relative;
  display: grid;
  place-items: center;
  gap: 7px;
  min-block-size: 98px;
  padding: 16px 12px;
  border: 1px solid rgba(27,38,49,.09);
  border-radius: 9px;
  color: var(--text-main);
  background: rgba(255,255,255,.64);
  text-decoration: none;
}

.promo-label {
  position: absolute;
  inset-block-start: 6px;
  inset-inline-end: 7px;
  color: #627680;
  font-size: 9px;
  font-weight: 750;
}

.promo-button {
  inline-size: min(100%,288px);
  min-block-size: 38px;
  padding: 10px 18px;
  border-radius: 24px;
  color: #fff;
  background: var(--gradient-brand);
  box-shadow: 0 3px 9px rgba(19,86,105,.18),inset 0 1px rgba(255,255,255,.14);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
  text-align: center;
}

.feature-promo-unit small {
  color: #647881;
  font-size: 10px;
  line-height: 1.4;
}

.feature-promo-unit:hover { background: rgba(255,255,255,.84); }
.feature-promo-unit:active .promo-button { transform: scale(.98); }
.feature-promo-unit:focus-visible,
.virtual-help a:focus-visible,
.virtual-help summary:focus-visible { outline: 2px solid #67b8d5; outline-offset: 2px; }

.virtual-help {
  --help-border: #d8e2e7;
  padding: 24px 12px 0;
  border-block-start: 1px solid var(--help-border);
  color: var(--text-main);
  background: #f4f7f8;
}

.virtual-help__header { margin-block-end: 12px; }
.virtual-help__header h2 {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}
.virtual-help__header p {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.65;
}

.virtual-help__items { display: grid; gap: 8px; }
.virtual-help__item {
  overflow: clip;
  border: 1px solid var(--help-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(23,42,50,.06);
}
.virtual-help__item summary {
  position: relative;
  display: grid;
  align-items: center;
  min-block-size: 44px;
  padding: 11px 40px 11px 14px;
  cursor: pointer;
  list-style: none;
}
.virtual-help__item summary::-webkit-details-marker { display: none; }
.virtual-help__item summary::marker { content: ""; }
.virtual-help__item summary::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 16px;
  inline-size: 7px;
  block-size: 7px;
  border-inline-end: 2px solid var(--brand-cyan);
  border-block-end: 2px solid var(--brand-cyan);
  transform: translateY(-65%) rotate(45deg);
}
.virtual-help__item[open] summary { border-block-end: 1px solid var(--help-border); }
.virtual-help__item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.virtual-help__item h3 { margin: 0; font-size: 13px; line-height: 1.5; }
.virtual-help__panel {
  padding: 13px 12px;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.65;
}
.virtual-help__panel p { margin: 0; }
.virtual-help__panel p + p { margin-block-start: 12px; }
.keyboard-map {
  inline-size: min(100%,306px);
  margin: 12px auto 0;
  padding: 8px 8px 7px;
  border: 1px solid var(--help-border);
  border-radius: 8px;
  color: #314a54;
  background: linear-gradient(180deg,#f7fafb,#edf3f5);
}
.keyboard-map__row {
  display: grid;
  grid-template-columns: repeat(10,minmax(0,1fr));
  gap: 2px;
  inline-size: calc(100% - 14px);
}
.keyboard-map__row + .keyboard-map__row { margin-block-start: 3px; }
.keyboard-map__row--numbers {
  grid-template-columns: repeat(9,minmax(0,1fr));
  inline-size: calc(90% - 4px);
  margin-block-end: 6px;
  margin-inline-start: 1px;
}
.keyboard-map__row--home { margin-inline-start: 7px; }
.keyboard-map__row--bottom { margin-inline-start: 14px; }
.keyboard-map__row span {
  display: grid;
  place-items: center;
  min-inline-size: 0;
  block-size: 22px;
  border: 1px solid #c8d5da;
  border-block-end-color: #b4c5cb;
  border-radius: 4px;
  color: #29434d;
  background: linear-gradient(180deg,#fff 0%,#f5f8f9 74%,#e4ecef 100%);
  box-shadow: 0 1px 0 #fff inset,0 2px 2px rgba(22,48,58,.1);
  font: 700 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
}
.keyboard-map__row--numbers span {
  color: #176d87;
  background: linear-gradient(180deg,#f7fdff,#e7f4f7);
}
.keyboard-map figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 12px;
  margin-block-start: 7px;
  color: #647b84;
  font-size: 10px;
  line-height: 1.45;
}
.virtual-help__steps {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  counter-reset: virtual-help-step;
  list-style: none;
}
.virtual-help__steps li {
  display: grid;
  grid-template-columns: 24px minmax(0,1fr);
  gap: 9px;
  align-items: start;
  counter-increment: virtual-help-step;
}
.virtual-help__steps li::before {
  content: counter(virtual-help-step);
  display: grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  border-radius: 50%;
  color: #fff;
  background: var(--brand-active);
  font-size: 11px;
  font-weight: 750;
}
.virtual-help__steps li div { display: grid; gap: 1px; }
.virtual-help__steps strong { color: var(--text-main); font-size: 12.5px; }
.virtual-help__steps span { font-size: 12px; }

.virtual-help__related-heading {
  margin: 22px 2px 0;
  color: var(--text-main);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
}

.virtual-help__related {
  display: grid;
  margin-block-start: 9px;
  border-block: 1px solid var(--help-border);
}
.virtual-help__related a {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  min-block-size: 44px;
  padding-inline: 14px;
  border-block-end: 1px solid var(--help-border);
  color: var(--text-main);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
}
.virtual-help__related a:last-child { border-block-end: 0; }
.virtual-help__related a::after { content: "›"; color: var(--brand-cyan); font-size: 17px; }

.tool-notice {
  padding: 16px 12px 0;
  color: #6b7e87;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.65;
  text-align: center;
}

.tool-notice p { margin: 0; }
.tool-notice p + p { margin-block-start: 2px; }
.tool-notice a {
  display: inline-block;
  margin-block-start: 4px;
  color: var(--brand-active);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}

.tool-footer {
  padding-block: 6px 24px;
  color: #758695;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}

.tool-footer__copyright { margin: 0; }
.tool-footer__copyright a { color: inherit; text-decoration: none; }

.page-shell {
  inline-size: min(100%,760px);
  min-block-size: 100dvh;
  margin-inline: auto;
  padding: 0;
}

.guitar-tool {
  --shell-inline-gutter: 12px;
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 0;
  inline-size: 100%;
  min-block-size: 0;
  background: var(--surface-ui);
  box-shadow: 0 2px 12px rgba(20,44,54,.08);
}

.tool-intro {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  min-block-size: 64px;
  padding: 11px var(--shell-inline-gutter);
  color: #f5fbfc;
  background: var(--gradient-brand-deep);
  box-shadow: inset 0 -1px rgba(5,27,34,.48),inset 0 1px rgba(255,255,255,.07);
}

.tool-intro h1 {
  grid-column: 1;
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: .01em;
}

.tool-lead {
  display: grid;
  align-items: center;
  min-block-size: 52px;
  margin: 0;
  padding: 8px 12px 9px;
  border-block-end: 1px solid var(--line-soft);
  color: #49616b;
  background: #eef3f4;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.35;
  white-space: normal;
}

.section-toolbar {
  display: grid;
  grid-template-columns: minmax(200px,420px) minmax(76px,1fr) 52px;
  gap: 4px;
  min-block-size: 54px;
  margin: 0;
  padding-block: 5px;
  padding-inline: 6px var(--shell-inline-gutter);
  border-block-end: 1px solid var(--line-soft);
  background: linear-gradient(180deg,var(--surface-raised),var(--surface-muted));
  box-shadow: inset 0 1px rgba(255,255,255,.9);
}

.section-toolbar:has(.clear-button[hidden]) {
  grid-template-columns: minmax(240px,250px);
  justify-content: start;
}

.mode-control {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 2px;
  min-inline-size: 0;
  padding: 1px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: #dfe8eb;
  box-shadow: inset 0 1px 2px rgba(21,44,54,.08);
}

.mode-control button,
.clear-button {
  min-block-size: 42px;
  padding-inline: 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #52666f;
  background: transparent;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
}

.mode-control button[aria-pressed="true"] {
  border-color: #145f74;
  color: #f6fcfe;
  background: var(--gradient-brand-strong);
  box-shadow: var(--shadow-brand);
}

.settings-toggle {
  grid-column: 2;
  min-block-size: 40px;
  padding-inline: 12px;
  border: 1px solid rgba(211,238,244,.28);
  border-radius: 7px;
  color: rgba(242,251,253,.9);
  background: rgba(6,35,44,.22);
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.clear-button {
  grid-column: 3;
  border-color: var(--line-soft);
  color: #536971;
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft),inset 0 1px rgba(255,255,255,.8);
}

.form-strum-button {
  grid-column: 2;
  justify-self: end;
  min-inline-size: 74px;
  min-block-size: 38px;
  padding-inline: 10px;
  border: 1px solid #3a829a;
  border-radius: 6px;
  color: #f7fcfd;
  background: var(--gradient-brand-strong);
  box-shadow: var(--shadow-brand);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.form-strum-button[hidden] { display: none; }

.fretboard-panel {
  --board-height: 190px;
  --row-height: 29px;
  --string-edge-padding: 8px;
  --stage-gutter: 8px;
  --numbers-height: 36px;
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: calc(var(--board-height) + var(--stage-gutter) * 2 + var(--numbers-height));
  overflow: hidden;
  background: #10171b;
}

.fret-scroll {
  inline-size: 100%;
  block-size: calc(var(--board-height) + var(--stage-gutter) * 2 + var(--numbers-height));
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  background: #10171b;
}

.fret-scroll::-webkit-scrollbar { display: none; }

.fret-track {
  display: grid;
  grid-template-rows: var(--stage-gutter) var(--board-height) var(--stage-gutter) var(--numbers-height);
  inline-size: var(--track-width);
  min-inline-size: var(--track-width);
  block-size: calc(var(--board-height) + var(--stage-gutter) * 2 + var(--numbers-height));
}

.fret-track.is-lefty { transform: scaleX(-1); }

.fret-track.is-lefty .fret-choice::after,
.fret-track.is-lefty .open-string-choice::after {
  transform: translate(-50%,-50%) scaleX(-1);
}

.fret-track.is-lefty .fret-numbers span { transform: scaleX(-1); }

.fretboard {
  grid-row: 2;
  position: relative;
  display: grid;
  grid-template-rows: repeat(var(--string-count,6),var(--row-height));
  inline-size: var(--track-width);
  block-size: var(--board-height);
  padding-block: var(--string-edge-padding);
  overflow: hidden;
  background: #1b110d;
  box-shadow: inset 0 5px 10px rgba(0,0,0,.42),inset 0 -5px 10px rgba(0,0,0,.5);
  touch-action: none;
}

.fretboard-visual {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}

.fretboard-surface,
.fretboard-vibration,
.fretboard-expression {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
}

.board-wood { fill: url(#wood); }
.board-grain { pointer-events: none; }
.board-depth {
  fill: #100906;
  opacity: .96;
  transform: translateY(3px);
}
.board-bevel { fill: url(#boardBevel); }
.board-top-glint {
  fill: none;
  stroke: rgba(255,229,207,.22);
  stroke-linecap: round;
  stroke-width: 1.2;
}
.board-bottom-edge {
  fill: none;
  stroke: rgba(5,3,2,.72);
  stroke-linecap: round;
  stroke-width: 3.2;
}
.board-head {
  fill: url(#headWood);
}
.board-head-grain {
  fill: url(#headGrain);
  opacity: .11;
}
.head-grain-line {
  fill: none;
  stroke: rgba(215,210,204,.3);
  stroke-linecap: round;
  stroke-width: .55;
}
.board-head-highlight {
  fill: none;
  stroke: rgba(255,255,255,.055);
  stroke-linecap: round;
  stroke-width: 1;
}
.board-head-edge {
  fill: none;
  stroke: rgba(4,5,5,.34);
  stroke-linecap: round;
  stroke-width: 1.2;
}
.grain-light,
.grain-dark {
  fill: none;
}
.board-nut-shadow { fill: rgba(20,13,9,.38); }
.board-nut { fill: url(#nut); stroke: none; }
.board-nut-shine { stroke: rgba(255,255,255,.48); stroke-width: .8; }
.board-nut-edge { stroke: rgba(68,57,46,.7); stroke-width: .9; }
.board-nut-slots { fill: none; stroke: rgba(74,63,52,.38); stroke-width: .7; stroke-linecap: round; }
.grain-light { stroke: #a67a5c; stroke-width: .65; opacity: .13; }
.grain-dark { stroke: #120b08; stroke-width: 1.05; opacity: .24; }
.grain-pore {
  fill: #140c09;
  opacity: .38;
}
.board-inlay {
  fill: #9b917f;
  stroke: rgba(45,32,24,.46);
  stroke-width: 1;
  opacity: .68;
  filter: drop-shadow(0 1px .6px rgba(24,15,10,.34));
}
.fret-shadow { stroke: #130c09; stroke-width: 5.8; stroke-linecap: round; opacity: .58; }
.fret-wire { stroke: #6d7779; stroke-width: 4.2; stroke-linecap: round; }
.fret-shine { stroke: #eef3f2; stroke-width: 1.1; stroke-linecap: round; opacity: .76; }
.string-shadow { fill: none; stroke: #1c120d; opacity: .65; }
.string-metal { fill: none; stroke: #b4bec0; }
.string-winding {
  fill: none;
  stroke: rgba(55,46,40,.48);
  stroke-dasharray: .9 1.3;
  stroke-linecap: butt;
}
.string-shine { fill: none; stroke: #fff; stroke-width: .65; opacity: .88; }
[data-surface-string] { transition: opacity 18ms linear; }
[data-surface-string].is-bent,
[data-surface-string].is-contacted { opacity: 0; }

.fretboard-vibration { z-index: 2; overflow: visible; }
.fretboard-vibration path {
  fill: none;
  stroke: #b4bec0;
  stroke-linecap: round;
  opacity: 0;
  filter: drop-shadow(0 1px .5px rgba(10,7,5,.64));
  vector-effect: non-scaling-stroke;
}
.fretboard-vibration path.is-active { opacity: .96; }

.fretboard-expression { z-index: 2; overflow: visible; }
.fretboard-expression [data-expression-string] {
  opacity: 0;
}
.fretboard-expression path {
  fill: none;
  stroke-linecap: round;
}
.fretboard-expression .expression-string-shadow { stroke: #1c120d; opacity: .65; }
.fretboard-expression .expression-string-metal { stroke: #b4bec0; }
.fretboard-expression .expression-string-winding {
  stroke: rgba(55,46,40,.48);
  stroke-dasharray: .9 1.3;
  stroke-linecap: butt;
}
.fretboard-expression .expression-string-shine { stroke: #fff; stroke-width: .65; opacity: .88; }
.fretboard-expression [data-expression-string].is-active { opacity: 1; }
.fretboard-vibration path.is-expression-suppressed { opacity: 0; }

.fretboard-row {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: var(--fret-columns);
  inline-size: var(--track-width);
  block-size: var(--row-height);
  min-block-size: var(--row-height);
  padding-inline: var(--nut-width) var(--tail-width);
}

.fret-choice,
.open-string-choice {
  position: relative;
  display: grid;
  place-items: center;
  min-inline-size: 0;
  block-size: var(--row-height);
  min-block-size: var(--row-height);
  padding: 0;
  border: 0;
  outline: none;
  color: transparent;
  background: transparent;
  appearance: none;
  cursor: pointer;
  user-select: none;
  touch-action: none;
}

.open-string-choice {
  position: absolute;
  z-index: 4;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: var(--nut-width);
}

.fret-choice:focus-visible,
.open-string-choice:focus-visible {
  outline: 2px solid #8bd9f5;
  outline-offset: -3px;
}

.fret-choice > span,
.open-string-choice > span {
  display: block;
  inline-size: 0;
  block-size: 0;
  border-radius: 50%;
  transform: translateY(var(--expression-marker-offset,0));
  pointer-events: none;
  will-change: transform;
}

.fret-choice[aria-pressed="true"] > span,
.open-string-choice[aria-pressed="true"] > span,
.fret-choice.is-sounding > span {
  inline-size: 20px;
  block-size: 20px;
  border: 1px solid rgba(164,218,226,.82);
  background: var(--gradient-brand-strong);
  box-shadow: var(--shadow-brand);
}

.fret-choice[aria-pressed="true"] > span,
.open-string-choice[aria-pressed="true"] > span {
  border-color: rgba(190,229,235,.9);
  box-shadow: 0 1px 2px rgba(5,29,37,.4),inset 0 1px rgba(255,255,255,.22);
}

.fret-choice::after {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  color: rgba(238,247,249,.5);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,.9);
  transform: translate(-50%,-50%);
  opacity: 0;
  content: attr(data-note);
  pointer-events: none;
}

.open-string-choice::after {
  position: absolute;
  z-index: 2;
  inset-block-start: 50%;
  inset-inline-start: calc(var(--nut-width) / 2);
  display: grid;
  place-items: center;
  inline-size: 21px;
  block-size: 17px;
  border: 0;
  border-radius: 3px;
  color: rgba(218,233,235,.86);
  background: rgba(13,34,40,.62);
  box-shadow: inset 0 0 0 1px rgba(174,207,213,.13);
  font-size: 9px;
  font-weight: 760;
  letter-spacing: .02em;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(0,0,0,.38);
  transform: translate(-50%,-50%);
  content: attr(data-note);
  pointer-events: none;
}

.open-string-choice > span { display: none; }

.open-string-choice[aria-pressed="true"]::after {
  color: #173b46;
  background: linear-gradient(180deg,rgba(240,246,243,.96),rgba(189,211,211,.94));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55),0 1px 3px rgba(0,0,0,.35);
}

.open-string-choice.is-sounding:not([aria-pressed="true"])::after {
  color: #eaf8fa;
  background: rgba(23,111,135,.82);
  box-shadow: inset 0 0 0 1px rgba(193,229,235,.32),0 1px 3px rgba(0,0,0,.3);
}

.fret-choice.is-sounding:not([aria-pressed="true"]) > span {
  animation: sounding-marker 1.3s ease-out forwards;
}

.open-string-choice.is-sounding:not([aria-pressed="true"])::after {
  animation: sounding-open-label 1.3s ease-out forwards;
}

@keyframes sounding-marker {
  0%,38% { opacity: 1; filter: brightness(1.12); }
  100% { opacity: .18; filter: brightness(.92); }
}

@keyframes sounding-open-label {
  0%,38% { opacity: 1; }
  100% { opacity: .5; }
}

.show-note-overlay .fret-choice::after { opacity: 1; }

.show-note-overlay .fret-choice[aria-pressed="true"]::after,
.show-note-overlay .fret-choice.is-sounding::after { color: #fff; opacity: .94; }

.fret-numbers {
  grid-row: 4;
  display: grid;
  grid-template-columns: var(--fret-columns);
  inline-size: var(--track-width);
  block-size: var(--numbers-height);
  padding-inline: var(--nut-width) var(--tail-width);
  border-block-start: 1px solid #c8d5da;
  color: #5d727b;
  background: #f1f5f7;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.fret-numbers span {
  display: grid;
  place-items: center end;
  min-inline-size: 0;
  padding-inline-end: 7px;
  font-size: 9px;
  font-weight: 650;
}

.fret-numbers span.is-octave { color: #176985; }

.fret-numbers span.is-clipped { visibility: hidden; }

.fret-page-button {
  position: absolute;
  z-index: 4;
  inset-block-end: 0;
  inline-size: 24px;
  block-size: var(--numbers-height);
  padding: 0;
  border: 0;
  color: #315c6b;
  background: transparent;
  box-shadow: none;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}

.fret-page-button.is-previous {
  inset-inline-start: 0;
}

.fret-page-button.is-next {
  inset-inline-end: 0;
}

.fret-page-button:disabled {
  visibility: hidden;
  pointer-events: none;
}

.keyboard-bank-feedback {
  position: absolute;
  z-index: 7;
  inset-block-start: calc(var(--stage-gutter) + 7px);
  inset-inline-end: 10px;
  min-block-size: 28px;
  padding: 7px 10px;
  border: 1px solid rgba(152,203,215,.34);
  border-radius: 7px;
  color: rgba(239,249,251,.95);
  background: rgba(13,48,59,.82);
  box-shadow: 0 2px 7px rgba(4,20,25,.24),inset 0 1px rgba(255,255,255,.08);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 120ms ease,transform 120ms ease;
  pointer-events: none;
}

.keyboard-bank-feedback.is-visible { opacity: 1; transform: translateY(0); }
.keyboard-bank-feedback[hidden] { display: none; }

.instrument-feedback {
  position: absolute;
  z-index: 8;
  inset-block-start: calc(var(--stage-gutter) + 12px);
  inset-inline-start: 50%;
  max-inline-size: min(88%,310px);
  padding: 8px 11px;
  border: 1px solid rgba(152,203,215,.34);
  border-radius: 7px;
  color: rgba(239,249,251,.96);
  background: rgba(13,48,59,.88);
  box-shadow: 0 2px 8px rgba(4,20,25,.28),inset 0 1px rgba(255,255,255,.08);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  transform: translate(-50%,-3px);
  transition: opacity 140ms ease,transform 140ms ease;
  pointer-events: none;
}

.instrument-feedback[data-tone="error"] {
  border-color: rgba(230,181,154,.42);
  background: rgba(81,42,31,.92);
}

.instrument-feedback.is-visible { opacity: 1; transform: translate(-50%,0); }
.instrument-feedback[hidden] { display: none; }

.fretboard-row.is-keyboard-bank {
  background: linear-gradient(90deg, transparent 0, rgba(56,151,177,.065) 12%, rgba(56,151,177,.065) 88%, transparent 100%);
}

.guitar-settings {
  display: grid;
  grid-auto-rows: max-content;
  gap: 2px;
  padding: 8px 10px 14px;
  overflow: visible;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft);
}

.string-count-setting,
.tuning-setting {
  display: grid;
  grid-template-columns: 76px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  min-block-size: 48px;
  padding: 5px 2px;
  color: #425b66;
  font-size: 11px;
  font-weight: 750;
}

.string-count-toggle {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  padding: 2px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-muted);
}

.string-count-toggle button {
  min-block-size: 34px;
  padding-inline: 6px;
  border: 0;
  border-radius: 6px;
  color: var(--text-muted);
  background: transparent;
  font-size: 11px;
  font-weight: 800;
}

.string-count-toggle button[aria-pressed="true"] {
  color: #f7fcfd;
  background: var(--gradient-brand);
  box-shadow: var(--shadow-brand);
}

.tuning-setting select {
  min-inline-size: 0;
  min-block-size: 38px;
  padding-inline: 9px 28px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  color: var(--text-main);
  background: #fff;
  font: inherit;
}

.tuning-setting small {
  grid-column: 2;
  margin-block-start: -3px;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .025em;
}

.volume-control {
  display: grid;
  grid-template-columns: 76px minmax(0,1fr);
  align-items: center;
  gap: 10px;
  min-inline-size: 0;
  min-block-size: 48px;
  padding: 7px 2px;
  border: 0;
  border-radius: 0;
  color: #425b66;
  background: transparent;
  box-shadow: none;
  font-size: 12px;
  font-weight: 800;
}

.chord-grid.is-unavailable {
  display: block;
}

.chord-unavailable {
  display: grid;
  place-items: center;
  inline-size: 100%;
  min-block-size: 48px;
  margin: 0;
  padding-inline: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  color: #175f76;
  background: linear-gradient(180deg,#fff 0,#edf4f6 100%);
  box-shadow: 0 2px 7px rgba(19,59,72,.08),inset 0 1px rgba(255,255,255,.9);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}

.chord-unavailable:hover { border-color: #9fc4d0; background: #f7fbfc; }
.chord-unavailable:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(19,59,72,.1); }

.pads-controls button:disabled,
.key-picker-sheet button:disabled {
  cursor: not-allowed;
  opacity: .46;
}

.volume-control input {
  inline-size: 100%;
  min-block-size: 36px;
  margin: 0;
  accent-color: #207b9b;
}

.settings-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-start: auto;
  inset-inline-end: var(--drawer-inline-end,0px);
  inline-size: min(84%,320px);
  block-size: 100dvh;
  max-inline-size: none;
  max-block-size: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-start-start-radius: 18px;
  border-end-start-radius: 18px;
  color: var(--text-main);
  background: transparent;
  box-shadow: var(--shadow-panel);
  opacity: 0;
  transform: translateX(100%);
  transition: opacity .24s ease,transform .34s cubic-bezier(.2,0,0,1),display .34s allow-discrete,overlay .34s allow-discrete;
}

.settings-drawer[open] {
  opacity: 1;
  transform: translateX(0);
}

@starting-style {
  .settings-drawer[open] {
    opacity: 0;
    transform: translateX(100%);
  }
}

.settings-drawer::backdrop {
  background: rgba(8,22,28,.4);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.key-picker-sheet {
  position: fixed;
  inset: auto 0 0;
  inline-size: min(100%,760px);
  max-inline-size: none;
  max-block-size: min(78dvh,520px);
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 18px 18px 0 0;
  color: var(--text-main);
  background: transparent;
  box-shadow: 0 -16px 44px rgba(8,22,28,.2);
  opacity: 0;
  transform: translateY(100%);
  transition: opacity .2s ease,transform .3s cubic-bezier(.2,0,0,1),display .3s allow-discrete,overlay .3s allow-discrete;
}

.key-picker-sheet[open] {
  opacity: 1;
  transform: translateY(0);
}

@starting-style {
  .key-picker-sheet[open] {
    opacity: 0;
    transform: translateY(100%);
  }
}

.key-picker-sheet::backdrop {
  background: rgba(8,22,28,.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.key-picker-surface {
  display: grid;
  gap: 14px;
  padding: 14px 14px max(18px,env(safe-area-inset-bottom));
  border: 1px solid rgba(161,182,190,.7);
  border-block-end: 0;
  border-radius: inherit;
  background: linear-gradient(180deg,#f9fbfb 0,#eef3f5 100%);
}

.key-picker-heading {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
}

.key-picker-heading h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.2;
}

.key-picker-heading button {
  min-block-size: 38px;
  padding-inline: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  color: #34525d;
  background: var(--surface-raised);
  font-size: 11px;
  font-weight: 750;
}

.key-options {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 7px;
}

.key-options button {
  min-block-size: 44px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  color: #263b44;
  background: linear-gradient(180deg,#fff,#edf3f5);
  box-shadow: var(--shadow-soft),inset 0 1px rgba(255,255,255,.85);
  font-size: 14px;
  font-weight: 760;
}

.key-options button[aria-pressed="true"] {
  border-color: #17677f;
  color: #f7fcfd;
  background: var(--gradient-brand-strong);
  box-shadow: var(--shadow-brand);
}

.key-picker-sheet .harmony-toggle {
  inline-size: min(100%,260px);
  justify-self: center;
}

.key-picker-sheet .harmony-toggle button {
  min-block-size: 40px;
  font-size: 11px;
}

.drawer-sheet {
  display: grid;
  align-content: start;
  gap: 10px;
  min-block-size: 0;
  block-size: 100%;
  padding-block: 14px max(16px,env(safe-area-inset-bottom));
  padding-inline: 16px max(16px,env(safe-area-inset-right));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  border-inline-start: 1px solid var(--line-soft);
  border-radius: inherit;
  background: #f7f9fa;
}

.drawer-heading {
  position: sticky;
  z-index: 3;
  inset-block-start: -14px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  margin-block: -4px 0;
  padding-block: 4px 8px;
  background: linear-gradient(180deg,#f7f9fa 78%,rgba(247,249,250,.92) 100%);
}

.drawer-heading h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -.02em;
}

.drawer-heading button {
  min-block-size: 36px;
  padding-inline: 11px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  color: #49616b;
  background: var(--surface-raised);
  font-size: 11px;
  font-weight: 750;
}

.drawer-actions {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 2px;
  margin-block-start: 2px;
}

.drawer-actions button {
  min-block-size: 42px;
  border: 0;
  border-radius: 0;
  color: #38525d;
  background: transparent;
  box-shadow: none;
  font-size: 12px;
  font-weight: 800;
}

.drawer-actions .note-overlay-toggle,
.drawer-actions .setting-switch {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  padding-inline: 2px 0;
  color: #38525d;
  text-align: start;
}

.note-overlay-toggle .switch-track,
.setting-switch .switch-track {
  position: relative;
  inline-size: 40px;
  block-size: 23px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: #d8e2e6;
  box-shadow: inset 0 1px 2px rgba(21,44,54,.12);
  transition: border-color 170ms ease,background 170ms ease;
}

.note-overlay-toggle .switch-thumb,
.setting-switch .switch-thumb {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  inline-size: 18px;
  block-size: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(18,42,52,.24);
  transition: transform 170ms cubic-bezier(.22,.72,.24,1);
}

.drawer-actions .note-overlay-toggle[aria-checked="true"] .switch-track,
.drawer-actions .setting-switch[aria-checked="true"] .switch-track {
  border-color: var(--brand-active);
  background: var(--brand-active);
}

.drawer-actions .note-overlay-toggle[aria-checked="true"] .switch-thumb,
.drawer-actions .setting-switch[aria-checked="true"] .switch-thumb {
  transform: translateX(17px);
}

.drawer-app-actions {
  display: grid;
  align-content: start;
  gap: 7px;
  justify-items: end;
  margin-block: 5px 1px;
  padding-inline-end: 2px;
}

.drawer-install-button {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: center;
  gap: 12px;
  inline-size: min(184px,100%);
  min-block-size: 38px;
  padding-inline: 14px 12px;
  border: 0;
  border-radius: 8px;
  color: var(--text-main);
  background: var(--surface-muted);
  box-shadow: inset 0 0 0 1px rgba(160,183,192,.22);
  font-size: 11px;
  font-weight: 750;
  text-align: start;
}

.drawer-install-button span:last-child {
  color: var(--brand-cyan);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
}

.drawer-install-button:active { transform: scale(.985); }
.drawer-install-button:disabled { cursor: default; opacity: .62; transform: none; }

.setting-inline-note {
  margin: -2px 0 8px;
  padding-inline: 13px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 550;
  line-height: 1.45;
}

.setting-inline-note[hidden] { display: none; }

.settings-reset-button {
  inline-size: min(184px,100%);
  min-block-size: 38px;
  padding-inline: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  color: var(--text-muted);
  background: var(--surface-raised);
  box-shadow: inset 0 1px rgba(255,255,255,.72);
  font-size: 11px;
  font-weight: 700;
}

.settings-reset-button:hover { color: var(--text-main); background: var(--surface-muted); }
.settings-reset-button:active { transform: translateY(1px); }

.drawer-related {
  display: grid;
  gap: 7px;
  margin-block-start: 4px;
}

.drawer-related h3 {
  margin: 5px 2px 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .02em;
}

.drawer-related-list {
  display: grid;
  gap: 0;
  padding-block: 3px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft);
}

.drawer-related a {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  min-block-size: 41px;
  padding-inline: 13px 11px;
  border: 0;
  border-radius: 7px;
  color: var(--text-main);
  background: transparent;
  box-shadow: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
}

.drawer-related a::after {
  color: var(--brand-cyan);
  font-size: 18px;
  line-height: 1;
  content: "›";
}

.drawer-related a:hover { background: var(--surface-muted); }

.pads-panel {
  display: grid;
  gap: 8px;
  padding: 10px 10px max(13px,env(safe-area-inset-bottom));
  border-block-start: 1px solid var(--line-soft);
  background: linear-gradient(180deg,#f6f8f9 0,var(--surface-ui) 100%);
}

.pads-panel h2 {
  margin: 0;
  color: #263b44;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .01em;
}

.pads-heading {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 6px;
  inline-size: min(100%,520px);
  justify-self: center;
}

.pads-controls {
  display: block;
  justify-self: end;
  min-inline-size: 0;
}

.key-picker-toggle {
  display: grid;
  grid-template-columns: auto minmax(24px,auto) auto 10px;
  align-items: center;
  gap: 6px;
  min-inline-size: 148px;
  min-block-size: 34px;
  padding: 2px 8px 2px 10px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  color: #234b59;
  background: linear-gradient(180deg,#f8fbfb,#e4ecef);
  box-shadow: inset 0 1px rgba(255,255,255,.86),inset 0 -1px rgba(78,106,116,.08),0 1px 2px rgba(20,42,51,.08);
  cursor: pointer;
}

.key-picker-toggle:hover { background: linear-gradient(180deg,#fff,#e8eff1); }
.key-picker-toggle:active { transform: translateY(1px); }

.key-picker-toggle small {
  color: #5b737c;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .09em;
  line-height: 1;
}

.key-picker-toggle output {
  display: grid;
  place-items: center;
  min-inline-size: 28px;
  min-block-size: 28px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: #176b83;
  background: linear-gradient(180deg,var(--surface-raised),var(--surface-muted));
  box-shadow: inset 0 1px rgba(255,255,255,.9),inset 0 -1px rgba(88,116,126,.08),0 1px 2px rgba(20,42,51,.08);
  font-size: 14px;
  font-weight: 850;
  line-height: 1;
}

.key-picker-toggle > span:not(.key-picker-chevron) {
  color: #4f6871;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .025em;
  white-space: nowrap;
}

.key-picker-chevron {
  inline-size: 7px;
  block-size: 7px;
  border-inline-end: 1.5px solid #346472;
  border-block-end: 1.5px solid #346472;
  transform: translateY(-2px) rotate(45deg);
}

.harmony-toggle {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 2px;
  min-inline-size: 94px;
  padding: 2px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--surface-muted);
  box-shadow: inset 0 1px 2px rgba(21,44,54,.07);
}

.harmony-toggle button {
  min-block-size: 30px;
  padding-inline: 5px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #61747c;
  background: transparent;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.harmony-toggle button[aria-pressed="true"] {
  border-color: var(--line-strong);
  color: #155d74;
  background: linear-gradient(180deg,#fff,var(--surface-raised));
  box-shadow: 0 1px 2px rgba(20,42,51,.09),inset 0 1px rgba(255,255,255,.9);
}

@supports selector(.mode-control:has(button[aria-pressed="true"])) {
  .mode-control,
  .harmony-toggle {
    position: relative;
    isolation: isolate;
  }

  .mode-control::before,
  .harmony-toggle::before {
    position: absolute;
    z-index: 0;
    content: "";
    pointer-events: none;
    transition: transform 190ms cubic-bezier(.22,.72,.24,1);
    will-change: transform;
  }

  .mode-control::before {
    inset-block: 1px;
    inset-inline-start: 1px;
    inline-size: calc((100% - 4px) / 2);
    border: 1px solid #145f74;
    border-radius: 6px;
    background: var(--gradient-brand-strong);
    box-shadow: var(--shadow-brand);
  }

  .mode-control:has(#mode-form[aria-pressed="true"])::before {
    transform: translateX(calc(100% + 2px));
  }

  .harmony-toggle::before {
    inset-block: 2px;
    inset-inline-start: 2px;
    inline-size: calc((100% - 6px) / 2);
    border: 1px solid var(--line-strong);
    border-radius: 5px;
    background: linear-gradient(180deg,#fff,var(--surface-raised));
    box-shadow: 0 1px 2px rgba(20,42,51,.09),inset 0 1px rgba(255,255,255,.9);
  }

  .harmony-toggle:has(#harmony-minor[aria-pressed="true"])::before {
    transform: translateX(calc(100% + 2px));
  }

  .mode-control button,
  .harmony-toggle button {
    position: relative;
    z-index: 1;
    transition: color 150ms ease;
  }

  .mode-control button[aria-pressed="true"],
  .harmony-toggle button[aria-pressed="true"] {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }
}

.chord-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 6px;
  inline-size: min(100%,520px);
  justify-self: center;
}

.chord-pad {
  position: relative;
  min-inline-size: 0;
  min-block-size: 44px;
  padding: 3px 4px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  color: #1d3038;
  background: linear-gradient(180deg,var(--surface-raised) 0,#edf3f4 100%);
  box-shadow: var(--shadow-soft),inset 0 1px rgba(255,255,255,.85);
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
  transition: color 90ms ease,background 90ms ease,border-color 90ms ease,transform 90ms ease,box-shadow 90ms ease;
}

.chord-pad:active {
  transform: translateY(1px) scale(.99);
  box-shadow: inset 0 1px 2px rgba(20,42,51,.14),0 0 0 transparent;
}

.chord-pad[aria-pressed="true"] {
  border-color: #65a2b4;
  color: #114f62;
  background: linear-gradient(180deg,#f8fbfb,#e7f0f2);
  box-shadow: 0 1px 3px rgba(20,75,91,.13),inset 0 1px rgba(255,255,255,.86);
}

.chord-pad.is-struck {
  border-color: #17677f;
  color: #f7fcfd;
  background: var(--gradient-brand-strong);
  box-shadow: var(--shadow-brand);
  transform: translateY(1px);
}

@media (min-width: 431px) {
  .page-shell { padding-block-start: 20px; }
  .guitar-tool {
    min-block-size: 0;
    overflow: hidden;
    border: 1px solid #cad6db;
    border-radius: 14px;
  }
}

@media (max-width: 374px) {
  .mode-control button,
  .clear-button { padding-inline: 3px; }
  .pads-panel { padding-inline: 8px; }
  .key-picker-toggle { min-inline-size: 142px; gap: 5px; }
  .chord-grid { gap: 6px; }
}

@media (orientation: landscape) and (min-width: 600px) and (max-height: 500px) {
  .page-shell {
    inline-size: min(100%,844px);
    padding-block-start: 0;
  }

  .guitar-tool {
    grid-template-columns: minmax(178px,190px) minmax(238px,1fr) minmax(245px,300px);
    grid-template-rows: 44px max-content max-content;
    min-block-size: 100dvh;
    overflow: hidden;
    border: 0;
    border-radius: 0;
  }

  .tool-intro {
    grid-column: 1;
    grid-row: 1;
    min-block-size: 44px;
    padding-block: 4px;
    gap: 8px;
    padding-inline-start: max(6px,env(safe-area-inset-left));
    padding-inline-end: 6px;
  }

  .tool-intro h1 {
    font-size: 15px;
    white-space: nowrap;
  }

  .settings-toggle {
    min-block-size: 28px;
    padding-inline: 7px;
  }

  .tool-lead {
    display: grid;
    grid-column: 2;
    grid-row: 1;
    align-items: center;
    min-block-size: 44px;
    padding-block: 4px;
    padding-inline: 9px;
    border-block-end: 1px solid #ccd8dd;
    font-size: 9.5px;
    white-space: nowrap;
  }

  .section-toolbar {
    grid-column: 3;
    grid-row: 1;
    grid-template-columns: minmax(121px,1fr) 58px 44px;
    min-block-size: 44px;
    padding-block: 3px;
    padding-inline-start: 4px;
    padding-inline-end: max(4px,env(safe-area-inset-right));
    border-block-end: 1px solid #ccd8dd;
  }

  .section-toolbar:has(.clear-button[hidden]) {
    grid-template-columns: minmax(174px,196px);
    justify-content: end;
  }

  .section-toolbar:has(.clear-button[hidden]) .mode-control { grid-column: 1; }

  .mode-control button,
  .clear-button,
  .form-strum-button { min-block-size: 36px; }

  .mode-control button {
    padding-inline: 2px;
    white-space: nowrap;
  }

  .clear-button { white-space: nowrap; }

  .form-strum-button {
    inline-size: 100%;
    min-inline-size: 0;
    padding-inline: 3px;
    white-space: nowrap;
  }

  .fretboard-panel {
    --board-height: 170px !important;
    --row-height: 26px !important;
    --string-edge-padding: 7px !important;
    --stage-gutter: 4px;
    --numbers-height: 28px;
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .fretboard-panel[data-strings="7"] {
    --board-height: 196px !important;
    --row-height: 26px !important;
    --string-edge-padding: 7px !important;
  }

  .fret-scroll {
    inline-size: calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right));
    margin-inline-start: env(safe-area-inset-left);
  }

  .fret-page-button.is-previous { inset-inline-start: env(safe-area-inset-left); }
  .fret-page-button.is-next { inset-inline-end: env(safe-area-inset-right); }

  .fret-numbers span { padding-inline-end: 6px; }
  .fret-page-button { font-size: 14px; }

  .board-inlay {
    transform: scaleY(1.118);
    transform-box: fill-box;
    transform-origin: center;
  }

  .pads-panel {
    grid-column: 1 / -1;
    grid-row: 3;
    grid-template-columns: minmax(240px,.65fr) minmax(0,1.35fr);
    align-items: stretch;
    gap: 8px;
    padding-block-start: 6px;
    padding-block-end: max(6px,env(safe-area-inset-bottom));
    padding-inline-start: max(8px,env(safe-area-inset-left));
    padding-inline-end: max(8px,env(safe-area-inset-right));
  }

  .pads-heading {
    grid-template-columns: auto auto;
    align-content: center;
    justify-content: end;
    gap: 4px;
    inline-size: auto;
  }

  .pads-panel h2 { font-size: 11px; }

  .key-picker-toggle { min-inline-size: 144px; min-block-size: 32px; }

  .key-picker-sheet { inline-size: min(100%,760px); }
  .key-picker-surface { gap: 10px; padding-block-start: 10px; }
  .key-options { grid-template-columns: repeat(6,minmax(0,1fr)); }
  .key-options button { min-block-size: 38px; }

  .chord-grid {
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 4px 6px;
    inline-size: 100%;
  }

  .chord-pad {
    min-block-size: 40px;
    padding-block: 2px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}