/* /assets/css/style.css?v=20260919quality1 */
/* ============================================================
   H/MIX GALLERY - Main Stylesheet v7
   Theme: 音楽の風景図鑑 / Quiet Fantasy Music Library
   Palette: Warm Ivory × Forest Green × Soft Gold
   Inspired by: Studio Ghibli, WLOP, quiet RPG, Japanese nature
   ============================================================ */

/* ===== GOOGLE FONTS =====
   2026-09-09: @import を撤去。各HTMLの <link> と families/weights が食い違って
   いたため fonts.googleapis.com のCSSとwoff2を二重取得していた（実測+195KB）。
   加えて @import は HTML→style.css→fonts.css→woff2 の直列ブロックを作り、
   <link media="print" onload> による非同期化を打ち消していた。
   フォントは各ページの <link> が読む（scripts/audit-font-coverage.js で全ページ検証）。 */

/* ===== CSS CUSTOM PROPERTIES ===== */
:root {
  /* ── Background (Warm Ivory / Washi) ── */
  --color-bg:           #f5f0e8;   /* 和紙・生成り */
  --color-bg-2:         #ede8df;   /* やや濃い生成り */
  --color-bg-3:         #e8e2d8;   /* セクション区切り */
  --color-surface:      #f9f6f0;   /* カード面 */
  --color-surface-2:    #f2ede4;   /* ホバー面 */
  --color-surface-3:    #ebe5da;   /* 深めの面 */

  /* ── Forest Green (Base Color) ── */
  --color-green:        #2d5a3d;   /* 深森の緑 */
  --color-green-mid:    #3d7a52;   /* 中間の緑 */
  --color-green-light:  #5a9e6e;   /* 明るい緑 */
  --color-green-pale:   rgba(45, 90, 61, 0.08);
  --color-green-dim:    #1e3d29;   /* 暗い緑 */
  --color-moss:         #4a6741;   /* 苔色 */

  /* ── Soft Gold (Accent, reduced) ── */
  --color-gold:         #8a7040;   /* 落ち着いたゴールド */
  --color-gold-light:   #a8905a;   /* 明るめゴールド */
  --color-gold-dim:     #6a5530;   /* 暗めゴールド */
  --color-gold-pale:    rgba(138, 112, 64, 0.10);

  /* ── Borders ── */
  --color-border:       rgba(45, 90, 61, 0.15);
  --color-border-hover: rgba(45, 90, 61, 0.35);
  --color-border-gold:  rgba(138, 112, 64, 0.25);

  /* ── Text ── */
  --color-text:         #2a2018;   /* 濃い焦げ茶 */
  --color-text-muted:   #5a5040;   /* ミュート */
  --color-text-dim:     #8a7a68;   /* 薄め */
  --color-text-green:   var(--color-green);

  /* ── Semantic Category Colors ── */
  --color-japanese:     #2d5a3d;
  --color-horror:       #4a2020;
  --color-night:        #1a2a4a;
  --color-battle:       #4a3a1a;
  --color-sad:          #2a3a4a;

  /* ── Typography ── */
  --font-serif-jp:      'Noto Serif JP', 'Yu Mincho', 'YuMincho', serif;
  --font-sans-jp:       'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  --font-display:       'Cinzel', serif;

  /* ── Spacing ── */
  --space-xs:   0.25rem;
  --space-sm:   0.5rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  4rem;
  --space-4xl:  6rem;
  --space-5xl:  8rem;

  /* ── Layout ── */
  --max-width:        1200px;
  --header-height:    64px;
  --section-padding:  var(--space-5xl) var(--space-xl);

  /* ── Transitions ── */
  --transition-fast:  0.15s ease;
  --transition-base:  0.3s ease;
  --transition-slow:  0.6s ease;

  /* ── Borders ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;

  /* ── Dark Theme Shared Tokens ──
     player / theater / music-library-dark 等で共通利用 */

  /* Glow Green（ダークUI上の発光緑） */
  --dark-glow-green:        rgba(100, 220, 140, 0.60);
  --dark-glow-green-soft:   rgba(80, 200, 120, 0.20);
  --dark-glow-green-dim:    rgba(60, 140, 90, 0.12);
  --dark-glow-green-bright: rgba(120, 230, 155, 0.95);

  /* Dark Base（漆黒背景） */
  --dark-bg:          #0b1510;
  --dark-bg-2:        #0e1a14;
  --dark-bg-3:        #111d17;
  --dark-surface:     #182618;
  --dark-surface-2:   #1e3020;

  /* Dark Text */
  --dark-text:        #e8f5ec;
  --dark-text-muted:  #b0c8b8;
  --dark-text-dim:    #6e8f76;
  --dark-text-bright: rgba(200, 240, 215, 0.95);

  /* Dark Green Accent */
  --dark-green:       #7ecb95;
  --dark-green-mid:   #5aaa72;
  --dark-green-light: #9adfb4;
  --dark-green-pale:  rgba(100, 200, 140, 0.12);

  /* Dark Gold（ランタン・真鍮） */
  --dark-gold:        #c4a445;
  --dark-gold-light:  #e2c070;
  --dark-gold-warm:   rgba(209, 184, 122, 0.60);

  /* Dark Border */
  --dark-border:       rgba(100, 180, 130, 0.18);
  --dark-border-hover: rgba(100, 180, 130, 0.40);
  --dark-border-gold:  rgba(196, 164, 69, 0.30);

  /* Translucent White（ダーク上の白系テキスト・UI） */
  --dark-white:       rgba(255, 255, 255, 0.90);
  --dark-white-muted: rgba(255, 255, 255, 0.50);
  --dark-white-dim:   rgba(255, 255, 255, 0.15);
  --dark-white-warm:  rgba(255, 250, 240, 0.95);
}

/* ===== RESET & BASE ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: #000; /* bodyの外側に白が透けるのを防ぐ */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-sans-jp);
  background-color: #000;
  color: var(--color-text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-base);
}

img, svg {
  display: block;
  max-width: 100%;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* ===== 蔦・草花 装飾パターン（SVGインライン） ===== */
/* 控えめな植物モチーフをbefore/afterで表現 */
.decor-vine::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M10,60 Q30,20 60,40 Q90,60 110,30' stroke='%232d5a3d' stroke-width='0.8' fill='none' opacity='0.12'/%3E%3Cpath d='M0,90 Q40,70 60,90 Q80,110 120,80' stroke='%232d5a3d' stroke-width='0.6' fill='none' opacity='0.08'/%3E%3Ccircle cx='45' cy='35' r='3' fill='%232d5a3d' opacity='0.08'/%3E%3Ccircle cx='75' cy='55' r='2' fill='%232d5a3d' opacity='0.06'/%3E%3Ccircle cx='90' cy='25' r='2.5' fill='%232d5a3d' opacity='0.07'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  pointer-events: none;
  z-index: 0;
}

/* ===== UTILITY ===== */
.section-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--section-padding);
}

.section-label {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  justify-content: center;
}

.section-label--left {
  justify-content: flex-start;
}

.section-label-line {
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-green));
  opacity: 0.3;
  animation: lineBreathe 6s ease-in-out infinite;
}

@keyframes lineBreathe {
  0%, 100% { opacity: 0.3; max-width: 80px; }
  50%      { opacity: 0.5; max-width: 90px; }
}

.section-label--left .section-label-line {
  background: linear-gradient(90deg, var(--color-green), transparent);
  opacity: 0.3;
  max-width: 60px;
}

.section-label-text {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  color: var(--color-green);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.8;
}

.section-title {
  font-family: var(--font-serif-jp);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 500;
  color: var(--color-text);
  text-align: center;
  margin-bottom: var(--space-sm);
  letter-spacing: 0.05em;
}

.section-desc {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: var(--space-3xl);
  letter-spacing: 0.03em;
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.75rem 1.625rem;
  font-family: var(--font-sans-jp);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  border-radius: 999px;
  transition: all var(--transition-base);
  cursor: pointer;
  text-decoration: none;
}

.btn--primary {
  background: var(--color-green);
  color: #f5f0e8;
  border: 1px solid var(--color-green);
}

.btn--primary:hover {
  background: var(--color-green-mid);
  border-color: var(--color-green-mid);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.20);
}

.btn--ghost {
  background: transparent;
  color: var(--color-green);
  border: 1px solid var(--color-border);
}

.btn--ghost:hover {
  border-color: var(--color-green);
  background: var(--color-green-pale);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.btn--outline {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.btn--outline:hover {
  border-color: var(--color-green);
  color: var(--color-green);
}

/* ===== HEADER ===== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10020;
  height: var(--header-height);
  transition: background var(--transition-slow), backdrop-filter var(--transition-slow);
}

/* 通常ページ（ライト）*/
.site-header.scrolled {
  background: rgba(245, 240, 232, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 12px rgba(45, 90, 61, 0.06);
}

/* TOP ページ: Library と統一ダークヘッダー */
body.top-page .site-header {
  background: rgba(11, 21, 16, 0.82);
  border-bottom: 1px solid rgba(80, 160, 110, 0.12);
  box-shadow: 0 1px 30px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
body.top-page .site-header.scrolled {
  background: rgba(10, 18, 14, 0.97);
  border-bottom-color: rgba(80, 160, 110, 0.18);
}
/* TOP ヘッダーのテキスト色 → Library dark に統一 */
body.top-page .logo-text {
  color: #9adfb4;
  text-shadow: 0 0 24px rgba(126, 203, 149, 0.30);
}
body.top-page .logo-sub {
  color: #6e8f76;
}
body.top-page .nav-link {
  color: #b0c8b8;
}
body.top-page .nav-link:hover,
body.top-page .nav-link--active {
  color: #9adfb4;
}

/* active 状態の常時アンダーライン */
body.top-page .nav-link--active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 20%;
  right: 20%;
  height: 1px;
  background: rgba(154, 223, 180, 0.50);
  transform: scaleX(1);
}
body.top-page .nav-link--cta {
  border-color: rgba(100, 180, 130, 0.30);
  color: #9adfb4;
}
body.top-page .nav-link--cta:hover {
  background: rgba(80, 160, 110, 0.18);
  border-color: #5aaa72;
}
body.top-page .nav-toggle span {
  background: #b0c8b8;
}
body.top-page .nav-lang-toggle {
  border-color: rgba(100, 180, 130, 0.2);
}
body.top-page .nav-lang-toggle:hover {
  border-color: rgba(100, 190, 140, 0.55);
  background: rgba(100, 190, 140, 0.06);
}
body.top-page .lang-opt         { color: #b0c8b8; }
body.top-page .lang-opt--active { color: #9adfb4; font-weight: 700; }
body.top-page .lang-sep         { color: #b0c8b8; }
body.top-page .lang-globe       { stroke: #b0c8b8; }

/* ── TOP page: Site History / Composer / License / Footer
      → Music Library dark tone に統一
      CSS変数スコープ上書きのみ。各コンポーネントルールは変更不要。 ── */
body.top-page .site-history,
body.top-page .composer,
body.top-page .license-info,
body.top-page .site-footer {
  /* ── 背景 (Library dark) → 共通ダークトークン参照 ── */
  --color-bg:           var(--dark-bg);
  --color-bg-2:         var(--dark-bg-2);
  --color-bg-3:         var(--dark-bg-3);
  --color-surface:      var(--dark-surface);
  --color-surface-2:    var(--dark-surface-2);
  --color-surface-3:    #223625;
  /* ── テキスト ── */
  --color-text:         var(--dark-text);
  --color-text-muted:   var(--dark-text-muted);
  --color-text-dim:     var(--dark-text-dim);
  /* ── グリーン ── */
  --color-green:        var(--dark-green);
  --color-green-mid:    var(--dark-green-mid);
  --color-green-light:  var(--dark-green-light);
  --color-green-pale:   var(--dark-green-pale);
  --color-green-dim:    #2d5a3d;
  /* ── ゴールド ── */
  --color-gold:         var(--dark-gold);
  --color-gold-light:   var(--dark-gold-light);
  --color-gold-pale:    rgba(196, 164, 69, 0.10);
  /* ── ボーダー ── */
  --color-border:       var(--dark-border);
  --color-border-hover: var(--dark-border-hover);
  --color-border-gold:  var(--dark-border-gold);

  background: var(--color-bg);
  color: var(--color-text);
}

/* composer の蔦装飾: ダーク地でも柔らかく */
body.top-page .composer::after {
  opacity: 0.55; /* Library の翡翠グリーンで SVG stroke が見える調整 */
}

/* license-info 背景画像: ダーク地では透過を上げてメリハリを出す */
body.top-page .license-info::before {
  opacity: 0.12;
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-xl);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-logo {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-decoration: none;
}

.logo-text {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--color-green);
  line-height: 1;
}

.logo-sub {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--color-text-dim);
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav-item {
  display: block;
  position: relative;
  line-height: 1;
}

.nav-link {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  transition: color var(--transition-base);
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-green);
  transform: scaleX(0);
  transition: transform var(--transition-base);
}

.nav-link:hover {
  color: var(--color-green);
}

.nav-link:hover::after {
  transform: scaleX(1);
}

.nav-item--dropdown > .nav-link {
  padding-right: 0.85rem;
}

.nav-item--dropdown > .nav-link::before {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-60%) rotate(45deg);
  opacity: 0.65;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.nav-item--dropdown:hover > .nav-link::before,
.nav-item--dropdown:focus-within > .nav-link::before {
  opacity: 1;
  transform: translateY(-35%) rotate(225deg);
}

.nav-submenu {
  position: absolute;
  top: calc(100% + 0.7rem);
  left: 50%;
  z-index: 260;
  min-width: 178px;
  padding: 0.45rem;
  list-style: none;
  background: rgba(10, 20, 15, 0.96);
  border: 1px solid rgba(100, 180, 130, 0.24);
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.38);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}

.nav-list.open .nav-submenu {
  position: absolute;
  top: calc(100% + 0.7rem);
  left: 50%;
  width: auto;
  min-width: 178px;
  margin: 0;
  padding: 0.45rem;
  background: rgba(10, 20, 15, 0.96);
  border: 1px solid rgba(100, 180, 130, 0.24);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.38);
  transform: translate(-50%, -4px);
}

.nav-submenu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -0.75rem;
  height: 0.75rem;
}

.nav-item--dropdown:hover .nav-submenu,
.nav-item--dropdown:focus-within .nav-submenu,
.nav-list.open .nav-item--dropdown:hover .nav-submenu,
.nav-list.open .nav-item--dropdown:focus-within .nav-submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav-submenu__link {
  display: block;
  padding: 0.58rem 0.68rem;
  border-radius: 4px;
  color: rgba(210, 235, 218, 0.86);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
  transition: color var(--transition-base), background var(--transition-base);
}

.nav-submenu__link:hover,
.nav-submenu__link:focus-visible,
.nav-submenu__link--active {
  color: #9adfb4;
  background: rgba(100, 180, 130, 0.12);
}

.nav-link--cta {
  padding: 0.4rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-green);
}

.nav-link--cta::after {
  display: none;
}

.nav-link--cta:hover {
  background: var(--color-green-pale);
  border-color: var(--color-green);
}

.nav-link--theater {
  color: var(--color-text-muted);
  font-weight: inherit;
}
.nav-link--theater::after {
  background: var(--color-green);
}

.nav-lang-toggle {
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  background: transparent;
  border: 1px solid rgba(45, 90, 61, 0.3);
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: border-color var(--transition-base), background var(--transition-base);
  flex-shrink: 0;
}
.nav-lang-toggle:hover {
  border-color: var(--color-green-mid);
  background: var(--color-green-pale);
}

.mobile-action-dock {
  display: none;
}

/* 言語トグル — 全ページ共通（opacity 不使用・色で直接制御） */
.lang-globe {
  stroke: rgba(170, 210, 185, 0.7);
  flex-shrink: 0;
}
.lang-opt {
  color: rgba(170, 210, 185, 0.6);
  transition: color var(--transition-base);
}
.lang-opt--active {
  color: rgba(154, 223, 180, 0.95);
  font-weight: 700;
}
.lang-sep {
  color: rgba(170, 210, 185, 0.3);
}
/* Dark library / track-detail pages */
body.library-page--dark .nav-lang-toggle {
  border-color: rgba(80, 160, 110, 0.22);
}
body.library-page--dark .nav-lang-toggle:hover {
  border-color: rgba(80, 160, 110, 0.5);
  background: rgba(80, 160, 110, 0.07);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 4px;
  min-width: 44px;
  min-height: 44px;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--color-text-muted);
  transition: all var(--transition-base);
}

/* ===== HERO ===== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 幻想の森・霧の背景（時間帯で切り替え） */
.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('/assets/images/hero/hero-bg.webp'); /* fallback */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  will-change: transform;  /* パララックス用 */
  transition: background-image 0s, opacity 1.5s ease;
}

/* 幻想オーバーレイ（深みと静けさ） */
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(5, 15, 10, 0.55) 0%,
      rgba(8, 20, 12, 0.45) 25%,
      rgba(8, 22, 14, 0.40) 50%,
      rgba(5, 15, 10, 0.82) 100%
    );
  pointer-events: none;
  z-index: 1;
}

/* 光のゆらぎレイヤー（幻想的な光源） */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 40%, rgba(100, 160, 120, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 40% 25% at 30% 30%, rgba(80, 140, 100, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 70% 30% at 50% 100%, rgba(5, 15, 10, 0.50) 0%, transparent 70%);
  pointer-events: none;
  z-index: 2;
  animation: lanternGlow 7s ease-in-out infinite;
}

.hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(
    to bottom,
    rgba(5, 15, 10, 0.20) 0%,
    rgba(8, 20, 12, 0.15) 30%,
    rgba(8, 20, 12, 0.18) 55%,
    rgba(5, 15, 8, 0.80) 100%
  );
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: var(--space-xl);
  max-width: 800px;
  /* テキスト背後に暗いスポットを追加して可読性を向上 */
  background: radial-gradient(
    ellipse 85% 75% at 50% 50%,
    rgba(5, 15, 10, 0.38) 0%,
    rgba(5, 15, 10, 0.18) 60%,
    transparent 100%
  );
  border-radius: 50%;
}

/* モバイルでは楕円の縦横比を安定化 */
@media (max-width: 768px) {
  .hero-content {
    border-radius: 40%;
    background: radial-gradient(
      ellipse 120% 60% at 50% 50%,
      rgba(5, 15, 10, 0.35) 0%,
      rgba(5, 15, 10, 0.15) 60%,
      transparent 100%
    );
  }
}

.hero-eyebrow {
  font-family: var(--font-serif-jp);
  font-size: 0.8rem;
  letter-spacing: 0.4em;
  color: rgba(190, 230, 205, 0.90);
  margin-bottom: var(--space-lg);
  opacity: 0;
  animation: fadeInUp 1s ease 0.3s forwards;
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.85),
    0 2px 10px rgba(0, 0, 0, 0.65);
}
/* h1 サブライン: ブランド名直下、控えめなキーワード表示 (SEO 用) */
.hero-eyebrow-sub {
  display: block;
  margin-top: 0.35em;
  font-family: var(--font-serif-jp);
  font-weight: 300;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: rgba(190, 230, 205, 0.55);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* ヒーロー下の静かな抜け道: カテゴリから探す
   詩性を壊さぬよう、粒子のように控えめに配置 */
.hero-skip-link {
  position: absolute;
  bottom: 18px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 2px;
  font-family: var(--font-serif-jp);
  font-size: 10px;
  letter-spacing: 0.25em;
  color: rgba(245, 216, 150, 0.45);
  text-decoration: none;
  opacity: 0;
  animation: fadeInUp 1.4s ease 1.8s forwards;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
  transition: color 0.5s ease, opacity 0.5s ease;
  z-index: 5;
}
.hero-skip-line {
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 216, 150, 0.5));
  flex-shrink: 0;
  transition: width 0.5s ease, background 0.5s ease;
}
.hero-skip-en {
  font-family: 'Cinzel', serif;
  font-style: italic;
  font-size: 8px;
  letter-spacing: 0.3em;
  color: rgba(245, 216, 150, 0.3);
  margin-left: 0.3em;
}
.hero-skip-link:hover {
  color: rgba(245, 216, 150, 0.95);
}
.hero-skip-link:hover .hero-skip-line {
  width: 40px;
  background: linear-gradient(90deg, transparent, rgba(245, 216, 150, 0.9));
}
.hero-skip-link:hover .hero-skip-en {
  color: rgba(245, 216, 150, 0.7);
}
@media (max-width: 720px) {
  .hero-skip-link {
    bottom: 68px;
    right: 16px;
    font-size: 9px;
  }
  .hero-skip-en { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-skip-link { animation: none; opacity: 1; }
}

.hero-title {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
  opacity: 0;
  animation: fadeInUp 1s ease 0.6s forwards;
}

.hero-title-main {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 600;
  letter-spacing: 0.15em;
  color: #f0f8f2;
  line-height: 1;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.90),
    0 4px 20px rgba(0, 0, 0, 0.75),
    0 0 60px rgba(80, 160, 100, 0.20),
    0 0 120px rgba(60, 140, 80, 0.10);
}

.hero-title-sub {
  font-family: var(--font-display);
  font-size: clamp(0.75rem, 2vw, 1rem);
  font-weight: 400;
  letter-spacing: 0.25em;
  color: rgba(180, 225, 195, 0.90);
  text-transform: uppercase;
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.90),
    0 2px 12px rgba(0, 0, 0, 0.70);
}

.hero-copy {
  font-family: var(--font-sans-jp);
  font-size: clamp(0.85rem, 1.5vw, 1rem);
  color: rgba(220, 245, 228, 0.95);
  line-height: 2;
  margin-bottom: var(--space-2xl);
  opacity: 0;
  animation: fadeInUp 1s ease 0.9s forwards;
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.90),
    0 2px 12px rgba(0, 0, 0, 0.70);
}

.hero-copy--poetic {
  font-family: var(--font-serif-jp);
  font-size: clamp(0.9rem, 1.6vw, 1.05rem);
  color: rgba(220, 245, 228, 0.95);
  line-height: 2.2;
  letter-spacing: 0.05em;
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.90),
    0 2px 12px rgba(0, 0, 0, 0.70);
}

.hero-copy-en {
  display: block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: rgba(160, 215, 175, 0.85);
  margin-top: var(--space-md);
  text-transform: uppercase;
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.90),
    0 2px 10px rgba(0, 0, 0, 0.70);
}

/* ===== HERO SIGNATURE TRACK（静かに聴く） ===== */
.hero-signature-track {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background: rgba(10, 25, 15, 0.55);
  border: 1px solid rgba(100, 160, 120, 0.20);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-xl);
  margin-bottom: var(--space-2xl);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  animation: fadeInUp 1s ease 1.0s forwards;
  backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}

/* 波紋エフェクト用 */
.hero-signature-track::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(100, 180, 120, 0.04) 0%, transparent 70%);
  pointer-events: none;
}

.hero-track-label {
  font-family: var(--font-serif-jp);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: rgba(140, 190, 155, 0.65);
  text-align: center;
}

.hero-track-info {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.hero-track-icon {
  font-size: 1.5rem;
  opacity: 0.8;
}

.hero-track-title {
  font-family: var(--font-serif-jp);
  font-size: 1.1rem;
  font-weight: 500;
  color: #d8f0e0;
  letter-spacing: 0.05em;
}

.hero-track-title-en {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: rgba(120, 180, 140, 0.60);
  text-transform: uppercase;
  margin-top: 2px;
}

.hero-track-player {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  justify-content: center;
}

/* 「静かに聴く」ボタン */
.hero-play-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.5rem 1.4rem;
  background: rgba(80, 140, 100, 0.20);
  color: rgba(200, 235, 210, 0.90);
  border: 1px solid rgba(100, 160, 120, 0.30);
  border-radius: 999px;
  font-family: var(--font-serif-jp);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.hero-play-btn:hover {
  background: rgba(80, 140, 100, 0.35);
  border-color: rgba(100, 160, 120, 0.50);
  box-shadow: 0 0 20px rgba(80, 160, 100, 0.25);
}

.hero-play-btn.playing {
  background: rgba(60, 120, 80, 0.30);
  color: rgba(180, 230, 195, 0.90);
  border-color: rgba(100, 170, 120, 0.40);
}

/* 波紋アニメーション（再生中） */
.hero-play-btn.playing::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 1px solid rgba(100, 180, 120, 0.3);
  animation: ripplePulse 2s ease-in-out infinite;
}

.hero-play-label {
  font-weight: 400;
}

.hero-track-link {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: rgba(120, 180, 140, 0.55);
  text-decoration: none;
  transition: color var(--transition-base);
  white-space: nowrap;
}

.hero-track-link:hover {
  color: rgba(160, 220, 175, 0.90);
}

/* 音の波紋（視覚的な音の気配） */
.hero-sound-ripple {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 40px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.hero-sound-ripple.active {
  opacity: 1;
}

.hero-sound-ripple svg {
  width: 100%;
  height: 100%;
}

.hero-actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
  opacity: 0;
  animation: fadeInUp 1s ease 1.1s forwards;
}

.hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  opacity: 0;
  animation: fadeInUp 1s ease 1.3s forwards;
}

.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.hero-stat-num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: rgba(220, 248, 228, 0.98);
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.90),
    0 2px 12px rgba(0, 0, 0, 0.70);
}

.hero-stat-label {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: rgba(170, 215, 182, 0.85);
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.80);
}

.hero-stat-divider {
  width: 1px;
  height: 32px;
  background: rgba(100, 160, 110, 0.2);
}

.hero-scroll-hint {
  position: absolute;
  bottom: var(--space-2xl);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  opacity: 0;
  animation: fadeIn 1s ease 2s forwards;
}

.hero-scroll-line {
  display: block;
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, rgba(100, 160, 110, 0.5), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

.hero-scroll-text {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  color: rgba(160, 200, 165, 0.70);
  text-transform: uppercase;
}

/* ===== TODAY'S MUSIC ===== */
.todays-music {
  background: var(--color-bg-2);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}

/* 蔦の薄い装飾 */
.todays-music::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 300px; height: 300px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cpath d='M280,20 Q200,80 220,150 Q240,220 180,270' stroke='%232d5a3d' stroke-width='1.2' fill='none' opacity='0.07'/%3E%3Cpath d='M300,80 Q240,100 250,160 Q260,220 200,260' stroke='%232d5a3d' stroke-width='0.8' fill='none' opacity='0.05'/%3E%3Ccircle cx='215' cy='148' r='4' fill='%232d5a3d' opacity='0.06'/%3E%3Ccircle cx='185' cy='268' r='3' fill='%232d5a3d' opacity='0.05'/%3E%3Cpath d='M220,150 Q230,130 245,135' stroke='%232d5a3d' stroke-width='0.8' fill='none' opacity='0.06'/%3E%3Cpath d='M220,150 Q210,165 225,175' stroke='%232d5a3d' stroke-width='0.8' fill='none' opacity='0.06'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0.8;
}

.todays-card {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: 0 2px 20px rgba(45, 90, 61, 0.06);
}

/* カードの上部に薄いグリーンのライン */
.todays-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-green-light), transparent);
  opacity: 0.3;
}

.todays-card-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(45, 90, 61, 0.04) 0%, transparent 70%),
    linear-gradient(135deg, rgba(45, 90, 61, 0.03) 0%, transparent 60%);
  pointer-events: none;
}

.todays-card-sigil {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, 90%);
  height: min(420px, 90%);
  background-image: url('/assets/images/sigil-emblem.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

.todays-card-content {
  position: relative;
  z-index: 1;
  padding: var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.todays-track-info {
  text-align: center;
}

.todays-track-category {
  display: inline-block;
  padding: 0.2rem 0.8rem;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--color-green);
  border: 1px solid var(--color-border);
  border-radius: 100px;
  margin-bottom: var(--space-md);
}

.todays-track-title {
  font-family: var(--font-serif-jp);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
  letter-spacing: 0.05em;
}

.todays-track-title-en {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

.todays-track-desc {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.8;
}

.todays-player {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.play-btn {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-green);
  color: #f5f0e8;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(45, 90, 61, 0.2);
}

.play-btn:hover {
  background: var(--color-green-mid);
  transform: scale(1.05);
  box-shadow: 0 4px 20px rgba(45, 90, 61, 0.3);
}

.play-btn.playing {
  background: var(--color-surface-3);
  color: var(--color-green);
  border: 1px solid var(--color-border);
}

.todays-player-info {
  flex: 1;
}

.progress-bar-wrap {
  height: 2px;
  background: var(--color-surface-3);
  border-radius: 2px;
  margin-bottom: var(--space-sm);
  cursor: pointer;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: var(--color-green);
  width: 0%;
  transition: width 0.1s linear;
  border-radius: 2px;
}

.player-time {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--color-text-dim);
  font-variant-numeric: tabular-nums;
}

.todays-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--color-green);
  transition: gap var(--transition-base);
  padding: var(--space-md);
  border-top: 1px solid var(--color-border);
  margin: 0 calc(-1 * var(--space-2xl));
  margin-bottom: calc(-1 * var(--space-2xl));
}

.todays-link:hover {
  gap: var(--space-md);
  background: var(--color-green-pale);
}

/* ===== SCENE SEARCH ===== */
.scene-search {
  background: var(--color-bg);
  position: relative;
  overflow: hidden;
}

/* 左下に蔦の装飾 */
.scene-search::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 250px; height: 250px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 250 250'%3E%3Cpath d='M20,250 Q60,180 40,120 Q20,60 80,20' stroke='%232d5a3d' stroke-width='1.2' fill='none' opacity='0.08'/%3E%3Cpath d='M0,200 Q50,160 30,100 Q10,40 60,10' stroke='%232d5a3d' stroke-width='0.8' fill='none' opacity='0.05'/%3E%3Ccircle cx='42' cy='118' r='4' fill='%232d5a3d' opacity='0.06'/%3E%3Ccircle cx='78' cy='22' r='3' fill='%232d5a3d' opacity='0.05'/%3E%3Cpath d='M40,120 Q25,108 28,95' stroke='%232d5a3d' stroke-width='0.8' fill='none' opacity='0.06'/%3E%3Cpath d='M40,120 Q55,112 58,125' stroke='%232d5a3d' stroke-width='0.8' fill='none' opacity='0.06'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  pointer-events: none;
}

.scene-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-md);
}

.scene-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 3/4;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
  border: 1px solid var(--color-border);
  transition: all var(--transition-base);
  box-shadow: 0 2px 12px rgba(45, 90, 61, 0.06);
}

.scene-card:hover {
  border-color: var(--color-green);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(45, 90, 61, 0.15);
}

.scene-card-bg {
  position: absolute;
  inset: 0;
  transition: transform var(--transition-slow);
}

.scene-card:hover .scene-card-bg {
  transform: scale(1.05);
}

/* シーンカードの背景（明るい幻想的な色調） */
.scene-card--samurai .scene-card-bg {
  background: linear-gradient(
    160deg,
    #2a4a30 0%,
    #1e3825 40%,
    #2a3a1a 100%
  );
}

.scene-card--horror .scene-card-bg {
  background: linear-gradient(
    160deg,
    #2a1a1a 0%,
    #1f1010 40%,
    #2a1a2a 100%
  );
}

.scene-card--night .scene-card-bg {
  background: linear-gradient(
    160deg,
    #1a2035 0%,
    #101528 40%,
    #1a1a35 100%
  );
}

.scene-card--battle .scene-card-bg {
  background: linear-gradient(
    160deg,
    #3a2a10 0%,
    #2a2010 40%,
    #3a1a10 100%
  );
}

.scene-card--sad .scene-card-bg {
  background: linear-gradient(
    160deg,
    #1a2535 0%,
    #141c2a 40%,
    #1a2535 100%
  );
}

/* シーンカードの上部装飾ライン */
.scene-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(100, 160, 110, 0.4), transparent);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.scene-card:hover::before {
  opacity: 1;
}

.scene-card-content {
  position: relative;
  z-index: 2;
  padding: var(--space-lg);
  width: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
}

.scene-card-icon {
  display: block;
  font-size: 2rem;
  margin-bottom: var(--space-sm);
  filter: grayscale(0.2);
}

.scene-card-title {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #e8f0e8;
  margin-bottom: 2px;
}

.scene-card-desc {
  font-size: 0.7rem;
  color: rgba(200, 220, 200, 0.6);
  letter-spacing: 0.05em;
}

/* ===== BGM CATEGORIES ===== */
.bgm-categories {
  background: var(--color-bg-2);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.category-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--transition-base);
  box-shadow: 0 1px 8px rgba(45, 90, 61, 0.04);
  position: relative;
  overflow: hidden;
}

/* カードの左端に薄いグリーンのライン */
.category-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--color-green);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.category-card:hover::before {
  opacity: 0.4;
}

.category-card:hover {
  border-color: var(--color-border-hover);
  background: var(--color-surface-2);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(45, 90, 61, 0.10);
}

.category-card--all {
  background: var(--color-surface-2);
  border-color: var(--color-border-hover);
}

.category-card--all:hover {
  border-color: var(--color-green);
  background: var(--color-surface-3);
}

.category-card-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}

.category-card-body {
  flex: 1;
  min-width: 0;
}

.category-card-title {
  font-family: var(--font-serif-jp);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 1px;
  letter-spacing: 0.03em;
}

.category-card-title-en {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: var(--color-text-dim);
  margin-bottom: var(--space-xs);
  text-transform: uppercase;
}

.category-card-count {
  font-size: 0.75rem;
  color: var(--color-green);
  margin-bottom: var(--space-xs);
  font-variant-numeric: tabular-nums;
}

.category-card-desc {
  font-size: 0.75rem;
  color: var(--color-text-dim);
  line-height: 1.6;
}

/* ===== MUSIC LIBRARY ===== */
.music-library {
  background: var(--color-bg);
}

.library-search-wrap {
  max-width: 560px;
  margin: 0 auto var(--space-xl);
}

.library-search-box {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 0.75rem var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 100px;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  box-shadow: 0 1px 8px rgba(45, 90, 61, 0.05);
}

.library-search-box:focus-within {
  border-color: var(--color-green);
  box-shadow: 0 2px 16px rgba(45, 90, 61, 0.12);
}

.search-icon {
  color: var(--color-text-dim);
  flex-shrink: 0;
}

.library-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-sans-jp);
  font-size: 0.875rem;
  color: var(--color-text);
  caret-color: var(--color-green);
}

.library-search-input::placeholder {
  color: var(--color-text-dim);
}

.library-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  margin-bottom: var(--space-2xl);
}

.tag-btn {
  padding: 0.4rem 1rem;
  font-family: var(--font-sans-jp);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 100px;
  transition: all var(--transition-base);
  cursor: pointer;
}

.tag-btn:hover {
  border-color: var(--color-green);
  color: var(--color-green);
  background: var(--color-green-pale);
}

.tag-btn--active {
  background: var(--color-green-pale);
  border-color: var(--color-green);
  color: var(--color-green);
}

/* トラックリスト */
.track-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: var(--space-2xl);
}

.track-item {
  display: grid;
  grid-template-columns: 48px 1fr auto auto;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
  cursor: pointer;
}

.track-item:hover {
  background: var(--color-surface-2);
  border-color: var(--color-border-hover);
  box-shadow: 0 2px 12px rgba(45, 90, 61, 0.07);
}

.track-item.playing {
  background: var(--color-surface-2);
  border-color: var(--color-green);
  border-left: 3px solid var(--color-green);
}

.track-num {
  font-family: var(--font-display);
  font-size: 0.75rem;
  color: var(--color-text-dim);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.track-item.playing .track-num {
  color: var(--color-green);
}

.track-info {
  min-width: 0;
}

.track-title {
  font-family: var(--font-serif-jp);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.track-item.playing .track-title {
  color: var(--color-green);
}

.track-title-en {
  font-size: 0.7rem;
  color: var(--color-text-dim);
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.track-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.track-tag {
  padding: 1px 6px;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  color: var(--color-text-dim);
  background: var(--color-surface-3);
  border-radius: 3px;
  border: 1px solid var(--color-border);
}

.track-duration {
  font-size: 0.75rem;
  color: var(--color-text-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.track-play-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
  cursor: pointer;
  flex-shrink: 0;
}

.track-play-btn:hover {
  border-color: var(--color-green);
  color: var(--color-green);
  background: var(--color-green-pale);
}

.track-item.playing .track-play-btn {
  border-color: var(--color-green);
  color: var(--color-green);
  background: var(--color-green-pale);
}

.library-more {
  text-align: center;
}

/* ===== COMPOSER ===== */
/* セクション間の余白リズム — 静の「間」を広く取る */
.composer .section-container {
  padding-top: 10rem;
  padding-bottom: 10rem;
}

.composer {
  background: var(--color-bg-2);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}

/* 右上に蔦の装飾 */
.composer::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 200px; height: 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath d='M200,0 Q140,60 160,120 Q180,180 120,200' stroke='%232d5a3d' stroke-width='1' fill='none' opacity='0.09'/%3E%3Ccircle cx='158' cy='118' r='3.5' fill='%232d5a3d' opacity='0.07'/%3E%3Cpath d='M160,120 Q148,108 150,95' stroke='%232d5a3d' stroke-width='0.8' fill='none' opacity='0.07'/%3E%3Cpath d='M160,120 Q172,112 175,125' stroke='%232d5a3d' stroke-width='0.8' fill='none' opacity='0.07'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  pointer-events: none;
}

.composer-inner {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-4xl);
  align-items: center;
}

.composer-text {
  max-width: 560px;
}

.composer-name {
  font-family: var(--font-serif-jp);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  color: var(--color-text);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-xs);
}

.composer-name-en {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  color: var(--color-green);
  margin-bottom: var(--space-xl);
  text-transform: uppercase;
}

.composer-bio {
  text-wrap: pretty;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 2.2;
  margin-bottom: var(--space-md);
  font-feature-settings: 'palt' 1;
}

.composer-bio-en {
  font-size: 0.8rem;
  color: var(--color-text-dim);
  line-height: 1.8;
  margin-bottom: var(--space-2xl);
  font-style: italic;
}

.composer-links {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* SNSアイコンボタン */
.composer-social-btn {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-green);
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-decoration: none;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.composer-social-btn:hover {
  border-color: var(--color-border-hover);
  color: var(--color-green-mid);
  background: var(--color-green-pale);
}

.composer-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.composer-emblem {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 1px solid var(--color-border-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: var(--color-surface);
  box-shadow: 0 4px 24px rgba(45, 90, 61, 0.08);
}

.composer-emblem::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
}

.composer-emblem::after {
  content: '';
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(45, 90, 61, 0.05) 0%, transparent 70%);
}

.composer-emblem-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  z-index: 1;
}

.composer-emblem-text {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--color-green);
}

.composer-emblem-year {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  color: var(--color-text-dim);
  text-transform: uppercase;
}

/* アルバムジャケット（Composer セクション） */
.composer-album {
  display: block;
  text-decoration: none;
  text-align: center;
}
.composer-album__jacket {
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(154, 223, 180, 0.10);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.composer-album:hover .composer-album__jacket {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(154, 223, 180, 0.28);
}
.composer-album__label {
  display: block;
  margin-top: 0.8rem;
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--color-text-dim);
  text-transform: uppercase;
}

.composer-album__cta {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-sans-jp);
  font-size: 0.72rem;
  color: var(--color-green);
  opacity: 0.7;
  transition: opacity 0.25s ease;
}
.composer-album:hover .composer-album__cta {
  opacity: 1;
}

/* ===== LICENSE INFO ===== */
.license-info {
  position: relative;
  background: var(--color-bg);
  overflow: hidden;
}

.license-info::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/assets/images/bg/terms.webp');
  background-size: cover;
  background-position: center;
  opacity: 0.10;
  pointer-events: none;
}


.license-info .section-container {
  position: relative;
  z-index: 1;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.license-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
  max-width: 720px;
  margin: 0 auto;
}

.license-grid--3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1100px;
  align-items: stretch;
}

@media (max-width: 1000px) {
  .license-grid--3 {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
}

.license-tier-note {
  max-width: 1100px;
  margin: var(--space-xl) auto 0;
  font-size: 0.82rem;
  line-height: 1.9;
  color: var(--color-text-muted);
  text-align: center;
}

.license-tier-note b {
  color: var(--color-text);
  font-weight: 600;
}

.license-tier-note a {
  display: inline-block;
  padding: 10px 0;
  margin: -10px 0;
  color: var(--color-green);
}

.license-card--pro .license-card-list--rates li {
  padding-left: 0;
  font-size: 0.8rem;
  line-height: 1.7;
}

.license-card--pro .license-card-list--rates li::before {
  content: none;
}

.license-card--pro .license-card-list--rates li > span {
  display: block;
  padding-left: 4.3rem;
  text-indent: -4.3rem;
}

.license-card--pro .license-card-list--rates b {
  display: inline-block;
  width: 4.3rem;
  text-indent: 0;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-green);
  white-space: nowrap;
}

.license-card {
  padding: var(--space-2xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  box-shadow: 0 2px 16px rgba(45, 90, 61, 0.05);
}

.license-card--free {
  box-shadow:
    0 2px 16px rgba(45, 90, 61, 0.05),
    inset 0 1px 0 rgba(100, 180, 130, 0.10);
}

.license-card--free .license-card-badge {
  color: var(--color-green);
  border-color: var(--color-green);
  background: var(--color-green-pale);
}

.license-card--commercial {
  border: 1px solid var(--color-border-gold);
  background: linear-gradient(165deg, var(--color-surface) 0%, rgba(138, 112, 64, 0.06) 100%);
  box-shadow:
    0 2px 20px rgba(138, 112, 64, 0.08),
    inset 0 1px 0 rgba(138, 112, 64, 0.12);
}

.license-card--commercial .license-card-header {
  border-bottom: 1px solid rgba(138, 112, 64, 0.15);
  padding-bottom: 1.5rem;
  margin-bottom: 0.5rem;
}

.license-card-header {
  text-align: center;
}

.license-card-badge {
  display: inline-block;
  padding: 0.2rem 0.8rem;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  border: 1px solid var(--color-border);
  border-radius: 100px;
  margin-bottom: var(--space-md);
}

.license-card-badge--gold {
  color: var(--color-green);
  border-color: var(--color-border-hover);
}

.license-card-title {
  font-family: var(--font-serif-jp);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.license-card-price {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-green);
  letter-spacing: 0.05em;
}

.license-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
}

.license-card-list li {
  text-wrap: pretty;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  padding-left: var(--space-lg);
  position: relative;
}

.license-card-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--color-green);
  opacity: 0.5;
}

/* ===== FOOTER ===== */
.site-footer {
  position: relative;
  background: var(--color-bg-2);
  border-top: 1px solid var(--color-border);
}

/* 固定プレイヤー用に body へ確保した余白が、body の黒のまま帯に見えていた。
   フッターと同じ色で塗る（高さは確保している余白と同じなので文書は伸びない）。 */
.site-footer::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 88px;
  background: var(--color-bg-2);
  pointer-events: none;
}

@media (max-width: 768px) {
  .site-footer::after { height: 90px; }
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-4xl) var(--space-xl) var(--space-2xl);
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4xl);
  margin-bottom: var(--space-3xl);
  padding-bottom: var(--space-3xl);
  border-bottom: 1px solid var(--color-border);
}

.footer-logo {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--color-green);
  margin-bottom: var(--space-sm);
}

.footer-tagline {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--color-text-dim);
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}

.footer-desc {
  font-size: 0.8rem;
  color: var(--color-text-dim);
  line-height: 1.8;
  max-width: 300px;
}

.footer-nav {
  display: flex;
  gap: var(--space-3xl);
}

.footer-nav-heading {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  color: var(--color-green);
  text-transform: uppercase;
  margin-bottom: var(--space-lg);
}

.footer-nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.footer-nav-list a {
  font-size: 0.8rem;
  color: var(--color-text-dim);
  transition: color var(--transition-base);
}

.footer-nav-list a:hover {
  color: var(--color-green);
}

.footer-bottom {
  text-align: center;
}

.footer-copy {
  font-size: 0.75rem;
  color: var(--color-text-dim);
  letter-spacing: 0.05em;
}

/* ===== FOOTER v2: site-footer__* ===== */
.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 10vh var(--space-xl) 6vh;
}

/* ── ブランド導入 ── */
.site-footer__intro {
  margin-bottom: 5vh;
  padding-bottom: 5vh;
  border-bottom: 1px solid var(--color-border);
}

.site-footer__logo {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--color-green);
  margin: 0 0 var(--space-sm);
}

.site-footer__tagline {
  font-family: var(--font-serif-jp);
  font-size: 1rem;
  color: var(--color-text);
  margin: 0 0 var(--space-sm);
  letter-spacing: 0.06em;
}

.site-footer__desc {
  font-size: 0.8rem;
  color: var(--color-text-dim);
  line-height: 1.8;
  margin: 0;
}

/* ── Favorites ブロック ── */
.site-footer__favorites {
  margin-bottom: 5vh;
  padding: 24px 28px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
}

.site-footer__fav-heading {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-green);
  margin: 0 0 10px;
}

.site-footer__fav-desc {
  text-wrap: pretty;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.8;
  margin: 0;
}

.site-footer__fav-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.footer-fav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.4s ease, border-color 0.4s ease, background 0.4s ease;
  font-family: var(--font-sans-jp);
}

.footer-fav-btn:hover {
  color: var(--color-text);
  border-color: var(--color-green);
  background: var(--color-green-pale);
}

.site-footer__fav-count {
  margin: 14px 0 0;
  font-size: 0.78rem;
  color: var(--color-text-dim);
}

/* ── 4カラムナビ ── */
.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3xl);
  margin-bottom: 5vh;
  padding-bottom: 5vh;
  border-bottom: 1px solid var(--color-border);
}

.site-footer__nav-heading {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-green);
  margin: 0 0 var(--space-lg);
}

.site-footer__nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.site-footer__nav-list a {
  display: inline-block;
  padding: 10px 0;
  margin: -10px 0;
  text-wrap: pretty;
  font-size: 0.8rem;
  color: var(--color-text-dim);
  text-decoration: none;
  transition: color 0.3s ease, padding-left 0.3s ease;
}

.nav-lang-toggle {
  min-height: 40px;
}

.footer-fav-btn {
  min-height: 42px;
}

.site-footer__nav-list a:hover {
  color: var(--color-green);
  padding-left: 4px;
}

/* 段組みで列が狭くなるとアイコンとラベルが縦に割れる。
   .site-footer__nav-list a より特異度を上げないと display が効かない。 */
.site-footer__nav-list a.site-footer__x-link,
.site-footer__x-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* ── 最下部 ── */
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  font-size: 0.75rem;
  color: var(--color-text-dim);
  letter-spacing: 0.04em;
}

/* ボタン内の文字が1文字だけ折り返すのを防ぐ（320px でカード3枚とも割れていた） */
@media (max-width: 400px) {
  .license-card-actions .btn {
    padding: 0.75rem 1rem;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
  }
}

/* ── レスポンシブ ── */
@media (max-width: 900px) {
  .site-footer__nav {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xl);
  }
}

@media (max-width: 600px) {
  /* グリッドだと Genres(11項目) に行高が揃い、Explore(3項目) の下に約370pxの穴が空く。
     段組みにして中身を流し込むと、ブラウザが2列の高さを均してくれる。 */
  .site-footer__nav {
    display: block;
    columns: 2;
    column-gap: var(--space-xl);
  }
  .site-footer__nav-group {
    break-inside: avoid;
    margin-bottom: var(--space-2xl);
  }
  .site-footer__favorites {
    padding: 18px 20px;
  }
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.4; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.2); }
}

@keyframes particleFloat {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 0.5; }
  100% { transform: translateY(-100vh) translateX(20px); opacity: 0; }
}

/* 波紋パルス（Hero再生中） */
@keyframes ripplePulse {
  0% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.08); opacity: 0.15; }
  100% { transform: scale(1); opacity: 0.4; }
}

/* 音の波形アニメーション */
@keyframes waveBar {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

/* 灯籠のゆらぎ（4〜7秒周期） */
@keyframes lanternGlow {
  0%   { opacity: 0.6; }
  30%  { opacity: 1.0; }
  55%  { opacity: 0.7; }
  80%  { opacity: 1.0; }
  100% { opacity: 0.6; }
}

/* パーティクル（蛛/光の粒） */
.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(160, 210, 170, 0.6);
  animation: particleFloat linear infinite;
  opacity: 0;
}

/* スクロールアニメーション */
.fade-in-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== 音の波形ビジュアライザー（Hero用） ===== */
.hero-sound-bars {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 20px;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.hero-sound-bars.active {
  opacity: 1;
}

.hero-sound-bar {
  width: 3px;
  background: rgba(160, 210, 170, 0.6);
  border-radius: 2px;
  transform-origin: bottom;
  transform: scaleY(0.4);
}

.hero-sound-bars.active .hero-sound-bar:nth-child(1) { animation: waveBar 0.8s ease-in-out 0.0s infinite; }
.hero-sound-bars.active .hero-sound-bar:nth-child(2) { animation: waveBar 0.8s ease-in-out 0.1s infinite; }
.hero-sound-bars.active .hero-sound-bar:nth-child(3) { animation: waveBar 0.8s ease-in-out 0.2s infinite; }
.hero-sound-bars.active .hero-sound-bar:nth-child(4) { animation: waveBar 0.8s ease-in-out 0.15s infinite; }
.hero-sound-bars.active .hero-sound-bar:nth-child(5) { animation: waveBar 0.8s ease-in-out 0.05s infinite; }

/* ===== HERO TODAY'S MUSIC — 1曲日替わり表示 ===== */
.hero-todays-music {
  margin-bottom: var(--space-lg);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  animation: fadeInUp 1s ease 1.0s forwards;
}

/* ローディング時のスケルトンヒント */
.hero-todays-list:empty::after {
  content: '';
  display: block;
  width: 200px;
  height: 36px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  animation: skeletonPulse 2s ease-in-out infinite;
  margin: 0 auto;
}

@keyframes skeletonPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

.hero-todays-label {
  font-family: var(--font-serif-jp);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  color: rgba(140, 190, 155, 0.85);
  text-align: center;
  margin-bottom: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.70);
}

/* 1曲用カード */
.hero-daily-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
  padding: 1.75rem 2rem;
  background: rgba(4, 12, 8, 0.72);
  border: 1px solid rgba(100, 160, 120, 0.25);
  border-radius: var(--radius-md);
  backdrop-filter: blur(14px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.hero-daily-card:hover {
  background: rgba(8, 22, 14, 0.80);
  border-color: rgba(120, 180, 140, 0.38);
}

.hero-daily-card.playing {
  background: rgba(10, 28, 18, 0.82);
  border-color: rgba(100, 190, 130, 0.45);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45), 0 0 18px rgba(80, 180, 110, 0.15);
}

.hero-daily-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.hero-daily-name {
  font-family: var(--font-serif-jp);
  font-size: 1.25rem;
  font-weight: 700;
  color: rgba(232, 252, 240, 0.98);
  letter-spacing: 0.04em;
  white-space: normal;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75);
}

.hero-daily-card.playing .hero-daily-name {
  color: rgba(165, 235, 185, 1);
}

.hero-daily-tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* タグは共通クラスを流用 */
.hero-daily-tags .hero-track-tag {
  font-size: 0.60rem;
}

.hero-daily-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.hero-daily-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.hero-daily-play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(55, 115, 80, 0.60);
  border: 1px solid rgba(120, 195, 148, 0.55);
  color: rgba(215, 248, 225, 0.98);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

.hero-daily-play-btn:hover {
  background: rgba(70, 140, 100, 0.75);
  border-color: rgba(140, 210, 165, 0.70);
  transform: scale(1.10);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.55), 0 0 14px rgba(80, 180, 110, 0.20);
}

.hero-daily-card.playing .hero-daily-play-btn {
  background: rgba(50, 120, 80, 0.70);
  border-color: rgba(120, 210, 150, 0.65);
  color: rgba(170, 240, 190, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55), 0 0 16px rgba(80, 200, 120, 0.25);
}

.hero-daily-detail {
  font-family: var(--font-display);
  font-size: 0.60rem;
  letter-spacing: 0.12em;
  color: rgba(145, 205, 165, 0.72);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.70);
}

.hero-daily-detail:hover {
  color: rgba(180, 238, 198, 0.95);
}

/* ── Today's Music: Fav / Download buttons ── */
.hero-daily-fav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(185, 150, 70, 0.28);
  color: rgba(185, 150, 70, 0.42);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease,
              background 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}

.hero-daily-fav-btn:hover {
  color: rgba(255, 159, 58, 0.85);
  border-color: rgba(255, 140, 40, 0.50);
  background: rgba(255, 140, 40, 0.08);
}

.hero-daily-fav-btn.is-fav {
  color: rgba(255, 159, 58, 0.96);
  border-color: rgba(255, 140, 40, 0.55);
  background: rgba(255, 140, 40, 0.12);
  box-shadow: 0 0 8px rgba(255, 140, 40, 0.28);
}

.hero-daily-dl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(145, 205, 165, 0.25);
  color: rgba(145, 205, 165, 0.48);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  flex-shrink: 0;
  text-decoration: none;
}

.hero-daily-dl-btn:hover {
  color: rgba(180, 238, 198, 0.90);
  border-color: rgba(145, 205, 165, 0.55);
  background: rgba(80, 160, 110, 0.12);
}

/* 旧リストUI（互換性のため残存） */
.hero-track-tag {
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  color: rgba(160, 215, 175, 0.90);
  background: rgba(60, 110, 80, 0.35);
  border: 1px solid rgba(100, 160, 120, 0.30);
  border-radius: 100px;
  padding: 0.1rem 0.4rem;
}

.hero-track-detail-link:hover {
  color: rgba(180, 235, 195, 0.95);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .scene-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .scene-card:nth-child(4),
  .scene-card:nth-child(5) {
    grid-column: span 1;
  }

  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .composer-inner {
    grid-template-columns: 1fr;
    gap: var(--space-3xl);
  }

  .composer-visual {
    order: -1;
  }

  .composer-emblem {
    width: 160px;
    height: 160px;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
}

@media (max-width: 768px) {
  :root {
    --section-padding: var(--space-4xl) var(--space-lg);
  }

  .nav-list {
    display: flex;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: rgba(8, 16, 12, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    flex-direction: column;
    padding: 1rem 2rem 1.2rem;
    gap: 0.8rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    border-top: 1px solid rgba(80, 160, 110, 0.12);
    overflow-y: auto;
    max-height: calc(100dvh - var(--header-height));
    z-index: 10010;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-0.7rem);
    transition: opacity 0.2s ease, transform 0.24s ease, visibility 0s linear 0.24s;
  }

  /* メニュー内リンク色をダークテーマに、タップターゲットを WCAG 44px 以上に */
  .nav-list .nav-link {
    color: #b0c8b8;
    font-size: 0.95rem;
    letter-spacing: 0.10em;
    padding: 0.9rem 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .nav-list .nav-link:hover,
  .nav-list .nav-link--active {
    color: #9adfb4;
  }
  .nav-list .nav-item {
    width: 100%;
    text-align: center;
  }
  /* ドロップダウン: 行全幅をタップ可能に（文字幅だけだった旧挙動を修正） */
  .nav-list .nav-item--dropdown > .nav-link {
    display: block;
    width: 100%;
    padding: 1rem 2.2rem;
    min-height: 48px;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
  }
  .nav-list .nav-item--dropdown > .nav-link::before {
    display: block;
    right: 1rem;
    width: 9px;
    height: 9px;
    border-right-width: 1.5px;
    border-bottom-width: 1.5px;
    opacity: 0.85;
  }
  .nav-list.open .nav-submenu,
  .nav-list .nav-submenu {
    display: none;
    position: static;
    top: auto;
    left: auto;
    width: 100%;
    min-width: 0;
    margin: 0.1rem 0 0.35rem;
    padding: 0.1rem 0 0.1rem 0.9rem;
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .nav-list.open .nav-item--dropdown:hover .nav-submenu,
  .nav-list.open .nav-item--dropdown:focus-within .nav-submenu,
  .nav-list .nav-item--dropdown:hover .nav-submenu,
  .nav-list .nav-item--dropdown:focus-within .nav-submenu {
    position: static;
    top: auto;
    left: auto;
    transform: none;
  }

  .nav-list .nav-item--submenu-open .nav-submenu {
    display: block;
  }

  .nav-list .nav-item--submenu-open > .nav-link::before {
    transform: translateY(-35%) rotate(225deg);
  }

  .nav-list .nav-submenu::before {
    display: none;
  }
  .nav-list .nav-submenu__link {
    display: block;
    padding: 0.7rem 0.4rem;
    min-height: 40px;
    color: rgba(176, 200, 184, 0.86);
    background: transparent;
    font-size: 0.86rem;
    line-height: 1.4;
  }
  .nav-list .nav-submenu__link:hover,
  .nav-list .nav-submenu__link--active {
    color: #9adfb4;
    background: transparent;
  }
  .nav-list .nav-link--cta {
    border-color: rgba(100, 180, 130, 0.35);
    color: #9adfb4;
  }
  .nav-list .nav-link--cta:hover {
    background: rgba(100, 180, 130, 0.12);
    border-color: rgba(100, 180, 130, 0.6);
  }
  .nav-list .nav-lang-toggle {
    border-color: rgba(100, 180, 130, 0.3);
    color: #9adfb4;
    align-self: flex-start;
  }
  .nav-list .nav-lang-toggle:hover {
    border-color: rgba(100, 180, 130, 0.6);
    background: rgba(100, 180, 130, 0.1);
  }

  .nav-list.open {
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.24s ease, visibility 0s linear 0s;
  }

  .nav-toggle {
    display: flex;
    position: relative;
    z-index: 10030;
  }

  body.has-mobile-action-dock {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }

  body.has-mobile-action-dock .mobile-action-dock {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 10020;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 7px;
    border: 1px solid rgba(126, 203, 149, 0.22);
    border-radius: 8px;
    background:
      linear-gradient(180deg, rgba(15, 27, 20, 0.94), rgba(8, 15, 11, 0.96)),
      rgba(8, 15, 11, 0.96);
    box-shadow:
      0 16px 42px rgba(0, 0, 0, 0.42),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  body.has-mobile-action-dock .mobile-action-dock__item {
    min-height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 1px solid rgba(126, 203, 149, 0.16);
    border-radius: 6px;
    color: rgba(214, 235, 220, 0.88);
    background: rgba(255, 255, 255, 0.035);
    text-decoration: none;
  }

  body.has-mobile-action-dock .mobile-action-dock__item--primary {
    border-color: rgba(226, 192, 112, 0.55);
    color: rgba(255, 241, 202, 0.98);
    background: linear-gradient(180deg, rgba(196, 164, 69, 0.24), rgba(126, 203, 149, 0.08));
  }

  body.has-mobile-action-dock .mobile-action-dock__icon {
    font-family: var(--font-display);
    font-size: 0.78rem;
    line-height: 1;
    color: #9adfb4;
  }

  body.has-mobile-action-dock .mobile-action-dock__item--primary .mobile-action-dock__icon {
    color: #e2c070;
  }

  body.has-mobile-action-dock .mobile-action-dock__label {
    font-size: 0.72rem;
    line-height: 1.2;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }

  body.top-page .site-logo {
    min-width: 0;
  }

  body.top-page .logo-text,
  body.top-page .logo-sub {
    white-space: nowrap;
  }

  .nav-toggle.active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .nav-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle.active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .scene-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .scene-card:nth-child(5) {
    grid-column: span 2;
    aspect-ratio: 5/2;
  }

  .category-grid {
    grid-template-columns: 1fr;
  }

  .track-item {
    grid-template-columns: 36px 1fr auto;
  }

  .track-tags {
    display: none;
  }

  .license-grid {
    grid-template-columns: 1fr;
  }

  .footer-nav {
    flex-wrap: wrap;
    gap: var(--space-2xl);
  }

  .hero-stats {
    gap: var(--space-lg);
  }
}

@media (max-width: 480px) {
  body.top-page .header-inner {
    padding-inline: 0.9rem;
  }

  body.top-page .site-nav {
    gap: 0.8rem;
  }

  body.top-page .logo-text {
    font-size: 0.98rem;
    letter-spacing: 0.08em;
  }

  body.top-page .logo-sub {
    font-size: 0.52rem;
    letter-spacing: 0.14em;
  }

  .scene-grid {
    grid-template-columns: 1fr 1fr;
  }

  .scene-card:nth-child(5) {
    grid-column: span 2;
  }

  .hero-actions {
    flex-direction: column;
    align-items: center;
  }

  .todays-player {
    flex-direction: column;
    align-items: flex-start;
  }

  .play-btn {
    align-self: center;
  }

  .hero-stats {
    gap: var(--space-md);
  }
  .hero-stat-num {
    font-size: 1.2rem;
  }
  .hero-stat-divider {
    height: 24px;
  }
}


/* ============================================================
   SECTION: SCENE TAGS（軽量導線型）
   ============================================================ */

.scene-tags-wrap {
  margin-bottom: var(--space-2xl);
}

.scene-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}

.scene-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 100px;
  font-family: var(--font-serif-jp);
  font-size: 0.82rem;
  color: var(--color-text);
  text-decoration: none;
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base), transform var(--transition-fast);
  white-space: nowrap;
}

.scene-tag:hover {
  background: var(--color-green-pale);
  border-color: var(--color-border-hover);
  color: var(--color-green);
  transform: translateY(-1px);
}

/* ============================================================
   SECTION: FEATURED SCENES
   ============================================================ */

.featured-scenes {
  padding: var(--section-padding);
  background: var(--color-bg-2);
  position: relative;
}

.featured-scenes::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M10 110 Q30 80 20 60 Q10 40 30 20 M40 115 Q55 90 50 70 Q45 50 60 30 M70 118 Q80 95 75 75 Q70 55 85 35' stroke='%232d5a3d' stroke-width='0.6' fill='none' opacity='0.06'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  pointer-events: none;
}

.featured-scenes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

/* 8カードグリッド専用: 4+4 の2行 */
.featured-scenes-grid--8 {
  grid-template-columns: repeat(4, 1fr);
}

.featured-scene-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  min-height: 180px;
  display: flex;
  align-items: flex-end;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  box-shadow: 0 2px 16px rgba(42, 32, 24, 0.08);
}

.featured-scene-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(42, 32, 24, 0.14);
}

.featured-scene-card:focus-visible {
  outline: 2px solid rgba(154, 223, 180, 0.60);
  outline-offset: 3px;
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(42, 32, 24, 0.14);
}

.btn:focus-visible,
.fm-card:focus-visible {
  outline: 2px solid rgba(154, 223, 180, 0.60);
  outline-offset: 3px;
}

.featured-scene-card-bg {
  position: absolute;
  inset: 0;
  transition: transform var(--transition-slow);
  overflow: hidden;
}

.featured-scene-card:hover .featured-scene-card-bg {
  transform: scale(1.04);
}

/* 背景画像レイヤー */
.featured-scene-card-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(1.5px) brightness(0.72) saturate(0.85);
  transition: transform var(--transition-slow), filter var(--transition-slow);
  transform: scale(1.04); /* blurの縁を防ぎ、少し拡大 */
}

.featured-scene-card:hover .featured-scene-card-img {
  filter: blur(0.5px) brightness(0.82) saturate(1.05);
  transform: scale(1.10);
}

.featured-scene-card:hover .featured-scene-card-content {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* 各情景カードのグラデーションオーバーレイ（画像の上に色味を乗せる） */
.featured-scene-card--japanese .featured-scene-card-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(26, 58, 42, 0.55) 0%, rgba(45, 90, 61, 0.35) 60%, rgba(61, 122, 82, 0.20) 100%);
}
.featured-scene-card--rpg .featured-scene-card-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(26, 42, 58, 0.55) 0%, rgba(42, 61, 90, 0.35) 60%, rgba(58, 82, 112, 0.20) 100%);
}
.featured-scene-card--sad .featured-scene-card-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(26, 32, 48, 0.55) 0%, rgba(42, 48, 80, 0.35) 60%, rgba(58, 64, 96, 0.20) 100%);
}
.featured-scene-card--horror .featured-scene-card-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(26, 10, 26, 0.65) 0%, rgba(42, 10, 42, 0.45) 60%, rgba(58, 20, 48, 0.25) 100%);
}
.featured-scene-card--healing .featured-scene-card-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(26, 48, 32, 0.50) 0%, rgba(42, 80, 48, 0.30) 60%, rgba(74, 122, 80, 0.15) 100%);
}
.featured-scene-card--fun .featured-scene-card-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(42, 32, 16, 0.55) 0%, rgba(74, 56, 32, 0.35) 60%, rgba(106, 80, 48, 0.20) 100%);
}

.featured-scene-card-content {
  position: relative;
  z-index: 1;
  padding: var(--space-lg);
  width: 100%;
  background: linear-gradient(to top, rgba(5, 10, 8, 0.92) 0%, rgba(5, 10, 8, 0.55) 50%, transparent 100%);
}

.featured-scene-icon {
  display: block;
  font-size: 1.4rem;
  margin-bottom: var(--space-xs);
  line-height: 1;
}

.featured-scene-title {
  text-wrap: pretty;
  font-family: var(--font-serif-jp);
  font-size: 0.95rem;
  font-weight: 500;
  color: #f5f0e8;
  margin-bottom: 0.2rem;
}

.featured-scene-desc {
  font-size: 0.72rem;
  color: rgba(245, 240, 232, 0.75);
  line-height: 1.5;
  margin-bottom: var(--space-sm);
}

.featured-scene-count {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: rgba(122, 158, 110, 0.8);
  text-transform: uppercase;
}

/* カードCTA（ホバー時にふわっと表示） */
.featured-scene-card-content::after {
  content: '選曲する →';
  display: block;
  margin-top: var(--space-sm);
  font-family: var(--font-sans-jp);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: rgba(200, 230, 210, 0.55);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.featured-scene-card:hover .featured-scene-card-content::after {
  opacity: 1;
  transform: translateY(0);
}

/* ── 幕間: シアターから現実世界への余韻 ── */
.theater-interlude {
  height: 120px;
  background: linear-gradient(
    to bottom,
    #030403 0%,
    #040806 40%,
    #050a07 70%,
    #000 100%
  );
  pointer-events: none;
  position: relative;
}

/* シアターの残光 */
.theater-interlude::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 60%;
  background: radial-gradient(
    ellipse 50% 100% at 50% 0%,
    rgba(100, 180, 130, 0.04) 0%,
    transparent 70%
  );
  pointer-events: none;
}

/* ============================================================
   SECTION ④: LIBRARY GATEWAY — 旅の続き
   ============================================================ */

.library-gateway {
  position: relative;
  overflow: hidden;
  padding: var(--space-5xl) 0;
  min-height: max(480px, 60vh);
  display: flex;
  align-items: center;
  background: linear-gradient(to bottom,
    #000       0%,
    #050a07   50%,
    #0a1410  100%
  );
  text-align: center;
}

/* ── Library Gateway アニメーション ── */
@keyframes lgwGlowDrift {
  0%   { transform: translate(0, 0)   scale(1);    opacity: 1; }
  30%  { transform: translate(6%, 10%) scale(1.12); opacity: 0.85; }
  65%  { transform: translate(-5%, -8%) scale(0.94); opacity: 0.95; }
  100% { transform: translate(0, 0)   scale(1);    opacity: 1; }
}

@keyframes lgwTitleBreathe {
  0%, 100% {
    text-shadow:
      0 0 60px rgba(200, 155, 60, 0.25),
      0 2px 4px rgba(0, 0, 0, 0.8);
  }
  50% {
    text-shadow:
      0 0 100px rgba(210, 165, 60, 0.55),
      0 0 200px rgba(185, 140, 40, 0.18),
      0 2px 4px rgba(0, 0, 0, 0.8);
  }
}

@keyframes lgwStreak {
  0%   { transform: translateX(-120%) skewX(-22deg); opacity: 0; }
  12%  { opacity: 0.22; }
  88%  { opacity: 0.22; }
  100% { transform: translateX(260%) skewX(-22deg); opacity: 0; }
}

/* 奥から差し込む光 — 深森の遠い灯 */
.lgw-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 35% at 50% 65%, rgba(154, 223, 180, 0.06) 0%, transparent 70%);
  animation: lgwGlowDrift 14s ease-in-out infinite;
}

/* 光の流星ライン */
.lgw-streak {
  position: absolute;
  top: 38%;
  left: 0;
  width: 50%;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(195, 165, 80, 0.45) 50%,
    transparent 100%);
  pointer-events: none;
  z-index: 3;
  animation: lgwStreak 9s ease-in-out 3s infinite;
}

/* 上端の自然な溶け込み（薄く） */
.library-gateway::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40px;
  background: linear-gradient(to bottom, #000, transparent);
  z-index: 1;
  pointer-events: none;
}
/* .library-gateway::after は不要な白いグラデーションを発生させていたため削除 */

.lgw-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
  text-align: center;
}

/* ラベル */
.lgw-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  color: rgba(185, 155, 80, 0.55);
  text-transform: uppercase;
  margin-bottom: var(--space-2xl);
}

/* メインコピー */
.lgw-title {
  font-family: var(--font-serif-jp);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 300;
  color: rgba(240, 230, 210, 0.95);
  letter-spacing: 0.06em;
  line-height: 1.15;
  margin-bottom: 1rem;
  white-space: nowrap;
  animation: lgwTitleBreathe 4.5s ease-in-out 0.5s infinite;
  text-shadow:
    0 0 60px rgba(200, 155, 60, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.8);
}

.lgw-title-en {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: rgba(185, 155, 80, 0.45);
  text-transform: uppercase;
  margin-bottom: var(--space-3xl);
}

/* サブコピー */
.lgw-desc {
  font-family: var(--font-serif-jp);
  font-size: 0.96rem;
  line-height: 2;
  color: rgba(195, 185, 165, 0.70);
  margin-bottom: var(--space-4xl);
}

/* 統計 */
.lgw-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: var(--space-4xl);
}

.lgw-stat {
  text-align: center;
  padding: 0 var(--space-3xl);
}

.lgw-stat-div {
  width: 1px;
  height: 36px;
  background: rgba(185, 155, 80, 0.20);
}

.lgw-stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 600;
  color: rgba(205, 170, 80, 0.90);
  line-height: 1;
  margin-bottom: 0.4rem;
}

.lgw-stat-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.52rem;
  letter-spacing: 0.22em;
  color: rgba(180, 165, 135, 0.50);
  text-transform: uppercase;
}

/* CTA ボタン */
.lgw-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.lgw-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 2.4rem;
  background: linear-gradient(135deg, rgba(185, 148, 50, 0.22), rgba(160, 120, 30, 0.14));
  border: 1px solid rgba(185, 148, 50, 0.40);
  border-radius: 2px;
  color: rgba(220, 195, 120, 0.95);
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.lgw-btn-primary:hover {
  background: linear-gradient(135deg, rgba(185, 148, 50, 0.36), rgba(160, 120, 30, 0.26));
  border-color: rgba(210, 175, 80, 0.65);
  color: rgba(240, 215, 140, 1);
  box-shadow: 0 0 28px rgba(185, 148, 50, 0.18), 0 4px 20px rgba(0, 0, 0, 0.40);
}

.lgw-btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: 0.85rem 1.8rem;
  background: transparent;
  border: 1px solid rgba(155, 145, 125, 0.22);
  border-radius: 2px;
  color: rgba(165, 155, 135, 0.65);
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.lgw-btn-ghost:hover {
  border-color: rgba(185, 155, 80, 0.35);
  color: rgba(200, 185, 145, 0.85);
}

/* is-immersive 時: lgw はブライト維持 */
body.is-immersive .library-gateway {
  filter: brightness(1.05) saturate(1.02);
}

/* ============================================================
   RESPONSIVE: Featured Scenes & Library Gateway
   ============================================================ */

@media (max-width: 1100px) {
  .featured-scenes-grid--8 {
    grid-template-columns: repeat(3, 1fr);
  }
  /* 最終行: 7枚目は通常幅、8枚目は幅広 */
  .featured-scenes-grid--8 > :nth-child(8) {
    grid-column: span 2;
  }
}

@media (max-width: 900px) {
  .featured-scenes-grid,
  .featured-scenes-grid--8 {
    grid-template-columns: repeat(2, 1fr);
  }
  .featured-scenes-grid--8 > :nth-child(8) {
    grid-column: span 1;
  }
}

@media (max-width: 640px) {
  .featured-scenes-grid,
  .featured-scenes-grid--8 {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }
  .featured-scene-card {
    min-height: 140px;
  }
  .featured-scene-title {
    font-size: 0.82rem;
  }
  .featured-scene-desc {
    display: none;
  }
  .lgw-title {
    font-size: 1.9rem;
    white-space: normal;
  }
  .lgw-stat {
    padding: 0 var(--space-lg);
  }
  .scene-tags {
    gap: 0.4rem;
  }
  .scene-tag {
    font-size: 0.75rem;
    padding: 0.35rem 0.75rem;
  }
}

/* ===================================================
   HERO FIREFLIES — 蛍のような光のアニメーション
   =================================================== */

.hero__fireflies {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

/* 蛍本体 */
.firefly {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size, 8px);
  height: var(--size, 8px);
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
  filter: blur(var(--blur, 0px));
  animation:
    fireflyFloat var(--floatDur, 18s) ease-in-out infinite,
    fireflyGlow var(--glowDur, 4.8s) ease-in-out infinite;
}

/* 発光の芯 */
.firefly::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle,
      rgba(255, 243, 181, 0.98) 0%,
      rgba(255, 222, 128, 0.82) 35%,
      rgba(255, 196, 90, 0.38) 62%,
      rgba(255, 196, 90, 0) 100%);
  box-shadow:
    0 0 8px rgba(255, 208, 110, 0.55),
    0 0 18px rgba(255, 208, 110, 0.24);
}

/* うっすら尾を引く感じ */
.firefly::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--size, 8px) * 2.2);
  height: calc(var(--size, 8px) * 1.2);
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 218, 120, 0.22) 0%,
    rgba(255, 218, 120, 0.08) 45%,
    rgba(255, 218, 120, 0) 100%
  );
  filter: blur(2px);
}

/* ゆったり漂う */
@keyframes fireflyFloat {
  0% {
    transform: translate3d(var(--x0), var(--y0), 0) scale(var(--scale, 1));
  }
  20% {
    transform: translate3d(var(--x1), var(--y1), 0) scale(var(--scale, 1));
  }
  40% {
    transform: translate3d(var(--x2), var(--y2), 0) scale(var(--scale, 1));
  }
  60% {
    transform: translate3d(var(--x3), var(--y3), 0) scale(var(--scale, 1));
  }
  80% {
    transform: translate3d(var(--x4), var(--y4), 0) scale(var(--scale, 1));
  }
  100% {
    transform: translate3d(var(--x0), var(--y0), 0) scale(var(--scale, 1));
  }
}

/* 明滅（不規則） */
@keyframes fireflyGlow {
  0%, 100% { opacity: 0.12; }
  8%        { opacity: 0.75; }
  16%       { opacity: 0.18; }
  28%       { opacity: 0.95; }
  42%       { opacity: 0.28; }
  57%       { opacity: 0.82; }
  73%       { opacity: 0.16; }
  88%       { opacity: 0.68; }
}

/* モバイルでは少し減らす */
@media (max-width: 768px) {
  .firefly:nth-child(n + 13) {
    display: none;
  }
}

/* 動きを減らしたい環境向け */
@media (prefers-reduced-motion: reduce) {
  .firefly {
    animation: none;
    opacity: 0.35;
  }
}

/* Hero テキストの可読性向上（各要素に個別設定済み・このルールは削除） */

/* ============================================================
   SITE HISTORY — 時間の回廊
   Scroll-linked horizontal exhibition gallery
   ============================================================ */

/* ── Outer section ── */
.site-history {
  position: relative;
  height: 300vh; /* Reduced from 420vh to compress scroll */
  background: linear-gradient(
    to bottom,
    var(--color-bg) 0%,
    #060a08 4%,
    #040806 9%,
    #040806 91%,
    #060a08 96%,
    var(--color-bg) 100%
  );
}

/* ── Sticky panel: the exhibition room ── */
.sh-sticky-panel {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  /* Cinematic background representing the 25 years journey */
  background:
    url('/assets/images/history/bg-journey.png') center / cover no-repeat;
  background-attachment: fixed; /* Parallax effect */
}

/* Dark overlay on background image */
.sh-sticky-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(4, 12, 8, 0.50);
  z-index: 1;
}

/* Edge vignette: heavy curtain — 緑寄り */
.sh-sticky-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 50;
  background:
    linear-gradient(to bottom, rgba(4, 12, 8, 0.70) 0%, transparent 22%),
    linear-gradient(to top,    rgba(4, 12, 8, 0.70) 0%, transparent 22%),
    linear-gradient(to right,  rgba(4, 12, 8, 0.62) 0%, transparent 28%),
    linear-gradient(to left,   rgba(4, 12, 8, 0.62) 0%, transparent 28%);
  pointer-events: none;
}

/* ── Centre spotlight — 深緑の光 ── */
.sh-spotlight {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(
      ellipse 22% 38% at 50% 46%,
      rgba(154, 223, 180, 0.12) 0%,
      rgba(100, 180, 130, 0.06) 32%,
      rgba(80, 160, 110, 0.02) 55%,
      transparent 68%
    ),
    radial-gradient(
      ellipse 22% 14% at 50% 80%,
      rgba(100, 180, 130, 0.06) 0%,
      transparent 70%
    );
  pointer-events: none;
}

/* ── Background Watermark "25 YEARS" ── */
.sh-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(8rem, 22vw, 24rem);
  font-weight: 700;
  color: rgba(154, 223, 180, 0.03);
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
  letter-spacing: 0.05em;
  user-select: none;
}

/* ── Chapter title: presides over the whole section ── */
.sh-header {
  position: absolute;
  top: 7%;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 60;
  pointer-events: none;
}

.sh-header::before {
  display: none;
}

.sh-header-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(154, 223, 180, 0.45);
  margin-bottom: 1rem;
}

.sh-header-title {
  font-family: var(--font-serif-jp);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 500;
  color: rgba(232, 245, 236, 1.0);
  letter-spacing: 0.06em;
  margin: 0;
  text-shadow:
    0 0 8px  rgba(100, 180, 130, 0.40),
    0 0 22px rgba(80, 160, 110, 0.28),
    0 0 55px rgba(60, 140, 90, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.85);
}

/* ── Stage: clips the moving track ── */
.sh-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 10;
}

/* ── Track: horizontal flex row ── */
.sh-track {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 260px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  padding-top: 26vh;
  will-change: transform;
}

/* ── Card: image is the hero ── */
.sh-card {
  flex-shrink: 0;
  width: min(58vw, 860px);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  will-change: transform;
}

/* ── Screenshot: 額縁付き — 森の展示室の肖像画 ── */
.sh-screenshot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(100, 180, 130, 0.15);
  outline: 1px solid rgba(100, 180, 130, 0.06);
  outline-offset: 6px;
  box-shadow:
    0 20px 80px rgba(0, 0, 0, 0.90),
    0 5px 20px  rgba(0, 0, 0, 0.65);
  background-color: #0a1410;
  /* JS controls filter: brightness() */
  transition: box-shadow 0.55s ease, border-color 0.55s ease;
}

/* 2001-2003, 2004画像のヘッダーが見えるようにクロップ位置を上に調整 */
.sh-card[data-index="0"] .sh-screenshot,
.sh-card[data-index="1"] .sh-screenshot {
  object-position: top;
}

/* Centred image: breathes, glows — 深緑の光 */
.sh-card.is-center .sh-screenshot {
  border-color: rgba(154, 223, 180, 0.25);
  outline-color: rgba(154, 223, 180, 0.10);
  box-shadow:
    0 30px 100px rgba(0, 0, 0, 0.90),
    0 5px 20px   rgba(0, 0, 0, 0.65),
    0 0 50px rgba(100, 180, 130, 0.18),
    0 0 140px rgba(80, 160, 110, 0.10);
  animation: shBreath 4.5s ease-in-out infinite;
}

@keyframes shBreath {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-6px); }
}

/* ── Era text: below the image, monumental ── */
.sh-era {
  margin-top: 36px;
  text-align: center;
  opacity: 0;
  /* JS controls opacity + translateY */
}

.sh-era-year {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 600;
  color: rgba(220, 245, 228, 0.96);
  letter-spacing: 0.04em;
  line-height: 1;
  text-shadow:
    0 0 22px rgba(100, 180, 130, 0.50),
    0 0 55px rgba(80, 160, 110, 0.28),
    0 0 100px rgba(60, 140, 90, 0.12),
    0 4px 20px rgba(0, 0, 0, 0.96);
}

.sh-era-label {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(0.62rem, 1.6vw, 0.92rem);
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(154, 223, 180, 0.50);
  margin-top: 0.6rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}

/* ── Finale message — 格上げ ── */
.sh-finale {
  position: absolute;
  bottom: 9%;
  left: 0;
  right: 0;
  z-index: 40;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  letter-spacing: 0.22em;
  color: rgba(220, 245, 228, 0.80);
  opacity: 0;
  pointer-events: none;
  text-shadow:
    0 0 20px rgba(100, 180, 130, 0.30),
    0 2px 8px rgba(0, 0, 0, 0.70);
}

/* ── Progress timeline (bars instead of dots) ── */
.sh-dots {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 40;
  align-items: center;
}

.sh-dot {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: rgba(100, 180, 130, 0.18);
  transition: background 0.4s ease, width 0.4s ease, box-shadow 0.4s ease;
}

.sh-dot.is-active {
  background: rgba(154, 223, 180, 0.85);
  width: 48px;
  box-shadow: 0 0 8px rgba(154, 223, 180, 0.5);
}

/* ── Tablet ── */
@media (max-width: 900px) {
  .sh-card {
    width: min(72vw, 680px);
  }
  .sh-track {
    gap: 160px;
  }
}

/* ── Mobile ── */
@media (max-width: 640px) {
  .site-history {
    height: 250vh; /* reduced significantly for better scroll pace */
  }
  .sh-card {
    width: min(88vw, 480px);
  }
  .sh-track {
    gap: 100px;
    padding-top: 20vh;
  }
  .sh-header-title {
    font-size: clamp(1.4rem, 6vw, 2rem);
  }
  .sh-era-year {
    font-size: clamp(2.4rem, 10vw, 3.5rem);
  }
}

/* ── エピローグ配置（フッター直前）: 少し静かに ── */
.site-history--epilogue {
  /* シアターほど止まらない: 高さを縮小 */
  height: 300vh;
  /* 上: license-info からの接続 / 下: フッターへの余白 */
  margin-bottom: 0;
}

.site-history--epilogue .sh-sticky-panel {
  /* filter を外し、他セクションと同等の明度に */
  filter: none;
}

.site-history--epilogue .sh-card {
  /* カードのスケールを控えめに */
  opacity: 0.90;
}

.site-history--epilogue .sh-card.is-center {
  opacity: 1;
}

@media (max-width: 640px) {
  .site-history--epilogue {
    height: 260vh;
  }
}

/* ============================================================
   FEATURED SCENES — DARK VARIANT
   音楽の旅の入口 / 8-scene dark gallery
   ============================================================ */

.featured-scenes--dark {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    var(--color-bg) 0%,
    #0c1008 5%,
    #0a0e06 10%,
    #0a0e06 88%,
    #040604 95%,
    #000 100%
  );
  padding-top: calc(var(--section-padding) + 2rem);
  padding-bottom: calc(var(--section-padding) + 2rem);
}

.featured-scenes--dark::before {
  background-image: none;
}

/* ── Section background: cross-fade layers ── */
.fs-bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.fs-bg-layer {
  position: absolute;
  inset: -6%;          /* ぼかしの縁を隠す */
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1.2s ease, transform 1.8s ease;
  filter: blur(16px) brightness(0.55) saturate(0.85);
}

.fs-bg-layer.is-active {
  opacity: 1;
  transform: scale(1.05);
}

.fs-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(5, 10, 6, 0.38) 0%,
    rgba(5, 10, 6, 0.55) 100%
  );
}

/* section-container を背景レイヤーの上に */
.featured-scenes--dark .section-container {
  position: relative;
  z-index: 1;
}

/* Section title/desc on dark background */
.section-label--light .section-label-line {
  background: rgba(185, 155, 85, 0.35);
}
.section-label--light .section-label-text {
  color: rgba(185, 155, 85, 0.75);
}
.section-title--light {
  color: rgba(245, 240, 222, 0.95);
}
.section-desc--light {
  color: rgba(200, 190, 170, 0.82);
}

/* 8-column grid (4×2) */
.featured-scenes-grid--8 {
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

/* 情景への扉カード */
.featured-scenes--dark .featured-scene-card {
  min-height: 220px;
  border-radius: 10px;
  background: rgba(18, 34, 24, 0.88);
  box-shadow:
    0 6px 30px rgba(0, 0, 0, 0.70),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 2px 60px rgba(160, 120, 40, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: transform 0.40s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.40s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.40s ease;
}

.featured-scenes--dark .featured-scene-card:hover {
  transform: translateY(-10px);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.80),
    0 0 0 1px rgba(185, 155, 85, 0.22),
    0 4px 80px rgba(160, 120, 40, 0.22);
  border-color: rgba(185, 155, 85, 0.20);
}

/* 画像の明るさ改善 */
.featured-scenes--dark .featured-scene-card-img {
  filter: brightness(0.75) saturate(0.88);
}
.featured-scenes--dark .featured-scene-card:hover .featured-scene-card-img {
  filter: brightness(0.88) saturate(1.05);
}

/* Content: 中央配置・扉感 */
.featured-scenes--dark .featured-scene-card-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  background: linear-gradient(to top,
    rgba(4, 10, 6, 0.94) 0%,
    rgba(4, 10, 6, 0.50) 50%,
    transparent 100%
  );
  padding: 0 1.2rem 1.1rem;
}

.featured-scenes--dark .featured-scene-title {
  font-family: var(--font-serif-jp);
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(245, 240, 222, 0.97);
  letter-spacing: 0.06em;
  margin-bottom: 0.25rem;
}
.featured-scenes--dark .featured-scene-desc {
  font-size: 0.66rem;
  color: rgba(200, 190, 170, 0.62);
  letter-spacing: 0.03em;
  line-height: 1.5;
}
.featured-scenes--dark .featured-scene-count {
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  color: rgba(155, 195, 135, 0.65);
  margin-top: 0.35rem;
}
/* 絵文字アイコンを非表示 */
.featured-scenes--dark .featured-scene-icon {
  display: none;
}

/* Night card overlay */
.featured-scene-card--night .featured-scene-card-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(8, 10, 28, 0.60) 0%,
    rgba(16, 18, 46, 0.40) 60%,
    rgba(28, 30, 64, 0.20) 100%
  );
}

/* Travel card overlay */
.featured-scene-card--travel .featured-scene-card-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(16, 28, 42, 0.58) 0%,
    rgba(26, 42, 58, 0.38) 60%,
    rgba(38, 56, 72, 0.20) 100%
  );
}

/* Responsive: 2 columns on tablet */
@media (max-width: 900px) {
  .featured-scenes-grid--8 {
    grid-template-columns: repeat(2, 1fr);
  }
  .featured-scenes--dark .featured-scene-card {
    min-height: 170px;
  }
}

/* Responsive: 2 columns on mobile (same) */
@media (max-width: 480px) {
  .featured-scenes-grid--8 {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .featured-scenes--dark .featured-scene-card {
    min-height: 140px;
  }
  .featured-scenes--dark .featured-scene-title {
    font-size: 0.8rem;
  }
  .featured-scenes--dark .featured-scene-desc {
    display: none;
  }
}

/* ============================================================
   TOP PICKUP — 割れガラス・シアター
   暗闇の中に浮かぶ情景スクリーン / プレイヤー連動
   ============================================================ */

/* ── セクション全体: 純黒 + 縦長シアター ── */
.top-pickup {
  position: relative;
  min-height: 100vh;
  background: #000;
}
.top-pickup.theater-mode {
  min-height: 240vh;
  /* margin → padding: 帯を防ぐ（bodyが透けない） */
  margin: 0;
  padding-top: 16vh;
  padding-bottom: 18vh;
  background: #000;
  /* overflow は visible のまま（sticky に必要） */
}

/* sticky コンテナ: 常に画面中央に居続ける */
.top-pickup__sticky {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
  z-index: 2;
}

/* 上境界（不要になったので削除、featured-scenes が #000 で終わるため） */
.top-pickup::before {
  display: none;
}

/* 下境界: 帰還グラデ */
.top-pickup::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30vh;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.9) 60%,
    #000 100%
  );
}

/* ── body 全体の暗転 ── */
body {
  transition: filter 2.4s ease, background-color 2.4s ease;
}
body.is-theater-active {
  filter: brightness(0.82);
}

/* シアター内部だけを濃く暗転（局所化） */
.top-pickup__sticky::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 3s ease;
}
.top-pickup.is-theater-deep .top-pickup__sticky::before {
  opacity: 1;
}
/* sticky 内の実コンテンツは前面に */
.top-pickup__sticky .theater,
.top-pickup__sticky .pickup-nav,
.top-pickup__sticky .pickup-dots {
  position: relative;
  z-index: 2;
}

/* ── シアター: 縦並びで中央集中 ── */
.theater {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

/* ── 割れガラスのスクリーン ── */
.theater-screen {
  width: min(440px, 76vw);
  height: min(440px, 76vw);
  position: relative;
  clip-path: polygon(22% 0%, 78% 6%, 100% 55%, 68% 100%, 32% 92%, 0% 44%);
  overflow: hidden;
  box-shadow: none;
  cursor: pointer;

  /* 初期: 完全に隠す */
  opacity: 0;
  transform: perspective(900px) rotateX(6deg) scale(0.88);
  filter: blur(10px) brightness(0.6);
  transition: opacity 3.6s ease, transform 4.2s ease, filter 4.2s ease;
}

/* スクロールで出現 */
.top-pickup.is-revealed .theater-screen {
  opacity: 1;
  transform: perspective(900px) rotateX(2deg) scale(1);
  filter: none;
  animation: screen-breathe 7s ease-in-out 1.4s infinite;
}

/* 呼吸アニメ */
@keyframes screen-breathe {
  0%, 100% { transform: perspective(900px) rotateX(2deg) scale(1.000); }
  50%       { transform: perspective(900px) rotateX(2deg) scale(1.018); }
}

/* ── 没入が深まるとスクリーンが前に出る ── */
.top-pickup.is-theater-deep .theater-screen {
  animation: none;
  transform: perspective(900px) rotateX(0deg) scale(1.10) !important;
  filter: brightness(1.04) !important;
  transition: transform 1.8s ease, filter 1.8s ease, opacity 1.8s ease;
}

/* ── 退場前: スクリーンが引いていく ── */
.top-pickup.is-theater-exit .theater-screen {
  animation: none;
  transform: perspective(900px) rotateX(-2deg) scale(0.94) !important;
  opacity: 0.80 !important;
  filter: brightness(0.88) blur(1px) !important;
  transition: transform 1.6s ease, opacity 1.6s ease, filter 1.6s ease;
}

/* テキスト・操作: 没入中は明瞭に、退場前はフェード */
.top-pickup.is-theater-deep .theater-title,
.top-pickup.is-theater-deep .theater-copy {
  opacity: 1;
}
.top-pickup.is-theater-exit .theater-title,
.top-pickup.is-theater-exit .theater-copy,
.top-pickup.is-theater-exit .theater-actions {
  opacity: 0.55;
  transition: opacity 1.2s ease;
}

/* ── ガラス形状パターン（曲ごとに変える） ── */
/* 歪んだ六角形 — デフォルト / 森・静寂 */
.glass-1 {
  clip-path: polygon(22% 0%, 78% 6%, 100% 55%, 68% 100%, 32% 92%, 0% 44%);
}
/* 鋭角の破片 — 夜・緊張 */
.glass-2 {
  clip-path: polygon(10% 12%, 90% 0%, 100% 78%, 60% 100%, 0% 68%);
}
/* 横長の裂け目 — 旅・広がり */
.glass-3 {
  clip-path: polygon(0% 28%, 100% 18%, 92% 78%, 8% 100%);
}
/* 崩れた多角形 — 追憶・悲しみ */
.glass-4 {
  clip-path: polygon(28% 0%, 82% 18%, 100% 68%, 62% 100%, 18% 82%, 0% 38%);
}

/* 画像レイヤー（A/B クロスフェード） */
.theater-screen__layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease;
  filter: blur(1px) brightness(0.9);
  mix-blend-mode: normal;
}

.theater-screen__layer.is-active {
  opacity: 1;
}

/* 反射レイヤーは消す */
.theater-screen::before {
  display: none !important;
}

/* 漏れ光: ガラスの縁から滲む（is-revealed 後のみ） */
.theater-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 52%,
    rgba(200, 240, 180, 0.09) 0%,
    rgba(200, 240, 180, 0.04) 30%,
    transparent 68%
  );
  filter: blur(14px);
  opacity: 0;
  transition: opacity 2.4s ease;
}
.top-pickup.is-revealed .theater-screen::after {
  opacity: 1;
}

/* 外縁グロー（clip-path に沿って滲む） */
.top-pickup.is-revealed .theater-screen {
  box-shadow:
    0 0 28px rgba(180, 220, 150, 0.07),
    0 0 70px rgba(180, 220, 150, 0.04);
}

/* ── 蛍コンテナ（ガラス内部） ── */
.window-fireflies {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 2.4s ease;
}
.top-pickup.is-revealed .window-fireflies {
  opacity: 1;
}

/* 蛍粒子（ヒーロー版と同アニメ / 座標はJSでpx指定） */
.window-firefly {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size, 7px);
  height: var(--size, 7px);
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
  filter: blur(var(--blur, 0.5px));
  animation:
    fireflyFloat var(--floatDur, 18s) ease-in-out infinite,
    fireflyGlow  var(--glowDur,  5s)  ease-in-out infinite;
}
.window-firefly::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle,
    rgba(255, 243, 181, 0.96) 0%,
    rgba(255, 222, 128, 0.78) 35%,
    rgba(255, 196, 90,  0.32) 62%,
    rgba(255, 196, 90,  0)    100%);
  box-shadow:
    0 0 7px  rgba(255, 208, 110, 0.50),
    0 0 16px rgba(255, 208, 110, 0.20);
}

/* 曲ごとの漏れ光色 */
.theater-screen[data-glow="blue"]::after {
  background: radial-gradient(circle at 50% 52%,
    rgba(160, 210, 255, 0.09) 0%,
    rgba(160, 210, 255, 0.04) 30%,
    transparent 68%);
}
.theater-screen[data-glow="amber"]::after {
  background: radial-gradient(circle at 50% 52%,
    rgba(255, 200, 100, 0.09) 0%,
    rgba(255, 200, 100, 0.04) 30%,
    transparent 68%);
}

/* ── 向こう側の空気 ── */

/* 霧: ゆっくり漂う光の靄 */
.window-mist {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(170, 220, 255, 0.07), transparent 60%);
  filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: normal;
  transition: opacity 3.6s ease;
  animation: mist 54s ease-in-out infinite;
}
.top-pickup.is-revealed .window-mist {
  opacity: 0.15;
}
@keyframes mist {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(-10px, -5px); }
}

/* 光塵: ふわふわ浮かぶ微粒子 */
.window-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: normal;
  opacity: 0;
  transition: opacity 3.6s ease;
}
.top-pickup.is-revealed .window-atmosphere {
  opacity: 1;
}

.mote {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(170, 220, 255, 0.22);
  filter: blur(1.5px);
  animation: drift 42s ease-in-out infinite;
}
.mote:nth-child(1) { left: 18%; top: 68%; animation-delay:  -6s; animation-duration: 60s; }
.mote:nth-child(2) { left: 32%; top: 54%; animation-delay: -15s; animation-duration: 51s; width: 7px;  height: 7px; }
.mote:nth-child(3) { left: 48%; top: 72%; animation-delay: -21s; animation-duration: 66s; width: 9px;  height: 9px; }
.mote:nth-child(4) { left: 64%; top: 40%; animation-delay:  -9s; animation-duration: 45s; width: 6px;  height: 6px; }
.mote:nth-child(5) { left: 74%; top: 62%; animation-delay: -24s; animation-duration: 57s; }
.mote:nth-child(6) { left: 24%; top: 34%; animation-delay: -12s; animation-duration: 72s; width: 8px;  height: 8px; }
.mote:nth-child(7) { left: 58%; top: 28%; animation-delay: -18s; animation-duration: 48s; width: 7px;  height: 7px; }
.mote:nth-child(8) { left: 82%; top: 48%; animation-delay: -27s; animation-duration: 63s; width: 6px;  height: 6px; }
@keyframes drift {
  0%   { transform: translate(0, 0) scale(0.9);        opacity: 0.08; }
  50%  { transform: translate(-12px, -30px) scale(1.08); opacity: 0.24; }
  100% { transform: translate(0, 0) scale(0.9);        opacity: 0.08; }
}

/* 光: たまに通り過ぎる */
.window-light-sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.08) 50%, transparent 80%);
  pointer-events: none;
  z-index: 4;
  mix-blend-mode: normal;
  opacity: 0;
  transform: translateX(-120%);
  animation: sweep 33s ease-in-out infinite;
}
@keyframes sweep {
  0%, 68%, 100% { transform: translateX(-120%); opacity: 0; }
  82%            { transform: translateX(0%);    opacity: 0.08; }
  96%            { transform: translateX(120%);  opacity: 0; }
}

/* ── テキスト ── */
.pickup-sub {
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  color: rgba(185, 155, 85, 0.82);
  margin: 0 0 10px;
  text-shadow: 0 0 10px rgba(255, 220, 130, 0.18);
}

.theater-title {
  font-family: var(--font-serif-jp);
  font-size: clamp(1.5rem, 3.8vw, 2.2rem);
  font-weight: 400;
  color: rgba(245, 240, 222, 0.96);
  letter-spacing: 0.10em;
  line-height: 1.3;
  text-align: center;
  margin: 0;
  /* 切り替え時フェード (JS 制御) */
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.theater-copy {
  font-size: 0.82rem;
  color: rgba(210, 200, 182, 0.58);
  letter-spacing: 0.07em;
  line-height: 1.8;
  text-align: center;
  margin: 0;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.theater-title.is-transitioning,
.theater-copy.is-transitioning {
  opacity: 0;
  transform: translateY(6px);
}

/* ── アクションボタン ── */
.theater-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
}

.pickup-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(4, 10, 6, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(245, 240, 222, 0.82);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.28s ease, border-color 0.28s ease,
              transform 0.22s ease, box-shadow 0.28s ease;
}

.pickup-btn:hover {
  background: rgba(18, 38, 26, 0.70);
  border-color: rgba(185, 155, 85, 0.45);
  transform: scale(1.10);
  box-shadow: 0 0 20px rgba(185, 155, 85, 0.18);
}

.pickup-btn--play {
  width: 58px;
  height: 58px;
  border-color: rgba(185, 155, 85, 0.28);
}

.pickup-btn--fav.is-fav {
  border-color: rgba(200, 80, 80, 0.50);
  color: rgba(220, 100, 100, 0.90);
}
.pickup-btn--fav.is-fav .icon-fav-off { display: none; }
.pickup-btn--fav.is-fav .icon-fav-on  { display: block !important; }

/* 旧ナビは非表示（theater-arrow に置き換え） */
.pickup-nav { display: none !important; }

/* ── シアター左右矢印（曲送り） ── */
.theater {
  position: relative;
}

.theater-arrow {
  position: absolute;
  top: 50%;
  z-index: 20;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 0 24px rgba(255, 255, 255, 0.08),
    0 0 60px rgba(255, 255, 255, 0.03);
  opacity: 0.70;
  transform: translateY(-50%) scale(0.9);
  transform-origin: center center;
  transition:
    transform 1.2s ease,
    opacity 1.2s ease,
    box-shadow 1.2s ease,
    background 1.2s ease;
}

/* CSS矢印アイコン（文字不使用 → ズレなし） */
.theater-arrow__icon {
  position: relative;
  width: 14px;
  height: 14px;
  display: block;
  flex-shrink: 0;
}
.theater-arrow__icon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-top: 2px solid rgba(255, 255, 255, 0.92);
  border-left: 2px solid rgba(255, 255, 255, 0.92);
  transform-origin: center;
}
.theater-arrow--prev .theater-arrow__icon::before {
  transform: rotate(-45deg);
}
.theater-arrow--next .theater-arrow__icon::before {
  transform: rotate(135deg);
}

/* 光円 */
.theater-arrow::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(rgba(255, 255, 255, 0.07), transparent 70%);
  opacity: 0.5;
  z-index: -1;
  pointer-events: none;
}

/* theater に近づいたら浮かぶ */
.theater:hover .theater-arrow {
  opacity: 0.88;
}

/* hover: ふわっと大きく + 発光 */
.theater-arrow:hover {
  animation: none;
  transform: translateY(-50%) scale(1.25);
  opacity: 1;
  background: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 0 30px rgba(255, 255, 255, 0.12),
    0 0 80px rgba(255, 255, 255, 0.05);
}

.theater-arrow--prev {
  left: -190px;
  animation: arrowFloatLeft 4.0s ease-in-out infinite;
}
.theater-arrow--next {
  right: -190px;
  animation: arrowFloatRight 4.4s ease-in-out infinite;
}

@keyframes arrowFloatLeft {
  0%, 100% { transform: translateY(-50%) scale(0.9); }
  50%       { transform: translateY(calc(-50% - 8px)) scale(0.9); }
}
@keyframes arrowFloatRight {
  0%, 100% { transform: translateY(-50%) scale(0.9); }
  50%       { transform: translateY(calc(-50% - 8px)) scale(0.9); }
}

@media (max-width: 1200px) {
  .theater-arrow--prev { left: 16px; }
  .theater-arrow--next { right: 16px; }
}


/* ── ドット ── */
.pickup-dots {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 8px;
}

.pickup-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(185, 155, 85, 0.20);
  transition: background 0.35s ease, transform 0.35s ease;
  cursor: pointer;
}

.pickup-dot.is-active {
  background: rgba(185, 155, 85, 0.78);
  transform: scale(1.5);
}

/* ── Mobile ── */
@media (max-width: 640px) {
  .top-pickup.theater-mode {
    min-height: 180vh;
    padding-top: 10vh;
    padding-bottom: 12vh;
  }
  .theater-screen {
    width: min(320px, 82vw);
    height: min(320px, 82vw);
  }
  .pickup-nav {
    width: 34px;
    height: 34px;
  }
  .pickup-btn--play {
    width: 52px;
    height: 52px;
  }
}

/* ============================================================
   IS-IMMERSIVE — ピックアップ侵入時の空気変化
   ============================================================ */

body {
  transition: background 1s ease, filter 1s ease;
}

body.is-immersive {
  background: #020504;
  filter: brightness(0.75) saturate(0.80) contrast(1.10);
}

/* ピックアップ自体は逆に浮かせる */
body.is-immersive .top-pickup {
  filter: brightness(1.05) saturate(1.05);
}

/* タグ側を少し明るく — 差を作る */
.featured-scenes--dark {
  filter: brightness(1.08);
}

/* ================================================================
   実用利用ガイド — Practical Guide
   世界観セクションと明確に切り離した実務情報の区画。
   詩的コピーの後に位置し、柔らかい和紙調の背景で区切る。
   ================================================================ */
.practical-guide {
  position: relative;
  padding: clamp(3rem, 6vw, 5rem) 1.25rem;
  background: linear-gradient(180deg, rgba(12, 14, 20, 0.96) 0%, rgba(18, 20, 28, 0.98) 100%);
  color: rgba(230, 226, 214, 0.92);
  border-top: 1px solid rgba(198, 168, 120, 0.18);
}
.practical-guide::before {
  content: "";
  display: block;
  width: 72px;
  height: 1px;
  margin: 0 auto 2.25rem;
  background: linear-gradient(90deg, transparent, rgba(198, 168, 120, 0.6), transparent);
}
.practical-guide__inner {
  max-width: 1080px;
  margin: 0 auto;
}
.practical-guide__heading {
  font-family: 'Noto Serif JP', 'Yu Mincho', serif;
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  font-weight: 500;
  color: rgba(240, 226, 196, 0.94);
  letter-spacing: 0.12em;
  text-align: center;
  margin: 0 0 0.6rem;
}
.practical-guide__lead {
  text-align: center;
  font-size: 0.85rem;
  color: rgba(200, 190, 172, 0.65);
  letter-spacing: 0.08em;
  margin: 0 0 2.5rem;
}
.practical-guide__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem 2.5rem;
}
.practical-guide__block {
  font-size: 0.92rem;
  line-height: 1.9;
}
.practical-guide__sub {
  font-family: 'Noto Serif JP', 'Yu Mincho', serif;
  font-size: 1.02rem;
  font-weight: 500;
  color: rgba(220, 196, 150, 0.92);
  letter-spacing: 0.08em;
  margin: 0 0 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(198, 168, 120, 0.22);
}
.practical-guide__block p {
  color: rgba(220, 216, 204, 0.82);
  margin: 0 0 0.75rem;
}
.practical-guide__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
  margin-top: 0.75rem !important;
}
.practical-guide__links a {
  color: rgba(220, 196, 150, 0.9);
  text-decoration: none;
  font-size: 0.88rem;
  border-bottom: 1px solid rgba(198, 168, 120, 0.3);
  padding-bottom: 1px;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.practical-guide__links a:hover {
  color: rgba(255, 224, 170, 1);
  border-bottom-color: rgba(255, 224, 170, 0.7);
}
.practical-guide__genres {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.7rem;
}
.practical-guide__genres li a {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border: 1px solid rgba(198, 168, 120, 0.28);
  border-radius: 2px;
  color: rgba(230, 222, 204, 0.85);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  transition: all 0.25s ease;
  background: rgba(255, 255, 255, 0.02);
}
.practical-guide__genres li a:hover {
  border-color: rgba(220, 196, 150, 0.6);
  color: rgba(255, 232, 190, 1);
  background: rgba(198, 168, 120, 0.08);
}
@media (max-width: 640px) {
  .practical-guide {
    padding: 2.5rem 1rem;
  }
  .practical-guide__grid {
    gap: 1.75rem;
  }
}

/* =====================================================================
   HERO TODAY'S MUSIC — 初期スケルトン（2026-04-21 追加）
   tracks.js の defer 化に伴い、データ取得前のレイアウト保持 / CLS 対策。
   initHeroPlayer() が実データで innerHTML を差し替えると消える。
   ===================================================================== */
.hero-daily-card--skeleton {
  pointer-events: none;
}
.hero-skeleton {
  display: inline-block;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.10) 50%,
    rgba(255, 255, 255, 0.04) 100%
  );
  background-size: 200% 100%;
  border-radius: 6px;
  animation: heroSkeletonShimmer 1.8s ease-in-out infinite;
}
.hero-skeleton--title {
  display: block;
  width: 62%;
  height: 1.1rem;
  margin: 0 auto 0.75rem;
  border-radius: 4px;
}
.hero-skeleton--tag {
  width: 54px;
  height: 20px;
  border-radius: 999px;
  margin: 0 3px;
}
.hero-skeleton--btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.hero-skeleton--icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin: 0 4px;
}

@keyframes heroSkeletonShimmer {
  0%   { background-position: 200% 0; opacity: 0.55; }
  50%  { opacity: 0.85; }
  100% { background-position: -200% 0; opacity: 0.55; }
}

/* 動きに敏感なユーザー対応 */
@media (prefers-reduced-motion: reduce) {
  .hero-skeleton {
    animation: none;
    opacity: 0.55;
  }
}

/* /assets/css/scenic-bg.css */
/* ================================================================
   SCENIC BG — 再生連動の背景演出
   再生中のカテゴリに応じて背景に情景画像をフェードイン/アウト。
   ================================================================ */

#scene-bg {
  position: fixed;
  inset: 0;
  z-index: 1;                         /* body背景の上・コンテンツの下 */
  pointer-events: none;               /* クリック・スクロール阻害しない */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.8s ease-in-out;
  will-change: opacity;               /* GPUレイヤー昇格でちらつき防止 */
}

/* idle: 図書館背景（無音時） */
#scene-bg.is-idle {
  opacity: 0.25;
}

/* playing: カテゴリ背景（再生時） — 情景をやや前に出す */
#scene-bg.is-visible {
  opacity: 0.34;
}

/* アクセシビリティ: 動きを減らす設定に対応 */
@media (prefers-reduced-motion: reduce) {
  #scene-bg {
    transition: none;
  }
}

/* モバイル: GPUコストを抑えるため固定背景をスクロール追従に変更 */
@media (hover: none) and (pointer: coarse) {
  #scene-bg {
    background-attachment: scroll;
  }
}

/* /assets/css/player.css?v=20260924tools1 */
/* ================================================================
   GLOBAL PLAYER — 神殿の祭壇
   深緑の闇 × 翡翠の光 × 和風紋様 × 粒子 × 呼吸アニメーション
   Dark Theme Tokens: var(--dark-*) from style.css :root
   ================================================================ */

/* ===== レイアウト固定 ===== */
/* プレイヤーがフッターコンテンツを隠さないよう body に余白を確保 */
body { padding-bottom: 104px; } /* 88px(player) + 16px(余白) */

/* Shared shell labels must not change when the PJAX body class changes. */
#global-player :is(.lb,.cnt,.new,.time),
.player-panel__stage-kicker { font-size: 11px !important; }

.player {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 88px;
  z-index: 1200;
  overflow: hidden;
}

/* ===== 背景レイヤー① 深緑の闇（ジャパニーズファンタジー） ===== */
.player-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(14, 28, 20, 0.97) 0%,
      rgba(10, 22, 16, 0.99) 100%);
  border-top: 1px solid rgba(60, 140, 90, 0.30);
  box-shadow:
    0 -2px 40px rgba(40, 120, 70, 0.20),
    0 -1px 8px rgba(20, 80, 40, 0.30);
}

/* ===== 背景レイヤー② 翡翠の光（上から神々しく） ===== */
.player-glow {
  position: absolute;
  top: -60%;
  left: 0;
  width: 100%;
  height: 220%;
  background:
    radial-gradient(ellipse at 50% 0%,
      rgba(60, 180, 100, 0.12) 0%,
      rgba(40, 140, 80, 0.06) 40%,
      transparent 65%);
  pointer-events: none;
  transition: opacity 1.2s ease;
}

.player.playing .player-glow {
  background:
    radial-gradient(ellipse at 50% 0%,
      rgba(80, 210, 120, 0.22) 0%,
      rgba(50, 160, 90, 0.10) 40%,
      transparent 65%);
  animation: glowPulse 3.5s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.80; }
  50%       { opacity: 1; }
}

/* ===== 背景レイヤー③ 和風円形紋様 ===== */
.player-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: url('/assets/images/pattern-circle.svg');
  background-repeat: repeat;
  background-size: 120px 120px;
  pointer-events: none;
}

/* ===== 背景レイヤー④ 粒子（::before） ===== */
.player::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle, rgba(80, 200, 120, 0.12) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.12;
  pointer-events: none;
  transition: opacity 1s ease;
}

.player.playing::before {
  opacity: 0.22;
  animation: particleDrift 8s linear infinite;
}

@keyframes particleDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 60px 60px; }
}

/* ===== 上辺の光ライン ===== */
.player::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(80, 200, 120, 0.00) 10%,
    rgba(100, 220, 140, 0.60) 30%,
    rgba(120, 240, 160, 0.90) 50%,
    rgba(100, 220, 140, 0.60) 70%,
    rgba(80, 200, 120, 0.00) 90%,
    transparent 100%
  );
  pointer-events: none;
  transition: opacity 0.8s ease;
}

.player.playing::after {
  animation: topLineGlow 3s ease-in-out infinite;
}

@keyframes topLineGlow {
  0%, 100% { opacity: 0.70; }
  50%       { opacity: 1; box-shadow: 0 0 8px rgba(100, 220, 140, 0.60); }
}

/* ===== 呼吸アニメーション（再生中） ===== */
.player.playing {
  animation: playerBreathe 4.5s ease-in-out infinite;
}

@keyframes playerBreathe {
  0%, 100% { transform: scaleY(1); }
  50%       { transform: scaleY(1.006); }
}

/* ===== 曲変更フェード ===== */
.player.track-changing .player-left {
  animation: trackFade 0.6s ease;
}

@keyframes trackFade {
  0%   { opacity: 1; }
  30%  { opacity: 0; }
  70%  { opacity: 0; }
  100% { opacity: 1; }
}

/* ===== 内部レイアウト ===== */
.player-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  gap: 24px;
}

/* ===== 左: 曲情報 ===== */
.player-left {
  flex: 0 0 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.track-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--dark-text-bright);
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  text-shadow: 0 0 12px rgba(80, 200, 120, 0.40);
}

.track-tags {
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.player-tag {
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  color: rgba(120, 210, 150, 0.80);
  background: rgba(60, 160, 90, 0.12);
  border: 1px solid rgba(80, 180, 110, 0.28);
  border-radius: 100px;
  padding: 1px 7px;
  white-space: nowrap;
  font-family: 'Noto Sans JP', sans-serif;
}

/* ===== 中央: コントロール ===== */
.player-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.player-controls {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* 前・次ボタン */
.btn-prev,
.btn-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(40, 100, 60, 0.20);
  border: 1px solid rgba(80, 180, 110, 0.22);
  color: rgba(120, 210, 150, 0.70);
  cursor: pointer;
  transition: all 0.22s ease;
}

.btn-prev:hover,
.btn-next:hover {
  background: rgba(60, 140, 80, 0.30);
  border-color: rgba(100, 210, 140, 0.50);
  color: rgba(160, 240, 190, 0.95);
  transform: scale(1.10);
  box-shadow: 0 0 10px rgba(80, 200, 120, 0.25);
}

/* 再生ボタン（核） */
.btn-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(145deg,
    rgba(50, 130, 75, 0.90) 0%,
    rgba(30, 90, 55, 0.95) 100%);
  border: 1.5px solid rgba(100, 210, 140, 0.45);
  color: rgba(200, 245, 220, 0.98);
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow:
    0 2px 16px rgba(40, 120, 70, 0.40),
    0 0 0 0 rgba(80, 200, 120, 0),
    inset 0 1px 0 rgba(140, 240, 170, 0.20);
}

.btn-play:hover {
  background: linear-gradient(145deg,
    rgba(65, 155, 90, 0.95) 0%,
    rgba(40, 110, 65, 0.98) 100%);
  transform: scale(1.08);
  box-shadow:
    0 4px 24px rgba(50, 150, 90, 0.50),
    0 0 28px rgba(80, 210, 120, 0.30),
    inset 0 1px 0 rgba(160, 255, 190, 0.25);
}

.player.playing .btn-play {
  background: linear-gradient(145deg,
    rgba(55, 145, 80, 0.95) 0%,
    rgba(35, 100, 60, 0.98) 100%);
  animation: playBtnGlow 2.8s ease-in-out infinite;
}

@keyframes playBtnGlow {
  0%, 100% {
    box-shadow:
      0 2px 16px rgba(40, 120, 70, 0.40),
      0 0 20px rgba(80, 200, 120, 0.35),
      inset 0 1px 0 rgba(140, 240, 170, 0.20);
  }
  50% {
    box-shadow:
      0 2px 20px rgba(50, 140, 80, 0.55),
      0 0 40px rgba(90, 220, 130, 0.55),
      0 0 60px rgba(70, 180, 110, 0.20),
      inset 0 1px 0 rgba(160, 255, 190, 0.30);
  }
}

/* ===== シークバー ===== */
.seekbar {
  position: relative;
  width: 100%;
  max-width: 500px;
  height: 4px;
  background: rgba(60, 140, 80, 0.18);
  border-radius: 100px;
  cursor: pointer;
  transition: height 0.2s ease;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.30);
}

.seekbar:hover {
  height: 6px;
}

.seek-progress {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(
    90deg,
    rgba(40, 140, 80, 0.90) 0%,
    rgba(70, 200, 120, 0.95) 50%,
    rgba(100, 230, 150, 1.00) 100%
  );
  border-radius: 100px;
  transition: width 0.1s linear;
  pointer-events: none;
  box-shadow:
    0 0 6px rgba(80, 210, 120, 0.60),
    0 0 14px rgba(60, 180, 100, 0.35);
}

/* 再生中はシークバーが光る */
.player.playing .seek-progress {
  animation: seekGlow 2.5s ease-in-out infinite;
}

@keyframes seekGlow {
  0%, 100% {
    box-shadow:
      0 0 6px rgba(80, 210, 120, 0.60),
      0 0 14px rgba(60, 180, 100, 0.35);
  }
  50% {
    box-shadow:
      0 0 10px rgba(100, 230, 140, 0.85),
      0 0 22px rgba(70, 200, 120, 0.55),
      0 0 36px rgba(50, 160, 90, 0.25);
  }
}

/* シークバー先端の光点 */
.seek-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(160, 255, 190, 1.00) 0%,
    rgba(100, 220, 140, 0.90) 60%,
    rgba(60, 170, 100, 0.70) 100%);
  border: 1.5px solid rgba(200, 255, 220, 0.80);
  box-shadow:
    0 0 8px rgba(100, 230, 140, 0.80),
    0 0 16px rgba(70, 200, 120, 0.50);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.seekbar:hover .seek-thumb {
  opacity: 1;
}

/* ===== 時間表示 ===== */
.time {
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  color: rgba(100, 200, 130, 0.55);
}

/* ===== 右: モード・音量 ===== */
.player-right {
  flex: 0 0 auto; /* V2.3: 三つの扉が収まるよう固定幅を解除 */
  align-self: stretch; /* V2.3: 扉をプレイヤー縦幅いっぱいに */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* ===== お気に入りボタン — 灯火 / アンバー ===== */
.btn-fav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(210, 148, 62, 0.38);
  cursor: pointer;
  transition: all 0.22s ease;
}
.btn-fav:hover {
  color: rgba(255, 184, 88, 0.85);
  border-color: rgba(255, 150, 50, 0.30);
  background: rgba(160, 100, 20, 0.12);
}
.btn-fav.is-fav {
  color: rgba(255, 159, 58, 0.96);
  border-color: rgba(255, 140, 50, 0.52);
  background: rgba(180, 100, 18, 0.16);
  box-shadow:
    0 0 6px  rgba(255, 180, 80, 0.48),
    0 0 16px rgba(255, 130, 40, 0.24),
    0 0 32px rgba(255, 110, 30, 0.10);
}
.btn-fav.is-fav:hover {
  color: rgba(255, 200, 110, 1);
  background: rgba(190, 110, 20, 0.22);
  box-shadow:
    0 0 8px  rgba(255, 190, 90, 0.55),
    0 0 22px rgba(255, 140, 50, 0.30),
    0 0 40px rgba(255, 110, 30, 0.14);
}
.btn-fav:disabled {
  color: rgba(160, 120, 55, 0.18);
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  cursor: default;
  pointer-events: none;
  opacity: 0.4;
}

/* 保存リストボタン (モーダルトリガー) — 灯火 / アンバー */
.fav-list-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(140, 90, 18, 0.12);
  border: 1px solid rgba(200, 130, 45, 0.24);
  border-radius: 3px;
  padding: 0 8px;
  height: 26px;
  cursor: pointer;
  white-space: nowrap;
  color: rgba(210, 148, 62, 0.70);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  line-height: 1;
  transition: all 0.18s ease;
  user-select: none;
}
.fav-list-btn svg {
  flex-shrink: 0;
  opacity: 0.75;
}
.fav-list-btn__count {
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  color: rgba(230, 165, 70, 0.65);
}
.fav-list-btn:hover {
  color: rgba(255, 184, 88, 0.95);
  border-color: rgba(255, 148, 45, 0.45);
  background: rgba(160, 100, 20, 0.20);
  box-shadow: 0 0 8px rgba(255, 160, 60, 0.18);
}
.fav-list-btn:hover .fav-list-btn__count {
  color: rgba(255, 184, 88, 0.90);
}
.fav-list-btn:hover svg {
  opacity: 1;
}

/* ===== V2.3 三つの扉 — 深緑の物理ボタン（音楽手帖・制作ツール・曲を持ち込む） =====
   オーディオ機器のパネル質感。緑=最暗トーン・文字/アイコンは金・押すと沈む。
   （.fav-list-btn 系は backups 内の旧ページが参照するため温存） */
.player-doors {
  display: flex;
  align-items: stretch;
  gap: 0; /* 隙間なく連結（segmented） */
  margin: 0 6px;
  align-self: stretch; /* プレイヤー縦幅いっぱい */
  border-left: 1px solid rgba(0, 0, 0, 0.55);
  border-right: 1px solid rgba(90, 180, 120, 0.35);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.35);
}
.pdoor {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 72px;
  padding: 0 13px;
  cursor: pointer;
  border: none;
  border-radius: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: #f0d68f; /* ゴールドの刻印 */
  /* 深緑（最暗トーン・Hiro確定 2026-07-07） */
  background: linear-gradient(180deg, #2a5f3e 0%, #1a4428 44%, #183f26 58%, #0c2415 100%);
  border-right: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow:
    inset 1px 1px 0 rgba(150, 235, 180, 0.4),
    inset 0 -3px 5px rgba(0, 0, 0, 0.42),
    inset -1px 0 0 rgba(120, 210, 150, 0.15);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 0 7px rgba(120, 220, 150, 0.18);
  transition: box-shadow 0.07s linear, background 0.16s, color 0.16s;
}
.pdoor:first-child {
  border-left: 1px solid rgba(120, 210, 150, 0.2);
}
.pdoor:last-child {
  border-right: none;
}
.pdoor::before {
  content: "";
  position: absolute;
  inset: 0 0 55% 0; /* 天面のツヤ */
  background: linear-gradient(180deg, rgba(190, 255, 210, 0.22), rgba(190, 255, 210, 0));
  pointer-events: none;
}
.pdoor:hover {
  color: #ffe9a8;
  background: linear-gradient(180deg, #356e49 0%, #205334 44%, #1d4b2d 58%, #0f2c1a 100%);
}
.pdoor:active,
.pdoor.is-open {
  /* カチッと沈む＝内側に凹む（is-open はツールパネル展開中） */
  background: linear-gradient(180deg, #164026 0%, #12351f 60%, #0d2917 100%);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.7), inset 0 -1px 0 rgba(150, 235, 180, 0.12);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
/* V2.3.1 翡翠の灯（案B・Hiro採用 2026-07-07）— 触れると敷居が灯り、開いている扉は灯りっぱなし */
.pdoor::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, transparent, #7ecb95, transparent);
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}
.pdoor:hover::after,
.pdoor.is-open::after {
  opacity: 0.85;
}
.pdoor.is-open::after {
  opacity: 1;
}
.pdoor:not(.is-open):hover {
  box-shadow:
    inset 1px 1px 0 rgba(150, 235, 180, 0.4),
    inset 0 -3px 5px rgba(0, 0, 0, 0.42),
    0 0 14px rgba(110, 220, 150, 0.18);
}
.pdoor.is-open {
  color: #ffe9a8;
}
/* キーボード操作にも金の輪 */
.pdoor:focus-visible {
  outline: 2px solid rgba(255, 207, 110, 0.85);
  outline-offset: -2px;
}
.pdoor svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}
.pdoor .lb {
  line-height: 1.2;
}
/* 音楽手帖のカウント＝LED風の金バッジ（右上） */
.pdoor .cnt {
  position: absolute;
  top: 6px;
  right: 7px;
  font-family: 'Cinzel', serif;
  font-size: 9.5px;
  line-height: 1;
  color: #14200f;
  background: linear-gradient(180deg, #ffe6a2, #c9a44e);
  border-radius: 999px;
  min-width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
/* NEW! バッジ — オレンジ（Hiro確定 2026-07-07） */
.pdoor .new {
  position: absolute;
  top: 5px;
  right: -9px;
  z-index: 3;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 0.06em;
  color: #401104;
  background: linear-gradient(180deg, #ffaa4d, #ff7a1e);
  border: 1px solid rgba(140, 50, 0, 0.6);
  border-radius: 5px;
  padding: 2px 5px;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
  transform: rotate(7deg);
  animation: pdoor-newpulse 1.8s ease-in-out infinite;
}
@keyframes pdoor-newpulse {
  0%, 100% { transform: rotate(7deg) scale(1); }
  50% { transform: rotate(7deg) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .pdoor .new { animation: none; }
}
@media (max-width: 768px) {
  .player-right { align-self: auto; }
  .player-doors { margin: 0 4px; align-self: auto; }
  .pdoor { min-width: 48px; padding: 6px 7px; font-size: 8.5px; gap: 3px; }
  .pdoor svg { width: 15px; height: 15px; }
  .pdoor .cnt { top: 3px; right: 4px; min-width: 13px; height: 13px; font-size: 8.5px; }
  .pdoor .new { top: 2px; right: -6px; font-size: 9.5px; padding: 2px 5px; }
}

/* リピート・シャッフルボタン */
.btn-repeat,
.btn-shuffle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(80, 180, 110, 0.40);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-repeat:hover,
.btn-shuffle:hover {
  color: rgba(120, 220, 150, 0.80);
  border-color: rgba(80, 180, 110, 0.30);
  background: rgba(50, 140, 80, 0.12);
}

.btn-repeat[data-mode="one"],
.btn-repeat[data-mode="all"],
.btn-shuffle[data-active="true"] {
  color: rgba(120, 230, 155, 0.95);
  border-color: rgba(80, 200, 120, 0.45);
  background: rgba(50, 160, 90, 0.15);
  box-shadow: 0 0 8px rgba(80, 200, 120, 0.25);
}

/* DL / 詳細 ボタン */
.player-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: rgba(180, 220, 195, 0.60);
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
  cursor: pointer;
  flex-shrink: 0;
}
.player-action-btn:hover {
  color: #9adfb4;
  background: rgba(100, 180, 130, 0.12);
}

/* 音量 */
.volume-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.volume-icon {
  color: rgba(80, 180, 110, 0.50);
  flex-shrink: 0;
}

.volume {
  -webkit-appearance: none;
  appearance: none;
  width: 72px;
  height: 3px;
  background: rgba(60, 140, 80, 0.22);
  border-radius: 100px;
  outline: none;
  border: none;
  cursor: pointer;
  box-shadow: none;
}

.volume:focus {
  outline: none;
  box-shadow: none;
}

.volume:focus-visible {
  outline: none;
  box-shadow: none;
}

.volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(140, 230, 170, 1.00) 0%,
    rgba(80, 180, 110, 0.90) 100%);
  border: 1.5px solid rgba(200, 255, 220, 0.70);
  box-shadow: 0 0 6px rgba(80, 200, 120, 0.50);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.volume::-webkit-slider-thumb:hover {
  transform: scale(1.25);
  box-shadow: 0 0 10px rgba(100, 220, 140, 0.70);
}

.volume::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(100, 200, 130, 0.90);
  border: 1.5px solid rgba(200, 255, 220, 0.70);
  cursor: pointer;
}

/* ===== ページ下部のpadding（プレイヤー分） ===== */
body {
  padding-bottom: 88px;
}

/* ===== モバイル対応 ===== */
@media (max-width: 768px) {
  .player {
    height: auto;
  }

  body {
    padding-bottom: 90px;
  }

  .player-inner {
    padding: 6px 12px;
    gap: 8px;
    flex-wrap: wrap;
  }

  .player-left {
    flex: 1 1 0;
    min-width: 0;
    order: 1;
  }

  .track-title {
    font-size: 0.75rem;
  }
  .track-tags {
    display: none;
  }

  .player-center {
    flex: 0 0 100%;
    order: 3;
    gap: 6px;
  }

  .player-right {
    flex: 0 0 auto;
    order: 2;
    gap: 4px;
  }
  .player-right .btn-fav {
    width: 26px;
    height: 26px;
  }
  .player-right .fav-list-btn {
    padding: 2px;
  }

  .btn-repeat,
  .btn-shuffle,
  .player-action-btn {
    display: none;
  }

  .fav-list-btn__label,
  .fav-list-btn__count {
    display: none;
  }

  .volume-wrap {
    display: none;
  }

  /* ツールボタン：右側に確実に表示 */
  .player-tool-btn {
    padding: 3px 8px;
    font-size: 0.62rem;
  }
  .player-tool-btn svg {
    width: 10px;
    height: 10px;
  }

  .player-controls {
    gap: 4px;
  }
  .btn-play {
    width: 36px;
    height: 36px;
  }
  .btn-prev,
  .btn-next {
    width: 24px;
    height: 24px;
  }
  .seekbar {
    height: 3px;
  }
  .time {
    font-size: 0.7rem;
  }

  .seekbar {
    max-width: 100%;
  }

  .time {
    font-size: 0.68rem;
  }
}

@media (max-width: 480px) {
  .player-left {
    flex: 0 0 120px;
  }

  .track-title {
    font-size: 0.72rem;
  }

  .player-inner {
    gap: 8px;
  }
}

/* ===== プレイヤー 足跡ボタン ===== */
.player-btn-footprint {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(154, 218, 180, 0.45);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.22s ease;
}
.player-btn-footprint:hover {
  color: rgba(154, 218, 180, 0.9);
  border-color: rgba(100, 180, 130, 0.35);
  background: rgba(45, 90, 61, 0.18);
}

/* ===== プレイヤー 足跡ポップアップ ===== */
.player-fp-popup {
  position: fixed;
  bottom: calc(72px + 0.5rem); /* プレイヤーの高さ分上 */
  right: 1rem;
  width: 300px;
  background: rgba(8, 18, 14, 0.96);
  border: 1px solid rgba(100, 180, 130, 0.3);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  z-index: 9000;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(154,218,180,0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.player-fp-popup[hidden] { display: none; }

.player-fp-popup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
  gap: 0.5rem;
}
.player-fp-popup__track {
  font-size: 0.78rem;
  color: rgba(154, 218, 180, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.player-fp-popup__close {
  background: transparent;
  border: none;
  color: rgba(154, 218, 180, 0.5);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.2rem;
  flex-shrink: 0;
  transition: color 0.2s;
}
.player-fp-popup__close:hover { color: rgba(154, 218, 180, 0.9); }

.player-fp-popup__fields {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.player-fp-popup__nick,
.player-fp-popup__body,
.player-fp-popup__tag {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(100, 180, 130, 0.22);
  border-radius: 6px;
  color: rgba(220, 235, 225, 0.9);
  font-size: 0.8rem;
  padding: 0.4rem 0.55rem;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
  resize: none;
  transition: border-color 0.2s;
}
.player-fp-popup__nick::placeholder,
.player-fp-popup__body::placeholder,
.player-fp-popup__tag::placeholder { color: rgba(154, 218, 180, 0.3); }
.player-fp-popup__nick:focus,
.player-fp-popup__body:focus,
.player-fp-popup__tag:focus { border-color: rgba(100, 180, 130, 0.55); }

.player-fp-popup__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.55rem;
}
.player-fp-popup__count {
  font-size: 0.72rem;
  color: rgba(154, 218, 180, 0.4);
}
.player-fp-popup__submit {
  background: rgba(45, 90, 61, 0.55);
  border: 1px solid rgba(100, 180, 130, 0.4);
  border-radius: 5px;
  color: rgba(154, 218, 180, 0.9);
  font-size: 0.78rem;
  padding: 0.3rem 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
}
.player-fp-popup__submit:hover {
  background: rgba(45, 90, 61, 0.85);
  border-color: rgba(100, 180, 130, 0.7);
}
.player-fp-popup__note {
  margin: 0.45rem 0 0;
  font-size: 0.72rem;
  min-height: 1em;
  color: transparent;
}
.player-fp-popup__note--success { color: rgba(100, 200, 140, 0.85); }
.player-fp-popup__note--error   { color: rgba(220, 100, 80, 0.85); }

@media (max-width: 768px) {
  .player-fp-popup {
    right: 0.5rem;
    left: 0.5rem;
    width: auto;
    max-width: none;
    padding: 1.1rem 1.1rem 1rem;
  }
}

/* ============================================================
   Phase2 「ひとつの心臓」の脈拍: お気に入り件数バッジ/♥の鼓動演出
   favorites:updated で件数が変わると脈打ち、追加時は♥に金の灯が灯る。
   ============================================================ */
@keyframes favPulse {
  0%   { transform: scale(1); }
  28%  { transform: scale(1.4); }
  55%  { transform: scale(.9); }
  100% { transform: scale(1); }
}
@keyframes favGlow {
  0%   { box-shadow: 0 0 0 0 rgba(255,200,110,.6); }
  100% { box-shadow: 0 0 0 14px rgba(255,200,110,0); }
}
.fav-pulse { animation: favPulse .65s cubic-bezier(.22,1,.36,1); will-change: transform; }
#player-fav-count.fav-pulse { color: #ffcf6e; text-shadow: 0 0 8px rgba(255,200,110,.7); }
#player-btn-fav.fav-pulse { animation: favPulse .65s cubic-bezier(.22,1,.36,1), favGlow .7s ease-out; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) {
  .fav-pulse, #player-btn-fav.fav-pulse { animation: none !important; }
}

/* Before a track is chosen, the mobile player becomes a slim launcher. */
@media (max-width: 768px) {
  #global-player:has(#player-btn-fav:disabled) {
    height: 58px;
  }
  #global-player:has(#player-btn-fav:disabled) .player-inner {
    min-height: 58px;
    padding: 5px 10px;
    flex-wrap: nowrap;
  }
  #global-player:has(#player-btn-fav:disabled) .player-center,
  #global-player:has(#player-btn-fav:disabled) .btn-fav,
  #global-player:has(#player-btn-fav:disabled) .btn-repeat,
  #global-player:has(#player-btn-fav:disabled) .btn-shuffle,
  #global-player:has(#player-btn-fav:disabled) .volume-wrap,
  #global-player:has(#player-btn-fav:disabled) .player-action-btn,
  #global-player:has(#player-btn-fav:disabled) #player-tool-btn {
    display: none;
  }
  #global-player:has(#player-btn-fav:disabled) .player-left {
    order: 1;
    flex: 1 1 auto;
  }
  #global-player:has(#player-btn-fav:disabled) .player-right {
    order: 2;
    flex: 0 0 auto;
  }
  #global-player:has(#player-btn-fav:disabled) .player-doors {
    margin: 0;
  }
  #global-player:has(#player-btn-fav:disabled) .pdoor {
    min-width: 54px;
    min-height: 46px;
  }

}

/* ── プレイヤーの足跡ポップアップ: タグ欄 ──────────────
   足あとは「ひとこと」と「自由に書けるタグ」の2種類。
   語彙は閉じない。既存タグをワンタップ候補＋件数つきサジェストで出し、
   表記ゆれは閉じ込めずに収束させる。 */
/* ── 足あとカードの拡大 ────────────────────────────────
   小さすぎて読めない・書きにくいという指摘を受け、全体を約2倍に。
   z-index は右下の浮遊ボタン(#hmix-fav-hub / z=2147483500)より上に置く。 */
.player-fp-popup {
  width: 560px;
  max-width: calc(100vw - 2rem);
  z-index: 2147483600;
  padding: 1.35rem 1.5rem 1.2rem;
  border-radius: 12px;
  bottom: calc(72px + 1rem);
}
.player-fp-popup__header { margin-bottom: 0.8rem; }
.player-fp-popup__track  { font-size: 1.02rem; letter-spacing: 0.03em; }
.player-fp-popup__close  { font-size: 1.45rem; padding: 0 0.35rem; }
.player-fp-popup__fields { gap: 0.7rem; }
.player-fp-popup__nick,
.player-fp-popup__body,
.player-fp-popup__tag {
  font-size: 0.98rem;
  line-height: 1.8;
  padding: 0.7rem 0.85rem;
  border-radius: 7px;
}
.player-fp-popup__body { min-height: 5.6em; }
.player-fp-popup__count  { flex: none; font-size: 0.82rem; color: rgba(154, 218, 180, 0.55); }
.player-fp-popup__note   { font-size: 0.85rem; }


.player-fp-tagfield { position: relative; margin-top: 0.15rem; }

/* 誘い文 */
/* ── 足あとの2つの投稿（コメント／ユーザータグ） ──────────
   どちらを残そうとしているかが分かるよう、対等な2セクションに分け、
   それぞれに同じ重みの投稿ボタンを置く。 */
.fp-sec { padding: 0.9rem 0 0.2rem; }
.fp-sec + .fp-sec { border-top: 1px solid rgba(100, 180, 130, 0.18); margin-top: 0.5rem; }
.fp-sec__title {
  margin: 0 0 0.3rem;
  font-family: 'Noto Serif JP', serif;
  font-size: 1rem; font-weight: 500; letter-spacing: 0.06em;
  color: rgba(226, 245, 232, 0.95);
}
.fp-sec__lead {
  margin: 0 0 0.6rem;
  font-size: 0.86rem; line-height: 1.8;
  color: rgba(200, 226, 210, 0.72);
}
.fp-sec__lead span {
  display: block; font-size: 0.8rem; color: rgba(154, 218, 180, 0.58);
}
.fp-sec .player-fp-popup__nick,
.fp-sec .player-fp-popup__body { margin-bottom: 0.5rem; }
.fp-sec__foot {
  display: flex; align-items: center; gap: 0.7rem; margin-top: 0.6rem;
}
.fp-sec__msg { flex: 1; min-width: 0; font-size: 0.8rem; line-height: 1.6; color: rgba(232, 238, 230, .5); }
.fp-sec__msg.is-ok  { color: rgba(120, 210, 150, 0.95); }
.fp-sec__msg.is-err { color: rgba(226, 130, 110, 0.95); }
.fp-sec__submit {
  flex: none;
  background: rgba(154, 223, 180, 0.14);
  border: 1px solid rgba(154, 223, 180, 0.45);
  border-radius: 6px;
  color: #e9f6ec;
  font-family: 'Noto Serif JP', serif;
  font-size: 0.92rem; letter-spacing: 0.08em;
  padding: 0.55rem 1.25rem; min-width: 11em; text-align: center; cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.fp-sec__submit:hover:not([disabled]) {
  background: rgba(154, 223, 180, 0.26); border-color: rgba(154, 223, 180, 0.85);
}
.fp-sec__submit[disabled] { opacity: 0.45; cursor: default; }

/* ワンタップ候補（実タグ優先／無ければ例） */
.player-fp-tagpick { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 0.4rem; }
.player-fp-tagpick button {
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(154, 218, 180, 0.3);
  border-radius: 999px;
  color: rgba(200, 226, 210, 0.85);
  font-family: inherit; font-size: 0.82rem; letter-spacing: 0.02em;
  padding: 5px 13px; cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.player-fp-tagpick button:hover {
  background: rgba(154, 223, 180, 0.16);
  border-color: rgba(154, 223, 180, 0.7);
  color: #eafaf0;
}
.player-fp-tagpick button i {
  font-style: normal; opacity: 0.55; margin-left: 4px; font-size: 0.62rem;
}
.player-fp-tagpick { align-items: center; gap: 6px; margin-bottom: 0.5rem; }
.player-fp-tagpick .lb {
  width: 100%; font-size: 0.74rem; letter-spacing: 0.1em;
  color: rgba(154, 218, 180, 0.5); margin: 0 0 2px;
}

/* 選んだタグ */
.player-fp-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 0.35rem; }
.player-fp-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 7px 5px 13px; border-radius: 999px;
  background: rgba(154, 223, 180, .16); border: 1px solid rgba(154, 223, 180, .45);
  font-size: 0.86rem; letter-spacing: .02em; color: #e2f5e8; max-width: 100%;
}
.player-fp-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-fp-chip button {
  background: none; border: none; cursor: pointer; padding: 0 3px;
  color: rgba(216, 236, 221, .6); font-size: 15px; line-height: 1;
}
.player-fp-chip button:hover { color: #f0c987; }

/* 入力中の候補 */
.player-fp-sugg {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30; margin-top: 5px;
  max-height: 230px; overflow-y: auto;
  background: rgba(10, 18, 13, .99);
  border: 1px solid rgba(120, 210, 150, .28); border-radius: 6px;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .8);
}
.player-fp-sugg[hidden] { display: none; }
.player-fp-sugg button {
  display: flex; width: 100%; align-items: baseline; gap: 8px;
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 10px 13px; color: rgba(232, 238, 230, .86); font: inherit; font-size: 0.9rem;
}
.player-fp-sugg button:hover { background: rgba(154, 223, 180, .14); color: #fff; }
.player-fp-sugg .n {
  margin-left: auto; flex: none; font-size: 0.78rem; color: rgba(154, 223, 180, .6);
}
.player-fp-sugg .new {
  margin-left: auto; flex: none; font-size: 0.78rem; color: rgba(209, 184, 122, .9);
  white-space: nowrap;
}

/* ── 「先に音楽を再生してください」の吹き出し ────────────── */
#hmix-needtrack-tip {
  position: fixed;
  z-index: 2147483640;
  padding: 7px 12px;
  background: rgba(10, 20, 15, 0.97);
  border: 1px solid rgba(154, 218, 180, 0.4);
  border-radius: 6px;
  color: rgba(226, 245, 232, 0.95);
  font-family: 'Noto Serif JP', serif;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.8);
}
#hmix-needtrack-tip.on { opacity: 1; transform: translateY(0); }
#hmix-needtrack-tip::after {
  content: ''; position: absolute; left: 50%; bottom: -5px;
  width: 8px; height: 8px; margin-left: -4px;
  background: rgba(10, 20, 15, 0.97);
  border-right: 1px solid rgba(154, 218, 180, 0.4);
  border-bottom: 1px solid rgba(154, 218, 180, 0.4);
  transform: rotate(45deg);
}
@media (prefers-reduced-motion: reduce) { #hmix-needtrack-tip { transition: none; } }

/* Compact mobile altar: the same controls are moved into a summary and drawer. */
@media (max-width: 768px) {
  body.hmix-mobile-player { padding-bottom: calc(var(--hmix-player-height, 100px) + 16px); }
  #global-player.player--mobile { height: auto; bottom: var(--hmix-keyboard-inset, 0px); }
  #global-player.player--mobile .player-inner {
    display: block; height: auto; min-height: 0;
    padding: 6px max(12px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }
  #global-player.player--mobile .player-mobile-summary {
    display: flex; align-items: center; gap: 8px; min-height: 76px;
  }
  #global-player.player--mobile .player-mobile-summary .player-left { flex: 1 1 0; min-width: 0; max-width: none; order: 0; }
  #global-player.player--mobile .track-title { white-space: normal; overflow-wrap: anywhere; overflow: visible; text-overflow: clip; font-size: .82rem; line-height: 1.5; }
  #global-player.player--mobile .player-mobile-summary .btn-play,
  #global-player.player--mobile .player-mobile-summary .btn-fav { flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; margin: 0; }
  #global-player.player--mobile .player-mobile-expand { flex: 0 0 52px; min-width: 52px; min-height: 48px; margin: 0; font-size: .68rem; }
  #global-player.player--mobile.player--expanded .player-mobile-expand svg { transform: rotate(180deg); }
  #global-player.player--mobile .player-mobile-drawer[hidden] { display: none !important; }
  #global-player.player--mobile .player-mobile-drawer {
    max-height: min(300px, calc(var(--hmix-visual-height, 100dvh) * .45)); overflow-y: auto; overscroll-behavior: contain;
    border-top: 1px solid rgba(217,181,102,.22); padding: 10px 0 4px;
  }
  #global-player.player--mobile .player-mobile-drawer .player-center { display: flex; width: 100%; flex: none; gap: 10px; }
  #global-player.player--mobile .player-mobile-drawer .player-controls { display: flex; gap: 4px; }
  #global-player.player--mobile .player-mobile-drawer .btn-prev,
  #global-player.player--mobile .player-mobile-drawer .btn-next { width: 40px; height: 44px; }
  #global-player.player--mobile .player-mobile-drawer .player-right { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; margin-top: 8px; }
  #global-player.player--mobile .player-mobile-drawer .player-doors { width: 100%; justify-content: center; gap: 8px; }
  #global-player.player--mobile .player-mobile-drawer .pdoor { min-height: 48px; min-width: 70px; font-size: .68rem; }
  #global-player.player--mobile .player-mobile-drawer .player-action-btn,
  #global-player.player--mobile .player-mobile-drawer .btn-repeat,
  #global-player.player--mobile .player-mobile-drawer .btn-shuffle { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; }
  #global-player.player--mobile .player-mobile-drawer .volume-wrap { display: flex; min-height: 44px; }
}

@media (max-width: 768px) {
  #global-player.player--mobile { overflow: clip; }
  #global-player.player--mobile .player-inner { position: relative; top: auto; bottom: auto; transform: none; }
}

/* Quiet, keyboard-accessible entry to the library when no track is selected. */
#player-track-title a { color: inherit; font: inherit; text-decoration: none; border-bottom: 1px solid rgba(225,215,176,.35); padding-bottom: 2px; }
#player-track-title a:hover { color: #f0dfae; border-bottom-color: currentColor; }
#player-track-title a:focus-visible { outline: 2px solid #e1ce91; outline-offset: 3px; border-radius: 2px; }

/* /assets/css/player-panel.css?v=20260924tools1 */
/* ============================================================
   PLAYER EXTENSION PANEL — 音の劇場ツールボックス
   高さを安定させた制作パネル
   ============================================================ */

/* ── トグルボタン（プレイヤー内） ── */
:root {
  --toolbox-bg-0: #04100c;
  --toolbox-bg-1: #071a13;
  --toolbox-bg-2: #0d2a1d;
  --toolbox-metal-0: #07130f;
  --toolbox-metal-1: #10291f;
  --toolbox-metal-2: #1a3f31;
  --toolbox-glass: rgba(10, 31, 24, 0.68);
  --toolbox-glass-strong: rgba(7, 24, 18, 0.86);
  --toolbox-glass-clear: rgba(20, 58, 44, 0.38);
  --toolbox-line: rgba(158, 222, 181, 0.18);
  --toolbox-line-strong: rgba(187, 239, 203, 0.34);
  --toolbox-gold: #d9b566;
  --toolbox-gold-soft: rgba(217, 181, 102, 0.26);
  --toolbox-mint: #9adfb4;
  --toolbox-mint-bright: #bdf4cb;
  --toolbox-cyan: #72d7c3;
  --toolbox-text: rgba(241, 249, 236, 0.94);
  --toolbox-muted: rgba(194, 223, 202, 0.66);
  --toolbox-faint: rgba(194, 223, 202, 0.42);
  --toolbox-danger: #ff8f8f;
  --toolbox-radius-xs: 7px;
  --toolbox-radius-sm: 10px;
  --toolbox-radius-md: 14px;
  --toolbox-radius-lg: 18px;
  --toolbox-blur: blur(24px) saturate(1.25);
  --toolbox-shadow-panel: 0 -24px 70px rgba(0, 0, 0, 0.66);
  --toolbox-shadow-card: 0 16px 42px rgba(0, 0, 0, 0.30);
  --toolbox-shadow-active: 0 0 0 1px rgba(189, 244, 203, 0.12), 0 0 28px rgba(154, 223, 180, 0.18);
  --toolbox-metal-sheen: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.035) 22%, rgba(0,0,0,0.22) 58%, rgba(154,223,180,0.12));
  --toolbox-scanline: linear-gradient(90deg, transparent, rgba(189, 244, 203, 0.55), transparent);
  --toolbox-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --toolbox-fast: 160ms var(--toolbox-ease);
  --toolbox-normal: 260ms var(--toolbox-ease);
}

.player-tool-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 13px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 227, 160, 0.10), rgba(60, 140, 90, 0.10)),
    rgba(10, 20, 16, 0.82);
  border: 1px solid rgba(217, 181, 102, 0.30);
  color: rgba(255, 234, 184, 0.88);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.player-tool-btn:hover {
  background:
    linear-gradient(180deg, rgba(255, 227, 160, 0.16), rgba(60, 140, 90, 0.16)),
    rgba(10, 20, 16, 0.92);
  border-color: rgba(255, 227, 160, 0.56);
  color: #ffe9b0;
}
.player-tool-btn.is-open {
  background:
    linear-gradient(135deg, rgba(217, 181, 102, 0.24), rgba(74, 135, 116, 0.20)),
    rgba(14, 24, 20, 0.96);
  border-color: rgba(255, 227, 160, 0.66);
  color: #ffe9b0;
  box-shadow: 0 0 18px rgba(217, 181, 102, 0.16), inset 0 1px 0 rgba(255,255,255,0.08);
}

/* ── パネル本体 ── */
.player-panel {
  position: fixed;
  bottom: 88px;
  left: 0;
  right: 0;
  z-index: 1301;
  height: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.player-panel.is-open {
  height: min(640px, calc(100vh - 112px));
  max-height: min(640px, calc(100vh - 112px));
}

/* タブコンテンツの高さを統一 */
.player-panel__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  height: min(640px, calc(100vh - 112px));
  min-height: 390px;
  background:
    radial-gradient(circle at 16% 0%, rgba(217, 181, 102, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(17, 27, 24, 0.98), rgba(5, 13, 11, 0.985));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(217, 181, 102, 0.34);
  box-shadow:
    0 -18px 55px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255, 238, 190, 0.09);
  overflow: hidden;
}
.player-panel__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.32;
  mask-image: linear-gradient(180deg, #000, transparent 72%);
}
.player-panel__inner::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  top: 8px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 227, 160, 0.48), transparent);
}

/* ── 音の劇場ヘッダー ── */
.pp-panel-toast {
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 8;
  max-width: min(360px, calc(100vw - 44px));
  padding: 10px 14px;
  border: 1px solid rgba(217, 181, 102, 0.42);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(217, 181, 102, 0.20), rgba(154, 223, 180, 0.10)),
    rgba(5, 14, 11, 0.94);
  color: #fff0bd;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255,255,255,0.08);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.pp-panel-toast.is-show {
  opacity: 1;
  transform: translateY(0);
}

.player-panel__stage-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(156px, auto) minmax(180px, 1fr) auto minmax(304px, 304px);
  align-items: center;
  gap: 12px;
  padding: 16px 22px 10px;
  border-bottom: 1px solid rgba(255, 227, 160, 0.10);
}
.player-panel__stage-head::before {
  content: '';
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 227, 160, 0.36), rgba(120, 176, 142, 0.18), transparent);
}
.player-panel__stage-mark {
  display: grid;
  grid-template-columns: repeat(3, 8px);
  gap: 5px;
  padding: 7px 8px;
  border: 1px solid rgba(255, 227, 160, 0.22);
  border-radius: 999px;
  background: rgba(255, 227, 160, 0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.player-panel__stage-mark span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(120, 176, 142, 0.58);
  box-shadow: 0 0 12px rgba(120, 176, 142, 0.24);
}
.player-panel__stage-mark span:nth-child(2) {
  background: rgba(255, 227, 160, 0.78);
  box-shadow: 0 0 16px rgba(255, 227, 160, 0.30);
}
.player-panel__stage-title {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.player-panel__stage-kicker {
  color: rgba(255, 227, 160, 0.70);
  font-family: 'Cinzel', 'Noto Sans JP', serif;
  font-size: 0.68rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
}
.player-panel__stage-title strong {
  color: rgba(250, 244, 218, 0.96);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.player-panel__stage-copy {
  justify-self: end;
  min-width: 220px;
  color: rgba(205, 226, 199, 0.66);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  text-align: right;
  white-space: nowrap;
}
.player-panel__video-launch {
  justify-self: end;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 227, 160, 0.46);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 227, 160, 0.20), rgba(126, 236, 169, 0.12)),
    rgba(8, 23, 17, 0.72);
  color: #fff0bd;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 0 18px rgba(126, 236, 169, 0.10), inset 0 1px 0 rgba(255,255,255,0.08);
}
.player-panel__video-launch:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 227, 160, 0.70);
  background:
    linear-gradient(135deg, rgba(255, 227, 160, 0.28), rgba(126, 236, 169, 0.18)),
    rgba(8, 23, 17, 0.84);
}
.player-panel__stage-status {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 7px;
  width: 304px;
  min-width: 304px;
}
.pp-stage-pill {
  display: grid;
  grid-template-columns: auto;
  gap: 1px;
  width: 92px;
  min-width: 92px;
  padding: 6px 9px;
  border: 1px solid rgba(154, 180, 150, 0.16);
  border-radius: 9px;
  background: rgba(5, 14, 11, 0.50);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}
.pp-stage-pill span {
  color: rgba(205, 226, 199, 0.56);
  font-size: 0.62rem;
  letter-spacing: 0.10em;
  white-space: nowrap;
}
.pp-stage-pill strong,
.pp-stage-pill em {
  color: rgba(235, 247, 230, 0.90);
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pp-stage-pill--peak {
  grid-template-columns: 52px 38px;
  column-gap: 6px;
  align-items: end;
  width: 106px;
  min-width: 106px;
}
.pp-stage-pill--peak span {
  grid-column: 1 / -1;
}
.pp-stage-pill--peak strong {
  display: block;
  width: 52px;
  overflow: hidden;
  text-align: right;
}
.pp-stage-pill em {
  justify-self: end;
  width: 38px;
  min-width: 38px;
  padding: 1px 6px;
  border-radius: 999px;
  color: #aee6bc;
  background: rgba(154, 223, 180, 0.12);
  text-align: center;
}
.pp-stage-pill.is-on {
  border-color: rgba(255, 227, 160, 0.38);
  background: rgba(217, 181, 102, 0.10);
}
.pp-stage-pill.is-on strong {
  color: #ffe9b0;
}
.pp-stage-pill.is-muted strong {
  color: rgba(205, 226, 199, 0.60);
}
.pp-stage-pill.is-warn {
  border-color: rgba(255, 227, 160, 0.44);
  background: rgba(217, 181, 102, 0.12);
}
.pp-stage-pill.is-warn em {
  color: #ffe3a0;
  background: rgba(217, 181, 102, 0.18);
}
.pp-stage-pill.is-clip {
  border-color: rgba(255, 130, 130, 0.52);
  background: rgba(225, 111, 111, 0.12);
}
.pp-stage-pill.is-clip em {
  color: #ffb2b2;
  background: rgba(225, 111, 111, 0.22);
}

/* ── タブバー ── */
.player-panel__tabs {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(217, 181, 102, 0.16);
  padding: 12px 18px 12px;
  background:
    linear-gradient(180deg, rgba(255, 227, 160, 0.045), rgba(4, 10, 8, 0.16)),
    rgba(3, 8, 7, 0.18);
}
.player-panel__tab {
  min-height: 40px;
  padding: 9px 14px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(230, 238, 219, 0.72);
  cursor: pointer;
  border: 1px solid rgba(154, 180, 150, 0.18);
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.02)),
    rgba(5, 14, 11, 0.58);
  transition: all 0.2s ease;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}
.player-panel__tab:hover {
  color: rgba(255, 242, 201, 0.92);
  border-color: rgba(217, 181, 102, 0.34);
  background: rgba(217, 181, 102, 0.08);
}
.player-panel__tab.is-active {
  color: #fff1bc;
  border-color: rgba(255, 227, 160, 0.62);
  background:
    linear-gradient(135deg, rgba(217, 181, 102, 0.26), rgba(80, 145, 118, 0.18)),
    rgba(12, 22, 18, 0.88);
  text-shadow: 0 0 14px rgba(217, 181, 102, 0.28);
  box-shadow: 0 0 0 1px rgba(255, 227, 160, 0.08), 0 8px 22px rgba(0,0,0,0.18);
}
.player-panel__tab.is-active::after {
  content: '';
  display: block;
  height: 2px;
  margin: 7px 4px -5px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 227, 160, 0.92), transparent);
  box-shadow: 0 0 12px rgba(255, 227, 160, 0.34);
}
.player-panel__tab.is-beta::after,
.player-panel__video-launch.is-beta::after {
  content: 'Beta';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  margin: 0 0 0 7px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid rgba(126, 236, 169, 0.30);
  background: rgba(126, 236, 169, 0.12);
  color: rgba(205, 255, 218, 0.94);
  font-size: 0.58rem;
  font-weight: 1000;
  letter-spacing: 0.04em;
  vertical-align: middle;
  box-shadow: none;
}
.player-panel__tab.is-mobile-disabled,
.player-panel__video-launch.is-mobile-disabled {
  opacity: 0.48;
  cursor: not-allowed;
  filter: grayscale(0.55);
}
.player-panel__tab.is-mobile-disabled:hover,
.player-panel__video-launch.is-mobile-disabled:hover {
  transform: none;
  color: rgba(230, 238, 219, 0.62);
  border-color: rgba(154, 180, 150, 0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}

/* タブとアクションの間のスペーサー */
.player-panel__tabs-spacer {
  flex: 1;
}

.pp-tab-video {
  min-height: 320px;
}

.player-panel__video-launch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

/* DL / 詳細 アクションボタン */
.player-panel__action {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 13px;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: rgba(230, 238, 219, 0.76);
  text-decoration: none;
  border: 1px solid rgba(154, 180, 150, 0.14);
  border-radius: 9px;
  background: rgba(5, 14, 11, 0.36);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
.player-panel__action:hover {
  color: #ffe9b0;
  background: rgba(217, 181, 102, 0.10);
  border-color: rgba(217, 181, 102, 0.34);
}

/* ── タブコンテンツ ── */
.player-panel__content {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: none;
  padding: 22px 24px 24px;
  max-height: none;
  overflow-y: auto;
  color: rgba(230, 238, 219, 0.9);
}
.player-panel__content.is-active {
  display: block;
}

.player-panel__content > *:first-child {
  margin-top: 0;
}

/* ── Tab 1: 使える？ ── */
.pp-license-list {
  list-style: none;
  padding: 10px 14px;
  margin: 0;
  border: 1px solid rgba(217, 181, 102, 0.16);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 227, 160, 0.035), transparent 38%),
    rgba(3, 9, 8, 0.32);
}
.pp-license-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(217, 181, 102, 0.075);
  font-size: 0.92rem;
}
.pp-license-item:last-child { border-bottom: none; }
.pp-license-item:nth-child(even) { background: rgba(255, 227, 160, 0.025); border-radius: 6px; }
.pp-license-icon { font-size: 0.95rem; flex-shrink: 0; width: 22px; text-align: center; }
.pp-license-name { flex: 1; color: rgba(220, 245, 228, 0.90); }
.pp-license-status { font-size: 0.84rem; letter-spacing: 0.04em; }
.pp-license-status--free { color: #aee6bc; }
.pp-license-status--paid { color: #ffe3a0; }
.pp-license-status--warn { color: rgba(200, 180, 120, 0.85); font-size: 0.7rem; }
.pp-license-status--no { color: rgba(220, 100, 100, 0.80); }
.pp-license-note {
  margin-top: 12px;
  font-size: 0.9rem;
  color: rgba(180, 220, 195, 0.55);
  line-height: 1.7;
}
.pp-license-note a { color: #9adfb4; text-decoration: none; }
.pp-license-note a:hover { text-decoration: underline; }

/* ── Tab 2: 表記コピー ── */
.pp-credit-block {
  margin-bottom: 12px;
  border: 1px solid rgba(217, 181, 102, 0.16);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(3, 9, 8, 0.34);
}
.pp-credit-label {
  padding: 6px 12px;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: rgba(255, 227, 160, 0.72);
  background: rgba(255, 227, 160, 0.055);
  border-bottom: 1px solid rgba(217, 181, 102, 0.10);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pp-credit-label .pp-rec {
  font-size: 0.6rem;
  background: rgba(154, 223, 180, 0.12);
  color: #9adfb4;
  border: 1px solid rgba(154, 223, 180, 0.25);
  border-radius: 99px;
  padding: 1px 8px;
}
.pp-credit-body {
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.pp-credit-text {
  flex: 1;
  font-family: monospace;
  font-size: 0.9rem;
  color: rgba(235, 247, 230, 0.92);
  line-height: 1.6;
  white-space: pre-line;
  word-break: break-all;
}
.pp-copy-btn {
  flex-shrink: 0;
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 99px;
  border: 1px solid rgba(154, 223, 180, 0.30);
  background: rgba(154, 223, 180, 0.08);
  color: #9adfb4;
  font-size: 0.84rem;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.pp-copy-btn:hover { background: rgba(154, 223, 180, 0.18); }
.pp-copy-btn.copied {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.30);
  color: #fff;
}

/* ── Tab 3: シェア ── */
.pp-share-lab {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(270px, 0.82fr);
  grid-template-areas:
    "post kit"
    "post visual";
  gap: 12px;
}
.pp-share-card {
  position: relative;
  min-width: 0;
  border: 1px solid rgba(217, 181, 102, 0.18);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 227, 160, 0.055), rgba(154, 223, 180, 0.035)),
    rgba(4, 12, 10, 0.56);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 12px 28px rgba(0, 0, 0, 0.16);
  overflow: hidden;
}
.pp-share-card--post { grid-area: post; }
.pp-share-card--kit { grid-area: kit; }
.pp-share-card--visual { grid-area: visual; }
.pp-share-card--tags { grid-area: tags; }
.pp-share-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid rgba(217, 181, 102, 0.11);
  background: rgba(255, 227, 160, 0.035);
}
.pp-share-card-head span {
  color: rgba(255, 227, 160, 0.84);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.pp-share-card-head strong {
  min-width: 0;
  overflow: hidden;
  color: rgba(235, 247, 230, 0.86);
  font-size: 0.8rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-share-post {
  min-height: 116px;
  padding: 14px 15px;
  color: rgba(235, 247, 230, 0.92);
  font-size: 0.94rem;
  line-height: 1.72;
  background:
    radial-gradient(circle at 100% 0%, rgba(217, 181, 102, 0.09), transparent 34%),
    rgba(0, 0, 0, 0.18);
}
.pp-share-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 32px;
  padding: 10px 170px 0 12px;
}
.pp-share-preset,
.pp-share-reset {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(154, 223, 180, 0.18);
  border-radius: 999px;
  background: rgba(154, 223, 180, 0.07);
  color: rgba(226, 247, 235, 0.78);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  transition: 0.16s ease;
}
.pp-share-preset:hover,
.pp-share-reset:hover,
.pp-share-preset.is-active {
  border-color: rgba(217, 181, 102, 0.42);
  background: rgba(217, 181, 102, 0.13);
  color: #ffe9b0;
}
.pp-share-editor {
  display: block;
  width: calc(100% - 24px);
  min-height: 112px;
  margin: 8px 12px 0;
  padding: 11px 13px;
  border: 1px solid rgba(217, 181, 102, 0.20);
  border-radius: 9px;
  background:
    radial-gradient(circle at 100% 0%, rgba(217, 181, 102, 0.09), transparent 34%),
    rgba(0, 0, 0, 0.24);
  color: rgba(235, 247, 230, 0.94);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.9rem;
  line-height: 1.54;
  resize: vertical;
}
.pp-share-editor:focus {
  outline: none;
  border-color: rgba(255, 227, 160, 0.48);
  box-shadow: 0 0 0 2px rgba(217, 181, 102, 0.10);
}
.pp-share-editor-meta {
  position: absolute;
  top: 52px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0;
  color: rgba(205, 226, 199, 0.54);
  font-size: 0.68rem;
}
.pp-share-editor-meta span::after {
  content: ' chars';
  color: rgba(205, 226, 199, 0.36);
}
.pp-share-primary-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  padding: 8px 12px 9px;
}
.pp-share-social-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 0 12px 10px;
}
.pp-share-social {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  padding: 7px 9px;
  border: 1px solid rgba(154, 223, 180, 0.22);
  border-radius: 8px;
  background: rgba(154, 223, 180, 0.08);
  color: rgba(226, 247, 235, 0.88);
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  transition: 0.16s ease;
}
.pp-share-social strong,
.pp-share-social span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-share-social strong {
  color: rgba(184, 240, 197, 0.92);
  font-size: 0.82rem;
  font-weight: 850;
}
.pp-share-social span {
  margin-top: 2px;
  color: rgba(205, 226, 199, 0.58);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
}
.pp-share-social:hover {
  border-color: rgba(255, 227, 160, 0.46);
  background: rgba(217, 181, 102, 0.12);
  color: #ffe9b0;
  transform: translateY(-1px);
}
.pp-share-big,
.pp-share-action,
.pp-share-image,
.pp-share-tag {
  position: relative;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
}
.pp-share-big {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 48px;
  padding: 8px 13px;
  border: 1px solid rgba(154, 223, 180, 0.24);
  border-radius: 9px;
  background: rgba(154, 223, 180, 0.08);
  color: rgba(226, 247, 235, 0.90);
  text-align: left;
  transition: 0.16s ease;
}
.pp-share-big--primary {
  border-color: rgba(217, 181, 102, 0.44);
  background:
    linear-gradient(135deg, rgba(217, 181, 102, 0.20), rgba(154, 223, 180, 0.08)),
    rgba(9, 20, 16, 0.74);
  color: #fff0bd;
}
.pp-share-big span {
  display: block;
  width: 100%;
  padding-right: 52px;
  overflow: hidden;
  font-size: 0.98rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-share-big em {
  display: block;
  width: 100%;
  padding-right: 52px;
  margin-top: 2px;
  overflow: hidden;
  color: rgba(205, 226, 199, 0.62);
  font-size: 0.68rem;
  font-style: normal;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-share-big:hover,
.pp-share-action:hover,
.pp-share-image:hover,
.pp-share-tag:hover {
  border-color: rgba(255, 227, 160, 0.48);
  background-color: rgba(217, 181, 102, 0.12);
  color: #ffe9b0;
  transform: translateY(-1px);
}
.pp-share-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
}
.pp-share-kit-group {
  padding: 12px 12px 0;
}
.pp-share-kit-group + .pp-share-kit-group {
  padding-top: 10px;
  margin-top: 2px;
  border-top: 1px dashed rgba(217, 181, 102, 0.13);
}
.pp-share-kit-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 227, 160, 0.72);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.12em;
}
.pp-share-kit-label::before {
  content: 'COPY';
  min-width: 42px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(217, 181, 102, 0.14);
  color: rgba(255, 227, 160, 0.84);
  font-size: 0.54rem;
  letter-spacing: 0.10em;
  text-align: center;
}
.pp-share-kit-label--open {
  color: rgba(184, 240, 197, 0.72);
}
.pp-share-kit-label--open::before {
  content: 'OPEN';
  background: rgba(154, 223, 180, 0.12);
  color: rgba(184, 240, 197, 0.84);
}
.pp-share-kit-label--compose::before {
  content: 'SET';
  background: rgba(130, 176, 255, 0.12);
  color: rgba(190, 212, 255, 0.86);
}
.pp-share-kit-group .pp-share-actions {
  padding: 8px 0 0;
}
.pp-share-actions--open {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pp-share-compose-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-top: 8px;
}
.pp-share-compose-option {
  min-height: 52px;
  padding: 8px 10px;
  border: 1px solid rgba(130, 176, 255, 0.18);
  border-radius: 8px;
  background: rgba(130, 176, 255, 0.06);
  color: rgba(226, 247, 235, 0.86);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: 0.16s ease;
}
.pp-share-compose-option strong,
.pp-share-compose-option span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-share-compose-option strong {
  color: rgba(214, 226, 255, 0.92);
  font-size: 0.84rem;
  font-weight: 850;
}
.pp-share-compose-option span {
  margin-top: 2px;
  color: rgba(205, 226, 199, 0.58);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
}
.pp-share-compose-option:hover,
.pp-share-compose-option.is-active {
  border-color: rgba(190, 212, 255, 0.44);
  background: rgba(130, 176, 255, 0.14);
  color: #e9f0ff;
  transform: translateY(-1px);
}
.pp-share-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 52px;
  padding: 8px 10px;
  border: 1px solid rgba(154, 223, 180, 0.18);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.20);
  color: rgba(226, 247, 235, 0.86);
  text-align: left;
  transition: 0.16s ease;
}
.pp-share-action strong {
  display: block;
  width: 100%;
  padding-right: 48px;
  overflow: hidden;
  color: rgba(255, 227, 160, 0.88);
  font-size: 0.84rem;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-share-action span {
  display: block;
  width: 100%;
  padding-right: 48px;
  margin-top: 2px;
  overflow: hidden;
  color: rgba(205, 226, 199, 0.58);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-share-big::before,
.pp-share-action::before {
  content: attr(data-mode);
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 40px;
  padding: 2px 6px;
  border: 1px solid rgba(154, 223, 180, 0.18);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  color: rgba(205, 226, 199, 0.62);
  font-size: 0.54rem;
  font-weight: 850;
  letter-spacing: 0.10em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
}
.pp-share-big[data-mode="copy"]::before,
.pp-share-action[data-mode="copy"]::before {
  border-color: rgba(217, 181, 102, 0.26);
  color: rgba(255, 227, 160, 0.76);
}
.pp-share-big[data-mode="open"]::before,
.pp-share-action[data-mode="open"]::before {
  border-color: rgba(154, 223, 180, 0.25);
  color: rgba(184, 240, 197, 0.74);
}
.pp-share-images {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}
.pp-share-image {
  min-width: 0;
  padding: 0;
  border: 1px solid rgba(154, 223, 180, 0.18);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.18);
  color: rgba(235, 247, 230, 0.82);
  overflow: hidden;
  transition: 0.16s ease;
}
.pp-share-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.pp-share-image span {
  display: block;
  overflow: hidden;
  padding: 6px 8px;
  font-size: 0.68rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-share-image.is-active {
  border-color: rgba(217, 181, 102, 0.42);
  box-shadow: 0 0 0 1px rgba(255, 227, 160, 0.08);
}
.pp-share-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-height: 124px;
  padding: 10px;
  overflow: auto;
}
.pp-share-tag {
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid rgba(154, 223, 180, 0.20);
  border-radius: 999px;
  background: rgba(154, 223, 180, 0.07);
  color: rgba(226, 247, 235, 0.82);
  font-size: 0.78rem;
  font-weight: 750;
  transition: 0.16s ease;
}
.pp-share-big.is-copied::after,
.pp-share-action.is-copied::after,
.pp-share-image.is-copied::after,
.pp-share-tag.is-copied::after {
  content: attr(data-copied-label);
  position: absolute;
  right: 8px;
  top: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(154, 223, 180, 0.22);
  color: #b8f0c5;
  font-size: 0.62rem;
  font-weight: 800;
  pointer-events: none;
}

/* ── 波形表示 ── */
.pp-waveform-wrap {
  position: relative;
  width: 100%;
  height: 80px;
  margin-bottom: 14px;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 227, 160, 0.045) 0%, rgba(6, 14, 10, 0.84) 100%),
    rgba(2, 8, 7, 0.38);
  border: 1px solid rgba(217, 181, 102, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 227, 160, 0.06),
    0 2px 12px rgba(0, 0, 0, 0.3);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.pp-waveform-wrap:hover {
  border-color: rgba(255, 227, 160, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 227, 160, 0.08),
    0 4px 20px rgba(0, 0, 0, 0.4);
}
.pp-waveform-wrap:active {
  cursor: col-resize;
}
#pp-waveform {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* 時間ツールチップ */
.pp-waveform-tooltip {
  position: absolute;
  top: -28px;
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(12, 19, 15, 0.94);
  border: 1px solid rgba(217, 181, 102, 0.34);
  color: rgba(255, 227, 160, 0.94);
  font-family: 'Cinzel', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  white-space: nowrap;
  z-index: 5;
}

@media (max-width: 768px) {
  .player-panel { bottom: 90px; }
  .pp-waveform-wrap { height: 48px; }
  .pp-waveform-tooltip { display: none; }
}

/* 波形操作ヒント */
.pp-waveform-hint {
  font-size: 0.8rem;
  color: rgba(205, 226, 199, 0.58);
  text-align: center;
  margin: 4px 0 10px;
  letter-spacing: 0.03em;
  line-height: 1.5;
}

/* ===== 範囲コントロールパネル (範囲アクティブ時表示) ===== */
.pp-range-controls {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(220px, 1.1fr) minmax(150px, 0.8fr);
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 0.8rem;
  padding: 0.6rem 0.8rem;
  background: rgba(220, 190, 100, 0.06);
  border: 1px solid rgba(220, 190, 100, 0.32);
  border-radius: 6px;
  animation: pp-range-fade-in 0.25s ease;
}
.pp-range-controls[hidden] { display: none; }
.pp-range-info,
.pp-range-buttons {
  grid-column: 2;
}
.pp-range-fade-side {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  min-width: 0;
  flex-wrap: wrap;
}
.pp-range-fade-side--in {
  grid-column: 1;
  grid-row: 1 / span 2;
}
.pp-range-fade-side--out {
  grid-column: 3;
  grid-row: 1 / span 2;
}
.pp-range-fade-side span {
  width: 100%;
  color: rgba(220, 200, 150, 0.76);
  font-size: 0.7rem;
  font-weight: 800;
  text-align: center;
}
.pp-range-fade-side button {
  min-height: 25px;
  padding: 0.2rem 0.45rem;
  border: 1px solid rgba(220, 190, 100, 0.3);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.24);
  color: rgba(230, 220, 170, 0.82);
  font-size: 0.72rem;
  cursor: pointer;
}
.pp-range-fade-side button:hover,
.pp-range-fade-side button.is-active {
  border-color: rgba(255, 230, 160, 0.72);
  background: rgba(220, 190, 100, 0.18);
  color: rgba(255, 245, 200, 1);
}
@keyframes pp-range-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.pp-range-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
  font-size: 0.92rem;
  color: rgba(255, 220, 140, 0.95);
  letter-spacing: 0.02em;
}
.pp-range-time {
  background: rgba(0,0,0,0.35);
  padding: 0.2rem 0.55rem;
  border-radius: 3px;
  border: 1px solid rgba(220, 190, 100, 0.25);
}
.pp-range-arrow {
  color: rgba(220, 190, 100, 0.55);
  font-size: 0.95rem;
}
.pp-range-duration {
  color: rgba(220, 190, 100, 0.7);
  font-size: 0.82rem;
}
.pp-range-buttons {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}
.pp-range-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0.4rem 0.95rem;
  border: 1px solid rgba(220, 190, 100, 0.4);
  background: rgba(0, 0, 0, 0.28);
  color: rgba(255, 230, 160, 0.92);
  font-family: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.18s ease;
  border-radius: 4px;
}
.pp-range-btn:hover, .pp-range-btn:focus-visible {
  background: rgba(220, 190, 100, 0.16);
  border-color: rgba(255, 230, 160, 0.85);
  color: rgba(255, 245, 200, 1);
  outline: none;
  box-shadow: 0 0 12px rgba(220, 190, 100, 0.25);
}
.pp-range-btn--primary {
  background: rgba(220, 190, 100, 0.22);
  font-weight: 500;
}
.pp-range-btn--primary:hover, .pp-range-btn--primary:focus-visible {
  background: rgba(220, 190, 100, 0.34);
  box-shadow: 0 0 16px rgba(220, 190, 100, 0.4);
}
@media (max-width: 480px) {
  .pp-range-info { font-size: 0.82rem; gap: 0.35rem; flex-wrap: wrap; }
  .pp-range-btn { font-size: 0.76rem; padding: 0.35rem 0.7rem; }
}

/* ハイコントラスト対応 */
@media (prefers-contrast: more) {
  .pp-range-controls { border-color: rgba(255, 220, 140, 0.7); }
  .pp-range-btn { border-color: rgba(255, 230, 160, 0.85); }
}

/* ===== ループ制作機能 (Phase 1 + 2) ===== */
.pp-range-btn--loop {
  background: rgba(140, 200, 240, 0.18);
  border-color: rgba(160, 220, 250, 0.55);
  color: rgba(200, 235, 255, 0.98);
  font-weight: 500;
}
.pp-range-btn--loop:hover {
  background: rgba(140, 200, 240, 0.30);
  box-shadow: 0 0 14px rgba(140, 200, 240, 0.35);
}
.pp-range-btn.is-active {
  background: rgba(220, 190, 100, 0.30);
  color: rgba(255, 250, 220, 1);
}

/* オプション行（ゼロクロス・クロスフェード・タイプ・BPM） */
.pp-loop-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem 0.85rem;
  padding: 0.45rem 0.5rem 0.3rem;
  margin-top: 0.4rem;
  border-top: 1px solid rgba(220, 190, 100, 0.18);
  font-size: 0.78rem;
}
.pp-loop-opt {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: rgba(220, 200, 150, 0.78);
}
.pp-loop-opt input[type="checkbox"] {
  margin: 0;
  accent-color: rgba(140, 200, 240, 0.85);
}
.pp-loop-opt select, .pp-loop-opt input[type="number"] {
  padding: 0.18rem 0.4rem;
  border: 1px solid rgba(220, 190, 100, 0.32);
  background: rgba(0,0,0,0.4);
  color: rgba(255, 230, 160, 0.95);
  font-size: 0.78rem;
  border-radius: 3px;
}

/* 小節吸着プリセット */
.pp-loop-bars {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.5rem 0.4rem;
  font-size: 0.76rem;
}
.pp-loop-bars__label {
  color: rgba(220, 190, 100, 0.75);
  margin-right: 0.3rem;
}
.pp-loop-bars-btn {
  min-width: 30px;
  padding: 0.18rem 0.5rem;
  border: 1px solid rgba(220, 190, 100, 0.32);
  background: rgba(0,0,0,0.3);
  color: rgba(255, 230, 160, 0.85);
  font-size: 0.76rem;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.15s;
}
.pp-loop-bars-btn:hover {
  background: rgba(220, 190, 100, 0.18);
  border-color: rgba(255, 230, 160, 0.7);
  color: rgba(255, 245, 200, 1);
}
.pp-loop-bars__hint {
  color: rgba(180, 160, 110, 0.5);
  font-size: 0.7rem;
  margin-left: 0.3rem;
}

/* シームレス度スコア表示 */
.pp-seamless-display {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.8rem;
  margin-top: 0.4rem;
  background: rgba(0,0,0,0.25);
  border-radius: 3px;
  font-size: 0.76rem;
}
.pp-seamless-label {
  color: rgba(220, 200, 150, 0.78);
  white-space: nowrap;
}
.pp-seamless-bar {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.pp-seamless-fill {
  height: 100%;
  width: 0%;
  background: rgba(220, 190, 100, 0.6);
  transition: width 0.2s ease, background 0.2s ease;
}
.pp-seamless-score {
  font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
  color: rgba(255, 230, 160, 0.95);
  min-width: 56px;
  text-align: right;
  font-size: 0.78rem;
}

/* 繋ぎ目拡大表示 */
.pp-seam-zoom-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
}
.pp-seam-zoom__label {
  color: rgba(220, 200, 150, 0.78);
  font-size: 0.74rem;
  white-space: nowrap;
}
.pp-seam-zoom-canvas {
  flex: 1;
  width: 100%;
  height: 60px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(220, 190, 100, 0.18);
  border-radius: 3px;
}

/* Intro / Loop / Outro マーカーボタン */
.pp-loop-regions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  padding: 0.4rem 0.5rem;
  margin-top: 0.4rem;
  border-top: 1px solid rgba(220, 190, 100, 0.18);
  font-size: 0.78rem;
}
.pp-loop-regions__label {
  color: rgba(220, 200, 150, 0.78);
  margin-right: 0.3rem;
}
.pp-loop-region-btn {
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(220, 190, 100, 0.32);
  background: rgba(0,0,0,0.3);
  color: rgba(255, 230, 160, 0.85);
  font-size: 0.78rem;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.15s;
}
.pp-loop-region-btn:hover {
  background: rgba(220, 190, 100, 0.16);
  color: rgba(255, 245, 200, 1);
}
.pp-loop-region-btn--intro.is-set {
  border-color: rgba(140, 200, 240, 0.85);
  background: rgba(120, 180, 230, 0.20);
  color: rgba(200, 235, 255, 1);
}
.pp-loop-region-btn--loop.is-set {
  border-color: rgba(255, 220, 130, 0.85);
  background: rgba(220, 190, 100, 0.30);
  color: rgba(255, 245, 200, 1);
}
.pp-loop-region-btn--outro.is-set {
  border-color: rgba(255, 160, 140, 0.85);
  background: rgba(230, 130, 130, 0.20);
  color: rgba(255, 220, 200, 1);
}
.pp-loop-region-btn--zip {
  background: rgba(120, 180, 230, 0.20);
  border-color: rgba(140, 200, 240, 0.55);
  color: rgba(200, 235, 255, 0.98);
  margin-left: auto;
}
.pp-loop-region-btn--zip:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
.pp-loop-region-btn--auto {
  background: rgba(180, 140, 220, 0.18);
  border-color: rgba(200, 160, 240, 0.55);
  color: rgba(220, 190, 250, 0.95);
}
.pp-loop-region-btn--auto:hover {
  background: rgba(200, 160, 240, 0.30);
  box-shadow: 0 0 14px rgba(200, 160, 240, 0.35);
}

/* 自動ループ点検出 候補表示 */
.pp-auto-loop {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  padding: 0.4rem 0.5rem;
  margin-top: 0.4rem;
  font-size: 0.76rem;
}
.pp-auto-loop__hint {
  color: rgba(180, 160, 110, 0.55);
  font-size: 0.72rem;
  display: inline-flex; gap: 0.35rem; flex-wrap: wrap;
}
.pp-auto-loop-candidate {
  padding: 0.18rem 0.55rem;
  border: 1px solid rgba(200, 160, 240, 0.45);
  background: rgba(180, 140, 220, 0.16);
  color: rgba(220, 190, 250, 0.95);
  font-size: 0.72rem;
  cursor: pointer;
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
}
.pp-auto-loop-candidate:hover {
  background: rgba(200, 160, 240, 0.28);
  border-color: rgba(220, 180, 250, 0.85);
}

/* ============================================================
   尺で試聴タブ: 機能グルーピング + 2 列レイアウト
   ============================================================
   設計思想:
   - 上段: 波形 + 範囲コントロール（タイムコード/操作ボタン）= 全幅の主役
   - 中段: 左 = 解析・視覚化（シームレス度 + 繋ぎ目拡大）
           右 = 編集オプション（ゼロクロス・クロスフェード・タイプ・BPM・小節）
   - 下段: 構造マーカー(Intro/Loop/Outro + ZIP) と 自動検出 = 全幅
   - 最下段: 既存の尺プリセット + フェード + 速度 = 折りたたみ
   ============================================================ */

/* 範囲コントロール全体を CSS Grid 化 */
.pp-range-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 0.7rem;
  padding: 0.7rem 0.85rem;
  margin: 0.5rem 0 0.6rem;
  background: rgba(220, 190, 100, 0.05);
  border: 1px solid rgba(220, 190, 100, 0.30);
  border-radius: 6px;
}

/* 全幅セクション */
.pp-range-info,
.pp-range-buttons,
.pp-loop-regions,
.pp-auto-loop {
  grid-column: 1 / -1;
}

/* 左列・右列の振り分け */
.pp-seamless-display { grid-column: 1; align-self: start; }
.pp-seam-zoom-wrap   { grid-column: 2; align-self: start; }
.pp-loop-options     { grid-column: 1; align-self: start; }
.pp-loop-bars        { grid-column: 2; align-self: start; }

/* 余白のリセット（grid gap 統一のため） */
.pp-range-controls > * { margin: 0 !important; }

/* 細部の整え */
.pp-range-info { gap: 0.5rem; font-size: 0.92rem; justify-content: center; flex-wrap: wrap; }
.pp-range-time { padding: 0.18rem 0.5rem; }
.pp-range-buttons { gap: 0.4rem; }
.pp-range-btn {
  min-height: 34px;
  padding: 0.32rem 0.85rem;
  font-size: 0.8rem;
}
.pp-loop-options {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid rgba(220, 190, 100, 0.18);
  border-radius: 4px;
  background: rgba(0,0,0,0.18);
}
.pp-loop-options::before {
  content: '⚙️ 編集オプション';
  font-family: 'Cinzel', serif;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: rgba(220, 190, 100, 0.7);
  text-transform: uppercase;
  display: block;
  padding-bottom: 0.2rem;
  border-bottom: 1px dashed rgba(220, 190, 100, 0.18);
}
.pp-loop-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  font-size: 0.76rem;
}
.pp-loop-bars {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid rgba(220, 190, 100, 0.18);
  border-radius: 4px;
  background: rgba(0,0,0,0.18);
  position: relative;
  padding-top: 1.4rem;
}
.pp-loop-bars::before {
  content: '🎼 小節吸着 (要BPM)';
  font-family: 'Cinzel', serif;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: rgba(220, 190, 100, 0.7);
  text-transform: uppercase;
  position: absolute;
  top: 0.4rem;
  left: 0.6rem;
}
.pp-loop-bars__label { display: none; }
.pp-loop-bars__hint { display: none; }

.pp-seamless-display {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(220, 190, 100, 0.18);
  border-radius: 4px;
  font-size: 0.78rem;
}
.pp-seamless-bar { height: 8px; flex: 1; }
.pp-seamless-score { font-size: 0.8rem; min-width: 56px; }

.pp-seam-zoom-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.45rem 0.6rem;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(220, 190, 100, 0.18);
  border-radius: 4px;
}
.pp-seam-zoom__label {
  font-family: 'Cinzel', serif;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: rgba(220, 190, 100, 0.7);
  text-transform: uppercase;
}
.pp-seam-zoom-canvas { height: 50px; }

.pp-loop-regions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(220, 190, 100, 0.18);
  border-radius: 4px;
  background: rgba(0,0,0,0.18);
  border-top: 1px solid rgba(220, 190, 100, 0.18);
  font-size: 0.78rem;
}
.pp-loop-regions__label {
  font-family: 'Cinzel', serif;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: rgba(220, 190, 100, 0.78);
  text-transform: uppercase;
  margin-right: 0.3rem;
}

.pp-auto-loop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(220, 190, 100, 0.18);
  border-radius: 4px;
  background: rgba(0,0,0,0.18);
  font-size: 0.76rem;
}

/* スマートフォン: 1列レイアウトに自動切替 */
@media (max-width: 720px) {
  .pp-range-controls {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  .pp-seamless-display, .pp-seam-zoom-wrap,
  .pp-loop-options, .pp-loop-bars { grid-column: 1; }
}

/* 既存の尺プリセット・フェード・速度行は <details> で折りたたみ可能に
   （HTML を変えずに CSS のみで「Advanced 設定」っぽい雰囲気を出す） */
.pp-duration-presets,
.pp-fade-row,
.pp-speed-row,
.pp-controls-grid {
  border-top: 1px dashed rgba(220, 190, 100, 0.18);
  padding-top: 0.4rem;
  margin-top: 0.4rem;
}
.pp-duration-presets { border-top-color: rgba(220, 190, 100, 0.32); }

/* 細部の調整 */
.pp-waveform-hint {
  font-size: 0.8rem;
  margin: 7px 0 10px;
  color: rgba(205, 226, 199, 0.62);
}
.pp-duration-desc {
  font-size: 0.86rem;
  color: rgba(205, 226, 199, 0.60);
  margin: 0.3rem 0;
}
.pp-duration-status { font-size: 0.74rem; margin-top: 0.3rem; }

/* ── Tab 4: 尺で試聴 ── */
.pp-duration-desc {
  font-size: 0.86rem;
  color: rgba(205, 226, 199, 0.62);
  margin-bottom: 14px;
  line-height: 1.6;
}

/* 尺プリセット行 */
.pp-duration-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(217, 181, 102, 0.10);
}
.pp-duration-btn {
  min-height: 36px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid rgba(217, 181, 102, 0.20);
  background: rgba(255, 227, 160, 0.055);
  color: rgba(235, 247, 230, 0.86);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: all 0.15s;
}
.pp-duration-btn:hover {
  background: rgba(255, 227, 160, 0.12);
  border-color: rgba(255, 227, 160, 0.45);
  color: #ffe9b0;
}
.pp-duration-btn.is-active {
  background: linear-gradient(135deg, rgba(217, 181, 102, 0.24), rgba(80, 145, 118, 0.20));
  border-color: rgba(255, 227, 160, 0.58);
  color: #ffe9b0;
  box-shadow: 0 0 14px rgba(217, 181, 102, 0.18);
}
.pp-duration-btn--full {
  border-color: rgba(180, 150, 80, 0.22);
  color: rgba(220, 200, 150, 0.75);
}
.pp-duration-btn--full:hover {
  border-color: rgba(200, 170, 80, 0.45);
  color: rgba(240, 220, 160, 0.95);
}
.pp-climax-btn {
  padding: 6px 16px;
  border-radius: 6px;
  border: 1px solid rgba(200, 140, 180, 0.25);
  color: rgba(220, 160, 200, 0.75);
  background: rgba(200, 140, 180, 0.06);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.15s;
}
.pp-climax-btn:hover {
  border-color: rgba(220, 160, 200, 0.50);
  color: rgba(240, 180, 220, 0.95);
  background: rgba(200, 140, 180, 0.15);
}
.pp-duration-status {
  font-size: 0.72rem;
  color: rgba(154, 223, 180, 0.60);
  min-height: 1.2em;
  margin-top: 6px;
}
/* コントロール2段 */
.pp-controls-grid {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 4px;
}

/* フェード設定 */
.pp-fade-row {
  display: flex;
  align-items: center;
  gap: 5px;
}
.pp-fade-btn {
  padding: 4px 11px;
  border-radius: 6px;
  border: 1px solid rgba(180, 150, 80, 0.15);
  background: rgba(180, 150, 80, 0.04);
  color: rgba(220, 200, 150, 0.55);
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.15s;
}
.pp-fade-btn:hover {
  border-color: rgba(200, 170, 80, 0.35);
  color: rgba(220, 200, 150, 0.90);
}
.pp-fade-btn.is-active {
  background: rgba(200, 170, 80, 0.18);
  border-color: rgba(220, 190, 90, 0.50);
  color: rgba(240, 220, 140, 0.95);
}
/* フェードイン用ボタン（フェードアウトと同スタイル） */
.pp-fadein-btn {
  padding: 4px 11px;
  border-radius: 6px;
  border: 1px solid rgba(110, 170, 220, 0.18);
  background: rgba(110, 170, 220, 0.05);
  color: rgba(180, 215, 240, 0.6);
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.15s;
}
.pp-fadein-btn:hover {
  border-color: rgba(140, 200, 240, 0.4);
  color: rgba(200, 230, 250, 0.95);
}
.pp-fadein-btn.is-active {
  background: rgba(140, 200, 240, 0.18);
  border-color: rgba(160, 220, 250, 0.55);
  color: rgba(200, 235, 255, 0.98);
}

/* 再生速度 */
.pp-speed-row {
  display: flex;
  align-items: center;
  gap: 5px;
}
.pp-speed-label {
  font-size: 0.7rem;
  color: rgba(180, 220, 195, 0.62);
  margin-right: 2px;
  white-space: nowrap;
  font-weight: 500;
}
.pp-speed-btn {
  padding: 4px 11px;
  border-radius: 6px;
  border: 1px solid rgba(100, 180, 130, 0.15);
  background: rgba(100, 180, 130, 0.04);
  color: rgba(200, 230, 215, 0.60);
  font-family: 'Cinzel', monospace;
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.15s;
}
.pp-speed-btn:hover {
  border-color: rgba(100, 200, 140, 0.35);
  color: rgba(200, 230, 215, 0.90);
}
.pp-speed-btn.is-active {
  background: rgba(100, 180, 130, 0.20);
  border-color: rgba(126, 203, 149, 0.50);
  color: #9adfb4;
}

.pp-duration-loop {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: rgba(180, 220, 195, 0.60);
  cursor: pointer;
}
.pp-duration-loop input[type="checkbox"] {
  accent-color: #5aaa72;
}

/* ── メモタブ ── */
.pp-memo-toolbar {
  display: flex;
  gap: 7px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.pp-memo-btn {
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(100, 180, 130, 0.18);
  background: rgba(100, 180, 130, 0.05);
  color: rgba(226, 247, 235, 0.82);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
}
.pp-memo-btn:hover {
  border-color: rgba(100, 200, 140, 0.40);
  color: #9adfb4;
  background: rgba(100, 180, 130, 0.12);
}
.pp-memo-btn--eq {
  color: rgba(255, 227, 160, 0.82);
  border-color: rgba(217, 181, 102, 0.28);
  background: rgba(217, 181, 102, 0.07);
}
.pp-memo-btn--eq:hover {
  color: #ffe3a0;
  border-color: rgba(217, 181, 102, 0.55);
  background: rgba(217, 181, 102, 0.14);
}
.pp-memo-btn--log {
  color: rgba(255, 227, 160, 0.86);
  border-color: rgba(217, 181, 102, 0.30);
  background:
    linear-gradient(180deg, rgba(255, 227, 160, 0.06), rgba(0, 0, 0, 0.02)),
    rgba(217, 181, 102, 0.08);
}
.pp-memo-btn--log:hover {
  color: #fff0bd;
  border-color: rgba(217, 181, 102, 0.58);
  background: rgba(217, 181, 102, 0.16);
  box-shadow: 0 0 0 1px rgba(255, 227, 160, 0.05), 0 8px 18px rgba(0, 0, 0, 0.18);
}
.pp-memo-btn--clear { color: rgba(220, 100, 100, 0.55); border-color: rgba(220, 100, 100, 0.15); }
.pp-memo-btn--clear:hover { color: rgba(240, 120, 120, 0.90); border-color: rgba(220, 100, 100, 0.35); background: rgba(220, 100, 100, 0.08); }
.pp-memo-spacer { flex: 1; }
.pp-memo-tag-input {
  width: 150px;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(200, 170, 80, 0.20);
  background: rgba(200, 170, 80, 0.05);
  color: rgba(240, 220, 160, 0.85);
  font-size: 0.82rem;
}
.pp-memo-tag-input::placeholder { color: rgba(200, 170, 80, 0.35); }
.pp-memo-tag-input:focus { outline: none; border-color: rgba(200, 170, 80, 0.45); }
.pp-memo-area {
  width: 100%;
  min-height: 210px;
  height: clamp(210px, 34vh, 320px);
  background:
    linear-gradient(180deg, rgba(255, 227, 160, 0.035), transparent 38%),
    rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(217, 181, 102, 0.18);
  border-radius: 10px;
  padding: 14px 15px;
  color: rgba(235, 247, 230, 0.94);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.96rem;
  line-height: 1.7;
  resize: vertical;
}
.pp-memo-area:focus {
  outline: none;
  border-color: rgba(100, 200, 140, 0.35);
}
.pp-memo-area::placeholder { color: rgba(180, 220, 195, 0.30); }
.pp-memo-footer {
  display: flex;
  gap: 7px;
  align-items: center;
  margin-top: 12px;
  flex-wrap: wrap;
}
.pp-memo-status {
  font-size: 0.82rem;
  color: rgba(154, 223, 180, 0.68);
  flex: 1;
}
/* メモ一覧 */
.pp-memo-list {
  margin-top: 8px;
  max-height: 150px;
  overflow-y: auto;
  border: 1px solid rgba(100, 180, 130, 0.10);
  border-radius: 6px;
}
.pp-memo-group-label {
  padding: 4px 10px;
  font-size: 0.65rem;
  color: rgba(200, 170, 80, 0.70);
  background: rgba(200, 170, 80, 0.06);
  border-bottom: 1px solid rgba(100, 180, 130, 0.06);
  letter-spacing: 0.06em;
}
.pp-memo-list-item {
  padding: 5px 10px;
  cursor: pointer;
  border-bottom: 1px solid rgba(100, 180, 130, 0.05);
  transition: background 0.1s;
}
.pp-memo-list-item:hover { background: rgba(100, 180, 130, 0.06); }
.pp-memo-list-title {
  font-size: 0.75rem;
  color: rgba(220, 245, 228, 0.85);
  margin-right: 8px;
}
.pp-memo-list-preview {
  font-size: 0.68rem;
  color: rgba(180, 220, 195, 0.40);
}

/* ── メモヘルプ ── */
.pp-memo-btn--help {
  width: 22px; height: 22px; padding: 0;
  border-radius: 50%;
  font-size: 0.72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  color: rgba(180, 220, 195, 0.50);
  border-color: rgba(180, 220, 195, 0.15);
}
.pp-memo-btn--help:hover { color: #9adfb4; }
.pp-memo-help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
}
.pp-memo-help-panel {
  background: rgba(12, 24, 18, 0.98);
  border: 1px solid rgba(100, 180, 130, 0.22);
  border-radius: 14px;
  max-width: 600px;
  width: 92%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.6);
}
.pp-memo-help-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(100, 180, 130, 0.10);
  font-size: 1rem;
  color: #9adfb4;
  font-weight: 600;
}
.pp-memo-help-close {
  background: none; border: none; color: rgba(255,255,255,0.4);
  font-size: 1.2rem; cursor: pointer; padding: 0 4px;
}
.pp-memo-help-close:hover { color: #fff; }
.pp-memo-help-body {
  padding: 20px 24px;
  font-size: 0.88rem;
  color: rgba(220, 245, 228, 0.85);
  line-height: 1.9;
}
.pp-memo-help-body h3 {
  font-size: 0.85rem;
  color: rgba(200, 170, 80, 0.85);
  margin: 14px 0 6px;
  letter-spacing: 0.06em;
}
.pp-memo-help-body p { margin: 0 0 8px; }
.pp-memo-help-intro {
  font-family: 'Noto Serif JP', serif;
  font-size: 0.92rem;
  color: rgba(200, 230, 215, 0.80);
  margin-bottom: 14px;
}
.pp-memo-help-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 8px;
}
.pp-memo-help-table td {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(100, 180, 130, 0.06);
  font-size: 0.85rem;
}
.pp-memo-help-table td:first-child { white-space: nowrap; color: #9adfb4; width: 90px; }
.pp-memo-help-body code {
  background: rgba(100, 180, 130, 0.10);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.72rem;
  color: rgba(154, 223, 180, 0.90);
}
.pp-memo-help-example {
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid rgba(100, 180, 130, 0.10);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 0.72rem;
  line-height: 1.7;
  color: rgba(200, 240, 215, 0.80);
  white-space: pre-line;
  margin: 8px 0;
}
.pp-memo-help-note {
  font-size: 0.68rem;
  color: rgba(180, 220, 195, 0.40);
  margin-top: 12px;
}

/* ── 未再生時のヒント ── */
.pp-empty-hint {
  text-align: center;
  color: rgba(180, 220, 195, 0.40);
  font-size: 0.82rem;
  padding: 24px 0;
  font-style: italic;
}

/* ── スクロールバー ── */
.player-panel__content::-webkit-scrollbar { width: 4px; }
.player-panel__content::-webkit-scrollbar-track { background: transparent; }
.player-panel__content::-webkit-scrollbar-thumb { background: rgba(100, 180, 130, 0.2); border-radius: 2px; }

/* ── レスポンシブ ── */
@media (max-width: 768px) {
  .player-panel {
    bottom: max(76px, calc(72px + env(safe-area-inset-bottom)));
  }
  .player-panel.is-open {
    max-height: min(560px, calc(100vh - 98px - env(safe-area-inset-bottom)));
  }
  .player-panel__inner {
    max-width: 100%;
    height: min(560px, calc(100vh - 98px - env(safe-area-inset-bottom)));
    min-height: 340px;
  }
  .player-panel__stage-head {
    grid-template-columns: auto 1fr;
    gap: 9px;
    padding: 12px 14px 8px;
  }
  .player-panel__stage-mark {
    grid-template-columns: repeat(3, 7px);
    gap: 4px;
    padding: 6px 7px;
  }
  .player-panel__stage-mark span {
    width: 7px;
    height: 7px;
  }
  .player-panel__stage-kicker { font-size: 0.58rem; }
  .player-panel__stage-title strong { font-size: 0.88rem; }
  .player-panel__stage-copy { display: none; }
  .player-panel__stage-status {
    grid-column: 1 / -1;
    justify-self: stretch;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .player-panel__stage-status::-webkit-scrollbar { display: none; }
  .pp-stage-pill {
    min-width: 74px;
    padding: 5px 8px;
  }
  .pp-stage-pill span { font-size: 0.56rem; }
  .pp-stage-pill strong,
  .pp-stage-pill em { font-size: 0.76rem; }
  .player-panel__tabs {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding: 10px 12px 9px;
  }
  .player-panel__tabs::-webkit-scrollbar { display: none; }
  .player-panel__tab { min-height: 38px; padding: 8px 11px; font-size: 0.78rem; }
  /* モバイルではパネル内のDL/詳細を非表示（プレイヤー本体にあるため） */
  .player-panel__action { display: none; }
  .player-panel__tabs-spacer { min-width: 4px; flex: 0; }
  .player-panel__content.is-active { min-height: 0; padding: 14px; }
  .pp-share-lab {
    grid-template-columns: 1fr;
    grid-template-areas:
      "post"
      "kit"
      "visual";
  }
  .pp-share-primary-row,
  .pp-share-actions { grid-template-columns: 1fr; }
  .pp-share-presets { padding-right: 12px; }
  .pp-share-editor-meta {
    position: static;
    width: 100%;
    justify-content: space-between;
    padding-top: 4px;
  }
  .pp-share-social-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-share-compose-options,
  .pp-share-actions--open { grid-template-columns: 1fr; }
  .pp-share-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-credit-body { flex-direction: column; }
  .pp-copy-btn { align-self: flex-end; }
  .pp-controls-grid { gap: 6px; flex-wrap: wrap; }
  .pp-duration-btn { padding: 7px 12px; font-size: 0.82rem; }
  .pp-fade-btn, .pp-speed-btn { padding: 6px 10px; font-size: 0.78rem; }
  /* メモのフッターを折り返し */
  .pp-memo-footer { flex-wrap: wrap; }
  .pp-memo-btn { font-size: 0.78rem; padding: 6px 10px; }
  .pp-memo-toolbar { gap: 5px; }
  .pp-memo-tag-input { width: 120px; font-size: 0.78rem; }
  .pp-memo-area { min-height: 160px; height: clamp(160px, 32vh, 240px); font-size: 0.9rem; }
}



/* ============================================================
   EQ・コンプ タブ (preset-first design)
   - プリセット中心。詳細パラメータは折りたたみ。
   - 動画制作者向けに直感的な日本語ラベル。
   ============================================================ */

#pp-tab-eqcomp.player-panel__content.is-active {
  display: block;
  padding: 20px 24px 22px;
}

.pp-eqcomp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.pp-eqcomp-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pp-eqcomp-title strong {
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  color: rgba(255, 243, 200, 0.9);
}
.pp-eqcomp-badge {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(217, 181, 102, 0.42);
  color: #d9b566;
  background: rgba(217, 181, 102, 0.10);
}
.pp-eqcomp-actions-top {
  display: flex;
  gap: 6px;
}
.pp-eqcomp-mini {
  border: 1px solid rgba(154, 223, 180, 0.26);
  background: rgba(154, 223, 180, 0.08);
  color: rgba(226, 247, 235, 0.86);
  border-radius: 999px;
  min-height: 34px;
  padding: 7px 13px;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: 0.15s ease;
  font-family: inherit;
}
.pp-eqcomp-mini:hover {
  border-color: rgba(154, 223, 180, 0.5);
  background: rgba(154, 223, 180, 0.14);
  transform: translateY(-1px);
}
.pp-eqcomp-mini.is-active {
  background: rgba(217, 181, 102, 0.22);
  border-color: rgba(217, 181, 102, 0.6);
  color: #ffe1a0;
}
.pp-eqcomp-mini.is-copied {
  background: rgba(154, 223, 180, 0.22);
  border-color: rgba(154, 223, 180, 0.6);
}

.pp-eqcomp-note {
  margin: 0 0 14px;
  font-size: 0.82rem;
  color: rgba(205, 226, 199, 0.7);
}

/* ── プリセット行 (音色 / 質感) ── */
.pp-eqcomp-preset-row {
  display: grid;
  grid-template-columns: 112px 1fr;
  align-items: start;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px dashed rgba(100, 180, 130, 0.14);
}
.pp-eqcomp-preset-row:first-of-type {
  border-top: none;
  padding-top: 4px;
}

.pp-eqcomp-preset-row-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  padding-top: 6px;
  border-right: 1px solid rgba(100, 180, 130, 0.12);
  background: rgba(217, 181, 102, 0.035);
  border-radius: 6px 0 0 6px;
  padding-right: 12px;
  min-height: 44px;
}
.pp-eqcomp-preset-row-label strong {
  font-size: 0.98rem;
  letter-spacing: 0.06em;
  color: #ffe3a0;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(217, 181, 102, 0.32);
}
.pp-eqcomp-preset-sub {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: rgba(180, 220, 195, 0.7);
  text-transform: uppercase;
}

.pp-eqcomp-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pp-eqcomp-chip {
  border: 1px solid rgba(154, 223, 180, 0.22);
  background: rgba(154, 223, 180, 0.06);
  color: rgba(226, 247, 235, 0.82);
  border-radius: 999px;
  min-height: 36px;
  padding: 8px 15px;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: 0.15s ease;
  font-family: inherit;
  white-space: nowrap;
}
.pp-eqcomp-chip:hover {
  border-color: rgba(154, 223, 180, 0.5);
  background: rgba(154, 223, 180, 0.16);
  transform: translateY(-1px);
}
.pp-eqcomp-chip.is-active {
  background: linear-gradient(135deg, rgba(154, 223, 180, 0.32), rgba(217, 181, 102, 0.22));
  border-color: rgba(154, 223, 180, 0.62);
  color: #ffe9b0;
  box-shadow: 0 0 14px rgba(217, 181, 102, 0.18);
}

/* ── メーター行 (縦バー、JSは style.height で制御) ── */
.pp-eqcomp-meter-row {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  margin-top: 14px;
  padding: 13px 16px;
  border: 1px solid rgba(217, 181, 102, 0.18);
  border-radius: 10px;
  background: rgba(8, 18, 12, 0.58);
}
.pp-eqcomp-meter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: rgba(180, 220, 195, 0.6);
}
.pp-eqcomp-meter-bar {
  position: relative;
  width: 9px;
  height: 48px;
  background: rgba(154, 223, 180, 0.08);
  border-radius: 3px;
  overflow: hidden;
}
.pp-eqcomp-meter-bar i {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0;
  background: linear-gradient(180deg, #d9b566, #9adfb4);
  transition: height 0.05s linear;
}
.pp-eqcomp-meter-bar--gr i {
  background: linear-gradient(180deg, #f0a45d, #e16f6f);
}
.pp-eqcomp-gr {
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  color: #e16f6f;
  align-self: center;
}
.pp-eqcomp-peak {
  display: grid;
  grid-template-columns: 86px 64px 38px;
  align-items: center;
  column-gap: 8px;
  margin-left: auto;
  padding: 9px 12px;
  border: 1px solid rgba(154, 223, 180, 0.18);
  border-radius: 7px;
  background: rgba(154, 223, 180, 0.055);
  color: rgba(226, 247, 235, 0.86);
  font-size: 0.84rem;
}
.pp-eqcomp-peak span {
  display: block;
  width: 86px;
  overflow: hidden;
  color: rgba(180, 220, 195, 0.78);
  letter-spacing: 0.04em;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-eqcomp-peak strong {
  display: block;
  width: 64px;
  overflow: hidden;
  color: #ffe3a0;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.pp-eqcomp-peak em {
  display: block;
  min-width: 38px;
  width: 38px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(154, 223, 180, 0.16);
  color: #9adfb4;
  font-style: normal;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
.pp-eqcomp-peak em.is-warn {
  background: rgba(217, 181, 102, 0.20);
  color: #ffe3a0;
}
.pp-eqcomp-peak em.is-clip {
  background: rgba(225, 111, 111, 0.22);
  color: #ff9b9b;
}

/* ── 詳細セクション (折りたたみ) ── */
.pp-eqcomp-details {
  margin-top: 14px;
  border: 1px solid rgba(100, 180, 130, 0.14);
  border-radius: 8px;
  background: rgba(8, 18, 12, 0.35);
  overflow: hidden;
}
.pp-eqcomp-details-summary {
  list-style: none;
  cursor: pointer;
  min-height: 40px;
  padding: 10px 14px;
  font-size: 0.84rem;
  letter-spacing: 0.05em;
  color: rgba(180, 220, 195, 0.66);
  background: rgba(8, 18, 12, 0.5);
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pp-eqcomp-details-summary::-webkit-details-marker { display: none; }
.pp-eqcomp-details-summary::before {
  content: '▶';
  font-size: 0.6rem;
  color: rgba(154, 223, 180, 0.5);
  transition: transform 0.2s ease;
  display: inline-block;
}
.pp-eqcomp-details[open] > .pp-eqcomp-details-summary::before {
  transform: rotate(90deg);
}
.pp-eqcomp-details-summary:hover {
  color: rgba(226, 247, 235, 0.85);
  background: rgba(8, 18, 12, 0.62);
}
.pp-eqcomp-details-body {
  padding: 14px;
  border-top: 1px solid rgba(100, 180, 130, 0.12);
}

.pp-eqcomp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 14px;
}

/* ── 詳細: EQ カーブ + バンドスライダー ── */
.pp-eqcomp-display {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.pp-eqcomp-canvas-wrap {
  position: relative;
  border: 1px solid rgba(100, 180, 130, 0.18);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(4, 10, 7, 0.7), rgba(8, 18, 12, 0.85));
  padding: 10px 10px 22px 30px;
  overflow: hidden;
}
.pp-eqcomp-canvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: 200px;
}
.pp-eqcomp-axis-x {
  position: absolute;
  left: 30px; right: 10px; bottom: 4px;
  display: flex; justify-content: space-between;
  font-size: 0.55rem; letter-spacing: 0.05em;
  color: rgba(180, 220, 195, 0.4);
  pointer-events: none;
}
.pp-eqcomp-axis-y {
  position: absolute;
  left: 4px; top: 10px; bottom: 22px;
  display: flex; flex-direction: column; justify-content: space-between;
  font-size: 0.55rem; letter-spacing: 0.05em;
  color: rgba(180, 220, 195, 0.4);
  pointer-events: none;
}

.pp-eqcomp-bands {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.pp-eqcomp-band {
  border: 1px solid rgba(100, 180, 130, 0.14);
  border-radius: 6px;
  background: rgba(8, 18, 12, 0.5);
  padding: 7px 8px 9px;
  display: flex; flex-direction: column; gap: 5px;
}
.pp-eqcomp-band-head {
  display: flex; flex-direction: column; gap: 1px;
  text-align: center;
  font-size: 0.6rem; letter-spacing: 0.05em;
}
.pp-eqcomp-band-name { color: rgba(180, 220, 195, 0.78); font-weight: 600; }
.pp-eqcomp-band-freq { color: rgba(180, 220, 195, 0.5); font-size: 0.55rem; }
.pp-eqcomp-band-val {
  color: #d9b566;
  font-variant-numeric: tabular-nums;
  font-size: 0.62rem;
  margin-top: 2px;
}
.pp-eqcomp-band-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 3px;
  background: rgba(154, 223, 180, 0.18);
  border-radius: 999px; outline: none;
}
.pp-eqcomp-band-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #ffe1a0;
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 8px rgba(217, 181, 102, 0.4);
  cursor: pointer;
}
.pp-eqcomp-band-slider::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #ffe1a0;
  border: 1px solid rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

/* ── 詳細: コンプノブ ── */
.pp-eqcomp-controls {
  display: flex; flex-direction: column; gap: 10px;
  min-width: 0;
}
.pp-eqcomp-section {
  border: 1px solid rgba(100, 180, 130, 0.16);
  border-radius: 8px;
  background: rgba(8, 18, 12, 0.5);
  padding: 9px 10px 10px;
}
.pp-eqcomp-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px;
  font-size: 0.68rem; letter-spacing: 0.04em;
  color: rgba(180, 220, 195, 0.78);
  margin-bottom: 8px; padding-bottom: 6px;
  border-bottom: 1px dashed rgba(100, 180, 130, 0.14);
}
.pp-eqcomp-comp {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
}
.pp-eqcomp-comp-row { display: flex; flex-direction: column; gap: 3px; }
.pp-eqcomp-comp-label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.6rem; letter-spacing: 0.05em;
  color: rgba(180, 220, 195, 0.66);
}
.pp-eqcomp-comp-val {
  color: #9adfb4;
  font-size: 0.6rem;
  font-variant-numeric: tabular-nums;
}
.pp-eqcomp-comp-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 3px;
  background: rgba(154, 223, 180, 0.18);
  border-radius: 999px; outline: none;
}
.pp-eqcomp-comp-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #9adfb4;
  border: 1px solid rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.pp-eqcomp-comp-slider::-moz-range-thumb {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #9adfb4;
  border: 1px solid rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.pp-eqcomp-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 6px;
}

/* ── モバイル対応 ── */
@media (max-width: 720px) {
  .pp-eqcomp-preset-row { grid-template-columns: 1fr; gap: 6px; }
  .pp-eqcomp-preset-row-label {
    border-right: 0;
    border-bottom: 1px solid rgba(100, 180, 130, 0.12);
    padding-right: 0; padding-bottom: 4px;
    min-height: auto;
  }
  .pp-eqcomp-chip { font-size: 0.8rem; padding: 7px 11px; }
  .pp-eqcomp-grid { grid-template-columns: 1fr; }
  .pp-eqcomp-bands { grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .pp-eqcomp-band { padding: 5px 4px 7px; }
  .pp-eqcomp-band-name { font-size: 0.62rem; }
  .pp-eqcomp-comp { grid-template-columns: 1fr; }
  .pp-eqcomp-meter-row { gap: 8px; padding: 8px; flex-wrap: wrap; }
  .pp-eqcomp-meter-bar { width: 50px; }
  .pp-eqcomp-peak {
    width: 100%;
    margin-left: 0;
    grid-template-columns: minmax(86px, 1fr) 64px 38px;
  }
}


/* ============================================================
   WAV書き出し行 (波形プレビュータブ・常時表示)
   ============================================================ */
.pp-wav-export-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 6px;
  padding: 10px 12px;
  border: 1px solid rgba(100, 180, 130, 0.18);
  border-radius: 8px;
  background: rgba(8, 18, 12, 0.45);
}
.pp-wav-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid rgba(154, 223, 180, 0.36);
  background: rgba(154, 223, 180, 0.10);
  color: rgba(226, 247, 235, 0.88);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: 0.15s ease;
}
.pp-wav-export-btn svg { flex-shrink: 0; opacity: 0.8; }
.pp-wav-export-btn:hover:not(:disabled) {
  border-color: rgba(154, 223, 180, 0.62);
  background: rgba(154, 223, 180, 0.18);
  color: #ffe9b0;
  transform: translateY(-1px);
}
.pp-wav-export-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  border-style: dashed;
}
.pp-wav-export-btn--range:not(:disabled) {
  border-color: rgba(217, 181, 102, 0.56);
  background: rgba(217, 181, 102, 0.12);
  color: #ffe1a0;
}

.pp-export-check {
  margin: 10px 0 10px;
  padding: 11px 12px 12px;
  border: 1px solid rgba(217, 181, 102, 0.20);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 227, 160, 0.075), rgba(154, 223, 180, 0.035)),
    rgba(5, 14, 11, 0.56);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 10px 24px rgba(0, 0, 0, 0.16);
}
.pp-export-check__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}
.pp-export-check__head span {
  color: rgba(255, 227, 160, 0.90);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.pp-export-check__head strong {
  min-width: 64px;
  padding: 3px 9px;
  border: 1px solid rgba(154, 223, 180, 0.34);
  border-radius: 999px;
  color: #b8f0c5;
  background: rgba(154, 223, 180, 0.11);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-align: center;
}
.pp-export-check__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.pp-export-check__grid div {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(154, 180, 150, 0.14);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.20);
}
.pp-export-check__grid span {
  display: block;
  margin-bottom: 3px;
  color: rgba(205, 226, 199, 0.58);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.10em;
}
.pp-export-check__grid strong {
  display: block;
  overflow: hidden;
  color: rgba(235, 247, 230, 0.92);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-export-check.is-warn {
  border-color: rgba(255, 227, 160, 0.38);
  background:
    linear-gradient(135deg, rgba(255, 227, 160, 0.10), rgba(154, 223, 180, 0.035)),
    rgba(5, 14, 11, 0.58);
}
.pp-export-check.is-warn .pp-export-check__head strong {
  border-color: rgba(217, 181, 102, 0.46);
  color: #ffe3a0;
  background: rgba(217, 181, 102, 0.16);
}
.pp-export-check.is-clip {
  border-color: rgba(255, 130, 130, 0.48);
  background:
    linear-gradient(135deg, rgba(225, 111, 111, 0.12), rgba(255, 227, 160, 0.04)),
    rgba(5, 14, 11, 0.58);
}
.pp-export-check.is-clip .pp-export-check__head strong {
  border-color: rgba(255, 130, 130, 0.52);
  color: #ffb8b8;
  background: rgba(225, 111, 111, 0.18);
}

/* ============================================================
   ループ制作 (折りたたみ)
   ============================================================ */
.pp-loop-advanced {
  margin: 10px 0 14px;
  border: 1px solid rgba(100, 180, 130, 0.16);
  border-radius: 8px;
  background: rgba(8, 18, 12, 0.35);
  overflow: hidden;
}
.pp-loop-advanced-summary {
  list-style: none;
  cursor: pointer;
  padding: 9px 14px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(180, 220, 195, 0.7);
  background: rgba(8, 18, 12, 0.5);
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pp-loop-advanced-summary::-webkit-details-marker { display: none; }
.pp-loop-advanced-summary::before {
  content: '▶';
  font-size: 0.6rem;
  color: rgba(154, 223, 180, 0.55);
  transition: transform 0.2s ease;
  display: inline-block;
}
.pp-loop-advanced[open] > .pp-loop-advanced-summary::before {
  transform: rotate(90deg);
}
.pp-loop-advanced-summary:hover {
  color: rgba(226, 247, 235, 0.9);
  background: rgba(8, 18, 12, 0.62);
}
.pp-loop-advanced-body {
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(100, 180, 130, 0.12);
}
.pp-loop-advanced-note {
  margin: 0 0 12px;
  font-size: 0.66rem;
  line-height: 1.6;
  color: rgba(180, 220, 195, 0.65);
}
.pp-loop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

/* range-controls の余白を新構造に合わせて控えめに */
.pp-range-controls:not([hidden]) {
  margin: 8px 0 4px;
  padding: 8px 10px;
  background: rgba(8, 18, 12, 0.35);
  border: 1px dashed rgba(217, 181, 102, 0.4);
  border-radius: 6px;
}

@media (max-width: 720px) {
  .pp-wav-export-row { gap: 6px; padding: 8px 10px; }
  .pp-wav-export-btn { font-size: 0.68rem; padding: 6px 11px; }
  .pp-export-check__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-export-check__grid strong { font-size: 0.74rem; }
  .pp-loop-advanced-body { padding: 10px; }
}


/* ============================================================
   ループ制作セクション: 弁当箱グリッド (bento layout)
   旧設計は .pp-range-controls 配下を前提にしていたが、
   新構造では .pp-loop-advanced-body の下にぶら下がるので、
   ここで上書きして 2 カラムの綺麗なグリッドに詰め直す。
   ============================================================ */

.pp-loop-advanced-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-auto-rows: min-content;
  gap: 8px;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(100, 180, 130, 0.12);
}

/* 全幅カード */
.pp-loop-advanced-note,
.pp-loop-actions,
.pp-loop-regions,
.pp-auto-loop {
  grid-column: 1 / -1;
}

/* 2カラム配置 */
.pp-loop-options     { grid-column: 1; }
.pp-loop-bars        { grid-column: 2; }
.pp-seamless-display { grid-column: 1; }
.pp-seam-zoom-wrap   { grid-column: 2; }    /* シームレス度の右隣に並べる */

/* 余白リセット (旧 grid CSS との競合解消) */
.pp-loop-advanced-body > * { margin: 0 !important; }

/* ── 説明文 ── */
.pp-loop-advanced-note {
  font-size: 0.66rem;
  line-height: 1.55;
  color: rgba(180, 220, 195, 0.6);
  margin: 0 0 2px !important;
}

/* ── アクション (繋ぎ目プレビュー / ループWAV) ── */
.pp-loop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pp-loop-actions .pp-range-btn {
  flex: 1 1 auto;
  min-height: 32px;
  padding: 6px 12px;
  font-size: 0.74rem;
}

/* ── カード共通スタイル (各機能ブロック) ── */
.pp-loop-options,
.pp-loop-bars,
.pp-seamless-display,
.pp-seam-zoom-wrap,
.pp-loop-regions,
.pp-auto-loop {
  border: 1px solid rgba(100, 180, 130, 0.18);
  border-radius: 6px;
  background: rgba(8, 18, 12, 0.45);
  padding: 8px 10px;
  margin: 0;
  position: relative;
}

/* カードの上に小ラベル(神殿風アイコン+カテゴリ) */
.pp-loop-options::before,
.pp-loop-bars::before,
.pp-seamless-display::before,
.pp-seam-zoom-wrap::before,
.pp-loop-regions::before,
.pp-auto-loop::before {
  font-family: 'Cinzel', 'Noto Serif JP', serif;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(217, 181, 102, 0.65);
  display: block;
  margin-bottom: 5px;
  border-bottom: 1px dashed rgba(100, 180, 130, 0.18);
  padding-bottom: 4px;
}

.pp-loop-options::before  { content: '⚙ オプション'; }
.pp-loop-bars::before     { content: '𝄫 小節吸着 (要 BPM)'; }
.pp-seamless-display::before { content: '◐ シームレス度'; }
.pp-seam-zoom-wrap::before  { content: '🔍 繋ぎ目拡大'; }
.pp-loop-regions::before  { content: '◆ 構造マーカー'; }
.pp-auto-loop::before     { content: '✦ 自動検出'; }

/* ── オプション (ゼロクロス・クロスフェード・種別・BPM) ── */
.pp-loop-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
  border-top: none !important;
  font-size: 0.7rem;
}
.pp-loop-options .pp-loop-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.7rem;
  color: rgba(220, 200, 150, 0.78);
}
.pp-loop-options .pp-loop-opt span:first-child:not(:only-child) {
  flex-shrink: 0;
}
.pp-loop-options select,
.pp-loop-options input[type="number"] {
  padding: 1px 4px;
  font-size: 0.68rem;
  max-width: 76px;
}

/* ── 小節吸着 ── */
.pp-loop-bars {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 8px 10px !important;
}
.pp-loop-bars__label,
.pp-loop-bars__hint { display: none; }
.pp-loop-bars-btn {
  min-width: 26px;
  padding: 3px 7px;
  font-size: 0.7rem;
}

/* ── シームレス度 (短く詰める) ── */
.pp-seamless-display {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px !important;
  font-size: 0.7rem;
}
.pp-seamless-display::before {
  /* ラベルを横並びに変えるため上に出さず、左の本文と一緒の段に */
  display: none;
}
.pp-seamless-display .pp-seamless-label {
  font-family: 'Cinzel', 'Noto Serif JP', serif;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(217, 181, 102, 0.65);
  white-space: nowrap;
  flex-shrink: 0;
}
.pp-seamless-display .pp-seamless-bar {
  flex: 1;
  min-width: 60px;
  height: 6px;
}
.pp-seamless-display .pp-seamless-score {
  font-size: 0.72rem;
  min-width: 40px;
  text-align: right;
}

/* ── 繋ぎ目拡大 (canvas を小さく) ── */
.pp-seam-zoom-wrap {
  padding: 8px 10px !important;
}
.pp-seam-zoom__label { display: none; }
.pp-seam-zoom-canvas {
  width: 100% !important;
  height: 42px !important;          /* 旧 60px → 42px に短縮 */
  max-height: 42px !important;
  display: block;
  border-radius: 3px;
  background: rgba(0,0,0,0.40);
  border: 1px solid rgba(100, 180, 130, 0.14);
}

/* ── 構造マーカー ── */
.pp-loop-regions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 8px 10px !important;
  border-top: none !important;
}
.pp-loop-regions__label { display: none; }
.pp-loop-region-btn {
  padding: 4px 9px;
  font-size: 0.7rem;
}
.pp-loop-region-btn--zip {
  margin-left: auto;
}

/* ── 自動検出 ── */
.pp-auto-loop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 10px !important;
  font-size: 0.68rem;
}
.pp-auto-loop .pp-loop-region-btn {
  padding: 4px 11px;
}
.pp-auto-loop__hint {
  font-size: 0.65rem;
  color: rgba(180, 160, 110, 0.55);
}

/* ── モバイル: 1列に折り返す ── */
@media (max-width: 720px) {
  .pp-loop-advanced-body {
    grid-template-columns: 1fr;
    padding: 10px;
  }
  .pp-loop-options,
  .pp-loop-bars,
  .pp-seamless-display { grid-column: 1; }
  .pp-loop-options { grid-template-columns: 1fr; }
  .pp-seam-zoom-canvas { height: 32px; }
}

/* Video Workbench: Pjaxプレイヤー常駐の制作中動画 */
.pp-video-workbench {
  display: none;
  position: fixed;
  right: clamp(14px, 2.3vw, 32px);
  bottom: 104px;
  z-index: 1201;
  width: min(390px, calc(100vw - 28px));
  color: rgba(236, 255, 241, 0.95);
  font-family: 'Noto Sans JP', sans-serif;
  pointer-events: auto;
  transform-origin: 100% 100%;
  transition: width 0.34s cubic-bezier(0.2, 0.8, 0.2, 1), right 0.34s cubic-bezier(0.2, 0.8, 0.2, 1), bottom 0.34s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pp-video-workbench--focus {
  display: block;
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  margin: 0;
  transform: none;
  z-index: 1;
}
.pp-vw-shell {
  position: relative;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  min-height: 94px;
  overflow: hidden;
  border: 1px solid rgba(196, 255, 204, 0.20);
  border-radius: 14px;
  background: radial-gradient(circle at 18% 0%, rgba(126, 236, 169, 0.18), transparent 42%), linear-gradient(135deg, rgba(255, 225, 146, 0.12), rgba(72, 154, 112, 0.12)), rgba(4, 14, 11, 0.86);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.03) inset, 0 0 28px rgba(102, 236, 159, 0.10);
  backdrop-filter: blur(20px) saturate(1.25);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
}
.pp-vw-shell::before,
.pp-vw-shell::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.pp-vw-shell::before {
  background: linear-gradient(115deg, transparent 0 28%, rgba(255,255,255,0.10) 42%, transparent 58%), radial-gradient(circle at 88% 16%, rgba(255, 225, 146, 0.12), transparent 28%);
  opacity: 0.62;
  mix-blend-mode: screen;
}
.pp-vw-shell::after {
  opacity: 0.18;
  background-image: linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(180deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(90deg, #000, transparent 80%);
}
.pp-video-workbench.is-attention .pp-vw-shell { animation: ppVideoWorkbenchArrive 0.8s ease both; }
@keyframes ppVideoWorkbenchArrive {
  0% { transform: translateY(18px) scale(0.96); filter: brightness(1.5); }
  100% { transform: translateY(0) scale(1); filter: brightness(1); }
}
.pp-video-workbench--focus .pp-vw-shell {
  grid-template-columns: minmax(330px, 38%) minmax(0, 1fr);
  min-height: clamp(330px, 44vh, 500px);
  align-items: stretch;
  border-radius: 16px;
  border-color: rgba(255, 225, 146, 0.28);
}
.pp-vw-preview {
  position: relative;
  z-index: 1;
  min-height: 94px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 42%, rgba(126, 236, 169, 0.12), transparent 42%), rgba(0, 0, 0, 0.30);
}
.pp-video-workbench--focus .pp-vw-preview { min-height: 188px; }
.pp-video-workbench--focus:not(.pp-video-workbench--empty) .pp-vw-preview {
  aspect-ratio: var(--vw-aspect, 16 / 9);
  min-height: 0;
  align-self: start;
  height: auto;
  max-height: min(48vh, 520px);
}
.pp-video-workbench--focus .pp-vw-preview {
  display: block;
  padding: 0;
  border-right: 1px solid rgba(255, 225, 146, 0.16);
}
.pp-video-workbench--focus .pp-vw-video {
  min-height: 0;
  border-radius: 0;
  overflow: hidden;
}
.pp-vw-video {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.58);
}
.pp-vw-hero-play {
  display: none;
}
.pp-video-workbench--focus .pp-vw-hero-play {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(154, 255, 186, 0.72);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 40%, rgba(154,255,186,0.50), rgba(18,96,54,0.25) 58%, rgba(0,0,0,0.58)),
    rgba(0, 0, 0, 0.42);
  color: #f4ffe9;
  font-size: 0.78rem;
  font-weight: 1000;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(154,255,186,0.18), 0 0 36px rgba(126,236,169,0.42), 0 16px 40px rgba(0,0,0,0.48), inset 0 1px 0 rgba(255,255,255,0.20);
  backdrop-filter: blur(8px);
}
.pp-video-workbench--focus .pp-vw-hero-play::before {
  content: '';
  width: 0;
  height: 0;
  margin-left: 5px;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 24px solid currentColor;
}
.pp-video-workbench--focus .pp-vw-hero-play span {
  display: none;
}
.pp-video-workbench--focus.is-playing .pp-vw-hero-play {
  opacity: 0;
  pointer-events: none;
}
.pp-video-workbench--empty .pp-vw-video { opacity: 0; }
.pp-video-workbench--empty .pp-vw-hero-play { display: none; }
.pp-vw-empty {
  position: absolute;
  inset: 78px 12px 66px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 0;
  background: radial-gradient(circle at 50% 25%, rgba(126, 236, 169, 0.18), transparent 46%), rgba(8, 24, 18, 0.82);
  color: rgba(230, 255, 235, 0.90);
  cursor: pointer;
  text-align: center;
}
.pp-video-workbench:not(.pp-video-workbench--empty) .pp-vw-empty {
  opacity: 0;
  pointer-events: none;
}
.pp-vw-empty__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 2px;
  border-radius: 10px;
  color: rgba(126, 236, 169, 0.92);
  background: rgba(126, 236, 169, 0.10);
  border: 1px solid rgba(126, 236, 169, 0.24);
  box-shadow: 0 0 18px rgba(126, 236, 169, 0.12);
}
.pp-vw-empty__icon svg { width: 19px; height: 19px; }
.pp-vw-empty strong { font-size: 0.76rem; letter-spacing: 0.05em; }
.pp-vw-empty span:last-child { font-size: 0.63rem; color: rgba(189, 226, 196, 0.70); }
.pp-vw-body {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 12px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  border-left: 1px solid rgba(196, 255, 204, 0.12);
  background:
    radial-gradient(circle at 18% 0%, rgba(126, 236, 169, 0.10), transparent 36%),
    linear-gradient(90deg, rgba(8, 22, 16, 0.96), rgba(8, 22, 16, 0.82));
}
.pp-video-workbench--focus .pp-vw-body { padding: 16px 17px 14px; gap: 11px; }
.pp-vw-preview .pp-vw-head {
  position: absolute;
  z-index: 7;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}
.pp-vw-head { display: flex; align-items: flex-start; gap: 10px; }
.pp-vw-titlewrap { min-width: 0; flex: 1; }
.pp-vw-kicker {
  display: block;
  margin-bottom: 2px;
  color: rgba(255, 225, 146, 0.72);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}
.pp-vw-title {
  display: block;
  color: #f4ffe9;
  font-family: 'Noto Serif JP', serif;
  font-size: 0.88rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 18px rgba(126, 236, 169, 0.18);
}
.pp-video-workbench--focus .pp-vw-title { font-size: 1.05rem; }
.pp-vw-mode-switch {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(126, 236, 169, 0.16);
  border-radius: 999px;
  background: rgba(4, 16, 11, 0.46);
}
.pp-vw-preview .pp-vw-mode-switch {
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(8px);
}
.pp-vw-mode-btn {
  min-height: 24px;
  padding: 4px 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(224, 248, 228, 0.68);
  font-size: 0.61rem;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}
.pp-vw-mode-btn:hover,
.pp-vw-mode-btn.is-active {
  color: #fff0bd;
  background: rgba(255, 225, 146, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 225, 146, 0.22);
}
.pp-vw-mode-btn--qpoint.is-active {
  color: #a9ffd1;
  background: rgba(126, 236, 169, 0.14);
  box-shadow: inset 0 0 0 1px rgba(126, 236, 169, 0.28);
}
.pp-vw-meta {
  min-height: 1.2em;
  color: rgba(197, 226, 204, 0.72);
  font-size: 0.68rem;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pp-vw-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid rgba(205, 255, 215, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(220, 244, 224, 0.72);
  cursor: pointer;
}
.pp-vw-icon:hover {
  color: #fff0bd;
  border-color: rgba(255, 225, 146, 0.32);
  background: rgba(255, 225, 146, 0.08);
}
.pp-vw-icon svg { width: 15px; height: 15px; }
.pp-vw-close {
  width: auto;
  min-width: 72px;
  padding: 0 9px;
  font-size: 0.66rem;
  font-weight: 900;
  white-space: nowrap;
}
.pp-vw-progress {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 7px;
}
.pp-video-workbench--focus .pp-vw-progress {
  display: grid;
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 56px;
  z-index: 6;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(8px);
}
.pp-vw-time {
  color: rgba(223, 246, 228, 0.65);
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
}
.pp-vw-seek { width: 100%; accent-color: #8ceca7; }
.pp-vw-transport {
  display: none;
  grid-template-columns: repeat(4, minmax(0, auto));
  align-items: center;
  justify-content: start;
  gap: 7px;
}
.pp-video-workbench--focus .pp-vw-transport {
  display: grid;
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 7;
  align-self: auto;
  grid-template-columns: repeat(4, minmax(0, auto));
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
}
.pp-vw-transport button {
  min-height: 40px;
  padding: 9px 15px;
  border: 1px solid rgba(126, 236, 169, 0.32);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(126, 236, 169, 0.18), rgba(23, 70, 46, 0.10)),
    rgba(8, 23, 17, 0.78);
  color: rgba(238, 255, 240, 0.94);
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 18px rgba(0,0,0,0.20);
}
.pp-video-workbench--focus .pp-vw-transport button {
  min-height: 34px;
  padding: 7px 12px;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.58);
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
}
.pp-video-workbench--focus .pp-vw-transport button:first-child {
  min-width: 64px;
  border-color: rgba(126, 236, 169, 0.56);
  background:
    linear-gradient(180deg, rgba(126, 236, 169, 0.32), rgba(18, 94, 55, 0.34)),
    rgba(0, 0, 0, 0.50);
  color: #f4ffe9;
  box-shadow: 0 0 20px rgba(126, 236, 169, 0.24), 0 8px 22px rgba(0,0,0,0.35);
}
.pp-vw-transport button:hover,
.pp-vw-transport button.is-active {
  border-color: rgba(255, 225, 146, 0.45);
  color: #fff0bd;
  background: rgba(255, 225, 146, 0.11);
}
.pp-vw-timeline-board {
  display: none;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(126, 236, 169, 0.14);
  background: rgba(0, 0, 0, 0.18);
}
.pp-video-workbench--focus .pp-vw-timeline-board {
  display: grid;
}
.pp-vw-lane {
  display: grid;
  gap: 4px;
}
.pp-vw-lane-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  color: rgba(221, 247, 226, 0.70);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.pp-video-workbench--focus .pp-vw-lane-head {
  min-height: 36px;
  gap: 12px;
}
.pp-video-workbench--focus .pp-vw-lane-head > span {
  color: rgba(236, 255, 241, 0.92);
  font-size: 0.95rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
}
.pp-vw-lane-head strong {
  min-width: 76px;
  text-align: right;
  color: rgba(255, 225, 146, 0.78);
  font-variant-numeric: tabular-nums;
}
.pp-video-workbench--focus .pp-vw-lane-head strong {
  min-width: 104px;
  text-align: left;
  color: rgba(255, 225, 146, 0.86);
  font-size: 0.72rem;
}
.pp-vw-lane-transport {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 5px;
  border: 1px solid rgba(255, 225, 146, 0.24);
  border-radius: 999px;
  background:
    radial-gradient(circle at 20% 0%, rgba(126, 236, 169, 0.17), transparent 46%),
    rgba(4, 16, 11, 0.66);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 24px rgba(0,0,0,0.18);
}
.pp-vw-lane-transport button {
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid rgba(205, 255, 215, 0.18);
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  color: rgba(236, 255, 241, 0.9);
  font-size: 0.66rem;
  font-weight: 1000;
  cursor: pointer;
  white-space: nowrap;
}
.pp-vw-lane-transport button:hover,
.pp-vw-lane-transport button.is-active {
  border-color: rgba(255, 225, 146, 0.46);
  background: rgba(255, 225, 146, 0.16);
  color: #fff0bd;
}
.pp-vw-transport button.pp-vw-control-btn,
.pp-vw-lane-transport button.pp-vw-control-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  width: 34px;
  min-height: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  font-size: 0;
  line-height: 1;
}
.pp-vw-transport button.pp-vw-control-btn--play,
.pp-vw-lane-transport button.pp-vw-control-btn--play {
  min-width: 44px;
  width: 44px;
  height: 40px;
  border-color: rgba(126, 236, 169, 0.72);
  background:
    radial-gradient(circle at 42% 34%, rgba(255,255,255,0.28), transparent 28%),
    linear-gradient(180deg, rgba(126, 236, 169, 0.50), rgba(18, 111, 63, 0.58)),
    rgba(0, 0, 0, 0.55);
  color: #f8ffed;
  box-shadow: 0 0 0 1px rgba(126,236,169,0.12), 0 0 28px rgba(126,236,169,0.34), 0 12px 26px rgba(0,0,0,0.38);
}
.pp-vw-lane-transport button.pp-vw-control-btn--play {
  min-width: 38px;
  width: 38px;
  height: 34px;
}
.pp-vw-transport button.pp-vw-control-btn--repeat,
.pp-vw-lane-transport button.pp-vw-control-btn--repeat {
  width: auto;
  min-width: 52px;
  grid-template-columns: auto auto;
  gap: 4px;
  padding: 0 9px;
}
.pp-vw-control-symbol {
  display: inline-grid;
  place-items: center;
  min-width: 1em;
  font-size: 1rem;
  line-height: 1;
}
.pp-vw-control-btn--play .pp-vw-control-symbol {
  margin-left: 2px;
  font-size: 1.16rem;
}
.pp-vw-control-btn--pause .pp-vw-control-symbol {
  font-size: 0.82rem;
  letter-spacing: -0.12em;
}
.pp-vw-control-state {
  min-width: 18px;
  padding: 2px 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  color: rgba(248, 255, 237, 0.92);
  font-size: 0.52rem;
  font-weight: 1000;
  line-height: 1;
  letter-spacing: 0.03em;
}
.pp-vw-control-btn--repeat.is-active .pp-vw-control-state {
  background: rgba(126, 236, 169, 0.22);
  color: #f5ffe7;
}
.pp-vw-transport button.pp-vw-control-btn:hover,
.pp-vw-lane-transport button.pp-vw-control-btn:hover {
  transform: translateY(-1px);
}
.pp-vw-qmenu {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.pp-vw-qmenu__panel {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 40;
  display: grid;
  gap: 8px;
  width: min(300px, calc(100vw - 36px));
  padding: 12px;
  border: 1px solid rgba(126, 236, 169, 0.34);
  border-radius: 12px;
  background:
    radial-gradient(circle at 16% 0%, rgba(126, 236, 169, 0.20), transparent 44%),
    rgba(5, 18, 12, 0.96);
  color: rgba(232, 255, 236, 0.88);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.55;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  box-shadow: 0 18px 36px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.08);
}
.pp-vw-qmenu__panel strong {
  min-width: 0;
  color: #a9ffd1;
  font-size: 0.78rem;
  text-align: left;
}
.pp-vw-qmenu:hover .pp-vw-qmenu__panel,
.pp-vw-qmenu:focus-within .pp-vw-qmenu__panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.pp-vw-qmenu__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pp-vw-qmenu__actions button {
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(126, 236, 169, 0.30);
  border-radius: 999px;
  background: rgba(126, 236, 169, 0.11);
  color: rgba(232, 255, 236, 0.96);
  font-size: 0.66rem;
  font-weight: 1000;
  cursor: pointer;
}
.pp-vw-qmenu__actions button:hover {
  border-color: rgba(255, 225, 146, 0.46);
  background: rgba(255, 225, 146, 0.16);
  color: #fff0bd;
}
.pp-vw-lane-head .pp-vw-insert-menu {
  margin-left: auto;
}
.pp-video-workbench--focus .pp-vw-lane-head .pp-vw-insert-menu {
  filter: drop-shadow(0 12px 24px rgba(255, 225, 146, 0.10));
}
.pp-video-workbench--focus .pp-vw-lane-head .pp-vw-btn--insert {
  min-width: 184px;
  min-height: 38px;
}
.pp-video-workbench--focus .pp-vw-lane-head .pp-vw-btn--insert-toggle {
  min-height: 38px;
  min-width: 38px;
}
.pp-vw-lane-track {
  position: relative;
  height: 58px;
  overflow: hidden;
  border-radius: 9px;
  border: 1px solid rgba(196, 255, 204, 0.13);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(126, 236, 169, 0.08), rgba(0,0,0,0.12));
  background-size: 10% 100%, 100% 100%;
  cursor: pointer;
}
.pp-vw-lane--music .pp-vw-lane-track {
  overflow: visible;
}
.pp-vw-video-thumbs {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1px;
  opacity: 0.46;
  pointer-events: none;
}
.pp-vw-video-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82) contrast(0.92) brightness(0.74);
}
.pp-vw-lane--video .pp-vw-lane-track::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(4, 18, 11, 0.24), rgba(4, 18, 11, 0.06), rgba(4, 18, 11, 0.24));
}
.pp-vw-lane--video .pp-vw-playhead,
.pp-vw-lane--video .pp-vw-qpoint-marker,
.pp-vw-lane--video .pp-vw-goal-marker {
  z-index: 2;
}
.pp-vw-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: #fff0bd;
  box-shadow: 0 0 12px rgba(255, 225, 146, 0.70);
}
.pp-vw-playhead--music {
  z-index: 6;
  background: #8ceca7;
  box-shadow: 0 0 14px rgba(126, 236, 169, 0.72);
}
.pp-vw-clip {
  position: absolute;
  top: 6px;
  bottom: 6px;
  min-width: 42px;
  overflow: visible;
  border: 1px solid rgba(255, 225, 146, 0.46);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 225, 146, 0.25), rgba(126, 236, 169, 0.18)),
    rgba(11, 28, 19, 0.88);
  color: #fff7cd;
  cursor: grab;
  text-align: left;
  box-shadow: 0 0 18px rgba(126, 236, 169, 0.12), inset 0 1px 0 rgba(255,255,255,0.10);
}
.pp-vw-clip--tone-1 { --clip-a: rgba(255, 225, 146, 0.36); --clip-b: rgba(126, 236, 169, 0.20); }
.pp-vw-clip--tone-2 { --clip-a: rgba(128, 214, 255, 0.34); --clip-b: rgba(126, 236, 169, 0.18); }
.pp-vw-clip--tone-3 { --clip-a: rgba(255, 151, 179, 0.32); --clip-b: rgba(255, 225, 146, 0.16); }
.pp-vw-clip--tone-4 { --clip-a: rgba(174, 151, 255, 0.32); --clip-b: rgba(126, 236, 169, 0.18); }
.pp-vw-clip--tone-5 { --clip-a: rgba(255, 180, 104, 0.34); --clip-b: rgba(255, 244, 190, 0.15); }
.pp-vw-clip--tone-6 { --clip-a: rgba(116, 255, 210, 0.30); --clip-b: rgba(109, 166, 255, 0.17); }
.pp-vw-clip[class*="pp-vw-clip--tone-"] {
  background:
    linear-gradient(90deg, var(--clip-a), var(--clip-b)),
    rgba(11, 28, 19, 0.88);
}
.pp-vw-clip-order,
.pp-vw-clip-remove {
  position: absolute;
  z-index: 12;
  top: 50%;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
}
.pp-vw-clip-order {
  left: 12px;
  color: rgba(6, 18, 12, 0.9);
  background: rgba(255, 240, 189, 0.86);
}
.pp-vw-clip-remove {
  right: 6px;
  color: rgba(255, 232, 226, 0.95);
  background: rgba(150, 42, 34, 0.78);
  border: 1px solid rgba(255, 195, 176, 0.48);
  pointer-events: auto;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(190, 52, 42, 0.28), 0 4px 12px rgba(0,0,0,0.28);
}
.pp-vw-clip-remove:hover {
  color: #fff;
  background: rgba(220, 62, 48, 0.96);
  transform: translateY(-50%) scale(1.08);
}
.pp-vw-clip.is-selected {
  border-color: rgba(255, 240, 189, 0.86);
  box-shadow: 0 0 24px rgba(255, 225, 146, 0.22), inset 0 1px 0 rgba(255,255,255,0.14);
}
.pp-vw-clip:active { cursor: grabbing; }
.pp-vw-clip--mute {
  border-color: rgba(126, 236, 169, 0.54);
}
.pp-vw-clip-title,
.pp-vw-clip-meta {
  position: relative;
  z-index: 2;
  display: block;
  padding: 0 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.pp-vw-clip-title {
  padding-top: 8px;
  font-size: 0.64rem;
  font-weight: 900;
}
.pp-vw-clip-meta {
  margin-top: -1px;
  color: rgba(232, 255, 236, 0.70);
  font-size: 0.52rem;
}
.pp-vw-clip-wavehint {
  position: absolute;
  left: 50px;
  right: 44px;
  bottom: 4px;
  z-index: 13;
  display: block;
  min-height: 14px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(126, 236, 169, 0.24);
  background: rgba(4, 17, 11, 0.72);
  color: rgba(232, 255, 236, 0.88);
  font-size: 0.52rem;
  font-weight: 1000;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.74;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}
.pp-vw-clip:hover .pp-vw-clip-wavehint,
.pp-vw-clip.is-selected .pp-vw-clip-wavehint {
  opacity: 1;
  border-color: rgba(255, 225, 146, 0.40);
  background: rgba(10, 34, 21, 0.88);
  color: #fff0bd;
}
.pp-vw-clip-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}
.pp-vw-clip-fade--in {
  left: 0;
  background: linear-gradient(90deg, rgba(4,14,11,0.82), transparent);
}
.pp-vw-clip-fade--out {
  right: 0;
  background: linear-gradient(270deg, rgba(4,14,11,0.82), transparent);
}
.pp-vw-clip-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 8;
  width: 28px;
  cursor: ew-resize;
  background: rgba(255, 240, 189, 0.32);
  border-color: rgba(255, 240, 189, 0.55);
}
.pp-vw-clip-fade-handle {
  position: absolute;
  z-index: 9;
  top: 4px;
  bottom: 4px;
  width: 32px;
  border-radius: 999px;
  cursor: ew-resize;
  background: rgba(255, 255, 255, 0.18);
  border: 2px solid rgba(255, 240, 189, 0.58);
  box-shadow: 0 0 16px rgba(255, 225, 146, 0.24), inset 0 1px 0 rgba(255,255,255,0.12);
}
.pp-vw-clip-fade-handle--in {
  left: clamp(28px, var(--fade-in-pos, 16%), 44%);
}
.pp-vw-clip-fade-handle--out {
  right: clamp(28px, var(--fade-out-pos, 16%), 44%);
}
.pp-vw-clip-fade-handle::after {
  content: '';
  position: absolute;
  inset: 4px 7px;
  border-left: 1px solid rgba(255, 240, 189, 0.72);
  border-right: 1px solid rgba(255, 240, 189, 0.35);
}
.pp-vw-clip-fade-handle::before {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  z-index: 18;
  min-width: 112px;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 225, 146, 0.42);
  background:
    radial-gradient(circle at 20% 0%, rgba(126, 236, 169, 0.24), transparent 52%),
    rgba(5, 18, 12, 0.94);
  color: #fff0bd;
  font-size: 0.62rem;
  font-weight: 1000;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 5px);
  transition: opacity 0.14s ease, transform 0.14s ease;
  box-shadow: 0 12px 24px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.08);
}
.pp-vw-clip-fade-handle:hover::before,
.pp-vw-clip-fade-handle:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, 0);
}
.pp-vw-clip-handle--start {
  left: 0;
  border-right: 1px solid rgba(255, 240, 189, 0.55);
}
.pp-vw-clip-handle--end {
  right: 0;
  border-left: 1px solid rgba(255, 240, 189, 0.55);
}
.pp-vw-clip-handle::after {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  border-left: 1px solid rgba(255,255,255,0.7);
  border-right: 1px solid rgba(255,255,255,0.34);
  width: 3px;
}
.pp-vw-music-volume {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 46px;
  align-items: center;
  gap: 9px;
  min-height: 30px;
  color: rgba(232, 255, 236, 0.76);
  font-size: 0.64rem;
  font-weight: 900;
}
.pp-vw-music-volume input {
  width: 100%;
  accent-color: #8ceca7;
}
.pp-vw-music-volume strong {
  color: rgba(255, 225, 146, 0.78);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.pp-vw-video-volume {
  display: none;
  grid-template-columns: auto minmax(96px, 1fr) 42px;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  color: rgba(232, 255, 236, 0.78);
  font-size: 0.62rem;
  font-weight: 900;
}
.pp-vw-video-volume input {
  width: 100%;
  accent-color: #8ceca7;
}
.pp-vw-video-volume strong {
  color: rgba(255, 225, 146, 0.86);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.pp-video-workbench--focus .pp-vw-video-volume {
  display: grid;
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 7;
  width: min(190px, 42%);
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.50);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(8px);
}
.pp-vw-mute {
  display: none;
  align-items: center;
  gap: 7px;
  min-height: 29px;
  padding: 5px 8px;
  border-radius: 10px;
  background: rgba(126, 236, 169, 0.07);
  border: 1px solid rgba(126, 236, 169, 0.13);
  color: rgba(232, 255, 236, 0.82);
  font-size: 0.68rem;
  font-weight: 800;
}
.pp-video-workbench--focus .pp-vw-mute {
  display: flex;
}
.pp-vw-mute input {
  accent-color: #8ceca7;
}
.pp-vw-mute em {
  margin-left: auto;
  color: rgba(255, 225, 146, 0.62);
  font-size: 0.58rem;
  font-style: normal;
}
.pp-vw-statusbar {
  display: none;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  min-height: 28px;
}
.pp-video-workbench--focus .pp-vw-statusbar {
  display: grid;
}
.pp-vw-qpoint,
.pp-vw-goal {
  display: none;
  grid-template-columns: auto auto repeat(2, minmax(0, auto));
  align-items: center;
  gap: 7px;
  padding: 8px;
  border: 1px solid rgba(189,244,203,0.16);
  border-radius: 10px;
  background: rgba(4, 16, 12, 0.48);
  color: rgba(232, 255, 236, 0.78);
  font-size: 0.68rem;
  font-weight: 900;
}
.pp-vw-qpoint strong,
.pp-vw-goal strong {
  min-width: 56px;
  color: #fff0bd;
  font-variant-numeric: tabular-nums;
}
.pp-vw-qpoint button,
.pp-vw-goal button {
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(217,181,102,0.30);
  border-radius: 8px;
  background: rgba(217,181,102,0.10);
  color: rgba(255,244,198,0.92);
  font-size: 0.66rem;
  font-weight: 900;
  cursor: pointer;
}
.pp-vw-qpoint button:disabled,
.pp-vw-goal button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
.pp-vw-qpoint {
  border-color: rgba(126,236,169,0.24);
  background: rgba(6, 28, 19, 0.54);
}
.pp-vw-qpoint strong {
  color: #a9ffd1;
}
.pp-vw-qpoint button {
  border-color: rgba(126,236,169,0.32);
  background: rgba(126,236,169,0.12);
  color: rgba(226,255,236,0.94);
}
.pp-vw-qpoint-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 6;
  width: 18px;
  transform: translateX(-50%);
  background: transparent;
  cursor: ew-resize;
  pointer-events: auto;
  touch-action: none;
}
.pp-vw-qpoint-marker::before {
  content: 'Q';
  position: absolute;
  left: 50%;
  top: -10px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  transform: translateX(-50%);
  border: 1px solid rgba(126,236,169,0.55);
  border-radius: 999px;
  background: rgba(7, 30, 21, 0.94);
  color: #a9ffd1;
  font-size: 0.58rem;
  font-weight: 1000;
  line-height: 15px;
  text-align: center;
  box-shadow: 0 0 14px rgba(126,236,169,0.48);
}
.pp-vw-qpoint-marker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-1px);
  background: #8cffc1;
  box-shadow: 0 0 16px rgba(126,236,169,0.62);
}
.pp-vw-qpoint-marker:hover::before,
.pp-video-workbench.is-dragging-qpoint .pp-vw-qpoint-marker::before {
  background: rgba(12, 52, 35, 0.98);
  border-color: rgba(255, 225, 146, 0.58);
  color: #fff0bd;
}
.pp-vw-goal,
.pp-vw-goal-marker {
  display: none !important;
}
.pp-vw-goal-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 4;
  width: 2px;
  transform: translateX(-1px);
  background: #fff0bd;
  box-shadow: 0 0 16px rgba(217,181,102,0.52);
}
.pp-vw-goal-marker::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -1px;
  width: 10px;
  height: 10px;
  transform: translateX(-50%) rotate(45deg);
  border-radius: 2px;
  background: #fff0bd;
  box-shadow: 0 0 14px rgba(217,181,102,0.42);
}
.pp-vw-statusbar span {
  overflow: hidden;
  min-width: 0;
  padding: 6px 9px;
  border: 1px solid rgba(126, 236, 169, 0.14);
  border-radius: 9px;
  background: rgba(7, 22, 16, 0.58);
  color: rgba(232, 255, 236, 0.78);
  font-size: 0.64rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-vw-editor {
  display: none;
  grid-template-columns: repeat(5, minmax(84px, 1fr));
  gap: 7px;
  padding: 9px;
  border-radius: 12px;
  border: 1px solid rgba(255, 225, 146, 0.16);
  background: rgba(3, 14, 10, 0.36);
}
.pp-video-workbench--focus .pp-vw-editor:not([hidden]) {
  display: grid;
}
.pp-vw-editor__head {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: rgba(255, 240, 189, 0.86);
  font-size: 0.68rem;
  font-weight: 900;
}
.pp-vw-editor__head span {
  min-width: 0;
  overflow: hidden;
  color: rgba(232, 255, 236, 0.72);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-vw-editor label {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  color: rgba(232, 255, 236, 0.72);
  font-size: 0.58rem;
  font-weight: 800;
}
.pp-vw-editor input {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(126, 236, 169, 0.20);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
  color: rgba(244, 255, 236, 0.96);
  font: inherit;
  font-size: 0.72rem;
  padding: 6px 7px;
}
.pp-vw-editor label span {
  display: none;
}
.pp-vw-fav-picker {
  position: absolute;
  z-index: 8;
  right: 14px;
  top: 54px;
  width: min(360px, calc(100% - 28px));
  max-height: 300px;
  overflow: hidden;
  border: 1px solid rgba(255, 225, 146, 0.25);
  border-radius: 14px;
  background: rgba(5, 18, 12, 0.96);
  box-shadow: 0 24px 58px rgba(0,0,0,0.48), 0 0 26px rgba(126,236,169,0.13);
}
.pp-vw-fav-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  color: #fff0bd;
  font-size: 0.72rem;
  font-weight: 900;
}
.pp-vw-fav-picker__head button {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.82);
  cursor: pointer;
}
.pp-vw-fav-list {
  max-height: 244px;
  overflow: auto;
  padding: 0 8px 10px;
}
.pp-vw-fav-item {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
  padding: 9px 10px;
  border: 1px solid rgba(126, 236, 169, 0.16);
  border-radius: 10px;
  background: rgba(126, 236, 169, 0.07);
  color: rgba(232, 255, 236, 0.88);
  cursor: pointer;
  text-align: left;
}
.pp-vw-fav-item strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-vw-fav-item span {
  color: rgba(255, 225, 146, 0.72);
  font-variant-numeric: tabular-nums;
}
.pp-vw-fav-empty {
  padding: 0 12px 14px;
  color: rgba(232, 255, 236, 0.7);
  font-size: 0.72rem;
}
.pp-vw-fav-section + .pp-vw-fav-section {
  border-top: 1px solid rgba(202, 164, 78, 0.18);
  margin-top: 4px;
  padding-top: 6px;
}
.pp-vw-fav-section__title {
  padding: 8px 12px 4px;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: #e7ca7c;
  font-weight: 700;
}
.pp-vw-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.pp-vw-decision {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 8, 5, 0.58);
  backdrop-filter: blur(10px);
}
.pp-vw-decision__panel {
  width: min(440px, calc(100vw - 32px));
  padding: 20px;
  border: 1px solid rgba(255, 225, 146, 0.26);
  border-radius: 16px;
  background:
    radial-gradient(circle at 15% 0%, rgba(126, 236, 169, 0.18), transparent 42%),
    rgba(5, 18, 12, 0.94);
  color: rgba(236, 255, 241, 0.94);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.pp-vw-decision__kicker {
  display: block;
  margin-bottom: 8px;
  color: rgba(255, 225, 146, 0.78);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}
.pp-vw-decision__panel strong {
  display: block;
  font-size: 1rem;
  line-height: 1.5;
}
.pp-vw-decision__panel p {
  margin: 10px 0 0;
  color: rgba(209, 236, 215, 0.82);
  font-size: 0.82rem;
  line-height: 1.75;
}
.pp-vw-decision__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.pp-vw-decision__actions button {
  min-width: 92px;
  min-height: 38px;
  border: 1px solid rgba(205, 255, 215, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(236, 255, 241, 0.9);
  font-weight: 900;
  cursor: pointer;
}
.pp-vw-decision__actions button.is-primary {
  border-color: rgba(255, 225, 146, 0.52);
  background: linear-gradient(180deg, rgba(255, 225, 146, 0.22), rgba(126, 236, 169, 0.11));
  color: #fff0bd;
}
.pp-vw-decision__actions button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}
.pp-vw-head .pp-vw-btn--video-menu {
  margin-left: auto;
  min-height: 30px;
  padding: 6px 10px;
}
.pp-vw-insert-menu {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  gap: 0;
}
.pp-video-workbench--focus .pp-vw-body > .pp-vw-insert-menu {
  align-self: start;
  margin: 2px 0 2px;
  filter: drop-shadow(0 12px 24px rgba(255, 225, 146, 0.10));
}
.pp-vw-insert-menu > .pp-vw-btn--insert {
  border-radius: 8px 0 0 8px;
}
.pp-video-workbench--focus .pp-vw-body > .pp-vw-insert-menu > .pp-vw-btn--insert {
  min-height: 46px;
  padding: 10px 22px;
  border-color: rgba(255, 225, 146, 0.78);
  background:
    linear-gradient(180deg, rgba(255, 225, 146, 0.28), rgba(116, 91, 38, 0.22)),
    rgba(33, 53, 28, 0.86);
  color: #fff2bf;
  font-size: 0.88rem;
  font-weight: 950;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 0 0 1px rgba(255,225,146,0.12), 0 14px 34px rgba(0,0,0,0.22);
}
.pp-vw-btn--insert-toggle {
  min-width: 32px;
  padding-inline: 8px;
  border-left: 0;
  border-radius: 0 8px 8px 0;
  font-size: 0.82rem;
}
.pp-video-workbench--focus .pp-vw-body > .pp-vw-insert-menu > .pp-vw-btn--insert-toggle {
  min-width: 44px;
  min-height: 46px;
  border-color: rgba(255, 225, 146, 0.58);
  background: rgba(35, 54, 28, 0.88);
  color: #fff2bf;
}
.pp-vw-insert-menu__panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 5;
  width: min(280px, 70vw);
  padding: 7px;
  border: 1px solid rgba(255, 225, 146, 0.30);
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgba(44, 82, 50, 0.96), rgba(8, 22, 14, 0.96)),
    rgba(8, 18, 12, 0.96);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255,255,255,0.08);
}
.pp-video-workbench--focus .pp-vw-body > .pp-vw-insert-menu .pp-vw-insert-menu__panel {
  top: calc(100% + 8px);
  bottom: auto;
  z-index: 30;
}
.pp-vw-insert-menu__panel[hidden] {
  display: none;
}
.pp-vw-insert-menu__panel button {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 46px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(237, 255, 238, 0.92);
  text-align: left;
  cursor: pointer;
}
.pp-vw-insert-menu__panel button:hover {
  background: rgba(126, 236, 169, 0.12);
}
.pp-vw-insert-menu__panel strong {
  font-size: 0.78rem;
  color: #fff0bd;
}
.pp-vw-insert-menu__panel span {
  font-size: 0.68rem;
  color: rgba(217, 238, 220, 0.68);
}
.pp-vw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  padding: 7px 10px;
  border-radius: 9px;
  border: 1px solid rgba(126, 236, 169, 0.24);
  background: linear-gradient(180deg, rgba(126, 236, 169, 0.13), rgba(43, 99, 70, 0.10)), rgba(8, 23, 17, 0.62);
  color: rgba(231, 255, 237, 0.90);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.pp-vw-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 225, 146, 0.48);
  color: #fff0bd;
  box-shadow: 0 0 18px rgba(126, 236, 169, 0.12), inset 0 1px 0 rgba(255,255,255,0.08);
}
.pp-vw-btn:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  transform: none;
  box-shadow: none;
}
.pp-vw-btn svg { width: 14px; height: 14px; flex: 0 0 auto; }
.pp-vw-btn--tool,
.pp-vw-play,
.pp-vw-btn--insert,
.pp-vw-btn--update,
.pp-vw-btn--memo,
.pp-vw-btn--fav {
  border-color: rgba(255, 225, 146, 0.34);
  background: linear-gradient(135deg, rgba(255, 225, 146, 0.18), rgba(126, 236, 169, 0.12)), rgba(10, 24, 17, 0.68);
  color: #fff0bd;
}
.pp-vw-btn--insert {
  min-width: 178px;
}
.pp-vw-btn--delete {
  border-color: rgba(255, 154, 137, 0.28);
  color: rgba(255, 220, 212, 0.86);
}
.pp-vw-drag-handle {
  display: none;
  position: absolute;
  top: 7px;
  left: 50%;
  z-index: 4;
  width: 82px;
  height: 14px;
  transform: translateX(-50%);
  border: 0;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 225, 146, 0.38), transparent),
    rgba(255,255,255,0.04);
  cursor: move;
}
.pp-video-workbench--focus .pp-vw-shell {
  cursor: default;
}
.pp-video-workbench--focus .pp-vw-shell button,
.pp-video-workbench--focus .pp-vw-shell input,
.pp-video-workbench--focus .pp-vw-shell video {
  cursor: auto;
}
.pp-video-workbench--focus .pp-vw-clip { cursor: grab; }
.pp-video-workbench--focus .pp-vw-clip-handle { cursor: ew-resize; }
.pp-vw-drag-handle::before {
  content: '';
  position: absolute;
  inset: 5px 18px;
  border-top: 1px solid rgba(236,255,241,0.42);
  border-bottom: 1px solid rgba(236,255,241,0.20);
}
.pp-vw-resize-handle {
  display: none;
  position: absolute;
  z-index: 4;
  width: 24px;
  height: 24px;
  opacity: 0.82;
}
.pp-vw-resize-handle--nw {
  left: 5px;
  top: 5px;
  cursor: nwse-resize;
  border-left: 2px solid rgba(255, 225, 146, 0.55);
  border-top: 2px solid rgba(255, 225, 146, 0.55);
  border-radius: 7px 0 0 0;
}
.pp-vw-resize-handle--ne {
  right: 5px;
  top: 5px;
  cursor: nesw-resize;
  border-right: 2px solid rgba(255, 225, 146, 0.55);
  border-top: 2px solid rgba(255, 225, 146, 0.55);
  border-radius: 0 7px 0 0;
}
.pp-vw-resize-handle--sw {
  left: 5px;
  bottom: 5px;
  cursor: nesw-resize;
  border-left: 2px solid rgba(255, 225, 146, 0.55);
  border-bottom: 2px solid rgba(255, 225, 146, 0.55);
  border-radius: 0 0 0 7px;
}
.pp-vw-resize-handle--se {
  right: 5px;
  bottom: 5px;
  cursor: nwse-resize;
  border-right: 2px solid rgba(255, 225, 146, 0.55);
  border-bottom: 2px solid rgba(255, 225, 146, 0.55);
  border-radius: 0 0 7px 0;
}
.pp-vw-resize-handle--se::after {
  content: 'サイズ';
  position: absolute;
  right: 8px;
  bottom: 12px;
  color: rgba(255, 225, 146, 0.62);
  font-size: 0.56rem;
  font-weight: 900;
  white-space: nowrap;
}
.pp-video-workbench.is-moving .pp-vw-shell,
.pp-video-workbench.is-resizing .pp-vw-shell {
  border-color: rgba(255, 225, 146, 0.52);
  box-shadow: 0 22px 58px rgba(0,0,0,0.50), 0 0 32px rgba(126,236,169,0.18);
}
.pp-video-workbench--compact.pp-video-workbench--empty { width: 256px; }
.pp-video-workbench--compact.pp-video-workbench--empty .pp-vw-shell { grid-template-columns: 86px minmax(0, 1fr); }
.pp-video-workbench--compact.pp-video-workbench--empty .pp-vw-progress,
.pp-video-workbench--compact.pp-video-workbench--empty .pp-vw-play,
.pp-video-workbench--compact.pp-video-workbench--empty .pp-vw-btn--tool,
.pp-video-workbench--compact.pp-video-workbench--empty .pp-vw-close { display: none; }
.pp-video-workbench--hidden {
  display: none !important;
}
.pp-video-workbench--focus {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  height: auto;
  max-height: none;
}
.pp-video-workbench--focus .pp-vw-shell {
  height: auto;
  grid-template-columns: minmax(330px, 38%) minmax(0, 1fr);
  min-height: 0;
}
.pp-video-workbench--focus .pp-vw-body {
  min-height: 0;
  overflow: hidden;
}
.pp-video-workbench--focus .pp-vw-preview {
  min-height: 0;
  align-self: start;
  aspect-ratio: var(--vw-aspect, 16 / 9);
  height: auto;
  max-height: min(48vh, 520px);
}
.pp-video-workbench--focus:not(.pp-video-workbench--empty) .pp-vw-preview {
  align-self: start;
  aspect-ratio: var(--vw-aspect, 16 / 9);
}
.pp-video-workbench--focus .pp-vw-timeline-board {
  min-height: 0;
}
.pp-video-workbench--small {
  display: block;
  left: 50%;
  right: auto;
  bottom: calc(88px + min(640px, calc(100vh - 112px)) + 10px);
  width: min(960px, calc(100vw - 28px));
  height: 318px;
  transform: translateX(-50%);
  z-index: 1202;
}
.pp-video-workbench--small .pp-vw-shell {
  grid-template-columns: 1fr;
  grid-template-rows: minmax(140px, 0.94fr) minmax(132px, 1fr);
  height: 100%;
  min-height: 0;
}
.pp-video-workbench--small .pp-vw-preview {
  min-height: 0;
  align-self: stretch;
  border-right: 0;
  border-bottom: 1px solid rgba(255, 225, 146, 0.16);
}
.pp-video-workbench--small .pp-vw-meta,
.pp-video-workbench--small .pp-vw-timeline-board,
.pp-video-workbench--small .pp-vw-mute,
.pp-video-workbench--small .pp-vw-statusbar,
.pp-video-workbench--small .pp-vw-editor,
.pp-video-workbench--small .pp-vw-actions {
  display: none !important;
}
.pp-video-workbench--small .pp-vw-body {
  min-height: 0;
  justify-content: center;
}
.pp-video-workbench--small .pp-vw-transport {
  display: grid;
}
.pp-video-workbench--resident {
  display: block;
  left: auto;
  right: clamp(12px, 2vw, 28px);
  bottom: 104px;
  width: min(390px, calc(100vw - 24px));
  height: auto;
  transform: none;
  z-index: 1203;
}
.pp-video-workbench--resident-medium {
  width: min(760px, calc(100vw - 36px));
}
.pp-video-workbench--resident-large {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(10px);
  z-index: 1600;
}
.pp-video-workbench--resident .pp-vw-shell {
  display: block;
  min-height: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  min-height: 0;
  border-radius: 14px;
}
.pp-video-workbench--resident-large .pp-vw-shell {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  border: 0;
}
.pp-video-workbench--resident .pp-vw-meta,
.pp-video-workbench--resident .pp-vw-timeline-board,
.pp-video-workbench--resident .pp-vw-mute,
.pp-video-workbench--resident .pp-vw-statusbar,
.pp-video-workbench--resident .pp-vw-editor,
.pp-video-workbench--resident .pp-vw-insert-menu,
.pp-video-workbench--resident .pp-vw-actions {
  display: none !important;
}
.pp-video-workbench--resident .pp-vw-preview {
  display: block !important;
  position: absolute;
  inset: 0;
  min-height: 0;
  aspect-ratio: auto;
  border-bottom: 0;
  padding: 0;
}
.pp-video-workbench--resident .pp-vw-preview .pp-vw-head {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}
.pp-video-workbench--resident .pp-vw-body {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 0;
  padding: 10px;
  border-left: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.66), transparent 34%, transparent 58%, rgba(0,0,0,0.72));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.pp-video-workbench--resident:hover .pp-vw-body,
.pp-video-workbench--resident.is-moving .pp-vw-body,
.pp-video-workbench--resident.is-resizing .pp-vw-body {
  opacity: 1;
}
.pp-video-workbench--resident .pp-vw-head {
  width: 100%;
  align-items: flex-start;
  pointer-events: auto;
}
.pp-video-workbench--resident .pp-vw-titlewrap {
  flex: 1 1 auto;
  min-width: 0;
}
.pp-video-workbench--resident .pp-vw-title {
  max-width: 210px;
  color: #fff7d8;
  text-shadow: 0 2px 12px rgba(0,0,0,0.78);
}
.pp-video-workbench--resident .pp-vw-mode-switch {
  margin-left: auto;
  background: rgba(0,0,0,0.42);
}
.pp-video-workbench--resident .pp-vw-mode-btn--edit {
  min-width: 86px;
  height: 28px;
  padding: 0 10px;
  font-size: 0.66rem;
}
.pp-video-workbench--resident .pp-vw-mode-btn--resident,
.pp-video-workbench--resident .pp-vw-mode-btn--resident-medium,
.pp-video-workbench--resident .pp-vw-mode-btn--resident-large,
.pp-video-workbench--resident .pp-vw-mode-btn--hidden {
  width: 30px;
  min-width: 30px;
  height: 28px;
  padding: 0;
  font-size: 0;
}
.pp-video-workbench--resident .pp-vw-mode-btn--resident::before {
  content: '常';
  font-size: 0.76rem;
}
.pp-video-workbench--resident .pp-vw-mode-btn--resident-medium::before {
  content: '中';
  font-size: 0.76rem;
}
.pp-video-workbench--resident .pp-vw-mode-btn--resident-large::before {
  content: '□';
  font-size: 0.9rem;
  line-height: 1;
}
.pp-video-workbench--resident .pp-vw-mode-btn--hidden::before {
  content: '_';
  font-size: 1rem;
  line-height: 0.7;
}
.pp-video-workbench--resident .pp-vw-progress {
  display: none;
}
.pp-video-workbench--resident .pp-vw-transport {
  display: grid;
  position: absolute;
  left: 10px;
  bottom: 42px;
  z-index: 5;
  grid-template-columns: repeat(5, minmax(0, auto));
  justify-content: start;
  width: auto;
  pointer-events: auto;
}
.pp-video-workbench--resident .pp-vw-video-volume {
  display: grid;
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 5;
  width: min(220px, 100%);
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.50);
  border: 1px solid rgba(255,255,255,0.14);
  pointer-events: auto;
}
.pp-video-workbench--resident .pp-vw-qpoint {
  display: flex;
  position: absolute;
  right: 10px;
  bottom: 82px;
  z-index: 6;
  align-items: center;
  gap: 6px;
  max-width: min(320px, calc(100% - 20px));
  min-height: 30px;
  padding: 5px 7px;
  border: 1px solid rgba(126, 236, 169, 0.28);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.54);
  box-shadow: 0 8px 22px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
  pointer-events: auto;
}
.pp-video-workbench--resident .pp-vw-qpoint > span {
  color: rgba(220, 255, 226, 0.76);
  font-size: 0.62rem;
  font-weight: 900;
  white-space: nowrap;
}
.pp-video-workbench--resident .pp-vw-qpoint strong {
  min-width: 42px;
  color: #a9ffd1;
  font-size: 0.68rem;
  text-align: center;
}
.pp-video-workbench--resident .pp-vw-qpoint button {
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.6rem;
  white-space: nowrap;
}
.pp-video-workbench--resident-large .pp-vw-transport {
  left: clamp(18px, 3vw, 44px);
  bottom: calc(clamp(18px, 3vw, 44px) + 44px);
}
.pp-video-workbench--resident-large .pp-vw-video-volume {
  left: clamp(18px, 3vw, 44px);
  bottom: clamp(18px, 3vw, 44px);
}
.pp-video-workbench--resident-large .pp-vw-qpoint {
  right: clamp(18px, 3vw, 44px);
  bottom: clamp(18px, 3vw, 44px);
}
.pp-video-workbench--resident .pp-vw-transport button {
  background: rgba(0,0,0,0.58);
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
}
.pp-video-workbench--resident .pp-vw-close,
.pp-video-workbench--resident .pp-vw-btn--video-menu {
  display: none;
}
.pp-video-workbench--resident .pp-vw-drag-handle,
.pp-video-workbench--resident .pp-vw-resize-handle {
  display: block;
}
.player.video-workbench-locked .player-center {
  position: relative;
  opacity: 0.46;
  filter: grayscale(0.85) saturate(0.55);
}
.player.video-workbench-locked .player-center::after {
  content: none;
  display: none;
}
.player.video-workbench-locked .player-controls,
.player.video-workbench-locked .seekbar {
  pointer-events: none;
  cursor: not-allowed;
}
.player.video-workbench-locked .btn-play,
.player.video-workbench-locked .btn-prev,
.player.video-workbench-locked .btn-next {
  position: relative;
  box-shadow: none;
  transform: none;
}
.player.video-workbench-locked .btn-play::after {
  content: '動画再生中';
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  min-width: 84px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 225, 146, 0.42);
  background:
    radial-gradient(circle at 20% 0%, rgba(126, 236, 169, 0.22), transparent 52%),
    rgba(5, 18, 12, 0.94);
  color: #fff0bd;
  font-size: 0.64rem;
  font-weight: 1000;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -50%);
  box-shadow: 0 12px 24px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.08);
}
.player-video-lock-notice {
  position: fixed;
  left: 50%;
  bottom: 92px;
  z-index: 1550;
  max-width: min(420px, calc(100vw - 32px));
  padding: 9px 14px;
  border: 1px solid rgba(255, 225, 146, 0.36);
  border-radius: 999px;
  background:
    radial-gradient(circle at 20% 0%, rgba(126, 236, 169, 0.20), transparent 48%),
    rgba(5, 18, 12, 0.94);
  color: #fff0bd;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.45;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  box-shadow: 0 16px 34px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.08);
}
.player-video-lock-notice.is-show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Mac handoff integration: Emerald Glass / Sound Atelier. */
.player-panel.is-open .player-panel__inner {
  background:
    radial-gradient(circle at 12% -10%, rgba(189, 244, 203, 0.15), transparent 34%),
    radial-gradient(circle at 92% 0%, rgba(114, 215, 195, 0.10), transparent 32%),
    linear-gradient(180deg, rgba(13, 42, 29, 0.94), rgba(4, 16, 12, 0.985));
  border-top-color: var(--toolbox-line-strong);
  box-shadow: var(--toolbox-shadow-panel), inset 0 1px 0 rgba(255,255,255,0.10);
  backdrop-filter: var(--toolbox-blur);
  -webkit-backdrop-filter: var(--toolbox-blur);
}
.player-panel__inner::before {
  background:
    linear-gradient(90deg, rgba(189,244,203,0.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(189,244,203,0.032) 1px, transparent 1px),
    radial-gradient(circle at 50% 0%, rgba(217,181,102,0.10), transparent 46%);
  background-size: 44px 44px, 44px 44px, 100% 100%;
  opacity: 0.42;
}
.player-panel__inner::after {
  height: 2px;
  background: var(--toolbox-scanline);
  box-shadow: 0 0 22px rgba(189,244,203,0.22);
}
.player-panel__stage-head {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(0,0,0,0.06)),
    rgba(7, 24, 18, 0.28);
}
.player-panel__stage-mark {
  border-color: var(--toolbox-line-strong);
  background: rgba(189,244,203,0.08);
}
.player-panel__stage-mark span {
  background: var(--toolbox-mint);
  box-shadow: 0 0 14px rgba(154,223,180,0.34);
}
.player-panel__stage-mark span:nth-child(2) {
  background: var(--toolbox-gold);
  box-shadow: 0 0 18px rgba(217,181,102,0.36);
}
.player-panel__stage-kicker {
  color: var(--toolbox-gold);
}
.player-panel__stage-title strong {
  color: var(--toolbox-text);
  text-shadow: 0 0 22px rgba(154,223,180,0.14);
}
.player-panel__tabs {
  background:
    linear-gradient(180deg, rgba(189,244,203,0.055), rgba(0,0,0,0.08)),
    rgba(4, 16, 12, 0.36);
  border-bottom-color: var(--toolbox-line);
}
.player-panel__tab,
.player-panel__action,
.pp-vw-btn,
.pp-memo-btn,
.pp-copy-btn,
.pp-share-big,
.pp-share-action,
.pp-range-btn,
.pp-wav-export-btn,
.pp-eqcomp-chip {
  border-color: var(--toolbox-line);
  background:
    var(--toolbox-metal-sheen),
    rgba(7, 24, 18, 0.58);
  color: var(--toolbox-muted);
  transition: border-color var(--toolbox-fast), background var(--toolbox-fast), color var(--toolbox-fast), transform var(--toolbox-fast), box-shadow var(--toolbox-fast);
}
.player-panel__tab::before {
  display: inline-grid;
  place-items: center;
  width: 1.45em;
  height: 1.45em;
  margin-right: 0.45em;
  border-radius: 999px;
  background: rgba(189,244,203,0.08);
  color: var(--toolbox-mint-bright);
  font-size: 0.76em;
  vertical-align: -0.05em;
}
.player-panel__tab[data-tab="license"]::before { content: "?"; }
.player-panel__tab[data-tab="credit"]::before { content: "C"; }
.player-panel__tab[data-tab="share"]::before { content: "S"; }
.player-panel__tab[data-tab="video"]::before { content: "V"; }
.player-panel__tab[data-tab="duration"]::before { content: "W"; }
.player-panel__tab[data-tab="eqcomp"]::before { content: "EQ"; width: 2em; }
.player-panel__tab[data-tab="memo"]::before { content: "M"; }
.player-panel__tab:hover,
.player-panel__action:hover,
.pp-vw-btn:hover,
.pp-memo-btn:hover,
.pp-copy-btn:hover,
.pp-share-big:hover,
.pp-share-action:hover,
.pp-range-btn:hover,
.pp-wav-export-btn:hover,
.pp-eqcomp-chip:hover {
  color: var(--toolbox-text);
  border-color: var(--toolbox-line-strong);
  box-shadow: var(--toolbox-shadow-active);
  transform: translateY(-1px);
}
.player-panel__tab.is-mobile-disabled,
.player-panel__video-launch.is-mobile-disabled,
.player-panel__tab.is-mobile-disabled:hover,
.player-panel__video-launch.is-mobile-disabled:hover {
  opacity: 0.48;
  cursor: not-allowed;
  filter: grayscale(0.55);
  color: rgba(230,238,219,0.58);
  border-color: var(--toolbox-line);
  box-shadow: none;
  transform: none;
}
.player-panel__tab.is-active,
.pp-eqcomp-chip.is-active,
.pp-range-btn--primary,
.pp-wav-export-btn--range,
.pp-vw-btn--insert {
  color: #fff4c6;
  border-color: rgba(217,181,102,0.62);
  background:
    linear-gradient(135deg, rgba(217,181,102,0.28), rgba(154,223,180,0.16)),
    rgba(13, 42, 29, 0.88);
  box-shadow: 0 0 0 1px rgba(217,181,102,0.10), 0 0 30px rgba(154,223,180,0.14);
}
.pp-stage-pill,
.pp-license-list,
.pp-credit-block,
.pp-share-card,
.pp-export-check,
.pp-loop-advanced,
.pp-memo-area,
.pp-memo-list,
.pp-eqcomp-head,
.pp-eqcomp-details,
.pp-vw-shell,
.pp-vw-timeline-board,
.pp-vw-editor {
  border-color: var(--toolbox-line);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(0,0,0,0.06)),
    var(--toolbox-glass);
  box-shadow: var(--toolbox-shadow-card), inset 0 1px 0 rgba(255,255,255,0.055);
}
.pp-waveform-wrap {
  border-color: rgba(189,244,203,0.24);
  background:
    radial-gradient(circle at 18% 0%, rgba(114,215,195,0.12), transparent 36%),
    linear-gradient(180deg, rgba(9,31,23,0.90), rgba(2,10,8,0.82));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035), 0 16px 44px rgba(0,0,0,0.30);
}
.pp-waveform-wrap::before {
  opacity: 0.48;
}
.pp-range-controls:not([hidden]),
.pp-range-fade-side,
.pp-eqcomp-meter-row,
.pp-eqcomp-canvas-wrap,
.pp-eqcomp-band,
.pp-eqcomp-comp,
.pp-vw-lane-track,
.pp-vw-mute,
.pp-vw-statusbar {
  border-color: rgba(189,244,203,0.16);
  background: rgba(4, 16, 12, 0.48);
}
.pp-panel-toast {
  border-color: rgba(217,181,102,0.48);
  background:
    linear-gradient(135deg, rgba(217,181,102,0.22), rgba(154,223,180,0.12)),
    rgba(4,16,12,0.95);
}

@media (max-width: 920px) {
  .pp-video-workbench { right: 10px; bottom: 98px; width: min(330px, calc(100vw - 20px)); }
  .pp-video-workbench--focus { bottom: auto; width: 100%; }
  .pp-vw-shell,
  .pp-video-workbench--focus .pp-vw-shell { grid-template-columns: 1fr; min-height: 96px; }
  .pp-video-workbench--focus .pp-vw-preview { min-height: 112px; }
  .pp-vw-meta { display: none; }
}
@media (max-width: 560px) {
  .pp-video-workbench { left: 10px; right: 10px; width: auto; }
  .pp-vw-shell,
  .pp-video-workbench--focus .pp-vw-shell { grid-template-columns: 1fr; }
  .pp-vw-body { padding: 10px; }
  .pp-vw-actions { gap: 5px; }
  .pp-vw-btn { min-height: 28px; padding: 6px 8px; font-size: 0.66rem; }
  .pp-vw-title { font-size: 0.78rem; }
}

/* Range controls with fade tools beside the selected range. */
.pp-range-controls:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(154px, 0.8fr) minmax(240px, 1.1fr) minmax(154px, 0.8fr);
  align-items: center;
  gap: 8px 10px;
}
.pp-range-controls:not([hidden]) > .pp-range-info,
.pp-range-controls:not([hidden]) > .pp-range-buttons {
  grid-column: 2;
}
.pp-range-controls:not([hidden]) > .pp-range-fade-side--in {
  grid-column: 1;
  grid-row: 1 / span 2;
}
.pp-range-controls:not([hidden]) > .pp-range-fade-side--out {
  grid-column: 3;
  grid-row: 1 / span 2;
}
.pp-controls-grid .pp-fade-row {
  display: none;
}
@media (max-width: 860px) {
  .pp-range-controls:not([hidden]) {
    grid-template-columns: 1fr;
  }
  .pp-range-controls:not([hidden]) > .pp-range-info,
  .pp-range-controls:not([hidden]) > .pp-range-buttons,
  .pp-range-controls:not([hidden]) > .pp-range-fade-side--in,
  .pp-range-controls:not([hidden]) > .pp-range-fade-side--out {
    grid-column: 1;
    grid-row: auto;
  }
}

.pp-video-workbench .pp-vw-meta,
.pp-video-workbench .pp-vw-statusbar {
  display: none !important;
}

.pp-video-workbench .pp-vw-progress {
  display: none !important;
}

.pp-video-workbench:not(.pp-video-workbench--resident) .pp-vw-lane--video > .pp-vw-video-volume {
  display: grid !important;
  position: static !important;
  grid-template-columns: 72px minmax(0, 1fr) 44px;
  width: auto !important;
  margin-top: 7px;
  padding: 4px 0 0;
  border: 0;
  border-top: 1px solid rgba(154, 223, 180, 0.12);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* OSの動き軽減設定では装飾的な登場演出だけを省略する。 */
@media (prefers-reduced-motion: reduce) {
  .pp-range-controls,
  .pp-video-workbench.is-attention .pp-vw-shell {
    animation: none;
  }
}

/* Match the actual compact/expanded player height, including safe area and keyboard. */
@media (max-width: 768px) {
  body.hmix-mobile-player .player-panel { bottom: calc(var(--hmix-player-height, 100px) + var(--hmix-keyboard-inset, 0px)); }
  body.hmix-mobile-player .player-panel.is-open,
  body.hmix-mobile-player .player-panel.is-open .player-panel__inner {
    height: min(640px, calc(var(--hmix-visual-height, 100dvh) - var(--hmix-player-height, 100px) - 12px));
    max-height: min(640px, calc(var(--hmix-visual-height, 100dvh) - var(--hmix-player-height, 100px) - 12px));
    min-height: 0;
  }
}

/* A first shelf for using the music; sound shaping opens without leaving the toolbox. */
.pp-tool-path { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 18px 10px; border-bottom: 1px solid var(--toolbox-line); }
.pp-tool-path__hint { color: var(--toolbox-muted); font-size: .76rem; line-height: 1.6; }
.player-panel .player-panel__tab[hidden],
.player-panel .player-panel__stage-status[hidden],
.player-panel .player-panel__video-launch[hidden] { display: none !important; }
@media (max-width: 768px) {
  .pp-tool-path { padding: 4px 12px 8px; gap: 8px; }
  .pp-tool-path__hint { font-size: .7rem; }
}

/* Closed tools must also be absent in WebViews without native inert support. */
.player-panel:not(.is-open) { visibility: hidden; pointer-events: none; }
.player-panel.is-open { visibility: visible; }

.pp-tool-path__hint { flex: 1 1 0; min-width: 0; }
.pp-tool-close { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 1px solid var(--toolbox-line); border-radius: var(--toolbox-radius-sm); background: var(--toolbox-metal-sheen), rgba(7,24,18,.58); color: var(--toolbox-muted); font: inherit; font-size: 1.5rem; cursor: pointer; }
.pp-tool-close:focus-visible { outline: 2px solid var(--toolbox-gold); outline-offset: 3px; }

/* A long video action must span both columns, never widen the signal-mark column. */
@media (max-width: 768px) {
  .player-panel__stage-head { grid-template-columns: max-content minmax(0, 1fr); }
  .player-panel__stage-mark { grid-column: 1; grid-row: 1; justify-self: start; width: max-content; }
  .player-panel__stage-title { grid-column: 2; grid-row: 1; min-width: 0; }
  .player-panel__video-launch { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; white-space: normal; }
  .player-panel__stage-status { grid-column: 1 / -1; grid-row: 3; min-width: 0; }
}

/* Readable basic tools and generous touch controls retain the brass/green materials. */
.player-panel .pp-tool-path__hint {font-size:12px;color:#c6d9c9;}
.player-panel .pp-license-note,.player-panel .pp-empty-hint,.player-panel .pp-share-hint {font-size:13px;line-height:1.85;color:#c6d9c9;}
.player-panel .player-panel__tab,.player-panel .pp-copy-btn,.player-panel .pp-memo-btn {min-height:44px;font-size:13px;}
.player-panel .pp-credit-label,.player-panel .pp-share-kit-label {font-size:12px;}
.player-panel .pp-license-note a {display:inline-flex;align-items:center;min-height:44px;}
@media(max-width:768px){
 .player-panel input[type="text"],.player-panel textarea {font-size:16px;}
 .player-panel .pp-memo-toolbar,.player-panel .pp-memo-footer {flex-wrap:wrap;}
 .player-panel .pp-tool-path {flex-wrap:wrap;}
 .player-panel .player-panel__tab {white-space:normal;}
}
/* Keep every tool entrance visible without horizontal tab scrolling. */
.player-panel .player-panel__tabs { flex-wrap: wrap; overflow: visible; }
.player-panel .player-panel__tablist { display: flex !important; flex: 1 1 auto; flex-wrap: wrap; gap: 6px; }
@media (max-width: 768px) {
  .player-panel .player-panel__tablist { display: grid !important; width: 100%; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .player-panel .player-panel__tab { padding: 7px 6px; font-size: 12px; line-height: 1.4; }
  .player-panel .player-panel__tabs-spacer { display: none; }
}