/* 合并样式（build-performance.py 生成，不要手改）：fonts.css styles.css motion.css art-direction.css island-nav.css */
/* ===== fonts.css ===== */
/* 网站字体（Claude, 2026-09-27；2026-10-01 改成按页拆分）
   标题：思源宋体 Noto Serif SC（800 字重实例）；正文：霞鹜文楷 LXGW WenKai。均为 SIL OFL 1.1，许可见 assets/fonts/*-OFL.txt。
   这里是所有页面共用的 -shell（全站常用字）。每页另外用到的字（-p-页名）和故事正文的字（-r）写在各页 <head> 里；
   给访客文字兜底的 -f / -x 小块在 fonts-extra.css（live.js 加载，不挡首屏）。见 .local-work/build-fonts.py。 */
@font-face{font-family:"YNC Song";src:url("assets/fonts/ync-song-800-shell.woff2?v=2d45811a09") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+20-7E,U+B7,U+D7,U+2014,U+2018-2019,U+201C-201D,U+2026,U+2191-2192,U+2197,U+2713,U+3000-3002,U+3008-3011,U+4E00,U+4E03,U+4E09-4E0B,U+4E0D-4E0E,U+4E16,U+4E2A,U+4E2D,U+4E3A,U+4E4B,U+4E86,U+4E8B-4E8C,U+4E8E,U+4EBA,U+4ECA-4ECB,U+4EE5,U+4EFB,U+4F1A,U+4F4D,U+4F5C,U+505C,U+5165,U+5173,U+5185,U+51C6,U+51CF,U+5206,U+5217,U+521B,U+5230,U+5236,U+524D,U+52A8,U+5343,U+5355,U+5357,U+5377,U+53BB,U+53D1,U+53EA,U+53EF,U+53F7,U+542C,U+542F,U+5468,U+54C1,U+54E5,U+5668,U+56DE,U+56FE,U+5728,U+573A,U+5899,U+590D,U+591C,U+5927,U+5929,U+5931,U+5976,U+59B9,U+5B50,U+5B8C,U+5B9A,U+5BFC,U+5C0F,U+5C11,U+5C31,U+5C4F,U+5C55,U+5DE5,U+5DF1-5DF2,U+5E55,U+5E74,U+5F00,U+5F39,U+5F55,U+5F71,U+5FD7,U+5FEB,U+6001,U+604B,U+60C5,U+60F3,U+610F,U+6211,U+623F,U+624B,U+6253,U+627E,U+628A,U+6295,U+62A2,U+62D6,U+6307,U+6377,U+6392,U+63D2,U+64AD,U+6536,U+653E,U+6545,U+6548,U+6574,U+65B0,U+65E5,U+65E7,U+65E9,U+65F6,U+661F,U+6628,U+662F,U+663E,U+665A,U+6682,U+670D,U+672A,U+672C,U+6761,U+6765,U+679C,U+67E5,U+6807,U+6843,U+68A6,U+6B21-6B22,U+6B47,U+6B4C,U+6B63,U+6C14,U+6D3B,U+6D4F,U+70B9,U+7206,U+7247,U+7269,U+7279,U+7387,U+73B0,U+7528,U+753B,U+7559,U+767B,U+767D,U+7684,U+76EE,U+76F4,U+770B,U+77E5,U+793A,U+7A3F,U+7ACB,U+7AD9,U+7AE0,U+7B2C,U+7B7E,U+7B80,U+7BC7,U+7C3F,U+7CFB,U+7EC7,U+7ED8,U+7EDF,U+7EED,U+7F51,U+7F6E,U+7FA4,U+8054,U+80FD,U+81EA,U+822A,U+82B1,U+8336,U+884C,U+8868,U+89C8,U+8A00,U+8BBE,U+8BE2,U+8BE6,U+8BFA-8BFB,U+8D25,U+8D5B,U+8D77,U+8DDF,U+8F7D,U+8FB9,U+8FC7,U+8FCE,U+8FD1,U+8FD4,U+8FD9,U+8FDB,U+90E8,U+91CC-91CD,U+9488,U+949F,U+95ED,U+95F4,U+9605,U+968F,U+9759,U+9762,U+9875-9876,U+987B,U+9884,U+9970,U+9996,U+FF01,U+FF08-FF09,U+FF0C,U+FF1A-FF1B,U+FF1F,U+FF5E}
@font-face{font-family:"YNC Kai";src:url("assets/fonts/ync-kai-shell.woff2?v=c6ac404e62") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+20-7E,U+B7,U+D7,U+2014,U+2018-2019,U+201C-201D,U+2026,U+2191-2193,U+2197,U+2318,U+25C6,U+25CE,U+2713,U+3000-3002,U+3008-3011,U+4E00,U+4E03,U+4E09-4E0B,U+4E0D-4E0E,U+4E16,U+4E24,U+4E2A,U+4E2D,U+4E3A-4E3B,U+4E48,U+4E4B,U+4E5F,U+4E66,U+4E86,U+4E8B-4E8C,U+4E8E,U+4E91,U+4E94,U+4EBA,U+4ECA-4ECB,U+4ECE,U+4EE5,U+4EEC,U+4EFB,U+4F19-4F1A,U+4F20,U+4F34,U+4F4D,U+4F4F,U+4F53,U+4F5C,U+4F60,U+4FE1,U+505C,U+5149,U+5165,U+5168,U+516C-516D,U+5173,U+5177,U+5185,U+518D,U+5199,U+51C6,U+51CF,U+51E0,U+51FA,U+5206-5207,U+5217,U+521B,U+521D,U+522B,U+5230,U+5236,U+524D,U+52A1,U+52A8,U+52BF,U+52CB,U+52FF,U+5343,U+5355,U+5357,U+5361,U+5377,U+539F,U+53BB,U+53CA,U+53D1,U+53E5,U+53EA,U+53EF,U+53F3,U+53F7,U+5404,U+5408,U+540C-540E,U+5427,U+542C,U+542F,U+5468,U+548C,U+54C1,U+54E5,U+54EA,U+5546,U+5668,U+56DE,U+56FE,U+5728,U+5730,U+573A,U+5740,U+5747,U+574A,U+5757,U+586B,U+5883,U+5899,U+58F0,U+5904,U+590D,U+591A,U+591C,U+5927,U+5929-592A,U+5931,U+5976,U+5979,U+59B9,U+59CB,U+5B50,U+5B57,U+5B8C,U+5B9A,U+5BA1,U+5BB9,U+5BC6,U+5BFC,U+5C0F,U+5C11,U+5C31,U+5C4F,U+5C55,U+5DE5,U+5DF1-5DF2,U+5E10,U+5E26,U+5E38,U+5E55,U+5E74,U+5F00,U+5F20,U+5F39,U+5F53,U+5F55,U+5F71,U+5F80,U+5F97,U+5FC3,U+5FD7,U+5FEB,U+6001,U+600E,U+604B,U+606F,U+60C5,U+60F3,U+610F,U+613F,U+6211,U+6216,U+623F-6240,U+624B,U+624D,U+6253,U+627E,U+628A,U+6295,U+62A2,U+62BD,U+62D6,U+62DF,U+62E9,U+6307,U+6309,U+6311,U+6362,U+6377,U+6388-6389,U+6392,U+63A8,U+63D0,U+63D2,U+641C,U+64AD,U+6536,U+653E,U+6545,U+6548,U+6574,U+65B0,U+65B9,U+65E0,U+65E5,U+65E7,U+65E9,U+65F6,U+661F,U+6628,U+662F,U+663E,U+665A,U+6682,U+66F4,U+6709,U+670D,U+672A,U+672C,U+672F,U+673A,U+6742-6743,U+6761,U+6765,U+677F,U+679C,U+67E5,U+6807,U+6838,U+683C,U+6843,U+68A6,U+68C0,U+6A71,U+6B21-6B22,U+6B47,U+6B4C,U+6B63,U+6C14,U+6CA1,U+6CC9,U+6D3B,U+6D4F,U+6E90,U+70B9,U+7206,U+7247-7248,U+7269,U+7279,U+7387,U+73B0,U+7528,U+7533,U+7535,U+753B,U+754C,U+7559,U+767B,U+767D,U+7684,U+76EE,U+76F4,U+76F8,U+770B,U+771F,U+77E5,U+7801,U+793A,U+7A3F,U+7A7A,U+7A97,U+7ACB,U+7AD9,U+7AE0,U+7B2C,U+7B49,U+7B5B,U+7B7E,U+7B80,U+7BC7,U+7C3F,U+7C7B,U+7CFB,U+7D22,U+7EA6,U+7EC7,U+7ECF,U+7ED3,U+7ED8,U+7EDC,U+7EDF,U+7EE7,U+7EED,U+7F51,U+7F6E,U+7F8E,U+7FA4,U+7FFB,U+8005,U+8054,U+80FD,U+81EA,U+81F3,U+822A,U+82B1,U+8336,U+8350,U+865A,U+884C,U+8868,U+8981,U+89C8-89C9,U+89D2,U+8A00,U+8BA1,U+8BA4,U+8BBE-8BBF,U+8BC1,U+8BC6,U+8BCD,U+8BD5,U+8BDD,U+8BE2,U+8BE6,U+8BF7,U+8BFA-8BFB,U+8C03,U+8D25,U+8D5B,U+8D77,U+8DB3,U+8DDF,U+8DEF,U+8DF3,U+8F6C,U+8F7D,U+8FB9,U+8FC7,U+8FCE,U+8FD1,U+8FD4,U+8FD8-8FD9,U+8FDB,U+8FF9,U+9009,U+901A-901B,U+90A3,U+90E8,U+91CC-91CD,U+91D1,U+9488,U+949F,U+95ED-95EE,U+95F4,U+9601,U+9605,U+968F,U+9694,U+9759,U+9762,U+9875-9876,U+987B,U+9882,U+9884,U+9970,U+9996,U+9A8C,U+9E92,U+9E9F,U+FF01,U+FF08-FF09,U+FF0B-FF0C,U+FF1A-FF1B,U+FF1F,U+FF5E}
/* ===== styles.css ===== */
:root{color-scheme:dark;--bg:#0b1119;--ink:#f4efe8;--muted:#b4c0c9;--gold:#e2c398;--pink:#f0b6c9;--border:#cddce326;--serif:"YNC Song","Noto Serif SC","Source Han Serif SC","Songti SC","SimSun",serif;--sans:"YNC Kai","LXGW WenKai","KaiTi","STKaiti",serif;font-family:var(--sans);font-size:16px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--ink);line-height:1.8}a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}a:focus-visible{outline:2px solid var(--gold);outline-offset:6px}img{max-width:100%;display:block;height:auto}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:400}h1,h2{font-family:var(--serif)}.skip-link{position:absolute;left:20px;top:-80px;padding:12px;background:var(--ink);color:var(--bg);z-index:100}.skip-link:focus{top:12px}.site-header{display:flex;align-items:center;gap:40px;justify-content:space-between;padding:15px 5.2%;min-height:96px;border-bottom:1px solid var(--border);position:relative;z-index:10;background:#0a101ab0}.brand{display:flex;align-items:center;gap:15px}.brand img{width:108px;height:65px;object-fit:contain}.brand>span{font:22px/1.4 var(--serif);letter-spacing:.14em;border-left:1px solid #efd1b833;padding-left:17px}.brand small{display:block;font:12px/1.9 var(--sans);color:var(--muted);letter-spacing:.08em}.site-header nav{display:flex;gap:38px;font-size:14px}.site-header nav a{position:relative;padding:10px 0;color:#cbd3d9}.site-header nav a:hover,.site-header nav a[aria-current]{color:var(--gold)}.site-header nav a[aria-current]:after{content:"";position:absolute;bottom:1px;left:50%;width:4px;height:4px;transform:rotate(45deg);background:var(--gold)}.header-note{font:14px var(--serif);letter-spacing:.18em;color:#d2bcab}.eyebrow{font-size:12px;letter-spacing:.2em;color:var(--gold);display:flex;align-items:center;gap:12px}.eyebrow>span{font-size:22px}.portal-scene{position:relative;isolation:isolate;min-height:calc(100svh - 96px);padding:45px 7.7% 72px;display:flex;align-items:center;overflow:hidden}.scene-art{position:absolute;z-index:-3;right:0;top:0;bottom:0;width:67%;overflow:hidden;background:#172330}.scene-art img{width:100%;height:100%;object-fit:cover;object-position:50% 32%}.scene-art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0b1119 0%,#0b1119c9 13%,#0b111941 38%,#0b111900 64%),linear-gradient(0deg,#0b1119 0%,transparent 28%,#0b111915 85%,#0b11192b)}.scene-mist{position:absolute;z-index:-2;inset:0;pointer-events:none;background:radial-gradient(ellipse at 14% 92%,#2477801c,transparent 45%),radial-gradient(ellipse at 45% 19%,#9a7a901c,transparent 36%)}.scene-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.24;background-image:radial-gradient(circle at 18% 28%,#f4d6b8 0 1px,transparent 2px),radial-gradient(circle at 65% 80%,#f4d6b8 0 1px,transparent 2px),radial-gradient(circle at 90% 36%,#f4d6b8 0 1px,transparent 2px);background-size:270px 240px,390px 370px,510px 360px;animation:glow 7s ease-in-out infinite alternate}.portal-content{width:min(550px,47%);position:relative}.portal-content h1{font-size:clamp(50px,4.6vw,77px);line-height:1.35;letter-spacing:.06em;margin-top:17px;text-shadow:0 3px 35px #0005}.portal-content h1 span{color:var(--pink)}.portal-intro{font-size:16px;color:#c4cdd4;line-height:1.95;margin-top:20px;letter-spacing:.06em}.portal-divider{display:flex;align-items:center;gap:14px;margin:25px 0 22px;color:#d7b89488;font-size:13px}.portal-divider span{height:1px;background:linear-gradient(90deg,#d7b89466,transparent);flex:1}.portal-divider span:first-child{background:linear-gradient(90deg,transparent,#d7b89466)}.identity-portals{display:grid;gap:12px}.identity-portal{position:relative;display:flex;align-items:center;gap:21px;min-height:110px;padding:17px 22px;border:1px solid #d8b78f4d;background:linear-gradient(105deg,#112332ec,#142531b8);backdrop-filter:blur(9px);transition:transform .25s,border-color .25s,background .25s}.identity-portal:before,.identity-portal:after{content:"";position:absolute;width:8px;height:8px;border-color:var(--gold);border-style:solid;opacity:.6}.identity-portal:before{left:-1px;top:-1px;border-width:1px 0 0 1px}.identity-portal:after{right:-1px;bottom:-1px;border-width:0 1px 1px 0}.identity-portal:hover{transform:translateX(5px);border-color:#e8c08bcc;background:#173242ed}.singer-portal{border-color:#d197b055;background:linear-gradient(105deg,#312631db,#22202dc2)}.singer-portal:hover{border-color:#e0aac0d9;background:#3a2b38e8}.portal-number{font:24px var(--serif);color:#d6b78d9c;border-right:1px solid #d6b78d44;padding-right:18px}.singer-portal .portal-number{color:#e4b0c2aa;border-color:#e4b0c23a}.portal-person{display:flex;flex-direction:column;gap:2px;flex:1}.portal-person small{font-size:12px;letter-spacing:.14em;color:var(--gold)}.singer-portal .portal-person small{color:var(--pink)}.portal-person strong{font:29px/1.4 var(--serif);letter-spacing:.06em}.portal-person em{font:12px "Microsoft YaHei",sans-serif;color:var(--muted);margin-left:7px;letter-spacing:0}.portal-person>span{font-size:12px;color:#b9c8d1}.enter{display:flex;align-items:center;gap:10px;font-size:12px;white-space:nowrap;color:#d8c2a6}.enter b{font-weight:400;font-size:20px}.library-entry{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:21px;font-size:12px;color:#b5c2cb}.library-entry>span:last-child{font-size:14px;color:var(--gold)}.library-entry:hover{color:var(--pink)}.library-entry b{font-weight:400;margin-left:10px}.scene-caption{position:absolute;right:4.5%;top:10%;writing-mode:vertical-rl;display:flex;gap:18px;letter-spacing:.3em;font:16px var(--serif);text-shadow:0 1px 8px #000}.scene-caption small{font:12px "Microsoft YaHei",sans-serif;color:#d9c8cd;letter-spacing:.1em}.scene-floor{position:absolute;bottom:20px;left:7.7%;right:5.2%;display:flex;justify-content:space-between;gap:20px;color:#adc0c8;font-size:12px;letter-spacing:.12em}.site-footer{border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:20px;padding:18px 5.2%;font-size:12px;color:#a0b2be}.site-footer a:hover{color:var(--gold)}
.page-shell{width:min(1180px,calc(100% - 112px));margin:auto}.breadcrumb{display:flex;align-items:center;gap:13px;font-size:13px;color:var(--muted);padding:27px 0}.breadcrumb a{color:var(--gold)}.profile-hero{display:grid;grid-template-columns:1.3fr .7fr;align-items:center;gap:70px;padding:38px 0 45px;border-bottom:1px solid var(--border)}.profile-hero h1{font-size:64px;line-height:1.4;letter-spacing:.08em;margin-top:10px}.profile-hero h1 small{font-family:var(--sans);font-size:17px;letter-spacing:.03em;margin-left:16px;color:var(--muted)}.profile-motto{font:29px/1.7 var(--serif);margin-top:19px;color:var(--gold)}.profile-lead{font-size:16px;color:var(--muted);line-height:1.95;margin-top:19px;max-width:610px}.profile-mark{border:1px solid #cfb18933;padding:35px 30px;text-align:center;background:radial-gradient(ellipse,#163245aa,transparent 75%);position:relative}.profile-mark:before{content:"";position:absolute;inset:8px;border:1px solid #cfb18922;pointer-events:none}.profile-mark .mark-character{font:110px/1.1 var(--serif);color:#e5ceb3;text-shadow:0 0 45px #8db7d14d}.profile-mark p{font:14px var(--serif);letter-spacing:.3em;margin-top:22px;color:var(--gold)}.profile-mark small{display:block;font-size:12px;color:var(--muted);margin-top:14px}.profile-layout{display:grid;grid-template-columns:190px minmax(0,1fr);gap:64px;padding:43px 0 80px}.profile-nav{align-self:start;position:sticky;top:28px;display:grid;gap:5px;font-size:14px}.profile-nav>a{padding:9px 0;border-bottom:1px solid #a6bdcc19;color:var(--muted)}.profile-nav>a:hover{color:var(--gold)}.profile-nav>span{font-size:12px;color:var(--gold);letter-spacing:.12em;margin-bottom:10px}.prose-section{padding:4px 0 40px;margin-bottom:30px;border-bottom:1px solid var(--border);scroll-margin-top:28px}.prose-section:last-child{border:0;margin:0;padding-bottom:0}.prose-section h2{font-size:32px;color:#e5cfb4;letter-spacing:.06em;margin-bottom:21px}.prose-section p{font-size:16px;line-height:2.05;color:#c4ced6;margin-top:17px}.prose-section p:first-of-type{margin-top:0}.facts{display:grid;grid-template-columns:1fr 1fr;gap:22px 30px}.facts>div{border-left:1px solid #bea58366;padding-left:18px}.facts dt{font-size:12px;color:#a4b8c5;letter-spacing:.08em}.facts dd{font-size:16px;margin:5px 0 0;color:var(--ink)}.facts dd small{display:block;font-size:12px;color:var(--muted)}.interest-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}.interest-tags span{padding:5px 12px;border:1px solid var(--border);font-size:14px;color:#c5d5e0;background:#15263455}.prose-quote{margin:23px 0;padding:20px 25px;border-left:2px solid var(--gold);background:#152a3577;font:23px/1.8 var(--serif);color:#eddac1}.values-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px 32px}.values-grid h3{font-size:17px;color:var(--pink);margin-bottom:7px}.values-grid p{font-size:16px}.reading-list{margin:0;padding-left:22px;color:#c4ced6}.reading-list li{padding-left:5px;margin-bottom:14px;line-height:2;font-size:16px}.event-box{display:flex;align-items:center;gap:25px}.event-box img{width:190px;flex-shrink:0}.event-box p{flex:1}.source-note{font-size:12px!important;color:#a1b4c2!important;margin-top:26px!important}.source-note a{text-decoration:underline;text-underline-offset:4px}.profile-end{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--border);padding-top:27px;margin-top:25px;font-size:14px;color:var(--gold)}.performer-hero{grid-template-columns:1fr 1fr;gap:65px}.portrait-frame{height:530px;overflow:hidden;position:relative;border:1px solid #d3abaf55}.portrait-frame:before{content:"";position:absolute;inset:9px;border:1px solid #f5d4bf55;pointer-events:none;z-index:1}.portrait-frame img{height:100%;width:100%;object-fit:cover;object-position:center 20%}.performer-intro{padding:55px 0 75px;display:grid;grid-template-columns:1fr 1fr;gap:60px}.performer-intro h2{font-size:32px;color:var(--gold);margin-bottom:18px}.performer-intro p{font-size:16px;color:var(--muted);line-height:2.1}.performer-intro .soft-note{margin-top:20px;font-size:14px}.button{display:inline-flex;align-items:center;justify-content:center;gap:15px;padding:12px 23px;border:1px solid #d6b08088;background:#283949;min-height:50px;color:#f1d8b3;font-size:15px;margin-top:26px;transition:background .2s}.button:hover{background:#374d5f}.button.rose{border-color:#d8a0b7;background:#4e3a33;color:#ffe0ec}.button.rose:hover{background:#6d5147}.quiet-link{display:inline-flex;align-items:center;gap:10px;color:var(--gold);font-size:14px;margin-top:24px}.library-head{padding:38px 0 30px}.library-head h1{font-size:57px;letter-spacing:.1em;line-height:1.4;margin-top:12px}.library-head>p:last-child{font-size:16px;color:var(--muted);margin-top:20px}.library-nav{display:flex;gap:30px;padding:17px 0;border-block:1px solid var(--border);margin-bottom:42px;font-size:14px;color:var(--gold)}.collection-section{padding-bottom:60px;scroll-margin-top:30px}.collection-heading{display:flex;align-items:center;gap:15px;margin-bottom:27px}.collection-heading small{font-size:12px;color:var(--gold);letter-spacing:.1em}.collection-heading h2{font-size:32px}.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px 25px}.work-card{border-bottom:1px solid var(--border);padding-bottom:22px}.work-card img{width:100%;aspect-ratio:16/9;object-fit:cover}.work-meta{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--gold);margin-top:14px}.work-card h3{font:24px/1.6 var(--serif);margin-top:8px}.work-card p{font-size:14px;color:var(--muted);margin-top:6px}.work-card>a{font-size:14px;color:var(--pink);display:inline-block;margin-top:16px}.story-list{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.story-card{padding:28px;border:1px solid var(--border);background:linear-gradient(145deg,#26333a80,#171c2880);display:flex;flex-direction:column}.story-card>span{font:44px/1.4 var(--serif);color:var(--gold);opacity:.7}.story-card small{font-size:12px;color:var(--muted);margin-top:13px}.story-card h3{font:27px/1.6 var(--serif);margin-top:8px}.story-card p{font-size:14px;color:var(--muted);margin-top:9px;flex:1}.story-card a{font-size:14px;color:var(--gold);margin-top:24px}.library-bottom{border-top:1px solid var(--border);padding:27px 0 50px;display:flex;gap:30px;justify-content:space-between;color:var(--gold);font-size:14px}.inner-page{background:radial-gradient(ellipse at 100% 0,#523c3433,transparent 50%),radial-gradient(ellipse at 0 45%,#19354a44,transparent 45%),var(--bg)}
@keyframes glow{from{opacity:.15}to{opacity:.38}}
@media(min-width:1700px){.portal-scene{padding-block:65px 95px}.portal-content{width:590px}.portal-content h1{font-size:84px}.identity-portal{min-height:125px}.scene-art{width:66%}}
@media(max-width:1150px){.site-header{padding-inline:4%;gap:26px}.header-note{display:none}.portal-scene{padding:42px 5% 66px}.portal-content{width:51%}.portal-content h1{font-size:62px}.identity-portal{padding:17px;gap:13px}.portal-number{padding-right:12px}.portal-person strong{font-size:26px}.enter>span{display:none}.scene-art{width:69%}.scene-art:after{background:linear-gradient(90deg,#0b1119 0%,#0b1119be 20%,transparent 70%),linear-gradient(0deg,#0b1119,transparent 25%)}.scene-caption{right:3%;top:10%}.scene-floor{left:5%;right:4%}.page-shell{width:calc(100% - 70px)}.profile-layout{grid-template-columns:145px minmax(0,1fr);gap:38px}.profile-hero{gap:38px}.work-grid{gap:30px 20px}}
@media(max-width:760px){html{scroll-padding-top:24px}.site-header{min-height:78px;padding:10px 20px;gap:20px}.brand{gap:8px}.brand img{width:77px;height:50px}.brand>span{font-size:18px;padding-left:11px;letter-spacing:.05em}.brand small{font-size:12px;letter-spacing:0}.site-header nav{gap:20px;font-size:13px}.portal-scene{display:block;min-height:auto;padding:330px 24px 67px}.scene-art{top:0;bottom:auto;width:100%;height:700px}.scene-art img{object-position:50% 17%;height:100%;width:100%}.scene-art:after{background:linear-gradient(0deg,#0b1119 1%,#0b1119f5 16%,#0b1119bf 34%,#0b111919 72%,#0b11192e)}.portal-content{width:100%;max-width:540px;margin:auto}.portal-content h1{font-size:49px;line-height:1.3;margin-top:12px}.portal-intro{margin-top:18px;font-size:16px}.portal-divider{margin:23px 0 19px}.identity-portal{padding:17px 16px;min-height:110px}.portal-person strong{font-size:29px}.enter>span{display:inline}.scene-caption{top:26px;right:20px;font-size:14px}.scene-caption small{display:none}.scene-floor{left:24px;right:24px;bottom:19px;font-size:12px;letter-spacing:.04em}.scene-floor>span:first-child{display:none}.scene-floor>span:last-child{margin:auto}.library-entry{gap:12px;flex-wrap:wrap}.site-footer{padding:20px 24px;flex-wrap:wrap;gap:12px 20px}.site-footer>span:nth-child(2){display:none}.site-footer>a{margin-left:auto}.page-shell{width:calc(100% - 44px)}.breadcrumb{padding:22px 0;font-size:12px}.profile-hero{grid-template-columns:1fr;padding:22px 0 32px;gap:26px}.profile-hero h1{font-size:50px}.profile-hero h1 small{font-size:15px;margin-left:8px}.profile-motto{font-size:26px;margin-top:13px}.profile-mark{display:none}.profile-layout{display:block;padding:30px 0 45px}.profile-nav{position:static;display:flex;flex-wrap:wrap;gap:10px 22px;padding-bottom:22px;margin-bottom:25px;border-bottom:1px solid var(--border)}.profile-nav>span{display:none}.profile-nav>a{padding:0;border:0}.prose-section{padding-bottom:30px;margin-bottom:26px}.prose-section h2{font-size:29px;margin-bottom:18px}.facts{gap:21px}.facts>div{padding-left:12px}.values-grid{grid-template-columns:1fr;gap:24px}.prose-quote{font-size:21px;padding:17px 20px}.event-box{display:block}.event-box img{width:185px;margin:0 0 18px}.profile-end{flex-wrap:wrap;gap:18px}.performer-hero{grid-template-columns:1fr}.portrait-frame{height:430px;order:-1}.portrait-frame img{object-position:center 22%}.performer-intro{grid-template-columns:1fr;padding:32px 0 48px;gap:33px}.performer-intro h2{font-size:28px}.library-head{padding:23px 0 29px}.library-head h1{font-size:44px}.library-nav{gap:24px;margin-bottom:32px}.work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 17px}.collection-heading h2{font-size:28px}.work-card h3{font-size:23px}.story-list{grid-template-columns:1fr}.story-card{padding:23px}.library-bottom{gap:18px;flex-wrap:wrap}}
@media(max-width:420px){.site-header{padding-inline:15px;gap:12px}.brand img{width:58px;height:45px}.brand>span{font-size:17px}.site-header nav{gap:17px;font-size:12px}.portal-scene{padding-inline:20px;padding-top:300px}.portal-content h1{font-size:45px}.identity-portal{gap:12px;padding-inline:14px}.portal-number{font-size:22px;padding-right:10px}.portal-person strong{font-size:27px}.enter>span{display:none}.portal-person em{margin-left:3px}.work-grid{grid-template-columns:1fr}.library-entry{gap:9px}.facts{grid-template-columns:1fr}.profile-hero h1{font-size:45px}.profile-motto{font-size:24px}.scene-caption{right:15px}.portrait-frame{height:380px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
.portal-person small{font-size:14px;letter-spacing:.08em}.portrait-frame{margin:0}
@media(max-width:760px){.portal-scene{padding-top:208px}.scene-art{height:575px}.portal-content h1{font-size:40px;line-height:1.25;margin-top:9px}.portal-intro{margin-top:12px;font-size:15px}.portal-intro br{display:none}.portal-divider{margin:18px 0 16px}.identity-portal{min-height:106px;padding-block:14px}.portal-person small{font-size:14px}.scene-caption{top:25px}.library-entry{margin-top:19px}}
@media(max-width:420px){.portal-scene{padding-top:196px}.portal-content h1{font-size:40px}.portal-person strong{font-size:27px}.identity-portal{min-height:106px}}

/* 影之声活动归档：沿用本站夜色、金色与原有字体。 */
.site-header nav a{white-space:nowrap}
.activity-heading{display:grid;grid-template-columns:minmax(0,1fr) 285px;align-items:center;gap:48px;padding:28px 0 38px}
.activity-heading h1{font-size:52px;letter-spacing:.06em;line-height:1.5;margin-top:10px}
.activity-heading img{width:285px;filter:drop-shadow(0 6px 24px #e2c39814)}
.activity-intro{color:var(--muted);font-size:18px;margin-top:12px}
.archive-meta{font-size:14px;color:var(--gold);margin-top:20px;display:flex;gap:12px 24px;flex-wrap:wrap}
.archive-meta span{color:var(--muted)}
.episode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.episode-card{padding:24px;border:1px solid var(--border);background:linear-gradient(145deg,#26333a80,#171c2880);display:flex;flex-direction:column;min-width:0;transition:border-color .2s,background .2s}
.episode-card:hover{border-color:#e2c39899;background:#20333c99}
.episode-card.is-open{border-color:#e2c39877}
.episode-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;color:var(--gold)}
.activity-status{font-size:14px;color:#dde4ea;white-space:nowrap}
.activity-status:before{content:'◆';font-size:9px;margin-right:7px;color:var(--gold)}
.activity-status.is-open{color:#f9d6e1}
.activity-status.is-open:before{color:var(--pink)}
.episode-card h3{font:30px/1.5 var(--serif);margin:22px 0 8px;overflow-wrap:anywhere}
.episode-card>p{font-size:14px;color:var(--muted);flex:1}
.episode-bottom{border-top:1px solid var(--border);margin-top:24px;padding-top:16px;display:flex;flex-direction:column;gap:10px;font-size:14px}
.episode-bottom time{color:var(--muted)}
.episode-bottom>span{display:flex;justify-content:space-between;color:var(--gold)}
.episode-bottom b{font-weight:400}
.activity-section-note{font-size:16px;color:var(--muted);margin:-8px 0 24px}
.activity-detail-head{padding:26px 0 35px;border-bottom:1px solid var(--border)}
.activity-detail-head h1{font-size:26px;letter-spacing:.06em;color:var(--gold);margin-top:18px;line-height:1.5}
.activity-detail-head h1 span{display:block;font-size:54px;color:var(--ink);margin-top:6px;overflow-wrap:anywhere}
.activity-facts{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:23px;font-size:14px;color:var(--muted)}
.activity-facts time{color:var(--ink);margin-left:6px}
.activity-sources{display:flex;gap:16px 28px;flex-wrap:wrap;margin-top:25px;font-size:14px;color:var(--gold)}
.activity-sources a{border-bottom:1px solid #e2c39855;padding-bottom:4px}
.awards-section{padding:38px 0 48px}
.award-list{border-top:1px solid var(--border)}
.award-row{display:grid;grid-template-columns:100px minmax(0,1fr) auto;gap:25px;align-items:center;padding:25px 23px;border-bottom:1px solid var(--border)}
.award-row.first-prize{background:linear-gradient(90deg,#e2c39810,transparent)}
.award-rank{font:24px/1.5 var(--serif);color:var(--gold)}
.award-work h3{font-size:18px;line-height:1.8;overflow-wrap:anywhere}
.award-work p{font-size:16px;color:var(--muted);margin-top:5px}
.award-listen{font-size:14px;color:var(--pink);padding:8px 0;white-space:nowrap}
.award-listen:hover,.activity-sources a:hover{color:var(--ink)}
.activity-footnote{font-size:14px;color:var(--muted);margin-top:24px}
.award-pending{display:flex;align-items:center;gap:32px;padding:32px;border:1px solid var(--border);background:linear-gradient(145deg,#26333a80,#171c2880)}
.award-pending>span{font:70px var(--serif);color:var(--gold);opacity:.65}
.award-pending h3{font:28px/1.6 var(--serif);margin-bottom:9px}
.award-pending p{font-size:16px;color:var(--muted)}
@media(max-width:1000px){.episode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.activity-heading{grid-template-columns:minmax(0,1fr) 220px;gap:25px}.activity-heading h1{font-size:44px}}
@media(max-width:760px){.site-header{flex-wrap:wrap;justify-content:center;gap:3px}.site-header nav{width:100%;justify-content:center;flex-wrap:wrap;gap:0 24px}.site-header nav a{padding-block:9px}.activity-heading{display:block;padding:15px 0 30px}.activity-heading img{width:190px;margin:24px 0 0}.activity-heading h1{font-size:36px}.archive-meta{gap:5px 16px}.activities-page .library-nav{flex-wrap:wrap;gap:12px 24px}.activities-page .breadcrumb{flex-wrap:wrap;gap:6px 10px}.episode-grid{grid-template-columns:1fr;gap:18px}.episode-card{padding:22px}.episode-card h3{margin-top:16px}.activity-detail-head{padding-top:16px}.activity-detail-head h1{font-size:24px}.activity-detail-head h1 span{font-size:40px}.activity-facts{gap:8px 22px}.activity-sources{gap:14px 22px}.award-row{grid-template-columns:1fr;gap:7px;padding:23px 15px}.award-rank{font-size:22px}.award-listen{justify-self:start}.award-pending{gap:18px;padding:24px;align-items:flex-start}.award-pending>span{font-size:48px}.award-pending h3{font-size:25px}}
/* 首页插画动态版（Claude, 2026-09-28）：盖在静态插画上，开始播放后淡入；取景、视差与静态图一致。 */
.scene-art .scene-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 32%;opacity:0;transform:scale(1.035) translate3d(var(--scene-x,0px),var(--scene-y,0px),0);transition:opacity 1.2s ease,transform 1.4s cubic-bezier(.2,.7,.25,1);pointer-events:none}
.scene-art.film-on .scene-film{opacity:1}
/* 动态版开始播放后插画不再跟随鼠标移动：画面本身在动，再叠加视差会显得发抖。 */
.scene-art.film-on img,.scene-art.film-on .scene-film{transform:scale(1.035)}
.motion-paused .scene-art .scene-film{transform:scale(1.035)}
@media(max-width:760px){.scene-art .scene-film{object-position:50% 17%}}
@media(prefers-reduced-motion:reduce){.scene-art .scene-film{display:none}}
/* 首页插画设置与视差（Claude, 2026-10-03，Raymond 要求）：右下角设置里「首页插画」动态 / 静态 / 关闭特效 ×「画」桃花诺 / 千年之恋，
   写在 <html data-homeart="film|still|off" data-homepic="taohua|qnzl">（route-boot.js 在画出来之前定好，interactions.js 管切换和加载）。
   往下滚时（从 .scene-art 的上缘碰到屏幕顶端起，再滚 --plx-run 那么远；上缘的位置 --art-top 由 interactions.js 量好写上，
   手机上插画不在页面最顶上；不用 view() 时间轴是因为外面的 .portal-scene 是 overflow:hidden，会被当成滚动容器）：
   动态——整张画连同动画比页面走得慢一点（--drift-k）；
   静态——用 PSD 分出的层各自错开（--depth-k：远景最慢，人物跟着页面，前景快一点；图在 assets/depth）：
         桃花诺四层 far / scroll（画卷）/ near / front（花瓣蝴蝶），.local-work/build-home-depth.py；
         千年之恋三层 far / near（影妹和鞭子）/ front（玻璃碎片），.local-work/build-home-qnzl-depth.py（2026-10-03 起，原来是整张画慢一点）；
   关闭特效——只有一张不动的画，也不跟着鼠标。
   只在支持滚动驱动动画、没开减少动态效果、没暂停动效时错开；--drift-k / --depth-k 是滚完这一段时挪动这段距离的几成。
   千年之恋是横图，裁成正方形（.local-work/build-home-qnzl.py）后在竖的位置里按 44% 取景。 */
.scene-film-box{position:absolute;inset:0;pointer-events:none;transition:opacity .6s ease}
html:not([data-homeart="film"]) .scene-film-box{opacity:0}
.scene-depth{position:absolute;inset:0;pointer-events:none;opacity:0;transform:translate3d(calc(var(--scene-x,0px)*1.035),calc(var(--scene-y,0px)*1.035),0);transition:opacity .6s ease,transform 1.4s cubic-bezier(.2,.7,.25,1)}
html[data-homeart="still"][data-homepic="taohua"] .scene-art.depth-taohua .scene-depth[data-pic="taohua"],html[data-homeart="still"][data-homepic="qnzl"] .scene-art.depth-qnzl .scene-depth[data-pic="qnzl"]{opacity:1}
.scene-art .scene-depth img{position:absolute;inset:0;transform:scale(1.035);transition:none;will-change:auto}
html[data-homeart="off"] .scene-art img{transform:scale(1.035)}
html[data-homepic="qnzl"] .scene-art img,html[data-homepic="qnzl"] .scene-art .scene-film{object-position:44% 50%}
html[data-homepic="taohua"] .scene-art>img[data-pic="qnzl"],html[data-homepic="qnzl"] .scene-art>img:not([data-pic="qnzl"]){opacity:0}
.scene-art{--drift-k:.12;--plx-run:1000px}
html[data-homeart="still"] .scene-art{--drift-k:.15}
.scene-depth .depth-far{--depth-k:.15}
.scene-depth .depth-scroll{--depth-k:.08}
.scene-depth .depth-near{--depth-k:0}
.scene-depth .depth-front{--depth-k:-.09}
.scene-depth[data-pic="qnzl"] .depth-front{--depth-k:-.12}
@media(max-width:760px){.scene-art{--drift-k:.08;--plx-run:600px}html[data-homeart="still"] .scene-art{--drift-k:.1}.scene-depth .depth-far{--depth-k:.1}.scene-depth .depth-scroll{--depth-k:.055}.scene-depth .depth-front{--depth-k:-.065}.scene-depth[data-pic="qnzl"] .depth-front{--depth-k:-.08}}
@keyframes home-drift{to{translate:0 calc(var(--drift-k)*var(--plx-run))}}
@keyframes depth-shift{to{translate:0 calc(var(--depth-k)*var(--plx-run))}}
@supports(animation-timeline:scroll()){
 html:not([data-homeart="off"]) body:not(.motion-paused) .scene-art>img,html[data-homeart="film"] body:not(.motion-paused) .scene-film-box,html[data-homeart="still"] body:not(.motion-paused) .scene-depth img{animation:home-drift linear both;animation-timeline:scroll(root block);animation-range:var(--art-top,0px) calc(var(--art-top,0px) + var(--plx-run))}
 html[data-homeart="still"] body:not(.motion-paused) .scene-depth img{animation-name:depth-shift}
}
@media(prefers-reduced-motion:reduce){.scene-depth{display:none}}
/* ===== motion.css ===== */
/* Local motion layer. Existing typography and page content are preserved. */
body{isolation:isolate;--motion-gold:226,195,152;--cursor-x:50%;--cursor-y:50%}
.ambient-stage{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict}
.ambient-stage canvas{width:100%;height:100%;display:block}
.ambient-wash{position:absolute;inset:-12%;background:radial-gradient(ellipse at 75% 20%,#9d547022,transparent 50%),radial-gradient(ellipse at 16% 76%,#4c969518,transparent 42%);animation:ambient-breathe 18s ease-in-out infinite alternate}
[data-scene="gold"] .ambient-wash{background:radial-gradient(ellipse at 84% 17%,#b8893c25,transparent 46%),radial-gradient(ellipse at 8% 60%,#9b753219,transparent 47%)}
[data-scene="gold"]{background:#0b1119}
.ambient-beam{position:absolute;top:-60%;right:12%;height:165%;width:36%;transform:rotate(-29deg);background:linear-gradient(90deg,transparent,#cba05208 35%,#f1d2a01b 55%,transparent 77%);filter:blur(32px)}
/* 2026-09-28（Raymond 同意）：背景两道柔光不再漂移。模糊光层一直移动是全站最吃性能的效果，手机上会掉帧；静止后外观几乎不变。想恢复漂移，在上一行末尾加回 animation:beam-drift 23s ease-in-out infinite alternate。 */
.ambient-beam.second{right:62%;opacity:.4;animation-delay:-8s}
.art-cloud{position:absolute;top:1%;left:0;width:360px;height:160px;overflow:hidden;opacity:.17;filter:saturate(.65)}
.art-cloud img{max-width:none;width:356.93px;height:auto}   /* 2026-10-03：改用裁好的 445×176 云纹（原来是同一朵云放在 1920×1080 透明画布上、显示 1540 宽），356.93 = 1540×445/1920，画面大小不变 */
.art-cloud.right{left:auto;right:0;top:auto;bottom:9%;transform:scaleX(-1);opacity:.1}
.art-seal{position:absolute;top:105px;right:-44px;width:380px;height:380px;overflow:hidden;opacity:.09;animation:seal-float 18s ease-in-out infinite alternate}
.art-seal img{position:absolute;max-width:none;width:516.13%;height:auto;left:-38.17%;top:-104.30%}
[data-scene="gold"] .art-seal{right:2%;top:135px;opacity:.13;width:330px;height:330px}
.sakura-layer{position:fixed;inset:0;overflow:hidden;z-index:11;pointer-events:none;contain:strict;mask-image:linear-gradient(90deg,#0005,#000b 45%,#000)}
.sakura-path{position:absolute;top:-35px;left:var(--petal-x);width:var(--petal-size);height:var(--petal-size);animation:petal-journey var(--petal-time) linear var(--petal-delay) infinite;opacity:var(--petal-opacity)}
.sakura-path .sakura{position:relative!important;top:auto!important;width:100%;height:70%;margin:0;background:linear-gradient(120deg,#ffd0dea8,#e7afa1a6);border-radius:14px 2px;animation:sway-3 4s ease-in-out infinite alternate;box-shadow:0 0 7px #dfb2a722}
.sakura-path:nth-child(4n){filter:blur(1.2px)}
.sakura-path:nth-child(3n) .sakura{animation-name:sway-6}
.portal-content,.scene-caption,.scene-floor{z-index:2}
.scene-mist{inset:-8%;animation:mist-drift 22s ease-in-out infinite alternate;background:radial-gradient(ellipse at 6% 91%,#539f9b22,transparent 46%),radial-gradient(ellipse at 68% 71%,#dcd5df1b,transparent 38%)}
.scene-art img{transform:scale(1.035) translate3d(var(--scene-x,0px),var(--scene-y,0px),0);transition:transform 1.4s cubic-bezier(.2,.7,.25,1);will-change:transform}
.scene-art:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 -110px 100px -75px #0b1119}
.portrait-frame{box-shadow:0 16px 70px #b87d9514}
.portrait-frame img{transform:scale(1.035) translate3d(var(--scene-x,0px),var(--scene-y,0px),0);transition:transform 1.4s ease-out}
.site-header{backdrop-filter:blur(14px)}
.site-header nav a:before{content:"";position:absolute;bottom:1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);transform:scaleX(0);transition:transform .28s}
.site-header nav a:hover:before,.site-header nav a:focus-visible:before{transform:scaleX(1)}
.site-header nav a[aria-current]{text-shadow:0 0 18px #e2c39860}
.identity-portal,.button,.episode-card,.story-card,.work-card,.award-row{--cursor-x:50%;--cursor-y:50%;transition:transform .35s cubic-bezier(.2,.7,.25,1),border-color .35s,box-shadow .35s,background-color .35s}
.identity-portal,.episode-card,.story-card{background-image:radial-gradient(350px circle at var(--cursor-x) var(--cursor-y),#e2c3980b,transparent 70%),linear-gradient(125deg,#142432eb,#171e2bc9)}
.singer-portal{background-image:radial-gradient(300px circle at var(--cursor-x) var(--cursor-y),#eabccb18,transparent 70%),linear-gradient(105deg,#312631e8,#22202dde)}
.identity-portal:hover,.identity-portal:focus-visible{box-shadow:0 0 28px #e2c39813,inset 0 0 28px #e2c39808}
.identity-portal:focus-visible,.button:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
.identity-portal .enter b,.library-entry b,.button>span,.quiet-link>span,.episode-bottom b{display:inline-block;transition:transform .3s}
.identity-portal:hover .enter b,.identity-portal:focus-visible .enter b,.button:hover>span,.button:focus-visible>span,.quiet-link:hover>span,.episode-card:hover .episode-bottom b{transform:translateX(5px)}
.library-entry:hover b{transform:translate(3px,-3px)}
.button{position:relative;overflow:hidden;box-shadow:0 4px 22px #0002}
.button:after{content:"";position:absolute;inset:-100%;pointer-events:none;background:linear-gradient(110deg,transparent 42%,#fff2 50%,transparent 58%);transform:translateX(-80%);transition:transform .65s}
.button:hover:after,.button:focus-visible:after{transform:translateX(80%)}
.button:hover,.button:focus-visible{box-shadow:0 0 28px #e2c39824;transform:translateY(-2px)}
.button.rose:hover{box-shadow:0 0 28px #f0b6c931}
.library-head{position:relative}
.library-nav{position:sticky;top:0;z-index:8;backdrop-filter:blur(18px);background:#0b1119e3;box-shadow:0 8px 22px #0b11192b}
.library-nav a{position:relative;padding:7px 12px;margin:-7px -12px;transition:background .25s,box-shadow .25s}
.library-nav a.is-active{background:#e2c39812;box-shadow:inset 0 -1px #e2c398}
.profile-nav a.is-active{border-color:#e2c39885;box-shadow:inset 2px 0 #e2c398;padding-left:12px;color:var(--gold)}
.collection-section{scroll-margin-top:96px}
.work-card{padding:0 0 22px;position:relative;background:linear-gradient(180deg,transparent,#101a22a8);overflow:hidden}
.work-card .work-meta,.work-card h3,.work-card p,.work-card>a{margin-left:14px;margin-right:14px}
.work-card:focus-within,.work-card:hover{border-color:#e2c39891;box-shadow:0 15px 42px #0004;transform:translateY(-5px)}
.work-card img{transition:transform .65s cubic-bezier(.2,.7,.25,1),filter .5s}
.work-card:hover img{transform:scale(1.035);filter:brightness(1.08)}
.work-card>a,.story-card>a,.award-listen{padding:7px 12px;border:1px solid #e2c3983d;background:#d8b58208;transition:background .25s,border-color .25s,box-shadow .25s;align-self:flex-start;justify-self:start}
.work-card>a:hover,.story-card>a:hover,.award-listen:hover,.work-card>a:focus-visible,.story-card>a:focus-visible,.award-listen:focus-visible{background:#e2c39819;border-color:#e2c398b0;box-shadow:0 0 20px #e2c39815}
.story-list{perspective:1400px}
.story-card{position:relative;min-height:340px;padding:30px 28px 30px 35px;isolation:isolate;border-color:#a78a5759;background:linear-gradient(90deg,#050a0e 0,#151d24 7px,#b7964f27 10px,#111b25 15px,#14212cbf 42px,#131a24e8);box-shadow:5px 6px 0 -2px #131920,6px 7px 0 -2px #a48a4e40,0 18px 35px #0003;transform-origin:left center}
.story-card:before{content:"";position:absolute;inset:12px 11px 12px 21px;border:1px solid #d7b36b26;z-index:-1;pointer-events:none}
.story-card:after{content:"";position:absolute;left:16px;right:0;bottom:0;height:60px;z-index:-1;opacity:.18;background:url("assets/opt/cloud-footer.webp?v=a264aa071b") center bottom/100% auto no-repeat;pointer-events:none}
.story-card:hover,.story-card:focus-within{transform:translateY(-6px) rotateY(-3deg);border-color:#cfad6b9c;box-shadow:7px 8px 0 -2px #131920,8px 9px 0 -2px #a48a4e70,0 22px 40px #0005}
.story-card>a{margin-top:23px}
.episode-card:hover,.episode-card:focus-visible{transform:translateY(-4px);box-shadow:0 14px 35px #0004}
.award-row:hover,.award-row:focus-within{background-color:#e2c39808}
.prose-section,.performer-intro{position:relative}
.motion-reveal{opacity:1;transform:none}
.motion-reveal.is-waiting{opacity:0;transform:translateY(22px)}
.motion-reveal.is-visible{animation:page-rise .75s cubic-bezier(.2,.7,.25,1) backwards;animation-delay:var(--reveal-delay,0ms)}
body.motion-ready:not(.motion-paused) .portal-content{animation:page-rise .85s cubic-bezier(.2,.7,.25,1) both}
body.motion-ready:not(.motion-paused) .library-head,body.motion-ready:not(.motion-paused) .profile-hero>div:first-child,body.motion-ready:not(.motion-paused) .activity-heading{animation:page-rise .75s ease-out both}
.media-loading{animation:media-shimmer 1.6s ease-in-out infinite;background:#263542!important}
.media-loading img{opacity:0}
.scene-art img,.portrait-frame img{transition:opacity .65s,transform 1.4s cubic-bezier(.2,.7,.25,1)}
.media-fallback{display:flex;align-items:center;justify-content:center;min-height:160px;padding:24px;color:var(--muted);border:1px solid var(--border);font-size:14px}
.load-notice{position:fixed;left:50%;top:18px;transform:translate(-50%,-20px);z-index:50;display:flex;gap:12px;align-items:center;padding:11px 18px;border:1px solid #ffffff33;border-radius:999px;background:linear-gradient(160deg,#ffffff1c,#ffffff06 55%),#2a2320c7;-webkit-backdrop-filter:blur(24px) saturate(145%) brightness(.85);backdrop-filter:blur(24px) saturate(145%) brightness(.85);box-shadow:inset 0 1px 0 #fff2,0 10px 30px #1e120e59;font-size:14px;color:var(--gold);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.load-notice.is-loading{opacity:1;transform:translate(-50%,0)}
.load-notice img{width:45px;height:28px;object-fit:contain}
.load-notice:after{content:"";width:15px;height:15px;border:1px solid #e2c39840;border-top-color:var(--gold);border-radius:50%;animation:loading-turn 1s linear infinite}
.reading-progress{position:fixed;inset:0 auto auto 0;width:100%;height:2px;z-index:40;transform-origin:left;transform:scaleX(var(--read-progress,0));will-change:transform;background:linear-gradient(90deg,#a8834a,var(--gold),#ffe8bf);box-shadow:0 0 10px #e2c39888;pointer-events:none}
.motion-tools{position:fixed;right:22px;bottom:22px;z-index:20;display:flex;gap:8px;align-items:center}
.motion-toggle,.back-top{border:1px solid #e2c39855;background:#101b29e8;backdrop-filter:blur(12px);color:var(--gold);min-height:42px;padding:9px 14px;font:14px/1.4 var(--sans);cursor:pointer;box-shadow:0 4px 22px #0003;transition:border-color .25s,background .25s,opacity .25s}
.motion-toggle:hover,.back-top:hover{background:#243040;border-color:var(--gold)}
.motion-toggle:focus-visible,.back-top:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.motion-toggle span{display:inline-block;margin-right:8px;min-width:12px}
.back-top{font-size:20px;width:42px;padding:6px;display:none}
.back-top.is-shown{display:block}
.link-hint{position:fixed;z-index:60;max-width:calc(100vw - 24px);padding:7px 12px;border:1px solid #ffffff2e;border-radius:10px;background:linear-gradient(160deg,#ffffff1c,#ffffff06 55%),#2a2320c7;-webkit-backdrop-filter:blur(18px) saturate(145%) brightness(.85);backdrop-filter:blur(18px) saturate(145%) brightness(.85);box-shadow:inset 0 1px 0 #fff2,0 8px 22px #1e120e4d;color:var(--ink);font-size:13px;pointer-events:none;opacity:0;transition:opacity .15s}
.link-hint.is-shown{opacity:1}
.site-footer{position:relative;z-index:2;padding-bottom:76px;background:#0b1119c9}
.motion-paused *,.motion-paused *:before,.motion-paused *:after{animation-play-state:paused!important;scroll-behavior:auto!important}
.motion-paused .motion-reveal,.motion-paused .portal-content,.motion-paused .library-head,.motion-paused .profile-hero>div,.motion-paused .activity-heading{opacity:1!important;transform:none!important;animation:none!important}
.motion-paused .portrait-frame img{transform:none;will-change:auto}
/* Home wallpaper (2026-09-29): pausing only stops the film and the mouse drift; the picture keeps its size, so it no longer zooms out and back in. */
.motion-paused .scene-art img{transform:scale(1.035)}
.motion-paused .sakura-layer{opacity:0}
.motion-paused .motion-reveal.is-waiting{opacity:1;transform:none}
@keyframes petal-journey{0%{transform:translate3d(0,-25px,0) rotate(-25deg)}50%{transform:translate3d(calc(var(--petal-drift) * .35),52vh,0) rotate(70deg)}100%{transform:translate3d(var(--petal-drift),calc(100vh + 60px),0) rotate(160deg)}}
@keyframes ambient-breathe{to{transform:translate3d(-3%,2%,0);opacity:.6}}
@keyframes mist-drift{to{transform:translate3d(5%,-2%,0);opacity:.55}}
@keyframes beam-drift{to{transform:translateX(80px) rotate(-23deg);opacity:.5}}
@keyframes seal-float{to{transform:translate3d(0,20px,0) rotate(4deg)}}
@keyframes page-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes media-shimmer{50%{background-color:#405363}}
@keyframes loading-turn{to{transform:rotate(360deg)}}
@media(max-width:760px){.art-cloud{width:200px;opacity:.1}.art-cloud img{width:220.18px}.art-seal,[data-scene="gold"] .art-seal{width:220px;height:220px;right:-70px;top:170px;opacity:.08}.ambient-beam{width:70%;opacity:.6}.motion-tools{right:12px;bottom:12px}.motion-toggle{font-size:12px;min-height:40px;padding:9px 12px}.back-top{height:40px;min-height:40px;width:40px}.story-card{min-height:305px;padding-left:34px}.library-nav{gap:24px}.work-card .work-meta,.work-card h3,.work-card p,.work-card>a{margin-left:10px;margin-right:10px}.load-notice{top:8px;font-size:13px;white-space:nowrap}.site-footer{padding-bottom:75px}}
@media(hover:none){.work-card:hover,.story-card:hover,.episode-card:hover{transform:none}.link-hint{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.sakura-layer{display:none}.scene-art img,.portrait-frame img{transform:none;will-change:auto}.motion-reveal.is-waiting{opacity:1;transform:none}.motion-reveal.is-visible,.portal-content,.library-head,.profile-hero>div,.activity-heading{opacity:1!important;transform:none!important}}
.motion-hidden *,.motion-hidden *:before,.motion-hidden *:after{animation-play-state:paused!important}

@media(min-width:761px){.scene-floor>span:last-child{margin-right:125px}}
.motion-toggle .motion-label{margin:0;min-width:0}
@media(max-width:760px){.motion-toggle{width:40px;padding:9px}.motion-toggle .motion-label{display:none}.motion-toggle span[aria-hidden]{margin:0;font-size:16px}.motion-tools{gap:6px}}
/* 花瓣摆动用的两段关键帧，原来来自 Sakura.js（MIT 许可，见 vendor/sakura/LICENSE）。
   网站只用到这两段，搬过来后每页少加载一个样式文件（Claude, 2026-09-28）。 */
@keyframes sway-3 { 0% { transform: rotate(25deg); } 40% { transform: rotate(74deg); } 100% { transform: rotate(37deg); } }
@keyframes sway-6 { 0% { transform: rotate(65deg); } 40% { transform: rotate(92deg); } 100% { transform: rotate(58deg); } }
/* 2026-09-28 日夜（Raymond 要求，只换氛围）：夜晚在背景上加一层月色夜幕、光束换成月光、飘的光点换成星光；卡片、文字、字体颜色都不变。
   夜幕在背景图之上、光束和光点之下（z-index 1），所以光还是亮的。白天就是原来的样子。 */
.ambient-stage:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.6s ease;background:radial-gradient(110% 70% at 80% 4%,#9fb4ea2e,transparent 60%),linear-gradient(180deg,#070d22b0,#0a143096 46%,#090b1dbd)}
html[data-daypart="night"] .ambient-stage:before{opacity:1}
html[data-daypart="night"] .ambient-beam{background:linear-gradient(90deg,transparent,#aebfff0a 35%,#dde6ff26 55%,transparent 77%)}
html[data-daypart="night"] body:not(.motion-paused) .sakura-layer{opacity:.6}
/* 右下角「日夜」按钮和菜单。按钮沿用暂停动效按钮的红色花纹底。
   菜单 2026-09-28 按 Raymond 要求和网站美术统一：原来是黑蓝色方框，改成和顶部导航同款的 frosted glass（暖棕半透明 + 背景模糊 + 顶边一道高光），
   选项做成分段按钮，选中那一格用网站按钮同款的红色花纹底；文字颜色、字体不变。背景模糊前先把底下压暗一点，浅色页面上也看得清字。
   链接去向提示（.link-hint）和「画卷载入中…」提示条（.load-notice）原来也是黑蓝色，Raymond 同意一起换成同款（文字颜色不变）。
   不支持背景模糊的旧浏览器用几乎不透明的同色底。
   注：这里的注释只用网站上已有的字，避免字体子集因为注释多出字。 */
.ambience{position:relative}
.ambience-toggle svg{display:block}/* 2026-10-01：齿轮图标和「设置」两字上下居中对齐（原来图标落在文字基线上，偏高约 3 像素）*/.ambience-toggle{display:inline-flex;align-items:center;justify-content:center}
.ambience-menu{position:absolute;right:0;bottom:calc(100% + 10px);width:min(248px,calc(100vw - 24px));padding:12px 12px 3px;border:1px solid #ffffff33;border-radius:18px;background:linear-gradient(160deg,#ffffff1c,#ffffff06 55%,#ffffff0d),#2a2320c7;-webkit-backdrop-filter:blur(24px) saturate(145%) brightness(.85);backdrop-filter:blur(24px) saturate(145%) brightness(.85);box-shadow:inset 0 1px 0 #fff2,inset 0 -1px 0 #ffffff0d,0 16px 40px #1e120e59;color:var(--gold);font:13px/1.5 var(--sans);text-align:left}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.ambience-menu,.link-hint,.load-notice{background-color:#2a2320f2}}
.ambience-menu[hidden]{display:none}
.ambience-title{margin:0 0 6px 4px;font-size:12px;letter-spacing:.14em;opacity:.85}
.ambience-row{display:flex;gap:3px;margin:0 0 9px;padding:3px;border-radius:12px;background:#140c0a4d;box-shadow:inset 0 1px 2px #0000002e,inset 0 0 0 1px #ffffff0f}
.ambience-row button{flex:1;min-height:32px;padding:4px 6px;border:0;border-radius:9px;background:transparent;color:inherit;font:inherit;font-size:13px;cursor:pointer;transition:background-color .2s,box-shadow .2s}
.ambience-row button:hover{background-color:#ffffff14}
.ambience-row button[aria-pressed="true"]{background:linear-gradient(#8456418c,#4c282b9e),url('assets/art/silk-pattern.webp?v=ce71f709ec') center/cover;box-shadow:inset 0 0 0 1px #e2c39873,inset 0 1px 0 #ffffff1f,0 2px 8px #1e120e4d}
.ambience-row button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ambience-note{margin:-3px 0 11px 4px;font-size:12px;opacity:.7}
/* 开场动画「重播」（2026-10-03）：减少动态效果或动效暂停时不能点，变淡 */
.ambience-row .ambience-replay:disabled{opacity:.45;cursor:not-allowed;background-color:transparent}
/* 2026-09-28 交互动画（Raymond 要求，参照苹果的手感）：弹出用带一点回弹的弹簧曲线（约 4% 回弹），收起更快更干脆；
   只动位置、缩放和透明度，交给显卡，不重排页面。系统「减少动态效果」时只留淡入淡出；点了「暂停动效」时和网站原来一样直接出现。
   --ync-pop：弹出（菜单、弹窗、按钮回弹）；--ync-glide：滑入（抽屉、面板），几乎不回弹。不支持弹簧曲线的旧浏览器用近似的贝塞尔曲线。 */
:root{--ync-pop:cubic-bezier(.34,1.3,.64,1);--ync-glide:cubic-bezier(.22,1,.36,1)}
@supports (transition-timing-function:linear(0,1)){:root{--ync-pop:linear(0, 0.047, 0.159, 0.301, 0.45, 0.59, 0.712, 0.813, 0.892, 0.95, 0.991, 1.017, 1.031, 1.037, 1.038, 1.035, 1.03, 1.025, 1.019, 1.014, 1.01, 1.006, 1.003, 1.001, 1);--ync-glide:linear(0, 0.033, 0.112, 0.216, 0.328, 0.438, 0.541, 0.633, 0.712, 0.779, 0.833, 0.878, 0.913, 0.939, 0.96, 0.975, 0.986, 0.993, 0.997, 0.999, 1)}}
.ambience-menu{transform-origin:calc(100% - 22px) 100%;opacity:0;transform:translateY(8px) scale(.9);transition:opacity .16s ease,transform .2s var(--ync-glide)}
.ambience-menu.is-open{opacity:1;transform:none;transition:opacity .2s ease,transform .5s var(--ync-pop)}
.back-top{display:block;width:0;min-width:0;padding-left:0;padding-right:0;border-width:0;margin-left:-8px;opacity:0;scale:.5;overflow:hidden;visibility:hidden;pointer-events:none;
 transition:width .3s var(--ync-glide),margin .3s var(--ync-glide),padding .3s var(--ync-glide),opacity .16s,scale .3s var(--ync-glide),visibility 0s linear .3s,border-width 0s linear .3s,background .25s,border-color .25s}
.back-top.is-shown{width:42px;padding-left:6px;padding-right:6px;border-width:1px;margin-left:0;opacity:1;scale:1;visibility:visible;pointer-events:auto;
 transition:width .42s var(--ync-glide),margin .42s var(--ync-glide),padding .42s var(--ync-glide),opacity .2s,scale .5s var(--ync-pop),visibility 0s,border-width 0s,background .25s,border-color .25s}
@media(max-width:760px){.back-top{margin-left:-6px}}
.link-hint{transform:translateY(4px);transition:opacity .15s,transform .32s var(--ync-glide)}
.link-hint.is-shown{transform:none}
@media(prefers-reduced-motion:reduce){.ambience-menu,.ambience-menu.is-open,.link-hint,.link-hint.is-shown{transform:none;transition:opacity .15s}.back-top,.back-top.is-shown{scale:1;transition:opacity .15s,visibility 0s}}
.motion-paused .ambience-menu,.motion-paused .ambience-menu.is-open,.motion-paused .back-top,.motion-paused .back-top.is-shown{transition:none}
/* 2026-09-28 首页动效减量（Raymond 同意）：实测首页最吃性能的是背景里那层缓慢「呼吸」的柔光（.ambient-wash，18 秒一个来回，
   几乎看不出在动）。模拟普通手机时，它一停每秒帧数从约 40 回到接近 60。首页上改成停在动画中间的样子，其余页面和花瓣、光点都不变。 */
.home-page .ambient-wash{animation:none;opacity:.8;transform:translate(-1.5%,1%)}   /* 用平面位移：3D 位移会让它单独占一层，每帧照样要合成，等于白停 */
/* Phones (2026-09-29): while scrolling down, the floating buttons slide out below the screen and the "显示导航" pill hides;
   scrolling up brings both back (the class is set in motion.js). */
@media(max-width:760px){
 .motion-tools{transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .25s}
 .tools-tucked .motion-tools{transform:translateY(calc(100% + 24px));opacity:0;pointer-events:none}
 .tools-tucked.island-scrolled:not(.island-open) .nav-peek{transform:translate(-50%,-70px);opacity:0;pointer-events:none}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){.motion-tools{transition:none}}
.motion-paused .motion-tools{transition:none}

/* Sliding selection bubble (2026-09-29, Raymond): one thumb per segmented control or tab switch, placed by motion.js;
   the chosen-state art lives on the thumb and glides between buttons. Plain jump when motion is reduced or paused. */
.has-glide{isolation:isolate}
.has-glide>button{position:relative}
.glide-thumb{position:absolute;left:0;top:0;z-index:0;width:0;height:0;pointer-events:none;opacity:0;transition:translate .42s cubic-bezier(.22,1,.36,1),transform .42s cubic-bezier(.22,1,.36,1),width .42s cubic-bezier(.22,1,.36,1),height .42s cubic-bezier(.22,1,.36,1),opacity .2s}
.glide-thumb.is-on{opacity:1}
.glide-thumb.no-glide{transition:none}
@media(prefers-reduced-motion:reduce){.glide-thumb{transition:none}}
.motion-paused .glide-thumb{transition:none}
.ambience-row.has-glide{position:relative}
.ambience-row .glide-thumb{background:linear-gradient(#8456418c,#4c282b9e),url('assets/art/silk-pattern.webp?v=ce71f709ec') center/cover;box-shadow:inset 0 0 0 1px #e2c39873,inset 0 1px 0 #ffffff1f,0 2px 8px #1e120e4d}
.ambience-row.has-glide button[aria-pressed="true"],.ambience-row.has-glide button[aria-pressed="true"]:hover{background:transparent;box-shadow:none}
.ambience-row.has-glide button{transition:background-color .2s,color .3s}
/* Interaction polish (2026-09-29, Raymond: every interaction should ease, not jump). */
.library-entry,.profile-nav>a{transition:color .25s,border-color .25s,box-shadow .25s,padding .25s}
.breadcrumb a,.library-bottom a,.profile-end a{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:background-size .35s cubic-bezier(.22,1,.36,1)}
.breadcrumb a:hover,.breadcrumb a:focus-visible,.library-bottom a:hover,.library-bottom a:focus-visible,.profile-end a:hover,.profile-end a:focus-visible{background-size:100% 1px}
.brand img{transition:transform .45s cubic-bezier(.22,1,.36,1)}
.brand:hover img,.brand:focus-visible img{transform:scale(1.05) rotate(-2deg)}
.hub-dialog-close{transition:background-color .2s,background .2s,box-shadow .2s,color .2s}
.activity-archive .archive-document summary{transition:background-color .25s,background .25s}
.archive-document-body a:not(.button){transition:text-underline-offset .2s,color .2s}
.archive-document-body a:not(.button):hover,.archive-document-body a:not(.button):focus-visible{text-underline-offset:6px}
.gb-field input,.gb-field textarea,.catalog-filter input,.catalog-filter select,.song-sort select{transition:border-color .2s,box-shadow .2s,background-color .2s}
.song-search kbd{transition:opacity .2s}
@media(prefers-reduced-motion:reduce){.library-entry,.profile-nav>a,.breadcrumb a,.library-bottom a,.profile-end a,.brand img,.hub-dialog-close,.activity-archive .archive-document summary,.archive-document-body a,.gb-field input,.gb-field textarea,.catalog-filter input,.catalog-filter select,.song-sort select,.song-search kbd{transition:none}.brand:hover img,.brand:focus-visible img{transform:none}}
.motion-paused .brand img{transition:none}
.motion-paused .brand:hover img,.motion-paused .brand:focus-visible img{transform:none}
/* ===== art-direction.css ===== */
/* Original-art surfaces: authored specifically for the existing local site. */
:root{--bg:#1f1815;--border:#e2c39838}
html{scrollbar-gutter:stable}
body,.inner-page,body[data-scene="gold"],body[data-scene="stage"]{background:#1f1815}
/* 2026-10-01：首页的底图原来用 background-attachment:fixed 写在 body 上，浏览器每滚一下都要在主线程把整屏重画一遍（首页滚动发涩的主要原因）。改成一层固定定位的底图，画面一样，滚动交给显卡合成。其他页面的 body 背景由 .inner-page 覆盖，本来就没有这层。 */body:not(.inner-page)::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(#241a16b3,#1c1512e0),url('assets/opt/art/eternal-night.webp?v=a9324cb1b4');background-size:cover}
.site-header{min-height:110px;padding-block:20px;isolation:isolate;background:linear-gradient(90deg,#281b16db,#44242acc,#2e1f19dc),url('assets/opt/art/blossom-canopy.webp?v=1fd1ca5aa6') center 44%/cover;border-bottom:1px solid #e2c39880;box-shadow:0 6px 35px #1a100c65}
.site-header:before{content:"";position:absolute;inset:0;z-index:-1;background:url('assets/art/cloud-corner.webp?v=c86f84deab') left top/300px auto no-repeat,url('assets/art/cloud-corner.webp?v=c86f84deab') right -50px top -15px/340px auto no-repeat;opacity:.65;pointer-events:none}
.site-header:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:13px;background:url('assets/opt/art/cloud-border.webp?v=3e6cb70a20') center 58%/100% auto no-repeat;pointer-events:none;opacity:.9}
.site-header nav{gap:22px}
.site-header nav a{padding:11px 19px;background:linear-gradient(#452c28a3,#281b1691);border:1px solid #e2c39833;transition:background .3s,box-shadow .3s,transform .3s}
.site-header nav a:hover,.site-header nav a:focus-visible,.site-header nav a[aria-current]{background:linear-gradient(#8456418c,#4c282b9e),url('assets/art/silk-pattern.webp?v=ce71f709ec') center/cover;box-shadow:inset 0 0 20px #ffdbaf1a,0 0 22px #e6b7831f;border-color:#e2c39899}
.site-header nav a:active{transform:scale(.96)}
.site-header nav a[aria-current]:after{bottom:-6px}
.site-footer{min-height:218px;align-items:flex-end;isolation:isolate;border-top:0;background:linear-gradient(0deg,#221814e8,#241a1640),url('assets/opt/art/dream-water.webp?v=0ed683b70c') center 52%/cover;padding:80px 5.2% 70px;box-shadow:inset 0 30px 40px -25px #211815}
.site-footer:before{content:"";position:absolute;inset:0;z-index:-1;background:url('assets/opt/art/cloud-border.webp?v=3e6cb70a20') bottom center/100% auto no-repeat;opacity:.8}
.site-footer>span,.site-footer>a{padding:7px 16px;border:1px solid #ffffff2e;border-radius:999px;background:linear-gradient(160deg,#ffffff1c,#ffffff06 55%),#2a2320b3;-webkit-backdrop-filter:blur(18px) saturate(145%) brightness(.85);backdrop-filter:blur(18px) saturate(145%) brightness(.85);box-shadow:inset 0 1px 0 #fff2,0 6px 18px #1e120e40}
.ambient-stage{z-index:-1;background:linear-gradient(#281b1661,#261b17b5),url('assets/opt/art/eternal-night.webp?v=a9324cb1b4') center/cover}
[data-scene="gold"] .ambient-stage,[data-scene="stage"] .ambient-stage{background:linear-gradient(#2c221ea8,#221b18d6),url('assets/opt/art/golden-stage.webp?v=0b41d1516b') center/cover}
.ambient-stage:after{content:"";position:absolute;inset:0;background:url('assets/art/silk-pattern.webp?v=ce71f709ec') left/170px auto repeat;mix-blend-mode:soft-light;opacity:.15;pointer-events:none}
.ambient-stage canvas{position:absolute;inset:0;z-index:2}
.art-cloud{opacity:.42;top:115px}.art-cloud.right{opacity:.3}
.art-seal,[data-scene="gold"] .art-seal{display:none}
.stage-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.27;mix-blend-mode:screen;filter:saturate(.85);pointer-events:none}
.ambient-beam{z-index:1;opacity:.75;background:linear-gradient(90deg,transparent,#e5ac6514 30%,#ffe6b647 55%,transparent 78%);filter:blur(23px);animation-duration:12s}
.home-page .ambient-stage{background:linear-gradient(#331f3190,#221420b5),url('assets/opt/art/blossom-canopy.webp?v=1fd1ca5aa6') center/cover}
.portal-scene{min-height:calc(100svh - 110px);background:linear-gradient(90deg,#231721d9,transparent 68%)}
.scene-art:after{background:linear-gradient(90deg,#231721 0%,#231721c2 14%,#23172138 42%,transparent 72%),linear-gradient(0deg,#1f151d 0%,transparent 27%)}
.scene-art:before{box-shadow:inset 0 -110px 100px -75px #1f151d}
.scene-mist{opacity:.95;background:radial-gradient(ellipse at 10% 90%,#997d793b,transparent 47%),radial-gradient(ellipse at 60% 72%,#e7cadf3b,transparent 45%);animation-duration:12s}
.sakura-layer{mask-image:linear-gradient(90deg,#0008,#000)}
.sakura-path .sakura{background:linear-gradient(120deg,#ffe3edd9,#f7accbce);box-shadow:0 0 8px #f3c8bd4d}
.identity-portal,.singer-portal{overflow:hidden;background:linear-gradient(100deg,#36242ae8,#2f2232c9),url('assets/art/silk-pattern.webp?v=ce71f709ec') center/cover;border-color:#e2c3988c;box-shadow:0 8px 22px #130a1450}
.identity-portal:after{width:80px;height:80px;right:-8px;bottom:-22px;border:0;background:url('assets/opt/art/qilin-medallion.webp?v=e658012a95') center/contain no-repeat;opacity:.23;transition:transform .6s}
.identity-portal:hover,.identity-portal:focus-visible{background-color:#673b40;box-shadow:0 8px 35px #c07c6b38;transform:translateX(7px)}
.singer-portal{background-image:linear-gradient(100deg,#3d2939e3,#452a38b8),url('assets/opt/art/blossom-canopy.webp?v=1fd1ca5aa6');background-size:cover;background-position:center 55%}
.identity-portal:hover:after{transform:rotate(25deg) scale(1.12)}
.identity-portal:active,.episode-card:active{transform:scale(.976)}
.library-head,.activity-heading,.activity-detail-head{position:relative;isolation:isolate;overflow:hidden;min-height:310px;margin:9px 0 30px;padding:44px 42px;border:1px solid #e2c39883;box-shadow:0 18px 45px #170d0966;background:linear-gradient(90deg,#291e1aec,#291e1a70 52%,#291e1a12),url('assets/opt/art/eternal-night.webp?v=a9324cb1b4') 60% 42%/cover}
.library-head:before,.activity-heading:before,.activity-detail-head:before{content:"";position:absolute;inset:9px;border:1px solid #e2c3987d;pointer-events:none;z-index:-1}
.library-head:after,.activity-heading:after,.activity-detail-head:after{content:"";position:absolute;left:0;right:0;bottom:0;height:45px;background:url('assets/opt/art/cloud-border.webp?v=3e6cb70a20') bottom center/100% auto no-repeat;pointer-events:none;opacity:.75}
.library-head h1{font-size:57px}.library-head>p:last-child{max-width:450px}
.library-head{min-height:340px;padding-block:48px}
.activity-heading{background-image:linear-gradient(90deg,#35251ff2,#37232498 58%,#37232429),url('assets/opt/art/golden-stage.webp?v=0b41d1516b');background-position:center;grid-template-columns:minmax(0,1fr) 270px;min-height:355px;padding-right:70px}
.activity-heading>img{position:relative;z-index:2;align-self:start;margin-top:12px;filter:drop-shadow(0 3px 10px #0008)}
.activity-heading .hero-character{position:absolute;right:75px;bottom:-205px;height:460px;width:260px;object-fit:contain;object-position:top;max-width:none;z-index:-1;opacity:.92;animation:character-arrive 1s cubic-bezier(.2,.7,.2,1) both}
.activity-detail-head{background-image:linear-gradient(90deg,#33221ced,#281c1896 60%,#281c184a),var(--episode-art,url('assets/opt/art/eternal-night.webp?v=a9324cb1b4'));background-position:center 40%;min-height:320px}
.activity-detail-head:after{height:50px}
.library-nav{padding:18px 22px;gap:34px;border:1px solid #e2c39872;box-shadow:0 7px 20px #160d0955;background:linear-gradient(#3b2e29de,#362925ed),url('assets/art/silk-pattern.webp?v=ce71f709ec') center/350px auto;top:0;margin-bottom:38px}
.library-nav a{padding:10px 14px;margin:-10px -14px;overflow:hidden}
.library-nav a.is-active{background:linear-gradient(100deg,#a76d444d,#a7754829);box-shadow:inset 0 -2px #e2c398,0 0 23px #e2c39816}
.collection-heading{padding:18px 22px 20px;min-height:76px;position:relative;isolation:isolate;border:0;margin-bottom:25px;background:linear-gradient(90deg,#4c2931f0,#332622c9 72%,transparent),url('assets/art/silk-pattern.webp?v=ce71f709ec') center/300px auto}
.collection-heading:after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;background:url('assets/art/ornament-ribbon.webp?v=25fee73c61') 20% 50%/100% 50px no-repeat;opacity:.8}
.collection-heading:before{content:"";position:absolute;right:10px;top:-18px;width:190px;height:98px;background:url('assets/art/cloud-corner.webp?v=c86f84deab') center/contain no-repeat;opacity:.65;z-index:-1;pointer-events:none}
.work-card{background:linear-gradient(#3e2f29e3,#2d211df2),url('assets/art/silk-pattern.webp?v=ce71f709ec') center/300px auto;border:1px solid #d8b3886e;padding-bottom:24px;box-shadow:0 10px 25px #180f0b55;overflow:hidden}
.work-card:after{content:"";position:absolute;right:-30px;bottom:-8px;width:140px;height:90px;background:url('assets/art/cloud-corner.webp?v=c86f84deab') center/contain no-repeat;opacity:.26;pointer-events:none}
.work-card .work-meta,.work-card h3,.work-card p,.work-card>a{margin-left:20px;margin-right:20px}
.work-cover{position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;overflow:hidden;background:transparent;color:inherit;font:inherit;isolation:isolate;text-align:left}
.work-cover img{width:100%;aspect-ratio:16/9;object-fit:cover}
.work-cover:after{content:"";position:absolute;inset:0;border:1px solid #e2c39840;box-shadow:inset 0 -55px 50px -40px #201612;pointer-events:none}
.work-cover .cover-action{position:absolute;right:12px;bottom:12px;font-size:13px;padding:7px 12px;background:#322520e8;border:1px solid #f3d7bba8;backdrop-filter:blur(8px);transform:translateY(0);transition:background .3s,transform .3s}
.work-cover:hover .cover-action,.work-cover:focus-visible .cover-action{background:#694d43eb;transform:translateY(-5px)}
.work-cover:focus-visible{outline:3px solid var(--gold);outline-offset:-4px}
.work-card:hover{transform:translateY(-9px);box-shadow:0 20px 35px #170b075c,0 0 20px #e2c39825}
.work-card:hover img{transform:scale(1.085)}
.work-card>a,.story-card>a,.award-listen,.activity-sources a{position:relative;z-index:2;background:linear-gradient(#854b4859,#6b41305c),url('assets/art/silk-pattern.webp?v=ce71f709ec') center/200px auto;border-color:#e2c39888;box-shadow:inset 0 0 15px #e2c39812}
.story-card{min-height:395px;padding-top:112px;background:linear-gradient(0deg,#2b211df5 4%,#2b211def 46%,#2b211d0a),var(--story-art) center 30%/cover;border-color:#e2c39899;box-shadow:5px 6px 0 -2px #35241e,6px 7px 0 -2px #d0a97480,0 18px 35px #0005}
.story-card:nth-child(2){--story-art:url('assets/opt/art/ink-portrait.webp?v=7fbba1a806')}.story-card:nth-child(3){--story-art:url('assets/opt/art/eternal-night.webp?v=a9324cb1b4')}
.story-card>span{position:absolute;left:31px;top:20px;opacity:1;text-shadow:0 2px 10px #000}
.story-card:before{inset:9px;border-color:#e2c3988c;box-shadow:inset 5px 0 #c3a27230}
.story-card:after{height:80px;opacity:.68;background-image:url('assets/opt/art/cloud-border.webp?v=3e6cb70a20');background-size:cover}
.story-card:hover,.story-card:focus-within{transform:translateY(-8px) rotateY(-6deg);box-shadow:8px 10px 0 -2px #35241e,9px 11px 0 -2px #d0a97480,0 20px 45px #0006}
.episode-grid{gap:26px;perspective:1300px}
.episode-card{position:relative;isolation:isolate;overflow:hidden;min-height:355px;padding:24px 26px;background:linear-gradient(0deg,#2b1e19f7 0%,#2b1e19e8 34%,#2b1e192b 73%,#2b1e199c),var(--episode-art) var(--episode-position,center 40%)/cover;border-color:#e2c3988f;box-shadow:0 12px 30px #190f0b70;transform-style:preserve-3d}
.episode-card:before{content:"";position:absolute;inset:8px;z-index:-1;border:1px solid #e2c3986c;pointer-events:none}
.episode-card:after{content:"";position:absolute;left:0;right:0;bottom:0;height:42px;z-index:-1;background:url('assets/opt/art/cloud-border.webp?v=3e6cb70a20') bottom center/100% auto no-repeat;opacity:.5}
.episode-card h3{margin-top:112px;margin-bottom:8px;font-size:30px}
.episode-card>.episode-top{padding:5px 9px;background:#261b17ac;border-bottom:1px solid #e2c39844}
.episode-card>p{flex:0}
.episode-bottom{margin-top:18px;padding-top:13px;padding-bottom:10px}
.episode-card:hover,.episode-card:focus-visible{background-color:#463028;transform:translateY(-10px) rotateX(2deg);box-shadow:0 22px 45px #190f0b99,0 0 28px #f1c49430;border-color:#f2d9b7}
.episode-card:hover:before,.episode-card:focus-visible:before{border-color:#ffe3b5}
.episode-card.is-open{box-shadow:0 0 0 1px #e2c39870,0 10px 32px #d49c7130}
.episode-sound{position:absolute;right:27px;top:91px;display:flex;align-items:center;gap:4px;height:28px;opacity:.9}
.episode-sound i{display:block;width:3px;height:22px;background:var(--gold);box-shadow:0 0 8px #ffd79360;animation:stage-sound 1.1s ease-in-out infinite alternate;transform-origin:center;animation-delay:calc(var(--bar)*-.17s)}
.episode-sound i:nth-child(2n){height:13px}
.award-list{border-top:0;display:grid;gap:16px}
.award-row,.award-row.first-prize{position:relative;isolation:isolate;overflow:hidden;border:1px solid #e2c3985c;background:linear-gradient(90deg,#4b2b31ed,#2b211ee0),url('assets/art/silk-pattern.webp?v=ce71f709ec') center/400px auto;box-shadow:0 8px 24px #150d0a55;padding:28px}
.award-row:before{content:"";position:absolute;inset:6px;border:1px solid #e2c39833;pointer-events:none;z-index:-1}
.award-row:after{content:"";position:absolute;right:0;bottom:0;width:240px;height:100%;z-index:-1;background:url('assets/art/cloud-corner.webp?v=c86f84deab') right center/contain no-repeat;opacity:.16;pointer-events:none}
.award-row.first-prize{background-image:linear-gradient(90deg,#75442de0,#402328dc),url('assets/opt/art/golden-stage.webp?v=0b41d1516b');background-size:cover;background-position:center 64%;border-color:#e2c398c7}
.award-row:hover{transform:translateX(6px);border-color:#e2c398aa}
.profile-mark{background:linear-gradient(#362925a1,#3e302bca),url('assets/opt/art/eternal-night.webp?v=a9324cb1b4') center/cover;border-color:#e2c39888}
.profile-nav>a,.interest-tags span{background:linear-gradient(90deg,#49342dc4,#2d1f1ac4),url('assets/art/silk-pattern.webp?v=ce71f709ec') center/250px auto}
.prose-quote,.award-pending{background:linear-gradient(90deg,#4e3931db,#382822c9),url('assets/opt/art/eternal-night.webp?v=a9324cb1b4') center/cover}
.button,.button.rose,.motion-toggle,.back-top{background:linear-gradient(#7b474ba8,#45342eb8),url('assets/art/silk-pattern.webp?v=ce71f709ec') center/cover;border-color:#e2c398a8}
.button:hover,.button.rose:hover,.motion-toggle:hover,.back-top:hover{background-color:#a56956}
.library-bottom,.profile-end{background:linear-gradient(90deg,#57403738,#412e275c),url('assets/opt/art/dream-water.webp?v=0ed683b70c') center 60%/cover;padding:25px 24px;margin-bottom:35px;border:1px solid #e2c39850}
.motion-reveal.is-visible{animation:art-card-arrive .85s cubic-bezier(.16,.72,.2,1) backwards;animation-delay:var(--reveal-delay,0ms)}
.motion-tools{z-index:30}
.route-curtain{position:fixed;inset:0;z-index:95;pointer-events:none;display:grid;grid-template-columns:1fr 1fr;visibility:hidden;overflow:hidden}
.route-curtain>i{position:relative;display:block;min-width:0;overflow:hidden;background:#2a1d19;border-right:1px solid #e2c398a8;transform:translateX(-102%)}
.route-curtain>i:nth-child(2){border:0;border-left:1px solid #e2c398a8;transform:translateX(102%)}
.route-curtain>i>picture{position:absolute;inset:0 auto 0 0;width:200%;height:100%;display:block}
.route-curtain>i:nth-child(2)>picture{left:auto;right:0}
.route-curtain .route-art{width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;display:block}
/* Tiny blurred copy of the curtain art (inline, so it is there on the very first paint): if a browser paints the new page
   before the real picture is ready (no view transition), the curtain shows a soft version of the art, never a flat panel. */
.route-curtain .route-art{background:url(data:image/webp;base64,UklGRioBAABXRUJQVlA4IB4BAACwBwCdASowABsAPsFap06npKOiJWmY8BgJQBkC8e0pCg2eKxJKhFDRuCv1fg8JdaOm265yjSpuMXuAfbK+C3Xx4DrjvnZgAP776ojQ0U6afB+w1strsZtuxswKxL7gGOxCXYprvt3GabXkWNn8tQZVVlMR0KFJPj0fiPW9pzcGBO3QWe+3tbKDR7I2RXGxxcq9Rlkvgzck1kc59ZylLnj/StukauOm7fIUWvbxZuZAvb43Nn1TPixr0RLFqYxChS6UgZ+tCUV9uy8LOfcYlmmd7lLAs7LQAG5nJAzKOivJhLZd3UQKP+dZrY6jIIDqsYUkpopvGytC37fbFJnMYbTrA1UCWeA6vUTQiRgiKJPDgVjGGTcGHpHXOtraIAAA) center/cover no-repeat}
@media (max-width:760px) and (orientation:portrait){.route-curtain .route-art{background-image:url(data:image/webp;base64,UklGRpYBAABXRUJQVlA4IIoBAADwCACdASocADIAPrlKoEqnJCMhs/maqOAXCWQAuzOFA7UjkSo8xoJKptTHOhoLY1A9uHIjS6fJ9V6sMMmxmgle7uhTpx4cMAkWR2gtsymicAD+9o5mP9V46B6D+pqZ2v9k9HmnoJnuyjjG9R2hv2J6uIYS162oRIPGixq0KEWG4UlG5UbaYs/nEfY7l3ql2icRE+faNrLOR3x4xbnipmek4IoYyj37JVmj00wsZHhiLsAX/umXqFWMVtcW58w0bpBDcC9mh+0AHrEmL92oAnSvFNHxj6mw8J8mInWDAsHPvDIDnaDhWkT2vHXEcs2OyWqvV8px0VdQuLZ+ewfG1x76CWxerTudaqCArq/AfM0D/z8C9xsMExoyzkvVOSn60mhUzgY5XlVGKsq1RoLJ/E7b3z+IgHLSWwoefZSXIrwWDBhliPZHrTwzv4l2CseXU8f1s5CXFYR8ow0Hq0NWIDyny+WExkh3kO1FBBFhvHKcrMLisHD+Ji9ZbT5lM7yiYBWyf2Qk6T+yDAAA)}}
.route-curtain>i:after{content:"";position:absolute;inset:0;background:linear-gradient(#40292096,#2a1d19ca);pointer-events:none}
.route-curtain .route-emblem{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:120px;height:120px;object-fit:contain;opacity:0;filter:drop-shadow(0 0 22px #ffcf8a65)}
html.route-boot .route-curtain,.route-holding .route-curtain,.route-entering .route-curtain,.route-leaving .route-curtain{visibility:visible;pointer-events:auto}
html.route-boot .route-curtain>i,.route-holding .route-curtain>i{transform:translateX(0)}
html.route-boot .route-emblem,.route-holding .route-emblem{opacity:1}
.route-leaving .route-curtain>i{animation:curtain-close var(--route-close-time,450ms) cubic-bezier(.45,0,.35,1) both}
.route-leaving .route-emblem{animation:emblem-show var(--route-close-time,450ms) ease both}
.route-entering .route-curtain>i{animation:curtain-open-left var(--route-open-time,700ms) cubic-bezier(.42,0,.25,1) both}
.route-entering .route-curtain>i:nth-child(2){animation-name:curtain-open-right}
.route-entering .route-emblem{animation:emblem-hide var(--route-open-time,700ms) ease both}
.route-leaving main{transition:transform var(--route-close-time,450ms),filter var(--route-close-time,450ms);transform:scale(.985);filter:blur(3px)}
.click-bloom{position:fixed;width:24px;height:24px;z-index:100;border:1px solid #ffdfb4;border-radius:50%;box-shadow:0 0 20px #ffd5a599,inset 0 0 10px #f0b6c950;pointer-events:none;animation:click-bloom .65s ease-out forwards}
.section-arriving .collection-heading{animation:section-shine .8s ease-out}
.work-dialog{width:min(940px,calc(100% - 36px));max-height:88svh;padding:0;border:1px solid #e2c398b8;background:#2b211d;color:var(--ink);box-shadow:0 25px 110px #000a;overflow:auto}
.work-dialog::backdrop{background:#19100cca;backdrop-filter:blur(9px);animation:dialog-backdrop .3s ease-out}
.work-dialog[open]{animation:work-unfold .55s cubic-bezier(.16,.75,.2,1) both}
.work-dialog.is-closing{animation:work-fold .24s ease-in both}
.work-dialog.is-closing::backdrop{animation:dialog-backdrop .24s ease-in reverse both}
.work-dialog .dialog-grid{display:grid;grid-template-columns:1.15fr 1fr;min-height:370px;background:linear-gradient(100deg,#372a25aa,#342723ed),url('assets/opt/art/eternal-night.webp?v=a9324cb1b4') center/cover}
.dialog-art{width:100%;height:100%;object-fit:cover;min-height:370px;object-position:center}
.dialog-copy{padding:55px 35px 35px;position:relative;background:linear-gradient(#41312b99,#261d19be),url('assets/art/silk-pattern.webp?v=ce71f709ec') center/250px auto}
.dialog-copy:after{content:"";position:absolute;left:0;right:0;bottom:0;height:35px;background:url('assets/opt/art/cloud-border.webp?v=3e6cb70a20') center bottom/100% auto no-repeat;pointer-events:none;opacity:.7}
.dialog-copy .dialog-meta{font-size:13px;color:var(--gold);margin-bottom:13px}.dialog-copy h2{font:36px/1.5 var(--serif);margin-bottom:15px}.dialog-copy p{font-size:16px;line-height:1.95;color:var(--muted)}
.dialog-close{position:absolute;right:12px;top:12px;z-index:3;width:36px;height:36px;cursor:pointer;color:var(--gold);font:26px/1 sans-serif;background:#302420e8;border:1px solid #e2c3988c}
.dialog-close:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
body.has-work-dialog{overflow:hidden}
.motion-paused .route-curtain{display:none}.motion-paused .work-dialog[open],.motion-paused .work-dialog.is-closing{animation:none}.motion-paused .click-bloom{display:none}
.motion-paused .episode-card,.motion-paused .story-card,.motion-paused .award-row{animation:none!important}
@keyframes stage-sound{from{transform:scaleY(.35);opacity:.45}to{transform:scaleY(1.12);opacity:1}}
@keyframes art-card-arrive{from{opacity:0;transform:perspective(1000px) translateY(38px) rotateX(8deg);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes character-arrive{from{opacity:0;transform:translateX(50px)}to{opacity:.92;transform:none}}
@keyframes curtain-close{to{transform:translateX(0)}}
@keyframes curtain-open-left{from{transform:translateX(0)}to{transform:translateX(-102%)}}
@keyframes curtain-open-right{from{transform:translateX(0)}to{transform:translateX(102%)}}
@keyframes emblem-show{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
@keyframes emblem-hide{from{opacity:1;scale:1}to{opacity:0;scale:1.15}}
@keyframes click-bloom{to{transform:scale(5);opacity:0}}
@keyframes section-shine{0%{box-shadow:0 0 0 #efbf8a00}35%{box-shadow:0 0 40px #efbf8a60}100%{box-shadow:0 0 0 #efbf8a00}}
@keyframes work-unfold{from{opacity:0;transform:perspective(1200px) translateY(35px) rotateX(10deg) scale(.87);clip-path:inset(35% 0)}to{opacity:1;transform:none;clip-path:inset(0)}}
@keyframes work-fold{to{opacity:0;transform:translateY(25px) scale(.93)}}
@keyframes dialog-backdrop{from{opacity:0}to{opacity:1}}
@media(max-width:1100px){.site-header{gap:20px;padding-inline:3%}.site-header nav{gap:10px}.site-header nav a{padding-inline:12px}.activity-heading{padding-right:30px}.activity-heading .hero-character{right:35px}.page-shell{width:calc(100% - 60px)}}
@media(max-width:760px){.site-header{padding:12px 18px 14px;min-height:110px;gap:9px}.site-header nav{gap:9px;flex-wrap:nowrap}.site-header nav a{padding:8px 10px}.site-header:before{background-size:170px auto,160px auto;opacity:.4}.site-header:after{background-size:auto 45px}.page-shell{width:calc(100% - 36px)}.portal-scene{background:linear-gradient(0deg,#231721 20%,transparent 85%);min-height:0}.scene-art:after{background:linear-gradient(0deg,#231721 1%,#231721f0 17%,#231721c0 38%,#2317210a 76%)}.library-head,.activity-heading,.activity-detail-head{padding:30px 24px;margin:4px 0 25px;min-height:300px}.library-head{background-position:63% center}.library-head h1{font-size:40px;max-width:230px}.library-head>p:last-child{max-width:210px}.activity-heading{min-height:365px;padding-right:22px;background-position:58% center}.activity-heading h1{font-size:36px;max-width:270px}.activity-heading>div{position:relative;z-index:2}.activity-intro{font-size:16px;max-width:215px}.archive-meta{font-size:12px;max-width:220px}.activity-heading>img{width:165px;margin:20px 0 0}.activity-heading .hero-character{width:190px;height:330px;right:-40px;bottom:-135px;opacity:.75;z-index:0}.activity-detail-head h1 span{font-size:38px}.activity-facts{font-size:13px}.library-nav{gap:24px;padding:17px 18px;font-size:13px}.activities-page .library-nav{gap:14px 24px}.collection-heading{padding:15px 18px;min-height:68px}.collection-heading:before{width:125px;right:-3px;opacity:.45}.work-grid{gap:22px 15px}.work-card .work-meta,.work-card h3,.work-card p,.work-card>a{margin-inline:14px}.work-cover .cover-action{font-size:12px;right:9px;bottom:9px;padding:6px 10px}.episode-card{min-height:340px}.episode-card h3{margin-top:98px}.story-card{min-height:380px;padding-top:130px}.work-dialog .dialog-grid{grid-template-columns:1fr}.dialog-art{min-height:0;height:auto;max-height:33svh;aspect-ratio:16/9;object-fit:cover}.dialog-copy{padding:25px 25px 35px}.dialog-copy h2{font-size:30px}.site-footer{min-height:190px;padding:60px 18px 70px;align-items:flex-end}.site-footer:before{background-size:auto 70px}.site-footer>span,.site-footer>a{padding:5px 12px;font-size:12px}.site-footer>a[href="guestbook.html"]{display:none}.site-footer>span:nth-child(2){display:block}.library-bottom,.profile-end{padding:23px 18px}.award-row{padding:25px 20px}.stage-film{opacity:.19}}
@media(max-width:380px){.site-header nav{gap:5px}.site-header nav a{padding-inline:8px}.library-head h1{font-size:37px}.activity-heading h1{font-size:33px}}
@media(prefers-reduced-motion:reduce){.route-curtain,.click-bloom{display:none!important}.work-dialog[open]{opacity:1;transform:none;clip-path:none}.stage-film{display:none}.hero-character{opacity:.92!important;transform:none!important}}
.episode-top{background:linear-gradient(#46262d9e,#42242acd),url('assets/art/title-plaque.webp?v=f634e69050') center/100% 100% no-repeat!important;border:0!important;padding:9px 16px!important}
.profile-mark:before{inset:0;border:0;background:url('assets/art/scroll-frame.webp?v=97aa0414cb') center/100% 100% no-repeat;opacity:.24}
/* Keep the activity logo and character face in separate parts of the illustration. */
.activity-heading>img:not(.hero-character){position:absolute;right:280px;bottom:32px;width:200px;margin:0;align-self:auto}
.activity-heading .hero-character{height:600px;width:310px;right:20px;bottom:-305px}
@media(max-width:760px){.activity-heading>img:not(.hero-character){right:auto;left:24px;bottom:28px;width:145px}.activity-heading .hero-character{width:220px;height:400px;right:-30px;bottom:-190px}}
.activity-facts>span{padding:4px 8px;background:#271c18a3;border:1px solid #e2c39828}
.activity-facts{gap:10px 16px}
@media(min-width:761px){.scene-art{mask-image:linear-gradient(90deg,transparent,#000 18%)}}
/* Retain the artwork when legacy hover rules change the base background. */
.episode-card:hover,.episode-card:focus-visible{background-image:linear-gradient(0deg,#2b1e19f7 0%,#2b1e19e8 34%,#2b1e192b 73%,#2b1e199c),var(--episode-art);background-position:var(--episode-position,center 40%);background-size:cover}
.identity-portal:hover,.identity-portal:focus-visible{background-image:linear-gradient(100deg,#36242ad9,#2f2232b9),url('assets/art/silk-pattern.webp?v=ce71f709ec');background-size:cover}
.singer-portal:hover,.singer-portal:focus-visible{background-image:linear-gradient(100deg,#3d2939d5,#452a38a8),url('assets/opt/art/blossom-canopy.webp?v=1fd1ca5aa6');background-position:center 55%}
.button:hover,.button.rose:hover,.motion-toggle:hover,.back-top:hover{background-image:linear-gradient(#8c5255a8,#60383db8),url('assets/art/silk-pattern.webp?v=ce71f709ec');background-size:cover}

/* 主页氛围色（Claude, 2026-09-27）：主页插画是紫色夜樱，主页的导航、页脚和悬浮按钮沿用原来的暮紫色调（饱和度降低约两成，看久了不累）；其他页面仍为暖棕。 */
.home-page .site-header{background-color:#231a206b}
.home-page .nav-peek{background:#2a202a9c}
.home-page .site-footer{background-image:linear-gradient(0deg,#22141fe8,#22172340),url('assets/opt/art/dream-water.webp?v=0ed683b70c');box-shadow:inset 0 30px 40px -25px #201620}

.home-page .motion-toggle,.home-page .back-top{background-image:linear-gradient(#7b474ba8,#452e36b8),url('assets/art/silk-pattern.webp?v=ce71f709ec')}
.home-page .motion-toggle:hover,.home-page .back-top:hover{background-image:linear-gradient(#8c5255a8,#60383db8),url('assets/art/silk-pattern.webp?v=ce71f709ec')}
/* 2026-09-28 影之声活动卡右上角的声波条平时停着，鼠标移到卡片上（或键盘选中）时才跳动（Raymond 同意，减少同时在动的效果）。
   停着时五根高低错开，看起来仍是声波；手机上没有悬停，就一直是静止的样子。 */
.episode-sound i{animation-play-state:paused}
.episode-card:hover .episode-sound i,.episode-card:focus-within .episode-sound i{animation-play-state:running}
/* 2026-09-29 页脚（Raymond 要求）：去掉「影的世界 · YNC」，版权说明放正中；三个小块和日夜菜单等浮层统一成暖色半透明 frosted glass（文字颜色不变）。
   电脑上用三栏网格，让中间那块正好居中；手机上沿用原来的排法。 */
@media(min-width:761px){.site-footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:end}.site-footer>:first-child{justify-self:start}.site-footer>:last-child{justify-self:end}}
.site-footer>a{transition:background-color .2s,border-color .2s}
.site-footer>a:hover,.site-footer>a:focus-visible{background-color:#3a2e29c7;border-color:#ffffff47}
/* Curtain route without a flash (2026-09-29, Raymond approved): while the new page decodes the curtain art, the browser
   keeps showing the closed curtain of the previous page; interactions.js ends this hold as soon as the art is ready,
   2.5s at most. Other navigations skip the transition in interactions.js. */
@view-transition{navigation:auto}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}
html:active-view-transition-type(ync-curtain)::view-transition-old(root){animation:ync-vt-hold 2.2s linear both}
html:active-view-transition-type(ync-curtain)::view-transition-new(root){animation:ync-vt-wait 2.2s linear both}
/* Release (interactions.js adds .vt-release once the curtain art is ready): a short cross-fade between the two identical
   closed curtains instead of an instant swap; if nothing releases it, the hold itself also ends with a fade. */
html.vt-release:active-view-transition-type(ync-curtain)::view-transition-old(root){animation:ync-vt-out .2s linear both}
html.vt-release:active-view-transition-type(ync-curtain)::view-transition-new(root){animation:ync-vt-in .2s linear both}
@keyframes ync-vt-hold{0%,90%{opacity:1}to{opacity:0}}
@keyframes ync-vt-wait{0%,90%{opacity:0}to{opacity:1}}
@keyframes ync-vt-out{from{opacity:1}to{opacity:0}}
@keyframes ync-vt-in{from{opacity:0}to{opacity:1}}
/* Top banners (2026-09-29, Raymond): no tilt like the cards; on hover the picture zooms in a little, the frame warms up
   and a band of light sweeps across once (the light is added by effects.js, so only on devices with a mouse).
   background-origin:border-box also removes the thin line the picture used to leave along the banner edges. */
.hub-page .hub-intro{background-origin:border-box}
.hub-page .hub-intro,.voice-hero,.activity-archive .archive-detail-head{transition:box-shadow .6s ease,border-color .6s ease}
.banner-sheen{position:absolute;top:-12%;bottom:-12%;left:0;width:34%;z-index:4;pointer-events:none;background:linear-gradient(100deg,transparent,#fff1dc2b 28%,#ffe9c890 50%,#fff1dc2b 72%,transparent);mix-blend-mode:screen;opacity:0;transform:translateX(-130%) skewX(-16deg)}
@media(hover:hover) and (pointer:fine){
 .hub-page .hub-intro:before{content:"";position:absolute;inset:0;z-index:-2;background:inherit;background-origin:border-box;transform:scale(1.001);transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
 html.banner-armed .hub-page .hub-intro:hover:before{transform:scale(1.045)}
 .voice-hero .voice-hero-scene{overflow:hidden}
 .voice-hero .voice-hero-scene img,.activity-archive .archive-detail-art img{transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
 html.banner-armed .voice-hero:hover .voice-hero-scene img,html.banner-armed .activity-archive .archive-detail-head:hover .archive-detail-art img{transform:scale(1.045)}
 html.banner-armed .hub-page .hub-intro:hover{box-shadow:0 20px 52px #2919134d,inset 0 0 46px #efbf8a2e}
 html.banner-armed .activity-heading.voice-hero:hover{box-shadow:0 20px 50px #22191559,inset 0 0 46px #ecbc9675}
 html.banner-armed .activity-archive .archive-detail-head:hover{box-shadow:0 20px 52px #170d0975,inset 0 0 46px #efbf8a2e}
 html.banner-armed .hub-page .hub-intro:hover{border-color:#f8d4b6c4}
 html.banner-armed .hub-intro:hover>.banner-sheen,html.banner-armed .voice-hero:hover>.banner-sheen,html.banner-armed .archive-detail-head:hover>.banner-sheen{animation:banner-sheen 1.3s cubic-bezier(.3,.1,.2,1) .06s both}
}
@keyframes banner-sheen{0%{opacity:0;transform:translateX(-130%) skewX(-16deg)}18%,82%{opacity:1}100%{opacity:0;transform:translateX(330%) skewX(-16deg)}}
@media(prefers-reduced-motion:reduce){.hub-page .hub-intro:before,.voice-hero .voice-hero-scene img,.activity-archive .archive-detail-art img{transition:none;transform:none!important}.banner-sheen{display:none}}
.motion-paused .hub-page .hub-intro:before,.motion-paused.hub-page .hub-intro:before,.motion-paused .voice-hero .voice-hero-scene img,.motion-paused .archive-detail-art img{transition:none;transform:none!important}
.motion-paused .banner-sheen{display:none}
/* Bigger touch areas on phones and touch screens (2026-09-29): invisible hit zones only, the links and buttons look the same. */
@media (pointer:coarse),(max-width:760px){
 .breadcrumb a,.library-bottom a,.story-tools button{position:relative}
 .breadcrumb a::after,.library-bottom a::after{content:"";position:absolute;inset:-10px -5px}
 .story-tools button::after{content:"";position:absolute;inset:-7px -3px}
 .archive-document-body a:not(.button){position:relative}
 .archive-document-body a:not(.button)::after{content:"";position:absolute;inset:-8px -2px}
}
/* ===== 2026-10-03 优化（Raymond 批准的三档清单）===== */
/* 第 9 项：画面上看不清的小字垫一层暖棕半透明底（和右下角菜单同一套暖色毛玻璃），字色不变 */
body[data-scene="stage"] .breadcrumb,.activity-section-note{width:fit-content;max-width:100%;box-sizing:border-box;border:1px solid #ffffff1f;border-radius:12px;background:linear-gradient(160deg,#ffffff14,#ffffff05 55%,#ffffff0a),#2a2320d9;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:inset 0 1px 0 #ffffff1a,0 6px 18px #1e120e33}
body[data-scene="stage"] .breadcrumb{margin:21px 0;padding:6px 14px}
.activity-section-note{padding:6px 14px}
/* 小影子 / 影奶茶页：文字压在整页背景画上，画面压暗一些（只这两页） */
body.inner-page[data-scene="quiet"] .ambient-stage,body.inner-page[data-scene="sakura"] .ambient-stage{background:linear-gradient(#281b16b0,#261b17dc),url('assets/opt/art/eternal-night.webp?v=a9324cb1b4') center/cover}
@media(max-width:760px){body.inner-page[data-scene="quiet"] .ambient-stage,body.inner-page[data-scene="sakura"] .ambient-stage{background:linear-gradient(#281b16d9,#261b17e8),url('assets/opt/art/eternal-night.webp?v=a9324cb1b4') center/cover}}   /* 手机上字更多地压在画的亮处，再暗一点 */
/* 第 10 项：右下角「设置」「↑」按钮底色压深，金字看得清 */
.motion-toggle,.back-top,.home-page .motion-toggle,.home-page .back-top{background-image:linear-gradient(#5a3236d6,#30221ee0),url('assets/art/silk-pattern.webp?v=ce71f709ec')}
/* 第 13 项：触屏上加大点按范围（看不见的点击区，外观不变） */
@media (pointer:coarse),(max-width:760px){
 .profile-nav>a,.profile-end a,.quiet-link,.library-entry{position:relative}
 .profile-nav>a::after{content:"";position:absolute;inset:-5px -10px}
 .profile-end a::after,.quiet-link::after{content:"";position:absolute;inset:-10px -6px}
 .library-entry::after{content:"";position:absolute;inset:-10px 0}
}
/* 顶部横幅和人物志舞台的视差滚动（Claude, 2026-10-03，Raymond 要求）：
   横幅（.hub-intro、影之声总览 .voice-hero、每期活动页 .archive-detail-head）往上离开屏幕时，横幅里的画落在后面——
   以横幅上缘为轴慢慢放大（translate + scale 合起来上缘不动），越往下的部分比页面走得越慢；文字、外框照常跟着页面走。
   人物志舞台：舞台背景画（interactions.js 加的 .stage-depth，照抄舞台背景）在舞台进出屏幕时比人物和金框走得慢——
   进来时以下缘为轴、出去时以上缘为轴放大，舞台整个在屏幕里时和原来一模一样。
   页面停在顶部时横幅也和原来一模一样；只在支持滚动驱动动画的浏览器生效；减少动态效果、暂停动效时不动。
   --plx-k：滚完时画面挪动横幅高度的几成（放大倍数 = 1 + 2k）。 */
@keyframes plx-exit{to{translate:0 calc(var(--plx-k)*100%);scale:calc(1 + 2*var(--plx-k))}}
@keyframes plx-pass{entry 0%{translate:0 calc(var(--plx-k)*-100%);scale:calc(1 + 2*var(--plx-k))}entry 100%,exit 0%{translate:none;scale:none}exit 100%{translate:0 calc(var(--plx-k)*100%);scale:calc(1 + 2*var(--plx-k))}}
.character-stage>.stage-depth{position:absolute;inset:0;z-index:0;background:inherit;pointer-events:none}
@supports(animation-timeline:view()){@media(prefers-reduced-motion:no-preference){
 .hub-page .hub-intro,.voice-hero,.archive-detail-head{view-timeline:--plx-head block;view-timeline-inset:0px}   /* inset 默认会扣掉 html 的 scroll-padding-top，横幅一打开就算「在离开」 */
 .character-stage{view-timeline:--plx-stage block;view-timeline-inset:0px}
 body.hub-page:not(.motion-paused) .hub-intro:before,body:not(.motion-paused) .voice-hero .voice-hero-scene img,body:not(.motion-paused) .archive-detail-head .archive-detail-art img{--plx-k:.08;animation:plx-exit linear both;animation-timeline:--plx-head;animation-range:exit 0% exit 100%}
 body:not(.motion-paused) .archive-detail-head .archive-detail-art img{--plx-k:.05}
 body:not(.motion-paused) .character-stage>.stage-depth{--plx-k:.07;animation:plx-pass linear both;animation-timeline:--plx-stage}
}}

/* 换页帘幕不再偏黄（Claude, 2026-10-07，Raymond：「切换页面的过场动画会有一层有点黄的滤镜」）：
   两扇帘幕的插画上原来盖着一层棕色渐变（#402920 59% → #2a1d19 79%，上面 .route-curtain>i:after），把千年之恋的紫色夜景、手机上的桃花都染成了土黄。
   改成很淡的夜色（上 10%、下 40%，不带黄），插画保留原来的颜色；中间麒麟纹章背后加一圈淡淡的暗晕（两扇各画半圈），纹章照样看得清。
   插画还没出来时露出的底色也从棕色改成夜色。 */
.route-curtain>i{background-color:#17111d}
.route-curtain>i:after{background:radial-gradient(circle at 100% 50%,#120c1880,#120c1800 200px),linear-gradient(#120c181a,#120c1866)}
.route-curtain>i:nth-child(2):after{background:radial-gradient(circle at 0 50%,#120c1880,#120c1800 200px),linear-gradient(#120c181a,#120c1866)}

/* 2026-10-07 Raymond：页脚正中版权说明下面加一行「商务合作 · contact@yncshadow.com」（mailto）。
   两行放在同一个 span 里，页脚仍是左中右三个子元素；两行时胶囊改成圆角矩形，链接沿用页脚文字颜色，只加一条淡下划线。 */
.site-footer>span{text-align:center;line-height:1.7;border-radius:18px}
.site-footer>span a{color:inherit;text-decoration:underline;text-decoration-color:#ffffff4d;text-underline-offset:3px;transition:text-decoration-color .2s}
.site-footer>span a:hover,.site-footer>span a:focus-visible{text-decoration-color:currentColor}
/* ===== island-nav.css ===== */
/* Local refinement: floating translucent navigation and a complete portrait. */
:root{--island-space:110px}
body{padding-top:var(--island-space)}
.site-header{position:fixed;top:16px;left:50%;width:min(1180px,calc(100% - 40px));min-height:80px;padding:11px 26px;gap:24px;z-index:66;transform:translateX(-50%);border:1px solid #fff3;border-radius:999px;background:linear-gradient(125deg,#ffffff22,#ffffff09 48%,#fff1),#231c1abd;backdrop-filter:blur(24px) saturate(145%);-webkit-backdrop-filter:blur(24px) saturate(145%);box-shadow:inset 0 1px 0 #fff2,inset 0 -1px 0 #fff1,0 10px 36px #1e120e2b;opacity:1;transition:opacity .32s ease,transform .42s cubic-bezier(.2,.75,.25,1),box-shadow .3s;will-change:transform,opacity}
.site-header:before,.site-header:after{content:none}
.site-header .brand{flex-shrink:0;gap:12px}
.site-header .brand img{width:82px;height:54px}
.site-header nav{gap:8px;flex-wrap:nowrap}
.site-header nav a{padding:10px 17px;border:1px solid transparent;border-radius:999px;background:transparent;box-shadow:none}
.site-header nav a:hover,.site-header nav a:focus-visible,.site-header nav a[aria-current]{background:linear-gradient(135deg,#ffffff26,#ffffff0c);border-color:#ffefd42e;box-shadow:inset 0 1px 0 #fff2,0 3px 12px #1e120e10}
.site-header nav a:before,.site-header nav a[aria-current]:after{content:none}
.site-header nav a:focus-visible{outline-offset:3px}
.island-ready.island-scrolled:not(.island-open) .site-header{opacity:0;transform:translate(-50%,-135%) scale(.96);pointer-events:none}
.nav-edge{position:fixed;inset:0 0 auto;height:24px;z-index:65;display:none}
.island-scrolled .nav-edge{display:block}
.nav-peek{position:fixed;top:4px;left:50%;transform:translate(-50%,-70px);z-index:67;min-height:34px;padding:5px 17px;border:1px solid #ffffff40;border-radius:999px;background:#2a23209c;backdrop-filter:blur(18px);color:var(--ink);font:inherit;font-size:12px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .25s,transform .3s}
.nav-peek:focus-visible{transform:translate(-50%,0);opacity:1;pointer-events:auto;outline:2px solid var(--gold);outline-offset:2px}
.home-page .portal-scene{margin-top:calc(-1 * var(--island-space));min-height:100svh;padding-top:calc(45px + var(--island-space))}
/* The portrait keeps its whole canvas; the former transparent cutout is removed. */
.activity-heading{min-height:460px;display:flex;align-items:center;padding-right:390px}
.activity-heading>div{max-width:100%}
.activity-illustration{position:absolute;top:24px;right:38px;width:274px;height:410px;margin:0;overflow:hidden;border:1px solid #f4d9b980;border-radius:140px 140px 14px 14px;box-shadow:0 12px 35px #2a191366,inset 0 0 0 5px #ffe8cd15;background:#302622;z-index:1}
.activity-illustration img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;margin:0}
.activity-heading>img:not(.hero-character){right:344px;bottom:36px;width:185px;z-index:1}
@media(max-width:1150px){.site-header{gap:18px;padding-inline:21px}.site-header nav a{padding-inline:14px}.home-page .portal-scene{padding-top:calc(42px + var(--island-space))}}
@media(max-width:900px) and (min-width:761px){.activity-heading{padding-left:30px;padding-right:315px}.activity-illustration{right:25px;width:248px;height:371px;top:42px}.activity-heading>img:not(.hero-character){right:302px;width:150px}}
@media(max-width:760px){:root{--island-space:132px}.site-header{top:10px;width:calc(100% - 24px);min-height:110px;border-radius:34px;flex-wrap:wrap;justify-content:center;gap:3px;padding:8px 12px 10px}.site-header .brand{gap:8px}.site-header .brand img{width:65px;height:45px}.site-header nav{width:100%;justify-content:center;gap:4px}.site-header nav a{padding:7px 12px}.home-page .portal-scene{padding-top:calc(208px + var(--island-space))}.home-page .scene-art{top:var(--island-space);height:calc(575px - var(--island-space));mask-image:linear-gradient(180deg,transparent,#000 28px)}.home-page .scene-caption{top:calc(25px + var(--island-space))}.activity-heading{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:28px 24px 86px}.activity-heading>div{max-width:none}.activity-heading h1{max-width:none}.activity-intro,.archive-meta{max-width:none}.activity-illustration{position:relative;inset:auto;width:min(240px,100%);height:auto;aspect-ratio:3007 / 4500;flex-shrink:0;margin:24px auto 0}.activity-heading>img:not(.hero-character){left:50%;right:auto;bottom:22px;transform:translateX(-50%);width:148px;margin:0}}
@media(max-width:420px){.home-page .portal-scene{padding-top:calc(196px + var(--island-space))}.site-header nav a{padding-inline:10px}}
@media(hover:none),(pointer:coarse){.island-scrolled:not(.island-open) .nav-peek{transform:translate(-50%,0);opacity:1;pointer-events:auto}}
@media(prefers-reduced-motion:reduce){.site-header,.nav-peek{transition:none}}
.motion-paused .site-header,.motion-paused .nav-peek{transition:none}
/* Small screens use an explicit top handle as the touch equivalent of hover. */
@media(max-width:760px){.island-scrolled:not(.island-open) .nav-peek{transform:translate(-50%,0);opacity:1;pointer-events:auto}}
/* 2026-09-28 导航下拉目录（由 island-nav.js 生成；下拉顶部透明留白让鼠标移进目录时不断开）：鼠标悬停展开；键盘与触屏平板用 ↓ 按钮展开。手机宽度（≤760）隐藏箭头和下拉，导航保持原样。 */
.site-header nav .nav-item{position:relative;display:flex}
@media(min-width:761px){.site-header nav a.has-menu{display:inline-flex;align-items:center;justify-content:center}}
.site-header .nav-chevron{display:inline-flex;margin-left:6px;opacity:.78;transition:transform .25s ease,opacity .2s}
.site-header .nav-chevron svg{display:block}
.site-header .nav-caret{position:absolute;top:0;right:0;bottom:0;width:34px;margin:0;padding:0;border:0;border-radius:999px;background:transparent;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.site-header .nav-caret:focus-visible{outline:2px solid var(--gold);outline-offset:-5px}
.site-header .nav-menu{position:absolute;top:100%;left:50%;z-index:3;padding-top:22px;opacity:0;visibility:hidden;transform:translate(-50%,-5px);transition:opacity .18s ease,transform .22s cubic-bezier(.2,.75,.25,1),visibility 0s linear .22s}
.site-header .nav-menu ul{min-width:168px;margin:0;padding:7px;list-style:none;border:1px solid #ffffff33;border-radius:20px;background:linear-gradient(160deg,#ffffff14,#ffffff05 55%),#2a2320f2;box-shadow:inset 0 1px 0 #fff2,0 16px 38px #1e120e47}
.site-header nav .nav-menu a{display:block;padding:9px 16px;border:0;border-radius:13px;background:none;box-shadow:none;text-shadow:none;white-space:nowrap}
.site-header nav .nav-menu a:before{content:none}
.site-header nav .nav-menu a:hover,.site-header nav .nav-menu a:focus-visible{background:#ffffff17;border-color:transparent;box-shadow:none}
.site-header nav .nav-menu a:focus-visible{outline-offset:-2px}
.site-header .nav-item.open .nav-menu{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
.site-header .nav-item.open .nav-chevron{transform:rotate(180deg);opacity:1}
.site-header nav .nav-item.open>a{color:var(--gold);background:linear-gradient(135deg,#ffffff26,#ffffff0c);border-color:#ffefd42e;box-shadow:inset 0 1px 0 #fff2,0 3px 12px #1e120e10}
@media(hover:hover) and (pointer:fine){
 .site-header .nav-caret{pointer-events:none}
 .site-header .nav-item:hover .nav-menu{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
 .site-header .nav-item:hover .nav-chevron{transform:rotate(180deg);opacity:1}
 .site-header nav .nav-item:hover>a{color:var(--gold);background:linear-gradient(135deg,#ffffff26,#ffffff0c);border-color:#ffefd42e;box-shadow:inset 0 1px 0 #fff2,0 3px 12px #1e120e10}
}
@media(max-width:760px){.site-header nav .nav-item{display:contents}.site-header .nav-chevron,.site-header .nav-caret,.site-header .nav-menu{display:none}}
@media(prefers-reduced-motion:reduce){.site-header .nav-menu,.site-header .nav-chevron{transition:none}}
.motion-paused .site-header .nav-menu,.motion-paused .site-header .nav-chevron{transition:none}
/* 2026-09-28 下拉目录改成苹果式弹出：从上沿轻轻放大、带一点回弹；收起更快（曲线定义在 motion.css） */
.site-header .nav-menu{transform-origin:50% 0;transform:translate(-50%,-6px) scale(.94);transition:opacity .16s ease,transform .2s var(--ync-glide),visibility 0s linear .2s}
.site-header .nav-item.open .nav-menu{transform:translate(-50%,0) scale(1);transition:opacity .2s ease,transform .48s var(--ync-pop),visibility 0s}
@media(hover:hover) and (pointer:fine){.site-header .nav-item:hover .nav-menu{transform:translate(-50%,0) scale(1);transition:opacity .2s ease,transform .48s var(--ync-pop),visibility 0s}}
@media(prefers-reduced-motion:reduce){.site-header .nav-menu,.site-header .nav-item.open .nav-menu,.site-header .nav-item:hover .nav-menu{transform:translate(-50%,0);transition:opacity .15s,visibility 0s}}
/* 2026-09-28 手机导航改成一行左右滑（Raymond 同意）：原来窄屏上五个入口排不下会折成两行，导航栏变高；
   现在排成一行，放不下时左右滑动，两边淡出提示还有；打开页面时当前所在的那一项自动滑到中间（island-nav.js）。
   放得下时照旧居中（用左右自动边距，放不下时自动变成 0，最左边的一项不会被挡住）。
   navigation-label.css 在后面加载、也写了手机导航，所以这里的选择器多带一个 [aria-label] 以确保生效。
   560 像素以下原来折两行，导航栏矮了约 34 像素，顶部给导航留的空间（--island-space）也同样减 34，正文和导航之间的距离不变。 */
@media(max-width:760px){
 .site-header nav[aria-label]{justify-content:flex-start;flex-wrap:nowrap;gap:4px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;scroll-padding-inline:18px;padding:4px 14px;margin:-4px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
 .site-header nav[aria-label]::-webkit-scrollbar{display:none}
 .site-header nav[aria-label]>a:first-child,.site-header nav[aria-label]>.nav-item:first-child>a{margin-left:auto}
 .site-header nav[aria-label]>a:last-child,.site-header nav[aria-label]>.nav-item:last-child>a{margin-right:auto}
 .site-header nav[aria-label] a{flex:none;white-space:nowrap;scroll-snap-align:center;padding:7px 12px}
}
@media(max-width:560px){html:root{--island-space:146px}}
/* Phone navigation hint (2026-09-29): a wider fade on the side where more items are hidden, so it reads as "swipe for more". */
@media(max-width:760px){
 .site-header nav[aria-label]{--fade-l:14px;--fade-r:14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent)}
 .site-header nav[aria-label].more-left{--fade-l:52px}
 .site-header nav[aria-label].more-right{--fade-r:52px}
}
/* 2026-10-03 优化第 10 项：导航岛的玻璃底由 #231c1a6b 压深到 #231c1abd，浅色画面上导航字、「我的」也看得清 */