/* Family overview pages (sections and branches of the style tree). Uses theme variables, so light and dark both work. */
.top-level .branch-link{font-size:15px;font-weight:500;color:var(--text)}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--text)}
.family-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,44%);gap:36px;align-items:start;margin:14px 0 26px}
.family-copy h1{font-size:clamp(34px,3.8vw,52px);font-weight:600;letter-spacing:-.01em;margin:8px 0 4px;line-height:1.12}
.family-copy .name-zh{margin:0 0 14px;color:var(--muted);font-size:15px}
.family-copy .summary{font-size:19px;line-height:1.6;color:var(--text);margin:0 0 14px}
.family-copy .lead-text{color:var(--body);line-height:1.85;margin:0}
.family-mosaic{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.family-mosaic a{display:block;border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.family-mosaic figure{margin:0;position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--panel-2)}
.family-mosaic img{display:block;width:100%;height:100%;object-fit:cover}
.family-mosaic .visual-placeholder{height:100%;min-height:0}
.family-page section{margin:0 0 30px}
.family-page h2{font-size:18px;font-weight:600;margin:0 0 12px;color:var(--text)}
.family-traits ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.family-traits li{border:1px solid var(--line);border-radius:7px;background:var(--panel);padding:14px 16px;font-size:14.5px;line-height:1.65;color:var(--body)}
.branch-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.branch-card a{display:flex;flex-direction:column;height:100%;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--panel);color:var(--text)}
.branch-card a:hover{text-decoration:none;border-color:var(--accent)}
.branch-mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line)}
.branch-mosaic figure{margin:0;position:relative;aspect-ratio:4/3;background:var(--panel-2);overflow:hidden}
.branch-mosaic img{display:block;width:100%;height:100%;object-fit:cover}
.branch-mosaic .visual-placeholder span{display:none}
.branch-body{padding:12px 14px 14px;display:flex;flex-direction:column;flex:1}
.branch-body strong{font-size:17px;font-weight:600}
.branch-body p{margin:8px 0 10px;font-size:14px;line-height:1.65;color:var(--body);flex:1}
.choose-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:7px;background:var(--panel)}
.choose-list li{display:grid;grid-template-columns:minmax(160px,34%) 24px minmax(0,1fr);gap:10px;align-items:center;padding:12px 16px}
.choose-list li+li{border-top:1px solid var(--line-soft,var(--line))}
.choose-want{font-size:14.5px;color:var(--body)}
.choose-arrow{color:var(--accent);text-align:center}
.choose-picks{display:flex;flex-wrap:wrap;gap:8px}
.choose-genre{display:inline-flex;align-items:baseline;gap:6px;padding:5px 10px;border:1px solid var(--line);border-radius:999px;color:var(--text);font-size:14px}
.choose-genre:hover{text-decoration:none;border-color:var(--accent)}
.choose-genre small{color:var(--faint);font-size:12px}
.family-prompt pre{white-space:pre-wrap}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:7px;background:var(--panel)}
.family-compare table{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.family-compare th,.family-compare td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line-soft,var(--line));vertical-align:top;color:var(--body)}
.family-compare thead th{font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--faint);background:var(--panel-2)}
.family-compare tbody tr:last-child th,.family-compare tbody tr:last-child td{border-bottom:0}
.family-compare tbody th a{color:var(--text);font-weight:600}
.family-compare tbody th small{display:block;color:var(--faint);font-size:12px;font-weight:400}
.family-compare td.num{white-space:nowrap;font-family:var(--mono);font-size:13px}
.family-compare .chip{margin:0 4px 4px 0;font-size:12px}
@media(max-width:1180px){.family-hero{grid-template-columns:minmax(0,1fr) minmax(240px,40%);gap:24px}}
@media(max-width:800px){
  .family-hero{grid-template-columns:1fr;gap:18px}
  .family-copy .summary{font-size:17px}
  .family-traits ul{grid-template-columns:1fr}
  .choose-list li{grid-template-columns:1fr;gap:6px}
  .choose-arrow{display:none}
  .branch-grid{grid-template-columns:1fr}
}
/* long English names (e.g. "Wafu / Japanese Traditional Fusion") must not push the reason label out of the card */
.related-card strong{overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
.related-card em{flex:0 0 auto;white-space:nowrap;margin-left:auto}
/* phones: let long names wrap and move the reason label onto its own line instead of overflowing the card */
.related-card li{min-width:0}
@media(max-width:800px){
  .related-card a{flex-wrap:wrap;row-gap:2px}
  .related-card strong{white-space:normal;overflow:visible;flex:0 1 auto}
  .related-card span{white-space:normal;flex:1 1 auto}
  .related-card em{flex:1 0 100%;margin-left:0;text-align:left;white-space:normal}
}
/* listen buttons on key works */
.listen-links{display:flex;align-items:center;gap:8px;align-self:start;white-space:nowrap;font-size:13px}
.listen-links span{color:var(--faint);font-size:12px}
.listen-links a{padding:3px 10px;border:1px solid var(--line);border-radius:999px;color:var(--text)}
.listen-links a:hover{text-decoration:none;border-color:var(--accent);color:var(--accent)}
@media(max-width:800px){.listen-links{grid-column:2;flex-wrap:wrap}}
/* ver 2.3 · listen bar (style preview + real song) */
.listen-bar{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.preview-player{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"btn meta time" "btn bar bar";align-items:center;column-gap:14px;row-gap:6px;padding:10px 16px 10px 10px;border:1px solid #4a3c7a;border-radius:12px;background:linear-gradient(90deg,#211a3d,#1a1630 60%);max-width:560px}
.preview-play{grid-area:btn;width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;color:#120f22;background:linear-gradient(135deg,var(--blue),var(--violet) 55%,var(--pink));box-shadow:0 0 0 4px #c3a4ff22}
.preview-play svg{width:18px;height:18px;fill:currentColor;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.preview-play .pv-pause{display:none;fill:none}
.preview-player.playing .pv-play{display:none}.preview-player.playing .pv-pause{display:inline}
.preview-player.playing .preview-play{animation:pv-pulse 1.4s ease-in-out infinite}
@keyframes pv-pulse{50%{box-shadow:0 0 0 8px #c3a4ff18}}
.preview-meta{grid-area:meta;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;min-width:0}
.preview-meta strong{font-size:14px;color:var(--text)}
.preview-meta span{font-size:12px;color:var(--faint)}
.preview-time{grid-area:time;font:12px var(--mono);color:var(--muted)}
.preview-bar{grid-area:bar;height:4px;border-radius:2px;background:#ffffff14;overflow:hidden}
.preview-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--violet),var(--pink));transition:width .25s linear}
.real-listen{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px}
.real-listen .real-work{color:var(--body)}
.real-listen a{padding:3px 10px;border:1px solid var(--line);border-radius:999px;color:var(--text);font-size:12px}
.real-listen a:hover{border-color:var(--accent);text-decoration:none}
/* animation toggle: a labelled switch, not a play button */
.waveform-toggle.anim-toggle{width:auto;height:26px;padding:0 10px;display:inline-flex;gap:6px;align-items:center;font-size:11px;letter-spacing:.06em}
.anim-dot{width:7px;height:7px;border-radius:50%;background:#7ee0a8;box-shadow:0 0 6px #7ee0a8}
.waveform-paused .anim-dot{background:var(--faint);box-shadow:none}
:root[data-theme="light"] .preview-player{background:linear-gradient(90deg,#f3edff,#faf7ff);border-color:#d6c8f3}
:root[data-theme="light"] .preview-bar{background:#00000012}
.waveform-topline .anim-toggle span{display:inline-block}
/* ver 2.3 · the hero card is the player */
.hero-art.has-preview .holo{position:relative}
.holo-play{position:absolute;left:50%;top:50%;z-index:6;width:96px;height:96px;margin:-48px 0 0 -48px;border:0;padding:0;background:none;display:grid;place-items:center;cursor:pointer;color:#fff;transition:opacity .35s,transform .25s}
.holo-play:hover{transform:scale(1.08)}
.holo-play svg{width:72px;height:72px;fill:#fffffff0;stroke:#fffffff0;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;margin-left:8px;filter:drop-shadow(0 3px 12px #0007) drop-shadow(0 0 2px #0004)}
.holo-play .pv-pause{display:none;fill:none}
.pv-playing .holo-play{opacity:0}
.pv-playing .holo:hover .holo-play{opacity:.85}
.pv-playing .holo-play .pv-play{display:none}.pv-playing .holo-play .pv-pause{display:inline}.pv-playing .holo-play svg{margin-left:0;fill:none}
.holo-progress{position:absolute;left:10px;right:10px;bottom:8px;z-index:6;height:3px;border-radius:2px;background:#ffffff30;overflow:hidden;opacity:0;transition:opacity .3s}
.pv-playing .holo-progress{opacity:1}
.holo-progress i{display:block;height:100%;width:0;background:#fff;transition:width .25s linear}
.pv-idle .holo-tilt{filter:saturate(.9)}
.pv-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:8px;font-size:12px;color:var(--muted)}
.pv-line .pv-by{color:var(--faint)}
.pv-line .pv-time{font-family:var(--mono);color:var(--faint)}
.pv-dot{width:7px;height:7px;border-radius:50%;background:var(--faint)}
.pv-playing .pv-dot{background:#7ee0a8;box-shadow:0 0 6px #7ee0a8}
.pv-auto{margin-left:auto;font-size:11px;padding:3px 9px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer}
.pv-auto[aria-pressed="true"]{border-color:#7ee0a8;color:#7ee0a8}
@media (prefers-reduced-motion: reduce){.holo-play{transition:none}}
/* sound-image caption as a layer on the card (moves with the tilt) */
.holo-caption{position:absolute;left:14px;top:12px;z-index:4;display:flex;flex-direction:column;gap:1px;padding:7px 11px;border-radius:8px;background:#0c0b1766;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;pointer-events:none;transform:translate(var(--ix,0),var(--iy,0))}
.holo-caption span{font-size:10px;letter-spacing:.12em;opacity:.75}
.holo-caption b{font-size:13px;font-weight:600}
.holo-caption:empty{display:none}
.cap-on-card figcaption{display:none}
.hero-art.has-preview .waveform-panel{min-height:0}
.real-listen{margin-top:16px}
.hero-art.has-holo .waveform-panel .waveform-svg{display:none}
.hero-art.has-preview .waveform-panel{display:none}
.pv-line{margin-top:12px}
@media (max-width:800px){.pv-line{font-size:12px}.pv-line .pv-by{flex-basis:100%;order:5}.pv-auto{margin-left:auto}}
/* v3 polish: text-only caption, uniform preview line */
.holo-caption{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;left:16px;top:14px;color:#fff;text-shadow:0 1px 8px #0009,0 0 2px #0006}
.holo-caption.on-light{color:#1d1830;text-shadow:0 1px 8px #fff9,0 0 2px #fff8}
.holo-caption span{opacity:.8}
.hero-art.has-holo .waveform-panel{display:block;height:0;min-height:0;overflow:hidden;margin:0;padding:0;border:0}
.pv-soon{margin-left:auto;font-size:11px;padding:3px 9px;border-radius:999px;border:1px dashed var(--line);color:var(--faint)}
.pv-none{color:var(--faint)}

/* Vocaloid: visible voice-timbre limitation beside the prompt. */
.voice-limit{margin:14px 0 16px;padding:14px 17px;border:1px solid #83613a;border-left:4px solid #e9bb75;border-radius:8px;background:#32291f;color:#f5e2c6;line-height:1.75}.voice-limit strong{display:block;color:#ffcf8b;font-size:14px;letter-spacing:.03em}.voice-limit p{margin:5px 0 0;font-size:14px}:root[data-theme="light"] .voice-limit{background:#fff5e4;border-color:#d1a56b;border-left-color:#9c5b10;color:#513b22}:root[data-theme="light"] .voice-limit strong{color:#834708}