
:where(:root) {
  --amdm-accent: #fe708b;
  --amdm-accent-hover: #fe7b94;
  --amdm-accent-pressed: #fe8199;
  --amdm-on-accent: #121212;
  --amdm-text: rgba(255, 255, 255, .87);
  --amdm-text-2: rgba(255, 255, 255, .6);
  --amdm-text-3: rgba(255, 255, 255, .38);
  --amdm-line: rgba(255, 255, 255, .12);
  --amdm-hover: rgba(255, 255, 255, .08);
  --amdm-pressed: rgba(255, 255, 255, .12);
  --amdm-pressed-2: rgba(255, 255, 255, .16);
  --amdm-selected: rgba(254, 112, 139, .08);
  --amdm-card: #1e1e1e;
  --amdm-s3: #2e2e2e;
  --amdm-s4: #383838;
  --amdm-r: 8px;
  --amdm-r-card: 12px;
  --amdm-r-pill: 9999px;
  --amdm-card-pad: 20px;
  --amdm-section: 56px;
  --amdm-shadow-menu: 0 8px 24px rgba(0, 0, 0, .48);
  --amdm-shadow-popover: 0 12px 32px rgba(0, 0, 0, .56);
  --amdm-focus-ring: 2px solid rgba(255, 255, 255, .87);
  --amdm-font: system-ui, -apple-system, "Segoe UI", sans-serif;
  --amdm-t-h2: 600 24px/32px var(--amdm-font);
  --amdm-t-body: 400 16px/24px var(--amdm-font);
  --amdm-t-small: 400 14px/20px var(--amdm-font);
  --amdm-t-caption: 400 13px/16px var(--amdm-font);
}
:root { --amdm-mono: "amdm-mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
@font-face { font-family: "amdm-mono"; src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "amdm-mono"; src: url("fonts/JetBrainsMono-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

.entry-content > .amdm-song { margin-block: 0; }
.amdm-sheet-box { position: relative; border-radius: var(--amdm-r-card); background: var(--amdm-card); overflow: clip; }
.amdm-sheet {
  --amdm-chord-color: var(--amdm-accent);
  padding: var(--amdm-card-pad);
  font-family: var(--amdm-mono);
  font-size: var(--amdm-sheet-size, 15px);
  line-height: 1.6;
  font-variant-ligatures: none;
  letter-spacing: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.amdm-part { margin: 0 0 1.6em; }
.amdm-part:last-child { margin-bottom: 0; }
.amdm-label { font-weight: 700; white-space: pre-wrap; overflow-wrap: anywhere; }
.amdm-prog { white-space: pre-wrap; overflow-wrap: anywhere; }
.amdm-row, .amdm-words { white-space: pre; }
.amdm-row { color: var(--amdm-chord-color); font-weight: 700; }
.amdm-row:empty { display: none; }
.amdm-line--plain .amdm-words { white-space: pre-wrap; overflow-wrap: anywhere; }
.amdm-prog .amdm-chord { color: var(--amdm-chord-color); font-weight: 700; }
.amdm-tag { font-weight: 700; }
.amdm-chord { all: unset; display: inline; position: relative; white-space: pre; font: inherit; color: inherit; cursor: pointer; border-radius: 2px; }
.amdm-chord::before { content: ""; position: absolute; inset: -2px calc(var(--amdm-sheet-size, 15px) * -0.3); }
@media (hover: hover) { .amdm-sheet .amdm-chord:hover { background: var(--amdm-selected); } }
.amdm-chord[aria-expanded="true"] { background: var(--amdm-selected); }

.amdm-song { --amdm-sheet-size: 15px; }
[data-amdm-wait] .amdm-sheet { visibility: hidden; }
.amdm-song__part { margin: 0; }
.amdm-song__part ~ .amdm-song__part { margin-top: var(--amdm-section); }
.amdm-song__title { margin: 0 0 16px; font: var(--amdm-t-h2); letter-spacing: 0; color: var(--amdm-text); }
.amdm-diagrams { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: var(--amdm-card-pad); border-radius: var(--amdm-r-card); background: var(--amdm-card); }
.amdm-diagrams li { margin: 0; padding: 0; }
.amdm-diagram__svg { display: block; width: 110px; height: auto; --amdm-dg-line: rgba(255, 255, 255, .45); --amdm-dg-plate: var(--amdm-s4); --amdm-dg-plate-text: var(--amdm-text); --amdm-dg-mark: var(--amdm-text-2); --amdm-dg-dot: var(--amdm-accent); --amdm-dg-dot-text: var(--amdm-on-accent); --amdm-dg-num: var(--amdm-text-2); --amdm-dg-wm: var(--amdm-text-3); }
.amdm-diagram__none { display: inline-block; font-size: .85em; color: var(--amdm-text-2); }
@supports not selector(:popover-open) { .amdm-pop { display: none; } }
.amdm-pop { margin: auto; padding: 8px; border: 0; border-radius: var(--amdm-r-card); background: var(--amdm-s3); color: var(--amdm-text); box-shadow: var(--amdm-shadow-popover); text-align: center; }
.amdm-pop[data-amdm-placed] { position: fixed; margin: 0; inset: auto; }
.amdm-pop [data-amdm-svg] { display: block; }
.amdm-pop .amdm-diagram__svg { width: 110px; --amdm-dg-plate: var(--amdm-s4); }
.amdm-pop::backdrop { background: transparent; }

.amdm-panel { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) - 1px); z-index: 1; margin: 0; container-type: inline-size; }
.amdm-song ~ .amdm-song .amdm-panel { position: static; }
.amdm-panel[hidden] { display: none; }
[data-amdm-js] .amdm-panel[hidden] { display: block; }
.amdm-panel__box { width: 100%; display: flex; }
.amdm-panel__bar { box-sizing: border-box; width: 100%; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px max(12px, clamp(8px, calc(50% - 200px), 32px)) 8px clamp(8px, calc(50% - 200px), 32px); background: var(--amdm-s3); }
.amdm-panel[data-amdm-stuck] .amdm-panel__bar { box-shadow: var(--amdm-shadow-menu); }
.amdm-panel__group { display: flex; flex-direction: column-reverse; align-items: center; gap: 0; }
.amdm-panel__label { font: 500 12px/16px var(--amdm-font); color: var(--amdm-text-2); }
.amdm-panel__controls { display: inline-flex; align-items: center; gap: 0; }
.amdm-panel__step { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--amdm-r-pill); color: var(--amdm-text); font: inherit; font-size: 18px; line-height: 1; cursor: pointer; transition: background-color .15s ease-out; }
@media (hover: hover) { .amdm-panel__step:hover { background: var(--amdm-pressed); } }
.amdm-panel__step:active { background: var(--amdm-pressed-2); }
.amdm-panel__step[aria-disabled="true"] { color: var(--amdm-text-3); cursor: default; background: transparent; }
.amdm-chord:focus-visible, .amdm-panel__step:focus-visible, .amdm-panel__scroll:focus-visible { outline: var(--amdm-focus-ring); outline-offset: 2px; }
.amdm-panel__value { min-width: 20px; text-align: center; font: 700 15px/20px var(--amdm-mono); color: var(--amdm-text); font-variant-numeric: tabular-nums; }
.amdm-panel__key { width: auto; min-width: 32px; padding: 0 4px; font: 700 15px/20px var(--amdm-mono); color: var(--amdm-text); font-variant-numeric: tabular-nums; }
.amdm-panel__key[aria-disabled="true"] { color: var(--amdm-text); }
.amdm-panel__key[data-amdm-shifted] { color: var(--amdm-accent); }
@media (hover: hover) { .amdm-panel__key[data-amdm-shifted]:hover { color: var(--amdm-text); } }
.amdm-panel__key[data-amdm-shifted]:active { color: var(--amdm-text); }
.amdm-panel__scroll { all: unset; box-sizing: border-box; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--amdm-r-pill); background: var(--amdm-accent); color: var(--amdm-on-accent); cursor: pointer; transition: background-color .15s ease-out; }
@media (hover: hover) { .amdm-panel__scroll:hover { background: var(--amdm-accent-hover); } }
.amdm-panel__scroll:active { background: var(--amdm-accent-pressed); }
.amdm-panel__icon { display: block; }
.amdm-panel__icon--pause, .amdm-panel__scroll[data-amdm-on] .amdm-panel__icon--play { display: none; }
.amdm-panel__scroll[data-amdm-on] .amdm-panel__icon--pause { display: block; }
@media (max-width: 999.98px) {
  .amdm-song { --amdm-sheet-size: 14px; }
  .amdm-diagrams { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .amdm-diagrams .amdm-diagram__svg { width: 100%; }
}
@media (max-width: 599.98px) {
  .amdm-diagrams { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (min-width: 748px) {
  .amdm-panel__bar { min-height: 64px; padding: 0 16px; justify-content: center; gap: 40px; }
  .amdm-panel__group { flex-direction: row; gap: 12px; }
  .amdm-panel__label { font: var(--amdm-t-caption); font-weight: 500; }
  .amdm-panel__controls { gap: 4px; }
  .amdm-panel__step { width: 40px; height: 40px; }
  .amdm-panel__value { min-width: 24px; }
}
@container (max-width: 367.98px) {
  .amdm-panel__bar { gap: 4px; padding-left: 6px; }
  .amdm-panel__step { width: 32px; height: 32px; }
}
@container (max-width: 327.98px) {
  .amdm-panel__bar { gap: 2px; padding-right: 16px; }
  .amdm-panel__step { width: 28px; height: 28px; }
  .amdm-panel__scroll { width: 40px; height: 40px; }
}
.amdm-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; }

.entry-content > footer.amdm-about { margin: 24px 0 0; padding: 16px 0; border-top: 1px solid var(--amdm-line); border-bottom: 1px solid var(--amdm-line); }
.amdm-about ul { display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 0; padding: 0; }
.amdm-about li { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; overflow-wrap: anywhere; }
.amdm-about__key, .amdm-tags__key { font: var(--amdm-t-caption); font-weight: 500; color: var(--amdm-text-2); }
.amdm-about__value { font: var(--amdm-t-body); color: var(--amdm-text); }
.amdm-about__note { margin: 0; padding: 0; font: var(--amdm-t-caption); font-weight: 500; color: var(--amdm-text-2); }
.amdm-about ul + .amdm-about__note { margin-top: 16px; }
.amdm-about__note strong { font-weight: 600; color: var(--amdm-text); }
.amdm-about__note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (hover: hover) { .amdm-about__note a:hover { color: var(--amdm-text); } }
@media (max-width: 999.98px) {
  .amdm-about__key, .amdm-tags__key, .amdm-about__note { font-size: 12px; }
}
@media (min-width: 1000px) {
  .amdm-about ul { flex-direction: row; flex-wrap: wrap; gap: 12px 40px; }
}

.amdm-more, .entry-content > .amdm-more { margin: var(--amdm-section) 0 0; }
.amdm-tags, .entry-content > .amdm-tags { margin: 24px 0 0; }
.amdm-tags__key { display: block; margin: 0 0 8px; }
.amdm-tags ul { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.amdm-tags li { margin: 0; padding: 0; }
.amdm-more__title { margin: 0 0 16px; font: var(--amdm-t-h2); letter-spacing: 0; color: var(--amdm-text); }
.amdm-more__list { list-style: none; margin: 0; padding: 0; }
.amdm-more__list li { margin: 0; padding: 0; }
.amdm-more__list a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; margin: 0 -12px; padding: 10px 12px; border-radius: var(--amdm-r); font: var(--amdm-t-body); color: var(--amdm-text); text-decoration: none; transition: background-color .15s ease-out; }
.amdm-more__name { min-width: 0; overflow-wrap: anywhere; }
.amdm-more__artist { display: block; font: var(--amdm-t-small); color: var(--amdm-text-2); }
.amdm-views { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; font: var(--amdm-t-small); color: var(--amdm-text-2); font-variant-numeric: tabular-nums; }
.amdm-views__eye { flex: 0 0 16px; width: 16px; height: 16px; background: var(--amdm-text-3); -webkit-mask: var(--amdm-eye) center / 16px 16px no-repeat; mask: var(--amdm-eye) center / 16px 16px no-repeat; --amdm-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
@media (forced-colors: active) { .amdm-views__eye { forced-color-adjust: none; background: CanvasText; } }
@media (hover: hover) { .amdm-more__list a:hover { background: var(--amdm-hover); } }
.amdm-more__list a:active { background: var(--amdm-pressed); }
.amdm-more__all { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; height: 40px; margin-top: 16px; padding: 0 16px; border-radius: var(--amdm-r); background: var(--amdm-hover); font: 600 14px/20px var(--amdm-font); color: var(--amdm-text); text-decoration: none; transition: background-color .15s ease-out; }
@media (hover: hover) { .amdm-more__all:hover { background: var(--amdm-pressed); color: var(--amdm-text); } }
.amdm-more__all:active { background: var(--amdm-pressed-2); }
@media (max-width: 999.98px) { .amdm-more__all { height: 44px; } }

@media print {
  :where(:root) { --amdm-text: #000; --amdm-text-2: #333; --amdm-text-3: #555; --amdm-line: #bbb; --amdm-accent: #000; --amdm-on-accent: #fff; --amdm-card: #fff; --amdm-s3: #fff; --amdm-s4: #fff; --amdm-hover: transparent; --amdm-selected: transparent; }
  .amdm-panel, [data-amdm-js] .amdm-panel[hidden], .amdm-pop, .amdm-more, .amdm-tags { display: none; }
  [data-amdm-wait] .amdm-sheet { visibility: visible; }
  .amdm-sheet, .amdm-sheet-box { overflow: visible; }
  .amdm-sheet, .amdm-diagrams { padding: 0; }
  .amdm-part, .amdm-line, .amdm-diagrams li { break-inside: avoid; }
  .amdm-song__title { break-after: avoid; }
  .amdm-diagram__svg { --amdm-dg-line: #666; --amdm-dg-plate: #e6e6e6; --amdm-dg-plate-text: #000; --amdm-dg-mark: #333; --amdm-dg-dot: #000; --amdm-dg-dot-text: #fff; --amdm-dg-num: #333; --amdm-dg-wm: #777; }
}
