/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-orange-400: oklch(75% 0.183 55.934);
    --color-orange-700: oklch(55.3% 0.195 38.402);
    --color-orange-800: oklch(47% 0.157 37.304);
    --color-stone-200: oklch(92.3% 0.003 48.717);
    --color-stone-300: oklch(86.9% 0.005 56.366);
    --color-stone-600: oklch(44.4% 0.011 73.639);
    --color-stone-700: oklch(37.4% 0.01 67.558);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-5xl: 64rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --tracking-tight: -0.025em;
    --leading-tight: 1.25;
    --leading-relaxed: 1.625;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .mx-auto {
    margin-inline: auto;
  }
  .mt-0\.5 {
    margin-top: calc(var(--spacing) * 0.5);
  }
  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-2\.5 {
    margin-top: calc(var(--spacing) * 2.5);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mt-7 {
    margin-top: calc(var(--spacing) * 7);
  }
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mr-1 {
    margin-right: calc(var(--spacing) * 1);
  }
  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }
  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .max-w-5xl {
    max-width: var(--container-5xl);
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-baseline {
    align-items: baseline;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .justify-between {
    justify-content: space-between;
  }
  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }
  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .space-y-4 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .self-center {
    align-self: center;
  }
  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }
  .rounded-3xl {
    border-radius: var(--radius-3xl);
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .border-orange-700 {
    border-color: var(--color-orange-700);
  }
  .border-stone-200 {
    border-color: var(--color-stone-200);
  }
  .border-stone-300 {
    border-color: var(--color-stone-300);
  }
  .bg-black\/5 {
    background-color: color-mix(in srgb, #000 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 5%, transparent);
    }
  }
  .bg-orange-700 {
    background-color: var(--color-orange-700);
  }
  .p-1 {
    padding: calc(var(--spacing) * 1);
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-5 {
    padding: calc(var(--spacing) * 5);
  }
  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-3\.5 {
    padding-inline: calc(var(--spacing) * 3.5);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }
  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }
  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }
  .pb-10 {
    padding-bottom: calc(var(--spacing) * 10);
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .font-sans {
    font-family: var(--font-sans);
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .text-\[10px\] {
    font-size: 10px;
  }
  .text-\[11px\] {
    font-size: 11px;
  }
  .text-\[56px\] {
    font-size: 56px;
  }
  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }
  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-extrabold {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .tracking-\[0\.22em\] {
    --tw-tracking: 0.22em;
    letter-spacing: 0.22em;
  }
  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }
  .text-orange-700 {
    color: var(--color-orange-700);
  }
  .text-white {
    color: var(--color-white);
  }
  .opacity-60 {
    opacity: 60%;
  }
  .opacity-70 {
    opacity: 70%;
  }
  .opacity-80 {
    opacity: 80%;
  }
  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-orange-700\/20 {
    --tw-shadow-color: color-mix(in srgb, oklch(55.3% 0.195 38.402) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-orange-700) 20%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }
  .hover\:bg-orange-800 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-orange-800);
      }
    }
  }
  .sm\:grid-cols-3 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .sm\:px-6 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .sm\:pt-7 {
    @media (width >= 40rem) {
      padding-top: calc(var(--spacing) * 7);
    }
  }
  .sm\:text-sm {
    @media (width >= 40rem) {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }
  .sm\:text-xl {
    @media (width >= 40rem) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }
  .sm\:text-\[76px\] {
    @media (width >= 40rem) {
      font-size: 76px;
    }
  }
  .md\:grid-cols-\[1fr_1\.35fr\] {
    @media (width >= 48rem) {
      grid-template-columns: 1fr 1.35fr;
    }
  }
  .dark\:border-stone-600 {
    @media (prefers-color-scheme: dark) {
      border-color: var(--color-stone-600);
    }
  }
  .dark\:border-stone-700 {
    @media (prefers-color-scheme: dark) {
      border-color: var(--color-stone-700);
    }
  }
  .dark\:bg-white\/10 {
    @media (prefers-color-scheme: dark) {
      background-color: color-mix(in srgb, #fff 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
  }
  .dark\:text-orange-400 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-orange-400);
    }
  }
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
    }
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Noto Sans JP",sans-serif;background:#faf6ef;color:#1c1917}
@media (prefers-color-scheme:dark){body{background:#131110;color:#f5f0e8}.card{background:#1e1b18!important;border-color:#33302c!important}.muted{color:#a8a29e!important}}
.card{background:#fff;border:1px solid #e7ddd0}
.muted{color:#78716c}
button{min-height:44px}
/* Piano */
.piano-wrap{background:#171412;border-radius:20px;padding:18px 14px 14px;box-shadow:0 18px 40px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08)}
.piano{position:relative;display:flex;height:220px;user-select:none}
@media(max-width:640px){.piano{height:168px}.piano-wrap{padding:12px 8px 10px;border-radius:16px}}
.white-key{flex:1;background:linear-gradient(to bottom,#e8e2d6 0%,#fffef9 8%,#ffffff 92%,#e7e0d0 100%);border:1px solid #c9c2b4;border-top:none;border-radius:0 0 7px 7px;position:relative;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;transition:all.12s;z-index:1}
.white-key:first-child{border-radius:0 0 7px 7px}
.white-key.active{background:linear-gradient(to bottom,#fed7aa,#fdba74 55%,#fb923c);border-color:#c2410c;color:#431407;box-shadow:inset 0 -6px 0 rgba(194,65,12,.35)}
.white-key.active.root{background:linear-gradient(to bottom,#fb923c,#ea580c 60%,#c2410c);color:white}
.white-key .klabel{font-size:11px;font-weight:700;line-height:1;text-align:center;pointer-events:none}
.white-key .klabel small{display:block;font-size:9px;font-weight:500;opacity:.75;margin-top:3px}
.black-key{position:absolute;top:0;width:6.2%;max-width:44px;height:58%;background:linear-gradient(to bottom,#44403c,#0c0a09 70%);border:1px solid #000;border-top:none;border-radius:0 0 6px 6px;z-index:3;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;color:#d6d3d1;transform:translateX(-50%);box-shadow:0 6px 8px rgba(0,0,0,.35);transition:all.12s}
.black-key.active{background:linear-gradient(to bottom,#f59e0b,#ea580c);color:white;border-color:#7c2d12;box-shadow:0 0 0 2px rgba(251,146,60,.45),0 8px 14px rgba(234,88,12,.35)}
.black-key .klabel{font-size:9px;font-weight:700;pointer-events:none;text-align:center;line-height:1.1}
.root-btn,.qual-btn{transition:all.15s}
.root-btn.sel,.qual-btn.sel{background:#1c1917!important;color:#fff!important;border-color:#1c1917!important}
@media(prefers-color-scheme:dark){.root-btn.sel,.qual-btn.sel{background:#f5f0e8!important;color:#1c1917!important;border-color:#f5f0e8!important}}
.note-chip{transition:all.15s}
.note-chip:hover{transform:translateY(-2px)}
.prog-btn:hover{border-color:#c2410c;color:#c2410c}
.hidden{display:none!important}
.piano-head{color:#d6d3d1}.piano-head .ph-sub{color:#a8a29e}
.inv-btn.on{background:#1c1917;color:#fff}
@media(prefers-color-scheme:dark){.inv-btn.on{background:#f5f0e8;color:#1c1917}}
.enh-chip{transition:all.15s}
.enh-chip.on{background:#c2410c!important;color:#fff!important;border-color:#c2410c!important}
.dia-btn:hover,.chart-chip:hover{border-color:#c2410c;color:#c2410c}
details.faq{border-top:1px dashed #d6c9b4}
details.faq:first-of-type{border-top:none}
details.faq summary{cursor:pointer;font-weight:700;padding:12px 2px;list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::before{content:"Q. ";color:#c2410c;font-family:"M PLUS Rounded 1c",sans-serif;font-weight:800}
details.faq .ans{padding:0 2px 14px}
@media(prefers-color-scheme:dark){details.faq{border-color:#44403c}}
/* Instrument tabs */
.inst-tab{transition:all.15s}
.inst-tab.on{background:#1c1917!important;color:#fff!important;border-color:#1c1917!important}
@media(prefers-color-scheme:dark){.inst-tab.on{background:#f5f0e8!important;color:#1c1917!important;border-color:#f5f0e8!important}}
.root-btn.alt{border-style:dashed}
/* Guitar */
.guitar-wrap{background:linear-gradient(180deg,#2e1f16,#1d130d);border-radius:20px;padding:18px 14px 14px;box-shadow:0 18px 40px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08)}
@media(max-width:640px){.guitar-wrap{padding:12px 8px 10px;border-radius:16px}}
.guitar-head{color:#e7ddd0}.guitar-head .gh-sub{color:#b8a894}
.fb{display:flex;flex-direction:column}
.fb-row{display:grid;align-items:stretch}
.fb-slabel{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;color:#d6c9b4;font-size:10px;font-weight:700;line-height:1.25;padding-right:2px}
.fb-slabel b{font-size:12px;color:#f5f0e8}
.fb-om{display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:#e7ddd0}
.fb-om.mute{color:#8a7a68}
.fb-cell{position:relative;height:46px;display:flex;align-items:center;justify-content:center;border-right:2px solid rgba(214,201,180,.4)}
.fb-cell.nut{border-left:6px solid #e7ddd0}
.fb-cell:first-of-type{border-left:2px solid rgba(214,201,180,.4)}
.fb-cell .sline{position:absolute;left:0;right:-2px;top:50%;transform:translateY(-50%);background:linear-gradient(180deg,#e8e2d6,#a89a83);pointer-events:none}
.fb-cell .inlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:rgba(231,221,208,.22);pointer-events:none}
.fb-dot{position:relative;z-index:2;width:34px;height:34px;min-height:34px;border-radius:50%;border:none;background:linear-gradient(180deg,#fdba74,#f97316);color:#431407;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,.4);padding:0;line-height:1.05;text-align:center}
.fb-dot.root{background:linear-gradient(180deg,#fb923c,#c2410c);color:#fff;box-shadow:0 0 0 2px rgba(251,146,60,.5),0 3px 8px rgba(0,0,0,.4)}
.fb-fnum{display:flex;align-items:center;justify-content:center;color:#b8a894;font-size:11px;font-weight:700;height:20px}
.gpos-btn.on{background:#1c1917;color:#fff}
@media(prefers-color-scheme:dark){.gpos-btn.on{background:#f5f0e8;color:#1c1917}}
@media(max-width:640px){.fb-cell{height:40px}.fb-dot{width:29px;height:29px;min-height:29px;font-size:9px}}
/* V2 practice controls & accessibility */
:root { color-scheme: light; }
@media(prefers-color-scheme:dark) { :root { color-scheme: dark; } }
body { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif; }
.font-display { font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", system-ui, sans-serif; }
button, select { cursor: pointer; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid #fb923c; outline-offset: 2px; }
button:disabled { opacity: .45; cursor: not-allowed; }
.mode-btn { border: 1px solid #d6c9b4; padding: 8px 16px; }
.mode-btn.on { background: #1c1917; color: #fff; border-color: #1c1917; }
@media(prefers-color-scheme:dark) { .mode-btn.on { background: #f5f0e8; color: #1c1917; } }
.hand-legend-left { color:#2563eb; font-weight:700; }
.hand-legend-right { color:#c2410c; font-weight:700; }
.white-key.left-hand { background:linear-gradient(to bottom,#dbeafe,#93c5fd 60%,#60a5fa); color:#172554; border-color:#2563eb; }
.black-key.left-hand { background:linear-gradient(to bottom,#60a5fa,#1d4ed8); border-color:#1e40af; color:white; }
.white-key.right-hand { background:linear-gradient(to bottom,#fed7aa,#fdba74 55%,#fb923c); color:#431407; border-color:#c2410c; }
.black-key.right-hand { background:linear-gradient(to bottom,#f59e0b,#ea580c); color:white; border-color:#7c2d12; }
.white-key, .black-key { min-height: 0; }
#piano { min-width: 0; }
#bassSelect, #keySelect { max-width:100%; color: inherit; background-color: transparent; border:1px solid #d6c9b4; }
@media(max-width:640px) { .white-key .klabel { font-size: 9px; } .white-key .klabel small { font-size: 8px; } .black-key .klabel { font-size: 8px; } }

.inst-tab { white-space: nowrap; flex-shrink: 0; }
@media(max-width:640px){ #tabPiano, #tabGuitar { white-space: nowrap; flex-shrink:0; } }

#fastRoot, #fastQual { color: inherit; background: transparent; border: 1px solid #d6c9b4; max-width:100%; }
#quickControls { z-index: 10; }
@media(max-width:640px) { #quickControls { position:sticky; top:6px; box-shadow: 0 4px 14px rgba(28,25,23,.10); } }
.white-key.left-hand.active.root { background:linear-gradient(to bottom,#93c5fd,#2563eb 80%,#1d4ed8); color:white; }

.fb-dot { flex-direction: column; }
.fb-dot small { display:block; font-size:8px; }
#catTabs { flex-wrap:wrap; }
#fingerHint, #gFingerHint { overflow-wrap:anywhere; }

@media(prefers-color-scheme:dark){.hand-legend-left{color:#93c5fd}.hand-legend-right{color:#fdba74}}