:root {
  color-scheme: light;
  --ink: #172230;
  --muted: #637083;
  --rule: #dce2e8;
  --rule-dark: #aeb7c0;
  --paper: #ffffff;
  --soft: #f5f7f8;
  --navy: #315d79;
  --navy-dark: #244a64;
  --blue: #6e9ebd;
  --blue-pale: #dceaf2;
  --accent: #d9917d;
  --accent-pale: #f6dfd7;
  --shadow: 0 18px 55px rgba(31, 46, 61, 0.09);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.25rem; }
body { margin: 0; color: var(--ink); background: var(--soft); line-height: 1.55; }
button, a { font: inherit; }
button { color: inherit; }
a { color: var(--navy); }

.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid #263746;
  color: #f7f9fb;
  background: rgba(20, 39, 55, 0.97);
}

.site-nav__inner {
  width: min(1080px, calc(100% - 2rem));
  min-height: 3.4rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.site-nav a { color: inherit; text-decoration: none; }
.site-nav__brand { font-family: Georgia, "Times New Roman", serif; font-size: 1.15rem; font-weight: 700; }
.site-nav__links { display: flex; gap: 1.25rem; font-size: 0.86rem; }
.site-nav__links a { color: #dce5ec; }
.site-nav__links a:hover { color: #fff; }

.paper-header {
  padding: 5.6rem 1.5rem 4.8rem;
  color: #f8fbfd;
  text-align: left;
  border: 0;
  background:
    radial-gradient(circle at 75% 15%, rgba(133, 185, 212, 0.28), transparent 32rem),
    linear-gradient(135deg, #172a3a, #294b60 62%, #416a7c);
}

.paper-header__inner, main, footer { width: min(1120px, calc(100% - 2rem)); margin: 0 auto; }
.venue, .section-label, .control-label {
  margin: 0 0 0.55rem;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; }
h1 { margin: 0; font-size: clamp(2.8rem, 7vw, 5.8rem); font-weight: 500; line-height: 0.98; letter-spacing: -0.045em; }
.paper-subtitle { max-width: 850px; margin: 0.75rem 0 1.75rem; color: #dceaf2; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.1rem, 2.2vw, 1.45rem); }
.authors { max-width: 900px; margin: 0 0 0.45rem; font-size: 0.98rem; line-height: 1.75; }
.authors sup, .affiliations sup { color: var(--accent); }
.affiliations { margin-bottom: 1.55rem; color: #dceaf2; font-size: 0.88rem; }

.paper-links { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0.55rem; }
.paper-links a {
  min-width: 6.5rem;
  padding: 0.52rem 0.9rem;
  border: 1px solid var(--navy);
  border-radius: 3px;
  color: #edf5f9;
  border-color: rgba(237,245,249,0.75);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
}
.paper-links a:first-child { color: #172a3a; background: #e7f3f8; }
.paper-links a:hover { color: #fff; border-color: #fff; box-shadow: inset 0 -2px 0 var(--accent); }

main { margin-top: -1.55rem; padding: 0 0 3.5rem; }
.paper-section { padding: 2.25rem clamp(1.25rem, 4vw, 2.4rem); border: 1px solid var(--rule); background: var(--paper); box-shadow: var(--shadow); }
.paper-section + .paper-section { margin-top: 1.1rem; }
.paper-section > p { max-width: 850px; }
.how-to { padding-top: 2.2rem; }
.how-to > p { margin-bottom: 1.35rem; }
.how-to__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.how-to__steps > div { min-height: 8rem; padding: 1rem; border: 1px solid var(--rule); background: var(--soft); }
.how-to__steps span { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; margin-bottom: 0.6rem; border-radius: 50%; color: #fff; background: var(--navy); font-weight: 700; }
.how-to__steps strong, .how-to__steps p { display: block; }
.how-to__steps p { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.88rem; }
h2 { margin-bottom: 0.65rem; font-size: clamp(1.7rem, 3.2vw, 2.35rem); font-weight: 500; line-height: 1.15; }
h3 { margin-bottom: 0; font-size: 1rem; }
.abstract-section > p { margin-right: auto; margin-left: auto; font-family: Georgia, "Times New Roman", serif; font-size: 1.05rem; line-height: 1.72; text-align: left; }
.abstract-section h2 { text-align: center; }

.demo-intro { padding-bottom: 1.6rem; border-radius: 15px 15px 0 0; border-bottom: 0; }
.demo-intro p:last-child { margin-bottom: 0; color: var(--muted); }
.example-tabs { display: flex; gap: 0.55rem; margin: 0 1.1rem; padding: 0.55rem; overflow-x: auto; border: 1px solid rgba(255,255,255,0.65); border-radius: 13px 13px 0 0; background: rgba(248,251,253,0.92); backdrop-filter: blur(12px); }
.tab { padding: 0.62rem 1rem; white-space: nowrap; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.tab:hover { background: #e9eef2; }
.tab[aria-selected="true"] { color: #fff; background: var(--navy); }

.demo-shell { padding: clamp(1.25rem, 4vw, 2.4rem); border: 1px solid var(--rule); border-radius: 0 0 15px 15px; background: #fff; box-shadow: var(--shadow); }
.demo-heading, .score-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.request-label, .score-note, .hint { color: var(--muted); font-size: 0.86rem; }

.spectrogram-card { margin-top: 1.25rem; overflow: hidden; border: 1px solid #cfd7dd; border-radius: 11px; background: #130f20; }
.spectrogram-meta { display: flex; justify-content: space-between; padding: 0.58rem 0.75rem; color: #edf3f6; background: #253746; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.spectrogram-plot-layout,
.instrument-spectrogram-wrap {
  display: grid;
  grid-template-columns: 4.1rem minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 1.65rem;
  height: clamp(215px, 29vw, 300px);
  overflow: hidden;
  background: #000004;
}
.spectrogram { position: relative; grid-column: 2; grid-row: 1; overflow: hidden; cursor: crosshair; touch-action: none; user-select: none; }
.spectrogram img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: fill; pointer-events: none; }
#spectrogram-image { z-index: 0; }
.mask-dimmer { position: absolute; inset: 0; z-index: 1; background: rgba(3,10,18,0.46); pointer-events: none; transition: opacity 140ms ease; }
.mask-overlay { z-index: 2; filter: saturate(1.25) contrast(1.12); transition: opacity 140ms ease; }
.mask-overlay--hidden, .mask-dimmer--hidden { opacity: 0; }
.selection { position: absolute; top: 0; bottom: 0; z-index: 3; border: 2px solid rgba(255,255,255,0.92); background: rgba(102, 190, 230, 0.3); box-shadow: 0 0 0 9999px rgba(5, 12, 20, 0.16); pointer-events: none; }
.spectral-focus { position: absolute; inset: 0; z-index: 4; color: #71e8df; pointer-events: none; }
.spectral-focus__vertical, .spectral-focus__horizontal { position: absolute; display: block; background: currentColor; opacity: 0.9; box-shadow: 0 0 7px rgba(113,232,223,0.72); }
.spectral-focus__vertical { top: 0; bottom: 0; left: var(--spectral-x); width: 1px; }
.spectral-focus__horizontal { right: 0; left: 0; top: var(--spectral-y); height: 1px; }
.spectral-focus__marker { position: absolute; top: var(--spectral-y); left: var(--spectral-x); width: 13px; height: 13px; transform: translate(-50%,-50%); border: 2px solid #fff; border-radius: 50%; background: rgba(113,232,223,0.26); box-shadow: 0 0 0 3px rgba(11,45,54,0.45), 0 0 12px rgba(113,232,223,0.95); }
.spectral-focus__label { position: absolute; top: calc(var(--spectral-y) + 0.6rem); left: calc(var(--spectral-x) + 0.6rem); max-width: 9rem; padding: 0.16rem 0.32rem; color: #f4ffff; background: rgba(10,38,48,0.86); border: 1px solid rgba(113,232,223,0.75); border-radius: 3px; font-size: 0.7rem; font-weight: 700; line-height: 1.25; text-shadow: none; }
.spectrogram--no-owner .spectral-focus { color: #ffb096; }
.spectrogram--no-owner .spectral-focus__label { background: rgba(70,25,22,0.9); border-color: rgba(255,176,150,0.82); }
.playhead { position: absolute; top: 0; bottom: 0; z-index: 5; width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.4); pointer-events: none; }
.spectrogram-axis { z-index: 3; color: rgba(255,255,255,0.95); font-size: 0.67rem; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0,0,0,0.9); pointer-events: none; }
.spectrogram-axis--frequency { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; padding: 0.55rem 0.45rem 0.3rem 0; border-right: 1px solid rgba(255,255,255,0.85); }
.spectrogram-axis--frequency span { display: flex; align-items: center; gap: 0.25rem; }
.spectrogram-axis--frequency span::after { content: ""; width: 0.32rem; border-top: 1px solid rgba(255,255,255,0.85); }
.spectrogram-axis--time { grid-column: 2; grid-row: 2; display: flex; justify-content: space-between; align-items: flex-start; padding-top: 0.38rem; border-top: 1px solid rgba(255,255,255,0.85); }
.spectrogram-axis--time span { position: relative; min-width: 1.25rem; text-align: center; }
.spectrogram-axis--time span::before { content: ""; position: absolute; bottom: 1.25rem; left: 50%; height: 0.32rem; border-left: 1px solid rgba(255,255,255,0.85); }
.spectrogram-axis--time span:first-child { text-align: left; }
.spectrogram-axis--time span:last-child { text-align: right; }
.hint { margin: 0; padding: 0.4rem 0.72rem; color: #d0dae0; background: #1d2b36; }

.source-section { margin-top: 1.25rem; }
.source-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.source-button { min-width: 0; overflow-wrap: anywhere; border: 1px solid var(--rule); border-radius: 7px; background: #fafafa; cursor: pointer; transition: border-color 120ms ease, background 120ms ease; }
.source-button { padding: 0.72rem 0.8rem; text-align: left; }
.source-button:hover { border-color: var(--blue); background: #fff; }
.source-button[aria-pressed="true"] { border-color: var(--navy); background: var(--blue-pale); box-shadow: inset 0 -3px 0 var(--navy); }
.source-button strong, .source-button small { display: block; }
.source-button small { color: var(--muted); font-size: 0.78rem; }
.baseline-details { margin-top: 0.65rem; color: var(--muted); font-size: 0.86rem; }
.baseline-details summary { width: max-content; color: var(--navy); cursor: pointer; }
.source-buttons--secondary { margin-top: 0.65rem; }
.baseline-details--open { margin-top: 1.25rem; }
.baseline-details--open .control-label { margin-bottom: 0.55rem; }

.transport { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.2rem; }
.button { min-height: 40px; padding: 0.55rem 0.85rem; border: 1px solid var(--rule-dark); border-radius: 7px; background: #fff; cursor: pointer; }
.button:hover { background: var(--soft); }
.button--primary { color: #fff; border-color: var(--navy); background: var(--navy); }
.button--primary:hover { background: var(--navy-dark); }
.button--quiet { color: var(--muted); border-color: transparent; }
.region-readout { margin-left: auto; color: var(--muted); font-size: 0.82rem; font-variant-numeric: tabular-nums; }

.score-section { margin-top: 1.5rem; padding-top: 1.3rem; border-top: 1px solid var(--rule); }
.legend { display: flex; flex-wrap: wrap; gap: 0.85rem; color: var(--muted); font-size: 0.76rem; }
.legend__swatch { display: inline-block; width: 13px; height: 8px; margin-right: 4px; background: var(--blue); }
.legend__swatch--target { background: var(--accent); }
.piano-roll { height: 246px; margin-top: 0.9rem; overflow-x: auto; border: 1px solid #263c4d; border-radius: 4px; background: #122330; box-shadow: inset 0 0 0 1px rgba(215,231,239,0.06); }
.piano-roll svg { width: 100%; min-width: 680px; height: 100%; display: block; }
.roll-grid { stroke: rgba(214,232,240,0.15); stroke-width: 0.75; }
.roll-label { fill: #c3d2d9; font-size: 10px; font-weight: 650; }
.roll-note { fill: url(#roll-note-gradient); stroke: rgba(255,224,210,0.72); stroke-width: 0.65; cursor: pointer; }
.roll-note:hover, .roll-note:focus { fill: #ffad8b; stroke: #fff3ea; stroke-width: 1.2; outline: none; }
.roll-note--selected { fill: url(#roll-note-selected-gradient); filter: drop-shadow(0 0 5px rgba(255,126,83,0.82)); stroke: #fff7ef; stroke-width: 1.2; }
.roll-note-progress { fill: url(#roll-note-progress-gradient); stroke: #fff9df; stroke-width: 1.2; opacity: 0; pointer-events: none; filter: drop-shadow(0 0 5px rgba(255,209,102,0.78)); transition: opacity 90ms linear; }
.roll-note-progress--playing { opacity: 1; }
.roll-note--hovered { fill: #71e8df; filter: drop-shadow(0 0 5px rgba(113,232,223,0.9)); stroke: #efffff; stroke-width: 1.35; }
.roll-note--shared { fill: #e5a93f; filter: drop-shadow(0 0 4px rgba(229,169,63,0.85)); stroke: #fff4cf; stroke-width: 1.35; }
.roll-playhead { stroke: #f7f1e8; stroke-width: 1.25; pointer-events: none; }
.score-note { margin: 0.5rem 0 0; }

.instrument-demo-shell { margin-top: 1.35rem; overflow: hidden; border-radius: 15px; }
.instrument-demo-shell .demo-heading { align-items: end; }
.instrument-listening-dock {
  display: grid;
  grid-template-columns: 0.9fr 1.15fr 2fr;
  gap: 0;
  margin-top: 1rem;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 11px;
  background: #f8fafb;
}
.instrument-listening-dock .source-section { min-width: 0; margin: 0; padding: 0.85rem; }
.instrument-listening-dock .source-section + .source-section { border-left: 1px solid var(--rule); }
.source-buttons--parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.source-buttons--examples { grid-template-columns: 1fr; }
.instrument-example__button { min-height: 2.65rem; font-weight: 700; }
.instrument-listening-dock .source-button { min-height: 2.65rem; padding: 0.5rem 0.62rem; background: #fff; }
.instrument-listening-dock .source-button[aria-pressed="true"] { color: #fff; border-color: var(--navy); background: var(--navy); box-shadow: none; }
.instrument-listening-dock .source-button[aria-pressed="true"] small { color: #d9e8f0; }
.instrument-audition__button:disabled { cursor: not-allowed; color: var(--muted); border-style: dashed; background: #f2f4f5; opacity: 0.75; }
.instrument-audition__status {
  color: var(--muted);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.instrument-demo__transport { margin-top: 0.85rem; }
.instrument-demo__transport .button[disabled] { cursor: not-allowed; opacity: 0.45; }
.instrument-spectrogram-card { margin-top: 1.25rem; }
.instrument-spectrogram-meta { flex-wrap: wrap; gap: 0.3rem 1rem; }
.instrument-spectrogram-meta > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.instrument-plot { position: relative; grid-column: 2; grid-row: 1; overflow: hidden; cursor: crosshair; touch-action: none; user-select: none; }
.instrument-plot:focus-visible { outline: 2px solid #71e8df; outline-offset: -2px; }
#instrument-spectrogram { width: 100%; height: 100%; display: block; image-rendering: auto; }
.instrument-selection { position: absolute; inset-block: 0; z-index: 2; border-inline: 1px solid rgba(255,255,255,0.95); background: rgba(87,177,213,0.25); box-shadow: 0 0 18px rgba(64,170,214,0.2) inset; pointer-events: none; }
.instrument-note-focus { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.instrument-note-focus__band { position: absolute; min-height: 2px; border-radius: 999px; background: #8dfff2; box-shadow: 0 0 7px rgba(113,232,223,0.9); transform: translateY(-50%); }
.instrument-note-focus__span { position: absolute; top: 0; bottom: 0; border: 1px solid rgba(141,255,242,0.82); background: rgba(113,232,223,0.09); }
.instrument-note-focus__label { position: absolute; top: 0.48rem; padding: 0.18rem 0.38rem; border: 1px solid rgba(141,255,242,0.7); border-radius: 4px; color: #efffff; background: rgba(10,38,48,0.88); font-size: 0.68rem; font-weight: 700; white-space: nowrap; }
.instrument-hover { position: absolute; top: 0; bottom: 0; z-index: 3; width: 1px; border-left: 1px dashed rgba(255,255,255,0.86); pointer-events: none; }
.instrument-hover span { position: absolute; top: 0.55rem; left: 0.45rem; padding: 0.14rem 0.32rem; border-radius: 3px; color: #fff; background: rgba(18,35,48,0.88); font-size: 0.68rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.instrument-playhead { position: absolute; top: 0; bottom: 0; left: 0; z-index: 4; width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.45), 0 0 8px rgba(255,255,255,0.45); pointer-events: none; }
.instrument-note-lane-panel { border-top: 1px solid #344b5d; color: #dceaf2; background: #142532; }
.instrument-note-lane-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; padding: 0.4rem 0.7rem 0.15rem; font-size: 0.7rem; }
.instrument-note-lane-meta span { color: #9fb2bf; font-size: 0.66rem; }
.instrument-note-lane { height: 82px; padding: 0 0.35rem 0.35rem; }
.instrument-note-lane svg { width: 100%; height: 100%; display: block; overflow: visible; }
.instrument-note-blob { fill: #cb735b; stroke: rgba(255,225,212,0.68); stroke-width: 0.7; cursor: pointer; transition: fill 90ms linear, filter 90ms linear; }
.instrument-note-blob:hover, .instrument-note-blob:focus { fill: #ffad8b; stroke: #fff5ee; outline: none; }
.instrument-note-blob--active { fill: #71e8df; filter: drop-shadow(0 0 4px rgba(113,232,223,0.9)); stroke: #edffff; stroke-width: 1.1; }
.instrument-note-blob--selected { fill: #ffd166; filter: drop-shadow(0 0 5px rgba(255,209,102,0.82)); stroke: #fff9df; stroke-width: 1.2; }
.instrument-note-lane-playhead { stroke: rgba(255,255,255,0.92); stroke-width: 1.2; pointer-events: none; }
.instrument-audition__button[data-part] { min-height: 3rem; display: flex; align-items: center; gap: 0.55rem; }
.instrument-icon {
  display: block;
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  background: currentColor;
  -webkit-mask: center / contain no-repeat var(--instrument-icon);
  mask: center / contain no-repeat var(--instrument-icon);
}
.instrument-icon--bassoon { --instrument-icon: url("assets/icons/bassoon.svg"); }
.instrument-icon--bass, .instrument-icon--cello, .instrument-icon--viola { --instrument-icon: url("assets/icons/violin.svg"); }
.instrument-icon--clarinet { --instrument-icon: url("assets/icons/clarinet.svg"); }
.instrument-icon--flute, .instrument-icon--oboe, .instrument-icon--trumpet { --instrument-icon: url("assets/icons/clarinet.svg"); }
.instrument-icon--horn { --instrument-icon: url("assets/icons/bassoon.svg"); }
.instrument-icon--saxphone { --instrument-icon: url("assets/icons/saxophone.svg"); }
.instrument-icon--violin { --instrument-icon: url("assets/icons/violin.svg"); }
.instrument-part-label { min-width: 0; font-size: 0.8rem; font-weight: 700; line-height: 1.2; white-space: normal; }

@media (max-width: 940px) {
  .instrument-listening-dock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .instrument-listening-dock .source-section:nth-child(3) { grid-column: 1 / -1; border-top: 1px solid var(--rule); border-left: 0; }
}

footer { padding: 1.4rem 0 3rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.82rem; }
:focus-visible { outline: 3px solid rgba(79,134,167,0.38); outline-offset: 2px; }

@media (max-width: 760px) {
  .site-nav__links a:not(:first-child) { display: none; }
  .paper-header { padding-top: 3.2rem; }
  .demo-heading, .score-heading { display: block; }
  .source-buttons--secondary { grid-template-columns: 1fr 1fr; }
  .region-readout { width: 100%; margin-left: 0; }
  .legend { margin-top: 0.6rem; }
  .how-to__steps { grid-template-columns: 1fr; }
  .instrument-listening-dock { grid-template-columns: 1fr; }
  .instrument-listening-dock .source-section + .source-section,
  .instrument-listening-dock .source-section:nth-child(3) { grid-column: auto; border-top: 1px solid var(--rule); border-left: 0; }
  .source-buttons--examples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #instrument-output-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
  .source-buttons--parts,
  .source-buttons--examples,
  #instrument-output-buttons { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}