.scale-overview{margin-block-end:clamp(2rem,1.5rem + 2vw,3rem);container:scale-overview/inline-size}.scale-picker{border:1px solid var(--line);background:var(--surface);box-shadow:var(--ui-sheet-shadow);border-radius:14px;grid-template-columns:minmax(0,1fr);gap:1.25rem;margin-block-start:-2rem;padding:1.375rem 1.625rem 1.5rem;display:grid;position:relative}.scale-picker-group{min-inline-size:0}.scale-picker-group+.scale-picker-group{border-block-start:1px solid var(--line);padding-block-start:1.25rem}@media (min-width:60rem){.scale-picker{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5625rem}.scale-picker-group+.scale-picker-group{border-block-start:0;border-inline-start:1px solid var(--line);padding-block-start:0;padding-inline-start:1.5625rem}}@media (max-width:30rem){.scale-picker{padding:1.25rem 1.125rem}}.scale-overview-intro{grid-template-columns:minmax(0,1fr);align-items:start;gap:1.25rem;margin-block-start:clamp(1.75rem,1.25rem + 2vw,2.25rem);display:grid}@media (min-width:48rem){.scale-overview-intro{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}.scale-overview .scale-about h2{font-family:var(--display);letter-spacing:-.02em;text-transform:none;color:var(--ink);margin:0;font-size:clamp(1.75rem,1.25rem + 2vw,2.5rem);font-weight:700;line-height:1.1}.scale-about-sound{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb, var(--alt) 70%, var(--ink));margin:.375rem 0 0;font-size:.75rem}.scale-about-line{max-inline-size:40rem;color:var(--ink);margin:.625rem 0 0;font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.55}.scale-about-facts{flex-wrap:wrap;gap:.625rem 1.75rem;margin:1rem 0 0;display:flex}.scale-about-facts dt{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:.6875rem}.scale-about-facts dd{color:var(--ink);margin:.25rem 0 0;font-weight:600}.scale-how-to{background:color-mix(in srgb, var(--ink) 6%, var(--ground));color:var(--ink);border-radius:16px;padding:1rem 1.125rem;font-size:.9375rem;line-height:1.55}.scale-overview .scale-how-to h2{font-family:var(--sans);letter-spacing:0;text-transform:none;color:var(--ink);margin:0;font-size:.9375rem;font-weight:600}.scale-how-to ul{margin:.5rem 0 0;padding-inline-start:1.125rem}.scale-how-to li+li{margin-block-start:.25rem}.scale-mark{border:1px solid var(--line);background:var(--surface);font-family:var(--mono);color:var(--ink);border-radius:6px;padding:.125rem .375rem;font-size:.75rem;font-weight:600;line-height:1.2;display:inline-block}.scale-mark--altered{border-color:var(--warn);background:var(--warn);color:var(--surface)}.scale-table-caption{color:var(--muted);flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;margin:.625rem 0 0;font-size:.875rem;line-height:1.5;display:flex}.scale-table-caption a{color:var(--ink);text-underline-offset:.2em}.scale-visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@container scale-overview not (min-inline-size:16rem){.scale-picker{padding-inline:.25rem}}