.is-media-page .home-header, .is-media-page .home-footer { display: none; }
.is-media-page .home-section {
  position: relative; display: flex; flex-direction: column;
  width: 100%; margin: 0; padding: clamp(32px, 4.5dvh, 56px) clamp(24px, 6vw, 100px) 18px;
  overflow-y: auto; overflow-x: hidden;
}
.is-media-page #homeSectionTitle {
  flex: 0 0 auto; margin: 5px 0 0; text-align: center;
  font-size: clamp(28px, 3vw, 48px); font-weight: 500; letter-spacing: .2em; line-height: 1.4;
}
.is-media-page #homeSectionTitle::first-letter { color: #c0392b; }
/* 原稿 .back 同时用于返回按钮和铜币背面，导致文字翻面；两者使用独立类。 */
.is-media-page .home-back {
  position: absolute; right: clamp(20px, 3vw, 48px); top: 24px;
  transform: none; direction: ltr; unicode-bidi: isolate; writing-mode: horizontal-tb;
  font-family: inherit; font-size: clamp(14px, 1.3vw, 21px); letter-spacing: .15em;
  color: #6b7080; border-color: transparent; text-shadow: 0 2px 3px rgb(43 46 56 / 18%);
}
.is-media-page .home-back:hover { color: #c0392b; border-color: currentColor; }
.media-page { flex: 1 0 auto; min-height: 0; display: flex; flex-direction: column; color: #2a2d38; }
.media-subtitle { margin: 7px 0 20px; text-align: center; font-size: clamp(12px, 1.2vw, 19px); letter-spacing: .16em; color: #6b7080; }
.media-layout { flex: 1 0 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 70px); align-items: center; padding: 16px 0 24px; }
.media-dial { position: relative; width: min(100%, 640px, calc(100dvh - 220px)); aspect-ratio: 1; justify-self: center; }
.media-dial-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.media-compass { color: #6f7581; pointer-events: none; }
.media-ticks { transform-origin: 100px 100px; animation: media-dial-spin 120s linear infinite; animation-play-state: paused; }
.media-page.is-active .media-ticks { animation-play-state: running; }
@keyframes media-dial-spin { to { transform: rotate(360deg); } }
.media-taiji { transform-origin: 0 0; transition: transform 1s cubic-bezier(.3, .8, .3, 1); }
.media-arc { opacity: 0; transition: opacity .3s; }
.media-arc.is-selected { opacity: 1; }
.media-coin { position: absolute; width: 18%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: transparent; transform: translate(-50%, -50%); z-index: 2; }
.media-coin.is-selected { z-index: 3; }
.media-selection-ring { position: absolute; inset: -5%; border-radius: 50%; border: 2px solid #c0392b; opacity: 0; transform: scale(.9); transition: opacity .4s, transform .4s; pointer-events: none; }
.media-coin.is-selected .media-selection-ring { opacity: 1; transform: scale(1); }
.media-coin-shadow { position: absolute; inset: 0; perspective: 900px; filter: drop-shadow(0 5px 7px rgb(0 0 0 / 28%)); transition: filter .6s, transform .4s; }
.media-coin:hover .media-coin-shadow { transform: translateY(-3px); }
.media-coin.is-selected .media-coin-shadow { filter: drop-shadow(0 8px 10px rgb(0 0 0 / 32%)); }
.media-coin-turner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.3, .8, .3, 1); }
.media-coin.is-selected .media-coin-turner { transform: rotateY(180deg) scale(1.06); }
.media-coin-face { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; backface-visibility: hidden; }
.media-coin-face img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.media-face-front img { transform: scale(1.14); }
.media-face-back { transform: rotateY(180deg); }
.media-face-back img { transform: scale(1.2); }
.media-coin-label { position: absolute; left: 50%; top: 112%; transform: translateX(-50%); text-align: center; white-space: nowrap; pointer-events: none; text-shadow: 0 2px 3px rgb(43 46 56 / 16%); }
.media-coin-name { display: block; font-size: clamp(12px, 1.2vw, 19px); color: #6b7080; }
.media-coin-fans { display: block; font-size: clamp(10px, 1vw, 15px); color: #827971; margin-top: 2px; }
.media-coin.is-selected .media-coin-name, .media-coin.is-selected .media-coin-fans { color: #c0392b; }
.media-panel { min-width: 0; }
.media-profile { display: flex; gap: clamp(14px, 1.6vw, 25px); align-items: center; justify-content: space-between; }
.media-profile-info { flex: 1; min-width: 0; display: flex; gap: clamp(14px, 1.6vw, 25px); align-items: center; }
.media-avatar { width: clamp(82.5px, 8.25vw, 132.5px); aspect-ratio: 1; border-radius: 50%; background: linear-gradient(135deg, #d9dce2, #b9bfc9); border: 0; box-shadow: none; display: flex; align-items: center; justify-content: center; font-size: clamp(10px, .9vw, 14px); color: #6f7686; text-align: center; line-height: 1.6; flex: none; overflow: hidden; }
.media-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-profile-copy { min-width: 0; }
.media-profile h3 { display: inline; font-size: clamp(20px, 2vw, 32px); font-weight: 500; letter-spacing: .1em; line-height: 1.5; margin: 0; }
.media-fans { display: inline; color: #c0392b; font-size: clamp(12px, 1.2vw, 19px); margin: 0 0 0 12px; white-space: nowrap; }
.media-account-description { margin: 5px 0 0; font-size: clamp(12px, 1.1vw, 18px); line-height: 1.8; color: #4c5160; letter-spacing: .04em; overflow-wrap: anywhere; }
.media-works { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 20px); margin-top: clamp(18px, 1.6vw, 26px); }
.media-work { display: block; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; min-width: 0; cursor: pointer; border-radius: 15px; text-decoration: none; }
.media-work:focus-visible { outline: 2px solid #b74734; outline-offset: 5px; }
.media-cover { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; aspect-ratio: 4/5; border-radius: 15px; perspective: 800px; color: #fff; font-size: clamp(12px, 1vw, 16px); letter-spacing: .1em; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; }
.media-cover.is-tilting { z-index: 3; }
.media-tilt-shadow { position: absolute; inset: 0; border-radius: inherit; background: rgb(0 0 0 / 55%); filter: blur(14px); pointer-events: none; }
.media-tilt-body { position: absolute; inset: 0; border-radius: inherit; transform-style: preserve-3d; }
.media-tilt-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: inherit; background: linear-gradient(160deg, #c9ced6, #9ea5b2); backface-visibility: hidden; isolation: isolate; }
.media-tilt-glare, .media-tilt-rim { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.media-tilt-glare { z-index: 2; background: radial-gradient(farthest-corner circle at var(--media-glare-x, 50%) var(--media-glare-y, 50%), rgb(255 255 255 / 34%), rgb(255 255 255 / 28%) 18%, rgb(255 255 255 / 11%) 36%, transparent 60%); opacity: var(--media-glare, 0); mix-blend-mode: screen; }
.media-tilt-rim { z-index: 3; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%), inset 0 1px 0 rgb(255 255 255 / 20%); }
.media-cover-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.media-cover-status { padding: 8px; text-align: center; letter-spacing: 0; }
.media-play { position: absolute; right: 9px; bottom: 7px; font-size: 15px; opacity: .85; }
.media-work-title { display: block; font-size: clamp(12px, 1.05vw, 17px); margin-top: 7px; line-height: 1.5; overflow-wrap: anywhere; }
.media-work-metrics { display: block; color: #6b7080; font-size: clamp(10px, .9vw, 14px); line-height: 1.7; margin-top: 3px; }
.media-actions { flex: none; margin-left: auto; display: flex; align-items: center; }
.media-account-link { background: #b74734; color: #fff; border: 0; font: inherit; font-size: clamp(14px, 1.2vw, 19px); letter-spacing: .2em; padding: 10px 22px; border-radius: 5px; box-shadow: 0 4px 10px rgb(150 30 20 / 22%); text-decoration: none; text-align: center; }
.media-account-link:hover { background: #a13c2c; }
.media-account-link:focus-visible { outline: 2px solid #b74734; outline-offset: 4px; }
.media-footnote { flex: 0 0 auto; margin: 12px 0 0; font-size: clamp(10px, .95vw, 15px); color: #7b8390; text-align: center; letter-spacing: .06em; line-height: 1.6; }
@media (min-width: 601px) and (min-height: 600px) {
  /* 盘面与作品共用标题下的剩余高度，封面不再仅由列宽撑高整页。 */
  .is-media-page .home-section { padding-top: clamp(18px, 2.4dvh, 32px); padding-bottom: 12px; }
  .is-media-page #homeSectionTitle { font-size: clamp(26px, min(2.8vw, 5dvh), 44px); }
  .media-page { flex: 1 1 0; }
  .media-subtitle { flex: none; font-size: clamp(12px, min(1.2vw, 2dvh), 18px); margin-bottom: 12px; }
  .media-layout { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; gap: clamp(22px, 3vw, 48px); padding: 12px 0 14px; }
  .media-dial { align-self: center; width: min(100%, calc(100dvh - 180px), 640px); }
  .media-panel {
    --work-title-size: clamp(12px, min(1.05vw, 2dvh), 16px);
    --work-metrics-size: clamp(10px, min(.9vw, 1.7dvh), 13px);
    --work-caption-space: calc(var(--work-title-size) * 3 + var(--work-metrics-size) * 5.1 + 10px);
    min-height: 0; display: flex; flex-direction: column;
  }
  .media-profile { flex: none; }
  .media-profile h3 { font-size: clamp(20px, min(2vw, 3.4dvh), 28px); }
  .media-account-description { font-size: clamp(12px, min(1.1vw, 2dvh), 16px); line-height: 1.6; }
  .media-works { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); margin-top: clamp(12px, 2dvh, 20px); }
  .media-work { height: 100%; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; }
  .media-work-title, .media-work-metrics { align-self: stretch; flex: none; }
  .media-cover { flex: none; width: min(100%, max(0px, calc((100dvh - 430px) * .8))); }
  .media-work-title { font-size: var(--work-title-size); }
  .media-work-metrics { font-size: var(--work-metrics-size); }
  .media-account-link { padding: 8px 18px; font-size: clamp(13px, min(1.2vw, 2.3dvh), 18px); }
  .media-footnote { margin-top: 8px; font-size: clamp(10px, min(.95vw, 1.7dvh), 13px); }
  @supports (width: 1cqh) {
    .media-layout, .media-works { container-type: size; }
    .media-dial { width: min(100%, 100cqh, 640px); }
    /* 标题／数据的实际换行高度由 ResizeObserver 更新，初次测量前使用预留值。 */
    .media-cover { width: min(100%, max(0px, calc((100cqh - var(--work-caption-space)) * .8))); }
  }
}
@media (max-width: 600px) {
  .is-media-page .home-section { padding: calc(max(4px, env(safe-area-inset-top)) + 26px) 16px 12px; }
  .is-media-page #homeSectionTitle { font-size: clamp(23px, 5.8vw, 32px); letter-spacing: .1em; margin: 0; }
  .media-subtitle { flex: none; margin: 7px 0 8px; font-size: 11px; letter-spacing: .03em; }
  .media-page { flex: 1 1 0; min-height: 0; }
  .media-layout { flex: 1; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(min-content, 1fr); align-items: stretch; gap: 8px; padding: 0; }
  .media-dial { width: min(80%, 344px, calc((100dvh - 140px) * .43)); container-type: inline-size; }
  .media-coin-label { width: 250%; white-space: normal; }
  .media-coin-name { font-size: clamp(6px, 4.4cqw, 12px); line-height: 1.25; }
  .media-coin-fans { font-size: clamp(6px, 3.8cqw, 9px); line-height: 1.25; }
  .media-panel { min-height: 0; display: flex; flex-direction: column; }
  .media-profile { gap: clamp(8px, 2vw, 12px); }
  .media-profile-info { gap: clamp(8px, 2.2vw, 14px); }
  .media-avatar { width: clamp(48px, 18vw, 82.5px); }
  .media-profile h3 { font-size: clamp(14px, 3.8vw, 21px); }
  .media-fans { display: block; margin: 2px 0 0; font-size: clamp(10px, 2.8vw, 13px); }
  .media-account-description { font-size: clamp(10px, 2.8vw, 12px); }
  .media-account-link { padding: 6px 10px; font-size: clamp(10px, 2.8vw, 14px); letter-spacing: .06em; white-space: nowrap; }
  .media-works { --work-caption-space: 90px; flex: 1; min-height: calc(var(--work-caption-space) + 72px); grid-template-rows: minmax(0, 1fr); gap: 8px; margin-top: 8px; container-type: size; }
  .media-work { height: 100%; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; }
  .media-cover { flex: none; width: min(100%, max(0px, calc((100cqh - var(--work-caption-space)) * .8))); font-size: 11px; letter-spacing: 0; }
  .media-work-title { align-self: stretch; flex: none; margin-top: 5px; font-size: clamp(9px, 2.6vw, 12px); line-height: 1.45; }
  .media-work-metrics { align-self: stretch; flex: none; font-size: clamp(8px, 2.2vw, 10px); line-height: 1.5; }
  .media-footnote { flex: none; margin-top: 8px; font-size: 9px; line-height: 1.4; }
}
@media (min-width: 401px) and (max-width: 600px) and (min-height: 500px) {
  /* 盘与资料共用上排，三作品用剩余高度；字号和完整文案不靠裁切腾空间。 */
  .media-layout { flex: 1 1 0; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: clamp(140px, 30dvh, 180px) minmax(0, 1fr); gap: 10px; }
  .media-panel { display: contents; }
  .media-dial { grid-column: 1; grid-row: 1; align-self: center; justify-self: center; width: min(100%, 30dvh, 180px); }
  .media-profile { grid-column: 2; grid-row: 1; align-self: center; justify-self: center; width: 100%; max-width: 240px; flex-direction: column; gap: 8px; }
  .media-profile-info { width: 100%; flex: none; justify-content: center; gap: 8px; }
  .media-avatar { width: clamp(40px, 10vw, 52px); }
  .media-profile h3 { display: block; font-size: clamp(14px, 3.1vw, 18px); line-height: 1.35; letter-spacing: .04em; }
  .media-fans { font-size: 11px; line-height: 1.4; }
  .media-account-description { font-size: 10px; line-height: 1.45; letter-spacing: 0; }
  .media-actions { margin-left: 0; }
  .media-account-link { padding: 6px 12px; font-size: 11px; }
  .media-works { grid-column: 1 / -1; grid-row: 2; min-height: 0; height: 100%; width: 100%; margin-top: 0; padding: 8px 4px 0; gap: 10px; justify-items: center; }
  .media-work { width: 100%; align-items: center; }
  .media-work-title, .media-work-metrics { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .media-ticks { animation: none; }
  .media-taiji, .media-arc, .media-selection-ring, .media-coin-shadow, .media-coin-turner { transition: none; }
  .media-coin:hover .media-coin-shadow { transform: none; }
  .media-tilt-body { transform: none !important; opacity: 1 !important; }
  .media-tilt-glare { display: none; }
}