*,*::before,*::after{box-sizing:border-box}*{margin:0}ul,ol{list-style:none;padding:0}html{scroll-behavior:smooth}a:not([class]){-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}a{text-decoration:none}img,picture,video,canvas,svg{display:block;max-width:100%}img{height:auto}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important;transition-duration:.01ms !important}}@media(prefers-reduced-motion:no-preference){html{interpolate-size:allow-keywords}}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}@font-face{font-family:elena;src:url(/fonts/ElenaWebRegular-subset-v2.woff2)format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0-7F}@font-face{font-family:elena;src:url(/fonts/ElenaWebBold-subset-v2.woff2)format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0-7F}@font-face{font-family:mija;src:url(/fonts/Mija_Bold-webfont-subset-v2.woff2)format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0-7F}:root{--font-fallback:/* 现代系统优先 */
    -apple-system, BlinkMacSystemFont, 
    /* Windows 现代 + 旧版 */
    "Segoe UI", system-ui, 
    /* Linux/Android */
    Roboto, Ubuntu, 
    /* 通用回退 */
    "Helvetica Neue", Arial, sans-serif;--font-body:Mija, var(--font-fallback);--font-heading:Mija, var(--font-fallback);--font-code:Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;--font-content-line-height:1.75;--type-heading-h1-font-size:2.488rem;--type-heading-h2-font-size:2.074rem;--type-heading-h3-font-size:1.728rem;--type-heading-h4-font-size:1.44rem;--type-heading-h5-font-size:1.2rem;--type-heading-h6-font-size:1.1rem;--type-base-font-size-rem:1rem;--type-smaller-font-size:0.833rem;--type-tiny-font-size:0.694rem;--type-heading-h1-font-size-mobile:1.802rem;--type-heading-h2-font-size-mobile:1.602rem;--type-heading-h3-font-size-mobile:1.424rem;--type-heading-h4-font-size-mobile:1.266rem;--type-heading-h5-font-size-mobile:1.2rem;--type-heading-h6-font-size-mobile:1.1rem;--screen-sm:426px;--screen-md:769px;--screen-lg:992px;--screen-xl:1200px;--screen-xxl:1441px;--header-width:100%;--main-width-pc:80%;--main-width-mobile:90%;--text-black-primary:#333333;--text-black-secondary:#666666;--text-white-primary:#FFFFFF;--text-link:#2288bb;--red-01:#d33a2c;--red-02:#FFE7E7;--green-01:#f1fdf8;--green-02:#18a46F;--purple-01:#fbecf9;--purple-02:#aa1994;--orange-01:#fef1f0;--orange-02:#f55700;--blue-01:#e7f8ff;--blue-02:#006fc6;--grey-01:#eee;--grey-02:#a1a1a1;--bg-grey-01:var(--grey-01);--text-body-color:var(--text-black-primary);--background-primary:var(--text-white-primary);--header-background-color:var(--red-01);--text-header-color:var(--text-white-primary);--search-background-color:var(--text-white-primary);--text-search-input:var(--text-black-primary);--type-heading-h1:var(--type-heading-h1-font-size);--type-heading-h2:var(--type-heading-h2-font-size);--type-heading-h3:var(--type-heading-h3-font-size);--type-heading-h4:var(--type-heading-h4-font-size);--type-heading-h5:var(--type-heading-h5-font-size);--type-heading-h6:var(--type-heading-h6-font-size)}[data-theme=dark]{--text-link:#7FCFFF;--red-01:#d33a2c;--red-02:#FFE7E7;--bg-grey-01:#19313c;--text-body-color:var(--text-white-primary);--article-background-color:linear-gradient(-45deg, #162c35 70%, #0c252f 100%);--background-primary:var(--article-background-color);--header-background-color:var(--red-01);--text-header-color:var(--text-white-primary);--search-background-color:var(--text-black-primary);--text-search-input:var(--text-white-primary)}@media screen and (max-width:768px){:root{--type-heading-h1:var(--type-heading-h1-font-size-mobile);--type-heading-h2:var(--type-heading-h2-font-size-mobile);--type-heading-h3:var(--type-heading-h3-font-size-mobile);--type-heading-h4:var(--type-heading-h4-font-size-mobile);--type-heading-h5:var(--type-heading-h5-font-size-mobile);--type-heading-h6:var(--type-heading-h6-font-size-mobile)}}body{font-family:var(--font-body);line-height:var(--font-content-line-height);text-rendering:optimizeSpeed;color:var(--text-body-color);background:var(--background-primary)}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);line-height:var(--font-content-line-height)}h1{font-size:var(--type-heading-h1)}h2{font-size:var(--type-heading-h2)}h3{font-size:var(--type-heading-h3)}h4{font-size:var(--type-heading-h4)}h5{font-size:var(--type-heading-h5)}h6{font-size:var(--type-heading-h6)}a{color:var(--text-link)}ul ul,ul ol,ol ul,ol ol{padding-left:.75rem}article{h2, h3, h4, h5, h6 { margin: 1rem 0; } p { margin: 0.5rem 0; } ol { list-style: decimal; ::marker { color: var(--text-link); font-weight: bold; } li { margin: 0.5rem 0; } } ul { ::marker { content: " - "; color: var(--text-link); font-weight: bold; } li { margin: 0.5rem 0; }; } pre { padding: 1rem; margin: 1rem auto; max-height: 40vh; overflow: auto; border-radius: 0.5rem; font-family: var(--font-code); font-size: 1rem; background-color: var(--code-background-block); } code:not(pre code), kbd, samp { padding: 0.25em; border-radius: 0.25rem; font-size: 1rem; word-break: break-all; color: var(--text-primary-red); background-color: var(--code-background-block); } hr { margin: 1rem 0; } del { text-decoration-color: var(--text-primary-red); text-decoration-thickness: 1px; text-decoration-style: double; } mark { background-color: var(--highlight-bg); color: var(--text-primary); font-weight: var(--font-body-strong-weight); } dl { margin: 1rem 0; dt { font-weight: bold; margin: 0.5rem 0; } dd { padding-inline-start: 0.75rem; } dd~dd, dt~dt { margin: 0.5rem 0; } } blockquote { margin: 1rem 0; padding: 0 1rem; border-inline-start: 0.2rem solid var(--text-primary-red); } table { margin: 1rem auto; border-collapse: collapse; width: 100%; max-width: 100%; overflow: auto; border-radius: 0.5rem; background-color: var(--background-secondary); thead { background-color: var(--background-information); border-top: 2px solid var(--text-link); border-bottom: 2px solid var(--text-link); font-weight: bold; } tbody { tr { border-bottom: 1px solid var(--text-primary); } } th, td { padding: 0.5rem; text-align: left; } } details { margin: 0.5rem 0; background-color: var(--background-information); border-radius: 0.3rem; padding: 0.5rem; summary { color: red; font-weight: bold; } }}body{transition:background-color .3s,color .3s}body.theme-loaded{transition:background-color .3s ease}[data-theme]{transition:background-color .3s ease,color .3s ease}header{background-color:var(--header-background-color);color:var(--text-header-color);padding:1rem;box-shadow:0 4px 8px rgba(0,0,0,.2),0 8px 16px rgba(0,0,0,.15);nav { margin: 0 auto; color: var(--text-white-primary); display: grid; align-items: center; grid-template-areas: "logo menusPrimary functions menusSecondary search"; grid-template-columns: 48px minmax(200px, 4fr) 112px 0 minmax(100px, 300px); gap: 8px; a { color: var(--text-header-color); font-family: var(--font-heading); font-weight: bold; } .logo { grid-area: logo; svg { width: 48px; height: 48px; } } .menus.primary { grid-area: menusPrimary; display: block; ul { display: flex; flex-wrap: wrap; .menu-item a { padding: 10px 16px; border-radius: 8px; font-size: 1.2rem; &:hover { background-color: rgba(0, 0, 0, .15); } } } } .btn { cursor: pointer; svg { width: calc(36px + 10px * 2); height: calc(36px + 10px * 2); padding: 10px; border-radius: 8px; &:hover { background-color: rgba(0, 0, 0, .15); } } } .functions { grid-area: functions; display: grid; grid-template-columns: repeat(2, 1fr); .language { .other-languages { display: none; position: relative; ul:has(> li) { display: flex; flex-direction: column; gap: 0.5rem; width: -moz-max-content; width: max-content; position: absolute; top: 5px; background-color: var(--header-background-color); padding: 1rem; border-radius: 10px; li { border-bottom: 2px dotted white; } } } .other-languages[data-visible="true"] { display: block; } } .theme { .btn-light-mode { display: none; } } .menu-icon { display: none; .btn-close-menu { display: none; } } } .menus.secondary { grid-area: menusSecondary; display: none; ul { display: flex; flex-wrap: wrap; .menu-item a { padding: 10px 16px; border-radius: 8px; font-size: 1.2rem; } } } .search { grid-area: search; display: flex; justify-content: center; .search-box { max-width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; border-radius: 0.7rem; outline: none; background-color: var(--text-primary); color: var(--text-secondary); font-family: var(--font-heading); font-weight: bold; font-size: 1.2rem; padding: 0.7rem 1rem; padding-left: 3rem; color: var(--text-search-input); background-color: var(--search-background-color); background-image: url(/assets/images/search.svg); background-repeat: no-repeat; background-size: 1.5rem; background-position: 1rem 45%; &:not(:focus, :active)::-webkit-search-cancel-button { display: none; } &::-moz-placeholder { color: var(--text-body-color); opacity: 0.7; } &::placeholder { color: var(--text-body-color); opacity: 0.7; } } } }}header nav{width:80%}@media screen and (max-width:1200px){header nav{width:100%}}@media screen and (max-width:768px){header{nav { width: 100%; grid-template-areas: "logo functions" "menusSecondary menusSecondary" "search search"; grid-template-columns: minmax(48px, 3fr) minmax(168px, 1fr); .menus.primary { display: none; } .functions { grid-template-columns: repeat(3, 1fr); .menu-icon { display: block; } } .search { .search-box { width: 100%; } } }}}main{width:var(--main-width-pc);margin:.3rem auto;padding:.3rem 0;min-height:80vh}footer{border-bottom:none}@media screen and (max-width:768px){main{width:var(--main-width-mobile)}}.box-shadow{box-shadow:0 4px 8px rgba(0,0,0,.2),0 8px 16px rgba(0,0,0,.15)}.box-shadow-2:hover{box-shadow:0 1px 7px -5px rgba(50,50,93,.25),0 3px 16px -8px rgba(0,0,0,.3),0 -6px 16px -6px rgba(0,0,0,3%);transition:ease-in-out .2s}#btn-return-to-top{opacity:0;visibility:hidden;position:fixed;bottom:20px;right:20px;z-index:99;cursor:pointer;padding:.5rem;border-radius:50%;background-color:var(--background-secondary);box-shadow:0 4px 8px rgba(0,0,0,.2),0 8px 16px rgba(0,0,0,.15);transition:opacity .3s ease,visibility .3s ease;&:hover { background-color:var(--background-tertiary); } &.show { opacity:1; visibility:visible; }}#search-results{list-style:none;padding:0;margin:1rem auto;width:80%;max-height:50vh;overflow:auto;li { padding: 0.5rem 0; border-bottom: 1px dotted var(--text-primary); ; } a { display: block; padding: 0.5rem 0; color: var(--text-primary); } .book-meta { display: flex; gap: 1rem; font-size: 0.9rem; }}.search-highlight{background-color:var(--highlight-bg);font-weight:var(--font-body-strong-weight)}@media screen and (max-width:768px){.search-input-area{width:100%}#search-results{margin:.5rem auto;width:100%}}.search-results-box{display:none;border-radius:.8rem;max-height:40vh;overflow-y:auto;padding:1rem;background-color:var(--bg-grey-01);font-family:mija}.search-result-item{padding:.5rem;border-bottom:2px solid var(--text-body-color)}.search-result-item p{color:var(--text-body-color)}.no-results{padding:1rem;text-align:center}.search-highlight{background-color:#ffeb3b;color:#000;font-weight:700;padding:0 3px;border-radius:5px}.pagination-default{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:0;margin:1rem auto;.page-item { a { display: block; padding: 0.5rem; } &.active a, &.disabled a { color: var(--text-secondary); cursor: not-allowed; } }}a:has(.external-link-icon){display:inline-flex;svg { width: 1rem; height: 1rem; margin-left: 0.2rem; fill: var(--text-secondary); }}.page-not-found{margin:1rem auto;text-align:center}.song-section{.song-info { display: flex; align-items: center; gap: 1rem; margin: 1rem 0; } .song-lists { ul li { font-size: 1.2rem; font-weight: bold; padding: 0.5rem; border-bottom: 2px solid var(--text-body-color); .song-info-full { display: grid; grid-template-columns: minmax(150px, 2fr) minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr); gap: 1rem; width: 100%; overflow-x: auto; .song-title, .artists, .lyricists, .composers { display: flex; gap: 0.5rem; align-items: center; overflow: auto; ul { display: flex; align-items: center; gap: 0.5rem; li { padding: none; border: none; } } } } } ul ul { padding-left: 0; } }}@media screen and (max-width:768px){.song-section .song-lists ul li{font-size:1.1rem;.song-info-full { grid-template-columns: minmax(150px, 1fr) minmax(100px, 1fr); .lyricists, .composers { display: none; } }}}.taxonomy-container{.header { display: flex; align-items: center; gap: 1rem; margin: 1rem 0; } .content { font-size: 1.2rem; font-weight: bold; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; li { a { display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem; padding: 0.5rem 0.8rem; border-radius: 0.5rem; &.artists { color: var(--green-02); background-color: var(--green-01); } &.lyricists { color: var(--orange-02); background-color: var(--orange-01); } &.composers { color: var(--purple-02); background-color: var(--purple-01); } } } } }}.term-container{.term-info { display: flex; align-items: center; gap: 1rem; margin: 1rem 0; } .term-lists { ul li { font-size: 1.2rem; padding: 0.5rem; border-bottom: 2px solid var(--text-body-color); .song-info-term { display: grid; grid-template-columns: minmax(150px, 2fr) minmax(100px, 1fr) minmax(100px, 1fr); width: 100%; overflow-x: auto; .song-title, .artists, .lyricists, .composers { display: flex; gap: 0.5rem; align-items: center; ul { display: flex; align-items: center; gap: 0.5rem; li { padding: none; border: none; } } } } } ul ul { padding-left: 0; } }}@media screen and (max-width:768px){.term-container .term-lists ul li{font-size:1.1rem;.song-info-term { grid-template-columns: minmax(150px, 1fr) minmax(100px, 1fr); .term-02 { display: none; } }}}.song-page{.song-info { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; .cover img { border-radius: 0.5rem; } } .song-meta { ul ul { padding-left: 0; } margin-bottom: 1rem; .meta-item { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; align-items: center; max-width: 100%; overflow: auto; .terms { font-size: 1.2rem; font-weight: bold; display: flex; align-items: center; width: -moz-max-content; width: max-content; max-width: 100%; overflow: auto; text-wrap: nowrap; .label { padding: 0.5rem; border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; opacity: 0.7; background-color: var(--bg-grey-01); } ul { padding: 0.5rem; display: flex; border-bottom-right-radius: 0.5rem; border-top-right-radius: 0.5rem; } a { margin: 0 0.5rem; } &.artists { ul { background-color: var(--green-01); } a { color: var(--green-02); } } &.lyricists { ul { background-color: var(--orange-01); } a { color: var(--orange-02); } } &.composers { ul { background-color: var(--purple-01); } a { color: var(--purple-02); } } } } } .lyrics-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; align-items: center; margin-bottom: 1rem; .lyrics-format { padding: 1rem; border-radius: 0.5rem; display: flex; flex-direction: column; gap: 1rem; pre { color: var(--text-black-secondary); } &.lrc { background-color: var(--green-01); h2 { color: var(--green-02); } .btn-download { background-color: var(--green-02); } } &.srt { background-color: var(--orange-01); h2 { color: var(--orange-02); } .btn-download { background-color: var(--orange-02); } } &.txt { background-color: var(--purple-01); h2 { color: var(--purple-02); } .btn-download { background-color: var(--purple-02); } } } h2 { text-align: center; } .lyrics-content { height: 30vh; overflow-y: auto; margin-bottom: 1rem; } .download-lyrics { margin: 1rem auto; .btn-download { padding: 1rem 2rem; border-radius: 0.7rem; font-weight: bold; font-size: 1.5rem; color: var(--text-white-primary); } } } .youtube-embed { border-radius: 1rem; margin: 2rem auto; }}footer{margin:1rem auto;padding:1rem 0;display:flex;align-items:center;justify-content:center;border-top:2px solid var(--text-body-color)}.home{display:grid;grid-template-areas:"left right";gap:1rem;grid-template-columns:3fr 1fr;.title { color: var(--text-body-color); } .left { grid-area: left; .song-info { justify-content: space-between; .left-area { display: flex; align-items: center; gap: 1rem; } } } .right { grid-area: right; display: grid; gap: 1rem; grid-template-areas: "artists" "lyricists" "composers" ; .header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1rem 0; .left-area { display: flex; align-items: center; gap: 1rem; } } .taxonomy-container.artists { grid-area: artists; } .taxonomy-container.lyricists { grid-area: lyricists; } .taxonomy-container.composers { grid-area: composers; } }}@media screen and (max-width:768px){.home{grid-template-areas:"left left" "right right"}}.pagination{margin:2rem auto;width:100%;font-family:mija;font-size:1.1rem;font-weight:700;display:flex;align-items:center;justify-content:center;gap:1rem;.prev, .next { width: 66px; height: 56px; padding: 10px 15px; border-radius: 0.5rem; background-color: var(--blue-01); svg { width: 36px; height: 36px; color: var(--blue-02); } &.disabled { svg { color: var(--grey-02); } cursor: not-allowed; } }}