:root {color-scheme: light;--color-bg: #ffffff;--color-surface: #f6f7f9;--color-surface-hover: #eef0f3;--color-text: #191c22;--color-text-secondary: #4f5664;--color-border: #d9dde4;--color-link: #1d4ed8;--color-link-hover: #16357f;--color-focus: #9a3412;--color-sidebar-bg: #fafbfc;--color-overlay: rgb(12 14 18 / 58%);--color-selection-bg: #1d4ed8;--color-selection-text: #ffffff;--shadow-sm: 0 1px 2px rgb(15 17 21 / 6%);--shadow-md: 0 10px 28px rgb(15 17 21 / 14%);--header-height: 64px;--sidebar-width: 264px;--content-max-width: 1180px;--reading-width: 780px;--radius-sm: 6px;--radius-md: 10px;--font-sans: "Segoe UI",Tahoma,Arial,sans-serif;--font-mono: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;--transition-fast: 150ms ease;--transition-base: 220ms ease;} html[data-theme="dark"] {color-scheme: dark;--color-bg: #14161a;--color-surface: #1c1f25;--color-surface-hover: #252a33;--color-text: #f1f3f6;--color-text-secondary: #b5bcc9;--color-border: #353b46;--color-link: #8fb1ff;--color-link-hover: #c2d3ff;--color-focus: #fbbf24;--color-sidebar-bg: #191c22;--color-overlay: rgb(0 0 0 / 70%);--color-selection-bg: #a9c2ff;--color-selection-text: #101318;--shadow-sm: 0 1px 2px rgb(0 0 0 / 34%);--shadow-md: 0 12px 32px rgb(0 0 0 / 46%);} *,*::before,*::after {box-sizing: border-box;} html {min-width: 320px;scroll-behavior: smooth;scrollbar-gutter: stable;-webkit-text-size-adjust: 100%;} body {min-height: 100vh;margin: 0;overflow-x: hidden;background: var(--color-bg);color: var(--color-text);font-family: var(--font-sans);font-size: 16px;line-height: 1.7;text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;} body.no-scroll {overflow: hidden;} img,svg {display: block;max-width: 100%;} button,input,textarea,select {font: inherit;} button {color: inherit;} ::selection {background: var(--color-selection-bg);color: var(--color-selection-text);} :where(a,button,input,textarea,select,summary):focus-visible {outline: 3px solid var(--color-focus);outline-offset: 3px;border-radius: 4px;} h1,h2,h3,h4,h5,h6 {color: var(--color-text);font-weight: 700;line-height: 1.3;text-wrap: balance;} h1 {margin: 0 0 0.6em;font-size: clamp(1.8rem,1.5rem + 1.2vw,2.5rem);letter-spacing: normal;} h2 {margin: 1.8em 0 0.6em;font-size: clamp(1.35rem,1.2rem + 0.6vw,1.75rem);letter-spacing: normal;} h3 {margin: 1.4em 0 0.5em;font-size: 1.15rem;} h4 {font-size: 1.05rem;} h5 {font-size: 1rem;} h6 {font-size: 0.92rem;} p {margin: 0 0 1.1em;} .lede {color: var(--color-text-secondary);font-size: 1.1rem;} a {color: var(--color-link);text-decoration: none;text-decoration-skip-ink: auto;transition: color var(--transition-fast);} a:hover {color: var(--color-link-hover);text-decoration: underline;text-underline-offset: 3px;} .layout {display: flex;align-items: flex-start;width: min(100%,var(--content-max-width));min-height: calc(100vh - var(--header-height));margin-inline: auto;} .skip-link {position: fixed;top: -4rem;inset-inline-start: 1rem;z-index: 1000;padding: 0.65rem 1rem;border: 1px solid var(--color-border);border-radius: var(--radius-sm);background: var(--color-bg);color: var(--color-text);box-shadow: var(--shadow-sm);transition: top var(--transition-fast);} .skip-link:focus {top: 0.75rem;} .site-header {position: sticky;top: 0;z-index: 50;height: var(--header-height);border-bottom: 1px solid var(--color-border);background: var(--color-bg);} .header-inner {display: flex;align-items: center;justify-content: space-between;width: min(100%,var(--content-max-width));height: 100%;margin-inline: auto;padding-inline: 1.25rem;} .brand {display: inline-flex;align-items: center;min-width: 0;gap: 0.6rem;color: var(--color-text);font-size: 1.05rem;font-weight: 700;white-space: nowrap;} .brand:hover {color: var(--color-text);text-decoration: none;} .brand-mark {flex: 0 0 auto;width: 28px;height: 28px;} .header-actions {display: flex;align-items: center;gap: 0.5rem;} .icon-button {display: inline-flex;align-items: center;justify-content: center;width: 40px;height: 40px;padding: 0;border: 1px solid var(--color-border);border-radius: var(--radius-sm);background: transparent;color: var(--color-text);cursor: pointer;transition: background-color var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast);} .icon-button:hover {border-color: var(--color-text-secondary);background: var(--color-surface);} .theme-toggle .icon-moon,html[data-theme="dark"] .theme-toggle .icon-sun {display: none;} html[data-theme="dark"] .theme-toggle .icon-moon {display: block;} .hamburger {display: none;} .hamburger .icon-close {display: none;} .hamburger[aria-expanded="true"] .icon-menu {display: none;} .hamburger[aria-expanded="true"] .icon-close {display: block;} .sidebar {position: sticky;top: var(--header-height);flex: 0 0 var(--sidebar-width);width: var(--sidebar-width);height: calc(100vh - var(--header-height));overflow-y: auto;overscroll-behavior: contain;padding: 1.25rem 1rem;border-inline-end: 1px solid var(--color-border);background: var(--color-bg);scrollbar-width: thin;scrollbar-color: var(--color-border) transparent;} .sidebar::-webkit-scrollbar {width: 10px;} .sidebar::-webkit-scrollbar-thumb {border: 3px solid transparent;border-radius: 999px;background: var(--color-border);background-clip: padding-box;} .nav-group {margin-bottom: 1.5rem;} .nav-group:last-child {margin-bottom: 0;} .nav-group h2 {margin: 0 0 0.5rem;padding-inline-start: 0.6rem;color: var(--color-text-secondary);font-size: 0.72rem;font-weight: 700;letter-spacing: 0;line-height: 1.4;text-transform: none;} .sidebar ul {margin: 0;padding: 0;list-style: none;} .sidebar li + li {margin-top: 2px;} .sidebar a {display: block;padding: 0.5rem 0.6rem;border-radius: var(--radius-sm);color: var(--color-text);font-size: 0.92rem;line-height: 1.45;} .sidebar a:hover,.sidebar a:focus-visible {background: var(--color-surface-hover);color: var(--color-text);text-decoration: none;} .sidebar a[aria-current="page"] {background: var(--color-surface-hover);color: var(--color-text);font-weight: 600;} .overlay {position: fixed;inset: var(--header-height) 0 0;z-index: 55;visibility: hidden;opacity: 0;pointer-events: none;background: var(--color-overlay);transition: opacity var(--transition-base),visibility var(--transition-base);} .overlay.open {visibility: visible;opacity: 1;pointer-events: auto;} .letter-navigation {width: 100%;max-width: 100%;margin: 0 0 1.5rem;padding: 0 0 1rem;overflow: hidden;border-bottom: 1px solid var(--color-border);background: var(--color-bg);} .letter-navigation-inner {display: grid;min-width: 0;max-width: 100%;gap: 0.5rem;} .letter-row {display: grid;grid-template-columns: 64px minmax(0,1fr);align-items: center;min-width: 0;max-width: 100%;gap: 0.4rem;} .letter-row h2 {margin: 0;color: var(--color-text-secondary);font-size: 0.8rem;font-weight: 600;white-space: nowrap;} .letter-list {display: grid;grid-template-columns: repeat(28,minmax(0,1fr));width: 100%;max-width: 100%;min-width: 0;gap: clamp(0.1rem,0.3vw,0.35rem);} .letter-list a {display: inline-flex;align-items: center;justify-content: center;width: 100%;height: 30px;border: 1px solid var(--color-border);border-radius: var(--radius-sm);background: transparent;color: var(--color-text-secondary);font-size: 0.82rem;font-weight: 600;line-height: 1;transition: background-color var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast);} .letter-list a:hover,.letter-list a:focus-visible {border-color: var(--color-link);background: var(--color-surface-hover);color: var(--color-link);text-decoration: none;} .main-content {flex: 1;min-width: 0;padding: 2rem 1.5rem 3rem;} .latest-songs h1 {margin-bottom: 1rem;} .latest-song-groups {display: grid;grid-template-columns: repeat(3,minmax(0,1fr));gap: 1.5rem;} .latest-song-groups ul {min-width: 0;margin: 0;padding: 0;list-style: none;} .latest-song-groups a {display: block;padding: 0.55rem 0;font-size: 0.92rem;line-height: 1.7;} .latest-song-groups a:hover,.latest-song-groups a:focus-visible {text-decoration: none;} .content-article,.site-footer {width: min(100%,var(--reading-width));} .content-article > :first-child {margin-top: 0;} .link-columns {display: grid;grid-template-columns: repeat(3,minmax(0,1fr));gap: 1.25rem;margin: 2rem 0;} .link-column {min-width: 0;padding: 1.05rem 1.1rem;border: 1px solid var(--color-border);border-radius: var(--radius-md);background: var(--color-surface);} .link-column h3 {margin: 0 0 0.7rem;} .link-column ul {margin: 0;padding: 0;list-style: none;} .link-column li + li {margin-top: 0.45rem;} .link-column a {display: inline;font-size: 0.95rem;} .site-footer {margin-top: 3rem;padding-top: 1.5rem;border-top: 1px solid var(--color-border);color: var(--color-text-secondary);font-size: 0.88rem;text-align: center;} .site-footer p {margin: 0;color: inherit;} .content-article :where(p,li,td,th,figcaption) {overflow-wrap: anywhere;} .content-article ul,.content-article ol {margin: 0 0 1.1em;padding-inline-start: 1.4rem;} .content-article li {margin-bottom: 0.35em;} .content-article blockquote {margin: 1.5em 0;padding: 0.2em 1.2em;border-inline-start: 4px solid var(--color-border);color: var(--color-text-secondary);font-style: italic;} .content-article strong {color: var(--color-text);font-weight: 700;} .content-article code {padding: 0.15em 0.4em;border: 1px solid var(--color-border);border-radius: 4px;background: var(--color-surface);font-family: var(--font-mono);font-size: 0.88em;} .content-article pre {direction: ltr;text-align: left;unicode-bidi: isolate;margin: 1.5em 0;overflow-x: auto;padding: 1rem 1.1rem;border: 1px solid var(--color-border);border-radius: var(--radius-md);background: var(--color-surface);} .content-article pre code {padding: 0;border: 0;background: transparent;} .content-article table {display: block;width: 100%;margin: 1.5em 0;overflow-x: auto;border-collapse: collapse;font-size: 0.94rem;white-space: nowrap;} .content-article th,.content-article td {padding: 0.65rem 0.8rem;border-bottom: 1px solid var(--color-border);text-align: start;} .content-article th {color: var(--color-text-secondary);font-weight: 600;} .content-article hr {margin: 2.5em 0;border: 0;border-top: 1px solid var(--color-border);} .content-article figure {margin: 1.5em 0;} .content-article figure img,.content-article figure svg {width: 100%;border: 1px solid var(--color-border);border-radius: var(--radius-md);} .content-article figcaption {margin-top: 0.6rem;color: var(--color-text-secondary);font-size: 0.85rem;} .content-article details {margin: 1.5em 0;padding: 0.8rem 1rem;border: 1px solid var(--color-border);border-radius: var(--radius-md);background: var(--color-surface);} .content-article summary {cursor: pointer;font-weight: 600;} .content-article details[open] summary {margin-bottom: 0.6rem;} .content-article label {display: block;margin-bottom: 0.35rem;font-weight: 600;} .content-article :where(input,textarea,select) {width: 100%;padding: 0.65rem 0.75rem;border: 1px solid var(--color-border);border-radius: var(--radius-sm);background: var(--color-bg);color: var(--color-text);} .content-article textarea {min-height: 8rem;resize: vertical;} .content-article button:not(.icon-button) {padding: 0.6rem 0.9rem;border: 1px solid var(--color-border);border-radius: var(--radius-sm);background: var(--color-surface);color: var(--color-text);cursor: pointer;} .content-article button:not(.icon-button):hover {background: var(--color-surface-hover);} @media (max-width: 880px) {.main-content {width: 100%;max-width: 100%;overflow-x: hidden;} .letter-list {display: flex;gap: 0.3rem;overflow-x: auto;overscroll-behavior-inline: contain;padding-bottom: 0.35rem;scrollbar-width: thin;scrollbar-color: var(--color-border) transparent;} .letter-list::-webkit-scrollbar {height: 6px;} .letter-list::-webkit-scrollbar-thumb {border-radius: 999px;background: var(--color-border);} .letter-list a {flex: 0 0 30px;width: 30px;} .hamburger {display: inline-flex;} .layout {display: block;} .sidebar {position: fixed;top: var(--header-height);bottom: 0;right: 0;left: auto;z-index: 60;width: min(300px,84vw);height: auto;transform: translateX(100%);box-shadow: var(--shadow-md);transition: transform var(--transition-base);} .sidebar.open {transform: translateX(0);} .main-content {padding: 1.5rem 1.1rem 2.5rem;} .content-article,.site-footer {width: 100%;} .link-columns {grid-template-columns: 1fr;gap: 0.85rem;} .latest-song-groups {grid-template-columns: 1fr;gap: 0;}} @media (max-width: 480px) {.letter-navigation {margin-bottom: 1rem;} .letter-row {gap: 0.35rem;} .letter-list a {flex-basis: 30px;width: 30px;height: 30px;} .header-inner {padding-inline: 0.85rem;} .brand {font-size: 1rem;} .header-actions {gap: 0.35rem;} .icon-button {width: 38px;height: 38px;}} @media (prefers-reduced-motion: reduce) {html {scroll-behavior: auto;} *,*::before,*::after {animation-duration: 0.001ms !important;animation-iteration-count: 1 !important;transition-duration: 0.001ms !important;}} .song-header {margin-bottom: 2rem;} .song-header h1 {margin-bottom: 0.35rem;} .song-artist {margin: 0 0 1.25rem;color: var(--color-text-secondary);font-size: 1.05rem;} .song-details {display: grid;margin: 0;border-top: 1px solid var(--color-border);} .song-details div {display: grid;grid-template-columns: 72px minmax(0,1fr);gap: 0.75rem;padding: 0.55rem 0;border-bottom: 1px solid var(--color-border);} .song-details dt {color: var(--color-text-secondary);font-weight: 600;} .song-details dd {min-width: 0;margin: 0;} .song-lyrics-section h2 {margin-top: 0;} .song-lyrics {white-space: pre-wrap;overflow-wrap: anywhere;font-size: 1.05rem;line-height: 2;} .artist-header {margin-bottom: 2rem;} .artist-header h1 {margin-bottom: 1rem;} .artist-summary {display: flex;flex-wrap: wrap;gap: 0.75rem 1.5rem;margin: 0;} .artist-summary div {display: flex;gap: 0.4rem;} .artist-summary dt {color: var(--color-text-secondary);font-weight: 600;} .artist-summary dd {margin: 0;} .artist-section + .artist-section {margin-top: 2rem;} .artist-section h2 {margin-top: 0;} .artist-album-list,.artist-song-list {margin: 0;padding: 0;list-style: none;} .artist-album-list {display: grid;grid-template-columns: repeat(3,minmax(0,1fr));gap: 0.75rem;} .content-article .artist-album-list {padding-inline-start: 0;} .artist-album-list li {min-width: 0;} .artist-album-list a {display: flex;flex-direction: column;gap: 0.2rem;height: 100%;padding: 0.75rem;border: 1px solid var(--color-border);border-radius: var(--radius-sm);background: var(--color-surface);} .artist-album-list small {color: var(--color-text-secondary);} .artist-song-list {display: grid;grid-template-columns: repeat(3,minmax(0,1fr));column-gap: 1.5rem;} .artist-song-list li {min-width: 0;} .artist-song-list a {display: block;padding: 0.28rem 0;overflow-wrap: anywhere;line-height: 1.7;} @media (max-width: 880px) {.artist-album-list,.artist-song-list {grid-template-columns: 1fr;}} .country-header {margin-bottom: 2rem;} .country-header h1 {margin-bottom: 1rem;} .country-summary {display: flex;flex-wrap: wrap;gap: 0.75rem 1.5rem;margin: 0;} .country-summary div {display: flex;gap: 0.4rem;} .country-summary dt {color: var(--color-text-secondary);font-weight: 600;} .country-summary dd {margin: 0;} .country-section h2 {margin-top: 0;} .country-artist-list {display: grid;grid-template-columns: repeat(3,minmax(0,1fr));gap: 0.75rem;margin: 0;padding: 0;list-style: none;} .content-article .country-artist-list {padding-inline-start: 0;} .country-artist-list li {min-width: 0;} .country-artist-list a {display: flex;flex-direction: column;gap: 0.2rem;height: 100%;padding: 0.75rem;border: 1px solid var(--color-border);border-radius: var(--radius-sm);background: var(--color-surface);} .country-artist-list small {color: var(--color-text-secondary);} @media (max-width: 880px) {.country-artist-list {grid-template-columns: 1fr;}} .song-letter-header {margin-bottom: 2rem;} .song-letter-header h1 {margin-bottom: 1rem;} .song-letter-summary {display: flex;flex-wrap: wrap;gap: 0.75rem 1.5rem;margin: 0;} .song-letter-summary div {display: flex;gap: 0.4rem;} .song-letter-summary dt {color: var(--color-text-secondary);font-weight: 600;} .song-letter-summary dd {margin: 0;} .song-letter-section h2 {margin-top: 0;} .song-letter-list {display: grid;grid-template-columns: repeat(3,minmax(0,1fr));column-gap: 1.5rem;margin: 0;padding: 0;list-style: none;} .song-letter-list li {min-width: 0;} .song-letter-list a {display: block;padding: 0.28rem 0;overflow-wrap: anywhere;line-height: 1.7;} .pagination {display: flex;flex-wrap: wrap;align-items: center;justify-content: center;gap: 0.4rem;margin-top: 2rem;} .pagination a,.pagination span {display: inline-flex;align-items: center;justify-content: center;min-width: 38px;height: 38px;padding: 0 0.7rem;border: 1px solid var(--color-border);border-radius: var(--radius-sm);} .pagination span[aria-current="page"] {background: var(--color-surface);color: var(--color-text);font-weight: 700;} .pagination a:hover {background: var(--color-surface-hover);text-decoration: none;} @media (max-width: 880px) {.song-letter-list {grid-template-columns: 1fr;}} .artist-letter-header {margin-bottom: 2rem;} .artist-letter-header h1 {margin-bottom: 1rem;} .artist-letter-summary {display: flex;flex-wrap: wrap;gap: 0.75rem 1.5rem;margin: 0;} .artist-letter-summary div {display: flex;gap: 0.4rem;} .artist-letter-summary dt {color: var(--color-text-secondary);font-weight: 600;} .artist-letter-summary dd {margin: 0;} .artist-letter-section h2 {margin-top: 0;} .artist-letter-list {display: grid;grid-template-columns: repeat(3,minmax(0,1fr));gap: 0.75rem;margin: 0;padding: 0;list-style: none;} .content-article .artist-letter-list {padding-inline-start: 0;} .artist-letter-list li {min-width: 0;} .artist-letter-list a {display: flex;flex-direction: column;gap: 0.2rem;height: 100%;padding: 0.75rem;border: 1px solid var(--color-border);border-radius: var(--radius-sm);background: var(--color-surface);overflow-wrap: anywhere;} .artist-letter-list small {color: var(--color-text-secondary);} @media (max-width: 880px) {.artist-letter-list {grid-template-columns: 1fr;}} .album-header {margin-bottom: 2rem;} .album-header h1 {margin-bottom: 1rem;} .album-summary {display: flex;flex-wrap: wrap;gap: 0.75rem 1.5rem;margin: 0;} .album-summary div {display: flex;gap: 0.4rem;} .album-summary dt {color: var(--color-text-secondary);font-weight: 600;} .album-summary dd {margin: 0;} .album-section h2 {margin-top: 0;} .album-song-list {display: grid;grid-template-columns: repeat(3,minmax(0,1fr));column-gap: 1.5rem;margin: 0;padding: 0;list-style: none;} .album-song-list li {min-width: 0;} .album-song-list a {display: block;padding: 0.28rem 0;overflow-wrap: anywhere;line-height: 1.7;} @media (max-width: 880px) {.album-song-list {grid-template-columns: 1fr;}} .footer-links {display: flex;align-items: center;justify-content: center;flex-wrap: wrap;gap: 0.45rem 0.7rem;margin-bottom: 0.65rem;} .site-footer .footer-links a {color: inherit;} .contact-form {margin-top: 1.75rem;} .form-grid {display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 1rem;} .form-field {margin-bottom: 1rem;} .form-field label {margin-bottom: 0.4rem;} .field-optional,.field-hint,.contact-privacy-note {color: var(--color-text-secondary);font-size: 0.86rem;} .field-hint {display: block;margin: 0.35rem 0 0;} .form-alert {margin: 0 0 1rem;padding: 0.8rem 0.95rem;border: 1px solid var(--color-border);border-radius: var(--radius-sm);background: var(--color-surface);} .form-alert ul {margin: 0;} .form-alert-success {border-color: color-mix(in srgb,#15803d 55%,var(--color-border));} .form-alert-error {border-color: color-mix(in srgb,#b91c1c 55%,var(--color-border));} .form-actions {display: flex;align-items: center;flex-wrap: wrap;gap: 0.75rem;} .contact-form button[disabled] {cursor: not-allowed;opacity: 0.6;} .contact-page-hint {font-size: 0.76rem;} .contact-submit {border-color: #3a83f7 !important;background: #3a83f7 !important;color: #ffffff !important;} .contact-submit:hover {background: #3a83f7 !important;opacity: 0.92;} .contact-privacy-note {margin: 1.5rem 0 0;font-size: 0.76rem;} .contact-trap {position: absolute !important;width: 1px !important;height: 1px !important;overflow: hidden !important;clip: rect(0 0 0 0) !important;clip-path: inset(50%) !important;white-space: nowrap !important;} @media (max-width: 620px) {.form-grid {grid-template-columns: 1fr;gap: 0;}} @media (max-width: 620px) {} .grecaptcha-badge {right: auto !important;left: 10px !important;bottom: 10px !important;transform: scale(.65) !important;transform-origin: left bottom !important;} .share-panel {width: min(100%,var(--reading-width));margin-top: 2.5rem;padding-top: 1.25rem;} .share-panel h2 {margin: 0 0 0.8rem;font-size: 1rem;} .share-actions {display: flex;flex-wrap: wrap;gap: 0.55rem;} .share-action {display: inline-flex;align-items: center;justify-content: center;min-height: 38px;gap: 0.45rem;padding: 0.45rem 0.7rem;border: 1px solid var(--color-border);border-radius: var(--radius-sm);background: var(--color-surface);color: var(--color-text);font-size: 0.86rem;line-height: 1;cursor: pointer;transition: background-color var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast);} .share-action:hover,.share-action:focus-visible {border-color: var(--color-text-secondary);background: var(--color-surface-hover);color: var(--color-text);text-decoration: none;} .share-action svg {width: 17px;height: 17px;flex: 0 0 auto;} .share-copy,.share-native {font: inherit;} .share-status {min-height: 1.4em;margin: 0.55rem 0 0;color: var(--color-text-secondary);font-size: 0.78rem;} @media (max-width: 620px) {.share-actions {display: grid;grid-template-columns: repeat(2,minmax(0,1fr));} .share-action {width: 100%;}}footer a { text-decoration: underline; text-underline-offset: 2px; }