.ranking-links{display:flex;align-items:center;justify-content:flex-end;gap:20px;padding:7px max(4vw,20px);border-bottom:1px solid var(--line);font-size:.875rem}
.ranking-links[hidden]{display:none}.ranking-links>span{margin-right:auto;color:var(--muted)}
.ranking-links .text-button{min-height:44px}.ranking-links .active{color:var(--accent);text-decoration:underline;text-underline-offset:5px}
.listening-heading{margin-bottom:24px}.listening-heading h1{max-width:900px}.listening-heading .intro{max-width:700px}
.listening-progress{display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;max-width:900px;margin:0 auto 26px;font-size:.875rem}
.listening-progress progress{width:100%;height:6px;accent-color:var(--accent);border:0;border-radius:10px}
.version-batch{max-width:900px;margin:auto;display:grid;gap:22px}
.panel.version-pair{margin:0;min-width:0;padding:26px 28px 12px;border:1px solid #e9e0d3;border-radius:20px;background:#fffdf8;box-shadow:0 8px 28px #49301905}
.version-pair-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.version-pair-heading>div{min-width:0}
.version-era{margin:0 0 7px;color:var(--pair-accent,var(--accent));font-size:.68rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;line-height:1.4}
.version-title{margin:0;font-family:var(--serif,Georgia,serif);font-size:1.75rem;font-weight:400;letter-spacing:-.035em;line-height:1.18;overflow-wrap:anywhere}
.version-preview-note{flex:none;max-width:42%;padding:6px 10px;border-radius:20px;background:#f4efe6;color:var(--muted);font-size:.7rem;line-height:1.4;text-align:center}
.version-choice-group{min-width:0;border:0;padding:0;margin:0}
.version-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.recording-option{min-width:0;border:1px solid transparent;padding:18px 18px 4px;border-radius:13px;background:#f7f3eb;transition:background .15s,border-color .15s}
.recording-option.chosen{border-color:var(--pair-accent,var(--accent));background:var(--pair-tint,#f3e6d5)}
.recording-option:focus-within{outline:2px solid var(--pair-accent,var(--accent));outline-offset:3px}
.recording-preview{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.recording-preview img{width:56px;height:56px;object-fit:cover;border-radius:8px;box-shadow:0 3px 8px #49301912}
.version-batch .recording-preview .preview-button{border-color:transparent;background:#fffdf8;box-shadow:0 2px 8px #49301908;color:var(--pair-accent,var(--accent))}
.version-batch .recording-preview .preview-button.playing{background:var(--pair-accent,var(--accent));color:#fffdf8;box-shadow:none}
.recording-option label{min-height:48px;display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:600;font-size:1rem;line-height:1.35}
.recording-option input,.skip-version input,.check-line input{accent-color:var(--accent);width:19px;height:19px;flex:none}
.recording-option input,.skip-version input{accent-color:var(--pair-accent,var(--accent))}
.recording-option a{display:inline-flex;align-items:center;gap:5px;min-height:44px;line-height:1.4;color:var(--muted);text-decoration:none;font-size:.75rem}
.recording-option a:hover{text-decoration:underline;text-underline-offset:3px}
.skip-version{display:flex;gap:9px;align-items:center;min-height:44px;width:fit-content;font-size:.8rem;color:var(--muted);cursor:pointer;margin:8px 0 0}
.skip-version:has(input:checked){color:var(--ink)}
.listening-actions{max-width:900px;margin:24px auto 16px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.listening-attribution{margin-top:28px;line-height:1.7}.listening-attribution a{text-underline-offset:3px}
.version-summary{padding:26px}.version-totals{display:flex;justify-content:space-around;gap:24px;text-align:center;border-bottom:1px solid var(--line);margin-bottom:20px}
.version-totals strong{display:block;font-family:Georgia,serif;font-size:2.4rem;font-weight:400;color:var(--accent)}
.listening-results{list-style:none;padding:0;margin:0}.listening-results li{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(140px,210px);align-items:center;gap:16px;border-top:1px solid var(--line);padding:12px 0}
.version-batch .preview-button,.listening-results .preview-button,.mood-song-list .preview-button{width:44px;height:44px;min-width:44px}
.listening-results select,.mood-layout select,#dialog-content select{font:inherit;font-size:1rem;min-height:46px;border:1px solid #c8baaa;background:#fffdf8;color:var(--ink);border-radius:7px;padding:10px;width:100%;max-width:100%}
.mood-layout{display:grid;grid-template-columns:minmax(270px,.75fr) minmax(0,1.4fr);gap:28px;align-items:start}
.mood-controls,.mood-playlist{padding:26px;min-width:0}.mood-controls h2{margin:0 0 20px}.mood-fields{display:grid;gap:18px}.mood-fields .field-label{margin:0}
.mood-extras{margin:20px 0}.mood-extras summary{padding:10px 0;cursor:pointer;line-height:1.5;font-size:.875rem}.mood-extras[open] summary{margin-bottom:12px}
.check-line{min-height:44px;display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1rem;line-height:1.4}
.mood-playlist .section-heading{align-items:start;flex-wrap:wrap;gap:12px}.mood-playlist .count-badge{white-space:nowrap}
.mood-empty{text-align:center;min-height:280px;padding:28px 8px;display:flex;flex-direction:column;justify-content:center;align-items:center}.mood-empty h2{max-width:380px;font-size:2rem}.mood-empty p{max-width:380px;color:var(--muted)}
.mood-song-list{list-style:none;padding:0;margin:20px 0}.mood-song-list>li{display:grid;grid-template-columns:24px minmax(0,1fr) 44px;align-items:center;gap:8px 14px;padding:14px 0;border-top:1px solid var(--line)}
.mood-position{font-variant-numeric:tabular-nums;font-size:.875rem;color:var(--muted)}.mood-song-list .song-text{min-width:0}.mood-song-list .song-text strong{white-space:normal;overflow-wrap:anywhere}
.mood-tag-button{font-size:.8rem!important;min-height:34px;line-height:1.4;justify-content:start;text-align:left}
.mood-row-actions{grid-column:2/4;display:flex;gap:10px;justify-content:flex-end}.mood-row-actions .icon-button{width:44px;min-height:44px;border:1px solid var(--line);border-radius:6px}.mood-row-actions .text-button{font-size:.875rem;min-height:44px;padding:0 6px}
.mood-playlist .results-toolbar{gap:12px;flex-wrap:wrap}.tag-choices{border:0;padding:0;margin:20px 0}.tag-choices legend{font-size:1rem;margin-bottom:10px}
@media(max-width:1000px){.site-header .local-label{display:none}.site-header nav{gap:3px}.site-header .nav-link{padding:10px}.mood-layout{grid-template-columns:minmax(260px,.85fr) minmax(0,1.2fr);gap:20px}}
@media(max-width:760px){.mood-layout{grid-template-columns:minmax(0,1fr)}.mood-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.mood-fields .field-label:last-child{grid-column:1/-1}.listening-heading h1{font-size:2.35rem}.mood-controls,.mood-playlist{padding:20px}.version-options{gap:12px}}
@media(max-width:680px){
  .site-header nav,.is-ranking .site-header nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;width:100%;margin:0}
  .site-header .nav-link,.is-ranking .site-header .nav-link{font-size:.875rem;padding:6px 4px;min-height:44px;white-space:normal;line-height:1.25}
  .is-ranking .site-header{display:block;padding:6px 12px}.is-ranking .site-header .brand{display:none}
  .ranking-links{padding:2px 16px;gap:16px;font-size:.8rem}.ranking-links>span{font-size:.75rem}
  .listening-heading{margin-top:10px}.listening-heading .intro{font-size:1rem}
  .version-batch{gap:16px}.panel.version-pair{padding:18px 14px 8px;border-radius:16px}.version-pair-heading{align-items:flex-start;gap:10px;margin-bottom:16px}.version-title{font-size:1.45rem}.version-era{font-size:.63rem;margin-bottom:6px}.version-preview-note{font-size:.63rem;padding:5px 8px;max-width:40%}
  .recording-option{padding:12px 10px 2px;border-radius:11px}.recording-preview{gap:6px;margin-bottom:8px}.recording-preview img{width:40px;height:40px}.recording-preview .preview-button{width:44px;height:44px}
  .recording-option label{font-size:.84rem;gap:7px;min-height:48px;align-items:center}.recording-option label span{min-width:0;overflow-wrap:anywhere}.recording-option input{width:17px;height:17px}.recording-option a{font-size:.7rem;min-height:44px}.version-options{gap:10px}.skip-version{font-size:.75rem}
  .listening-actions{gap:12px}.listening-actions .small{order:3;width:100%;text-align:center}.listening-actions .button{font-size:.875rem;padding:12px}
  .version-summary{padding:18px}.version-totals{gap:10px;font-size:.8rem}.version-totals strong{font-size:2rem}.listening-results li{grid-template-columns:minmax(0,1fr) 44px;gap:8px}.listening-results select{grid-column:1/-1}
  .mood-playlist .results-toolbar>.button{width:100%}.mood-row-actions{gap:8px}.mood-song-list>li{column-gap:9px}
}
@media(prefers-reduced-motion:reduce){.recording-option{transition:none}}

.version-album-exports{margin:30px 0}.version-album-exports h2{margin-bottom:8px}.version-export-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0 28px}
.version-export-album{padding:22px 16px;background:var(--album-bg);border-top:5px solid var(--album-accent);min-width:0}.version-export-album h3{font-family:Georgia,serif;font-size:1.6rem;font-weight:400;color:var(--album-accent);margin:0 0 10px}.version-export-album .small{color:#504a46}.version-export-album .button{width:100%;min-height:44px;font-size:.875rem;padding:10px}
.version-card-layout #share-image,.version-card-layout #share-image[height="1920"],.version-card-layout .card-preview-wrap canvas{display:block;width:100%;height:auto;max-height:none;max-width:100%}.version-card-layout #share-image[hidden],.version-card-layout .card-preview-wrap [hidden]{display:none}
@media(max-width:760px){.version-export-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.version-card-layout{display:flex;flex-direction:column}.version-card-layout .card-preview-wrap{padding:12px}}

.section-reset{display:flex;justify-content:flex-end;margin:-12px 0 16px}.section-reset .text-button{min-height:44px;padding:8px 4px;font-size:.875rem}

.tag-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}
.tag-choices legend{grid-column:1/-1;margin-bottom:10px}
.tag-choices .check-line{min-width:0}
@media(max-width:680px){.tag-choices .check-line{font-size:.875rem}#song-energy{font-size:1rem}}