/* 由 scripts/build_font.py 自动生成，请勿手改。
   分三层：Content（首屏用字，必下）→ Lyrics（歌词/检索用字，按需）
   → Ext（霞鹜文楷其余全部汉字，按 unicode-range 分片按需）。 */

@font-face {
  font-family: "LXGW WenKai Content";
  src: url("../fonts/lxgw-wenkai-content.woff2?v=063e82aea9") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "LXGW WenKai Lyrics";
  src: url("../fonts/lxgw-wenkai-content-lyrics.woff2?v=ba80a9d3e0") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+00A0,U+00B9,U+00E0,U+00E2-00E4,U+00E8-00EA,U+00EC-00EE,U+00F3-00F4,U+00F9-00FB,U+0101,U+0103,U+0113,U+011B,U+014B,U+015B,U+017A,U+01A1,U+01B0,U+01CE,U+01D0,U+01D2,U+01D4,U+0235,U+0251-0252,U+0254-0256,U+0259,U+025B,U+0261,U+0263-0264,U+0266,U+0268,U+026A,U+026F,U+0272-0273,U+0279,U+027F,U+0282-0283,U+0288,U+028A,U+0290-0292,U+0294-0295,U+02AE,U+02B0,U+02B2,U+02C1,U+02D0-02D1,U+02E4,U+0300-0304,U+030C,U+0319,U+0323,U+0329,U+032F,U+0358,U+1D07,U+1E3F,U+1EA1,U+1EA3,U+1EA5,U+1EA7,U+1EAB,U+1EAD,U+1EB1,U+1EB3,U+1EB9,U+1EC1,U+1EC7,U+1ECB,U+1ECD,U+1ECF,U+1ED1,U+1ED7,U+1ED9,U+1EE5,U+1EE9,U+1EEF,U+1EF1,U+1EF3,U+207F,U+2500,U+3043,U+3045,U+3047,U+3050,U+3052,U+305C,U+305E,U+3061,U+3070,U+3076,U+307A,U+3080,U+3083-3085,U+3087,U+308D,U+30BC,U+3547,U+3874,U+3883,U+39FB,U+4E03,U+4E11,U+4E18,U+4E25,U+4E30,U+4E43,U+4E4D-4E4E,U+4E5E,U+4E60,U+4E70,U+4E88,U+4E95,U+4EA1,U+4EA6,U+4EA9,U+4EB2,U+4EC4,U+4EC7,U+4ED1,U+4ED4,U+4ED7,U+4ED9,U+4EDD,U+4EE4,U+4EF0,U+4F01,U+4F11,U+4F17,U+4F1E,U+4F24,U+4F2A-4F2B,U+4F32,U+4F38,U+4F3C,U+4F57,U+4F5A-4F5B,U+4F69,U+4F6E,U+4F73,U+4F83,U+4F94,U+4FA3,U+4FAA,U+4FAC,U+4FAF,U+4FB6,U+4FBF,U+4FC3,U+4FD8,U+4FDA,U+4FDE,U+4FEF,U+4FF1,U+5018,U+501F,U+5029,U+5037,U+503D,U+5043,U+5065,U+5074,U+50AC,U+50B2,U+50C5,U+50D5,U+50DE,U+50EF,U+5102,U+5115,U+511E,U+513F-5140,U+5144,U+5151-5152,U+5154,U+515A,U+5175,U+517B,U+517D,U+5188-5189,U+519C,U+51A4,U+51B6-51B7,U+51BD,U+51C0,U+51C4,U+51CC,U+51DB,U+51DD,U+51E1,U+51F6,U+5200,U+5211,U+5218,U+5239-523A,U+5242-5243,U+524E,U+5269,U+5287,U+529D,U+52AB,U+52B1,U+52B3,U+52C7,U+52D2,U+52DD-52DE,U+5306,U+530D,U+5310,U+531F,U+533B,U+5345,U+5347-5348,U+534F,U+5354,U+5366-5367,U+536F,U+5371,U+537B,U+537F,U+538C,U+539D,U+53AD-53AE,U+53BE,U+53C0,U+53CB,U+53E2,U+53E5,U+53E9,U+53EB,U+53F1,U+53F8-53F9,U+53FB,U+5407,U+5410,U+541E-541F,U+5436,U+5438,U+543B-543C,U+5440,U+5450,U+5452,U+545C,U+5462,U+5473,U+5477,U+547C,U+548E,U+5495,U+54A4,U+54A7-54A8,U+54AB-54AC,U+54B2,U+54B8,U+54BD-54C0,U+54C9,U+54ED,U+54F4,U+54FC,U+5506-5507,U+5524,U+5544,U+554A,U+554F,U+5565,U+556D,U+5578,U+557C,U+5583-5584,U+5586-5587,U+5589-558A,U+5594,U+5598,U+559A,U+559D,U+55A7,U+55AA,U+55D2,U+55DC,U+55E8,U+5616-5618,U+561B,U+5626,U+5634,U+5638,U+566C,U+56A3,U+56B7,U+56C2,U+56DA,U+56E1,U+56E5,U+56F0,U+56F7,U+56FF,U+570D,U+5713,U+5747,U+574A,U+574E,U+5750,U+575A-575B,U+5760,U+5766,U+5782,U+5784,U+57AB,U+57CB,U+5802,U+5815,U+584C,U+5858,U+58B3,U+58C1,U+58D1,U+58D3,U+592A,U+592E-592F,U+5944,U+5948-5949,U+594E,U+5954,U+5956,U+596E-596F,U+5974,U+5976,U+5978-5979,U+5986-5987,U+59A8,U+59AE,U+59B9,U+59D0,U+59D3,U+59FF,U+5A05,U+5A07,U+5A13,U+5A18,U+5A1F,U+5A46,U+5A49,U+5A66-5A67,U+5A75,U+5A92,U+5AC1,U+5B1B,U+5B51,U+5B54,U+5B59,U+5B5D,U+5B7A,U+5B7D,U+5B8F,U+5B95,U+5B99,U+5B9C-5B9D,U+5BA1,U+5BA4,U+5BB0,U+5BB3-5BB4,U+5BC2,U+5BC5,U+5BC7,U+5BD2,U+5BDE,U+5BE5-5BE6,U+5BEC,U+5BF0,U+5BFA-5BFB,U+5C48,U+5C4A,U+5C51,U+5C64-5C65,U+5C82,U+5C96,U+5CA9,U+5CAB,U+5CB3,U+5CE6,U+5CF0,U+5D0E,U+5D1B,U+5DBD,U+5DC5,U+5DE3,U+5DF3,U+5DF7,U+5DFE,U+5E06,U+5E10,U+5E18,U+5E1D,U+5E2D,U+5E33,U+5E37,U+5E61,U+5E78,U+5E7A,U+5E7C-5E7D,U+5E7F,U+5E84,U+5E99,U+5E9C,U+5E9E-5E9F,U+5EA7,U+5EAD,U+5EB7-5EB8,U+5EE3,U+5EEA,U+5EF6-5EF7,U+5EFF,U+5F03-5F04,U+5F13,U+5F1F,U+5F25,U+5F2D,U+5F2F,U+5F37,U+5F67,U+5F69,U+5F70,U+5F77,U+5F7C,U+5F8A,U+5F90,U+5F92,U+5F98,U+5F9B,U+5F9E,U+5FA1,U+5FA7-5FA9,U+5FB5,U+5FCC-5FCD,U+5FD0-5FD2,U+5FD7,U+5FD9,U+5FE0,U+5FE7,U+6000,U+6005-6006,U+600E,U+6015-6016,U+601C,U+6025,U+6028,U+602F,U+604D,U+6050,U+6059,U+6064,U+6068-6069,U+6070,U+6076,U+6079,U+607B,U+607F,U+6084,U+6089,U+609F-60A0,U+60A3,U+60AC,U+60B2,U+60B8,U+60C6,U+60D1,U+60DA,U+60DC,U+60DF,U+60E1,U+60E7,U+60EE-60EF,U+60F6,U+60F9,U+6101,U+6108-6109,U+611A,U+611F,U+6124,U+6127,U+6134,U+6155,U+6158,U+6163,U+616B,U+6182,U+61BE,U+61C7,U+61D2,U+61F7-61F8,U+6206,U+6208,U+620A,U+620C,U+620E,U+621A,U+6234,U+6241,U+6247,U+6249,U+624E,U+6263,U+626C,U+626E,U+6276,U+6291-6292,U+6296-6297,U+629A-629B,U+62AB-62AC,U+62B1,U+62B5,U+62B9,U+62C2,U+62C5,U+62C8,U+62CD,U+62D4,U+62D9,U+62DB,U+62E2,U+62E5,U+62E8,U+62EC-62ED,U+62F1,U+631A,U+6321,U+6323,U+6325,U+633D,U+6355,U+6367-6368,U+6371-6372,U+637B,U+638C,U+6399,U+63A0,U+63A2,U+63A9,U+63AC,U+63BD,U+63C0,U+63C9,U+63CF,U+63DA,U+63E1,U+63E3,U+63ED,U+6405,U+640F,U+642D,U+6436,U+643A,U+643F,U+6444,U+6446-6447,U+6452,U+6458,U+6467,U+6479,U+6495,U+649E,U+64A5,U+64B0,U+64B7,U+64BC,U+64C1,U+64D2,U+64D4,U+64E6,U+64F1,U+6500,U+650F,U+6512,U+6518,U+651C,U+653F,U+6551,U+655B,U+655E,U+6562,U+6575,U+6591,U+659F,U+65A9,U+65C1,U+65CB-65CC,U+65D7,U+65E8,U+65EC,U+65F7,U+660C,U+660F,U+6614,U+6619,U+6620,U+6627-6628,U+663C,U+6643,U+664F,U+6652-6653,U+665E,U+6666,U+6668,U+6677,U+667A,U+6691,U+6696-6697,U+669D,U+66B4,U+66C9,U+66D9,U+66DC,U+66E0,U+66E9,U+66F0,U+66F9,U+6706,U+670B,U+6714,U+6726,U+6728,U+6731,U+6735,U+673D,U+6749,U+674F,U+6751,U+6768,U+676F,U+677E,U+6789,U+6795,U+679D,U+67A2,U+67AB,U+67AF,U+67B7,U+67C4,U+67E0,U+67F3,U+6811,U+6816-6817,U+6821,U+6838,U+683D,U+6842-6843,U+684E,U+6850-6851,U+6853,U+6860,U+6865,U+6868,U+68A2,U+68A7-68A8,U+68C2,U+68C4,U+68CB,U+68D8,U+68EE,U+68F9,U+690D,U+6930,U+696B,U+69F3,U+6A23,U+6A35,U+6A39,U+6A3D,U+6A58,U+6A6F,U+6A90,U+6AAC,U+6B20,U+6B22-6B23,U+6B32,U+6B3E,U+6B47,U+6B60-6B61,U+6B79,U+6B83,U+6B87,U+6B8B,U+6B98,U+6BBC,U+6BC0-6BC1,U+6BC5,U+6BCB,U+6BCE,U+6BD2-6BD3,U+6BD5,U+6BDB,U+6C23,U+6C3D,U+6C50,U+6C5C-6C5D,U+6C60-6C61,U+6C81,U+6C83,U+6C90,U+6C9F,U+6CA6-6CA7,U+6CB1-6CB2,U+6CBB,U+6CBE,U+6CC4,U+6CC9-6CCA,U+6CD3,U+6CDE,U+6CE0,U+6CE3,U+6CE5,U+6CFB,U+6CFD,U+6D12,U+6D17,U+6D1E,U+6D2A,U+6D3B,U+6D47,U+6D4A,U+6D53,U+6D69,U+6D89,U+6D8C,U+6D8E,U+6D95,U+6D99,U+6DA1,U+6DB8,U+6DCB-6DCC,U+6DD2,U+6DD8,U+6DE4,U+6DE9,U+6DF5,U+6DF8,U+6DFA,U+6E0A,U+6E14,U+6E17,U+6E20,U+6E29,U+6E2C,U+6E3A,U+6E4D-6E4E,U+6E56,U+6E6E,U+6E7F,U+6E85,U+6E9C-6E9D,U+6EA2,U+6EAB,U+6EAF,U+6EBA,U+6EC2,U+6EC5,U+6ECC,U+6EDF,U+6EE8,U+6EF2,U+6EF4,U+6EFE,U+6F01-6F02,U+6F0F,U+6F13,U+6F20,U+6F29-6F2B,U+6F38,U+6F3E,U+6F47,U+6F4B,U+6F6D-6F6F,U+6F7A,U+6F7D,U+6F80,U+6F84,U+6F88,U+6FB9,U+6FC0,U+6FD5,U+6FD8,U+6FEF,U+6FF1,U+7034,U+7051,U+705E,U+706D,U+706F,U+7076,U+707C,U+707E-707F,U+7089,U+70BD,U+70C1-70C2,U+70C8,U+70DB,U+70DF,U+70E6-70E7,U+70FD,U+7109,U+711A,U+7130,U+713C,U+7159,U+715E,U+7169,U+7184,U+7199,U+719F,U+71C8,U+71D2,U+71D5,U+71DF,U+71E5,U+721B,U+7232,U+7235-7236,U+723D,U+723F,U+7246,U+725B,U+7262,U+7275,U+727D,U+7280,U+72AC,U+72AF,U+72B9,U+72C2,U+72C4,U+72D0,U+72DE,U+72ED,U+731C,U+7336,U+7375,U+737B,U+7384,U+7396,U+73A9,U+73B2,U+73C0,U+73CA,U+73CD,U+73D1,U+73E0,U+7405,U+7410,U+741B,U+7425,U+742E,U+7433-7436,U+743C,U+745F,U+74EF,U+750C,U+7518,U+751A,U+751C,U+7523,U+7529,U+7530,U+7540,U+754F,U+755C,U+7562,U+7574,U+758A,U+758F,U+7591,U+7597,U+75AE,U+75B2,U+75D5,U+75DB,U+75F4,U+760B,U+7626,U+7642,U+7652,U+7678,U+767A,U+7687-7688,U+768E,U+76AE,U+76B1,U+76B4,U+76C6,U+76CF,U+76DB,U+76EA,U+7709,U+7728,U+7737-7738,U+773A,U+773E,U+774F,U+7752,U+775B,U+7761,U+777F,U+77A5,U+77AA,U+77AC,U+77BB,U+77C6,U+77D7,U+77E2,U+7802,U+7834,U+7840,U+788C,U+788E,U+78A7,U+78B0,U+78BA,U+78CA,U+78E8,U+78F7,U+793C,U+793E,U+7942,U+7948,U+7955,U+795A,U+795F,U+796F,U+79BE,U+79C0,U+79C9,U+79D1,U+79E6,U+79EF-79F0,U+7A00,U+7A0D,U+7A1A,U+7A37,U+7A3B,U+7A40,U+7A46,U+7A4D,U+7A69,U+7A74,U+7A77,U+7A7F,U+7A83,U+7AA5,U+7ADF,U+7AE5,U+7AED,U+7AF3,U+7B11,U+7B19,U+7B1B,U+7B20,U+7B33,U+7B3A,U+7B3C,U+7B51,U+7B5D,U+7B79,U+7B87,U+7BAB,U+7BE1,U+7BE4,U+7BEE,U+7C21,U+7C2A-7C2B,U+7C3E,U+7C41,U+7C60,U+7C64,U+7C92,U+7CB9,U+7CBC,U+7CF8,U+7D14,U+7D19,U+7D1B-7D1C,U+7D27,U+7D2B,U+7D2F,U+7D61,U+7D6E,U+7D93,U+7DB4,U+7DCB,U+7DD2,U+7DE9,U+7DF4,U+7E0B,U+7E31,U+7E54,U+7E5E,U+7E6A,U+7E7C,U+7E8F,U+7E96,U+7EA0,U+7EA4,U+7EB1,U+7EB5,U+7EB7-7EB8,U+7EC3,U+7EC7,U+7EDA-7EDB,U+7EE3,U+7EEA,U+7EEE-7EEF,U+7EF5-7EF6,U+7EF8,U+7EFB-7EFD,U+7F08,U+7F15,U+7F18,U+7F20,U+7F25,U+7F31,U+7F5A,U+7F62,U+7F70,U+7F77,U+7F8C,U+7F9E,U+7FA1,U+7FA4,U+7FB2,U+7FC1,U+7FD8,U+7FE0,U+7FE6,U+7FE9,U+8010,U+8015,U+803B,U+803F,U+804A,U+805E,U+807C,U+8083,U+8086,U+8089,U+809A,U+809D,U+80A0,U+80A9,U+80AF,U+80B2,U+80C6,U+80DC,U+80E1,U+80ED,U+80F8,U+8102,U+8108,U+810A,U+8111,U+8116,U+812B,U+8138,U+813E,U+8146,U+8150-8151,U+8165,U+816E,U+8170,U+8179,U+817C,U+817E,U+819B,U+81C9,U+81D3,U+81E3,U+81E5,U+8206,U+8209,U+820C-820D,U+8212,U+822C,U+8231,U+8237,U+8239,U+8270,U+8273,U+829D,U+82AF,U+82B3,U+82CD,U+82D4,U+82DF,U+82E6,U+8302-8304,U+830F,U+8327,U+832B,U+8335-8336,U+8346-8347,U+8352,U+8361,U+8363,U+8367,U+836B,U+8389,U+839E,U+83B9-83BA,U+83CA,U+83E9,U+83F1-83F2,U+840D,U+8426-8427,U+8457,U+8469,U+846C,U+8471,U+8482,U+84B2,U+84B8,U+84BC,U+84C9,U+84DF,U+84E6,U+8511,U+8513,U+8521,U+8525,U+853B,U+853D,U+8569,U+857B,U+8584,U+8587,U+85AE,U+85BA,U+864E-8650,U+8654,U+865B,U+8671,U+8679,U+867D,U+8680,U+8695,U+86C7,U+86D9,U+86E4,U+86EE,U+86F0,U+86F9,U+86FE,U+8703,U+870A,U+8749,U+8757,U+8774,U+8776,U+878D,U+87BA,U+87EC,U+883B,U+8840,U+8854,U+8857,U+8859,U+8863,U+886B,U+8870,U+8877,U+887E,U+8882,U+8885,U+8888,U+888D,U+88AD,U+88C1-88C2,U+88CA,U+88D8-88D9,U+88DD,U+88DF,U+88F3,U+892A-892B,U+8944,U+895F,U+8995,U+899A,U+89BA,U+89C5,U+89C9,U+89DE,U+89E5,U+8A30,U+8A34,U+8A48,U+8A89,U+8A8D,U+8AA4,U+8AC7,U+8AD1,U+8B00,U+8B1B,U+8B1D,U+8B2B-8B2C,U+8B41,U+8B8A,U+8B8E,U+8B90,U+8BA8,U+8BB2,U+8BC0,U+8BC9,U+8BDA,U+8BDE,U+8BE1,U+8BE6,U+8BE9,U+8BEB,U+8BFA,U+8C08,U+8C0B,U+8C0E,U+8C15,U+8C22-8C24,U+8C2A,U+8C31-8C32,U+8C46,U+8C48,U+8C5A,U+8C6A,U+8C93,U+8CA0,U+8CAA,U+8CAC,U+8CB4,U+8CD3,U+8D1F,U+8D23-8D24,U+8D26,U+8D2A,U+8D31,U+8D35,U+8D4B-8D4C,U+8D4F-8D50,U+8D58,U+8D62,U+8D66,U+8D76,U+8D81,U+8DA3,U+8DC4,U+8DCC,U+8DCE,U+8DDA,U+8DE1,U+8DE3,U+8DF9,U+8E09,U+8E1F,U+8E2A,U+8E31,U+8E41,U+8E44,U+8E48-8E49,U+8E52,U+8E59,U+8E70,U+8E87,U+8E8A,U+8E8D,U+8E9A,U+8EC0,U+8F66-8F69,U+8F88-8F89,U+8F97,U+8F99,U+8F9B,U+8FA9,U+8FB0,U+8FBF,U+8FC1,U+8FCE,U+8FDF,U+8FE2,U+8FEB,U+8FF4,U+8FF7-8FF9,U+9003,U+900F,U+901D-901E,U+9022,U+9035,U+9038,U+903C,U+9042,U+9047,U+904D,U+9050,U+9055,U+9059,U+9060,U+9065,U+906D,U+9072,U+9075,U+90AA,U+90AF,U+90CA,U+90CE,U+90E1,U+90ED,U+90F8,U+914A,U+914C,U+9152,U+9154,U+9163,U+9165,U+9169,U+916C,U+9177-9179,U+9189,U+9192,U+919C,U+91A8,U+91AC,U+91BA,U+91C7,U+91CE,U+9240,U+924F,U+9264,U+9326,U+93AE,U+93C8,U+93E1,U+9497,U+94A9,U+94BF,U+94FA,U+9500,U+9504,U+9508,U+950B,U+9526,U+9538,U+953A,U+9547,U+955C,U+955E,U+9591-9592,U+95AD,U+95D4-95D5,U+95EA-95EB,U+95EF,U+95F2,U+95F9,U+95FB,U+9601-9602,U+960A,U+9611,U+9615-9616,U+962E,U+9640,U+9646-9647,U+964B-964C,U+9662,U+9669-966A,U+9675,U+9677-9678,U+9685,U+968E,U+9691,U+9698,U+969B,U+96B9,U+96BB,U+96BE,U+96C1,U+96CD,U+96D5-96D6,U+96DE,U+96E3,U+96F7,U+9707,U+9709,U+970E,U+9713,U+972D,U+9744,U+9751,U+975C,U+978D,U+97A6,U+97AD,U+97C6,U+97FF,U+9808,U+9810-9811,U+9818,U+9830,U+983B,U+9846,U+984F,U+9867,U+987D-987E,U+9886,U+9888,U+9897,U+989C-989D,U+98A4,U+98C4,U+98CB,U+98D2,U+98D8,U+98DF,U+98E2,U+98F2,U+990A,U+9910,U+9965,U+996E,U+9970,U+99A8,U+99AC,U+9A0E,U+9A19,U+9A43,U+9A5F,U+9A70,U+9A73,U+9A82,U+9A9B,U+9AA4,U+9AB7,U+9AC5,U+9ACF,U+9AEE,U+9AFB,U+9B22,U+9B31,U+9B42,U+9B44-9B45,U+9B47,U+9B51,U+9B5A,U+9BE8,U+9C32,U+9C57,U+9C5F,U+9CDE,U+9CF4,U+9D3F,U+9E1F,U+9E21-9E23,U+9E33,U+9E42,U+9E63-9E64,U+9E70,U+9E7F,U+9EA5,U+9EBB,U+9EC3-9EC4,U+9ED1,U+9EDB,U+9EEF,U+9F0E,U+9F13,U+9F7F,U+9F90,U+AC01,U+AC10,U+ACE0,U+ACFC,U+AD6C,U+ADF8,U+AE30,U+B108,U+B124,U+B178,U+B204,U+B294,U+B2E4,U+B2E8,U+B300,U+B354,U+B38C,U+B3C4,U+B418,U+B434,U+B450,U+B518,U+B530,U+B77C,U+B78C,U+B791,U+B7EC,U+B839,U+B958,U+B974,U+B97C,U+B9C8,U+B9CC,U+B9E4,U+BA4B,U+BA74,U+BA85,U+BAA8,U+BBF8,U+BC09,U+BD80,U+C0AC,U+C0B4,U+C0DD,U+C138,U+C2A4,U+C2AC,U+C2E0,U+C2EC,U+C2F6,U+C544,U+C54C,U+C591,U+C5B4,U+C5D0,U+C5F4,U+C678,U+C694,U+C6B4,U+C744,U+C74C,U+C751,U+C758,U+C774,U+C77C,U+C787-C788,U+C790,U+C808,U+C815,U+C9C0,U+D45C,U+D558,U+D574,U+D788;
}

@font-face {
  font-family: "LXGW WenKai Ext";
  src: url("../fonts/lxgw-wenkai-ext-1.woff2?v=ab83bc810e") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E,U+00A0-00AC,U+00AE-024F,U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03E1,U+03F0-045F,U+0462-0463,U+046A-046B,U+0472-0475,U+0478-0479,U+0490-0493,U+0496-0497,U+049A-049D,U+04A2-04A3,U+04AE-04B3,U+04B8-04BB,U+04C9-04CA,U+04D8-04D9,U+04DE-04EB,U+04EE-04F5,U+04FE-04FF,U+2000-200B,U+2010-2016,U+2018-2022,U+2025-2027,U+2030-2037,U+2039-203F,U+2042,U+2044,U+2047-2049,U+2051-2052,U+205A,U+205D,U+2070-2071,U+2074-208E,U+2090-209C,U+20A0-20C1,U+2100-2101,U+2103,U+2105-2106,U+2109-210A,U+210E-210F,U+2113,U+2116-2117,U+211E,U+2120-2122,U+2126-2127,U+2129-212B,U+212E,U+2132,U+2135,U+213B,U+2141-2144,U+214B,U+214D-214E,U+2150-218B,U+2190-2199,U+21B6-21B9,U+21C4-21C6,U+21CB-21D0,U+21D2,U+21D4,U+21E6-21EA,U+21F5,U+2200-220D,U+220F,U+2211-2213,U+2215-2216,U+2219-2220,U+2223-2230,U+2234-2237,U+223C-223E,U+2242-2243,U+2245,U+2248,U+224B-224C,U+2251-2253,U+225C,U+2260-2262,U+2264-226B,U+226E-226F,U+2272-2273,U+2276-2277,U+2282-228B,U+2295-2299,U+229C-229E,U+22A0,U+22A2-22A5,U+22BF-22C5,U+22DA-22DB,U+22EE-22F1,U+2460-24FF,U+25A0-25AB,U+25B1-25B3,U+25B6-25B7,U+25BC-25BD,U+25C0-25C1,U+25C6-25C7,U+25C9-25CC,U+25CE-25D3,U+25E2-25E6,U+25EF,U+25FB-25FC,U+2600-2603,U+2605-2606,U+2609,U+260E-2612,U+2616-2617,U+261C-261F,U+262F-2637,U+2640-2642,U+2660-266F,U+2672-267D,U+2686-268F,U+26A0,U+26AA-26AB,U+26BD-26BE,U+26CB,U+26E4-26E7,U+2702,U+2713,U+2717,U+271A,U+273D,U+273F-2740,U+2756,U+275B-2760,U+2772-2773,U+2776-2793,U+27A1,U+3000-302D,U+3030,U+3033-303F,U+3041-3096,U+3099-30FF,U+31F0-321E,U+3220-32FF,U+3400-35DC;
}

@font-face {
  font-family: "LXGW WenKai Ext";
  src: url("../fonts/lxgw-wenkai-ext-2.woff2?v=eac1facde1") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+35DD-3F9A;
}

@font-face {
  font-family: "LXGW WenKai Ext";
  src: url("../fonts/lxgw-wenkai-ext-3.woff2?v=5fb9c65842") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+3F9B-4958;
}

@font-face {
  font-family: "LXGW WenKai Ext";
  src: url("../fonts/lxgw-wenkai-ext-4.woff2?v=5cca7e711c") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+4959-4DBF,U+4E00-5356;
}

@font-face {
  font-family: "LXGW WenKai Ext";
  src: url("../fonts/lxgw-wenkai-ext-5.woff2?v=f7edd0c5fe") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+5357-5D14;
}

@font-face {
  font-family: "LXGW WenKai Ext";
  src: url("../fonts/lxgw-wenkai-ext-6.woff2?v=668de2dd9c") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+5D15-66D2;
}

@font-face {
  font-family: "LXGW WenKai Ext";
  src: url("../fonts/lxgw-wenkai-ext-7.woff2?v=c4f1dae117") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+66D3-7090;
}

@font-face {
  font-family: "LXGW WenKai Ext";
  src: url("../fonts/lxgw-wenkai-ext-8.woff2?v=05e3311ff3") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+7091-7A4E;
}

@font-face {
  font-family: "LXGW WenKai Ext";
  src: url("../fonts/lxgw-wenkai-ext-9.woff2?v=dabbc2457f") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+7A4F-840C;
}

@font-face {
  font-family: "LXGW WenKai Ext";
  src: url("../fonts/lxgw-wenkai-ext-10.woff2?v=649018ac1a") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+840D-8DCA;
}

@font-face {
  font-family: "LXGW WenKai Ext";
  src: url("../fonts/lxgw-wenkai-ext-11.woff2?v=95c950ea06") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+8DCB-9788;
}

@font-face {
  font-family: "LXGW WenKai Ext";
  src: url("../fonts/lxgw-wenkai-ext-12.woff2?v=50efb339b5") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+9789-9FFF,U+F900-FA46;
}

@font-face {
  font-family: "LXGW WenKai Ext";
  src: url("../fonts/lxgw-wenkai-ext-13.woff2?v=303823a166") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+FA47-FA6D,U+FA7F,U+FAD4,U+FE10-FE19,U+FE30-FE4F,U+FF01-FFBE,U+FFC2-FFC7,U+FFCA-FFCF,U+FFD2-FFD7,U+FFDA-FFDC,U+FFE0-FFE6,U+FFE8-FFEE;
}

/* ==========================================================================
   雪萤小驿 · 设计系统
   取色参考 siqyin.github.io/wugniu_zyinzozin（主色 #2980b9 / 深蓝 #1a5276）
   气质：柔和圆角、气泡、轻盈过渡（Google 式）
   ========================================================================== */

/* 字体声明（Content / Lyrics / Ext 三层）由 scripts/build_font.py 生成到
   src/styles/fonts.css，构建时内联进本文件。这里不再手写 @font-face。 */

:root {
  /* 蓝色阶 */
  --blue-900: #0f2f47;
  --blue-800: #1a5276;
  --blue-700: #1d6fa5;
  --blue-600: #2980b9;
  --blue-500: #3f97cf;
  --blue-400: #6fb2dc;
  --blue-300: #a3c1d9;
  --blue-200: #c8dae8;
  --blue-100: #e3eef8;
  --blue-50:  #f2f8fd;

  /* 文本 */
  --ink:      #1a2a3a;
  --ink-soft: #3d5871;
  --muted:    #5b7f9e;
  --faint:    #7a99b5;

  /* 面 */
  --surface:  #ffffff;
  --surface-2:#f8fbfe;
  --bg:       #f4f9fd;
  --line:     #dce8f3;
  --line-soft:#eaf2f9;

  --accent:   #3fb6a8;   /* 萤火的一点青绿，仅做点缀 */
  --danger:   #c0392b;

  /* 形状与动效 */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --shadow-1: 0 2px 10px rgba(26, 82, 118, .06);
  --shadow-2: 0 8px 26px rgba(26, 82, 118, .10);
  --shadow-3: 0 18px 50px rgba(15, 47, 71, .18);

  --ease: cubic-bezier(.2, .8, .3, 1);
  --t-fast: .18s var(--ease);
  --t-mid: .32s var(--ease);
  --t-slow: .5s var(--ease);

  /* 逐字回退：Content（首屏用字）→ Lyrics（歌词/检索用字）→ Ext（其余全部汉字）
     三层都带霞鹜文楷字形，浏览器只下载「真的渲染到了」的那一层。 */
  --font: "LXGW WenKai Content", "LXGW WenKai Lyrics", "LXGW WenKai Ext",
          "Noto Sans SC", system-ui, -apple-system, "Segoe UI",
          "PingFang SC", "Microsoft YaHei", sans-serif;
  --maxw: 1180px;
}

* { box-sizing: border-box; }

/* 表单控件默认不继承字体，必须显式声明 —— 否则按钮上的中文会掉回宋体 */
button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--blue-700); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--blue-600); }

img { max-width: 100%; display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

/* 背景光晕：极淡的层次，不用渐变堆砌 -------------------------------- */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 420px;
  background:
    radial-gradient(60% 100% at 22% 0%, rgba(63, 151, 207, .16), transparent 70%),
    radial-gradient(50% 90% at 82% 6%, rgba(63, 182, 168, .10), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ====================== 顶栏 ====================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: saturate(1.6) blur(14px);
  background: rgba(244, 249, 253, .82);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow var(--t-mid), background var(--t-mid);
}
.topbar.is-stuck { box-shadow: var(--shadow-1); background: rgba(255, 255, 255, .9); }

.topbar-in {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 62px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 500;
  color: var(--blue-800);
  letter-spacing: .04em;
  white-space: nowrap;
}
.brand:hover { color: var(--blue-600); }

.brand-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--blue-600);
  box-shadow: 0 0 0 4px rgba(41, 128, 185, .14);
  position: relative;
  flex: none;
}
.brand-dot::after {
  content: "";
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(63, 182, 168, .5);
  animation: firefly 3.4s var(--ease) infinite;
}
@keyframes firefly {
  0%, 100% { transform: scale(.7); opacity: .1; }
  50%      { transform: scale(1.15); opacity: .75; }
}

.nav { display: flex; gap: 4px; margin-left: 10px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  padding: 7px 14px;
  border-radius: var(--r-pill);
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.nav a:hover { background: rgba(41, 128, 185, .09); color: var(--blue-700); }
.nav a:active { transform: scale(.96); }

/* 语言切换按钮（为 简/繁/英/日 预留） */
.lang { position: relative; flex: none; }
.lang-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-pill);
  color: var(--ink-soft);
  font: inherit; font-size: 13.5px;
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.lang-btn:hover { border-color: var(--blue-300); box-shadow: var(--shadow-1); }
.lang-btn:active { transform: scale(.96); }
.lang-btn svg { width: 15px; height: 15px; flex: none; }

.lang-menu {
  position: absolute;
  right: 0; top: calc(100% + 10px);
  min-width: 186px;
  padding: 7px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  opacity: 0;
  transform: translateY(-8px) scale(.96);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity var(--t-mid), transform var(--t-mid);
}
.lang-menu.open { opacity: 1; transform: none; pointer-events: auto; }
.lang-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--r-md);
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.lang-item:hover { background: var(--blue-50); color: var(--blue-700); }
.lang-item .tag {
  font-size: 11px;
  color: var(--faint);
  background: var(--blue-50);
  border-radius: var(--r-pill);
  padding: 1px 8px;
}
.lang-item.is-active { color: var(--blue-700); background: var(--blue-50); }
.lang-item.is-active .tag { background: rgba(41,128,185,.14); color: var(--blue-700); }

/* ====================== 通用区块 ====================== */
main { position: relative; z-index: 1; }

.section { padding: 46px 0 6px; }
.section-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.section-head h2 {
  margin: 0;
  font-size: 21px;
  font-weight: 500;
  color: var(--blue-800);
  letter-spacing: .02em;
}
.section-head .sub { color: var(--faint); font-size: 13.5px; }
.section-head .more {
  margin-left: auto;
  font-size: 13.5px;
  color: var(--muted);
  padding: 5px 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: all var(--t-fast);
}
.section-head .more:hover { color: var(--blue-700); border-color: var(--blue-300); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px;
  border-radius: var(--r-pill);
  background: var(--blue-50);
  color: var(--blue-700);
  font-size: 12.5px;
  border: 1px solid var(--line-soft);
}
.chip.pin { background: rgba(63, 182, 168, .12); color: #1f7d72; border-color: rgba(63,182,168,.3); }

/* ====================== Hero ====================== */
.hero { padding: 52px 0 10px; }
.hero-in {
  display: flex;
  gap: 30px;
  align-items: center;
  flex-wrap: wrap;
  padding: 30px 32px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
}
.avatar {
  width: 108px; height: 108px;
  border-radius: 30px;
  object-fit: cover;
  flex: none;
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-2);
  background: var(--blue-50);
}
.hero-body { flex: 1; min-width: 240px; }
.hero-body h1 {
  margin: 0 0 6px;
  font-size: 30px;
  font-weight: 500;
  color: var(--blue-900);
  letter-spacing: .02em;
}
.hero-bio { margin: 0 0 16px; color: var(--ink-soft); max-width: 60ch; }
.hero-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.stat {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 9px 16px;
  min-width: 92px;
}
.stat b { display: block; font-size: 19px; font-weight: 500; color: var(--blue-800); line-height: 1.3; }
.stat span { font-size: 12.5px; color: var(--muted); }

.hero-links { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 16px; }
.pill-link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--blue-50);
  border: 1px solid var(--line);
  color: var(--blue-700);
  font-size: 13.5px;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.pill-link:hover { background: var(--surface); transform: translateY(-2px); box-shadow: var(--shadow-1); color: var(--blue-600); }
.pill-link.primary { background: var(--blue-600); color: #fff; border-color: var(--blue-600); }
.pill-link.primary:hover { background: var(--blue-700); color: #fff; }

/* 两种「更多」按钮要能一眼区分：
   ghost = 就地展开更多内容；primary.arrow = 跳到该内容的独立页面 */
.pill-link.ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--muted);
  padding: 7px 15px;
  font-size: 13px;
}
.pill-link.ghost:hover { background: var(--surface); color: var(--blue-700); border-color: var(--blue-300); }
.pill-link.ghost svg { width: 14px; height: 14px; }
.pill-link.ghost.more-done { opacity: .55; cursor: default; pointer-events: none; }
.pill-link.arrow { padding: 8px 18px; }
.pill-link.arrow svg { width: 15px; height: 15px; transition: transform var(--t-fast); }
.pill-link.arrow:hover svg { transform: translateX(3px); }

.more-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 22px 0 4px;
  flex-wrap: wrap;
}
.more-goto { margin-top: 14px; }

/* ====================== 卡片网格 ====================== */
.grid { display: grid; gap: 18px; }
.grid.videos { grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); }
.grid.repos  { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid.music  { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }
.grid.albums { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); }

.card-sub {
  font-size: 12.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform var(--t-mid), box-shadow var(--t-mid), border-color var(--t-mid);
  display: flex;
  flex-direction: column;
  position: relative;
  text-align: left;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--line); }
.card:active { transform: translateY(-1px) scale(.995); }

.card-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--blue-50) center/cover no-repeat;
  overflow: hidden;
}
.card-cover.square { aspect-ratio: 1 / 1; }

.card-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.card:hover .card-cover img { transform: scale(1.045); }

.card-cover .badge {
  position: absolute; left: 10px; top: 10px;
  background: rgba(15, 47, 71, .68);
  color: #fff;
  font-size: 11.5px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  backdrop-filter: blur(6px);
}
.card-cover .dur {
  position: absolute; right: 10px; bottom: 10px;
  background: rgba(15, 47, 71, .7);
  color: #fff;
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 7px;
}
.card-cover .play-hint {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(26, 82, 118, .0);
  transition: background var(--t-mid);
}
.card:hover .card-cover .play-hint { background: rgba(26, 82, 118, .22); }
.play-hint .ring {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  display: flex; align-items: center; justify-content: center;
  transform: scale(.72);
  opacity: 0;
  transition: transform var(--t-mid), opacity var(--t-mid);
  box-shadow: var(--shadow-2);
}
.card:hover .play-hint .ring { transform: none; opacity: 1; }
.play-hint svg { width: 20px; height: 20px; fill: var(--blue-700); margin-left: 3px; }

.card-body { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-title {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.card-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--faint);
  margin-top: auto;
}
.card-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--blue-200); }

/* 项目卡片 */
.repo-card { padding: 17px 18px; gap: 10px; }
.repo-card .rname { font-size: 15px; font-weight: 500; color: var(--blue-800); }
.repo-card .rdesc {
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.65;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.repo-card .rmeta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--faint); align-items: center; }
.lang-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--blue-500); display: inline-block; }

/* 音频行 */
.tracks { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.track {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
  text-align: left;
}
.track:hover { transform: translateX(3px); border-color: var(--line); box-shadow: var(--shadow-1); }
.track .idx { font-size: 12.5px; color: var(--blue-300); width: 20px; flex: none; }
.track .tname {
  font-size: 14px; color: var(--ink); flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: flex; align-items: baseline; gap: 7px; min-width: 0;
}
.track .tname em {
  font-style: normal;
  font-size: 12px;
  color: var(--faint);
  flex: none;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.track .tmeta { font-size: 12px; color: var(--faint); flex: none; }

/* 图文列表 */
.posts { display: grid; gap: 10px; }
.post {
  padding: 14px 17px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.post:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }
.post .ptxt { font-size: 14px; color: var(--ink); margin: 0 0 7px; line-height: 1.7; }
.post .pmeta { font-size: 12.5px; color: var(--faint); display: flex; gap: 10px; flex-wrap: wrap; }

/* ====================== 子分组（精选区内） ====================== */
.subsection-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  flex-wrap: wrap;
}
.subsection-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--blue-700);
  display: flex;
  align-items: center;
  gap: 9px;
}
.subsection-head h3::before {
  content: "";
  width: 3px;
  height: 15px;
  border-radius: 2px;
  background: var(--blue-400);
  display: block;
}
.subsection-head .sub { font-size: 13px; color: var(--faint); }
.pin-switch { margin-left: auto; }
.pin-panel { margin-bottom: 30px; }
.pin-empty {
  padding: 26px;
  text-align: center;
  color: var(--faint);
  font-size: 13.5px;
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
.pin-hint {
  display: inline-block;
  margin: 10px 0 0;
  padding: 6px 14px;
  font-size: 12.5px;
  color: var(--faint);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
}

/* ====================== 排序控件 ====================== */
.sortbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}
.seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.seg-btn {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--muted);
  padding: 5px 14px;
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.seg-btn:hover { color: var(--blue-700); background: var(--blue-50); }
.seg-btn:active { transform: scale(.95); }
.seg-btn.on {
  background: var(--blue-600);
  color: #fff;
  box-shadow: 0 2px 8px rgba(41, 128, 185, .28);
}
.dir-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-pill);
  font: inherit;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.dir-btn:hover { border-color: var(--blue-300); color: var(--blue-700); }
.dir-btn:active { transform: scale(.95); }
.dir-btn svg { width: 13px; height: 13px; transition: transform var(--t-mid); }
.dir-btn[data-dir="asc"] svg { transform: rotate(180deg); }

/* 重排时的柔和过渡，避免元素「跳」一下 */
.grid.is-sorting > *, .tracks.is-sorting > * {
  animation: sortFade .36s var(--ease) both;
}
@keyframes sortFade {
  from { opacity: .2; transform: translateY(7px) scale(.992); }
  to   { opacity: 1; transform: none; }
}

/* ====================== 自有播放器（双气泡布局） ======================
   上方大气泡 = 播放器主体（封面+标题+控制条）
   下方小气泡 = 歌词（独立滚动 + 拖拽进度控件） */
.op-bubble {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: #0b1f2e;
  color: #fff;
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
}
.op-lybubble { margin-top: 12px; }
.op-failed { opacity: .7; }

/* 按钮反馈 */
.pill-link.bgm-added {
  background: rgba(63, 182, 168, .15) !important;
  border-color: #3fb6a8 !important;
  color: #3fb6a8 !important;
  pointer-events: none;
}
.bgm-btn.bgm-pulse { animation: bgmPulse 0.6s ease 2; }
@keyframes bgmPulse {
  0%, 100% { transform: scale(1); color: inherit; }
  50% { transform: scale(1.25); color: #3fb6a8; }
}

/* 歌词拖拽控件（右侧细条） */
.op-lybody {
  display: flex;
  gap: 8px;
  padding: 0 16px 14px;
  min-height: 0;
}
.op-lydrag {
  width: 20px;
  flex: none;
  position: relative;
  cursor: ns-resize;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 4px 0;
  touch-action: none;
}
.op-lydrag-track {
  width: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,.18);
  display: block;
  width: 4px;
  height: 100%;
}
.op-lydrag-knob {
  position: absolute;
  left: 50%;
  top: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
  pointer-events: none;
  transition: top .1s linear;
}

/* ====================== 旧版播放器样式（保留兼容） ======================
   目标：播放时看不出底层是哪家平台。音频用原生 audio + 自有界面（歌单海报 + 动态歌词）；
   视频因为官方播放器不支持 postMessage、也没有隐藏品牌的参数，只能在自有外壳里做遮罩。 */
.op, .op-bubble {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #0b1f2e;
  color: #fff;
}
.op-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(30px) saturate(1.3) brightness(.6);
  transform: scale(1.2);
  pointer-events: none;
}
.op-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 31, 46, .55), rgba(8, 22, 34, .88));
  pointer-events: none;
}
/* 播放器本体（上）：封面 + 标题 + 控制条，打开即见，不用滚动 */
.op-player {
  position: relative;
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 22px 26px 16px;
}
.op-art {
  width: 116px;
  height: 116px;
  flex: none;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .42);
  background: rgba(255, 255, 255, .06);
}
.op-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.op-pinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.op-title { margin: 0; font-size: 16.5px; font-weight: 500; line-height: 1.45; }
.op-sub { margin: 0; font-size: 12.5px; opacity: .72; }
.op-pinfo .op-seek { width: 100%; }
.op-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.op-right { min-width: 0; display: flex; flex-direction: column; }

/* 歌词外挂区（下）：独立滚动 */
.op-lywrap {
  position: relative;
  padding: 0 26px 18px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* 歌词区顶部：标题 + 译文开关 + 音质选择 */
.op-lyhead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0 10px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  flex: none;
}
.op-lylabel { font-size: 12.5px; opacity: .62; letter-spacing: .04em; }

/* 音质选择（对应网易云的音质档位） */
.op-q {
  margin-left: auto;
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .18);
}
.op-q-btn {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .68);
  font-family: inherit;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.op-q-btn:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.op-q-btn.on { background: #fff; color: #0b1f2e; font-weight: 500; }
.op-q-btn:disabled { opacity: .35; cursor: default; }

.op-tr-toggle {
  position: relative;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .72);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.op-tr-toggle:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.op-tr-toggle:active { transform: scale(.95); }
/* 开启态：整体变色 + 右下角一个小勾 */
.op-tr-toggle.on {
  background: rgba(63, 182, 168, .22);
  border-color: rgba(63, 182, 168, .75);
  color: #7fe3d4;
}
.op-check {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #3fb6a8;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(.4);
  transition: opacity var(--t-fast), transform var(--t-fast);
  pointer-events: none;
}
.op-tr-toggle.on .op-check { opacity: 1; transform: none; }
.op-check svg {
  width: 9px;
  height: 9px;
  fill: none;
  stroke: #0b1f2e;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* 关闭态：隐藏所有译文行 */
.op.no-tr .op-tr { display: none; }
.op.no-tr .op-line.on .op-txt { font-size: 15.5px; }

.op-lyrics {
  flex: 1;
  height: 220px;
  overflow-y: auto;
  padding: 6px 8px 6px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .3) transparent;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 84%, transparent 100%);
}
.op-lyrics::-webkit-scrollbar { width: 6px; }
.op-lyrics::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .28); border-radius: 3px; }
.op-line {
  padding: 7px 0;
  font-size: 13.5px;
  line-height: 1.65;
  opacity: .4;
  cursor: pointer;
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}
/* 歌词不再单独指定字体族：--font 的第二层就是「歌词用字」那一份，
   歌词里第一层没有的字会自动落到它上面 —— 这就是「一部分汉字套了霞鹜文楷、
   一部分没套」的修法。 */
.op-line:hover { opacity: .75; }
.op-line.on { opacity: 1; transform: translateX(5px); }
.op-line.on .op-txt { font-size: 15.5px; font-weight: 500; }
.op-txt { display: block; }
.op-tr { display: block; font-size: 12.5px; opacity: .68; margin-top: 1px; }
.op-empty { margin: 0; padding: 26px 0; font-size: 13.5px; opacity: .55; }

.op-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.op-btn {
  width: 38px; height: 38px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .26);
  background: rgba(255, 255, 255, .09);
  color: #fff; cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast), opacity var(--t-fast);
}
.op-btn:hover { background: rgba(255, 255, 255, .2); }
.op-btn:active { transform: scale(.93); }
.op-btn:disabled { opacity: .3; cursor: default; }
.op-btn svg { width: 16px; height: 16px; fill: currentColor; }
.op-btn.main { width: 48px; height: 48px; background: #fff; color: #0b1f2e; border-color: #fff; }
.op-btn.main svg { width: 20px; height: 20px; }
.op-time { font-size: 12.5px; opacity: .78; font-variant-numeric: tabular-nums; flex: none; }
.op-seek {
  flex: 1; min-width: 130px; height: 18px;
  display: flex; align-items: center; position: relative; cursor: pointer;
}
.op-track { position: absolute; inset: 6px 0; border-radius: 3px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.op-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: #fff; border-radius: 3px; }
.op-knob {
  position: absolute; left: 0; top: 50%;
  width: 12px; height: 12px; border-radius: 50%; background: #fff;
  transform: translate(-50%, -50%) scale(0);
  transition: transform var(--t-fast);
}
.op-seek:hover .op-knob, .op-seek.dragging .op-knob { transform: translate(-50%, -50%) scale(1); }
.op-vol { width: 82px; flex: none; }

/* 播放失败时贴在播放器底部的一条说明 + 两个入口（界面其它部分照常保留） */
.op-fallback-note {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 15px;
  font-size: 12.5px;
  background: rgba(255, 255, 255, .06);
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-family: var(--font);
}
.op-fallback-note .op-fn-text { flex: 1 1 160px; opacity: .85; }
.op-fn-btn {
  flex: none;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  transition: background .2s;
}
.op-fn-btn:hover { background: rgba(255, 255, 255, .22); }

/* 官方播放器：只在用户主动点「用官方播放器」时以附加块出现，绝不替换自建界面 */
.op-embed { margin-top: 12px; }
.op-embed iframe {
  width: 100%;
  height: 86px;
  border: 0;
  border-radius: var(--r-md);
  display: block;
}

@media (max-width: 760px) {
  .op-player { flex-direction: column; align-items: flex-start; gap: 14px; padding: 16px; }
  .op-art { width: 96px; height: 96px; }
  .op-lywrap { padding: 0 16px 16px; }
  .op-lyrics { height: 160px; }
  .op-q { flex-wrap: wrap; }
}

/* ====================== 音频：左右两个一级浮层 ======================
   左：歌曲面板 —— 竖长窄版，贴在界面左下方（封面在上、信息与控制在下）；
   右：歌词面板 —— 窄而高的白底面板，贴着界面右侧，行数由面板高度决定。
   两者同时出现，左低右高，不再一上一下。 */
:root {
  --lyr-line: 46px;          /* 每行歌词高度 */
  --lyr-rows: 9;             /* no-JS 兜底；实际可见行数由 JS 按面板实测高度决定 */
  --lyr-mid: 4;              /* no-JS 兜底；JS 会按实测行数覆盖，保证当前行落在正中 */
  --lyr-row: #9fb3c6;
  --lyr-cur: #123a5c;
}

/* 歌曲面板：从左下角浮起，竖长横短 */
.modal-mask.audio-mode {
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0 0 18px 18px;
}
/* 歌曲面板打开时：背景**不虚化、不加底色**，遮罩也**不吃事件** ——
   面板只占左右两角，页面要能照常上下滚动看别的内容。
   关闭改用面板头部的 ×（遮罩层不再拦截点击）。 */
.modal-mask.audio-mode.open {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}
.modal-mask.audio-mode .modal { pointer-events: auto; }
.modal-mask.audio-mode .modal {
  width: min(340px, 46vw);
  max-width: none;
  height: min(72vh, 640px);
  max-height: min(72vh, 640px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-lg);
}
.modal-mask.audio-mode .modal-head { flex: none; padding: 16px 16px 10px; gap: 10px; }
.modal-mask.audio-mode .modal-head h3 { font-size: 15px; line-height: 1.5; }
.modal-mask.audio-mode .modal-head .mmeta { margin-top: 3px; }
.modal-mask.audio-mode .modal-stage {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 16px 12px;
}
.modal-mask.audio-mode .modal-foot { flex: none; padding: 10px 16px 14px; }

/* 竖长面板内部：封面 → 歌名/专辑 → 进度 → 控制，全部改竖排 */
.modal-mask.audio-mode .op-player {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 16px 16px 14px;
}
.modal-mask.audio-mode .op-art {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}
.modal-mask.audio-mode .op-pinfo { gap: 10px; }
.modal-mask.audio-mode .op-title { font-size: 15.5px; }
.modal-mask.audio-mode .op-btns { gap: 8px; }
.modal-mask.audio-mode .op-btns .op-seek.op-vol { width: 100%; }
.modal-mask.audio-mode .op-extras { gap: 8px; }
.modal-mask.audio-mode .op-extras .op-q { margin-left: 0; }

/* 歌词面板：贴界面右侧的窄高浮层，不再压在上方弹窗下面 */
.lyr-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: min(430px, 48vw);
  z-index: 210;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  padding: 72px 18px 18px 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-mid), visibility var(--t-mid);
}
.lyr-mask.open { opacity: 1; visibility: visible; }
.lyr-box {
  pointer-events: auto;
  position: relative;
  width: 100%;
  max-width: none;
  display: flex;
  align-items: stretch;
  padding: 14px 6px 14px 20px;
  background: #ffffff;
  border-radius: var(--r-xl);
  box-shadow: 0 14px 40px rgba(15, 47, 71, .22);
  transform: translateY(14px) scale(.985);
  transition: transform var(--t-mid);
}
.lyr-mask.open .lyr-box { transform: none; }
.lyr-clip {
  position: relative;
  flex: 1;
  min-width: 0;
  /* 高度交给 .lyr-box 的 align-items: stretch 撑满（不再按 --lyr-rows 写死）。
     写死高度会让歌词块只占面板上半截、下方空一大片。 */
  overflow: hidden;
}
.lyr-track {
  position: absolute;
  left: 0; right: 0; top: 0;
  transition: transform .42s var(--ease);
  will-change: transform;
}
.lyr-line {
  height: var(--lyr-line);
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  text-align: center;
  padding: 0 6px;
  font-size: 17px;
  line-height: 1.2;
  color: var(--lyr-row);                 /* 未读到 / 已读过：灰色 */
  cursor: pointer;
  transition: color .3s var(--ease), font-size .3s var(--ease), opacity .3s var(--ease);
}
.lyr-line:hover { color: #6f8ba4; }
.lyr-line.on {                          /* 当前行：深蓝、更大、更粗 */
  color: var(--lyr-cur);
  font-size: 24px;
  font-weight: 700;
}
.lyr-txt { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lyr-tr {
  display: none;
  font-size: 13px;
  font-weight: 400;
  opacity: .82;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lyr-box:not(.no-tr) .lyr-line.on .lyr-tr { display: block; }
.lyr-box.no-tr .lyr-line { font-size: 18px; }
.lyr-box.no-tr .lyr-line.on { font-size: 25px; }
.lyr-box .lyr-empty { color: var(--lyr-row); font-size: 16px; text-align: center; padding: 60px 0; }

/* 右侧上下拉环（只有这一个） */
.lyr-grip {
  position: relative;
  width: 24px;
  flex: none;
  cursor: ns-resize;
  touch-action: none;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 5px 0;
}
.lyr-grip-rail { width: 5px; border-radius: 3px; background: #dbe7f2; display: block; height: 100%; }
.lyr-grip-knob {
  position: absolute;
  left: 50%;
  top: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2980b9;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(15, 47, 71, .3);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: top .12s linear;
}
.lyr-grip.dragging .lyr-grip-rail, .lyr-grip:hover .lyr-grip-rail { background: #c3d8ea; }

/* 播放器弹窗里的附加控件行（译文开关 + 音质） */
.op-extras { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.op-extras .op-tr-toggle { margin-left: 0; }
.op-extras .op-q { margin-left: auto; }

@media (max-width: 760px) {
  /* 小屏：两块都收窄，歌词面板仍留在右侧；可见行数不变，行高略降 */
  :root { --lyr-line: 40px; --lyr-rows: 9; --lyr-mid: 4; }
  .modal-mask.audio-mode { padding: 0 0 12px 12px; }
  .modal-mask.audio-mode .modal {
    width: min(300px, 47vw);
    height: min(66vh, 520px);
    max-height: min(66vh, 520px);
  }
  .lyr-mask { width: min(360px, 47vw); padding: 62px 12px 12px 0; }
  .lyr-box { padding: 10px 4px 10px 14px; }
  .lyr-line { font-size: 15px; }
  .lyr-line.on { font-size: 20px; }
  .lyr-box.no-tr .lyr-line { font-size: 16px; }
  .lyr-box.no-tr .lyr-line.on { font-size: 21px; }
}
/* 横屏手机等「矮屏」：减少可见行数，避免面板被挤出可视区 */
@media (max-height: 560px) {
  :root { --lyr-line: 34px; --lyr-rows: 7; --lyr-mid: 3; }
  .modal-mask.audio-mode { padding: 0 0 10px 10px; }
  .modal-mask.audio-mode .modal { height: min(78vh, 460px); max-height: min(78vh, 460px); }
  .lyr-mask { padding: 56px 10px 10px 0; }
  .lyr-line { font-size: 14px; }
  .lyr-line.on { font-size: 18px; }
}

/* ====================== BGM 询问弹窗（进页面顶部弹出） ====================== */
.ask-bgm {
  position: fixed;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 300;                 /* 高于弹窗，保证首次进入就能看到 */
  width: min(560px, calc(100% - 24px));
  padding-top: 12px;
  pointer-events: none;
  transition: transform .38s var(--ease), opacity .3s var(--ease);
  opacity: 0;
}
.ask-bgm.open { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.abk-box {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
}
.abk-text { flex: 1 1 200px; font-size: 14px; color: var(--blue-900); line-height: 1.5; }
.abk-btns { display: flex; gap: 8px; flex: none; }
.abk-btn {
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.abk-btn:hover { background: var(--blue-50); color: var(--blue-700); }
.abk-btn:active { transform: scale(.95); }
.abk-btn.primary {
  background: var(--blue-600, #2980b9);
  border-color: var(--blue-600, #2980b9);
  color: #fff;
}
.abk-btn.primary:hover { background: var(--blue-700, #1a5276); color: #fff; }

/* ====================== 弹窗（气泡播放器） ====================== */
.modal-mask {
  position: fixed; inset: 0;
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
  background: rgba(15, 47, 71, .42);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-mid);
}
.modal-mask.open { opacity: 1; pointer-events: auto; }

.modal {
  width: 100%;
  max-width: 880px;
  max-height: 90vh;
  overflow: auto;
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
  transform: translateY(18px) scale(.94);
  opacity: 0;
  transition: transform var(--t-mid), opacity var(--t-mid);
}
.modal-mask.open .modal { transform: none; opacity: 1; }
.modal.small { max-width: 560px; }

.modal-head {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 20px 22px 14px;
}
.modal-head h3 { margin: 0; font-size: 17px; font-weight: 500; color: var(--blue-900); line-height: 1.55; }
.modal-head .mmeta { font-size: 12.5px; color: var(--faint); margin-top: 5px; }
.modal-close {
  margin-left: auto; flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  transition: background var(--t-fast), transform var(--t-fast), color var(--t-fast);
}
.modal-close:hover { background: var(--blue-50); color: var(--blue-700); transform: rotate(90deg); }

.modal-stage { padding: 0 22px; }
.modal-stage .ratio { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: #071a28; }
.modal-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.modal-stage .audio-frame { width: 100%; height: 86px; border: 0; border-radius: var(--r-md); }
.modal-stage .loading-note { padding: 40px 0; text-align: center; color: var(--faint); font-size: 13.5px; }

.modal-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 16px 22px 20px;
}
.modal-foot .mnote { font-size: 12.5px; color: var(--faint); margin-left: auto; }

/* 顶部进度条（加载反馈） */
.loadbar {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: transparent; z-index: 300; pointer-events: none;
}
.loadbar span {
  display: block; height: 100%; width: 0;
  background: var(--blue-600);
  transition: width .4s var(--ease), opacity .3s;
  opacity: 0;
}
.loadbar.on span { opacity: 1; }

/* 提示条 */
.toast {
  position: fixed;
  left: 50%; bottom: 34px;
  transform: translate(-50%, 16px) scale(.96);
  background: var(--blue-900);
  color: #fff;
  font-size: 13.5px;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-3);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-mid), transform var(--t-mid);
  z-index: 400;
}
.toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* 精选项目栏：没有封面图的文字版条目 */
a.mini.mini-plain { color: inherit; text-decoration: none; }
.mini-plain .mini-title { color: var(--blue-800); }
.mini-plain:hover .mini-title { color: var(--blue-600); }
.mini-desc {
  display: block;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ====================== 精选区三栏 ====================== */
.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 26px;
  align-items: start;
}
.feat-col { min-width: 0; }
.feat-col > .subsection-head { margin-bottom: 13px; }
.feat-col .subsection-head h3 { font-size: 15px; }

.mini-list { display: flex; flex-direction: column; gap: 10px; }

/* 可向下拉的榜单：默认只露 3 条，往下滚可看到前 20 名 */
.mini-list.scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--blue-200) transparent;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent 100%);
}
.mini-list.scroll::-webkit-scrollbar { width: 6px; }
.mini-list.scroll::-webkit-scrollbar-thumb {
  background: var(--blue-200);
  border-radius: 3px;
}
.mini-list.scroll::-webkit-scrollbar-track { background: transparent; }

.mini-hint {
  margin: 9px 0 0;
  font-size: 12px;
  color: var(--faint);
  text-align: center;
}
.mini-more {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--muted);
  padding: 2px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: color var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}
.mini-more:hover { color: var(--blue-700); border-color: var(--blue-300); }

.mini {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 11px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.mini:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-1);
  border-color: var(--line);
}
.mini-thumb {
  width: 88px;
  flex: none;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: var(--blue-50);
}
.mini-thumb.sq { width: 62px; aspect-ratio: 1 / 1; }
.mini-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-body { flex: 1; min-width: 0; }
.mini-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mini-meta { margin-top: 4px; font-size: 12px; color: var(--faint); }
.mini-rank {
  display: inline-block;
  min-width: 16px;
  margin-right: 6px;
  padding: 0 5px;
  border-radius: 5px;
  background: var(--blue-600);
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  text-align: center;
  vertical-align: 1px;
}
.mini-rank.r2 { background: var(--blue-400); }
.mini-rank.r3 { background: var(--blue-300); }

/* 列表页头部 */
.page-head {
  padding: 34px 0 6px;
}
.page-head h1 {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 500;
  color: var(--blue-900);
}
.page-head .sub { color: var(--faint); font-size: 13.5px; }
.crumb { font-size: 13px; color: var(--faint); margin-bottom: 12px; display: block; }
.crumb a { color: var(--muted); }

/* 导航当前项 */
.nav a.on {
  background: rgba(41, 128, 185, .12);
  color: var(--blue-700);
  font-weight: 500;
}

/* 顶部搜索按钮 */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.icon-btn:hover { border-color: var(--blue-300); color: var(--blue-700); }
.icon-btn:active { transform: scale(.94); }
.icon-btn svg { width: 15px; height: 15px; }

/* ====================== 搜索页 ====================== */
.searchbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.search-input {
  flex: 1;
  min-width: 220px;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 14.5px;
  color: var(--ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.search-input::placeholder { color: var(--faint); }
.search-input:focus {
  outline: none;
  border-color: var(--blue-400);
  box-shadow: 0 0 0 4px rgba(41, 128, 185, .12);
}
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.chip-btn {
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.chip-btn:hover { border-color: var(--blue-300); color: var(--blue-700); }
.chip-btn.on { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }
.search-note { font-size: 13.5px; color: var(--faint); margin-bottom: 16px; }
.search-hit em { font-style: normal; color: var(--blue-700); background: rgba(41,128,185,.12); border-radius: 3px; padding: 0 2px; }

/* ====================== 关于页 ====================== */
.about-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  padding: 26px 28px;
  box-shadow: var(--shadow-1);
}
.about-card p { margin: 0 0 12px; color: var(--ink-soft); white-space: pre-wrap; }
.plat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.plat-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 17px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.plat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-1); border-color: var(--line); }
.plat-card .pname { font-size: 14.5px; font-weight: 500; color: var(--blue-800); }
.plat-card .pdesc { font-size: 12.5px; color: var(--faint); }

/* ====================== 筛选与视图切换 ====================== */
.view-switch { margin-left: auto; }

.filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}
.filter-label {
  font-size: 12.5px;
  color: var(--faint);
  margin-right: 2px;
}
.filter-empty {
  padding: 34px 0;
  text-align: center;
  color: var(--faint);
  font-size: 13.5px;
}
.filtered-out { display: none !important; }

/* 时间轴：年份分隔条横跨整行 */
.grid.timeline { display: grid; }
.grid.timeline .year-mark {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 0 2px;
}
.grid.timeline .year-mark:first-child { margin-top: 0; }
.ym-num {
  font-size: 22px;
  font-weight: 500;
  color: var(--blue-700);
  letter-spacing: .04em;
  flex: none;
}
.ym-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--blue-300), var(--line-soft));
}

/* ====================== 统计页 ====================== */
.stat-note {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--faint);
  line-height: 1.75;
}
.stat-note.ok { color: #1f7d72; }

.bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 9px;
}
.bar-year {
  flex: none;
  min-width: 76px;
  font-size: 13px;
  color: var(--muted);
  text-align: right;
}
.bar-track {
  flex: 1;
  height: 12px;
  border-radius: 6px;
  background: var(--blue-50);
  overflow: hidden;
}
.bar-fill {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: var(--blue-500);
  transition: width var(--t-slow);
}
.bar-fill.alt { background: var(--blue-300); }
.bar-num {
  flex: none;
  min-width: 46px;
  font-size: 12.5px;
  color: var(--faint);
}

.stat-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
  margin-top: 34px;
}

/* ====================== 页脚 ====================== */
footer {
  margin-top: 60px;
  padding: 30px 0 40px;
  border-top: 1px solid var(--line-soft);
  color: var(--faint);
  font-size: 13px;
  position: relative;
  z-index: 1;
}
.foot-in { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.foot-status { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.pstat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  font-size: 12px;
}
.pstat i { width: 7px; height: 7px; border-radius: 50%; background: #46b980; display: block; }
.pstat.stale i { background: #e0a12c; }

/* 进入视口的上浮动画 */
.rise { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.rise.in { opacity: 1; transform: none; }

/* 「显示更多」折叠项：柔和展开 */
.is-hidden { display: none !important; }
.revealed { animation: popIn .42s var(--ease) both; }
@keyframes popIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.more-done { font-size: 13px; color: var(--faint); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; }
  .rise { opacity: 1; transform: none; }
}

@media (max-width: 720px) {
  .hero-in { padding: 22px; gap: 20px; }
  .avatar { width: 84px; height: 84px; border-radius: 24px; }
  .hero-body h1 { font-size: 24px; }
  .nav { display: none; }
  .section { padding: 34px 0 4px; }
  .modal-head, .modal-stage, .modal-foot { padding-left: 16px; padding-right: 16px; }
}

/* ====================== BGM：右上角管理按钮与播放单面板 ====================== */
.bgm-btn.off { opacity: .45; }
.bgm-btn.playing svg { color: var(--blue-600); }

.bgm-panel {
  position: fixed;
  right: 18px;
  top: 64px;
  z-index: 190;
  width: 330px;
  max-width: calc(100vw - 36px);
  background: var(--surface);
  border: 0.5px solid var(--border, var(--line));
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  padding: 14px 16px 12px;
  opacity: 0;
  transform: translateY(-10px) scale(.98);
  pointer-events: none;
  transition: opacity var(--t-mid), transform var(--t-mid);
  max-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
}
.bgm-panel.open { opacity: 1; transform: none; pointer-events: auto; }
.bgp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.bgp-title { font-size: 15px; font-weight: 500; color: var(--blue-800); }
.bgp-x {
  margin-left: auto; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  font-size: 17px; line-height: 1; cursor: pointer;
}
.bgp-hint { margin: 0 0 8px; font-size: 12px; color: var(--faint); }
.bgm-list {
  list-style: none; margin: 0 0 10px; padding: 2px; overflow-y: auto; flex: 1;
  scrollbar-width: thin;
}
.bgm-list li {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px; border-radius: var(--r-md);
  background: var(--surface-2); margin-bottom: 6px;
  cursor: default;
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.bgm-list li.on { background: rgba(41, 128, 185, .12); }
.bgm-list li.dragging {
  opacity: .9; transform: scale(1.02);
  box-shadow: var(--shadow-2);
  background: var(--surface);
}
.bgm-handle {
  flex: none; font-size: 14px; color: var(--faint); cursor: grab;
  padding: 0 2px; touch-action: none;
}
.bgm-name {
  flex: 1; min-width: 0; font-size: 13px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bgm-name em { font-style: normal; font-size: 11.5px; color: var(--faint); margin-left: 6px; }
.bgm-del {
  flex: none; width: 22px; height: 22px; border-radius: 50%; border: 0;
  background: transparent; color: var(--faint); font-size: 15px; cursor: pointer;
}
.bgm-del:hover { background: var(--danger, #c0392b); color: #fff; }
.bgm-empty { background: transparent !important; color: var(--faint); font-size: 12.5px; justify-content: center; }

.bgp-bar { border-top: 1px solid var(--line-soft); padding-top: 9px; }
.bgp-now {
  display: block; font-size: 12.5px; color: var(--blue-800); margin-bottom: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bgp-btns { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.op-btn.wide { width: auto; min-width: 52px; padding: 0 10px; border-radius: var(--r-pill); font-size: 11.5px; color: var(--muted); }
.op-btn.wide svg { display: none; }

/* ====================== 分享小卡弹窗 ====================== */
.share-modal {
  position: fixed; inset: 0; z-index: 260;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(15, 47, 71, .5);
  backdrop-filter: blur(5px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-mid);
}
.share-modal.open { opacity: 1; pointer-events: auto; }
/* 分享卡容器：给「二维码加载中」的转圈做定位基准 */
.sm-shot { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
/* 卡片要整体可见：二维码在卡片下半部，若图片拉满宽度、弹窗又得滚动，
   小屏上二维码会落到可视区外，看起来就像「没加载出来」。按视口高度收一下。 */
.sm-shot img { width: auto; max-width: 100%; max-height: 56vh; margin: 0 auto; display: block; border-radius: var(--r-md); }
.sm-load {
  position: absolute;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.sm-load.on { display: flex; }
.sm-spin {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 3px solid #d6e6f2;
  border-top-color: #2980b9;
  animation: sm-spin .8s linear infinite;
}
@keyframes sm-spin { to { transform: rotate(360deg); } }
.sm-box {
  width: 100%; max-width: 440px;
  max-height: 86vh; overflow-y: auto;
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: 16px;
  box-shadow: var(--shadow-3);
  text-align: center;
}
.sm-head { display: flex; align-items: center; margin-bottom: 10px; }
.sm-head span { font-size: 15px; font-weight: 500; color: var(--blue-800); }
.sm-x {
  margin-left: auto; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.sm-box.wide { max-width: 660px; }
.sm-box img {
  width: 100%; border-radius: var(--r-md); display: block;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: default;
}
.sm-hint { margin: 10px 0 12px; font-size: 12.5px; color: var(--faint); line-height: 1.6; }
/* 备用分享：原链接一行，点一下自动复制 */
.sm-link {
  display: block; width: 100%; margin: 2px 0 10px; padding: 10px 12px;
  border: 1px solid var(--line, #d7e3ee); border-radius: var(--r-md, 12px);
  background: #fff; color: #2c6c9e; font: inherit; font-size: 12px;
  text-align: center; cursor: pointer; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
}
.sm-link:hover { background: #f2f8fd; }
.sm-link:active { transform: scale(.99); }

/* 播放器弹窗：内容超高时自己滚（滑轮在弹窗内只滚弹窗，不再带着整页跑） */
.op-bubble { max-height: calc(100vh - 118px); overflow-y: auto; overscroll-behavior: contain; }
.op-bubble::-webkit-scrollbar { width: 6px; }
.op-bubble::-webkit-scrollbar-thumb { background: rgba(255,255,255,.26); border-radius: 3px; }
/* 歌词弹窗：滑轮滚动歌词（见 app.js 的 wheel 处理） */
.lyr-clip { overscroll-behavior: contain; }
/* 歌词译文行：与「字音」并存，当前行显示 */
.lyr-tt { display: none; font-size: 13px; font-weight: 400; opacity: .78; max-width: 100%;
          overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lyr-box:not(.no-tt) .lyr-line.on .lyr-tt { display: block; }
/* 精选栏：下拉提示改成可点击的展开按钮 */
.more-row.more-pull { margin-top: 10px; }
.more-row.more-pull .pill-link { font-size: 12.5px; }