*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--pink-50: #fff0f5;--pink-100: #ffe0ec;--pink-200: #ffc8dc;--pink-300: #ffaaca;--pink-400: #ff85b3;--pink-500: #f06292;--pink-600: #c2185b;--text-primary: #3d2030;--text-secondary: #7a4060;--text-muted: #b08090;--card-bg: rgba(255, 255, 255, .75);--card-border: rgba(255, 180, 210, .45);--radius-sm: 8px;--radius-md: 16px;--radius-lg: 24px;--shadow-sm: 0 2px 8px rgba(200, 100, 140, .1);--shadow-md: 0 6px 24px rgba(200, 100, 140, .15);--shadow-lg: 0 12px 40px rgba(200, 100, 140, .2);--font-serif: "Noto Serif SC", "Songti SC", Georgia, serif;--font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif}html{scroll-behavior:smooth}body{font-family:var(--font-sans);color:var(--text-primary);background:linear-gradient(160deg,#fff0f7,#ffe8f2 40%,#fef0ff);min-height:100vh;line-height:1.6}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(circle at 20% 20%,rgba(255,182,193,.18) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(221,160,221,.14) 0%,transparent 50%),radial-gradient(circle at 60% 10%,rgba(255,218,232,.2) 0%,transparent 40%);pointer-events:none;z-index:0}.app{position:relative;z-index:1}.site-header{position:sticky;top:0;z-index:100;backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);background:#fff0f8d1;border-bottom:1px solid var(--card-border);box-shadow:0 2px 12px #c8648c14}.header-inner{max-width:1100px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between}.header-logo{display:flex;align-items:center;gap:8px;text-decoration:none}.logo-icon{font-size:22px;color:var(--pink-500);animation:floatNote 3s ease-in-out infinite}@keyframes floatNote{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.logo-text{font-family:var(--font-serif);font-size:18px;font-weight:700;color:var(--text-primary);letter-spacing:.05em}.header-nav{display:flex;align-items:center;gap:28px}.header-nav a{font-size:14px;color:var(--text-secondary);text-decoration:none;font-weight:500;transition:color .2s;position:relative}.header-nav a:after{content:"";position:absolute;bottom:-3px;left:0;width:0;height:2px;background:var(--pink-400);border-radius:2px;transition:width .25s ease}.header-nav a:hover{color:var(--pink-600)}.header-nav a:hover:after{width:100%}.about-section{max-width:1100px;margin:0 auto;padding:80px 24px 60px}.about-card{display:flex;align-items:center;gap:56px;background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-lg);padding:52px 60px;box-shadow:var(--shadow-lg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.about-avatar-wrap{position:relative;flex-shrink:0}.about-avatar{width:160px;height:160px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:var(--shadow-md);display:block;position:relative;z-index:1}.avatar-ring{position:absolute;top:-10px;right:-10px;bottom:-10px;left:-10px;border-radius:50%;border:2px dashed var(--pink-300);animation:spinRing 20s linear infinite;opacity:.6}@keyframes spinRing{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.about-content{flex:1;min-width:0}.about-name{font-family:var(--font-serif);font-size:36px;font-weight:700;color:var(--text-primary);letter-spacing:.04em;line-height:1.2;margin-bottom:6px}.about-subtitle{font-size:15px;color:var(--text-muted);margin-bottom:18px;letter-spacing:.03em}.about-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}.meta-chip{font-size:13px;padding:4px 12px;background:var(--pink-100);color:var(--pink-600);border-radius:99px;border:1px solid var(--pink-200);font-weight:500}.about-bio{font-size:15px;color:var(--text-secondary);line-height:1.8;margin-bottom:24px}.about-links{display:flex;gap:12px;flex-wrap:wrap}.link-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 20px;border-radius:99px;font-size:14px;font-weight:600;text-decoration:none;transition:transform .2s,box-shadow .2s}.link-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.link-bili{background:linear-gradient(135deg,#fb7299,#f05c80);color:#fff}.link-blog{background:linear-gradient(135deg,#c9a0e8,#a78bfa);color:#fff}.works-section{max-width:1100px;margin:0 auto;padding:20px 24px 80px}.section-header{text-align:center;margin-bottom:48px}.section-title{font-family:var(--font-serif);font-size:32px;font-weight:700;color:var(--text-primary);letter-spacing:.08em;display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:8px}.title-deco{color:var(--pink-400);font-size:22px}.section-sub{font-size:14px;color:var(--text-muted);letter-spacing:.06em}.works-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px}.track-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .3s ease,box-shadow .3s ease;display:flex;flex-direction:column}.track-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}.track-cover-wrap{position:relative;aspect-ratio:1 / 1;overflow:hidden;background:var(--pink-100)}.track-cover{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.track-card:hover .track-cover{transform:scale(1.06)}.status-badge{position:absolute;top:12px;right:12px;font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px;letter-spacing:.04em;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.status-released{background:#2da05ae0;color:#fff}.status-pending{background:#ff9800e0;color:#fff}.status-wip{background:#6482dce0;color:#fff}.status-planning{background:#9664b4d1;color:#fff}.track-note-overlay{position:absolute;bottom:0;left:0;right:0;padding:10px 14px;background:linear-gradient(to top,rgba(60,20,40,.65),transparent);color:#ffffffeb;font-size:12px;font-weight:500;letter-spacing:.04em}.track-info{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}.track-title{font-family:var(--font-serif);font-size:18px;font-weight:700;color:var(--text-primary);letter-spacing:.03em;line-height:1.3}.track-vocal{font-size:12px;color:var(--text-muted);letter-spacing:.04em}.track-tags{display:flex;flex-wrap:wrap;gap:6px}.tag-chip{font-size:11px;font-weight:600;padding:3px 10px;border-radius:99px;border:1px solid;letter-spacing:.03em;white-space:nowrap}.track-illust{font-size:12px;color:var(--text-muted)}.track-illust a{color:var(--pink-500);text-decoration:none}.track-illust a:hover{text-decoration:underline}.track-actions{display:flex;gap:10px;margin-top:auto;padding-top:4px}.action-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:8px 12px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;text-decoration:none;transition:transform .18s,box-shadow .18s,opacity .18s;cursor:pointer}.action-btn:not(.btn-disabled):hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001f}.btn-bili{background:linear-gradient(135deg,#fb7299,#f05070);color:#fff}.btn-netease{background:linear-gradient(135deg,#e03030,#c01820);color:#fff}.btn-disabled{opacity:.35;cursor:not-allowed;filter:grayscale(.4)}.site-footer{border-top:1px solid var(--card-border);background:#fff0f8b3;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.footer-inner{max-width:1100px;margin:0 auto;padding:36px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}.footer-name{font-family:var(--font-serif);font-size:18px;font-weight:700;color:var(--text-primary);letter-spacing:.08em}.footer-links{display:flex;align-items:center;gap:12px}.footer-links a{font-size:13px;color:var(--text-secondary);text-decoration:none;transition:color .2s}.footer-links a:hover{color:var(--pink-500)}.footer-sep{color:var(--pink-300)}.footer-copy{font-size:12px;color:var(--text-muted)}@media(max-width:768px){.about-card{flex-direction:column;text-align:center;padding:36px 28px;gap:32px}.about-meta,.about-links{justify-content:center}.about-name{font-size:28px}.works-grid{grid-template-columns:1fr}.header-nav{gap:16px}.header-nav a{font-size:13px}}@media(max-width:480px){.about-section{padding:48px 16px 40px}.works-section{padding:16px 16px 60px}.header-inner{padding:0 16px}}
