:root {
  --hg-reading-panel-z: 10080;
}

.site-header .language-select {
  color-scheme: dark;
}

.site-header .language-select option,
.site-header .language-select optgroup {
  color: #fff;
  background-color: #151515;
}

html[data-hg-reading-size="large"]:not([data-hg-reading-suspended]) {
  font-size: 112.5% !important;
}

html[data-hg-reading-size="xlarge"]:not([data-hg-reading-suspended]) {
  font-size: 125% !important;
}

.reading-settings-trigger,
.reading-settings-mobile-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 7px 10px;
  color: #f6cd9b;
  background: transparent;
  border: 1px solid rgba(246, 205, 155, 0.42);
  border-radius: 8px;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.reading-settings-mobile-trigger {
  display: none;
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  font-size: 1rem;
}

.reading-settings-trigger:hover,
.reading-settings-trigger[aria-expanded="true"],
.reading-settings-mobile-trigger:hover,
.reading-settings-mobile-trigger[aria-expanded="true"] {
  color: #0f1115;
  background: #ffd9a8;
  border-color: #ffd9a8;
}

.reading-settings-trigger strong,
.reading-settings-mobile-trigger strong {
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.reading-settings-layer[hidden] {
  display: none !important;
}

.reading-settings-layer {
  position: fixed;
  inset: 0;
  z-index: var(--hg-reading-panel-z);
  display: grid;
  place-items: center;
  padding: 18px;
  font-family: Inter, "Noto Sans TC", "Microsoft JhengHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.reading-settings-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 4, 7, 0.78);
}

.reading-settings-panel {
  position: relative;
  width: min(520px, 100%);
  max-height: min(760px, calc(100dvh - 36px));
  overflow: auto;
  padding: 24px;
  color: #fff;
  background: #171a21;
  border: 1px solid rgba(246, 205, 155, 0.34);
  border-radius: 14px;
}

.reading-settings-head,
.reading-score-row,
.reading-contrast-row,
.reading-settings-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.reading-settings-head {
  align-items: flex-start;
}

.reading-settings-head h2,
.reading-settings-section h3,
.reading-settings-preview strong {
  margin: 0;
  color: #fff;
  text-wrap: balance;
}

.reading-settings-head h2 {
  font-size: 1.45rem;
  line-height: 1.2;
}

.reading-settings-head p,
.reading-score-row p,
.reading-contrast-row p,
.reading-settings-preview p {
  margin: 6px 0 0;
  color: #cfd2d8;
  line-height: 1.6;
}

.reading-settings-head p {
  max-width: 42ch;
  font-size: 0.92rem;
}

.reading-settings-close {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  padding: 0;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  font: inherit;
  font-size: 1.35rem;
  cursor: pointer;
}

.reading-settings-section {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.reading-settings-section h3 {
  font-size: 1rem;
}

.reading-size-options,
.reading-score-options {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.reading-size-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.reading-score-options {
  flex: 0 0 190px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

.reading-size-options button,
.reading-score-options button,
.reading-reset-button,
.reading-done-button {
  min-height: 46px;
  padding: 10px 14px;
  border-radius: 8px;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.reading-size-options button,
.reading-score-options button {
  color: #fff;
  background: #1d212b;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.reading-size-options button:hover,
.reading-size-options button.is-active,
.reading-score-options button:hover,
.reading-score-options button.is-active {
  color: #0f1115;
  background: #f6cd9b;
  border-color: #f6cd9b;
}

.reading-contrast-row > div {
  min-width: 0;
}

.reading-score-row {
  align-items: end;
}

.reading-score-row > div:first-child {
  min-width: 0;
}

.reading-score-row p,
.reading-contrast-row p {
  font-size: 0.88rem;
}

.reading-contrast-switch {
  position: relative;
  flex: 0 0 auto;
  width: 58px;
  height: 34px;
  padding: 3px;
  background: #343944;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  cursor: pointer;
}

.reading-contrast-switch span {
  display: block;
  width: 26px;
  height: 26px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.18s ease-out, background 0.18s ease-out;
}

.reading-contrast-switch.is-active {
  background: #f6cd9b;
  border-color: #f6cd9b;
}

.reading-contrast-switch.is-active span {
  background: #0f1115;
  transform: translateX(24px);
}

.reading-settings-preview {
  margin-top: 22px;
  padding: 16px;
  background: #0f1115;
  border-radius: 10px;
}

.reading-settings-preview p {
  font-size: 1rem;
}

.reading-settings-status {
  min-height: 1.4em;
  margin: 12px 0 0;
  color: #f6cd9b;
  font-size: 0.82rem;
}

.reading-settings-actions {
  margin-top: 10px;
}

.reading-reset-button {
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.reading-done-button {
  color: #0f1115;
  background: #f6cd9b;
  border: 1px solid #f6cd9b;
}

.reading-settings-trigger:focus-visible,
.reading-settings-mobile-trigger:focus-visible,
.reading-settings-panel button:focus-visible,
html[data-hg-reading-contrast="high"] :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid #ffd9a8 !important;
  outline-offset: 2px !important;
}

body.is-reading-settings-open {
  overflow: hidden !important;
}

html[data-hg-reading-size="large"]:not([data-hg-reading-suspended]) main :where(p, li, dd, dt),
html[data-hg-reading-size="xlarge"]:not([data-hg-reading-suspended]) main :where(p, li, dd, dt) {
  line-height: 1.65;
}

html[data-hg-reading-size="large"]:not([data-hg-reading-suspended]) main :where(button, input, select, textarea),
html[data-hg-reading-size="xlarge"]:not([data-hg-reading-suspended]) main :where(button, input, select, textarea) {
  min-height: 44px;
}

/* Phase 2: enlarge notation without scaling the entire application shell. */
html[data-hg-reading-score-size="large"] .score-practice-player:not(.is-expanded):not(.is-ios-practice-fullscreen) .score-row-stack {
  display: flex;
  height: clamp(320px, 58vh, 540px);
  flex-direction: column;
}

html[data-hg-reading-score-size="large"] .score-practice-player:not(.is-expanded):not(.is-ios-practice-fullscreen) .score-practice-row {
  flex: 0.72 1 0;
}

html[data-hg-reading-score-size="large"] .score-practice-player:not(.is-expanded):not(.is-ios-practice-fullscreen) .score-practice-row.is-current {
  flex-grow: 1.56;
}

html[data-hg-reading-score-size="large"] .gongo-player-page .gongo-score {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}

html[data-hg-reading-score-size="large"] .gongo-player-page .gongo-measure {
  --gongo-beat-card-width: 124px !important;
  --gongo-beat-card-height: 138px !important;
  width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
}

html[data-hg-reading-score-size="large"] .gongo-player-page .gongo-beat-block {
  width: var(--gongo-beat-card-width) !important;
  min-height: var(--gongo-beat-card-height) !important;
  height: var(--gongo-beat-card-height) !important;
}

html[data-hg-reading-score-size="large"] .gongo-player-page .gongo-beat-block .rhythm-note-svg {
  width: 122px !important;
  max-width: 122px !important;
}

html[data-hg-reading-score-size="large"] :where(.gongo-thumb-score, .gongo-list-score) {
  min-height: 144px;
}

html[data-hg-reading-score-size="large"] :where(.gongo-thumb-score, .gongo-list-score, .song-gongo-selected-preview, .song-gongo-choice-preview, .skill-gongo-preview) .gongo-preview-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-content: center;
  gap: 6px 10px;
}

html[data-hg-reading-score-size="large"] :where(.gongo-thumb-score, .gongo-list-score, .song-gongo-selected-preview, .song-gongo-choice-preview, .skill-gongo-preview) .practice-note-svg {
  width: 100% !important;
  height: 72px !important;
}

html[data-hg-reading-score-size="large"] :where(.song-gongo-selected-preview, .song-gongo-choice-preview, .skill-gongo-preview) {
  height: auto !important;
  min-height: 104px !important;
}

html[data-hg-reading-score-size="large"] .song-assist-practice-list.has-gongo .skill-gongo-preview .gongo-preview-grid {
  min-height: 104px;
  padding: 7px 9px;
}

html[data-hg-reading-score-size="large"] .pdf-page-stage {
  align-items: start;
  justify-items: start;
}

html[data-hg-reading-score-size="large"] .pdf-modal.is-continuous .pdf-page-stage {
  overflow-x: auto !important;
}

html[data-hg-reading-score-size="large"] .real-pdf-stage {
  place-items: start;
}

html[data-hg-reading-score-size="large"] .pdf-modal.is-continuous .real-pdf-stage {
  align-items: flex-start;
  width: max-content;
  min-width: 100%;
}

html[data-hg-reading-score-size="large"] .real-pdf-page-frame[data-hg-reading-score-enlarged] {
  flex: 0 0 auto;
  max-width: none;
}

html[data-hg-reading-contrast="high"] {
  --hg-muted: #e2e4e8;
  --hg-border: rgba(255, 255, 255, 0.34);
  --muted: #e2e4e8;
}

html[data-hg-reading-contrast="high"] .site-header :where(.top-nav a, .member-header-link, .social-link),
html[data-hg-reading-contrast="high"] :where(.music-dark-page, .home-page, .member-zone-page, .gongo-page) :where(.muted, small),
html[data-hg-reading-contrast="high"] :where(.music-dark-page, .home-page, .member-zone-page, .gongo-page) [class*="-meta"],
html[data-hg-reading-contrast="high"] :where(.music-dark-page, .home-page, .member-zone-page, .gongo-page) [class*="-hint"] {
  color: #e2e4e8 !important;
  opacity: 1 !important;
}

html[data-hg-reading-contrast="high"] :where(.music-dark-page, .home-page, .member-zone-page, .gongo-page) :where(input, select, textarea) {
  border-color: rgba(255, 255, 255, 0.46) !important;
}

html[data-hg-reading-contrast="high"] :where(.music-dark-page, .home-page, .member-zone-page, .gongo-page) :where(input, textarea)::placeholder {
  color: #d5d8de !important;
  opacity: 1 !important;
}

@media (min-width: 981px) and (max-width: 1320px) {
  html[data-hg-reading-size="large"]:not([data-hg-reading-suspended]) .site-header .header-container,
  html[data-hg-reading-size="xlarge"]:not([data-hg-reading-suspended]) .site-header .header-container {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  html[data-hg-reading-size="large"]:not([data-hg-reading-suspended]) .site-header .top-nav,
  html[data-hg-reading-size="xlarge"]:not([data-hg-reading-suspended]) .site-header .top-nav {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: center;
  }

  html[data-hg-reading-size="large"]:not([data-hg-reading-suspended]) .site-header .social-links,
  html[data-hg-reading-size="xlarge"]:not([data-hg-reading-suspended]) .site-header .social-links {
    grid-row: 1;
    grid-column: 2;
  }
}

@media (min-width: 981px) and (max-width: 1380px) {
  .reading-settings-trigger-label {
    display: none;
  }
}

@media (max-width: 980px) {
  .site-header.is-menu-open .reading-settings-trigger,
  body.is-mobile-menu-open .reading-settings-trigger {
    display: inline-flex;
    width: 100%;
    min-height: 48px;
    grid-column: 1 / -1;
  }

  .site-header.is-menu-open .reading-settings-trigger-label,
  body.is-mobile-menu-open .reading-settings-trigger-label {
    display: inline;
  }

  .reading-settings-panel {
    padding: 20px;
  }
}

@media (max-width: 860px) {
  .site-header.site-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .site-header .container.header-container {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
    grid-template-columns: minmax(0, 1fr) 48px 48px !important;
    column-gap: 8px !important;
  }

  .site-header .brand {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .site-header .brand-logo {
    width: min(175px, 44vw) !important;
    object-position: left center;
  }

  .site-header .reading-settings-mobile-trigger {
    display: inline-flex;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
  }

  .site-header .menu-toggle {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    width: 48px !important;
    height: 48px !important;
  }

  .site-header .social-links .reading-settings-trigger {
    display: none !important;
  }

  body.is-maintenance-mode .site-header .reading-settings-mobile-trigger {
    display: none !important;
  }
}

@media (max-width: 520px) {
  .reading-settings-layer {
    align-items: end;
    padding: 0;
  }

  .reading-settings-panel {
    width: 100%;
    max-height: min(88dvh, 760px);
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 14px 14px 0 0;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }

  .reading-size-options,
  .reading-score-options {
    grid-template-columns: 1fr;
  }

  .reading-score-row {
    align-items: stretch;
    flex-direction: column;
  }

  .reading-score-options {
    width: 100%;
    flex-basis: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 12px;
  }

  .reading-settings-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reading-contrast-switch span {
    transition: none;
  }
}