.music { padding-block: 44px 64px; border-top: 1px solid var(--line); }
.music [hidden] { display: none !important; }
.music-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.video-filters { display: flex; gap: 6px; max-width: 100%; overflow-x: auto; }
.video-filters button { flex-shrink: 0; min-height: 44px; padding: 0 16px; border: 1px solid transparent; border-radius: 999px; background: transparent; font-size: 12px; cursor: pointer; }
.video-filters button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.video-filters button:hover:not(:disabled):not([aria-pressed="true"]) { border-color: var(--line); }
.video-filters button:disabled { cursor: default; color: var(--secondary); opacity: .6; }
.video-filters button[aria-pressed="true"]:disabled { background: var(--line); color: var(--ink); opacity: 1; }
.video-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.video-card { min-width: 0; }
.video-card a { display: block; }
.video-thumbnail { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: #e2e6e4; }
.video-thumbnail img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.video-thumbnail img { pointer-events: none; -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; }
.video-card a:hover img { opacity: .85; }
.video-play { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 36px; height: 28px; border-radius: 4px; background: var(--ink); color: var(--paper); }
.video-play svg { width: 20px; height: 20px; fill: currentColor; }
.thumbnail-unavailable .video-play { position: static; width: 48px; height: 36px; }
.video-category { margin: 13px 0 5px; min-height: 16px; font-size: 10px; line-height: 1.6; color: var(--secondary); }
.video-card h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; min-height: 3.2em; font-size: 14px; line-height: 1.6; font-weight: 600; overflow-wrap: anywhere; }
.video-card a:hover h3 { color: var(--accent); }
.music-coming { display: grid; align-content: center; justify-items: center; gap: 16px; min-height: 180px; padding-block: 28px; text-align: center; }
.coming-title { margin: 0; color: #738580; font-size: 36px; line-height: 1.2; font-weight: 400; }
.coming-copy { margin: 0; color: var(--secondary); font-size: 14px; line-height: 1.8; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

dialog { width: min(600px, calc(100% - 40px)); }
dialog.is-reading { width: min(760px, calc(100% - 40px)); }
.profile-facts { margin: 0; }
.profile-facts > div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 22px; padding-block: 14px; border-bottom: 1px solid var(--line); }
.profile-facts > div:first-child { padding-top: 0; }
.profile-facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.profile-facts dt { color: var(--secondary); font-size: 12px; }
.profile-facts dd { margin: 0; overflow-wrap: anywhere; }
.profile-facts dd:has(.profile-interest) { text-wrap: balance; }
.profile-interest, .profile-part { display: inline-block; white-space: nowrap; }
.profile-tag { display: inline-flex; gap: 4px; white-space: nowrap; }
.profile-tag-divider { margin-inline: 4px; }
.profile-reference { margin: 14px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.profile-reference figcaption { margin-bottom: 14px; color: var(--secondary); font-size: 12px; }
.profile-reference .reference-open > img { display: block; width: 100%; height: auto; object-fit: contain; }
.reference-open { position: relative; display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.reference-expand { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); }
.reference-expand img { width: 20px; height: 20px; }
#dialog-content > p { text-wrap: pretty; }
dialog.is-reading #dialog-content > p { text-wrap: balance; }
.guideline-list { margin: 22px 0 0; padding-left: 1.3em; }
.guideline-list li { margin-block: 10px; padding-left: 5px; }
.guideline-list li::marker { color: var(--accent); }
dialog.is-guidelines { scrollbar-gutter: stable; }
dialog.is-guidelines .dialog-header { margin-bottom: 8px; }
#dialog-content .guideline-updated { margin: 0 0 28px; color: var(--secondary); font-size: 13px; line-height: 1.7; text-align: left; }
.guideline-introduction { padding-bottom: 28px; border-bottom: 1px solid var(--line); }
#dialog-content .guideline-introduction p { margin: 0; text-wrap: pretty; }
#dialog-content .guideline-introduction p:first-child { margin-bottom: 20px; }
.guideline-section { margin-top: 30px; overflow-wrap: anywhere; }
.guideline-section h3 { margin: 0 0 12px; font-family: "Yu Gothic", "Hiragino Sans", "Meiryo", sans-serif; font-size: 18px; line-height: 1.6; font-weight: 700; }
#dialog-content .guideline-section p { margin: 0 0 10px; text-wrap: pretty; }
#dialog-content .guideline-section > :last-child { margin-bottom: 0; }
@counter-style guideline-numbers {
  system: fixed;
  symbols: "\2460" "\2461" "\2462" "\2463" "\2464" "\2465" "\2466" "\2467" "\2468" "\2469" "\246A" "\246B";
  suffix: " ";
  fallback: decimal;
}
.guideline-rules { margin: 12px 0 0; padding-left: 1.8em; list-style-type: guideline-numbers; }
.guideline-rules li { padding-left: 6px; margin-top: 8px; }
.guideline-rules li::marker { color: var(--accent); }
#dialog-content .guideline-rules + .guideline-supplement { margin-top: 18px; }
#dialog-content .guideline-note { margin-top: 18px; color: var(--secondary); font-size: 14px; line-height: 1.8; padding-left: 1em; text-indent: -1em; }
.contact-pending { color: var(--secondary); font-size: 12px; padding-top: 12px; }
.contact-intro { white-space: pre-line; }
#dialog-content .contact-intro:has(+ .contact-note) { margin-bottom: 8px; }
#dialog-content .contact-note { margin-bottom: 24px; color: var(--secondary); font-size: 14px; line-height: 1.7; }
.contact-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 12px; padding: 0 24px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--paper); }
#dialog-content .contact-link { text-decoration: none; }
.contact-link:hover { background: var(--accent); border-color: var(--accent); }

dialog.is-contact .dialog-header { position: sticky; top: -32px; z-index: 1; margin-top: -1px; margin-bottom: 24px; padding-block: 12px; background: var(--paper); }
.contact-fields { display: grid; gap: 20px; }
.contact-field { display: block; font-size: 14px; }
.contact-field > span:not(.contact-field-error) { margin-left: 6px; color: var(--secondary); font-size: 11px; }
.contact-field input, .contact-field select, .contact-field textarea { display: block; width: 100%; min-width: 0; min-height: 46px; margin-top: 7px; padding: 10px 12px; border: 1px solid #788986; border-radius: 4px; background: var(--paper); color: var(--ink); font: inherit; font-size: 16px; line-height: 1.5; }
.contact-field textarea { min-height: 144px; resize: vertical; }
.contact-field :is(input, select, textarea):focus-visible, .contact-submit:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.contact-field [aria-invalid="true"] { border-color: #9b353b; }
.contact-field .contact-field-error { display: block; color: #9b353b; font-size: 13px; }
.contact-field-error:empty { display: none; }
.contact-captcha { margin-top: 24px; }
.contact-captcha-widget { min-height: 65px; max-width: 100%; }
#dialog-content .contact-captcha-status { margin: 8px 0 0; color: var(--secondary); font-size: 13px; line-height: 1.7; }
.contact-captcha-status:empty { display: none; }
.contact-captcha-retry { min-height: 44px; margin-top: 8px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); background: transparent; cursor: pointer; }
.contact-captcha [hidden], .contact-captcha[hidden] { display: none; }
#dialog-content .contact-privacy { margin-block: 20px 16px; color: var(--secondary); font-size: 12px; line-height: 1.8; }
#dialog-content .contact-status { margin-bottom: 16px; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.contact-status:empty { display: none; }
.contact-status[data-state="error"] { color: #9b353b; }
.contact-status[data-state="success"] { color: var(--accent); }
.contact-submit { display: block; min-width: 144px; min-height: 46px; margin-left: auto; padding: 10px 24px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--paper); cursor: pointer; }
.contact-submit:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); }
.contact-submit:disabled { cursor: default; background: var(--line); border-color: var(--line); color: var(--secondary); }
.contact-field :disabled { color: var(--secondary); }

@media (max-width: 1000px) {
  .video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; }
}
@media (min-width: 701px) {
  dialog.is-reading { width: min(760px, calc(100% - 24px)); max-width: none; }
  dialog.is-reading.is-guidelines { width: min(800px, calc(100% - 24px)); }
}
@media (max-width: 700px) {
  dialog.is-contact .dialog-header { top: -24px; }
  .contact-submit { width: 100%; }
  .music { padding-block: 32px 42px; }
  .music-heading { flex-direction: column; align-items: flex-start; gap: 22px; margin-bottom: 24px; }
  .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .video-filters button { min-width: 44px; padding-inline: 12px; font-size: 11px; }
  .video-card h3 { font-size: 14px; }
  .video-play { right: 8px; bottom: 8px; width: 30px; height: 24px; }
  .video-play svg { width: 17px; height: 17px; }
  .profile-facts > div { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .video-thumbnail img { transition: none; }
}

@media (max-width: 360px) {
  .contact-captcha-widget { min-height: 140px; }
  dialog.is-contact { width: calc(100% - 16px); max-width: none; padding: 16px; }
  [data-variant="hybrid-ba"] dialog.is-contact .dialog-header { top: -16px; }
}

/* Keep readability changes scoped to the selected preview. */
[data-variant="hybrid-ba"] .section-heading span { font-size: 12px; }
[data-variant="hybrid-ba"] .empty-copy { font-size: 14px; }
[data-variant="hybrid-ba"] .site-footer { font-size: 12px; }
[data-variant="hybrid-ba"] .desktop-nav a { font-size: 14px; }
[data-variant="hybrid-ba"] .youtube-link { font-size: 14px; }
[data-variant="hybrid-ba"] .video-filters button { font-size: 13px; }
[data-variant="hybrid-ba"] .profile-facts dt,
[data-variant="hybrid-ba"] .profile-reference figcaption { font-size: 13px; }
[data-variant="hybrid-ba"] #dialog-content { font-size: 16px; line-height: 1.85; }
[data-variant="hybrid-ba"] .dialog-header { position: sticky; top: -32px; z-index: 1; padding-block: 12px; background: var(--paper); }
html:has(dialog[open]) { overflow: hidden; }
html { scrollbar-gutter: stable; }

dialog.reference-viewer { width: min(1400px, calc(100% - 32px)); height: calc(100dvh - 32px); max-height: none; padding: 0; overflow: hidden; }
.reference-viewer[open] { display: flex; flex-direction: column; }
.reference-header { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.reference-header h2 { margin: 0; font-size: 20px; font-weight: 400; white-space: nowrap; }
.reference-tools { display: flex; align-items: center; gap: 4px; }
.reference-tool { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: 4px; background: transparent; cursor: pointer; }
.reference-tool:hover { border-color: var(--line); }
.reference-tool:disabled { opacity: .4; cursor: default; }
.reference-zoom { display: block; width: 44px; font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
.reference-stage { flex: 1; min-height: 0; min-width: 0; overflow: auto; overscroll-behavior: contain; }
.reference-stage > img { display: block; height: auto; max-width: none; margin-inline: auto; }
.reference-stage:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.reference-error { margin: 12px 16px; font-size: 14px; }
.reference-error[hidden] { display: none; }
@media (max-width: 700px) {
  [data-variant="hybrid-ba"] .mobile-nav summary { font-size: 14px; }
  [data-variant="hybrid-ba"] .artist-role { font-size: 12px; }
  [data-variant="hybrid-ba"] .dialog-header { top: -24px; margin-bottom: 24px; }
  [data-variant="hybrid-ba"] dialog.is-guidelines .dialog-header { margin-bottom: 8px; }
  [data-variant="hybrid-ba"] .profile-facts > div { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; }
  .profile-tags .profile-tag { display: grid; grid-template-columns: 3em minmax(0, 1fr); gap: 8px; }
  .profile-tags .profile-tag + .profile-tag-divider + .profile-tag { margin-top: 4px; }
  .profile-tags .profile-tag-divider { display: none; }
  .music-coming { min-height: 156px; }
  .coming-title { font-size: 28px; }
  dialog.reference-viewer { width: 100%; max-width: none; height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .reference-header { gap: 8px; padding: max(8px, env(safe-area-inset-top)) 12px 8px; }
  .reference-header h2 { font-size: 16px; }
  .reference-tools { gap: 0; }
  .reference-zoom { width: 40px; }
  .reference-stage { padding-bottom: env(safe-area-inset-bottom); }
}