@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/manrope-400.woff2") format("woff2");}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/manrope-500.woff2") format("woff2");}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/manrope-600.woff2") format("woff2");}
@font-face{font-family:"Noto Sans SC";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/noto-sans-sc-400.woff2") format("woff2");}
@font-face{font-family:"Noto Sans SC";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/noto-sans-sc-500.woff2") format("woff2");}
@font-face{font-family:"Noto Sans SC";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/noto-sans-sc-600.woff2") format("woff2");}
/* Shared TandaClara finish. Geometry of graphs, maps and musical timelines stays page-owned. */
html[data-theme][data-theme-page] {
  --ui-font: "Avenir Next", "PingFang SC", "Hiragino Sans GB", -apple-system, sans-serif;
  --ui-bg: #faf9f7; --ui-surface: #ffffff; --ui-soft: #f1efec;
  --ui-text: #302b2e; --ui-muted: #706963; --ui-line: #dfdad4; --ui-accent: #79551e;
  --sans: var(--ui-font); --serif: var(--ui-font);
}
html[data-theme="dark"][data-theme-page] {
  --ui-bg: #191619; --ui-surface: #211d21; --ui-soft: #2a2529;
  --ui-text: #eee8e1; --ui-muted: #b9afa6; --ui-line: #453c41; --ui-accent: #dbb780;
}
html[data-theme][data-theme-page] {
  --bg: var(--ui-bg); --panel: var(--ui-surface); --panel-deep: var(--ui-soft); --panel-raised: var(--ui-soft);
  --line: var(--ui-line); --line-soft: var(--ui-line); --line-bright: var(--ui-line);
  --muted: var(--ui-muted); --faint: var(--ui-muted); --gold: var(--ui-accent);
  --gold-soft: color-mix(in srgb, var(--ui-accent) 10%, transparent);
  --ink: var(--ui-text); --paper: var(--ui-bg);
  --map-bg: var(--ui-bg); --map-panel: var(--ui-surface); --map-panel-2: var(--ui-soft);
  --map-ink: var(--ui-text); --map-muted: var(--ui-muted); --map-faint: var(--ui-muted); --map-line: var(--ui-line); --map-gold: var(--ui-accent);
  --culture-bg: var(--ui-bg); --culture-panel: var(--ui-surface); --culture-panel-warm: var(--ui-soft);
  --culture-ink: var(--ui-text); --culture-muted: var(--ui-muted); --culture-faint: var(--ui-muted); --culture-line: var(--ui-line); --culture-gold: var(--ui-accent);
  background: var(--ui-bg);
  body { background: var(--ui-bg); color: var(--ui-text); font-family: var(--ui-font); -webkit-font-smoothing: antialiased; }
  :is(button,input,select,textarea) { font-family: var(--ui-font); }
  :is(h1,h2,h3,h4,.hero-title,.section-title,.card-title) { font-family: var(--ui-font); letter-spacing: -.025em; }
  :is(h1,.hero-title) { font-weight: 500; }
  :is(h2,h3) { font-weight: 600; }
  :is(.hero h1,.culture-hero h1,.where-hero h1,.cats-hero h1) { font-size: clamp(34px,4.4vw,60px); line-height: 1.2; }
  :is(.hero-lede,.culture-lede,.where-hero-lede,.where-hero-body) { line-height: 1.85; max-width: 66ch; }
  :is(.topbar,.site-header,.map-topbar,.culture-topbar,.where-topbar,.cats-topbar,.site-head,.score-site-header) {
    background: var(--ui-bg); border-bottom: 1px solid var(--ui-line); box-shadow: none;
    min-height: 88px; padding-block: 14px; gap: 18px;
  }
  :is(.brand-home,.map-brand,.culture-brand,.where-brand,.cats-brand,.score-brand-home) { flex-shrink: 0; }
  :is(.topnav,.header-actions,.map-topbar-actions,.culture-topbar-actions,.where-topbar-actions,.cats-topbar-actions,.head-actions,.score-site-header nav) { gap: 12px; flex-wrap: wrap; }
  :is(.topnav a,.header-link,.map-topbar-actions a,.culture-topbar-actions a,.where-topbar-actions a,.cats-topbar-actions a,.head-actions a,.score-site-header nav a) {
    font-size: 13px; font-weight: 500; color: var(--ui-muted); min-height: 36px; display: inline-flex; align-items: center;
  }
  :is(.language-choice,.theme-toggle) { background: transparent; color: var(--ui-muted); border-color: var(--ui-line); border-radius: 8px; min-height: 34px; }
  .language-choice[aria-pressed="true"] { background: var(--ui-soft); color: var(--ui-text); border-color: var(--ui-accent); }
  :is(.eyebrow,.culture-eyebrow,.where-eyebrow,.cats-eyebrow) { text-transform: none; letter-spacing: .01em; color: var(--ui-muted); font-weight: 500; }
  :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),textarea,select) { background-color: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-line); border-radius: 9px; }
  :is(a,button,input,select,textarea,summary):focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 4px; }
  :is(.hero,.culture-hero,.where-hero,.cats-hero) { background: transparent; box-shadow: none; }
  :is(.panel,.collection-toolbar,.filter-panel,.search-panel,.method-panel,.guide-shell,.concept-detail,.resource-card,.person-card) { box-shadow: none; border-color: var(--ui-line); }
}
/* These editorial pages historically name their background "ink". */
html[data-theme][data-theme-page]:is([data-theme-page="people"],[data-theme-page="resources"],[data-theme-page="musicality"]) {
 --ink: var(--ui-bg); --ink-soft: var(--ui-surface); --ink-raised: var(--ui-soft);
 --paper: var(--ui-text); --paper-warm: var(--ui-text); --paper-muted: var(--ui-muted);
}
html[data-theme][data-theme-page="home"] {
 --home-font: var(--ui-font); --home-paper: var(--ui-bg); --home-surface: var(--ui-soft); --home-soft: var(--ui-soft);
 --home-ink: var(--ui-text); --home-muted: var(--ui-muted); --home-line: var(--ui-line); --home-accent: var(--ui-accent);
 body:has(#homePanel:not([hidden])) header { border-bottom: 0; }
 .home-sample:hover,.home-sample:focus-visible { transform: none; }
 .home-journey:hover { transform: none; }
 .home-journey-title { font-family: var(--ui-font); font-weight: 500; }
 .home-closing-art { aspect-ratio: auto; }
 .home-closing-art::after { display: none; }
 .home-search textarea { background: transparent; border-radius: 0; }
 #workspace :is(h2,h3,.song-title,.song-detail-title) { font-family: var(--ui-font); }
}
html[data-theme][data-theme-page="listening-score"] {
 #el-flete-listening-score { font-family: var(--ui-font); background: var(--ui-bg); color: var(--ui-text); }
 .score-shell { background: var(--ui-surface); border-color: var(--ui-line); box-shadow: none; }
 .score-header h1 { font-family: var(--ui-font); font-weight: 500; }
}
html[data-embed="true"][data-theme][data-theme-page="listening-score"] { background: transparent; body,#el-flete-listening-score { background: transparent; } }
@media(max-width:760px) {
 html[data-theme][data-theme-page] {
  :is(.topbar,.site-header,.map-topbar,.culture-topbar,.where-topbar,.cats-topbar,.site-head,.score-site-header) { min-height: 76px; padding: 12px 18px; gap: 12px; }
  :is(.topnav,.header-actions,.map-topbar-actions,.culture-topbar-actions,.where-topbar-actions,.cats-topbar-actions,.head-actions) { gap: 8px; }
  :is(.topnav a,.header-link,.map-topbar-actions a,.culture-topbar-actions a,.where-topbar-actions a,.cats-topbar-actions a,.head-actions a) { font-size: 12px; }
  :is(button,summary,select) { min-height: 44px; }
  :is(input[type="text"],input[type="search"],textarea) { font-size: 16px; }
  :is(.hero h1,.culture-hero h1,.where-hero h1,.cats-hero h1) { font-size: 34px; }
  :is(.language-choice) { min-height: 36px; }
  :is(.hero-lede,.culture-lede,.where-hero-body) { font-size: 15px; }
 }
}
@media(prefers-reduced-motion:reduce) {
 html[data-theme][data-theme-page] { scroll-behavior: auto; *,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
}
html[data-theme][data-theme-page="tanda-builder"] {
 .hero { padding: 56px 0 42px; }
 :is(.seed-search,.draft-section,.analysis-section,.dimension-section,.suggestion-section,.evidence-section,.method-section) { box-shadow: none; background: var(--ui-surface); border-color: var(--ui-line); border-radius: 14px; }
 :is(.search-intro h2,.section-head h2,.method-section h2) { font-size: clamp(24px,2.3vw,32px); line-height: 1.35; }
 :is(.search-intro > p:last-child,.section-copy,.method-grid p,.dimension-detail,.empty-state,.lookup-status) { font-size: 13px; line-height: 1.75; }
 :is(.seed-form label > span,.signal-card strong,.pair-card strong,.method-grid strong) { font-size: 12px; }
}
html[data-theme="light"][data-theme-page] img[src*="tandaclara-wordmark-california-v4"] { content: url('/tandaclara-wordmark-california-light-v1.jpg?v=1'); }
html[data-theme][data-theme-page] {
 .site-preferences { position: relative; font-size: 12px; color: var(--ui-muted); }
 .site-preferences summary { display: flex; align-items: center; gap: 7px; cursor: pointer; list-style: none; min-height: 40px; white-space: nowrap; }
 .site-preferences summary::-webkit-details-marker { display: none; }
 .site-preferences summary::after { content: '+'; margin-left: 6px; }
 .site-preferences[open] summary::after { content: '−'; }
 .site-preferences .language-choice-grid { position: absolute; z-index: 80; right: 0; top: 100%; width: 280px; max-width: calc(100vw - 36px); display: flex; flex-wrap: wrap; padding: 14px; gap: 6px; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 12px; box-shadow: 0 8px 28px #00000012; overflow: visible; }
 .site-preferences .language-choice { font-size: 12px; min-height: 40px; min-width: 42px; }
}
@media(max-width:760px) {
 html[data-theme][data-theme-page] {
  .topbar { display: flex; flex-wrap: wrap; }
  .topbar .language-pick { margin-left: auto; }
  .topbar .topnav { display: flex; order: 5; flex-basis: 100%; }
  .topbar .brand-home { width: 136px; }
  .site-header { flex-wrap: wrap; }
  .site-header .header-actions { flex-wrap: wrap; }
  .site-preferences summary { font-size: 11px; }
 }
}
html[data-theme][data-theme-page] {
 body :where(h1,h2,h3,h4,h5,p,a,button,label,span,strong,em,small,li,dt,dd,summary,blockquote,figcaption,output) { font-family: var(--ui-font); }
 --gold-light: var(--ui-accent);
 .cat-welcome-card { background: var(--ui-surface); border-color: var(--ui-line); box-shadow: 0 20px 60px #00000024; }
 .cat-welcome h2 { color: var(--ui-text); line-height: 1.25; font-weight: 500; }
 .cat-welcome-punchline { color: var(--ui-muted); font-style: normal; }
 .cat-tagline { font-style: normal; }
 :is(.culture-lede,.topic-body) { font-size: 15px; }
}
@media(max-width:760px) {
 html[data-theme][data-theme-page] {
  :is(.map-topbar nav,.where-topbar nav,.culture-topbar nav) { display: flex; flex-wrap: wrap; gap: 12px; }
  :is(.map-topbar-actions,.culture-topbar-actions,.where-topbar-actions,.cats-topbar-actions) { display: flex; flex-wrap: wrap; justify-content: flex-start; }
  .cats-map-link { display: inline-flex; }
 }
}
html[data-theme][data-theme-page="listening-score"] #el-flete-listening-score {
 :is(h1,h2,h3,p,span,strong,em,button,label,summary) { font-family: var(--ui-font); }
 .score-shell { background: var(--ui-surface); border-color: var(--ui-line); box-shadow: none; }
 .score-header { background: var(--ui-surface); }
 h1 { font-weight: 500; letter-spacing: -.025em; }
}
html[data-theme][data-theme-page="data-sources"] .independent { background: var(--ui-soft); border-color: var(--ui-line); color: var(--ui-muted); }
html[data-theme][data-theme-page="data-sources"] .independent::before { background: var(--ui-accent); }
html[data-theme][data-theme-page="lyric-culture"] .culture-principle { background: var(--ui-soft); border-color: var(--ui-accent); color: var(--ui-muted); }
html[data-theme][data-theme-page="lyric-culture"] .culture-principle > span:first-child { color: var(--ui-accent); }
html[data-theme][data-theme-page] .site-preferences .language-choice-grid button { font-size: 12px; min-height: 40px; min-width: 42px; border-radius: 8px; }
html[data-theme][data-theme-page="home"] {
 #workspace { max-width: 1440px; margin-inline: auto; }
 #workspace :is(.song,.date-divider) { border-color: var(--ui-line); }
 #workspace .song { padding-block: 22px; }
 #workspace :is(.artist,.title-zh,.title-meaning,.time,.folder-sidebar-title,.version-meta) { color: var(--ui-muted); }
 #workspace .song .title { font-size: calc(19px * var(--app-font-scale)); font-weight: 600; }
 #workspace :is(.workspace-primary-actions button,.workspace-tools summary,.search-actions button) { background: var(--ui-soft); color: var(--ui-text); border: 1px solid var(--ui-line); border-radius: 9px; min-height: 42px; }
 #workspace #folderBar > button { min-height: 36px; border-radius: 8px; border-color: transparent; background: transparent; text-align: left; }
 #workspace #folderBar > button:hover { background: var(--ui-soft); }
 #workspace :is(.song details,.song summary) { box-shadow: none; border-color: var(--ui-line); }
 #workspace .song summary { color: var(--ui-accent); min-height: 40px; display: flex; align-items: center; }
 #workspace .song .links a { background: var(--ui-soft); color: var(--ui-accent); border-color: var(--ui-line); font-weight: 500; }
 #controls { background: var(--ui-bg); border-top: 1px solid var(--ui-line); }
 #listenBtn:not(.listening) { background: var(--ui-accent); color: var(--ui-bg); border-color: var(--ui-accent); border-radius: 12px; }
 :is(.auth-card,.guide-card,.users-card) { background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-line); }
}
html[data-theme][data-theme-page="home"] {
 #workspace :is(.introduction-body,.translation-md,.lyrics-text,.person-bio,.lyrics-original) { color: var(--ui-text); font-size: calc(15px * var(--app-font-scale)); line-height: 1.9; max-width: 78ch; }
 #workspace :is(.introduction-section,.translation-note) { max-width: 78ch; margin-block: 20px; }
 #workspace .introduction-heading { color: var(--ui-text); font-size: calc(14px * var(--app-font-scale)); font-weight: 600; margin-bottom: 8px; }
 #workspace :is(.title-names,.title-note,.search-meta) { color: var(--ui-muted); }
 #workspace .search-lyric-snippet { background: var(--ui-soft); border-color: var(--ui-accent); color: var(--ui-text); }
}
html[data-theme][data-theme-page] :is(input,textarea)::placeholder { color: var(--ui-muted); opacity: .85; }
html[data-theme][data-theme-page="home"][data-design-direction="c"] .home-samples { border-top-color: var(--home-line); }
@media(max-width:760px) {
 html[data-theme][data-theme-page] .header-actions > a { display: inline-flex; align-items: center; min-height: 36px; }
}
html[data-theme][data-theme-page="tanda-graph"] {
 .canvas-shell { background: linear-gradient(color-mix(in srgb,var(--ui-line) 45%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ui-line) 45%,transparent) 1px,transparent 1px),var(--ui-surface); background-size: 44px 44px,44px 44px,auto; }
 .workspace { box-shadow: none; border-color: var(--ui-line); }
}
/* Original fileteado artwork remains intact, with quieter editorial proportions. */
html[data-theme][data-theme-page] {
 :is(.topbar,.site-header,.map-topbar,.culture-topbar,.where-topbar,.cats-topbar,.site-head,.score-site-header) :is(.brand-home,.map-brand,.culture-brand,.where-brand,.cats-brand,.score-brand-home) { width: 120px; }
 :is(.topbar,.site-header,.map-topbar,.culture-topbar,.where-topbar,.cats-topbar,.site-head,.score-site-header) :is(.brand-wordmark,.score-brand-home img) { width: 120px; max-width: 100%; height: auto; object-fit: contain; }
}
html[data-theme-page="home"][data-theme][data-design-direction="c"] {
 body:has(#homePanel:not([hidden])) header h1 { width: 118px; height: 46px; }
 .home-closing-art { width: min(100%, 340px); margin: 48px auto 0; padding-bottom: 24px; }
 .home-closing-art .home-mascot-note { max-width: 320px; margin-top: 18px; font-size: 11px; line-height: 1.8; color: var(--home-muted); }
}
@media(max-width:760px) {
 html[data-theme-page="home"][data-theme][data-design-direction="c"] {
  body:has(#homePanel:not([hidden])) header h1 { width: 104px; height: 41px; }
  .home-closing-art { width: min(78%,260px); margin-top: 36px; }
 }
 html[data-theme][data-theme-page] {
  :is(.topbar,.site-header,.map-topbar,.culture-topbar,.where-topbar,.cats-topbar,.site-head,.score-site-header) :is(.brand-home,.map-brand,.culture-brand,.where-brand,.cats-brand,.score-brand-home) { width: 104px; }
  :is(.topbar,.site-header,.map-topbar,.culture-topbar,.where-topbar,.cats-topbar,.site-head,.score-site-header) :is(.brand-wordmark,.score-brand-home img) { width: 104px; }
 }
}
/* The illustration now lives in the footer: let the opening use the page width. */
@media(min-width:761px) {
 html[data-theme-page="home"][data-theme][data-design-direction="c"] {
  .home-hero { grid-template-columns: minmax(0,1fr); justify-content: stretch; padding: 40px 0 64px; }
  .home-hero-copy { width: 100%; max-width: none; align-items: stretch; }
  .home-title { max-width: 1060px; }
  .home-intro { max-width: 820px; }
  .home-search { width: 100%; max-width: none; margin-top: 32px; }
  .home-privacy-note { max-width: 760px; }
 }
}
/* Balance the text-only opening with an introduction alongside the headline. */
@media(min-width:1100px) {
 html[data-theme-page="home"][data-theme][data-design-direction="c"] {
  .home-hero-copy { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(280px,.8fr); column-gap: clamp(40px,5vw,80px); align-items: end; }
  .home-title { grid-column: 1; grid-row: 1; max-width: none; text-wrap: balance; }
  .home-intro { grid-column: 2; grid-row: 1; max-width: 38ch; margin: 0 0 5px; font-size: calc(17px * var(--app-font-scale)); line-height: 1.9; }
  .home-search { grid-column: 1 / -1; grid-row: 2; margin-top: 40px; }
  .home-primary-actions { grid-column: 1 / -1; grid-row: 3; }
  .home-privacy-note { grid-column: 1 / -1; grid-row: 4; }
 }
}

/* One brand signature in the opening, alongside the purpose of the site. */
html[data-theme-page="home"][data-theme][data-design-direction="c"] {
 body:has(#homePanel:not([hidden])) header { justify-content: flex-end; min-height: 64px; padding-block: 12px; }
 body:has(#homePanel:not([hidden])) header h1 { display: none; }
 .home-hero-brand { margin: 0 0 24px; width: min(180px,60%); order: -1; }
 .home-hero-brand img { display: block; width: 100%; height: auto; }
 .home-hero-brand .hero-brand-dark { display: none; }
}
html[data-theme-page="home"][data-theme="dark"][data-design-direction="c"] {
 .home-hero-brand .hero-brand-dark { display: block; }
 .home-hero-brand .hero-brand-light { display: none; }
}
@media(min-width:761px) {
 html[data-theme-page="home"][data-theme][data-design-direction="c"] {
  .home-hero-copy { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); column-gap: clamp(36px,5vw,80px); align-items: start; }
  .home-title { grid-column: 1; grid-row: 1; max-width: none; }
  .home-intro { grid-column: 1; grid-row: 2; max-width: 64ch; margin: 24px 0 0; font-size: calc(16px * var(--app-font-scale)); line-height: 1.85; }
  .home-hero-brand { grid-column: 2; grid-row: 1 / 3; width: min(100%,390px); margin: 0; align-self: center; justify-self: center; }
  .home-search { grid-column: 1 / -1; grid-row: 3; margin-top: 36px; }
  .home-primary-actions { grid-column: 1 / -1; grid-row: 4; }
  .home-privacy-note { grid-column: 1 / -1; grid-row: 5; }
 }
}

/* Keep all home viewing preferences together in the top toolbar. */
html[data-theme-page="home"][data-theme][data-design-direction="c"] {
 body:has(#homePanel:not([hidden])) header { display: flex; justify-content: flex-end; align-items: center; gap: 20px; min-height: 64px; }
 header > .home-preferences { order: 1; margin: 0; z-index: 60; }
 header > .theme-toggle { order: 2; }
 header > #guideBtn { order: 3; }
 body:has(#homePanel[hidden]) header > .home-preferences { display: none; }
 header .home-preferences > summary { min-height: 44px; }
 header .home-language-picker { right: 0; left: auto; max-width: calc(100vw - 44px); }
}
@media(max-width:760px) {
 html[data-theme-page="home"][data-theme][data-design-direction="c"] {
  body:has(#homePanel:not([hidden])) header { padding: 8px 22px; gap: 12px; min-height: 60px; }
  header .home-language-picker { position: fixed; top: calc(60px + env(safe-area-inset-top)); left: 22px; right: 22px; width: auto; max-height: calc(100dvh - 90px); overflow-y: auto; }
 }
}
/* Give Busy and Buffer a full-width closing portrait. */
html[data-theme-page="home"][data-theme][data-design-direction="c"] {
 .home-closing-art { width: min(100%,960px); margin: 64px auto 0; padding-bottom: 32px; }
 .home-closing-art picture { height: auto; }
 .home-closing-art img { display: block; width: 100%; height: auto; object-fit: contain; }
 .home-closing-art .home-mascot-note { max-width: 620px; font-size: 13px; margin-top: 20px; }
}
@media(max-width:760px) {
 html[data-theme-page="home"][data-theme][data-design-direction="c"] {
  .home-closing-art { width: 100%; margin-top: 40px; }
  .home-closing-art .home-mascot-note { font-size: 12px; }
 }
}
/* A single typographic rhythm for the home toolbar. */
html[data-theme-page="home"][data-theme][data-design-direction="c"] body:has(#homePanel:not([hidden])) header {
 gap: 12px;
 :is(.home-preferences > summary, .theme-toggle, #guideBtn) {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; height: 44px; padding: 0 12px; margin: 0;
  font-family: var(--ui-font); font-size: 13px; font-weight: 500; line-height: 1;
  letter-spacing: 0; color: var(--home-muted); background: transparent;
  border: 0; border-radius: 8px; box-shadow: none;
 }
 .home-preferences > summary { gap: 8px; }
 .home-preferences > summary > span { font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0; }
 .home-preferences > summary .home-preferences-plus { font-size: 16px; font-weight: 400; }
 .theme-toggle { width: 44px; min-width: 44px; padding: 0; }
 .theme-toggle-icon { width: 16px; height: 16px; stroke-width: 1.6; }
 :is(.home-preferences > summary, .theme-toggle, #guideBtn):hover { background: var(--home-surface); color: var(--home-ink); }
}
/* Shared text signature: an actual home link, including on the homepage. */
html[data-theme][data-theme-page] body header .text-home-brand {
 display: inline-flex; align-items: center; gap: 9px; width: auto; height: 44px;
 min-width: max-content; margin-right: auto; padding: 0; color: var(--ui-text);
 background: transparent; border: 0; border-radius: 0; text-decoration: none;
}
html[data-theme][data-theme-page] .text-home-brand .text-brand-name {
 font-family: var(--ui-font); font-size: 22px; font-weight: 500; line-height: 1;
 letter-spacing: -.045em; text-transform: none;
}
html[data-theme][data-theme-page] .text-brand-home-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
html[data-theme][data-theme-page] .text-home-brand:hover { color: var(--ui-accent); }
html[data-theme-page="home"][data-theme][data-design-direction="c"] body:has(#homePanel:not([hidden])) header h1 { display: block; width: auto; height: 44px; margin: 0 auto 0 0; }
html[data-theme][data-theme-page] {
 details:not(.home-preferences):not(.site-preferences):not(.header-language-pick) { border-color: var(--ui-line); box-shadow: none; }
 details:not(.home-preferences):not(.site-preferences):not(.header-language-pick) > summary { font-family: var(--ui-font); font-size: calc(14px * var(--app-font-scale,1)); font-weight: 500; line-height: 1.5; min-height: 44px; color: var(--ui-text); cursor: pointer; }
 details:not(.home-preferences):not(.site-preferences):not(.header-language-pick)[open] { background-color: var(--ui-surface); border-color: var(--ui-line); }
 details:not(.home-preferences):not(.site-preferences):not(.header-language-pick)[open] > summary { color: var(--ui-accent); margin-bottom: 12px; }
 details[open] :is(.introduction-body,.translation-md,.person-bio,.source-note,.resource-description) { color: var(--ui-text); line-height: 1.85; }
 details > summary:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
}
@media(max-width:760px) {
 html[data-theme][data-theme-page] .text-home-brand .text-brand-name { font-size: 19px; }
 html[data-theme][data-theme-page] body header .text-home-brand { gap: 7px; }
 html[data-theme-page="home"][data-theme][data-design-direction="c"] body:has(#homePanel:not([hidden])) header { gap: 4px; padding-inline: 16px; flex-wrap: wrap; }
 html[data-theme-page="home"][data-theme][data-design-direction="c"] body:has(#homePanel:not([hidden])) header :is(.home-preferences > summary,#guideBtn) { padding-inline: 7px; }
}
/* Open reading panels and map/graph inspectors share the page palette. */
html[data-theme][data-theme-page] {
 :is(.concept-detail,.guide-shell,.inspector,.map-drawer,.where-drawer,.person-detail,.resource-detail,.topic-notes,.lyric-reading) { color: var(--ui-text); border-color: var(--ui-line); box-shadow: none; }
 :is(.concept-detail,.guide-shell,.inspector,.map-drawer,.where-drawer,.person-detail,.resource-detail) { background-color: var(--ui-surface); }
 :is(.concept-detail,.guide-shell,.inspector,.map-drawer,.where-drawer,.person-detail,.resource-detail,.topic-notes) :is(p,li) { line-height: 1.8; }
 button[aria-expanded] { font-family: var(--ui-font); }
 button[aria-expanded="true"]:not(.language-choice) { border-color: var(--ui-accent); }
 details[open] > :not(summary) { overflow-wrap: anywhere; }
}
/* Mobile opening: artwork leads; the purpose reads as a compact caption. */
@media(max-width:760px) {
 html[data-theme-page="home"][data-theme][data-design-direction="c"] {
  .home-hero-brand { width: min(100%,420px); margin: 0 auto 26px; }
  .home-title,
  &[data-display-language*="chinese"] .home-title {
   font-size: calc(19px * var(--app-font-scale)); font-weight: 500;
   line-height: 1.6; letter-spacing: 0; white-space: normal; max-width: none; text-wrap: pretty;
  }
  .home-intro { font-size: calc(13px * var(--app-font-scale)); line-height: 1.85; margin-top: 10px; max-width: none; }
  .home-search { margin-top: 24px; }
 }
}

/* Let the original brand and illustrated feature entrances speak for themselves. */
html[data-theme-page="home"][data-theme][data-design-direction="c"] {
 .home-title, .home-intro, .home-journey-title, .home-journey-copy { display: none; }
 .home-hero-copy { display: flex; flex-direction: column; align-items: stretch; }
 .home-hero-brand { width: min(100%, 480px); margin: 0 auto 24px; align-self: center; }
 .home-search { margin-top: 0; }
}
@media(max-width:760px) {
 html[data-theme-page="home"][data-theme][data-design-direction="c"] {
  .home-hero-brand { width: min(100%,420px); }
 }
}

/* All feature names share one typographic level, including the builder. */
html[data-theme-page="home"][data-theme][data-design-direction="c"] #homeJourneyGrid .home-journey-kicker {
 font-family: var(--home-font);
 font-size: calc(14px * var(--app-font-scale));
 font-weight: 500;
 line-height: 1.5;
 letter-spacing: 0;
 text-transform: none;
 color: var(--home-ink);
}

/* Workspace: quiet tags, readable recording links, neutral primary action. */
html[data-theme][data-theme-page="home"] {
 .folder-tag { background: var(--ui-soft); border-color: var(--ui-line); color: var(--ui-text); }
 .folder-tag button { color: var(--ui-muted); }
 .folder-tag button:hover { color: var(--ui-text); }
 .versions .vline a, .rec-version a { color: var(--ui-text); text-decoration: underline; text-decoration-color: var(--ui-line); text-underline-offset: 3px; }
 .versions .vline a:hover, .rec-version a:hover { text-decoration-color: currentColor; }
 .versions .vnote, .versions .vmeta, .rec-versions { color: var(--ui-muted); }
 .versions .vscore { background: var(--ui-soft); color: var(--ui-text); border: 1px solid var(--ui-line); }
 #listenBtn:not(.listening) { background: var(--ui-text); color: var(--ui-bg); border-color: var(--ui-text); }
 #listenBtn:not(.listening):hover { opacity: .88; }
 #workspace .song :is(.person-name,.person-tt a,.person-credit a,.introduction-fact-refs a,.lyric-source a,.lyric-en-credit a,.lunfardo dt) { color: var(--ui-text); }
}

/* Reading space belongs to the song, not an empty artwork column. */
html[data-theme][data-theme-page="home"] {
 .song > img, .song > .noart { display: none; }
 .lyric-aligned-table .lyric-line-number {
  left: auto; right: 0; width: 24px; padding: 8px 4px;
  color: var(--ui-muted); background: var(--ui-bg); border-left: 0;
 }
}
@media(max-width:760px) {
 html[data-theme][data-theme-page="home"] {
  .lyric-aligned-table tbody tr:not(.lyric-stanza-gap) { position: relative; padding-right: 28px; }
  .lyric-aligned-table tbody .lyric-line-number { position: absolute; top: 10px; right: 4px; width: 20px; padding: 0; text-align: right; background: transparent; }
 }
}

/* Semantic color roles: ink for reading, blue for navigation, violet for saved groups. */
html[data-theme][data-theme-page] {
 --ui-link: #365e7a; --ui-link-soft: #eaf0f5;
 --ui-group: #665477; --ui-group-soft: #f0ecf3;
 --ui-confirm: #476a58; --ui-confirm-soft: #eaf1ec;
 --ui-review: #805d29; --ui-review-soft: #f6efdf;
 --ui-action: #365e7a; --ui-action-text: #ffffff;
}
html[data-theme="dark"][data-theme-page] {
 --ui-link: #a4c5df; --ui-link-soft: #263440;
 --ui-group: #c9b8d9; --ui-group-soft: #342c3c;
 --ui-confirm: #b1d0bc; --ui-confirm-soft: #29392f;
 --ui-review: #e4c48c; --ui-review-soft: #3b3224;
 --ui-action: #a4c5df; --ui-action-text: #191619;
}
html[data-theme][data-theme-page="home"] {
 .folder-tag { color: var(--ui-group); background: var(--ui-group-soft); border-color: color-mix(in srgb,var(--ui-group) 25%,var(--ui-bg)); }
 .folder-tag button { color: var(--ui-group); }
 .versions .vline a, .rec-version a,
 #workspace .song :is(.person-name,.person-tt a,.person-credit a,.introduction-fact-refs a,.lyric-source a,.lyric-en-credit a) {
  color: var(--ui-link); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb,var(--ui-link) 40%,transparent);
 }
 #workspace .song .links a { color: var(--ui-link); background: var(--ui-link-soft); border-color: color-mix(in srgb,var(--ui-link) 20%,var(--ui-bg)); }
 #workspace .song summary { color: var(--ui-link); }
 #workspace .song .lunfardo dt { color: var(--ui-group); }
 .versions .vdetail { color: var(--ui-muted); }
 .versions .vscore { color: var(--ui-link); background: var(--ui-link-soft); border-color: transparent; }
 .versions .vscore.candidate { color: var(--ui-review); background: var(--ui-review-soft); }
 .versions .vscore.weak { color: var(--ui-muted); background: var(--ui-soft); }
 .versions .vscore.confirmed { color: var(--ui-confirm); background: var(--ui-confirm-soft); }
 #listenBtn:not(.listening) { background: var(--ui-action); color: var(--ui-action-text); border-color: var(--ui-action); }
 .version-confirm-btn, .version-decision-btn { color: var(--ui-link); background: var(--ui-link-soft); border-color: var(--ui-line); }
 .version-decision-btn.active { color: var(--ui-confirm); background: var(--ui-confirm-soft); border-color: var(--ui-confirm); }
}
html[data-theme][data-theme-page] :is(.introduction-body,.translation-md,.person-bio,.source-note,.resource-description) a {
 color: var(--ui-link); text-decoration: underline; text-underline-offset: 3px;
}

/* Cover lives only in the heading; reading panels keep the full width. */
html[data-theme][data-theme-page="home"] {
 .song-heading { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 8px; }
 .song-heading-copy { flex: 1; min-width: 0; overflow-wrap: anywhere; }
 .song-heading-art { flex: none; }
 .song .song-heading-art :is(img,.noart) { width: 56px; height: 56px; border-radius: 8px; background: var(--ui-soft); color: var(--ui-muted); }
 .song-heading-art img { display: block; object-fit: cover; }
}
@media(max-width:760px) {
 html[data-theme][data-theme-page="home"] .song .song-heading-art :is(img,.noart) { width: 44px; height: 44px; }
}

/* Reading weight: stronger body copy without flattening the hierarchy. */
html[data-theme][data-theme-page] {
 body { font-weight: 450; }
 button, input, select, textarea, summary { font-weight: 500; }
 :is(.introduction-body,.translation-md,.person-bio,.resource-description,.lyric-text,.lyric-aligned-table) { font-weight: 450; }
}
html[data-theme][data-theme-page="home"] {
 .song :is(.artist,.title-names,.title-meaning,.versions,.rec-versions,.vdetail,.personal-note,.folder-tag) { font-weight: 500; }
 .versions .vline a, .rec-version a { font-weight: 600; }
 #workspace .song .links a, #workspace .song summary { font-weight: 550; }
 #listenBtn { font-weight: 600; }
}

/* Shared expanded-content finish and listening action. */
html[data-theme][data-theme-page] {
 --ui-listen: #e2b266; --ui-listen-ink: #302719;
 details:not(.site-preferences):not(.home-preferences):not(.header-language-pick) {
  color: var(--ui-text); border-color: var(--ui-line);
 }
 details:not(.site-preferences):not(.home-preferences):not(.header-language-pick) > summary {
  font-family: var(--ui-font); font-weight: 550; line-height: 1.5; color: var(--ui-link);
 }
 :is(.concept-detail,.inspector,.map-drawer,.where-drawer,.person-detail,.resource-detail,.topic-notes,.guide-shell) {
  font-weight: 450; color: var(--ui-text); background-color: var(--ui-surface); border-color: var(--ui-line);
 }
 :is(.concept-detail,.inspector,.map-drawer,.where-drawer,.person-detail,.resource-detail,.topic-notes,.guide-shell) a { color: var(--ui-link); }
 :is(button,summary,a):focus-visible { outline-color: var(--ui-link); }
 button:disabled { cursor: not-allowed; }
}
html[data-theme="dark"][data-theme-page] { --ui-listen: #d7ac6c; }
html[data-theme][data-theme-page="home"] {
 #listenBtn:not(.listening) { background: var(--ui-listen); color: var(--ui-listen-ink); border-color: var(--ui-listen); }
 #listenBtn:not(.listening):hover { filter: brightness(.96); opacity: 1; }
 #listenBtn:disabled { opacity: .5; filter: none; }
 .versions .vblock { padding: 12px 0; }
 .versions .vline { flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
 .versions .vline a { font-size: calc(14px * var(--app-font-scale)); line-height: 1.65; }
 .versions .vdetail { font-size: calc(12.5px * var(--app-font-scale)); line-height: 1.7; margin: 5px 0 0; }
 .versions .version-match-reasons { margin-top: 3px; }
 .version-confirm-btn { margin-top: 8px; }
 .lyric-aligned-table tbody tr:not(.lyric-stanza-gap):hover > td { background: var(--ui-soft); }
 .lyric-aligned-table :is(th,td) { border-color: var(--ui-line); }
}

html[data-theme][data-theme-page] { --ui-font: "Avenir Next", "PingFang SC", "Hiragino Sans GB", -apple-system, sans-serif; }
html[data-platform="android"][data-theme][data-theme-page] { --ui-font: "Manrope", "Noto Sans SC", sans-serif; }
html[data-platform="windows"][data-theme][data-theme-page] { --ui-font: "Segoe UI Variable", "Segoe UI", "Noto Sans SC", "Microsoft YaHei", sans-serif; }
html[data-platform="other"][data-theme][data-theme-page] { --ui-font: "Manrope", "Noto Sans SC", sans-serif; }
html[data-theme][data-theme-page="home"][data-design-direction="c"] { --home-font: var(--ui-font); }

/* Approved porteño sign: show each colorway from the original paired artwork. */
html[data-theme-page="home"][data-theme][data-design-direction="c"] .home-hero-brand {
 position: relative; aspect-ratio: 1536 / 503; overflow: hidden;
}
html[data-theme-page="home"][data-theme][data-design-direction="c"] .home-hero-brand img {
 position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
html[data-theme-page="home"][data-theme][data-design-direction="c"] .home-hero-brand .hero-brand-dark { object-position: center top; }
html[data-theme-page="home"][data-theme][data-design-direction="c"] .home-hero-brand .hero-brand-light { object-position: center bottom; }