/* 唱片架 v3 · 粗样 */
:root {
  --paper: #ece7dd;
  --ink: #161412;
  --soft: rgba(22, 20, 18, .52);
  --rule: rgba(22, 20, 18, .16);
  --out: cubic-bezier(.16, 1, .3, 1);
  --fly: cubic-bezier(.22, .8, .2, 1);
  --px: clamp(22px, 3.4vw, 52px);
  --py: clamp(18px, 3.4vh, 34px);
  --S: min(12.4vw, 23vh);          /* 架上封面边长 */
  --C: min(54vh, 31vw);            /* 唱机位封面边长 */
  --dx: 8vw;
  --dy: calc((100vh - var(--C)) / 2 + 2vh);
}
*, *::before, *::after { box-sizing: border-box; }
html { color: var(--ink); -webkit-text-size-adjust: 100%; background: var(--paper); }
body { margin: 0; min-height: 100vh; min-height: 100dvh; padding: var(--py) var(--px); display: flex; flex-direction: column;
  font-family: Song, serif; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  background: radial-gradient(120% 80% at 50% 0%, #f5f2ec 0%, var(--paper) 60%, #e4dfd4 100%); }
body.playing { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
i { font-family: Instrument, serif; font-style: italic; font-weight: 400; letter-spacing: .01em; }

.grain { position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .09; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .4  0 0 0 0 .34  0 0 0 1.1 -.3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

.top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; padding-bottom: 14px; border-bottom: 1px solid var(--rule); font-size: 15px; letter-spacing: .28em; }
.top .mast { display: inline-flex; gap: .9em; align-items: baseline; }
.top i { font-size: 1.3em; letter-spacing: .02em; }
.top .ttl { color: var(--soft); }
.top .home { justify-self: end; display: inline-flex; gap: .8em; align-items: baseline; color: var(--soft); transition: color .4s var(--out); }
.top .home:hover { color: var(--ink); }

/* 线条箭头（不用 ↗ 字符：iPhone 会画成 emoji） */
.arrow { width: 34px; height: 1px; background: currentColor; position: relative; display: inline-block; }
.arrow::before { content: ''; position: absolute; left: 0; top: 0; width: 9px; height: 9px; border-left: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transform-origin: 0 0; }
.arrow.r { transform: scaleX(-1); }
.ne { position: relative; display: inline-block; width: .56em; height: .56em; flex: none; }
.ne::before { content: ''; position: absolute; right: 0; top: 0; width: 100%; height: 100%; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; }
.ne::after { content: ''; position: absolute; right: 0; top: 0; width: 138%; height: 1.5px; background: currentColor; transform-origin: 100% 50%; transform: rotate(-45deg); }

/* ---------- 联系方式（她 11-11：先不要介绍，只保留联系方式） ---------- */
.about { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 1vh 4vw; padding: 3.4vh 0 0; }
.about .bio { margin: 0; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.9; letter-spacing: .06em; }
.about .bio b { font-weight: 700; }
.about .bio i { margin: 0 .3em 0 .5em; font-size: 1.18em; letter-spacing: 0; }
.about .contact { margin: 0; display: flex; gap: .8em 1.6em; flex-wrap: wrap; align-items: baseline; font-size: 14px; letter-spacing: .14em; color: var(--soft); }
.about .contact b { font-weight: 400; color: var(--ink); margin-left: -.8em; }
.about .contact a { color: var(--ink); border-bottom: 1px solid rgba(22,20,18,.3); font-family: Instrument, serif; font-style: italic; font-size: 1.15em; letter-spacing: .02em; }

/* ---------- 唱片架 ---------- */
.wall { flex: 1; display: grid; align-content: center; gap: 7.5vh; padding: 4vh 0 3vh; }
.shelf h2 { margin: 0 0 2.6vh; font-weight: 400; font-size: 13px; letter-spacing: .42em; color: var(--soft); display: flex; gap: 1em; align-items: baseline; }
.shelf h2 i { font-size: 1.35em; letter-spacing: .02em; }
.row { display: flex; gap: 2.3vw; padding: 0 1.6vw; position: relative; }
/* 搁板：上面一窄条台面 + 前沿 + 投影；唱片底边立在台面上 */
.row::after, .row::before { content: ''; position: absolute; left: 0; right: 0; height: 15px; z-index: 0; border-radius: 1px;
  background: linear-gradient(#e9e5dd 0 42%, #fdfcfa 42% 52%, #e9e4da 52% 100%);
  box-shadow: 0 18px 24px -12px rgba(40,30,20,.34), 0 2px 3px rgba(40,30,20,.12); }
.row::after { bottom: -9px; }
.row::before { display: none; }

.rec { position: relative; z-index: 1; flex: none; width: var(--S); height: var(--S); padding: 0; border: 0; background: none; cursor: pointer; outline: none;
  transform-origin: 50% 100%; transform: perspective(700px) rotateX(14deg); transition: transform .6s var(--out); }
.rec.away { visibility: hidden; }
/* 底边贴台面的接触阴影 */
.rec::after { content: ''; position: absolute; left: 1%; right: 1%; bottom: -5px; height: 9px; z-index: -1;
  background: radial-gradient(closest-side, rgba(20,14,8,.4), transparent); }
.peek { position: absolute; left: 4%; top: 4%; width: 92%; height: 92%; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, var(--c) 0 15%, #121110 15.6% 16.8%, transparent 17.2%),
    repeating-radial-gradient(circle, #151412 0 1px, #24211e 1px 2.4px);
  box-shadow: 0 8px 14px -8px rgba(0,0,0,.5); transform: translateX(14%); transition: transform .6s var(--out); }
.sleeve { position: absolute; inset: 0; z-index: 1; box-shadow: 0 1px 1px rgba(0,0,0,.2), 0 14px 22px -12px rgba(0,0,0,.5), 0 -10px 18px -8px rgba(40,30,20,.28); transition: box-shadow .6s var(--out); }
.sleeve::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,0) 40%); transition: opacity .6s var(--out); }
@media (hover: hover) { .rec:hover .sleeve::after { opacity: 0; } }
@media (hover: hover) {
  .rec:hover { transform: translateY(-4px) perspective(700px) rotateX(3deg); }
  .rec:hover .peek { transform: translateX(32%); }
  .rec:hover .sleeve { box-shadow: 0 1px 1px rgba(0,0,0,.2), 0 22px 28px -14px rgba(0,0,0,.55); }
}
.rec:focus-visible .sleeve { outline: 2px solid var(--ink); outline-offset: 4px; }

/* ---------- 封面（架上、唱机位、对比页共用；尺寸全按封面宽度 cqw） ---------- */
.cv { position: absolute; inset: 0; overflow: hidden; container-type: size; text-align: left; background: var(--bg); color: var(--fg); }
/* 上色：满色 = 封面铺项目色、字米白（浅色封面字用深色）；浅底 = 封面淡色、字用项目深色 */
.cv { --bg: var(--c); --fg: #f7f1e6; --fg2: rgba(247,241,230,.74); }
.cv.lt { --fg: var(--d); --fg2: color-mix(in oklab, var(--d) 72%, transparent); }
[data-tone=main] .cv { --bg: var(--mbg); --fg: var(--mink); --fg2: color-mix(in oklab, var(--mink) 72%, transparent); }
[data-tone=shot] .cv { --bg: var(--sbg); --fg: var(--sink); --fg2: color-mix(in oklab, var(--sink) 72%, transparent); }
/* 截图底色延伸：截图四周淡进封面底色，像从封面里长出来 */
[data-tone=shot] :is(.cv-big, .cv-giant, .cv-edge, .cv-gallery) .im {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-composite: intersect; }
[data-tone=shot] .cv-edge .im { box-shadow: none; }
/* 顶条 · 融为一体：截图用原色，顶边淡进字条（字条就是截图边缘的颜色） */
[data-tone=shot] .cv-topbar .im img { filter: none; mix-blend-mode: normal; }
[data-tone=shot] .cv-topbar .im { top: 15cqw; -webkit-mask-image: linear-gradient(transparent, #000 16%); mask-image: linear-gradient(transparent, #000 16%); }
[data-tone=paper] .cv { --bg: color-mix(in oklab, var(--c) 16%, #f6f2ea); --fg: var(--d); --fg2: color-mix(in oklab, var(--d) 66%, transparent); }
.cv .im { position: absolute; overflow: hidden; }
.cv .im img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.cv::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,.16), rgba(255,255,255,0) 35%, rgba(0,0,0,0) 70%, rgba(0,0,0,.1)); }

/* 主体元素图：透明底的完整放下不裁、不加框；其余照常铺满 */
.cv.fit .im { overflow: visible; box-shadow: none !important; -webkit-mask-image: none !important; mask-image: none !important; }
.cv.fit .im img { object-fit: contain; object-position: center; }
.cv.alpha .im img { filter: drop-shadow(0 1.2cqw 1.6cqw rgba(0,0,0,.16)); }
.cv.art:not(.fit) .im img { object-position: center; }
/* 主体图比截图需要更大的位置（按排法分别放大） */
.cv-big.fit .im { right: 4cqw; bottom: 9cqw; width: 66cqw; height: 66cqw; }
.cv-big.fit .im img { object-position: right bottom; }
.cv-giant.fit .im { left: 4cqw; right: 4cqw; top: 12cqw; width: auto; height: 54cqw; }
.cv-topbar.fit .im { left: 6cqw; right: 6cqw; top: 24cqw; bottom: 5cqw; background: none; }
.cv-topbar.fit .im img { filter: none; mix-blend-mode: normal; }
.cv-edge.fit .im { left: 10cqw; right: 10cqw; top: 20cqw; bottom: 17cqw; }
.cv-gallery.fit .im { left: 12cqw; right: 12cqw; top: 24cqw; bottom: 11cqw; }
.cv-tag.fit .im { inset: 16cqw 6cqw 8cqw; }
.cv-slant.fit .im { inset: 10cqw 4cqw 4cqw 10cqw; clip-path: none; }

/* 11-11 第二轮：铺满型（以字寻诗、粒子画展、西澳 / 东北地图）整幅铺满，字那一侧用封面底色渐变托住；物件型放大 */
.cv > :not(.im) { z-index: 2; }
.cv.bleed .im { inset: 0 !important; width: auto !important; height: auto !important; clip-path: none !important; box-shadow: none !important; -webkit-mask-image: none !important; mask-image: none !important; background: none !important; }
.cv.bleed .im img { object-fit: cover; object-position: center; filter: none !important; mix-blend-mode: normal !important; }
.cv.bleed::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 1; }
.cv-big.bleed::before { background: linear-gradient(90deg, var(--bg) 0, color-mix(in oklab, var(--bg) 78%, transparent) 20%, transparent 42%); }
.cv-topbar.bleed::before { background: linear-gradient(var(--bg) 0, color-mix(in oklab, var(--bg) 80%, transparent) 17%, transparent 34%); }
.cv-big.fit .im { right: 2.5cqw !important; bottom: 6cqw !important; width: 74cqw !important; height: 74cqw !important; }
.cv-topbar.fit .im { inset: 20cqw 3cqw 3cqw !important; }
.cv.bleed.contain .im img { object-fit: contain; }
.cv-topbar.bleed.contain .im { top: 14cqw !important; }
.cv-big.tall .im { inset: 14cqw 3cqw 0 25cqw !important; width: auto !important; height: auto !important; }
.cv-big.tall .im img, .cv-topbar.tall .im img { object-position: center top; }
.cv-topbar.tall .im { inset: 17cqw 6cqw 0 !important; }

/* big 大字竖排（羅大佑《之乎者也》）：名字竖着放到极大当主角，图退成一小块 */
.cv-big .t { position: absolute; left: 5cqw; top: 5cqw; writing-mode: vertical-rl; font-weight: 700; font-size: 17cqw; line-height: 1; letter-spacing: .02em; }
.cv-big .im { right: 7cqw; bottom: 17cqw; width: 52cqw; height: 40cqw; }
.cv-big .e { position: absolute; right: 7cqw; top: 7cqw; font-size: 5.6cqw; text-align: right; color: var(--fg2); }
.cv-big .b { position: absolute; right: 7cqw; bottom: 7cqw; font-family: Instrument, serif; font-size: 3cqw; letter-spacing: .4em; color: var(--fg2); }

/* giant 巨字横排（Kenny Burrell《Midnight Blue》）：名字横着撑满下半张，图在上面 */
.cv-giant .e { position: absolute; left: 6cqw; top: 5cqw; font-size: 5.4cqw; color: var(--fg2); }
.cv-giant .b { position: absolute; right: 6cqw; top: 6.4cqw; font-family: Instrument, serif; font-size: 3cqw; letter-spacing: .4em; color: var(--fg2); }
.cv-giant .im { left: 6cqw; top: 15cqw; width: 56cqw; height: 44cqw; }
.cv-giant .t { position: absolute; left: 5cqw; right: 5cqw; bottom: 3.5cqw; font-weight: 700; font-size: min(calc(89cqw / var(--n)), 30cqw); line-height: .98; white-space: nowrap; letter-spacing: -.01em; }

/* topbar 顶条（Blue Note、《Speak No Evil》）：上面一条写字，下面单色调照片 */
.cv-topbar .t { position: absolute; left: 0; right: 0; top: 0; height: 21cqw; display: flex; align-items: center; gap: 3.4cqw; padding: 0 6cqw; }
.cv-topbar .t b { font-weight: 700; font-size: 8.6cqw; letter-spacing: .04em; white-space: nowrap; }
.cv-topbar .t i { flex: 1; font-size: 5cqw; color: var(--fg2); white-space: nowrap; overflow: hidden; }
.cv-topbar .t span { font-family: Instrument, serif; font-size: 2.8cqw; letter-spacing: .3em; color: var(--fg2); white-space: nowrap; }
.cv-topbar .im { left: 0; right: 0; top: 21cqw; bottom: 0; background: var(--bg); isolation: isolate; }
.cv-topbar .im img { filter: grayscale(1) contrast(1.15) brightness(1.06); mix-blend-mode: multiply; }

/* tag 小字签（竹内まりや《VARIETY》）：照片满版，角上贴两张小色签 */
.cv-tag .im { inset: 0; }
.cv-tag .tg1, .cv-tag .tg2, .cv-tag .b { position: absolute; line-height: 1.1; }
.cv-tag .tg1 { left: 5cqw; top: 5cqw; padding: 1.5cqw 2.6cqw; background: var(--bg); color: var(--fg); font-weight: 700; font-size: 5.8cqw; letter-spacing: .14em; }
.cv-tag .tg2 { right: 5cqw; top: 5cqw; padding: 1.4cqw 2.6cqw; background: #f7f2e8; color: var(--d); font-size: 5cqw; }
.cv-tag .b { right: 5cqw; bottom: 5cqw; padding: 1cqw 2cqw; background: var(--bg); color: var(--fg2); font-family: Instrument, serif; font-size: 2.8cqw; letter-spacing: .3em; }

/* slant 斜排（Kraftwerk《Die Mensch-Maschine》）：只切掉左上一个小角，名字斜写在角里，其余全是图 */
.cv-slant .im { inset: 0; clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%, 0 40%); }
.cv-slant .band { position: absolute; left: 10.6cqw; top: 10.6cqw; display: flex; align-items: center; justify-content: center;
  transform: translate(-50%, -50%) rotate(-45deg); white-space: nowrap; }
.cv-slant .band b { font-weight: 700; font-size: 5cqw; letter-spacing: .06em; }
.cv-slant .band i { display: none; }
.cv-slant::before { content: ''; position: absolute; left: 0; top: 0; width: 40cqw; height: 40cqw; z-index: 1; pointer-events: none;
  background: linear-gradient(135deg, transparent calc(50% - .5cqw), var(--fg) calc(50% - .5cqw) calc(50% + .2cqw), transparent calc(50% + .2cqw)); opacity: .5; }
.cv-slant .b { position: absolute; right: 5cqw; bottom: 5cqw; padding: 1cqw 2cqw; background: var(--bg); color: var(--fg2); font-family: Instrument, serif; font-size: 2.8cqw; letter-spacing: .3em; }

/* edge 边款（竇唯《黑夢》）：几个字拉开铺满顶边，图在中间 */
.cv-edge .t { position: absolute; left: 8cqw; right: 8cqw; top: 6.5cqw; display: flex; justify-content: space-between; font-weight: 700; font-size: 9.6cqw; line-height: 1; }
.cv-edge .im { left: 14cqw; right: 14cqw; top: 23cqw; bottom: 19cqw; box-shadow: 0 0 0 .3cqw rgba(255,255,255,.12); }
.cv-edge .b { position: absolute; left: 8cqw; right: 8cqw; bottom: 6.5cqw; display: flex; justify-content: space-between; align-items: baseline; }
.cv-edge .b i { font-size: 5.6cqw; }
.cv-edge .b span { font-family: Instrument, serif; font-size: 3.4cqw; letter-spacing: .32em; color: var(--fg2); }

/* gallery 画廊（ECM）：图居中留宽边、顶部居中小字 */
.cv-gallery .t { position: absolute; left: 0; right: 0; top: 7cqw; text-align: center; }
.cv-gallery .t b { display: block; font-weight: 700; font-size: 6cqw; letter-spacing: .24em; line-height: 1.2; padding-left: .24em; }
.cv-gallery .t i { display: block; margin-top: 1.4cqw; font-size: 4.4cqw; color: var(--fg2); }
.cv-gallery .im { left: 13cqw; right: 13cqw; top: 27cqw; bottom: 14cqw; }
.cv-gallery .b { position: absolute; left: 0; right: 0; bottom: 5cqw; text-align: center; font-family: Instrument, serif; font-size: 2.8cqw; letter-spacing: .5em; color: var(--fg2); }

/* ---------- 放唱片 ---------- */
.player { position: fixed; inset: 0; z-index: 10; visibility: hidden; touch-action: pan-y; --sx: 0px; }
.player.open { visibility: visible; }
.pl-bg { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--out), background .6s var(--out);
  background: radial-gradient(110% 90% at 30% 40%, color-mix(in oklab, var(--c) 20%, #f3efe8), color-mix(in oklab, var(--c) 34%, #e2ddd2)); }
.player.open .pl-bg { opacity: 1; }
.player.leaving .pl-bg { opacity: 0; transition-duration: .55s; }

.pl-back, .pl-nav { position: absolute; top: var(--py); z-index: 5; opacity: 0; transition: opacity .5s var(--out); }
.player.show .pl-back, .player.show .pl-nav, .player.swap .pl-nav, .player.swap .pl-back { opacity: 1; }
.pl-back { left: var(--px); display: inline-flex; align-items: center; gap: 14px; padding: 4px 0; border: 0; background: none; cursor: pointer; font-size: 15px; letter-spacing: .28em; }
.pl-nav { right: var(--px); display: flex; align-items: center; gap: 10px; }
.pl-nav button { border: 0; background: none; padding: 10px 6px; cursor: pointer; display: flex; }
.pl-nav i { font-size: 17px; color: var(--soft); min-width: 4.4em; text-align: center; letter-spacing: .06em; }

.deck, .pl-info { translate: var(--sx) 0; transition: translate .34s cubic-bezier(.4, 0, .2, 1), opacity .3s ease; }
.player.swap .deck, .player.swap .pl-info { opacity: 0; }
.player.drag .deck, .player.drag .pl-info { transition: none; }
.player.snap .deck, .player.snap .pl-info, .player.snap .pl-disc, .player.snap .arm, .player.snap .pl-info > * { transition: none !important; }

.deck { position: absolute; z-index: 2; left: var(--dx); top: var(--dy); width: var(--C); height: var(--C); }
.pl-cover { position: absolute; inset: 0; z-index: 3; transform-origin: 50% 100%; transition: transform .78s var(--fly);
  box-shadow: 0 2px 3px rgba(0,0,0,.18), 0 40px 60px -30px rgba(30,20,10,.55); }
.player.leaving .pl-cover { transition-duration: .62s; }

.pl-disc { position: absolute; left: 3%; top: 3%; width: 94%; height: 94%; z-index: 2; opacity: 0; transition: transform .95s var(--out); cursor: pointer; }
.player.landed .pl-disc { opacity: 1; }
.player.out .pl-disc { transform: translateX(58%); }
.player:not(.out) .pl-disc { transition-duration: .45s; }
.rot { position: absolute; inset: 0; border-radius: 50%; }  /* 转动由 main.js 的 spinTo 控制（能加速减速） */
.grooves { position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, transparent 0 41%, rgba(255,255,255,.06) 41.5% 42.2%, transparent 42.6% 69%, rgba(255,255,255,.05) 69.4% 70%, transparent 70.4%),
    repeating-radial-gradient(circle, #131210 0 1px, #1f1c19 1px 2.3px);
  box-shadow: 0 30px 50px -24px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.3); }
.label { position: absolute; left: 30%; top: 30%; width: 40%; height: 40%; border-radius: 50%; overflow: hidden; background: color-mix(in oklab, var(--c) 70%, #1a1714); }
.label img { position: absolute; left: 22%; top: 22%; width: 56%; height: 56%; border-radius: 50%; object-fit: cover; object-position: center 30%; background: #f3efe6; }
.label svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.label text { font-family: Song, serif; font-weight: 700; font-size: 7.4px; fill: #f4efe5; }
.hole { position: absolute; left: 48%; top: 48%; width: 4%; height: 4%; border-radius: 50%; background: #0e0d0c; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.sheen { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 25deg, transparent 0deg, rgba(255,255,255,.14) 28deg, transparent 62deg, transparent 200deg, rgba(255,255,255,.1) 226deg, transparent 256deg); }

/* 唱臂：支点在盘子右上，落下时针头落在外圈；暂停 = 抬起 */
.arm { position: absolute; left: calc(var(--C) * 1.12); top: calc(var(--C) * -.04); width: calc(var(--C) * .4); height: var(--C); z-index: 4; overflow: visible; pointer-events: none; touch-action: none;
  transform-origin: 75% 11.33%; transform: rotate(-20deg); opacity: 0; transition: transform 1.1s var(--out), opacity .4s var(--out);
  filter: drop-shadow(0 8px 6px rgba(30,20,10,.28)); }
.player.landed .arm { opacity: 1; }
.player.armdown .arm { transform: rotate(0deg); }
.arm .base { fill: #e9e5dd; stroke: rgba(0,0,0,.12); }
.arm .cap { fill: #c9c3b7; }
.arm .rod { fill: none; stroke: #efece6; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.arm .head { fill: #2b2825; }
.arm .base, .arm .head, .arm .grab { pointer-events: auto; cursor: grab; }
.arm .grab { fill: none; stroke: transparent; stroke-width: 34; stroke-linecap: round; }
.player.landed .arm:active { cursor: grabbing; }

/* 介绍 */
.pl-info { position: absolute; z-index: 1; left: 61vw; right: var(--px); top: 50%; transform: translateY(-50%); }
.pl-info > * { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--out), transform .8s var(--out); }
.player.show .pl-info > * { opacity: 1; transform: none; }
.player.show .pl-info > :nth-child(2) { transition-delay: .05s; }
.player.show .pl-info > :nth-child(3) { transition-delay: .1s; }
.player.show .pl-info > :nth-child(4) { transition-delay: .16s; }
.player.show .pl-info > :nth-child(n+5) { transition-delay: .24s; }
.pl-no { display: flex; gap: 1.6em; align-items: baseline; font-size: 13px; letter-spacing: .38em; color: var(--soft); }
.pl-no i { font-style: normal; letter-spacing: .4em; }
.pl-name { margin: 2.2vh 0 0; font-weight: 700; font-size: min(5.4vw, 9.4vh); line-height: 1.1; letter-spacing: .03em; }
.pl-en { display: block; margin-top: 1vh; font-size: clamp(20px, 1.8vw, 28px); color: rgba(22,20,18,.7); }
.pl-intro { margin: 3.4vh 0 0; max-width: 24em; font-size: clamp(15px, 1.15vw, 17px); line-height: 2; letter-spacing: .06em; color: rgba(22,20,18,.8); }
.pl-go { display: inline-flex; align-items: center; gap: .9em; margin-top: 4.4vh; padding-bottom: 10px; font-size: clamp(18px, 1.5vw, 22px); letter-spacing: .32em; border-bottom: 1px solid currentColor; outline: none; }
.pl-go .host { font-family: Instrument, serif; font-style: italic; font-size: .82em; letter-spacing: .02em; color: var(--soft); }
.pl-go .ne { transition: transform .5s var(--out); }
.pl-go:hover .ne, .pl-go:focus-visible .ne { transform: translate(3px, -3px); }
.pl-play { display: flex; align-items: center; gap: .9em; margin-top: 3.6vh; padding: 4px 0; border: 0; background: none; cursor: pointer; font-size: 13px; letter-spacing: .16em; color: var(--soft); text-align: left; }
.pl-play .ic { flex: none; width: 10px; height: 11px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.player.paused .pl-play .ic { width: 0; height: 0; border-right: 0; border-left: 9px solid currentColor; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; }

/* ---------- 手机 ---------- */
@media (max-aspect-ratio: 1/1) {
  :root { --px: 22px; --py: 18px; --S: 25.5vw; --C: 50vw; --dx: 8vw; --dy: calc(var(--py) + 68px); }
  .top { grid-template-columns: 1fr auto; font-size: 13px; letter-spacing: .2em; }
  .top .ttl { display: none; }
  .about { padding-top: 2.4vh; margin: 0 var(--px); }
  .about .bio { font-size: 15px; line-height: 1.85; }
  .about .contact { font-size: 12.5px; }
  .wall { gap: 5.5vh; }
  .row { gap: 5.5vw; padding: 0 2.5vw; }
  .shelf:first-child .row { display: grid; grid-template-columns: repeat(3, var(--S)); row-gap: calc(5vh + 9px); }
  .shelf:first-child .row::before { display: block; top: calc(var(--S) - 6px); }
  .pl-back { font-size: 13px; letter-spacing: .2em; }
  .pl-nav i { font-size: 15px; min-width: 3.6em; }
  .pl-info { left: var(--px); right: var(--px); top: calc(var(--dy) + var(--C) + 6vh); transform: none; }
  .pl-name { font-size: 11vw; margin-top: 1.6vh; }
  .pl-en { font-size: 19px; }
  .pl-intro { margin-top: 2.4vh; font-size: 14.5px; line-height: 1.9; }
  .pl-go { margin-top: 3.2vh; font-size: 17px; }
  .pl-play { margin-top: 2.6vh; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; } }