/*
 * PracticeClef v2 identity foundation.
 *
 * The app and generated HTML carry data-ui-version="v2" permanently. Keeping
 * the identity root explicit makes the active token surface easy to inspect.
 */

@font-face {
  font-family: "Instrument Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("/fonts/v2/instrument-sans-latin-ext-wght-normal.woff2") format("woff2");
  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: "Instrument Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("/fonts/v2/instrument-sans-latin-wght-normal.woff2") format("woff2");
  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;
}

@font-face {
  font-family: "Source Serif 4 Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url("/fonts/v2/source-serif-4-latin-ext-wght-normal.woff2") format("woff2");
  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: "Source Serif 4 Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url("/fonts/v2/source-serif-4-latin-wght-normal.woff2") format("woff2");
  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;
}

/*
 * Metric-compatible local fallbacks. The values come from the checked-in
 * WOFF2 OpenType metrics (x-height, hhea ascent/descent, and UPM) relative to
 * Arial and Georgia, keeping the first paint close to the final variable font.
 */
@font-face {
  font-family: "Instrument Sans Fallback";
  src: local("Arial");
  size-adjust: 98.35%;
  ascent-override: 98.63%;
  descent-override: 25.42%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Source Serif 4 Fallback";
  src: local("Georgia");
  size-adjust: 98.66%;
  ascent-override: 105%;
  descent-override: 33.95%;
  line-gap-override: 0%;
}

[data-ui-version="v2"] {
  /* Raw identity palette — do not use raw values directly in components. */
  --pc-coal-1000: #0b0e0c;
  --pc-coal-950:  #101411;
  --pc-coal-900:  #171b18;
  --pc-coal-850:  #1e241f;
  --pc-coal-800:  #282f29;
  --pc-coal-700:  #3b443d;
  --pc-coal-600:  #586158;
  --pc-coal-500:  #737d74;
  --pc-coal-300:  #aab4ab;
  --pc-bone-200:  #e7e2d7;
  --pc-bone-100:  #f2efe7;
  --pc-paper-100: #f7f2e8;
  --pc-paper-50:  #fffdf7;

  --pc-lacquer-700: #81301f;
  --pc-lacquer-600: #a33d2a;
  --pc-lacquer-500: #f06a4f;
  --pc-lacquer-400: #ff8064;

  /* Clef orange: the logo's accent (2026-08 mark), same on light and dark. */
  --pc-clef-500: #f58220;

  --pc-azure-700: #27759f;
  --pc-azure-500: #51a8d7;
  --pc-ochre-700: #99620a;
  --pc-ochre-500: #d99a35;
  --pc-green-700: #2e7d45;
  --pc-green-500: #75c169;
  --pc-red-700:   #b83a45;
  --pc-red-500:   #f16972;

  /* Permanent v2 application semantics. Sustained reading and score content
     opt into the paper tokens below; there is no retired light site theme. */
  --pc-app-bg: var(--pc-coal-950);
  --pc-chrome-bg: var(--pc-coal-900);
  --pc-canvas-bg: var(--pc-coal-800);
  --pc-panel-bg: var(--pc-coal-850);
  --pc-panel-raised: #252b26;
  --pc-control-hover: #303832;
  --pc-control-active: #39423b;
  --pc-border-subtle: var(--pc-coal-700);
  --pc-border-strong: #667168;
  --pc-text: var(--pc-bone-100);
  --pc-text-muted: var(--pc-coal-300);
  --pc-text-faint: #879187;
  --pc-accent: var(--pc-lacquer-500);
  --pc-accent-hover: var(--pc-lacquer-400);
  --pc-accent-pressed: #d75239;
  --pc-accent-on: var(--pc-coal-900);
  --pc-focus: var(--pc-lacquer-400);
  --pc-overlay: rgb(5 7 6 / 0.68);
  --pc-status-success: var(--pc-green-500);
  --pc-status-warning: var(--pc-ochre-500);
  --pc-status-danger: var(--pc-red-500);

  /* Score/paper semantics. */
  --pc-score-paper: var(--pc-paper-50);
  --pc-score-paper-muted: var(--pc-paper-100);
  --pc-score-ink: var(--pc-coal-900);
  --pc-score-muted: #626a63;
  --pc-score-cursor: var(--pc-lacquer-600);
  --pc-score-selection: rgb(163 61 42 / 0.14);
  --pc-score-selection-border: var(--pc-lacquer-600);

  /* Musical state on paper. */
  --pc-hand-right-on-paper: var(--pc-azure-700);
  --pc-hand-left-on-paper: var(--pc-ochre-700);
  --pc-correct-on-paper: var(--pc-green-700);
  --pc-danger-on-paper: var(--pc-red-700);

  /* Keyboard material and state. */
  --pc-key-white: #f8f6ef;
  --pc-key-white-edge: var(--pc-coal-500);
  --pc-key-black: #151816;
  --pc-key-black-edge: #050706;
  /* Down material is 3.32:1 against the white key; its dark edge is also
     3.29:1 against the down material, preserving both state and boundary. */
  --pc-key-down: #7f8a80;
  --pc-key-down-edge: #303a32;
  --pc-key-shadow: rgb(4 7 5 / 0.34);
  --pc-hand-right: var(--pc-azure-500);
  --pc-hand-left: var(--pc-ochre-500);
  --pc-correct: var(--pc-green-500);
  --pc-danger: var(--pc-red-500);
  --pc-hand-right-on-white: var(--pc-azure-700);
  --pc-hand-left-on-white: var(--pc-ochre-700);
  --pc-correct-on-white: var(--pc-green-700);
  --pc-danger-on-white: var(--pc-red-700);
  --pc-warning: var(--pc-ochre-500);
  --pc-info: var(--pc-azure-500);

  /* Brand SVG variables; standalone SVGs supply the same fallbacks. */
  --pc-logo-ink: var(--pc-bone-100);
  --pc-logo-accent: var(--pc-clef-500);

  /* Shape, depth, and timing. */
  --pc-radius-control: 6px;
  --pc-radius-panel: 10px;
  --pc-radius-paper: 2px;
  --pc-shadow-popover: 0 12px 36px rgb(11 14 12 / 0.22), 0 2px 8px rgb(11 14 12 / 0.16);
  --pc-shadow-paper: 0 1px 2px rgb(0 0 0 / 0.24), 0 18px 50px rgb(0 0 0 / 0.22);
  --pc-motion-fast: 80ms;
  --pc-motion-base: 140ms;
  --pc-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Typography. */
  --pc-font-ui: "Instrument Sans Variable", "Instrument Sans Fallback", "Avenir Next", "Segoe UI", sans-serif;
  --pc-font-editorial: "Source Serif 4 Variable", "Source Serif 4 Fallback", "Iowan Old Style", Georgia, serif;
  --pc-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  color: var(--pc-text);
  background-color: var(--pc-app-bg);
  font-family: var(--pc-font-ui);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

[data-ui-version="v2"][data-surface="player"],
[data-ui-version="v2"] [data-surface="player"],
[data-ui-version="v2"][data-surface="dark"],
[data-ui-version="v2"] [data-surface="dark"] {
  color-scheme: dark;
  color: var(--pc-text);
  background-color: var(--pc-app-bg);
}

/* The portal host carries data-surface="player" only to inherit the dark
   theme tokens for popovers — it must never paint the surface itself: an
   opaque full-viewport pointer-events-none layer blankets the score
   (2026-07-19 verification catch: score rendered but invisible). */
[data-ui-version="v2"] [data-pc-portal-host][data-surface="player"] {
  background-color: transparent;
}

[data-ui-version="v2"] .pc-type-metadata {
  font-family: var(--pc-font-ui);
  font-size: 12px;
  font-weight: 450;
  line-height: 16px;
}

[data-ui-version="v2"] .pc-type-micro {
  font-family: var(--pc-font-ui);
  font-size: 11px;
  font-weight: 620;
  letter-spacing: 0.04em;
  line-height: 14px;
}

[data-ui-version="v2"] .pc-type-piece-title {
  font-family: var(--pc-font-editorial);
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
}

[data-ui-version="v2"] .pc-type-numeric {
  font-family: var(--pc-font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  line-height: 16px;
}

[data-ui-version="v2"]::selection,
[data-ui-version="v2"] ::selection {
  color: var(--pc-accent-on);
  background: var(--pc-accent);
}

[data-ui-version="v2"] :focus-visible {
  outline: 2px solid var(--pc-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  [data-ui-version="v2"] {
    --pc-motion-fast: 0ms;
    --pc-motion-base: 0ms;
  }

}

@media (forced-colors: active) {
  [data-ui-version="v2"] :focus-visible {
    outline-color: Highlight;
  }
}

/*
 * PracticeClef non-player shell.
 * Every selector is site-scoped; Player never has a data-site-shell ancestor.
 */

[data-ui-version="v2"][data-site-shell] {
  --site-gutter: 20px;
  /* The Player keeps the frozen #879187 value. Site captions can sit on the
     raised panel, so lift the site-only faint text pairing above 4.5:1. */
  --pc-text-faint: #8a948b;
  /* Likewise, meaningful site control boundaries must clear 3:1 against the
     raised work surface without changing the Player's frozen strong border. */
  --pc-border-strong: #6b766d;
  min-height: 100%;
  color: var(--pc-text);
  background: var(--pc-app-bg);
  color-scheme: dark;
  font-family: var(--pc-font-ui);
}

html[data-ui-version="v2"][data-site-shell],
html[data-ui-version="v2"][data-site-shell] body,
[data-ui-version="v2"][data-site-shell].pc-site-root,
[data-ui-version="v2"][data-site-shell] .pc-site-root {
  min-height: 100%;
  margin: 0;
  color: var(--pc-text);
  background: var(--pc-app-bg);
}

html[data-ui-version="v2"][data-site-shell] body,
[data-ui-version="v2"][data-site-shell].pc-site-root,
[data-ui-version="v2"][data-site-shell] .pc-site-root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

[data-ui-version="v2"][data-site-shell],
[data-ui-version="v2"][data-site-shell] *,
[data-ui-version="v2"][data-site-shell] *::before,
[data-ui-version="v2"][data-site-shell] *::after {
  box-sizing: border-box;
}

[data-ui-version="v2"][data-site-shell] a {
  color: var(--pc-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

[data-ui-version="v2"][data-site-shell] a:hover {
  color: var(--pc-accent-hover);
}

[data-ui-version="v2"][data-site-shell] .site-frame {
  width: 100%;
  max-width: calc(1280px + var(--site-gutter) + var(--site-gutter));
  margin-inline: auto;
  padding-inline: var(--site-gutter);
}

[data-ui-version="v2"][data-site-shell] .site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  height: calc(72px + env(safe-area-inset-top));
  color: var(--pc-text);
  background: var(--pc-chrome-bg);
}

[data-ui-version="v2"][data-site-shell] .site-header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  pointer-events: none;
  background: var(--pc-border-subtle);
}

[data-ui-version="v2"][data-site-shell] .site-header__inner {
  height: calc(72px + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

[data-ui-version="v2"][data-site-shell] .site-brand {
  width: auto;
  min-width: 105px;
  height: 64px;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  border: 0;
  color: var(--pc-text);
  background: transparent;
  box-shadow: none;
  text-decoration: none;
}

[data-ui-version="v2"][data-site-shell] a.site-brand {
  cursor: pointer;
}

[data-ui-version="v2"][data-site-shell] .site-brand__wordmark {
  width: 208px;
  height: 56px;
  display: block;
}

[data-ui-version="v2"][data-site-shell] .site-brand__mark {
  width: 48px;
  height: 48px;
  display: none;
}

[data-ui-version="v2"][data-site-shell] .site-brand__wordmark > *,
[data-ui-version="v2"][data-site-shell] .site-brand__mark > * {
  width: 100%;
  height: 100%;
  display: block;
}

[data-ui-version="v2"][data-site-shell] .site-menu {
  position: relative;
  height: 40px;
  margin-left: auto;
}

[data-ui-version="v2"][data-site-shell] .site-menu__details {
  margin: 0;
}

[data-ui-version="v2"][data-site-shell] .site-menu__trigger {
  display: none;
}

[data-ui-version="v2"][data-site-shell] .site-navigation,
[data-ui-version="v2"][data-site-shell] .site-footer__navigation {
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-ui-version="v2"][data-site-shell] .site-navigation {
  justify-content: flex-end;
  font-size: 13px;
  font-weight: 560;
  line-height: 18px;
}

[data-ui-version="v2"][data-site-shell] .site-footer__navigation {
  justify-content: flex-end;
  gap: 8px 20px;
}

[data-ui-version="v2"][data-site-shell] .site-navigation a,
[data-ui-version="v2"][data-site-shell] .site-footer a {
  color: var(--pc-text-muted);
  text-decoration: none;
  transition:
    color var(--pc-motion-fast) var(--pc-ease-out),
    background-color var(--pc-motion-fast) var(--pc-ease-out);
}

[data-ui-version="v2"][data-site-shell] .site-navigation a {
  position: relative;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding-inline: 12px;
}

[data-ui-version="v2"][data-site-shell] .site-navigation a:hover,
[data-ui-version="v2"][data-site-shell] .site-footer a:hover {
  color: var(--pc-text);
}

[data-ui-version="v2"][data-site-shell] .site-navigation a[aria-current="page"] {
  color: var(--pc-text);
}

[data-ui-version="v2"][data-site-shell] .site-navigation a[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 0;
  left: 12px;
  height: 2px;
  background: var(--pc-accent);
}

[data-ui-version="v2"][data-site-shell] .site-main {
  width: 100%;
  min-height: 50vh;
  flex: 1;
  padding-block: 48px 80px;
  color: var(--pc-text);
  background: var(--pc-app-bg);
}

[data-ui-version="v2"][data-site-shell] .site-main--marketing {
  padding-block: 0;
}

[data-ui-version="v2"][data-site-shell] #main-content {
  scroll-margin-top: calc(72px + env(safe-area-inset-top) + 16px);
}

[data-ui-version="v2"][data-site-shell] .site-page-frame {
  min-width: 0;
}

[data-ui-version="v2"][data-site-shell] .site-content {
  width: 100%;
}

/* Detail and article mastheads keep the full twelve-column frame so every
   editorial composition owns a deliberate dark field beside its focal plane. */
[data-ui-version="v2"][data-site-shell] .site-content > :is(article, .site-article) {
  width: 100%;
}

[data-ui-version="v2"][data-site-shell] .site-skip-link {
  position: fixed;
  z-index: 100;
  top: calc(env(safe-area-inset-top) + 8px);
  left: max(var(--site-gutter), calc((100vw - 1280px) / 2));
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-inline: 14px;
  border: 1px solid var(--pc-border-strong);
  border-radius: var(--pc-radius-control);
  color: var(--pc-text);
  background: var(--pc-chrome-bg);
  box-shadow: var(--pc-shadow-popover);
  text-decoration: none;
  transform: translateY(calc(-100% - 16px - env(safe-area-inset-top)));
  transition: transform var(--pc-motion-fast) var(--pc-ease-out);
}

[data-ui-version="v2"][data-site-shell] .site-skip-link:focus {
  color: var(--pc-text);
  transform: translateY(0);
}

[data-ui-version="v2"][data-site-shell] .site-eyebrow,
[data-ui-version="v2"][data-site-shell] .eyebrow {
  margin: 0 0 12px;
  color: var(--pc-accent);
  font-family: var(--pc-font-ui);
  font-size: 11px;
  font-style: normal;
  font-weight: 620;
  letter-spacing: 0.04em;
  line-height: 14px;
  text-transform: uppercase;
}

[data-ui-version="v2"][data-site-shell] .site-main h1 {
  margin: 0;
  color: var(--pc-text);
  font-family: var(--pc-font-editorial);
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 600;
  line-height: 1.02;
}

[data-ui-version="v2"][data-site-shell] .site-page-deck {
  max-width: 680px;
  margin: 20px 0 0;
  color: var(--pc-text-muted);
  font-family: var(--pc-font-ui);
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
}

[data-ui-version="v2"][data-site-shell] .byline {
  margin: 16px 0 0;
  color: var(--pc-text-muted);
}

[data-ui-version="v2"][data-site-shell] .site-context-link,
[data-ui-version="v2"][data-site-shell] .pc-context-back-link {
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  margin: 0 0 24px;
  color: var(--pc-text-muted);
  font-size: 13px;
  font-weight: 560;
  line-height: 20px;
  text-decoration: none;
}

[data-ui-version="v2"][data-site-shell] .site-context-link a,
[data-ui-version="v2"][data-site-shell] .pc-context-back-link a {
  color: inherit;
}

[data-ui-version="v2"][data-site-shell] .site-footer {
  position: relative;
  color: var(--pc-text);
  background: var(--pc-app-bg);
}

[data-ui-version="v2"][data-site-shell] .site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--pc-border-strong);
}

[data-ui-version="v2"][data-site-shell] .site-footer__inner {
  min-height: 80px;
  padding-block: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
}

[data-ui-version="v2"][data-site-shell] .site-footer__sentence {
  margin: 0;
  color: var(--pc-text-muted);
  font-size: 12px;
  font-weight: 450;
  line-height: 16px;
}

[data-ui-version="v2"][data-site-shell] .paper-surface,
[data-ui-version="v2"][data-site-shell] .pc-paper-surface {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgb(11 14 12 / 0.28);
  border-radius: var(--pc-radius-paper);
  color: var(--pc-coal-950);
  background: var(--pc-paper-100);
  box-shadow:
    inset 0 0 0 1px rgb(255 253 247 / 0.45),
    var(--pc-shadow-paper);
}

[data-ui-version="v2"][data-site-shell] .paper-surface::before,
[data-ui-version="v2"][data-site-shell] .pc-paper-surface::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background-image: url("/site/v2/assets/paper-fiber.6f0ab6cb957a.svg");
  background-repeat: repeat;
  mix-blend-mode: multiply;
  opacity: 0.025;
}

[data-ui-version="v2"][data-site-shell] .paper-surface > *,
[data-ui-version="v2"][data-site-shell] .pc-paper-surface > * {
  position: relative;
  z-index: 1;
}

[data-ui-version="v2"][data-site-shell] .reading-folio,
[data-ui-version="v2"][data-site-shell] .pc-reading-folio {
  width: min(100%, 816px);
  margin: 32px auto 0;
  padding: 48px;
  color: var(--pc-coal-950);
  font-family: var(--pc-font-editorial);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

[data-ui-version="v2"][data-site-shell] .reading-folio__body,
[data-ui-version="v2"][data-site-shell] .pc-reading-folio__body {
  width: min(100%, 720px);
  margin-inline: auto;
}

[data-ui-version="v2"][data-site-shell] .reading-folio :is(p, li, dd),
[data-ui-version="v2"][data-site-shell] .pc-reading-folio :is(p, li, dd) {
  color: var(--pc-coal-950);
  font-family: var(--pc-font-editorial);
  font-size: 16px;
  line-height: 24px;
}

[data-ui-version="v2"][data-site-shell] .reading-folio :is(h2, h3, h4, strong, b, em),
[data-ui-version="v2"][data-site-shell] .pc-reading-folio :is(h2, h3, h4, strong, b, em) {
  color: var(--pc-coal-950);
}

[data-ui-version="v2"][data-site-shell] .reading-folio :is(p, ol, ul),
[data-ui-version="v2"][data-site-shell] .pc-reading-folio :is(p, ol, ul) {
  margin-block: 0 18px;
}

[data-ui-version="v2"][data-site-shell] .reading-folio :is(ol, ul),
[data-ui-version="v2"][data-site-shell] .pc-reading-folio :is(ol, ul) {
  padding-left: 1.35em;
}

[data-ui-version="v2"][data-site-shell] .reading-folio li + li,
[data-ui-version="v2"][data-site-shell] .pc-reading-folio li + li {
  margin-top: 8px;
}

[data-ui-version="v2"][data-site-shell] .reading-folio h2,
[data-ui-version="v2"][data-site-shell] .pc-reading-folio h2 {
  margin: 44px 0 18px;
  font-family: var(--pc-font-editorial);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.14;
}

[data-ui-version="v2"][data-site-shell] .reading-folio h3,
[data-ui-version="v2"][data-site-shell] .pc-reading-folio h3 {
  margin: 30px 0 12px;
  font-family: var(--pc-font-editorial);
  font-size: 21px;
  font-weight: 600;
  line-height: 26px;
}

[data-ui-version="v2"][data-site-shell] .reading-folio__body > :first-child,
[data-ui-version="v2"][data-site-shell] .pc-reading-folio__body > :first-child {
  margin-top: 0;
}

[data-ui-version="v2"][data-site-shell] .reading-folio__body > :last-child,
[data-ui-version="v2"][data-site-shell] .pc-reading-folio__body > :last-child {
  margin-bottom: 0;
}

[data-ui-version="v2"][data-site-shell] .reading-folio a,
[data-ui-version="v2"][data-site-shell] .pc-reading-folio a {
  color: var(--pc-lacquer-700);
  text-decoration: underline;
}

[data-ui-version="v2"][data-site-shell] .reading-folio :focus-visible,
[data-ui-version="v2"][data-site-shell] .pc-reading-folio :focus-visible {
  outline-color: var(--pc-lacquer-700);
}

[data-ui-version="v2"][data-site-shell] .music-desk,
[data-ui-version="v2"][data-site-shell] .pc-music-desk {
  position: relative;
  margin-block: 32px 43px;
  padding: clamp(14px, 2.5vw, 24px);
  background: var(--pc-panel-bg);
}

[data-ui-version="v2"][data-site-shell] .music-desk::after,
[data-ui-version="v2"][data-site-shell] .pc-music-desk::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -11px;
  left: 0;
  height: 11px;
  border-top: 1px solid var(--pc-border-strong);
  background: var(--pc-coal-1000);
  box-shadow: 0 8px 16px rgb(0 0 0 / 0.18);
}

[data-ui-version="v2"][data-site-shell] .program-rule,
[data-ui-version="v2"][data-site-shell] .pc-program-rule {
  width: min(100%, 176px);
  height: 2px;
  margin-block: 24px 0;
  border: 0;
  background: var(--pc-accent);
}

[data-ui-version="v2"][data-site-shell] .site-title-composition {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

[data-ui-version="v2"][data-site-shell] .site-title-composition__lead {
  min-width: 0;
  grid-column: 1 / span 7;
}

[data-ui-version="v2"][data-site-shell] .page-intro {
  margin-block-end: clamp(56px, 7vw, 88px);
}

[data-ui-version="v2"][data-site-shell] .reading-page-intro__field,
[data-ui-version="v2"][data-site-shell] .support-page__empty-field {
  min-height: 176px;
  border-top: 1px solid var(--pc-border-subtle);
}

[data-ui-version="v2"][data-site-shell] .reading-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 816px);
  gap: 48px;
  align-items: start;
  justify-content: center;
}

[data-ui-version="v2"][data-site-shell] .reading-layout > .reading-folio,
[data-ui-version="v2"][data-site-shell] .reading-layout > .pc-reading-folio {
  margin: 0;
}

[data-ui-version="v2"][data-site-shell] .reading-contents {
  position: sticky;
  top: 88px;
  color: var(--pc-text-muted);
}

[data-ui-version="v2"][data-site-shell] .reading-contents > summary {
  display: none;
}

[data-ui-version="v2"][data-site-shell] .reading-contents nav > p {
  margin: 0 0 12px;
  color: var(--pc-text-faint);
  font-size: 11px;
  font-weight: 620;
  letter-spacing: 0.04em;
  line-height: 14px;
  text-transform: uppercase;
}

[data-ui-version="v2"][data-site-shell] .reading-contents ol {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--pc-border-subtle);
  list-style: none;
}

[data-ui-version="v2"][data-site-shell] .reading-contents li {
  border-bottom: 1px solid var(--pc-border-subtle);
}

[data-ui-version="v2"][data-site-shell] .reading-contents a {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--pc-text-muted);
  font-size: 13px;
  line-height: 18px;
  text-decoration: none;
}

[data-ui-version="v2"][data-site-shell] .reading-contents a:hover,
[data-ui-version="v2"][data-site-shell] .reading-contents a[aria-current="location"] {
  color: var(--pc-text);
  box-shadow: inset 2px 0 0 var(--pc-accent);
  padding-left: 12px;
}

[data-ui-version="v2"][data-site-shell] .reading-section {
  padding-block: 44px;
  border-top: 1px solid rgb(88 97 88 / 0.34);
  scroll-margin-top: 88px;
}

[data-ui-version="v2"][data-site-shell] .reading-folio h2[id],
[data-ui-version="v2"][data-site-shell] .pc-reading-folio h2[id] {
  scroll-margin-top: 88px;
}

[data-ui-version="v2"][data-site-shell] .reading-section:first-child {
  padding-top: 0;
  border-top: 0;
}

[data-ui-version="v2"][data-site-shell] .reading-section:last-child {
  padding-bottom: 0;
}

[data-ui-version="v2"][data-site-shell] .reading-section h2 {
  margin: 0 0 20px;
  font-family: var(--pc-font-editorial);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 600;
  line-height: 1.12;
}

[data-ui-version="v2"][data-site-shell] .reading-section :is(p, ol, ul) {
  margin-block: 0 18px;
}

[data-ui-version="v2"][data-site-shell] .reading-section :is(ol, ul) {
  padding-left: 1.35em;
}

[data-ui-version="v2"][data-site-shell] .reading-section li + li {
  margin-top: 8px;
}

[data-ui-version="v2"][data-site-shell] .reading-callout,
[data-ui-version="v2"][data-site-shell] .reading-folio blockquote,
[data-ui-version="v2"][data-site-shell] .pc-reading-folio blockquote {
  margin: 28px 0;
  padding: 18px 20px;
  border-left: 2px solid var(--pc-lacquer-700);
  color: var(--pc-coal-950);
  background: var(--pc-paper-50);
}

[data-ui-version="v2"][data-site-shell] .reading-callout p:last-child {
  margin-bottom: 0;
}

[data-ui-version="v2"][data-site-shell] .reading-faq {
  border-top: 1px solid rgb(88 97 88 / 0.48);
}

[data-ui-version="v2"][data-site-shell] .reading-faq:last-child {
  border-bottom: 1px solid rgb(88 97 88 / 0.48);
}

[data-ui-version="v2"][data-site-shell] .reading-faq summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--pc-coal-950);
  font-family: var(--pc-font-ui);
  font-size: 14px;
  font-weight: 620;
  line-height: 20px;
  cursor: pointer;
}

[data-ui-version="v2"][data-site-shell] .reading-faq summary::after {
  content: "+";
  font-family: var(--pc-font-mono);
}

[data-ui-version="v2"][data-site-shell] .reading-faq[open] summary::after {
  content: "−";
}

[data-ui-version="v2"][data-site-shell] .reading-faq > div {
  padding: 0 24px 18px 0;
}

[data-ui-version="v2"][data-site-shell] .support-page__body {
  max-width: 560px;
  margin: 20px 0 0;
  color: var(--pc-text-muted);
  font-size: 16px;
  line-height: 24px;
}

[data-ui-version="v2"][data-site-shell] .support-page__action {
  margin-top: 28px;
}

[data-ui-version="v2"][data-site-shell] .landing-hero,
[data-ui-version="v2"][data-site-shell] .landing-how,
[data-ui-version="v2"][data-site-shell] .landing-close {
  color: var(--pc-text);
  background: var(--pc-app-bg);
}

[data-ui-version="v2"][data-site-shell] .landing-hero {
  min-height: 0;
  padding-block: clamp(56px, 6vw, 80px) clamp(72px, 7vw, 96px);
}

[data-ui-version="v2"][data-site-shell] .landing-hero__composition {
  min-height: 0;
  align-items: center;
}

[data-ui-version="v2"][data-site-shell] .landing-hero__composition > .site-title-composition__lead {
  grid-column: 1 / span 5;
}

[data-ui-version="v2"][data-site-shell] .landing-hero h1 {
  max-width: 12ch;
  font-size: clamp(42px, 6vw, 68px);
  font-weight: 500;
  line-height: 0.98;
}

[data-ui-version="v2"][data-site-shell] .landing-hero .site-page-deck {
  max-width: 560px;
}

[data-ui-version="v2"][data-site-shell] .landing-hero__demo {
  min-width: 0;
  grid-column: 6 / -1;
  align-self: center;
  scroll-margin-top: 88px;
}

[data-ui-version="v2"][data-site-shell] .landing-hero__demo-label {
  margin-bottom: 10px;
}

[data-ui-version="v2"][data-site-shell] .landing-hero__cta-line {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  margin-top: 32px;
}

[data-ui-version="v2"][data-site-shell] .landing-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  flex: none;
}

[data-ui-version="v2"][data-site-shell] .landing-actions__secondary {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 560;
}

[data-ui-version="v2"][data-site-shell] .landing-actions .pc-button,
[data-ui-version="v2"][data-site-shell] .landing-close .pc-button,
[data-ui-version="v2"][data-site-shell] .landing-actions .pc-button:hover,
[data-ui-version="v2"][data-site-shell] .landing-close .pc-button:hover {
  color: var(--pc-accent-on);
  text-decoration: none;
}

[data-ui-version="v2"][data-site-shell] .landing-reassurance {
  margin: 18px 0 0;
  color: var(--pc-text-muted);
  font-size: 14px;
  line-height: 20px;
}

[data-ui-version="v2"][data-site-shell] .landing-hero__rule {
  width: auto;
  min-width: 40px;
  flex: 1;
  margin: 0 0 13px;
}

[data-ui-version="v2"][data-site-shell] .landing-how__heading,
[data-ui-version="v2"][data-site-shell] .landing-close h2 {
  margin: 0;
  color: var(--pc-text);
  font-family: var(--pc-font-editorial);
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 600;
  line-height: 1.08;
}

[data-ui-version="v2"][data-site-shell] .landing-live-demo {
  min-width: 0;
}

[data-ui-version="v2"][data-site-shell] .landing-live-demo__desk {
  width: 100%;
  margin: 0 0 22px;
  padding: clamp(8px, 1vw, 12px);
}

[data-ui-version="v2"][data-site-shell] .landing-live-demo__paper {
  position: relative;
  width: 100%;
  min-height: 220px;
  box-sizing: border-box;
  padding: clamp(8px, 1vw, 12px);
}

[data-ui-version="v2"][data-site-shell] .landing-live-demo__score-stage {
  position: relative;
  min-height: 196px;
}

[data-ui-version="v2"][data-site-shell] .landing-live-demo__engraving {
  position: relative;
  z-index: 2;
  min-height: 196px;
  overflow: visible;
  color: var(--pc-coal-900);
}

[data-ui-version="v2"][data-site-shell] .landing-live-demo__engraving > div,
[data-ui-version="v2"][data-site-shell] .landing-live-demo__engraving svg {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  overflow: visible !important;
  color: var(--pc-coal-900) !important;
}

[data-ui-version="v2"][data-site-shell] .landing-live-demo__engraving .landing-live-note {
  fill: var(--pc-coal-900) !important;
  stroke: var(--pc-coal-900) !important;
  transition: fill 80ms linear, stroke 80ms linear, opacity 80ms linear;
}

[data-ui-version="v2"][data-site-shell] .landing-live-demo__engraving .landing-live-note.is-expected {
  fill: var(--pc-lacquer-600) !important;
  stroke: var(--pc-lacquer-600) !important;
  filter: drop-shadow(0 0 0.01px currentColor);
}

[data-ui-version="v2"][data-site-shell] .landing-live-demo__engraving .landing-live-note.is-sounding,
[data-ui-version="v2"][data-site-shell] .landing-live-demo__engraving .landing-live-note.is-manual,
[data-ui-version="v2"][data-site-shell] .landing-live-demo__engraving .landing-live-note.is-key-down {
  fill: var(--pc-lacquer-700) !important;
  stroke: var(--pc-lacquer-700) !important;
  opacity: 1;
}

[data-ui-version="v2"][data-site-shell] .landing-live-demo__engraving .landing-live-note.is-expected.is-current {
  paint-order: stroke fill;
  stroke: var(--pc-lacquer-700) !important;
  stroke-width: 2px !important;
}

[data-ui-version="v2"][data-site-shell] .landing-live-demo__engraving .landing-live-note.is-neutral {
  fill: var(--pc-coal-600) !important;
  stroke: var(--pc-coal-600) !important;
  opacity: 0.78;
}

[data-ui-version="v2"][data-site-shell] .landing-live-demo__staff-skeleton {
  position: absolute;
  z-index: 1;
  inset: 22% 5%;
  display: grid;
  grid-template-rows: repeat(5, 1px) 48px repeat(5, 1px);
  align-content: start;
  gap: 8px;
  opacity: 0.38;
}

[data-ui-version="v2"][data-site-shell] .landing-live-demo__staff-skeleton span {
  display: block;
  background: var(--pc-coal-600);
}

[data-ui-version="v2"][data-site-shell] .landing-live-demo__staff-skeleton span:nth-child(6) {
  grid-row: 7;
}

[data-ui-version="v2"][data-site-shell] .landing-live-demo[data-render-phase="ready"] .landing-live-demo__staff-skeleton {
  display: none;
}

[data-ui-version="v2"][data-site-shell] .landing-live-demo__preparing {
  position: absolute;
  z-index: 3;
  right: 20px;
  bottom: 16px;
  color: var(--pc-coal-600);
  font-family: var(--pc-font-ui);
  font-size: 11px;
  line-height: 16px;
}

[data-ui-version="v2"][data-site-shell] .landing-live-demo__cursor {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  width: 2px;
  min-height: 48px;
  pointer-events: none;
  background: var(--pc-lacquer-700);
  border-radius: 1px;
  opacity: 0.78;
  will-change: transform;
}

[data-ui-version="v2"][data-site-shell] .landing-live-demo__targets {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
}

[data-ui-version="v2"][data-site-shell] .landing-note-target {
  position: absolute;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 2px;
  color: transparent;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
}

[data-ui-version="v2"][data-site-shell] .landing-note-target:focus-visible {
  outline: 2px solid var(--pc-lacquer-700);
  outline-offset: 2px;
  background: rgb(163 61 42 / 0.1);
}

[data-ui-version="v2"][data-site-shell] .landing-note-tooltip {
  position: absolute;
  z-index: 8;
  width: max-content;
  max-width: 180px;
  padding: 5px 8px;
  border: 1px solid var(--pc-coal-600);
  border-radius: 3px;
  color: var(--pc-bone-100);
  background: var(--pc-coal-950);
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.24);
  font-family: var(--pc-font-ui);
  font-size: 11px;
  line-height: 15px;
  white-space: nowrap;
  pointer-events: none;
}

[data-ui-version="v2"][data-site-shell] .landing-source-caption {
  width: min(100%, 680px);
  margin: 0;
  color: var(--pc-text-faint);
  font-size: 12px;
  line-height: 16px;
}

[data-ui-version="v2"][data-site-shell] .landing-live-demo__controls {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--pc-border-subtle);
}

[data-ui-version="v2"][data-site-shell] .landing-live-demo__actions,
[data-ui-version="v2"][data-site-shell] .landing-live-demo__devices,
[data-ui-version="v2"][data-site-shell] .landing-live-demo__recovery {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

[data-ui-version="v2"][data-site-shell] .landing-live-demo__actions .pc-button,
[data-ui-version="v2"][data-site-shell] .landing-live-demo__devices .pc-button,
[data-ui-version="v2"][data-site-shell] .landing-live-demo__recovery .pc-button {
  min-height: 40px;
}

[data-ui-version="v2"][data-site-shell] .landing-live-demo__status,
[data-ui-version="v2"][data-site-shell] .landing-live-demo__help,
[data-ui-version="v2"][data-site-shell] .landing-live-demo__load p,
[data-ui-version="v2"][data-site-shell] .landing-live-demo__error {
  margin: 12px 0 0;
  color: var(--pc-text-muted);
  font-size: 13px;
  line-height: 19px;
}

[data-ui-version="v2"][data-site-shell] .landing-live-demo__status {
  min-height: 19px;
}

[data-ui-version="v2"][data-site-shell] .landing-live-demo__load {
  margin-top: 22px;
}

[data-ui-version="v2"][data-site-shell] .landing-live-demo__explore {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--pc-border-subtle);
}

[data-ui-version="v2"][data-site-shell] .landing-pitch-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

[data-ui-version="v2"][data-site-shell] .landing-pitch-palette__key {
  width: 44px;
  min-width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 0;
  border: 1px solid var(--pc-border-strong);
  border-radius: var(--pc-radius-control);
  color: var(--pc-text);
  background: transparent;
  font: inherit;
  cursor: pointer;
}

[data-ui-version="v2"][data-site-shell] .landing-pitch-palette__key:hover,
[data-ui-version="v2"][data-site-shell] .landing-pitch-palette__key:focus-visible {
  border-color: var(--pc-accent);
  background: var(--pc-control-hover);
}

[data-ui-version="v2"][data-site-shell] .landing-pitch-palette__key span {
  font-size: 12px;
  font-weight: 620;
  line-height: 16px;
}

[data-ui-version="v2"][data-site-shell] .landing-pitch-palette__key kbd {
  color: var(--pc-text-faint);
  font-family: var(--pc-font-mono);
  font-size: 9px;
  line-height: 12px;
}

[data-ui-version="v2"][data-site-shell] .landing-live-demo__devices,
[data-ui-version="v2"][data-site-shell] .landing-live-demo__recovery {
  margin-top: 14px;
}

[data-ui-version="v2"][data-site-shell] .landing-how {
  padding-block: clamp(64px, 9vw, 112px);
  border-top: 1px solid var(--pc-border-subtle);
}

[data-ui-version="v2"][data-site-shell] .landing-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 48px 0 0;
  padding: 0;
  border-block: 1px solid var(--pc-border-subtle);
  list-style: none;
}

[data-ui-version="v2"][data-site-shell] .landing-steps li {
  min-height: 248px;
  padding: 28px 32px 32px;
  border-left: 1px solid var(--pc-border-subtle);
}

[data-ui-version="v2"][data-site-shell] .landing-steps li:first-child {
  border-left: 0;
}

[data-ui-version="v2"][data-site-shell] .landing-steps__number {
  color: var(--pc-accent);
  font-family: var(--pc-font-mono);
  font-size: 11px;
  line-height: 16px;
}

[data-ui-version="v2"][data-site-shell] .landing-steps h3 {
  margin: 44px 0 10px;
  color: var(--pc-text);
  font-family: var(--pc-font-editorial);
  font-size: 24px;
  font-weight: 600;
  line-height: 28px;
}

[data-ui-version="v2"][data-site-shell] .landing-steps p,
[data-ui-version="v2"][data-site-shell] .landing-close p {
  margin: 0;
  color: var(--pc-text-muted);
  font-size: 14px;
  line-height: 20px;
}

[data-ui-version="v2"][data-site-shell] .landing-close {
  padding-block: clamp(72px, 10vw, 120px);
  border-top: 1px solid var(--pc-border-subtle);
}

[data-ui-version="v2"][data-site-shell] .landing-close__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(220px, 3fr) 2fr;
  gap: 24px;
  align-items: end;
}

[data-ui-version="v2"][data-site-shell] .landing-close h2 + p {
  margin-top: 14px;
}

[data-ui-version="v2"][data-site-shell] .landing-close__rule {
  position: absolute;
  right: 0;
  bottom: -28px;
  left: 0;
  width: 100%;
}

[data-ui-version="v2"][data-site-shell] .site-signature-slot {
  min-width: 0;
  min-height: 1px;
  grid-column: 9 / -1;
}

[data-ui-version="v2"][data-site-shell] .site-section-heading {
  margin: 0 0 24px;
  color: var(--pc-text);
  font-family: var(--pc-font-editorial);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 600;
  line-height: 1.12;
}

[data-ui-version="v2"][data-site-shell] .site-cta,
[data-ui-version="v2"][data-site-shell] .cta {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  margin: 30px 0 8px;
  padding: 12px 28px;
  border-radius: var(--pc-radius-control);
  color: var(--pc-accent-on);
  background: var(--pc-accent);
  font-family: var(--pc-font-ui);
  font-size: 16px;
  font-weight: 620;
  text-decoration: none;
}

[data-ui-version="v2"][data-site-shell] .site-cta:hover,
[data-ui-version="v2"][data-site-shell] .cta:hover {
  color: var(--pc-accent-on);
  background: var(--pc-accent-hover);
}

/* Editorial index: one continuous ruled register with a local 4-column rail. */
[data-ui-version="v2"][data-site-shell] .editorial-index {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(220px, 4fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}

[data-ui-version="v2"][data-site-shell] .editorial-index__content {
  min-width: 0;
}

[data-ui-version="v2"][data-site-shell] .editorial-index__directory {
  position: sticky;
  top: 88px;
  border-top: 2px solid var(--pc-accent);
}

[data-ui-version="v2"][data-site-shell] .editorial-index__directory > summary {
  display: none;
}

[data-ui-version="v2"][data-site-shell] .alphabet-directory {
  display: grid;
  grid-template-columns: repeat(6, minmax(36px, 1fr));
  gap: 0;
}

[data-ui-version="v2"][data-site-shell] .alphabet-directory :is(a, span),
[data-ui-version="v2"][data-site-shell] .theory-directory a {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--pc-border-subtle);
  color: var(--pc-text-muted);
  font-size: 12px;
  font-weight: 560;
  text-decoration: none;
}

[data-ui-version="v2"][data-site-shell] .alphabet-directory a:hover,
[data-ui-version="v2"][data-site-shell] .alphabet-directory a[aria-current="location"],
[data-ui-version="v2"][data-site-shell] .theory-directory a:hover {
  color: var(--pc-text);
  background: var(--pc-control-hover);
}

[data-ui-version="v2"][data-site-shell] .alphabet-directory span[aria-disabled="true"] {
  color: var(--pc-text-faint);
  opacity: 0.45;
}

[data-ui-version="v2"][data-site-shell] .composer-count {
  margin: 18px 0 0;
  color: var(--pc-text-muted);
  font-size: 14px;
  line-height: 20px;
}

[data-ui-version="v2"][data-site-shell] .composer-search {
  margin-bottom: 40px;
}

[data-ui-version="v2"][data-site-shell] .composer-search label {
  display: block;
  margin-bottom: 10px;
  color: var(--pc-text);
  font-size: 13px;
  font-weight: 560;
  line-height: 18px;
}

[data-ui-version="v2"][data-site-shell] .composer-search input {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--pc-border-strong);
  border-radius: var(--pc-radius-control);
  color: var(--pc-text);
  background: var(--pc-panel-raised);
  font: inherit;
  font-size: 16px;
}

[data-ui-version="v2"][data-site-shell] .composer-empty {
  max-width: 560px;
  margin: 0 0 32px;
  color: var(--pc-text-muted);
  font-size: 16px;
  line-height: 24px;
}

[data-ui-version="v2"][data-site-shell] .composer-letter {
  margin-top: 48px;
  scroll-margin-top: 88px;
}

[data-ui-version="v2"][data-site-shell] .composer-letter:first-child {
  margin-top: 0;
}

[data-ui-version="v2"][data-site-shell] .composer-letter > h2 {
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--pc-accent);
  color: var(--pc-accent);
  font-family: var(--pc-font-mono);
  font-size: 12px;
  font-weight: 560;
  line-height: 16px;
}

[data-ui-version="v2"][data-site-shell] .composer-roster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--pc-border-subtle);
  list-style: none;
}

[data-ui-version="v2"][data-site-shell] .composer-row {
  min-width: 0;
  border-bottom: 1px solid var(--pc-border-subtle);
}

[data-ui-version="v2"][data-site-shell] .composer-row:nth-last-child(-n + 2) {
  border-bottom: 0;
}

[data-ui-version="v2"][data-site-shell] .composer-row:nth-child(odd) {
  border-right: 1px solid var(--pc-border-subtle);
}

[data-ui-version="v2"][data-site-shell] .composer-row > a {
  min-height: 76px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  color: inherit;
  text-decoration: none;
}

[data-ui-version="v2"][data-site-shell] .composer-row > a:hover {
  background: var(--pc-control-hover);
}

[data-ui-version="v2"][data-site-shell] .composer-row__name {
  color: var(--pc-text);
  font-family: var(--pc-font-editorial);
  font-size: 19px;
  font-weight: 600;
  line-height: 24px;
}

[data-ui-version="v2"][data-site-shell] .composer-row__count {
  flex: none;
  color: var(--pc-text-muted);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}

/* Each composer masthead carries one reviewed passage, lightly engraved on coal. */
[data-ui-version="v2"][data-site-shell] .composer-signature {
  min-height: 220px;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

[data-ui-version="v2"][data-site-shell] .composer-signature img {
  width: 100%;
  height: 176px;
  display: block;
  object-fit: cover;
  object-position: center;
  opacity: 0.07;
}

[data-ui-version="v2"][data-site-shell] .composer-signature figcaption {
  margin-top: 12px;
  color: var(--pc-text-faint);
  font-size: 12px;
  line-height: 16px;
}

[data-ui-version="v2"][data-site-shell] .composer-detail {
  width: min(100%, 960px);
}

[data-ui-version="v2"][data-site-shell] .composer-biography {
  width: min(100%, 720px);
  margin: 0 0 clamp(56px, 7vw, 80px);
  color: var(--pc-text-muted);
  font-family: var(--pc-font-editorial);
  font-size: 16px;
  line-height: 24px;
}

/* A shared concert-program list, used by composer collections and Library. */
[data-ui-version="v2"][data-site-shell] .piece-program {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--pc-border-subtle);
  counter-reset: none;
  list-style: none;
}

[data-ui-version="v2"][data-site-shell] .piece-program__entry {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) max-content;
  gap: 20px;
  align-items: start;
  padding: 24px 0;
  border-top: 1px solid var(--pc-border-subtle);
}

[data-ui-version="v2"][data-site-shell] .piece-program__number {
  padding-top: 4px;
  color: var(--pc-text-faint);
  font-family: var(--pc-font-mono);
  font-size: 11px;
  line-height: 16px;
  text-align: right;
}

[data-ui-version="v2"][data-site-shell] .piece-program__copy {
  min-width: 0;
}

[data-ui-version="v2"][data-site-shell] .piece-program__title {
  color: var(--pc-text);
  font-family: var(--pc-font-editorial);
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  text-decoration: none;
}

[data-ui-version="v2"][data-site-shell] .piece-program :is(.piece-program__byline, .piece-program__context, .piece-program__reason) {
  margin: 5px 0 0;
  color: var(--pc-text-muted);
  font-family: var(--pc-font-ui);
  font-size: 14px;
  line-height: 20px;
}

[data-ui-version="v2"][data-site-shell] .piece-program__reason {
  color: var(--pc-text-faint);
}

[data-ui-version="v2"][data-site-shell] .piece-program__action {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-inline: 10px;
  color: var(--pc-accent);
  font-size: 13px;
  font-weight: 560;
  text-decoration: none;
}

[data-ui-version="v2"][data-site-shell] .program-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 32px;
}

[data-ui-version="v2"][data-site-shell] .program-pagination a {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid var(--pc-border-subtle);
  border-radius: var(--pc-radius-control);
  color: var(--pc-text-muted);
  text-decoration: none;
}

[data-ui-version="v2"][data-site-shell] .program-pagination a[aria-current="page"] {
  border-color: var(--pc-accent);
  color: var(--pc-text);
}

[data-ui-version="v2"][data-site-shell] .program-pagination__status {
  margin: 12px 0 0;
  color: var(--pc-text-faint);
  font-size: 12px;
  line-height: 16px;
}

/* Piece invitation: a 7/5 recital title block joined by one long rule. */
[data-ui-version="v2"][data-site-shell] .piece-invitation {
  width: 100%;
}

[data-ui-version="v2"][data-site-shell] .piece-invitation__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

[data-ui-version="v2"][data-site-shell] .piece-invitation__lead {
  min-width: 0;
  grid-column: 1 / span 7;
  grid-row: 1;
}

[data-ui-version="v2"][data-site-shell] .piece-invitation__composer {
  margin: 18px 0 0;
  color: var(--pc-text-muted);
  font-family: var(--pc-font-editorial);
  font-size: 20px;
  line-height: 24px;
}

[data-ui-version="v2"][data-site-shell] .piece-invitation__composer a {
  color: inherit;
}

[data-ui-version="v2"][data-site-shell] .piece-invitation__context {
  max-width: 620px;
  margin: 22px 0 0;
  color: var(--pc-text-muted);
  font-size: 16px;
  line-height: 24px;
}

[data-ui-version="v2"][data-site-shell] .piece-invitation__rule {
  width: 100%;
  grid-column: 1 / span 8;
  grid-row: 2;
  margin: 32px 0 0;
}

[data-ui-version="v2"][data-site-shell] .piece-invitation__actions {
  grid-column: 9 / -1;
  grid-row: 2;
  margin-top: 32px;
  padding: 20px 0 0 24px;
  border-top: 2px solid var(--pc-accent);
}

[data-ui-version="v2"][data-site-shell] .piece-invitation__actions .site-cta {
  margin: 0 0 16px;
}

[data-ui-version="v2"][data-site-shell] .piece-invitation__secondary {
  min-height: 44px;
  display: flex;
  align-items: center;
  width: max-content;
  font-size: 13px;
  font-weight: 560;
}

[data-ui-version="v2"][data-site-shell] .piece-invitation__actions p {
  margin: 18px 0 0;
  color: var(--pc-text-muted);
  font-size: 14px;
  line-height: 20px;
}

[data-ui-version="v2"][data-site-shell] .piece-edition {
  width: min(100%, 720px);
  margin-top: clamp(80px, 9vw, 120px);
  padding-top: 36px;
  border-top: 1px solid var(--pc-border-subtle);
}

[data-ui-version="v2"][data-site-shell] .piece-edition > h2,
[data-ui-version="v2"][data-site-shell] .related-links > h2 {
  margin: 0 0 18px;
  color: var(--pc-text);
  font-family: var(--pc-font-editorial);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 600;
  line-height: 1.12;
}

[data-ui-version="v2"][data-site-shell] .piece-edition__prose {
  color: var(--pc-text-muted);
  font-family: var(--pc-font-editorial);
  font-size: 16px;
  line-height: 24px;
}

[data-ui-version="v2"][data-site-shell] .piece-edition__prose p {
  margin: 0 0 16px;
}

[data-ui-version="v2"][data-site-shell] .piece-edition--folio {
  width: min(100%, 816px);
}

[data-ui-version="v2"][data-site-shell] .piece-edition--folio .piece-edition__prose {
  margin: 28px 0 0;
  color: var(--pc-coal-950);
}

[data-ui-version="v2"][data-site-shell] .related-links {
  margin-top: 36px;
}

[data-ui-version="v2"][data-site-shell] .related-links ul {
  margin: 0;
  padding-left: 1.25em;
}

/* Theory: ruled families, live paper, and a target-derived dark-margin loupe. */
[data-ui-version="v2"][data-site-shell] .theory-index-category {
  padding-block: 0 72px;
}

[data-ui-version="v2"][data-site-shell] .theory-index-category + .theory-index-category {
  padding-top: 64px;
  border-top: 2px solid var(--pc-accent);
}

[data-ui-version="v2"][data-site-shell] .theory-index-category__heading {
  max-width: 680px;
  margin-bottom: 28px;
}

[data-ui-version="v2"][data-site-shell] .theory-index-category__heading h2 {
  margin: 6px 0 8px;
  font-family: var(--pc-font-editorial);
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.08;
}

[data-ui-version="v2"][data-site-shell] .theory-index-category__heading h2 a {
  color: var(--pc-text);
  text-decoration: none;
}

[data-ui-version="v2"][data-site-shell] .theory-index-category__heading > p:last-child {
  margin: 0;
  color: var(--pc-text-muted);
  font-family: var(--pc-font-editorial);
  font-size: 16px;
  line-height: 24px;
}

[data-ui-version="v2"][data-site-shell] .theory-roster {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--pc-border-subtle);
  list-style: none;
}

[data-ui-version="v2"][data-site-shell] .theory-roster__entry {
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding: 28px 0;
  border-top: 1px solid var(--pc-border-subtle);
}

[data-ui-version="v2"][data-site-shell] .theory-index__specimen {
  width: 160px;
  min-width: 0;
  margin: 0;
}

[data-ui-version="v2"][data-site-shell] .theory-index__specimen img {
  width: 138px;
  height: 86px;
  box-sizing: border-box;
  display: block;
  padding: 8px;
  border: 1px solid rgb(11 14 12 / 0.28);
  border-radius: var(--pc-radius-paper);
  background: var(--pc-paper-100);
  box-shadow: inset 0 0 0 1px rgb(255 253 247 / 0.45), var(--pc-shadow-paper);
  object-fit: contain;
}

[data-ui-version="v2"][data-site-shell] .theory-index__specimen figcaption {
  margin-top: 10px;
  color: var(--pc-text-faint);
  font-size: 11px;
  line-height: 16px;
}

[data-ui-version="v2"][data-site-shell] .theory-roster__copy :is(h2, h3) {
  margin: 0;
  font-family: var(--pc-font-editorial);
  font-size: 24px;
  line-height: 28px;
}

[data-ui-version="v2"][data-site-shell] .theory-roster__copy :is(h2, h3) a {
  color: var(--pc-text);
  text-decoration: none;
}

[data-ui-version="v2"][data-site-shell] .theory-roster__copy p {
  margin: 10px 0 0;
  color: var(--pc-text-muted);
  font-family: var(--pc-font-editorial);
  font-size: 16px;
  line-height: 24px;
}

[data-ui-version="v2"][data-site-shell] .theory-roster__action {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 560;
}

[data-ui-version="v2"][data-site-shell] .theory-directory {
  display: flex;
  flex-direction: column;
}

[data-ui-version="v2"][data-site-shell] .theory-directory a {
  justify-content: flex-start;
  padding-inline: 12px;
}

[data-ui-version="v2"][data-site-shell] .theory-example-program > h2 {
  margin: 0 0 28px;
  color: var(--pc-text);
  font-family: var(--pc-font-editorial);
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.08;
}

[data-ui-version="v2"][data-site-shell] .theory-live-example {
  margin: 0 0 clamp(64px, 8vw, 104px);
  padding-top: 28px;
  border-top: 1px solid var(--pc-border-subtle);
}

[data-ui-version="v2"][data-site-shell] .theory-live-example--primary {
  padding-top: 0;
  border-top: 0;
}

[data-ui-version="v2"][data-site-shell] .theory-live-example__header {
  max-width: 720px;
  margin-bottom: 20px;
}

[data-ui-version="v2"][data-site-shell] .theory-live-example__header :is(h2, h3) {
  margin: 0;
  color: var(--pc-text);
  font-family: var(--pc-font-editorial);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15;
}

[data-ui-version="v2"][data-site-shell] .theory-live-example__header p {
  margin: 8px 0 0;
  color: var(--pc-text-muted);
  font-size: 14px;
  line-height: 21px;
}

[data-ui-version="v2"][data-site-shell] .theory-example-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

[data-ui-version="v2"][data-site-shell] .theory-example-controls :is(button, a),
[data-ui-version="v2"][data-site-shell] .theory-load-example {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  border: 1px solid var(--pc-border-strong);
  border-radius: var(--pc-radius-control);
  color: var(--pc-text);
  background: transparent;
  font: 560 13px/18px var(--pc-font-ui);
  text-decoration: none;
  cursor: pointer;
}

[data-ui-version="v2"][data-site-shell] .theory-example-controls :is(button, a):hover,
[data-ui-version="v2"][data-site-shell] .theory-load-example:hover {
  border-color: var(--pc-accent);
  background: var(--pc-control-hover);
}

[data-ui-version="v2"][data-site-shell] .theory-example-controls button:disabled {
  color: var(--pc-text-faint);
  cursor: not-allowed;
  opacity: 0.64;
}

[data-ui-version="v2"][data-site-shell] .theory-music-desk {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(240px, 4fr);
  gap: clamp(28px, 4vw, 52px);
  align-items: stretch;
  padding: clamp(20px, 3vw, 36px) clamp(20px, 3vw, 36px) 48px;
  overflow: hidden;
  background: var(--pc-coal-850);
}

[data-ui-version="v2"][data-site-shell] .theory-desk-ledge {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 11px;
  border-top: 1px solid rgb(255 253 247 / 0.2);
  background: #080a09;
  box-shadow: 0 -5px 14px rgb(0 0 0 / 0.28);
}

[data-ui-version="v2"][data-site-shell] .theory-score-paper {
  min-width: 0;
  margin: 0;
  padding: clamp(16px, 2vw, 24px);
  overflow-x: auto;
}

[data-ui-version="v2"][data-site-shell] .theory-score-viewport {
  position: relative;
  min-width: 520px;
  max-height: 520px;
  overflow: hidden;
  color: var(--pc-coal-950);
}

[data-ui-version="v2"][data-site-shell] .theory-score-viewport > svg {
  width: 100%;
  height: auto;
  display: block;
}

[data-ui-version="v2"][data-site-shell] .theory-staff-skeleton {
  position: absolute;
  inset: 18% 4%;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 13px,
    rgb(42 48 43 / 0.28) 13px 14px,
    transparent 14px 27px
  );
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

[data-ui-version="v2"][data-site-shell] .theory-score-paper figcaption {
  margin-top: 14px;
  color: var(--pc-coal-600);
  font-family: var(--pc-font-ui);
  font-size: 12px;
  line-height: 16px;
}

[data-ui-version="v2"][data-site-shell] .theory-loupe {
  position: relative;
  align-self: center;
  padding: 20px 0 20px 28px;
  border-left: 2px solid var(--pc-accent);
  color: var(--pc-text-muted);
}

[data-ui-version="v2"][data-site-shell] .theory-loupe::before {
  position: absolute;
  top: 50%;
  right: 100%;
  width: clamp(28px, 4vw, 52px);
  height: 1px;
  background: var(--pc-accent);
  content: "";
}

[data-ui-version="v2"][data-site-shell] .theory-loupe__label {
  margin: 0 0 12px;
  color: var(--pc-accent);
  font-size: 11px;
  font-weight: 620;
  letter-spacing: 0.04em;
  line-height: 14px;
  text-transform: uppercase;
}

[data-ui-version="v2"][data-site-shell] .theory-loupe__crop {
  height: 180px;
  box-sizing: border-box;
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgb(11 14 12 / 0.28);
  border-radius: var(--pc-radius-paper);
  background: var(--pc-paper-100);
  box-shadow: inset 0 0 0 1px rgb(255 253 247 / 0.45), var(--pc-shadow-paper);
}

[data-ui-version="v2"][data-site-shell] .theory-loupe__crop:empty {
  min-height: 180px;
  background: var(--pc-paper-100);
}

[data-ui-version="v2"][data-site-shell] .theory-loupe__crop svg {
  width: 100%;
  height: 100%;
  display: block;
  color: var(--pc-coal-950);
}

[data-ui-version="v2"][data-site-shell] .theory-loupe > p:last-child {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 16px;
}

[data-ui-version="v2"][data-site-shell] .theory-explanation {
  margin-top: 0;
}

[data-ui-version="v2"][data-site-shell] .theory-example-status,
[data-ui-version="v2"][data-site-shell] .theory-playback-note {
  margin: 12px 0 0;
  color: var(--pc-text-faint);
  font-size: 12px;
  line-height: 18px;
}

[data-ui-version="v2"][data-site-shell] .theory-example-status {
  min-height: 18px;
  color: var(--pc-text-muted);
}

[data-ui-version="v2"][data-site-shell] .theory-load-example {
  margin-top: 12px;
}

[data-ui-version="v2"][data-site-shell] .theory-example-target--focused {
  filter: drop-shadow(0 0 3px var(--pc-lacquer-700));
  stroke: var(--pc-lacquer-700) !important;
  stroke-width: 2px !important;
}

[data-ui-version="v2"][data-site-shell] .theory-note-sounding {
  fill: var(--pc-lacquer-700) !important;
  stroke: var(--pc-lacquer-700) !important;
}

[data-ui-version="v2"][data-site-shell] .theory-loupe-target {
  filter: drop-shadow(0 0 3px var(--pc-lacquer-700));
}

[data-ui-version="v2"][data-site-shell] .theory-learning-layout {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(240px, 4fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
  margin-top: 32px;
}

[data-ui-version="v2"][data-site-shell] .theory-learning-rail {
  border-top: 2px solid var(--pc-accent);
}

[data-ui-version="v2"][data-site-shell] .theory-learning-rail section {
  padding: 18px 0;
  border-bottom: 1px solid var(--pc-border-subtle);
}

[data-ui-version="v2"][data-site-shell] .theory-learning-rail h2 {
  margin: 0 0 6px;
  color: var(--pc-text);
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 16px;
  text-transform: uppercase;
}

[data-ui-version="v2"][data-site-shell] .theory-learning-rail p {
  margin: 0;
  color: var(--pc-text-muted);
  font-size: 13px;
  line-height: 20px;
}

[data-ui-version="v2"][data-site-shell] .theory-related-examples {
  width: min(100%, 816px);
  margin: 0 0 clamp(48px, 7vw, 80px);
  padding-top: 28px;
  border-top: 2px solid var(--pc-accent);
}

[data-ui-version="v2"][data-site-shell] .theory-related-examples h2 {
  margin: 0 0 16px;
  color: var(--pc-text);
  font-family: var(--pc-font-editorial);
  font-size: 24px;
  line-height: 28px;
}

[data-ui-version="v2"][data-site-shell] .theory-related-examples ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--pc-border-subtle);
  list-style: none;
}

[data-ui-version="v2"][data-site-shell] .theory-related-examples li {
  min-width: 0;
  padding: 18px 20px 18px 0;
  border-top: 1px solid var(--pc-border-subtle);
}

[data-ui-version="v2"][data-site-shell] .theory-related-examples li:nth-child(even) {
  padding-inline: 20px 0;
}

[data-ui-version="v2"][data-site-shell] .theory-related-examples a {
  color: var(--pc-text);
  font-weight: 560;
}

[data-ui-version="v2"][data-site-shell] .theory-related-examples p {
  margin: 8px 0 0;
  color: var(--pc-text-muted);
  font-size: 13px;
  line-height: 20px;
}

[data-ui-version="v2"][data-site-shell] .reading-prompt {
  padding-block: 36px;
  border-top: 1px solid rgb(88 97 88 / 0.34);
}

[data-ui-version="v2"][data-site-shell] .reading-prompt:first-child {
  border-top: 0;
}

[data-ui-version="v2"][data-site-shell] .reading-prompt h2 {
  margin: 0 0 14px;
  font-size: 26px;
  line-height: 1.12;
}

[data-ui-version="v2"][data-site-shell] .reading-prompt p {
  margin: 0;
}

/* Static articles/legal pages share the same bounded folio and ruled index. */
[data-ui-version="v2"][data-site-shell] .site-article > .site-title-composition {
  margin-bottom: clamp(56px, 7vw, 88px);
}

[data-ui-version="v2"][data-site-shell] .site-article .site-title-composition .byline {
  max-width: 680px;
  margin-top: 20px;
  color: var(--pc-text-muted);
  font-family: var(--pc-font-ui);
  font-size: 18px;
  font-style: normal;
  line-height: 27px;
}

[data-ui-version="v2"][data-site-shell] .site-article > .reading-folio {
  margin-top: 0;
}

[data-ui-version="v2"][data-site-shell] .reading-folio .piece {
  margin: 28px 0;
  padding: 20px;
  border-left: 2px solid var(--pc-lacquer-700);
  background: var(--pc-paper-50);
}

[data-ui-version="v2"][data-site-shell] .reading-folio .piece h3 {
  margin: 0 0 10px;
  color: var(--pc-coal-950);
  font-family: var(--pc-font-editorial);
  font-size: 21px;
  line-height: 26px;
}

[data-ui-version="v2"][data-site-shell] .reading-folio .piece > :last-child {
  margin-bottom: 0;
}

[data-ui-version="v2"][data-site-shell] .reading-folio .about {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgb(88 97 88 / 0.48);
}

[data-ui-version="v2"][data-site-shell] .article-metadata,
[data-ui-version="v2"][data-site-shell] .legal-updated {
  margin: 16px 0 0;
  color: var(--pc-text-muted);
  font-family: var(--pc-font-ui);
  font-size: 12px;
  line-height: 16px;
}

[data-ui-version="v2"][data-site-shell] .article-program {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--pc-accent);
  list-style: none;
}

[data-ui-version="v2"][data-site-shell] .article-program > li {
  min-width: 0;
  padding: 24px;
  border-right: 1px solid var(--pc-border-subtle);
  border-bottom: 1px solid var(--pc-border-subtle);
}

[data-ui-version="v2"][data-site-shell] .article-program > li:nth-child(even) {
  border-right: 0;
}

[data-ui-version="v2"][data-site-shell] .article-program h2,
[data-ui-version="v2"][data-site-shell] .article-program h3 {
  margin: 0;
  font-family: var(--pc-font-editorial);
  font-size: 22px;
  line-height: 27px;
}

[data-ui-version="v2"][data-site-shell] .article-program :is(h2, h3) a {
  color: var(--pc-text);
  text-decoration: none;
}

[data-ui-version="v2"][data-site-shell] .article-program p {
  margin: 12px 0 0;
  color: var(--pc-text-muted);
  font-size: 14px;
  line-height: 20px;
}

[data-ui-version="v2"][data-site-shell] .blog-index__note {
  padding: 24px 0;
}

[data-ui-version="v2"][data-site-shell] .blog-index__note h2 {
  margin: 0;
  color: var(--pc-text);
  font-family: var(--pc-font-editorial);
  font-size: 22px;
  line-height: 27px;
}

[data-ui-version="v2"][data-site-shell] .blog-index__note p {
  margin: 12px 0 0;
  color: var(--pc-text-muted);
  font-size: 14px;
  line-height: 20px;
}

[data-ui-version="v2"][data-site-shell] [data-site-menu] > summary {
  cursor: pointer;
}

@media (max-width: 1023px) {
  [data-ui-version="v2"][data-site-shell] .landing-hero__composition {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  [data-ui-version="v2"][data-site-shell] .landing-hero__composition > .site-title-composition__lead,
  [data-ui-version="v2"][data-site-shell] .landing-hero__demo {
    grid-column: 1;
  }

  [data-ui-version="v2"][data-site-shell] .composer-signature {
    min-height: 0;
    grid-column: 1 / -1;
  }

  [data-ui-version="v2"][data-site-shell] .composer-signature img {
    height: auto;
    aspect-ratio: 4 / 1;
  }

  [data-ui-version="v2"][data-site-shell] .editorial-index {
    grid-template-columns: minmax(0, 816px);
    gap: 32px;
  }

  [data-ui-version="v2"][data-site-shell] .editorial-index__directory {
    position: static;
    order: -1;
    border-block: 1px solid var(--pc-border-subtle);
    border-top-color: var(--pc-accent);
  }

  [data-ui-version="v2"][data-site-shell] .editorial-index__directory > summary {
    min-height: 48px;
    display: flex;
    align-items: center;
    color: var(--pc-text);
    font-size: 13px;
    font-weight: 560;
    cursor: pointer;
  }

  [data-ui-version="v2"][data-site-shell] .editorial-index__directory > :is(nav, div) {
    padding-bottom: 12px;
  }

  [data-ui-version="v2"][data-site-shell] .piece-invitation__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  [data-ui-version="v2"][data-site-shell] .piece-invitation__lead,
  [data-ui-version="v2"][data-site-shell] .piece-invitation__rule,
  [data-ui-version="v2"][data-site-shell] .piece-invitation__actions {
    grid-column: 1;
  }

  [data-ui-version="v2"][data-site-shell] .piece-invitation__lead {
    grid-row: 1;
  }

  [data-ui-version="v2"][data-site-shell] .piece-invitation__rule {
    grid-row: 2;
    margin-top: 36px;
  }

  [data-ui-version="v2"][data-site-shell] .piece-invitation__actions {
    grid-row: 3;
    margin: 0;
    padding: 24px 0 0;
    border-top: 0;
  }

  [data-ui-version="v2"][data-site-shell] .theory-music-desk {
    grid-template-columns: minmax(0, 816px);
    gap: 24px;
  }

  [data-ui-version="v2"][data-site-shell] .theory-loupe {
    margin-top: 24px;
    padding: 20px 0 0;
    border-top: 2px solid var(--pc-accent);
    border-left: 0;
  }

  [data-ui-version="v2"][data-site-shell] .theory-loupe::before {
    top: auto;
    right: auto;
    bottom: 100%;
    left: 28px;
    width: 1px;
    height: 24px;
  }

  [data-ui-version="v2"][data-site-shell] .theory-loupe__crop {
    height: 168px;
  }

  [data-ui-version="v2"][data-site-shell] .theory-learning-layout {
    grid-template-columns: minmax(0, 816px);
    gap: 32px;
  }

  [data-ui-version="v2"][data-site-shell] .theory-learning-rail {
    grid-row: 1;
  }

  [data-ui-version="v2"][data-site-shell] .theory-explanation {
    grid-row: 2;
  }

  [data-ui-version="v2"][data-site-shell] .reading-layout {
    grid-template-columns: minmax(0, 816px);
    gap: 24px;
  }

  [data-ui-version="v2"][data-site-shell] .reading-contents {
    position: static;
    width: min(100%, 816px);
    border-block: 1px solid var(--pc-border-subtle);
  }

  [data-ui-version="v2"][data-site-shell] .reading-contents > summary {
    min-height: 48px;
    display: flex;
    align-items: center;
    color: var(--pc-text);
    font-size: 13px;
    font-weight: 560;
    cursor: pointer;
  }

  [data-ui-version="v2"][data-site-shell] .reading-contents nav {
    padding-bottom: 12px;
  }

  [data-ui-version="v2"][data-site-shell] .reading-contents nav > p {
    display: none;
  }

  [data-ui-version="v2"][data-site-shell] .reading-contents ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 0;
  }

  [data-ui-version="v2"][data-site-shell] .reading-contents li {
    border-bottom: 0;
  }
}

@media (max-width: 767px) {
  [data-ui-version="v2"][data-site-shell] .site-brand {
    width: 56px;
    min-width: 56px;
    justify-content: center;
  }

  [data-ui-version="v2"][data-site-shell] .site-brand__wordmark {
    display: none;
  }

  [data-ui-version="v2"][data-site-shell] .site-brand__mark {
    display: block;
  }

  [data-ui-version="v2"][data-site-shell] .site-menu {
    height: 44px;
  }

  [data-ui-version="v2"][data-site-shell] .site-menu__trigger {
    min-width: 72px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 12px;
    border: 1px solid transparent;
    border-radius: var(--pc-radius-control);
    color: var(--pc-text);
    background: transparent;
    font-size: 13px;
    font-weight: 560;
    line-height: 18px;
    list-style: none;
    cursor: pointer;
  }

  [data-ui-version="v2"][data-site-shell] .site-menu__trigger::-webkit-details-marker {
    display: none;
  }

  [data-ui-version="v2"][data-site-shell] .site-menu__trigger:hover {
    background: var(--pc-control-hover);
  }

  [data-ui-version="v2"][data-site-shell] .site-menu__details:not([open]) + .site-navigation {
    display: none;
  }

  [data-ui-version="v2"][data-site-shell] .site-menu__details[open] + .site-navigation {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(260px, calc(100vw - (var(--site-gutter) * 2)));
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    border: 1px solid var(--pc-border-strong);
    border-radius: var(--pc-radius-control);
    background: var(--pc-chrome-bg);
    box-shadow: var(--pc-shadow-popover);
  }

  [data-ui-version="v2"][data-site-shell] .site-navigation a {
    width: 100%;
    min-height: 44px;
  }

  [data-ui-version="v2"][data-site-shell] .site-navigation a:hover,
  [data-ui-version="v2"][data-site-shell] .site-navigation a:focus-visible {
    background: var(--pc-control-hover);
  }

  [data-ui-version="v2"][data-site-shell] .site-footer__inner {
    min-height: 112px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
  }

  [data-ui-version="v2"][data-site-shell] .site-footer__navigation {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  [data-ui-version="v2"][data-site-shell] .site-main {
    padding-block: 32px 56px;
  }

  [data-ui-version="v2"][data-site-shell] .site-main--marketing {
    padding-block: 0;
  }

  [data-ui-version="v2"][data-site-shell] .site-page-deck {
    font-size: 17px;
    line-height: 25px;
  }

  [data-ui-version="v2"][data-site-shell] .reading-folio,
  [data-ui-version="v2"][data-site-shell] .pc-reading-folio {
    width: 100%;
    padding: 20px;
  }

  [data-ui-version="v2"][data-site-shell] .site-title-composition {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  [data-ui-version="v2"][data-site-shell] .site-title-composition__lead,
  [data-ui-version="v2"][data-site-shell] .site-signature-slot {
    grid-column: 1;
  }

  [data-ui-version="v2"][data-site-shell] .composer-signature img {
    aspect-ratio: 3 / 1;
  }

  [data-ui-version="v2"][data-site-shell] .reading-page-intro__field,
  [data-ui-version="v2"][data-site-shell] .support-page__empty-field {
    min-height: 48px;
  }

  [data-ui-version="v2"][data-site-shell] .reading-contents ol {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-ui-version="v2"][data-site-shell] .reading-section {
    padding-block: 36px;
  }

  [data-ui-version="v2"][data-site-shell] .landing-hero__composition {
    min-height: 0;
  }

  [data-ui-version="v2"][data-site-shell] .landing-hero {
    min-height: 0;
    padding-block: 64px 72px;
  }

  [data-ui-version="v2"][data-site-shell] .landing-hero__cta-line {
    align-items: flex-end;
  }

  [data-ui-version="v2"][data-site-shell] .landing-live-demo__paper {
    min-height: 240px;
  }

  [data-ui-version="v2"][data-site-shell] .landing-live-demo__actions .pc-button,
  [data-ui-version="v2"][data-site-shell] .landing-live-demo__devices .pc-button,
  [data-ui-version="v2"][data-site-shell] .landing-live-demo__recovery .pc-button {
    min-height: 44px;
  }

  [data-ui-version="v2"][data-site-shell] .landing-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-ui-version="v2"][data-site-shell] .landing-steps li {
    min-height: 0;
    border-top: 1px solid var(--pc-border-subtle);
    border-left: 0;
  }

  [data-ui-version="v2"][data-site-shell] .landing-steps li:first-child {
    border-top: 0;
  }

  [data-ui-version="v2"][data-site-shell] .landing-steps h3 {
    margin-top: 24px;
  }

  [data-ui-version="v2"][data-site-shell] .landing-close__inner {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  [data-ui-version="v2"][data-site-shell] .composer-roster,
  [data-ui-version="v2"][data-site-shell] .article-program {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-ui-version="v2"][data-site-shell] .composer-row,
  [data-ui-version="v2"][data-site-shell] .composer-row:nth-child(odd),
  [data-ui-version="v2"][data-site-shell] .composer-row:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid var(--pc-border-subtle);
  }

  [data-ui-version="v2"][data-site-shell] .composer-row:last-child {
    border-bottom: 0;
  }

  [data-ui-version="v2"][data-site-shell] .piece-program__entry {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 16px;
  }

  [data-ui-version="v2"][data-site-shell] .piece-program__action {
    grid-column: 2;
    width: max-content;
    margin-top: 6px;
    padding-inline: 0;
  }

  [data-ui-version="v2"][data-site-shell] .theory-roster__entry {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  [data-ui-version="v2"][data-site-shell] .theory-index__specimen img {
    width: 138px;
    height: 86px;
  }

  [data-ui-version="v2"][data-site-shell] .theory-index__specimen {
    width: 150px;
  }

  [data-ui-version="v2"][data-site-shell] .theory-music-desk {
    padding: 20px 20px 40px;
  }

  [data-ui-version="v2"][data-site-shell] .theory-score-paper {
    padding: 16px;
  }

  [data-ui-version="v2"][data-site-shell] .theory-example-controls :is(button, a) {
    flex: 1 1 148px;
  }

  [data-ui-version="v2"][data-site-shell] .theory-index-category + .theory-index-category {
    padding-top: 48px;
  }

  [data-ui-version="v2"][data-site-shell] .article-program > li {
    border-right: 0;
  }
}

@media (max-width: 360px) {
  [data-ui-version="v2"][data-site-shell] .landing-live-demo__actions .pc-button {
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  [data-ui-version="v2"][data-site-shell] {
    --site-gutter: 32px;
  }

  [data-ui-version="v2"][data-site-shell] .site-main {
    padding-block: 40px 64px;
  }

  [data-ui-version="v2"][data-site-shell] .site-main--marketing {
    padding-block: 0;
  }

  [data-ui-version="v2"][data-site-shell] .reading-folio,
  [data-ui-version="v2"][data-site-shell] .pc-reading-folio {
    padding: 32px;
  }

}

@media (min-width: 1280px) {
  [data-ui-version="v2"][data-site-shell] {
    --site-gutter: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-ui-version="v2"][data-site-shell],
  [data-ui-version="v2"][data-site-shell] *,
  [data-ui-version="v2"][data-site-shell] *::before,
  [data-ui-version="v2"][data-site-shell] *::after {
    scroll-behavior: auto !important;
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
}

@media (forced-colors: active) {
  [data-ui-version="v2"][data-site-shell] {
    color: CanvasText;
    background: Canvas;
  }

  [data-ui-version="v2"][data-site-shell] .site-navigation a,
  [data-ui-version="v2"][data-site-shell] .site-footer a,
  [data-ui-version="v2"][data-site-shell] .site-context-link,
  [data-ui-version="v2"][data-site-shell] .theory-related-examples a {
    color: LinkText;
    text-decoration-color: currentColor;
  }

  [data-ui-version="v2"][data-site-shell] :focus-visible {
    outline-color: Highlight;
  }

  [data-ui-version="v2"][data-site-shell] .site-navigation a[aria-current="page"]::after,
  [data-ui-version="v2"][data-site-shell] .program-rule,
  [data-ui-version="v2"][data-site-shell] .pc-program-rule {
    background: Highlight;
  }

  [data-ui-version="v2"][data-site-shell] :is(
    .site-menu__trigger,
    .site-cta,
    .support-page__action,
    .composer-search input,
    .alphabet-directory a,
    .theory-example-controls button,
    .theory-example-controls a,
    .theory-load-example
  ) {
    border-color: ButtonText;
    color: ButtonText;
    background: ButtonFace;
  }

  [data-ui-version="v2"][data-site-shell] :is(button, input):disabled,
  [data-ui-version="v2"][data-site-shell] [aria-disabled="true"] {
    border-color: GrayText;
    color: GrayText;
  }

  [data-ui-version="v2"][data-site-shell] :is(
    .site-header,
    .site-footer,
    .editorial-index__directory,
    .composer-row,
    .theory-roster,
    .theory-roster__entry,
    .theory-related-examples,
    .theory-related-examples li,
    .theory-learning-rail,
    .theory-learning-rail section,
    .support-page__body
  ) {
    border-color: CanvasText;
  }

  [data-ui-version="v2"][data-site-shell] .paper-surface::before,
  [data-ui-version="v2"][data-site-shell] .pc-paper-surface::before,
  [data-ui-version="v2"][data-site-shell] :is(
    .site-signature-slot,
    .landing-title-field,
    .landing-phrase__staff-field,
    .landing-principles__ornament
  ) {
    display: none;
  }

  [data-ui-version="v2"][data-site-shell] .paper-surface,
  [data-ui-version="v2"][data-site-shell] .pc-paper-surface {
    border-color: CanvasText;
    color: CanvasText;
    background: Canvas;
    box-shadow: none;
  }

  [data-ui-version="v2"][data-site-shell] :is(.theory-music-desk, .music-desk, .pc-music-desk) {
    border: 1px solid CanvasText;
    background: Canvas;
  }
}

@media print {
  html[data-document-surface="site"][data-ui-version="v2"][data-site-shell],
  html[data-document-surface="site"][data-ui-version="v2"][data-site-shell] body,
  html[data-document-surface="site"][data-ui-version="v2"][data-site-shell] #root,
  [data-ui-version="v2"][data-site-shell] {
    min-height: 0 !important;
    color: #000 !important;
    background: #fff !important;
    color-scheme: light;
  }

  [data-ui-version="v2"][data-site-shell] .site-header,
  [data-ui-version="v2"][data-site-shell] .site-footer,
  [data-ui-version="v2"][data-site-shell] .site-skip-link,
  [data-ui-version="v2"][data-site-shell] .reading-contents,
  [data-ui-version="v2"][data-site-shell] .theory-example-controls,
  [data-ui-version="v2"][data-site-shell] .theory-load-example,
  [data-ui-version="v2"][data-site-shell] .theory-example-status,
  [data-ui-version="v2"][data-site-shell] .theory-playback-note,
  [data-ui-version="v2"][data-site-shell] .theory-loupe,
  [data-ui-version="v2"][data-site-shell] .theory-desk-ledge,
  [data-ui-version="v2"][data-site-shell] .site-signature-slot {
    display: none !important;
  }

  [data-ui-version="v2"][data-site-shell] .site-main,
  [data-ui-version="v2"][data-site-shell] .site-content,
  [data-ui-version="v2"][data-site-shell] .site-page-frame,
  [data-ui-version="v2"][data-site-shell] .site-frame {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    color: #000;
    background: #fff;
  }

  [data-ui-version="v2"][data-site-shell] :is(h1, h2, h3, h4, p, li, dt, dd, figcaption, .eyebrow, .byline, .article-metadata, .legal-updated) {
    color: #000 !important;
  }

  [data-ui-version="v2"][data-site-shell] a {
    color: #000 !important;
    text-decoration: underline;
  }

  [data-ui-version="v2"][data-site-shell] .paper-surface::before,
  [data-ui-version="v2"][data-site-shell] .pc-paper-surface::before,
  [data-ui-version="v2"][data-site-shell] .music-desk::after,
  [data-ui-version="v2"][data-site-shell] .pc-music-desk::after {
    display: none;
  }

  [data-ui-version="v2"][data-site-shell] .reading-folio,
  [data-ui-version="v2"][data-site-shell] .pc-reading-folio {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    color: #000;
    background: #fff;
    box-shadow: none;
  }

  [data-ui-version="v2"][data-site-shell] .reading-layout,
  [data-ui-version="v2"][data-site-shell] .theory-learning-layout {
    display: block;
  }

  [data-ui-version="v2"][data-site-shell] .theory-music-desk {
    display: block;
    padding: 0;
    overflow: visible;
    background: #fff;
  }

  [data-ui-version="v2"][data-site-shell] .theory-score-paper {
    padding: 0;
    overflow: visible;
    border: 0;
    box-shadow: none;
  }

  [data-ui-version="v2"][data-site-shell] .reading-faq > div {
    display: block !important;
  }

  [data-ui-version="v2"][data-site-shell] .reading-faq summary::after {
    display: none;
  }

  [data-ui-version="v2"][data-site-shell] :is(.program-rule, .pc-program-rule) {
    background: #000;
  }

  @page {
    margin: 14mm;
  }
}