:root {
  --paper:#fff;
  --ink:#151515;
  --muted:#777;
  --line:#dedede}
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:90px}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased}
a {
  color:inherit;
  text-decoration:none}
button {
  color:inherit;
  font:inherit;
  cursor:pointer}
a,button {
  -webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible {
  outline:2px solid #888;
  outline-offset:6px}
.skip {
  position:fixed;
  top:-80px;
  z-index:20;
  background:white;
  padding:15px}
.skip:focus {
  top:0}
.header {
  height:88px;
  padding:0 6%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:white;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:10}
.wordmark {
  font-weight:800;
  font-size:25px;
  letter-spacing:-1px}
.wordmark span {
  margin-left:18px;
  font-size:12px;
  letter-spacing:2px;
  font-weight:400}
nav {
  display:flex;
  gap:30px;
  font-size:13px}
nav a:hover,.text-link:hover {
  text-decoration:underline;
  text-underline-offset:6px}
.menu-toggle {
  color:#080808;
  -webkit-text-fill-color:#080808;
  display:none}
.hero {
  padding:85px 6% 25px;
  background:#080808;
  color:white;
  position:relative;
  overflow:hidden}
.hero-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:1}
h1 {
  margin:0;
  font-size:clamp(46px,6.8vw,100px);
  font-weight:500;
  letter-spacing:-4px;
  line-height:1.12}
h1>span {
  display:block;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(85px,13vw,186px);
  font-weight:400;
  letter-spacing:-8px}
.hero-side {
  padding-right:5%;
  font-size:23px;
  line-height:1.7}
.english {
  font-size:11px;
  letter-spacing:2px;
  color:#999;
  margin-top:30px}
.hero-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:40px;
  position:relative;
  z-index:1}
.hero-bottom p {
  font-size:16px;
  letter-spacing:2px}
.button {
  display:inline-flex;
  align-items:center;
  gap:70px;
  border:1px solid #bbb;
  padding:18px 24px;
  font-size:13px}
.button:hover {
  background:#fff;
  color:#111}
.staff {
  position:absolute;
  right:15%;
  top:20%;
  width:28%;
  height:55%;
  transform:rotate(-18deg);
  opacity:.07}
.staff i {
  display:block;
  border-top:1px solid white;
  height:22%}
.staff b {
  font-family:Georgia,serif;
  position:absolute;
  top:5%;
  font-size:240px;
  font-weight:400}
.hero-foot {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  letter-spacing:2px;
  color:#999;
  border-top:1px solid #333;
  margin-top:65px;
  padding-top:20px}
.section {
  padding:95px 6%;
  border-bottom:1px solid var(--line)}
.section-label {
  font-size:10px;
  letter-spacing:2px;
  color:var(--muted);
  margin-bottom:28px}
.about {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:60px}
.about-content {
  display:grid;
  grid-template-columns:1fr 210px;
  gap:45px}
.portrait {
  width:100%;
  height:280px;
  object-fit:cover}
h2 {
  font-size:clamp(28px,3.3vw,48px);
  font-weight:400;
  line-height:1.4;
  letter-spacing:-1px;
  margin:0 0 30px}
.body-copy {
  font-size:15px;
  line-height:2.1;
  max-width:680px;
  color:#555}
.services {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:30px}
.services span {
  font-size:11px;
  border:1px solid var(--line);
  padding:9px 12px}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:45px;
  gap:30px}
.section-heading h2 {
  margin-bottom:0}
.section-heading p {
  font-size:12px;
  line-height:1.8;
  margin:0}
.muted {
  color:var(--muted)}
.work-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:45px 25px}
.cover {
  aspect-ratio:1;
  overflow:hidden;
  background:#f1f1ef;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative}
.cover img {
  width:100%;
  height:100%;
  object-fit:cover}
.cover-type {
  font-family:Georgia,"Songti SC",serif;
  font-size:clamp(28px,3vw,48px);
  writing-mode:vertical-rl;
  letter-spacing:8px;
  z-index:1}
.cover:after {
  content:"";
  position:absolute;
  width:65%;
  height:65%;
  border:1px solid #d1d1ce;
  border-radius:50%;
  transform:translate(30%,15%)}
.cover:has(img):after {
  display:none}
.work:nth-child(3n+2) .cover {
  background:#1b1b1b;
  color:white}
.work:nth-child(3n+2) .cover:after {
  border-color:#444}
.work:nth-child(3n) .cover {
  background:#deded9}
.cover-caption {
  position:absolute;
  bottom:18px;
  left:18px;
  font-size:8px;
  letter-spacing:2px}
.work h3 {
  font-size:19px;
  font-weight:500;
  margin:19px 0 8px}
.work-meta {
  font-size:11px;
  color:#777;
  display:flex;
  justify-content:space-between;
  gap:8px}
.listen {
  font-size:12px;
  display:inline-block;
  margin-top:18px;
  border-bottom:1px solid #aaa;
  padding-bottom:5px}
.section-note {
  font-size:11px;
  color:#888;
  margin:35px 0 0}
.project {
  display:grid;
  gap:30px;
  border-top:1px solid var(--line);
  padding:32px 0}
.project-category {
  font-size:10px;
  letter-spacing:1px;
  color:#777;
  padding-top:9px}
.project h3 {
  font-size:26px;
  margin:0 0 10px;
  font-weight:400}
.project-subtitle {
  font-size:13px}
.project p {
  font-size:13px;
  color:#777;
  line-height:1.8;
  margin:10px 0 0}
.role {
  font-size:12px;
  padding-top:9px}
.video-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px}
.video-screen {
  aspect-ratio:16/9;
  background:#f0f0ed;
  position:relative;
  display:grid;
  place-items:center;
  border:1px solid #e6e6e3}
.video-placeholder {
  text-align:center}
.play-icon {
  font-size:25px;
  display:block;
  margin-bottom:15px;
  color:#666}
.video-placeholder p {
  font-size:12px;
  color:#777}
.video h3 {
  font-size:16px;
  font-weight:400;
  margin:18px 0 0}
.video-screen button {
  border:0;
  background:transparent;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  color:inherit}
.video-screen iframe {
  width:100%;
  height:100%;
  border:0}
.video-screen img {
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover}
.video-screen:has(img) .video-placeholder {
  background:#ffffffde;
  padding:15px;
  z-index:1}
.text-link {
  font-size:12px}
.contact {
  background:#101010;
  color:white}
.contact h2 {
  font-size:clamp(48px,6vw,86px);
  margin:0 0 25px}
.contact>p {
  color:#aaa;
  font-size:14px}
.contact-links {
  display:flex;
  flex-wrap:wrap;
  gap:15px 35px;
  margin-top:42px}
.contact-links a,.contact-links button {
  padding:15px 0;
  color:white;
  border:0;
  border-bottom:1px solid #555;
  background:none;
  text-align:left;
  font-size:14px}
.contact-links small {
  display:block;
  color:#999;
  font-size:9px;
  letter-spacing:2px;
  margin-bottom:10px}
footer {
  padding:28px 6%;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:10px;
  color:#777}
#toast {
  position:fixed;
  bottom:30px;
  left:50%;
  transform:translateX(-50%);
  background:#333;
  color:#fff;
  padding:12px 20px;
  font-size:13px;
  z-index:30;
  opacity:0;
  pointer-events:none}
#toast.show {
  opacity:1}
.noscript {
  padding:30px}
.more-works {
  color:#080808;
  -webkit-text-fill-color:#080808;
  margin-top:40px;
  background:white;
  border:1px solid #aaa;
  padding:14px 28px}
.work[hidden] {
  display:none}
@media(max-width:900px) {
  nav {
  gap:17px}
.about {
  grid-template-columns:1fr;
  gap:10px}
.hero-side {
  padding:0}
.project {
  }
.role {
  padding-top:0}
.section {
  padding-top:70px;
  padding-bottom:70px}
.about-content {
  grid-template-columns:1fr 180px}
}
@media(max-width:600px) {
  .header {
  height:68px}
.wordmark {
  font-size:22px}
.wordmark span {
  font-size:10px;
  margin-left:10px}
.menu-toggle {
  display:flex;
  gap:18px;
  align-items:center;
  background:none;
  border:0;
  font-size:12px;
  padding:10px}
nav {
  display:none;
  position:absolute;
  top:68px;
  left:0;
  right:0;
  background:white;
  padding:25px 6%;
  border-bottom:1px solid #ddd;
  flex-direction:column;
  gap:25px}
nav.open {
  display:flex}
.hero {
  padding-top:65px}
.hero-title {
  display:block}
h1 {
  letter-spacing:-2px}
h1>span {
  letter-spacing:-4px;
  font-size:28vw}
.hero-side {
  display:flex;
  justify-content:space-between;
  margin-top:28px;
  font-size:15px}
.hero-side p {
  margin:0}
.english {
  font-size:9px}
.hero-bottom {
  display:block;
  margin-top:30px}
.hero-bottom p {
  font-size:12px;
  letter-spacing:1px}
.button {
  margin-top:15px;
  padding:15px 20px}
.hero-foot {
  margin-top:45px;
  font-size:8px}
.section {
  padding:55px 6%}
.section-label {
  margin-bottom:20px}
.about-content {
  grid-template-columns:1fr}
.portrait {
  height:310px;
  width:75%;
  margin-top:10px}
.section-heading {
  align-items:start;
  display:block;
  margin-bottom:30px}
.section-heading>p,.section-heading>.text-link {
  display:block;
  margin-top:15px}
h2 {
  font-size:28px}
.work-grid {
  grid-template-columns:1fr 1fr;
  gap:30px 16px}
.cover-type {
  font-size:27px;
  letter-spacing:4px}
.cover-caption {
  left:10px;
  bottom:10px;
  font-size:6px}
.work h3 {
  font-size:16px;
  margin-top:14px}
.work-meta {
  display:block;
  line-height:1.8;
  font-size:10px}
.work-meta span {
  display:block}
.project {
  gap:12px;
  padding:25px 0}
.role {
  font-size:11px}
.project h3 {
  font-size:24px}
.video-grid {
  grid-template-columns:1fr;
  gap:30px}
.contact h2 {
  font-size:54px}
.contact-links {
  flex-direction:column;
  gap:12px;
  align-items:start}
.contact-links a,.contact-links button {
  width:100%;
  font-size:16px}
footer {
  flex-wrap:wrap;
  line-height:1.8}
footer span:nth-child(2) {
  display:none}
}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
}
.cover-type.long {
  writing-mode:horizontal-tb;
  font-family:"Songti SC",Georgia,serif;
  font-size:clamp(18px,2.3vw,32px);
  letter-spacing:2px;
  text-align:center;
  max-width:80%;
  line-height:1.6}
.cover:has(img) .cover-type,.cover:has(img) .cover-caption {
  display:none}
/* 首页英文名缩小，保持手机端比例。 */
h1>span {
  font-size:clamp(64px,8vw,112px);
  letter-spacing:-4px}
@media(max-width:600px) {
  h1>span {
  font-size:19vw;
  letter-spacing:-2px}
}
/* Resume collaborators and original project artwork. */
.project.has-image {
  grid-template-columns:140px .8fr 2fr .7fr;
  align-items:center}
.project-image {
  height:110px;
  background:#f5f5f3;
  display:flex;
  align-items:center;
  justify-content:center}
.project-image img {
  width:100%;
  height:100%;
  object-fit:contain}
.artist-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:30px 22px}
.artist-photo {
  aspect-ratio:1;
  overflow:hidden;
  background:#f5f5f3}
.artist-photo img {
  width:100%;
  height:100%;
  object-fit:cover}
.artist h3 {
  font-size:14px;
  font-weight:400;
  margin:14px 0 0}
.partner-heading {
  margin-top:80px}
.partner-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px}
.partner {
  height:105px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  border:1px solid #eee;
  background:white}
.partner img {
  max-width:100%;
  max-height:100%;
  object-fit:contain}
@media(max-width:900px) {
  .project.has-image {
  }
.project.has-image .role {
  }
.artist-grid {
  grid-template-columns:repeat(4,1fr)}
.partner-grid {
  grid-template-columns:repeat(4,1fr)}
nav {
  gap:15px}
}
@media(max-width:600px) {
  .project.has-image {
  gap:10px 18px}
.project-image {
  height:100px}
.project.has-image .role {
  }
.artist-grid {
  grid-template-columns:repeat(3,1fr);
  gap:24px 12px}
.artist h3 {
  font-size:12px}
.partner-grid {
  grid-template-columns:repeat(3,1fr);
  gap:10px}
.partner {
  height:80px;
  padding:12px}
.partner-heading {
  margin-top:55px}
}
/* 简介与其他章节共用左侧基线，宽屏保留正文行长。 */
.about {
  display:block}
.about-content {
  grid-template-columns:minmax(0,1fr) 260px;
  gap:clamp(40px,6vw,110px);
  align-items:start}
.body-copy {
  white-space:pre-line;
  max-width:780px;
  font-size:16px;
  line-height:2}
.portrait {
  height:350px}
@media(max-width:900px) {
  .about-content {
  grid-template-columns:minmax(0,1fr) 210px;
  gap:35px}
.portrait {
  height:290px}
}
@media(max-width:600px) {
  .about-content {
  grid-template-columns:1fr;
  gap:25px}
.body-copy {
  font-size:15px}
.portrait {
  height:310px}
}
/* 视频封面中央仅显示播放符号。 */
.video-screen:has(img) .video-placeholder {
  background:none;
  padding:0;
  pointer-events:none}
.video-screen .play-icon {
  display:block;
  margin:0;
  color:white;
  font-family:Arial,sans-serif;
  font-size:42px;
  line-height:1;
  text-shadow:0 2px 12px #0009;
  transition:transform .18s ease}
.video-screen button {
  z-index:2;
  display:grid;
  place-items:center}
.video-screen button:hover .play-icon {
  transform:scale(1.12)}
@media(max-width:600px) {
  .video-screen .play-icon {
  font-size:36px}
}
.contact-links {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:35px}
.contact-links a,.contact-links button {
  position:relative;
  padding:22px 18px 24px 64px;
  width:100%;
  min-height:100px;
  border:1px solid #444;
  transition:border-color .18s,background .18s}
.contact-links a:hover,.contact-links button:hover {
  border-color:#888;
  background:#1a1a1a}
.contact-icon {
  position:absolute;
  left:20px;
  top:34px;
  width:28px;
  height:28px;
  color:#ddd}
.contact-icon svg {
  display:block;
  width:100%;
  height:100%}
@media(max-width:600px) {
  .contact-links {
  grid-template-columns:1fr;
  gap:14px}
.contact-links a,.contact-links button {
  font-size:15px}
}
/* 联系方式品牌颜色。 */
.contact-links a[href^="mailto:"] .contact-icon {
  color:#62a9ff}
.contact-links button .contact-icon {
  color:#07c160}
.contact-links a[href*="bilibili.com"] .contact-icon {
  color:#fb7299}
/* 项目封面使用独立大图，与文字分开。 */
#project-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:48px 32px}
.project,.project.has-image {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:14px;
  padding:0 0 28px;
  border-top:0;
  border-bottom:1px solid var(--line)}
.project-image {
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  background:#f3f3f1;
  overflow:hidden}
.project-image img {
  object-fit:contain}
.project-category {
  padding:0;
  margin-top:6px}
.project .role {
  align-self:flex-start;
  padding:7px 12px;
  background:#f3f3f1}
.project h3 {
  font-size:24px;
  line-height:1.4}
@media(max-width:600px) {
  #project-list {
  grid-template-columns:1fr;
  gap:32px}
.project-image {
  height:auto;
  }
.project h3 {
  font-size:22px}
}
.song-player {
  display:block;
  width:100%;
  border:0;
  margin-top:14px}
.cover-play {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:3;
  display:grid;
  place-items:center;
  border:0;
  background:transparent;
  color:#fff;
  font:42px/1 Arial,sans-serif;
  text-shadow:0 2px 12px #0009;
  transition:background .18s}
.cover-play:hover {
  background:#0002}
.cover-play:focus-visible {
  outline-offset:-5px}
@media(max-width:600px) {
  .cover-play {
  font-size:32px}
}
/* 横版项目图片铺满画面，游戏项目保持正方形。 */
.project-image {
  background:transparent;
  aspect-ratio:16/9;
  border:0}
.project-image img {
  object-fit:cover}
.project-square .project-image {
  aspect-ratio:1;
  background:transparent}
.project-square .project-image img {
  object-fit:contain}
/* 所有歌曲共用页面底部试听条。 */
.music-bar {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:40;
  background:#fff;
  border-top:1px solid #ddd;
  box-shadow:0 -4px 24px #0001;
  padding:10px 65px 8px 6%;
  display:flex;
  justify-content:center}
.music-bar .song-player {
  width:100%;
  max-width:1100px;
  height:86px;
  margin:0;
  border:0}
.music-close {
  position:absolute;
  right:20px;
  top:16px;
  background:none;
  border:0;
  font-size:28px;
  color:#555;
  padding:8px}
body.has-music-bar {
  padding-bottom:108px}
@media(max-width:600px) {
  .music-bar {
  padding:8px 42px 5px 8px}
.music-close {
  right:4px;
  top:12px}
}
.project-square .project-image img[src*="project-genshin"] {
  width:72%;
  height:72%;
  object-fit:contain;
  border-radius:24px}
.artist-photo {
  border-radius:18px}
/* 联系卡片按可用宽度自动换列，长邮箱在卡片内换行。 */
.contact-links {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:18px;
  align-items:stretch}
.contact-links a,.contact-links button {
  min-width:0;
  min-height:108px;
  height:100%;
  padding:24px 20px 24px 64px;
  line-height:1.5;
  overflow-wrap:anywhere;
  word-break:normal;
  font-size:14px}
.contact-links small {
  line-height:1.4;
  margin-bottom:10px}
.contact-icon {
  left:20px;
  top:36px;
  width:26px;
  height:26px}
@media(max-width:600px) {
  .contact-links {
  grid-template-columns:1fr;
  gap:14px}
.contact-links a,.contact-links button {
  min-height:100px;
  padding:21px 18px 21px 60px;
  font-size:15px}
.contact-icon {
  left:18px;
  top:33px}
}

/* 同行职责标签共用底部基线。 */
.project .role{margin-top:auto}
.music-bar{background:#101010;border-top-color:#333;box-shadow:0 -4px 24px #0003}
.music-close{color:#ddd}

/* 临时平台播放器使用柔和的浅灰底色。 */
.music-bar{background:#f5f5f4;border-top-color:#e3e3e1;box-shadow:0 -3px 14px #00000008}
.music-close{color:#777}
.music-close:hover{color:#151515}

.local-player{display:flex;align-items:center;gap:20px;padding:16px 70px 16px 6%;min-height:90px}
.player-info{display:flex;align-items:center;gap:14px;min-width:220px;max-width:32%;color:#151515}
.player-info img{width:54px;height:54px;border-radius:8px;object-fit:cover}
.player-info strong{display:block;font-size:14px;font-weight:500;line-height:1.5}
.player-info small{display:block;color:#777;font-size:11px;margin-top:4px}
.player-toggle{border:0;background:#151515;color:white;border-radius:50%;width:40px;height:40px;flex-shrink:0;font-size:15px}
.player-progress{flex:1;min-width:50px;accent-color:#151515;cursor:pointer}
.player-time{font-size:11px;color:#666;white-space:nowrap;font-variant-numeric:tabular-nums}
.local-player audio{display:none}
@media(max-width:600px){.local-player{gap:12px;padding:12px 42px 12px 16px;flex-wrap:wrap}.player-info{max-width:none;min-width:0;flex:1}.player-info img{width:40px;height:40px}.player-info strong{font-size:12px}.player-progress{flex-basis:60%;order:3}.player-time{order:4}.local-player .music-close{top:10px}}

/* 黑色本地播放条与音量控制。 */
.music-bar.local-player{background:#101010;border-top-color:#303030;box-shadow:0 -3px 16px #0002}
.local-player .player-info{color:#f5f5f5}
.local-player .player-info small,.local-player .player-time{color:#aaa}
.local-player .player-toggle{background:#f5f5f5;color:#151515}
.local-player .player-progress,.player-volume input{accent-color:#eee}
.local-player .music-close{color:#bbb}
.local-player .music-close:hover{color:white}
.player-volume{display:flex;align-items:center;gap:8px;flex-shrink:0;color:#aaa;font-size:11px}
.player-volume input{width:80px;cursor:pointer}
@media(max-width:600px){.player-volume{order:5;margin-left:auto}.player-volume input{width:65px}.local-player{gap:10px}.local-player .player-info{min-width:calc(100% - 55px)}}

/* 合作联系使用无边框入口。 */
.contact-links a,.contact-links button{border:0;background:transparent}
.contact-links a:hover,.contact-links button:hover{background:transparent;border-color:transparent}

/* 深灰播放条与联系入口边框。 */
.music-bar.local-player{background:#303033;border-top-color:#48484b;box-shadow:0 -3px 16px #0002}
.contact-links a,.contact-links button{border:1px solid #444;background:transparent}
.contact-links a:hover,.contact-links button:hover{border-color:#777;background:#ffffff05}

.volume-icon{display:flex;width:20px;height:20px;align-items:center}.volume-icon svg{width:100%;height:100%}

/* 联系入口缩小留白。 */
.contact-links{gap:16px;max-width:1080px}
.contact-links a,.contact-links button{min-height:84px;padding:16px 16px 16px 56px}
.contact-links small{margin-bottom:6px}
.contact-icon{left:17px;top:28px;width:23px;height:23px}
@media(max-width:600px){.contact-links a,.contact-links button{min-height:82px;padding:15px 16px 15px 54px}.contact-icon{left:16px;top:27px}}

.contact-icon{width:26px;height:26px;top:27px}
@media(max-width:600px){.contact-icon{top:26px}}

.arrow-icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.12em; flex-shrink: 0; }

/* Game projects use compact artwork with breathing room. */
.project-square .project-image { aspect-ratio:16/9; }
.project-square .project-image img { width:46%; height:82%; max-width:190px; max-height:190px; object-fit:contain; }
.project-square .project-image img[src*="project-genshin"] { width:31%; height:55%; max-width:128px; max-height:128px; }

/* Compact cover artwork while preserving the existing grid. */
.work .cover { width:78%; max-width:280px; margin-inline:auto; }