:root {
  color-scheme: light;
  --wood-dark: #32190d;
  --wood-mid: #5f351c;
  --wood-light: #8c5a31;
  --paper: #fffaf0;
  --paper-soft: #fbf3df;
  --ink: #2d2821;
  --muted: #74695d;
  --line: #dfcfb4;
  --green: #296b58;
  --green-soft: #e5f0e9;
  --plum: #8d566a;
  --plum-soft: #f4e5ea;
  --amber: #bd7329;
  --amber-soft: #faead0;
  --shadow: 0 22px 60px rgba(39, 22, 11, 0.22);
  --soft-shadow: 0 12px 28px rgba(47, 30, 15, 0.13);
  --weight-strong: 720;
  --weight-heading: 760;
  --weight-label: 700;
  --soft-font:
    "Tsukushi A Round Gothic", "Hiragino Maru Gothic ProN", "M PLUS Rounded 1c",
    "Noto Sans JP", "Yu Gothic", "YuGothic", system-ui, sans-serif;
  font-family:
    var(--soft-font);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: #351b0e;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  letter-spacing: 0;
  background:
    radial-gradient(ellipse at 20% 8%, rgba(206, 134, 70, 0.22), transparent 36%),
    radial-gradient(ellipse at 80% 18%, rgba(28, 13, 7, 0.32), transparent 32%),
    repeating-linear-gradient(
      92deg,
      rgba(29, 13, 6, 0.46) 0,
      rgba(29, 13, 6, 0.46) 2px,
      transparent 2px,
      transparent 17px
    ),
    linear-gradient(
      105deg,
      var(--wood-dark) 0%,
      #4b2714 18%,
      var(--wood-light) 36%,
      var(--wood-mid) 54%,
      #6e3f22 72%,
      #281207 100%
    );
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      7deg,
      rgba(255, 205, 139, 0.06) 0,
      rgba(255, 205, 139, 0.06) 1px,
      transparent 1px,
      transparent 9px
    ),
    radial-gradient(ellipse at 30% 44%, rgba(24, 12, 6, 0.34), transparent 24%),
    radial-gradient(ellipse at 72% 62%, rgba(155, 83, 38, 0.13), transparent 27%);
  mix-blend-mode: soft-light;
}

.ambient-bubbles {
  position: fixed;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}

.ambient-bubbles span {
  position: absolute;
  top: var(--bubble-top);
  left: var(--bubble-left);
  width: var(--bubble-size);
  aspect-ratio: 1;
  border: 1.4px solid rgba(255, 255, 244, 0.68);
  border-radius: 50%;
  opacity: var(--bubble-opacity, 0.42);
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.78) 0 7%, transparent 9%),
    radial-gradient(circle at 70% 76%, rgba(123, 214, 196, 0.2), transparent 38%),
    conic-gradient(
      from 38deg,
      rgba(255, 255, 255, 0),
      rgba(255, 244, 194, 0.2),
      rgba(142, 224, 212, 0.22),
      rgba(255, 255, 255, 0)
    );
  box-shadow:
    inset 9px 11px 24px rgba(255, 255, 255, 0.18),
    inset -9px -11px 28px rgba(42, 104, 88, 0.16),
    0 0 28px rgba(255, 250, 232, 0.18);
  mix-blend-mode: screen;
  animation: bubble-loop var(--bubble-duration) linear infinite;
  animation-delay: var(--bubble-delay);
  will-change: transform, opacity;
}

.ambient-bubbles span::after {
  content: "";
  position: absolute;
  top: 18%;
  left: 24%;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  border-top: 1.5px solid rgba(255, 255, 255, 0.75);
  transform: rotate(-24deg);
}

.ambient-bubbles span:nth-child(1) {
  --bubble-top: 14%;
  --bubble-left: 6%;
  --bubble-size: 108px;
  --bubble-duration: 16s;
  --bubble-delay: -2s;
  --bubble-x: 58px;
  --bubble-y: -52px;
  --bubble-opacity: 0.52;
}

.ambient-bubbles span:nth-child(2) {
  --bubble-top: 48%;
  --bubble-left: 28%;
  --bubble-size: 52px;
  --bubble-duration: 13s;
  --bubble-delay: -4s;
  --bubble-x: -48px;
  --bubble-y: 44px;
  --bubble-opacity: 0.44;
}

.ambient-bubbles span:nth-child(3) {
  --bubble-top: 20%;
  --bubble-left: 54%;
  --bubble-size: 126px;
  --bubble-duration: 18s;
  --bubble-delay: -5s;
  --bubble-x: 68px;
  --bubble-y: -46px;
  --bubble-opacity: 0.38;
}

.ambient-bubbles span:nth-child(4) {
  --bubble-top: 68%;
  --bubble-left: 82%;
  --bubble-size: 78px;
  --bubble-duration: 15s;
  --bubble-delay: -1s;
  --bubble-x: -64px;
  --bubble-y: 52px;
  --bubble-opacity: 0.5;
}

.ambient-bubbles span:nth-child(5) {
  --bubble-top: 36%;
  --bubble-left: 90%;
  --bubble-size: 112px;
  --bubble-duration: 19s;
  --bubble-delay: -7s;
  --bubble-x: -74px;
  --bubble-y: -58px;
  --bubble-opacity: 0.46;
}

.ambient-bubbles span:nth-child(6) {
  --bubble-top: 78%;
  --bubble-left: 15%;
  --bubble-size: 66px;
  --bubble-duration: 14s;
  --bubble-delay: -3s;
  --bubble-x: 56px;
  --bubble-y: -54px;
  --bubble-opacity: 0.48;
}

.ambient-bubbles span:nth-child(7) {
  --bubble-top: 58%;
  --bubble-left: 63%;
  --bubble-size: 150px;
  --bubble-duration: 21s;
  --bubble-delay: -8s;
  --bubble-x: 82px;
  --bubble-y: 54px;
  --bubble-opacity: 0.34;
}

.ambient-bubbles span:nth-child(8) {
  --bubble-top: 9%;
  --bubble-left: 76%;
  --bubble-size: 44px;
  --bubble-duration: 12s;
  --bubble-delay: -2.5s;
  --bubble-x: -42px;
  --bubble-y: 38px;
  --bubble-opacity: 0.52;
}

.audio-visualizer {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  opacity: 0.38;
  pointer-events: none;
}

a {
  color: inherit;
}

.site-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  max-width: 1760px;
  margin: 28px auto 0;
  padding: 24px 30px;
  border: 1px solid rgba(255, 250, 240, 0.42);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.86);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--green);
  font-size: 0.82rem;
  font-weight: var(--weight-label);
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: 2.25rem;
  font-weight: var(--weight-heading);
  line-height: 1.05;
  letter-spacing: 0;
}

.platform-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.platform-nav a,
.platform-link {
  min-height: 38px;
  border: 1px solid rgba(84, 54, 29, 0.18);
  border-radius: 8px;
  background: linear-gradient(180deg, #fffdf7, #f6ecd9);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 13px;
  font-size: 0.92rem;
  font-weight: var(--weight-strong);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(72, 45, 22, 0.13);
}

.platform-nav a:hover,
.platform-link:hover {
  border-color: var(--green);
}

.layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 22px;
  max-width: 1760px;
  margin: 0 auto;
  padding: 24px 0 54px;
}

.catalog-panel {
  align-self: start;
  position: sticky;
  top: 18px;
}

.song-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.playlist-panel,
.side-meta-panel {
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid rgba(255, 250, 240, 0.36);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.86);
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(8px);
}

.side-meta-panel:empty {
  display: none;
}

.side-meta-panel h2 {
  margin: 0 0 10px;
  font-size: 1rem;
}

.side-meta-panel .meta-table {
  font-size: 0.84rem;
  line-height: 1.55;
}

.side-meta-panel .meta-table th {
  width: 78px;
}

.playlist-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.playlist-topline h2 {
  margin: 0;
  font-size: 1rem;
}

.playlist-repeat,
.playlist-actions button,
.playlist-list button {
  min-height: 34px;
  border: 1px solid rgba(84, 54, 29, 0.18);
  border-radius: 8px;
  background: linear-gradient(180deg, #fffdf7, #f6ecd9);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: var(--weight-strong);
}

.playlist-repeat.is-one {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

.playlist-repeat.is-all {
  border-color: var(--amber);
  background: var(--amber);
  color: #fff;
}

.playlist-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.playlist-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.playlist-list li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) repeat(3, 32px);
  gap: 6px;
  align-items: center;
  min-height: 38px;
  padding: 6px;
  border: 1px solid rgba(84, 54, 29, 0.14);
  border-radius: 8px;
  background: rgba(255, 253, 247, 0.72);
}

.playlist-index {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: var(--weight-label);
  text-align: center;
}

.playlist-title {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: var(--weight-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.playlist-list li.is-current {
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(41, 107, 88, 0.16);
}

.playlist-list .playlist-empty {
  display: block;
  padding: 10px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.song-card {
  border: 1px solid rgba(84, 54, 29, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 252, 244, 0.96), rgba(251, 243, 223, 0.96));
  box-shadow: 0 5px 16px rgba(48, 28, 13, 0.12);
  overflow: hidden;
}

.song-card button {
  display: grid;
  width: 100%;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 10px;
  text-align: left;
  font: inherit;
}

.song-card.is-active {
  border-color: var(--green);
  box-shadow:
    0 0 0 2px rgba(41, 107, 88, 0.2),
    0 8px 18px rgba(48, 28, 13, 0.15);
}

.thumb,
.cover {
  background:
    linear-gradient(135deg, var(--green-soft), var(--amber-soft) 54%, var(--plum-soft));
  border: 1px solid rgba(84, 54, 29, 0.2);
  overflow: hidden;
}

.thumb {
  width: 62px;
  aspect-ratio: 1;
  border-radius: 8px;
}

.thumb img,
.cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.thumb-fallback,
.cover-fallback {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: var(--green);
  font-weight: var(--weight-heading);
  text-align: center;
}

.thumb-fallback {
  font-size: 0.68rem;
  line-height: 1.1;
}

.song-card-title {
  display: block;
  min-width: 0;
  color: #2b261f;
  font-weight: var(--weight-heading);
  line-height: 1.28;
}

.song-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 7px;
  color: var(--muted);
  font-size: 0.78rem;
}

.song-detail {
  min-width: 0;
  padding: 24px;
  border: 1px solid rgba(84, 54, 29, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(250, 237, 210, 0.92) 0 16px, transparent 16px),
    linear-gradient(180deg, rgba(255, 252, 244, 0.96), rgba(250, 240, 218, 0.96));
  box-shadow: var(--shadow);
}

.song-detail article {
  padding: 4px 0 0;
}

.detail-hero {
  display: grid;
  grid-template-columns: minmax(190px, 270px) minmax(0, 1fr);
  gap: 26px;
  align-items: end;
  margin-bottom: 26px;
}

.cover {
  width: 100%;
  max-width: 270px;
  aspect-ratio: 1;
  border-radius: 8px;
  box-shadow: 0 18px 36px rgba(45, 28, 13, 0.18);
}

.cover-fallback {
  padding: 22px;
  color: #174f42;
  font-size: 1.25rem;
}

.song-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.pill {
  border-radius: 8px;
  padding: 5px 9px;
  color: var(--green);
  background: var(--green-soft);
  font-size: 0.78rem;
  font-weight: var(--weight-strong);
}

.detail-title {
  margin: 0;
  overflow-wrap: anywhere;
  color: #262017;
  font-size: 2.45rem;
  line-height: 1.1;
}

.detail-subtitle {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}

.platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.platform-link.spotify {
  border-color: #1db954;
  background: #1db954;
  color: #fff;
}

.platform-link.apple {
  border-color: #24201d;
  background: #24201d;
  color: #fff;
}

.platform-link.suno {
  border-color: var(--amber);
  background: var(--amber);
  color: #fff;
}

.platform-link.demon-pv-link {
  border-color: #7d1832;
  background: linear-gradient(135deg, #321326, #7d1832);
  color: #fff0d1;
}

.platform-link.is-missing {
  border-color: rgba(84, 54, 29, 0.18);
  background: #eee4d0;
  color: #817466;
  cursor: default;
}

.content-grid {
  display: block;
}

.section {
  margin-bottom: 28px;
}

.section h2 {
  margin: 0 0 12px;
  color: #2a241c;
  font-size: 1.05rem;
}

.story-body,
.meta-table {
  color: #363027;
  line-height: 1.9;
}

.story-body p {
  margin: 0 0 1em;
}

.story-body h2,
.story-body h3 {
  margin: 1.2em 0 0.45em;
  font-size: 1.05rem;
}

.story-empty {
  margin: 0;
  color: var(--muted);
}

.lyrics-box {
  padding-top: 12px;
  border-top: 2px solid rgba(83, 51, 24, 0.62);
}

.lyrics-text {
  position: relative;
  width: 100%;
  max-height: 690px;
  margin: 0;
  padding: 20px 22px;
  border: 1px solid rgba(84, 54, 29, 0.14);
  border-radius: 8px;
  overflow: auto;
  white-space: pre-wrap;
  color: #2e2820;
  background:
    linear-gradient(90deg, rgba(214, 189, 139, 0.18) 0 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(255, 248, 232, 0.68));
  background-size: 32px 100%, 100% 100%;
  font-family:
    var(--soft-font);
  font-size: 1rem;
  line-height: 1.9;
  box-shadow: inset 0 2px 16px rgba(94, 60, 26, 0.07);
}

.lyric-line {
  display: block;
  width: fit-content;
  max-width: 100%;
  min-height: 1.9em;
  opacity: 0;
  filter: blur(1.2px);
  animation: lyric-fade var(--duration) ease-out var(--delay) forwards;
}

.lyric-line.is-blank {
  animation-duration: 0.18s;
}

.sync-lyrics-shell {
  --caption-scale: 1;
  border: 1px solid rgba(84, 54, 29, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(214, 189, 139, 0.18) 0 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 248, 232, 0.74));
  background-size: 32px 100%, 100% 100%;
  box-shadow: inset 0 2px 16px rgba(94, 60, 26, 0.07);
  overflow: hidden;
}

.mv-stage {
  position: relative;
  width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 1px solid rgba(84, 54, 29, 0.14);
  background:
    radial-gradient(circle at 24% 20%, rgba(255, 250, 235, 0.22), transparent 34%),
    linear-gradient(135deg, rgba(34, 28, 22, 0.88), rgba(32, 74, 65, 0.74));
}

.mv-stage-layer {
  position: absolute;
  inset: 0;
}

.demon-mv-canvas {
  display: none;
}

.sync-lyrics-shell.is-demon-mv .mv-stage {
  background: #09070c;
  isolation: isolate;
}

.sync-lyrics-shell.is-demon-mv .mv-stage-layer {
  display: none;
}

.sync-lyrics-shell.is-demon-mv .mv-stage-caption {
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.8em;
  padding: 8%;
  color: #f6f1e9;
  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(1.5rem, 4vw, 3.4rem);
  line-height: 1.4;
  text-shadow: 0 0 18px rgba(0, 0, 0, 0.75);
  pointer-events: none;
}

.sync-lyrics-shell.is-demon-mv.has-jizura-renderer .mv-stage-caption {
  display: none;
}

.sync-lyrics-shell.is-demon-mv .mv-stage-caption span {
  animation: demon-caption-appear 0.7s ease-out both;
}

.sync-lyrics-shell.is-demon-mv.is-laplace .mv-stage-caption.is-intro::after {
  content: "歴史物理絵巻  ラプラスの悪魔";
  color: #d2a15d;
  font-size: 0.38em;
  letter-spacing: 0.12em;
}

@keyframes demon-caption-appear {
  from { opacity: 0; transform: translateY(0.25em) scale(0.97); filter: blur(5px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.sync-lyrics-shell.is-demon-mv .demon-mv-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.sync-lyrics-shell.is-demon-mv .mv-stage::after {
  opacity: 0;
}

.mv-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.025);
  transition:
    opacity 0.9s ease,
    transform 8s ease;
}

.mv-media.is-active {
  opacity: 0.76;
  transform: scale(1.08);
}

.mv-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20, 14, 10, 0.04), rgba(20, 14, 10, 0.34)),
    radial-gradient(ellipse at 50% 84%, rgba(255, 250, 230, 0.16), transparent 52%);
  pointer-events: none;
}

.mv-stage-caption {
  position: absolute;
  right: 24px;
  bottom: 20px;
  left: 24px;
  z-index: 1;
  color: rgba(255, 252, 242, 0.92);
  font-size: calc(1.18rem * var(--caption-scale, 1));
  font-weight: var(--weight-strong);
  line-height: 1.55;
  text-align: center;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.52);
}

.sync-lyrics-shell.is-thumbnail .mv-media {
  transform: scale(1);
  transition: opacity 0.5s ease;
}

.sync-lyrics-shell.is-thumbnail .mv-media.is-active {
  opacity: 0.82;
  transform: scale(1);
}

.sync-lyrics-shell.is-chroma .mv-stage {
  background: #00b140;
}

.sync-lyrics-shell.is-chroma .mv-stage-layer,
.sync-lyrics-shell.is-chroma .mv-media {
  display: none;
}

.sync-lyrics-shell.is-chroma .mv-stage::after {
  opacity: 0;
}

.sync-audio {
  display: none;
}

.sync-player {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 92px;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(84, 54, 29, 0.14);
  background: rgba(255, 252, 244, 0.72);
}

.sync-control {
  width: 38px;
  aspect-ratio: 1;
  border: 1px solid rgba(84, 54, 29, 0.18);
  border-radius: 8px;
  background: linear-gradient(180deg, #fffdf7, #f6ecd9);
  color: var(--green);
  cursor: pointer;
  font: inherit;
  font-weight: var(--weight-strong);
  box-shadow: 0 2px 0 rgba(72, 45, 22, 0.12);
}

.sync-range {
  width: 100%;
  accent-color: var(--green);
}

.sync-time {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: var(--weight-label);
  text-align: right;
}

.sync-mode-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 14px;
  border-bottom: 1px solid rgba(84, 54, 29, 0.14);
  background: rgba(255, 252, 244, 0.72);
}

.jizura-save {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(84, 54, 29, 0.14);
  background: #181017;
  color: #f6e6d5;
}

.sync-lyrics-shell:not(.is-demon-mv) .jizura-save { display: none; }

.jizura-save button, .jizura-save a { min-height: 34px; box-sizing: border-box; padding: 6px 11px; border: 1px solid #bd8191; border-radius: 6px; background: #4e2238; color: #fff0de; font: inherit; font-size: 0.82rem; text-decoration: none; cursor: pointer; }
.jizura-save button:hover, .jizura-save a:hover { background: #71304d; }
.jizura-save button:disabled { opacity: 0.5; cursor: default; }
.jizura-save [data-jizura-record] { background: #952c4c; border-color: #d7657d; }
.jizura-save [data-jizura-download] { background: #8a6735; border-color: #d0a365; }
.jizura-save [hidden] { display: none; }
.jizura-save-status { flex-basis: 100%; font-size: 0.77rem; color: #e0bac2; }

.sync-visual-switch {
  padding-top: 0;
}

.sync-caption-size-switch {
  align-items: center;
  padding-top: 0;
}

.sync-switch-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: var(--weight-label);
  padding: 0 3px;
}

.sync-mode-button {
  min-height: 34px;
  border: 1px solid rgba(84, 54, 29, 0.18);
  border-radius: 8px;
  background: linear-gradient(180deg, #fffdf7, #f6ecd9);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: var(--weight-strong);
  padding: 6px 12px;
}

.sync-mode-button.is-active {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

.sync-mode-button:disabled {
  opacity: 0.5;
  cursor: default;
}

.sync-caption-window {
  position: relative;
  height: 266px;
  padding: 14px;
  overflow: hidden;
}

.sync-caption-window::before,
.sync-caption-window::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  z-index: 1;
  height: 34px;
  pointer-events: none;
}

.sync-caption-window::before {
  top: 0;
  background: linear-gradient(180deg, rgba(255, 250, 240, 0.92), rgba(255, 250, 240, 0));
}

.sync-caption-window::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(255, 250, 240, 0.92), rgba(255, 250, 240, 0));
}

.sync-caption-track {
  display: grid;
  gap: 8px;
  transform: translateY(var(--caption-offset, 0));
  transition: transform 0.62s cubic-bezier(0.22, 0.74, 0.25, 1);
  will-change: transform;
}

.sync-caption-line {
  display: grid;
  width: 100%;
  min-height: 74px;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(46, 40, 32, 0.46);
  cursor: pointer;
  font: inherit;
  line-height: 1.55;
  opacity: 0;
  padding: 8px 10px;
  text-align: left;
  transition:
    background-color 0.42s ease,
    color 0.42s ease,
    opacity 0.5s ease;
}

.sync-caption-line.is-near {
  opacity: 0.62;
}

.sync-caption-line:hover:not(:disabled) {
  background: rgba(41, 107, 88, 0.06);
  color: #2e2820;
}

.sync-caption-line.is-active {
  background: rgba(41, 107, 88, 0.12);
  color: #172f28;
  opacity: 1;
}

.sync-caption-line.is-hidden {
  pointer-events: none;
}

.line-time {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: var(--weight-label);
  letter-spacing: 0;
}

.line-text {
  font-family: var(--soft-font);
  font-size: calc(1.04rem * var(--caption-scale, 1));
  font-weight: 520;
  overflow-wrap: anywhere;
}

.sync-caption-line.is-active .line-text {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}

.full-lyrics-block {
  margin-top: 28px;
}

.full-lyrics-block h3 {
  margin: 0 0 12px;
  color: #2a241c;
  font-size: 0.96rem;
}

.static-lyrics {
  max-height: none;
  overflow: visible;
}

.scroll-reveal {
  opacity: 0;
  transition: opacity 1.35s ease;
}

.scroll-reveal.is-visible {
  opacity: 1;
}

@keyframes lyric-fade {
  0% {
    opacity: 0;
    filter: blur(1.2px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes bubble-loop {
  0% {
    transform: translate3d(0, 0, 0) scale(0.96);
  }

  24% {
    transform: translate3d(
      calc(var(--bubble-x) * 0.72),
      calc(var(--bubble-y) * -0.38),
      0
    ) scale(1.04);
  }

  50% {
    transform: translate3d(var(--bubble-x), var(--bubble-y), 0) scale(0.98);
  }

  76% {
    transform: translate3d(
      calc(var(--bubble-x) * -0.34),
      calc(var(--bubble-y) * 0.58),
      0
    ) scale(1.03);
  }

  100% {
    transform: translate3d(0, 0, 0) scale(0.96);
  }
}

.meta-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 8px;
  background: rgba(255, 252, 244, 0.76);
  overflow: hidden;
}

.meta-table th,
.meta-table td {
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  vertical-align: top;
  text-align: left;
}

.meta-table tr:last-child th,
.meta-table tr:last-child td {
  border-bottom: 0;
}

.meta-table th {
  width: 96px;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.empty-state {
  padding: 42px 0;
  color: var(--muted);
}

@media (max-width: 1420px) {
  .site-header,
  .layout {
    margin-left: 28px;
    margin-right: 28px;
  }
}

@media (max-width: 920px) {
  .site-header {
    margin: 18px 18px 0;
    padding: 22px;
  }

  .layout {
    grid-template-columns: 1fr;
    margin: 0 18px;
    padding-top: 20px;
  }

  .content-grid,
  .detail-hero {
    grid-template-columns: 1fr;
  }

  .catalog-panel {
    position: static;
  }

  .song-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 44vh;
    overflow: auto;
    padding-right: 2px;
  }

  .song-detail {
    padding: 22px;
  }
}

@media (max-width: 620px) {
  .site-header {
    align-items: start;
    flex-direction: column;
  }

  h1 {
    font-size: 1.8rem;
  }

  .song-list {
    grid-template-columns: 1fr;
  }

  .song-card button {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .thumb {
    width: 56px;
  }

  .detail-title {
    font-size: 1.82rem;
  }

  .cover {
    max-width: 220px;
  }

  .lyrics-text {
    padding: 18px 16px;
  }

  .sync-player {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .sync-time {
    grid-column: 1 / -1;
    text-align: left;
  }

  .sync-caption-window {
    height: 304px;
    padding: 12px;
  }

  .sync-caption-line {
    min-height: 88px;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    padding: 8px;
  }

  .line-text {
    font-size: calc(0.98rem * var(--caption-scale, 1));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-bubbles span,
  .lyric-line,
  .mv-media,
  .scroll-reveal,
  .sync-caption-track,
  .sync-caption-line {
    opacity: 1;
    filter: none;
    animation: none;
    transition: none;
  }
}