/* LYRA — 共通スタイル。
 * キャンバス・カード・編集ガイド(緑のトンボ+ヘックスバッジ)・Asterism線・モーダルは
 * CONSTELLATIONの css/style.css から流用した。LYRA固有の画面(入口・ソウル・アンサンブル)の
 * スタイルは、実装のたびにこの下へ追記していく。 */

:root {
  color-scheme: light;
  /* モックアップ(Design canvas、2026-09)の配色 */
  --bg: #faf8f3;
  --panel: #ffffff;
  --surface-2: #f4f0e6;
  --line: #e4ddd0;
  --line-strong: #ddd6c8;
  --text: #35302a;
  --ink: #2b2620;
  --muted: #8a8171;
  --faint: #a39a86;
  --accent: #b8863b;
  --accent-ink: #a9761f;
  --accent-deep: #8a4c1e;
  --accent-line: #cba55a;
  --accent-bg: #fdf6e6;
  --track: #ece5d5;
  --rust: #b3402b;
  --guide: #2e7d32;
  --serif: 'Noto Serif JP', serif;
  --mono: 'IBM Plex Mono', monospace;
  --sans: 'Noto Sans JP', sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* キャンバス端までパンした際のpull-to-refresh誤発火を防ぐ */
  overscroll-behavior: none;
}

button, input, select, textarea { font-family: inherit; }

/* ---------- ヘッダー ---------- */

.toolbar {
  position: relative;
  flex: none;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px 14px;
  padding: 12px 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  min-width: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: none;
}
.brand-orb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 4.6px, rgba(0,0,0,0.13) 4.6px 5.4px, transparent 5.4px 8px, rgba(0,0,0,0.13) 8px 8.8px, transparent 8.8px),
    radial-gradient(circle at 35% 30%, #d9a441, #7a2e3a 75%);
}
.brand-name {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.06em;
}

.crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 12px;
}
.crumb-sep { color: #cfc6b3; }
.crumb { color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
.crumb--current { color: var(--accent-ink); }
a.crumb:hover { color: var(--accent-ink); }

.toolbar-actions {
  display: flex;
  gap: 6px;
  flex: none;
}

.toolbar button {
  font-family: var(--sans);
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  white-space: nowrap;
  flex: none;
  cursor: pointer;
}

.toolbar button.secondary {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
}
.toolbar .icon-btn { padding: 4px 9px; font-size: 14px; }

.toolbar button:disabled { opacity: 0.35; cursor: not-allowed; }

.status {
  margin-left: auto;
  font-size: 11px;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 0 1 auto;
}

/* アンサンブルの舞台タブ(舞台のソウルが増えるたびに増える。入りきらない時は横スクロール) */
.ensemble-tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  min-width: 0;
  max-width: 55%;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 0 1 auto;
}
.ensemble-tabs::-webkit-scrollbar { display: none; }
.ensemble-tabs:empty { display: none; }
.ensemble-tabs-label {
  flex: none;
  align-self: center;
  font-size: 11px;
  color: var(--faint);
  margin-right: 6px;
  letter-spacing: 0.04em;
}
.ensemble-tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 4px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.ensemble-tab:hover { color: var(--accent-ink); }
.ensemble-tab-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--stage-color);
  opacity: 0.55;
}
.ensemble-tab--active { color: var(--accent-ink); border-bottom-color: var(--accent-ink); }
.ensemble-tab--active .ensemble-tab-dot { opacity: 1; }

@media (max-width: 640px) {
  .toolbar { padding: 10px 12px; gap: 6px 10px; flex-wrap: wrap; }
  .crumbs { order: 10; flex-basis: 100%; }
  .status { order: 11; flex-basis: 100%; margin-left: 0; }
  .ensemble-tabs { order: 12; flex-basis: 100%; max-width: none; }
}

/* 時間のかかる処理(Drive同期・Gemini呼び出し)の進行を、ヘッダー下端の細い線で示す */
.status-progress {
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
}
.status-progress[hidden] { display: none; }
.status-progress-bar {
  position: absolute; top: 0; left: 0; width: 0%; height: 100%;
  background: var(--accent);
  transition: width 0.25s ease-out;
}
.status-progress.indeterminate .status-progress-bar {
  width: 30%;
  animation: status-progress-slide 1.1s ease-in-out infinite;
}
@keyframes status-progress-slide {
  0% { left: -30%; }
  100% { left: 100%; }
}

/* ---------- 画面の土台 ---------- */

.stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
}

/* 画面ごとの浮遊UI。子要素だけが操作を受け付ける(空いている所はキャンバスに素通しする) */
.screen-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 30;
}
.screen-overlay > * { pointer-events: auto; }

/* ---------- キャンバス ---------- */

/* 背景はハンドオフ4.3節の「白基調+五線譜を思わせる薄い罫線」。5本の細線を1組として
   縦方向に繰り返す(1組=5本×8px間隔+組間の余白、モックアップの64px周期)。 */
.canvas-viewport {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  background-color: var(--bg);
  background-image: repeating-linear-gradient(
      180deg,
      transparent 0 8px,
      rgba(0, 0, 0, 0.035) 8px 9px, transparent 9px 16px,
      rgba(0, 0, 0, 0.035) 16px 17px, transparent 17px 24px,
      rgba(0, 0, 0, 0.035) 24px 25px, transparent 25px 32px,
      rgba(0, 0, 0, 0.035) 32px 33px, transparent 33px 40px,
      rgba(0, 0, 0, 0.035) 40px 41px, transparent 41px 64px
    );
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* アンサンブル画面: ホームの舞台自身の色を背景全体にごく薄く敷く */
.canvas-viewport--ambience {
  background-image:
    radial-gradient(ellipse at 50% 42%, var(--stage-ambience) 0%, transparent 65%),
    repeating-linear-gradient(
      180deg,
      transparent 0 8px,
      rgba(0, 0, 0, 0.035) 8px 9px, transparent 9px 16px,
      rgba(0, 0, 0, 0.035) 16px 17px, transparent 17px 24px,
      rgba(0, 0, 0, 0.035) 24px 25px, transparent 25px 32px,
      rgba(0, 0, 0, 0.035) 32px 33px, transparent 33px 40px,
      rgba(0, 0, 0, 0.035) 40px 41px, transparent 41px 64px
    );
}

.canvas-content {
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  transform-origin: 0 0;
}

/* ダブルタップでの「全体を俯瞰」ズーム中だけtransformをアニメーションさせる */
.canvas-content--animated {
  transition: transform 0.35s ease-out;
}

/* ---------- Asterism(ASTRガイドでの手動接続) ---------- */

.asterism-layer {
  position: absolute;
  top: 0; left: 0;
  width: 20000px;
  height: 20000px;
  overflow: visible;
  pointer-events: none;
}

.asterism-line {
  stroke: #c9bfa8;
  stroke-width: 1.6;
}

/* ASTRドラッグ中の仮の線 */
.asterism-line--drag {
  stroke: var(--guide);
  stroke-width: 2;
  stroke-dasharray: 5 4;
  opacity: 0.9;
}

/* 見えている細い線より広い透明な線を重ねてタップしやすくする(削除用) */
.asterism-line-hit {
  stroke: transparent;
  stroke-width: 16;
  pointer-events: auto;
  cursor: pointer;
}

@keyframes asterism-connect-flash {
  0% {
    stroke: var(--guide);
    stroke-width: 3.5;
    opacity: 1;
    filter: drop-shadow(0 0 7px rgba(46, 125, 50, 0.85));
  }
  100% {
    stroke: #c9bfa8;
    stroke-width: 1.6;
    opacity: 1;
    filter: drop-shadow(0 0 0 rgba(46, 125, 50, 0));
  }
}
.asterism-line--connect-flash {
  animation: asterism-connect-flash 0.8s ease-out forwards;
}

/* ---------- ボトムツールバー ---------- */

#bottombar[hidden] { display: none; }
#bottombar {
  flex: none;
  z-index: 50;
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  border-top: 1px solid var(--line);
  justify-content: center;
  backdrop-filter: blur(6px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tool-btn {
  flex: 0 0 auto;
  min-width: 56px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.01em;
  color: var(--muted);
  background: none;
  border: none;
  border-radius: 8px;
  padding: 7px 11px 5px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.tool-btn:hover { background: var(--surface-2); color: var(--text); }
.tool-btn:disabled { opacity: 0.35; cursor: not-allowed; background: none; }
.tool-btn svg { width: 19px; height: 19px; flex-shrink: 0; }

/* ---------- カード ---------- */

.star-card {
  position: absolute;
  top: 0; left: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(60, 50, 20, 0.06);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  touch-action: none;
  transition: box-shadow 0.15s ease-out;
}

.star-card-kind {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
}

/* テキスト欄は既定ではpointer-events:none(=カードの移動・キャンバスのパンを優先)。
   編集ガイドのEditボタン(またはEキー)で.star-card--editingが付いた時だけ入力できる。 */
.star-card-memo {
  flex: 1;
  width: 100%;
  min-height: 22px;
  padding: 0;
  resize: none;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  pointer-events: none;
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
.star-card--editing .star-card-memo { pointer-events: auto; }

/* 長押し開始直後(編集ガイドが出る前)の予兆: 影を徐々に濃くする */
.star-card--pressing {
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
  transition: box-shadow 0.28s ease-out;
}

/* 編集ガイド表示中のカード。transformはドラッグ中に毎フレーム書き換わるため、
   box-shadowだけをなめらかに変化させる。 */
.star-card--edit-guide {
  box-shadow: 0 0 0 2px var(--guide), 0 20px 44px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.12s ease-out;
  z-index: 5;
}

.star-card--astr-glow {
  box-shadow: 0 0 0 3px var(--guide), 0 0 26px 8px rgba(46, 125, 50, 0.65) !important;
  z-index: 6;
}

/* 編集ガイドのリサイズハンドル(緑のトンボ)。見た目より広いヒット領域(24x24)を持つ。 */
.star-card-handle {
  position: absolute;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 6;
  touch-action: none;
}

.star-card--edit-guide .star-card-handle { display: flex; }

.star-card-handle::after {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--guide);
  border: 2px solid #fff;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.star-card-handle[data-edge="nw"] { top: 0; left: 0; cursor: nwse-resize; }
.star-card-handle[data-edge="ne"] { top: 0; left: 100%; cursor: nesw-resize; }
.star-card-handle[data-edge="se"] { top: 100%; left: 100%; cursor: nwse-resize; }
.star-card-handle[data-edge="sw"] { top: 100%; left: 0; cursor: nesw-resize; }
.star-card-handle[data-edge="n"] { top: 0; left: 50%; cursor: ns-resize; }
.star-card-handle[data-edge="s"] { top: 100%; left: 50%; cursor: ns-resize; }
.star-card-handle[data-edge="e"] { top: 50%; left: 100%; cursor: ew-resize; }
.star-card-handle[data-edge="w"] { top: 50%; left: 0; cursor: ew-resize; }

/* 編集ガイドのヘックスバッジ(ヘックスメニュー)。
   左辺=Edit、右辺=Delete、下=ASTR。新しいアクションを足す時は、既存のヘックスと
   重ならない位置(上下左右の空き)を選び、実機でカード矩形の外側にあるか確認すること。 */
.star-card-hex {
  position: absolute;
  width: 64px;
  height: 40px;
  clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%);
  background: var(--guide);
  color: #fff;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
  z-index: 7;
  cursor: pointer;
}

.star-card--edit-guide .star-card-hex { display: flex; }

.star-card-hex--edit   { left: 0; top: 50%; transform: translate(-115%, -50%); }
.star-card-hex--delete { left: 100%; top: 50%; transform: translate(15%, -50%); }
.star-card-hex--astr {
  /* 2026-09-25: 以前はカードの中央に重ねていたが、テキストカードの編集中に文字を隠して邪魔、という
     実機の指摘を受け、カードの下の外側へ移した(Edit=左、Delete=右、ASTR=下) */
  left: 50%;
  top: 100%;
  width: 56px;
  height: 56px;
  transform: translate(-50%, 10px);
  letter-spacing: 0.04em;
}

.star-card-hex-strut {
  position: absolute;
  height: 2px;
  width: 20px;
  background: var(--guide);
  opacity: 0.7;
  z-index: 6;
}
.star-card-hex-strut--edit { right: -20px; top: 50%; transform: translateY(-50%); }
.star-card-hex-strut--delete { left: -20px; top: 50%; transform: translateY(-50%); }

/* 課題カード(アンサンブル)だけの「聴く」「鳴らす」: カードの上の外側に左右に並べる(2026-09-25、
   右下の招集パネルを廃止して移した。その課題カードのまとまりが対象) */
.star-card-hex--listen,
.star-card-hex--sketch,
.star-card-hex--beat { left: 50%; top: 0; background: var(--accent); letter-spacing: 0.04em; }
/* 2026-09-25: 「ビート」を足して3つ並びに(聴く・鳴らす・ビート)。ソウルカードではビートだけが真ん中に出る */
.star-card-hex--listen { transform: translate(calc(-150% - 6px), calc(-100% - 10px)); }
.star-card-hex--sketch { transform: translate(-50%, calc(-100% - 10px)); }
.star-card-hex--beat { transform: translate(calc(50% + 6px), calc(-100% - 10px)); background: #6d5a8a; }
.star-card--ens-soul .star-card-hex--beat { transform: translate(-50%, calc(-100% - 10px)); }
/* 画像カード(2026-09-26)は「鳴らす」「ビート」の2つを真ん中で左右に並べる */
.star-card--ens-image .star-card-hex--sketch { transform: translate(calc(-100% - 3px), calc(-100% - 10px)); }
.star-card--ens-image .star-card-hex--beat { transform: translate(3px, calc(-100% - 10px)); }
.star-card-hex-strut--listen,
.star-card-hex-strut--sketch,
.star-card-hex-strut--beat { display: none; }

/* 気づき⇔課題の入れ替え(2026-09-25): カードの左下の外側(ASTRの左隣) */
.star-card-hex--swap { left: 0; top: 100%; transform: translate(-45%, 14px); background: #7d6f58; font-size: 10.5px; }
.star-card-hex-strut--swap { display: none; }
/* 画像カードの「入替」(2026-09-26): 同じ左下。位置・線はそのまま画像だけを入れ替える */
.star-card-hex--replace { left: 0; top: 100%; transform: translate(-45%, 14px); background: #7d6f58; font-size: 10.5px; }
.star-card-hex-strut--replace { display: none; }

/* ---------- モーダル(設定・選択ダイアログ共通) ---------- */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  /* 確認ダイアログは常に最前面であるべきなので、今後追加する全オーバーレイより上に置く */
  z-index: 220;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  padding: 16px;
}

.modal-overlay.visible { display: flex; }

.modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  /* 2026-09-25: MIDIを作るダイアログ(型・物語・ゲージ…)が縦に長くなり、「作る」ボタンが画面の外に見切れていた。
     画面の高さに収めて中をスクロールさせ、ボタンの行は下に貼り付ける(.modal-actions の sticky) */
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
}

.modal h2 {
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 500;
  margin: 0 0 8px;
  font-size: 18px;
}

.modal-desc {
  margin: 0 0 16px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}

.modal label,
.modal-field-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--muted);
  margin-bottom: 12px;
}

.modal input,
.modal select,
.modal textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 9px 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
}

.modal-error {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--rust);
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  /* 長いダイアログでも常に見えるよう、スクロールする枠の下に貼り付ける(下の余白ぶんを負のマージンで打ち消す) */
  position: sticky;
  bottom: -22px;
  z-index: 2;
  margin: 12px -22px -22px;
  padding: 12px 22px 22px;
  background: var(--panel);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 -10px 12px -10px rgba(0, 0, 0, 0.12);
}

.modal button {
  font-family: var(--sans);
  background: var(--accent);
  color: #fff9ee;
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 12px;
  cursor: pointer;
}

.modal button.secondary {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
}

/* 元に戻せない破壊的な選択肢であることを視覚的にも区別する(showChoiceDialog()のdanger) */
.modal button.danger {
  background: var(--rust);
  border: 1px solid var(--rust);
  color: #fff;
}

/* ---------- ?debug 付きURLでのみ表示される簡易デバッグパネル ---------- */

#debug-toggle {
  position: fixed; right: 8px; bottom: 80px; z-index: 300;
  font-size: 16px; background: #fff; border: 1px solid var(--line); border-radius: 50%;
  width: 34px; height: 34px; cursor: pointer;
}
#debug-log {
  position: fixed; left: 8px; right: 8px; bottom: 120px; z-index: 300;
  max-height: 40vh; overflow: auto; margin: 0; padding: 8px;
  background: rgba(0, 0, 0, 0.85); color: #0f0; font-size: 10px; white-space: pre-wrap;
}

/* ---------- フォームダイアログの部品 ---------- */

.modal textarea { resize: vertical; line-height: 1.6; }
.modal-field { margin-bottom: 12px; }
.modal-field-label { margin-bottom: 6px; }
.modal-range { margin-bottom: 6px; }
.modal-range .modal-field-label { margin-bottom: 2px; }
.modal-range output { color: var(--accent-deep); font-weight: 600; margin-left: 4px; }
.modal-range-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--faint); }
.modal-range-row span { flex: none; width: 5.5em; }
.modal-range-row span:last-child { text-align: right; }
.modal-range-row input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); }
.modal-range-hint { font-size: 10.5px; color: var(--faint); margin-top: 2px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.modal .swatch {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #fff;
  background: radial-gradient(circle at 35% 30%, var(--c), color-mix(in srgb, var(--c) 45%, #000));
  box-shadow: 0 0 0 1px var(--line);
  cursor: pointer;
}
.modal .swatch--active { box-shadow: 0 0 0 2px var(--ink); }

/* ---------- 編集ガイドの共通の変種 ---------- */

/* 大きさを変えないカード(ソウルの星・パラメータのピンなど)はリサイズハンドルを出さない */
.star-card--no-resize.star-card--edit-guide .star-card-handle { display: none; }

/* ---------- 入口画面(ソウルの星) ---------- */

.star-card--soul {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  align-items: center;
  text-align: center;
  gap: 0;
  cursor: pointer;
  transition: opacity 0.2s ease-out;
}
.star-card--soul.star-card--edit-guide {
  box-shadow: 0 0 0 2px var(--guide);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
}
.star-card--soul.star-card--pressing { box-shadow: none; }
.soul-orb { width: 96px; height: 96px; transition: transform 0.2s ease-out; }
.star-card--soul:hover .soul-orb { transform: scale(1.04); }
.star-card--pressing .soul-orb { transform: scale(0.96); }
.soul-orb-svg { display: block; }
.soul-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-top: 6px;
  line-height: 1.35;
  word-break: break-word;
}
.soul-meta { font-size: 10px; color: var(--faint); margin-top: 1px; }
.star-card--dim { opacity: 0.18; }
@keyframes soul-found {
  0% { filter: drop-shadow(0 0 0 rgba(184, 134, 59, 0)); }
  30% { filter: drop-shadow(0 0 14px rgba(184, 134, 59, 0.9)); }
  100% { filter: drop-shadow(0 0 0 rgba(184, 134, 59, 0)); }
}
.star-card--found { animation: soul-found 1.4s ease-out; }

.screen-overlay--home .home-search {
  position: absolute;
  top: 22px;
  right: 24px;
  width: min(320px, calc(100% - 48px));
}
.home-search label {
  display: block;
  font-size: 10px;
  color: var(--faint);
  margin-bottom: 4px;
  text-align: right;
}
.home-search input {
  width: 100%;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 9px 12px;
  color: var(--text);
  font-size: 13px;
  box-shadow: 0 1px 3px rgba(60, 50, 20, 0.05);
  outline: none;
}
.home-search input:focus { border-color: var(--accent-line); }

.home-daily-slot { position: absolute; top: 22px; left: max(24px, calc(50% - 360px)); width: min(300px, calc(100% - 48px)); }
.home-daily-slot:empty { display: none; }

.home-new-soul {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 96px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.home-new-soul-ring {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 2px dashed #cfc6b3;
  background: rgba(250, 248, 243, 0.8);
  color: #beb49c;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s;
}
.home-new-soul:hover .home-new-soul-ring { border-color: var(--accent-line); color: var(--accent-ink); }
.home-new-soul-label { font-size: 12px; color: var(--faint); }

@media (max-width: 640px) {
  .screen-overlay--home .home-search { top: 12px; right: 12px; width: calc(100% - 24px); }
  .home-search label { display: none; }
  .home-daily-slot { top: 64px; left: 12px; width: calc(100% - 24px); }
  .home-new-soul { right: 12px; bottom: 12px; }
}

/* ---------- アンサンブル画面 ---------- */

.ens-heading {
  position: absolute;
  top: 22px;
  left: 28px;
  pointer-events: none !important;
}
.ens-title { font-family: var(--serif); font-size: 15px; color: var(--muted); letter-spacing: 0.08em; }
.ens-subtitle { font-size: 11px; color: var(--faint); margin-top: 2px; }

.star-card--ens {
  padding: 10px 12px;
  gap: 3px;
  min-width: 120px;
}
.ens-card-kind { font-size: 10px; color: var(--faint); }
.star-card--ens .star-card-memo { font-size: 12px; line-height: 1.6; color: var(--ink); }

/* ---------- 画面の土台(右パネルつき) ---------- */

.stage-main {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
}

.side-panel {
  flex: none;
  width: 350px;
  background: var(--panel);
  border-left: 1px solid var(--line);
  box-shadow: -4px 0 16px rgba(60, 50, 20, 0.04);
  padding: 22px 24px 28px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 40;
}
.side-panel[hidden] { display: none; }

@media (max-width: 899px) {
  /* スマホ・狭い画面では下から出るシートにする(キャンバスを潰さない) */
  .side-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: 62vh;
    border-left: none;
    border-top: 1px solid var(--line);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -10px 30px rgba(60, 50, 20, 0.16);
    padding: 16px 18px calc(24px + env(safe-area-inset-bottom, 0px));
    z-index: 70;
  }
}

.panel-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
}
.panel-title-wrap { flex: 1; min-width: 0; }
.panel-title,
.panel-title-input {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink);
  line-height: 1.4;
}
.panel-title-input,
.panel-range-input {
  width: 100%;
  border: none;
  border-bottom: 1px dashed transparent;
  background: transparent;
  padding: 0;
  outline: none;
}
.panel-title-input:focus,
.panel-range-input:focus { border-bottom-color: var(--accent-line); }
.panel-sub { font-size: 11px; color: var(--faint); margin-top: 3px; display: flex; gap: 4px; align-items: baseline; }
.panel-range-input { font-size: 11px; color: var(--faint); width: auto; flex: 1; min-width: 60px; }
.panel-close {
  flex: none;
  border: none;
  background: none;
  color: var(--faint);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.panel-state-dot {
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: 8px;
  border-radius: 50%;
  border: 1.5px dashed var(--accent-line);
  background: #fff;
}
.panel-state-dot--verified { border-style: solid; background: var(--accent); border-color: var(--accent); }

.panel-label {
  font-size: 10px;
  color: var(--faint);
  letter-spacing: 0.05em;
  margin-bottom: 5px;
}
.panel-label--accent { color: var(--accent-ink); }
.panel-text {
  display: block;
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text);
  padding: 0;
  margin-bottom: 14px;
  overflow: hidden;
}
.panel-text::placeholder { color: #c9bfa8; }
.panel-text:focus { background: #fffdf7; box-shadow: 0 0 0 4px #fffdf7; }

.reading--multi {
  border-left: 2px solid var(--track);
  padding-left: 10px;
  margin-bottom: 8px;
}
.reading-source { font-size: 11px; color: var(--accent-deep); margin-bottom: 6px; }

.analog-box {
  border: 1px dashed var(--accent-line);
  border-radius: 8px;
  padding: 12px 14px 0;
  margin-bottom: 16px;
  background: var(--accent-bg);
}
.analog-box .panel-text { color: #5c4c26; }
.analog-box .panel-text:focus { background: #fffaf0; box-shadow: 0 0 0 4px #fffaf0; }

.panel-section { margin-bottom: 16px; }
.panel-section--soul { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 6px; }
.panel-source { font-size: 11px; color: #6d6455; line-height: 1.7; }
.panel-empty { font-size: 11px; color: var(--faint); line-height: 1.7; }
.panel-pin { font-size: 11px; color: #6d6455; display: flex; align-items: center; gap: 6px; }
.pin-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.6px dashed var(--accent);
  display: inline-block;
}
.pin-dot--pinned { border-style: solid; background: var(--accent); }

.link-list { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.link-chip {
  font-size: 11px;
  border-radius: 5px;
  padding: 4px 6px 4px 9px;
  color: #8a4c1e;
  background: #f7e9d8;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.link-chip--similar_to { color: #3e4d7a; background: #e7ebf7; }
.link-chip--contrasts_with { color: #4f6b3f; background: #e8f0e1; }
.link-chip-remove { border: none; background: none; color: inherit; opacity: 0.5; cursor: pointer; padding: 0 2px; font-size: 13px; }
.panel-link-btn {
  margin-top: 8px;
  border: none;
  background: none;
  color: var(--accent-ink);
  font-size: 11px;
  padding: 0;
  cursor: pointer;
}

.note-item { border-left: 2px solid var(--track); padding: 2px 0 2px 10px; margin-bottom: 8px; }
.note-item--ensemble { border-left-color: var(--accent-line); }
.note-meta { font-size: 10px; color: var(--faint); }
.note-text { font-size: 12px; line-height: 1.7; color: var(--text); white-space: pre-wrap; }

.panel-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.btn-primary,
.btn-secondary,
.btn-small,
.btn-text-danger {
  font-size: 12px;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
.btn-primary { background: var(--accent); color: #fff9ee; border: none; padding: 10px 16px; }
.btn-primary:hover { background: #a9772f; }
.btn-primary:disabled { opacity: 0.5; cursor: default; }
.btn-secondary { background: #fff; border: 1px solid var(--line-strong); color: var(--muted); padding: 9px 16px; }
.btn-secondary:hover { border-color: var(--accent-line); color: var(--accent-ink); }
.btn-text-danger { background: none; border: none; color: var(--rust); padding: 6px; font-size: 11px; opacity: 0.8; }
.btn-small {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  padding: 5px 10px;
  font-size: 11px;
}
.btn-small:hover { border-color: var(--accent-line); color: var(--accent-ink); }
.panel-inline-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.param-list { display: flex; flex-direction: column; gap: 2px; }
.param-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: none;
  text-align: left;
  font-size: 12px;
  color: var(--ink);
  padding: 6px 4px;
  border-radius: 5px;
  cursor: pointer;
}
.param-row:hover { background: var(--surface-2); }
.param-row-tag { margin-left: auto; font-size: 10px; color: var(--faint); }

/* ---------- ソウル画面 ---------- */

.soul-topbar {
  position: absolute;
  top: 14px;
  left: 84px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none !important;
}
.soul-progress { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--muted); }
.soul-progress-track { width: 120px; height: 4px; background: var(--track); border-radius: 2px; overflow: hidden; }
.soul-progress-fill { height: 100%; transition: width 0.4s ease-out; }
.soul-badge { display: flex; align-items: center; gap: 7px; font-size: 10px; color: var(--faint); }

.module-tabs {
  position: absolute;
  top: 44px;
  left: 0;
  bottom: 0;
  width: 64px;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  overflow-y: auto;
  pointer-events: none !important;
}
.module-tabs > * { pointer-events: auto; }
.module-tab {
  flex: none;
  width: 46px;
  min-height: 62px;
  border-radius: 10px 0 0 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-right: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 0;
  text-decoration: none;
  cursor: pointer;
}
.module-tab--noshot { border-style: dashed; border-right: none; }
.module-tab-dot { width: 6px; height: 6px; border-radius: 50%; background: #b3a98f; }
.module-tab--noshot .module-tab-dot { background: none; border: 1.3px dashed #b3a98f; }
.module-tab-label {
  font-size: 10px;
  color: var(--muted);
  writing-mode: vertical-rl;
  letter-spacing: 0.05em;
  max-height: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.module-tab--active {
  width: 52px;
  background: var(--accent-bg);
  border-color: var(--accent-line);
  box-shadow: -2px 2px 8px rgba(184, 134, 59, 0.12);
}
.module-tab--active .module-tab-dot { width: 7px; height: 7px; background: var(--accent); border: none; }
.module-tab--active .module-tab-label { color: var(--accent-deep); }
.module-tab-add {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px 0 0 10px;
  background: transparent;
  border: 1px dashed #cfc6b3;
  border-right: none;
  color: var(--faint);
  font-size: 16px;
  cursor: pointer;
}
.module-tab-add:hover { color: var(--accent-ink); border-color: var(--accent-line); }

.soul-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100% - 120px));
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
  pointer-events: none !important;
}
.soul-empty-title { font-family: var(--serif); font-size: 15px; color: var(--ink); margin-bottom: 6px; }

/* 貼り付けたスクリーンショット(キャンバス座標の左上に敷く)。<img>で表示する
   (transform: scale()下でbackground-imageの解像度が追従しないモバイルの制約への対策) */
.soul-shot {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(60, 50, 20, 0.14);
  border: 1px solid var(--line);
  background: #2c2b30;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
  object-fit: contain;
}
.soul-shot--missing { background: repeating-linear-gradient(45deg, #eee7da 0 10px, #f4efe5 10px 20px); }

/* モジュールのハブ(このページの根) */
.star-card--hub {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  width: 60px;
  align-items: center;
  gap: 3px;
  cursor: pointer;
}
.star-card--hub.star-card--edit-guide { box-shadow: none; }
.hub-node {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 7px, rgba(203, 165, 90, 0.18) 7px 8px, transparent 8px 12.5px, rgba(203, 165, 90, 0.18) 12.5px 13.5px, transparent 13.5px),
    #fff;
  border: 1.5px solid var(--accent-line);
  box-shadow: 0 2px 8px rgba(60, 50, 20, 0.12);
}
.star-card--hub.star-card--edit-guide .hub-node { box-shadow: 0 0 0 2px var(--guide); }
.hub-label {
  font-size: 9px;
  color: var(--muted);
  background: rgba(250, 248, 243, 0.85);
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
}

/* パラメータのピン。点線=未確認、実線=確認済み(テキストラベルは使わない、ハンドオフ4.2節) */
.star-card--param {
  flex-direction: row;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1.4px dashed #b3a98f;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 8px rgba(20, 18, 14, 0.18);
  white-space: nowrap;
  cursor: pointer;
}
.star-card--param.star-card--verified { border: 1px solid var(--line); background: #fff; }
.star-card--param.star-card--selected {
  background: var(--accent-bg);
  border-color: var(--accent-line);
  box-shadow: 0 2px 10px rgba(184, 134, 59, 0.3);
}
.star-card--param.star-card--unpinned { opacity: 0.9; }
.param-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.6px dashed var(--accent);
  background: #fff;
}
.star-card--verified .param-dot { border-style: solid; background: var(--accent); }
.param-name { font-size: 11px; color: var(--ink); }
.star-card--param:not(.star-card--verified) .param-name { color: #6d6455; }
.param-hint {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 9px;
  color: #ffffffd0;
  background: #201f24b0;
  padding: 2px 7px;
  border-radius: 5px;
  pointer-events: none;
}
.star-card--param.star-card--edit-guide .param-hint,
.star-card--param:not(.star-card--first-unpinned) .param-hint { display: none; }

@media (max-width: 640px) {
  .soul-topbar { left: 70px; right: 12px; top: 8px; }
  .soul-badge span { display: none; }
  .soul-progress-track { width: 70px; }
}
.ens-card-title { font-size: 12px; color: var(--ink); line-height: 1.5; }
.star-card--ens-missing { opacity: 0.55; }
.star-card--ens-soul {
  background: color-mix(in srgb, var(--soul-color) 5%, #fff);
  border-color: color-mix(in srgb, var(--soul-color) 55%, #fff);
  border-radius: 10px;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--soul-color) 18%, transparent);
}
.ens-card-soulhead { display: flex; align-items: center; gap: 6px; font-size: 10px; color: color-mix(in srgb, var(--soul-color) 70%, #000); margin-bottom: 3px; }
.ens-card-soulhead svg { flex: none; }
.star-card--ens-soul .ens-card-title { font-size: 13px; }
/* 画像カード(2026-09-26): 画像そのものと、その印象の文(Editで書ける。空なら「鳴らす」「ビート」の時にGeminiが書く) */
.star-card--ens-image { padding: 8px; }
.ens-image {
  display: block;
  width: 100%;
  height: auto;
  min-height: 40px;
  border-radius: 4px;
  background: #f1ece2;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
  margin: 3px 0 4px;
}
.ens-image-missing { font-size: 11px; color: #9a8f7c; background: #f1ece2; border: 1px dashed #cfc5b2; border-radius: 4px; padding: 14px 8px; margin: 3px 0 4px; line-height: 1.5; text-align: center; }
.star-card--ens-image .star-card-memo { font-size: 11px; color: #6d6455; }
.panel-image { display: block; max-width: 100%; border-radius: 6px; -webkit-user-drag: none; }

/* ---------- 資料パネル(解体パイプライン) ---------- */

.source-list { display: flex; flex-direction: column; gap: 12px; }
.source-row { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #fffdf9; }
.source-title { font-size: 12px; color: var(--ink); line-height: 1.5; }
.source-url {
  display: block;
  font-size: 10px;
  color: var(--accent-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}
.source-state { font-size: 10px; color: var(--faint); margin-top: 3px; }
.btn-small--accent { border-color: var(--accent-line); color: var(--accent-ink); background: var(--accent-bg); }
.btn-small:disabled { opacity: 0.45; cursor: default; }

.decompose-running {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--accent-line);
  background: var(--accent-bg);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.decompose-running-text { flex: 1; font-size: 11px; color: var(--accent-deep); line-height: 1.6; }
.decompose-running-text::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: decompose-pulse 1.2s ease-in-out infinite;
}
@keyframes decompose-pulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

.vocab-row { display: flex; gap: 10px; align-items: flex-start; }
.vocab-term {
  flex: none;
  width: 44px;
  font-family: var(--serif);
  font-size: 12px;
  color: var(--accent-deep);
  line-height: 1.7;
}
.vocab-row .panel-text { margin-bottom: 6px; }

/* アンサンブルの出典カード */
.star-card--ens-source .ens-card-title { font-size: 12px; }
.ens-card-sub { font-size: 11px; color: #6d6455; margin-top: 2px; line-height: 1.5; }

/* ---------- アンサンブル: 招集パネル・発言カード ---------- */

@media (max-width: 640px) {
  .ens-heading { top: 12px; left: 14px; }
}

/* 対象のまとまり(最後にタップ/移動したカードのまとまり)に含まれるカード */
.star-card--ens.star-card--in-focus {
  border-color: var(--accent-line);
  box-shadow: 0 2px 8px rgba(184, 134, 59, 0.14);
}

.ens-card-kind--accent { color: var(--accent-ink); }
.star-card--ens-task-app {
  background: var(--accent-bg);
  border: 1px dashed var(--accent-line);
}
.star-card--ens-task-app .ens-card-title { color: #5c4c26; }
.ens-dot-unverified {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  border: 1.4px dashed var(--accent);
  vertical-align: 1px;
}

.star-card--ens-speech {
  border: 1px solid var(--accent-line);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 10px 30px rgba(60, 50, 20, 0.14);
  gap: 8px;
  z-index: 3;
}
.speech-head { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--accent-ink); letter-spacing: 0.04em; margin-bottom: 2px; }
.speech-avatars { display: flex; flex: none; }
.speech-avatars svg { border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.speech-avatars svg + svg { margin-left: -8px; }
.speech-voice { font-size: 12px; color: var(--text); line-height: 1.7; }
.speech-speaker { font-weight: 500; }
.speech-chain {
  border-top: 1px solid var(--line);
  padding-top: 8px;
  font-size: 11px;
  color: #5c4c26;
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.speech-chain-label {
  display: inline-block;
  min-width: 58px;
  margin-right: 6px;
  font-size: 10px;
  color: var(--faint);
}
.speech-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.speech-feedback { font-size: 10px; color: var(--faint); }
.speech-feedback--worked { color: #4f7a3f; }
.speech-feedback--not { color: var(--rust); }

.panel-readonly { font-size: 12px; color: var(--text); line-height: 1.7; margin-bottom: 12px; white-space: pre-wrap; }
.analog-box .panel-readonly { color: #5c4c26; }
.yt-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; margin-bottom: 12px; border-radius: 8px; overflow: hidden; background: #000; }
.yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
a.btn-secondary { display: block; }

/* ---------- MIDI・オーディオのカード ---------- */

.star-card--ens-midi {
  background: #fffdf7;
  border: 1px solid var(--accent-line);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(184, 134, 59, 0.12);
}
.midi-head { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.midi-icon {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: var(--accent-bg);
  border: 1px solid var(--accent-line);
  color: var(--accent-ink);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ens-card-sub--accent { color: var(--accent-ink); }
.piano-roll { display: block; height: 36px; margin-top: 6px; background: #f7f2e7; border-radius: 4px; }
.midi-chords { font-size: 11px; letter-spacing: 0.02em; }
.midi-concept { font-size: 11px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.midi-writeup { font-size: 12px; line-height: 1.8; color: var(--ink); }
.midi-drags { display: flex; flex-wrap: wrap; gap: 6px; }
.midi-drag { font-size: 12px; padding: 4px 10px; border: 1px dashed var(--accent); border-radius: 5px; color: var(--accent-deep); background: #fdf6e8; cursor: grab; user-select: none; }
.midi-drag:active { cursor: grabbing; }
.midi-drag-hint { font-size: 10px; color: var(--faint); margin-top: 6px; line-height: 1.6; }
.sketch-sign { display: flex; flex-direction: column; gap: 1px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 12px; line-height: 1.6; }
.sketch-sign:last-child { border-bottom: none; }
.sketch-trait { color: var(--muted); font-size: 11px; }
.sketch-device { color: var(--ink); }
.sketch-chords { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.sketch-chord { font-size: 12px; padding: 2px 7px; border: 1px solid var(--line); border-radius: 4px; background: #f7f2e7; color: var(--ink); }
.roll-bars line { stroke: #e4ddd0; stroke-width: 0.6; }
.roll-marker { stroke: var(--accent-deep); stroke-width: 0.8; stroke-dasharray: 2 2; }
.waveform { display: block; height: 28px; margin-top: 6px; }
.waveform rect { fill: #b3a98f; }
.panel-roll { margin-bottom: 14px; }
.panel-roll .waveform { height: 60px; }
.audio-duration { font-size: 10px; color: var(--faint); align-self: center; margin-left: auto; font-family: var(--mono); }

/* ---------- 入口画面の今日の課題 ---------- */

.home-daily {
  border: 1px solid #e6d5ab;
  background: var(--accent-bg);
  border-radius: 10px;
  padding: 14px 18px;
}
.home-daily-label { font-size: 10px; color: var(--accent-ink); letter-spacing: 0.08em; margin-bottom: 5px; }
.home-daily-text { font-size: 13px; color: #3a3327; line-height: 1.6; }
.home-daily-reason { font-size: 11px; color: #6d6455; line-height: 1.6; margin-top: 4px; }
.home-daily-link { display: inline-block; margin-top: 8px; font-size: 12px; color: #8a611c; text-decoration: none; }
.home-daily-link:hover { color: var(--accent-deep); }

/* ---------- 設定ダイアログのチェック欄 ---------- */

.modal .modal-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--text);
  line-height: 1.6;
  margin: 4px 0 14px;
}
.modal .modal-check[hidden] { display: none; }
.modal .modal-check input { width: auto; margin: 3px 0 0; display: inline-block; }

/* ---------- パラメータレシピ(右パネル) ---------- */

.recipe-group { margin-bottom: 16px; }
.recipe-where {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
}
.recipe-where svg { flex: none; }
.recipe-sep { color: #cfc6b3; }
.recipe-row {
  display: block;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  background: #fff;
  text-decoration: none;
  color: inherit;
}
.recipe-row--link:hover { border-color: var(--accent-line); background: var(--accent-bg); }
.recipe-row-main { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.recipe-param { font-size: 12px; color: var(--ink); font-weight: 500; }
.recipe-value { font-size: 12px; color: var(--accent-deep); font-family: var(--mono); text-align: right; }
.recipe-intent { font-size: 11px; color: #6d6455; line-height: 1.6; margin-top: 2px; }
.recipe-miss { font-size: 10px; color: var(--rust); margin-top: 3px; line-height: 1.5; }

/* ---------- モジュールのUI上の場所(左タブの小見出し・概要パネルの入力欄) ---------- */

.module-group-label {
  flex: none;
  width: 52px;
  margin-top: 6px;
  padding: 2px 4px 0;
  border-top: 1px solid var(--line);
  font-size: 9px;
  line-height: 1.3;
  color: var(--faint);
  text-align: center;
  letter-spacing: 0.04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
.panel-inline-input {
  width: 100%;
  border: none;
  border-bottom: 1px dashed var(--line-strong);
  background: transparent;
  padding: 2px 0;
  font-size: 12px;
  color: var(--text);
  outline: none;
}
.panel-inline-input:focus { border-bottom-color: var(--accent-line); }

/* MIDIの改善版カード: どのコメントを受けて作り直したか */
.midi-comment { color: var(--muted); font-size: 10px; }

/* レシピで設定し終えた行(小窓のチェック) */
.recipe-row--done { opacity: 0.5; }


/* Shift+A のソウル一覧(アンサンブル) */
.soul-picker { width: min(420px, calc(100vw - 32px)); }
.soul-picker-list { max-height: min(60vh, 520px); overflow-y: auto; margin: 4px -6px 0; padding: 0 6px; }
.soul-picker-cat { font-size: 11px; color: var(--faint); letter-spacing: 0.05em; margin: 12px 0 4px; }
.modal .soul-picker-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; margin-bottom: 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); font-size: 13px; font-weight: 500; text-align: left; cursor: pointer; box-shadow: none; }
.modal .soul-picker-item:hover, .modal .soul-picker-item:focus-visible { border-color: var(--accent); background: #fdf6e8; color: var(--ink); outline: none; }
.soul-picker-item svg { flex: none; }
.soul-picker-count { margin-left: auto; font-size: 11px; color: var(--faint); }
.midi-rumination { font-size: 11px; color: var(--muted); margin-top: 2px; }

.roll-sel { fill: rgba(184, 134, 59, 0.12); stroke: var(--accent-deep); stroke-width: 1; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
.midi-sel-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); margin-bottom: 8px; }

/* ---------- MIDIの時間の設計図(js/midi/card.js の arcHtml) ---------- */
.arc-row { display: grid; grid-template-columns: 3.2em 4.6em 48px 1fr; align-items: center; gap: 6px; font-size: 11.5px; padding: 3px 0; border-bottom: 1px dotted var(--line); }
.arc-name { font-weight: 600; color: var(--ink); }
.arc-bars { color: var(--faint); font-size: 10.5px; }
.arc-tension { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.arc-tension i { display: block; height: 100%; background: var(--accent); }
.arc-text { color: var(--muted); line-height: 1.5; }


/* ---------- 感想・まとめ(js/screens/ensemble.js。CONSTELLATIONのCrewsに近い) ---------- */
.star-card-hex--comment { left: 50%; top: 0; background: #5e8a8c; letter-spacing: 0.04em; transform: translate(-50%, calc(-100% - 10px)); }
.star-card-hex-strut--comment { display: none; }
.star-card--ens-comment, .star-card--ens-summary { background: #f3f8f7; border-color: #b9d3d1; }
.voice-kind { display: flex; align-items: center; gap: 6px; color: #4d7477; }
.voice-avatar { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #5e8a8c; color: #fff; font-size: 10px; flex: none; }
.voice-text { font-size: 12.5px; line-height: 1.7; color: var(--ink); white-space: pre-wrap; margin-top: 4px; }
.voice-text--summary { font-size: 12px; max-height: 260px; overflow-y: auto; }
.voice-panel-text { white-space: pre-wrap; line-height: 1.8; }

/* ---------- 矩形選択と一括移動(js/marquee.js。Flight Engineerの簡易版) ---------- */
.marquee-rect { position: absolute; z-index: 30; pointer-events: none; border: 1.5px dashed var(--accent-deep); background: rgba(184, 134, 59, 0.08); border-radius: 3px; }
.marquee-box { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; border: 1.5px dashed var(--accent-deep); border-radius: 10px; background: rgba(184, 134, 59, 0.05); }
.marquee-box--moving { background: rgba(184, 134, 59, 0.1); }
.marquee-box-label { position: absolute; left: 8px; top: -20px; font-size: 11px; color: var(--accent-deep); white-space: nowrap; font-family: var(--sans); }
.star-card--selected { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 生まれたばかりのカードを光らせる(js/screens/ensemble.js の revealEnsembleCard、2026-09-25) */
@keyframes card-born {
  0% { box-shadow: 0 0 0 0 rgba(184, 134, 59, 0.75); }
  40% { box-shadow: 0 0 0 14px rgba(184, 134, 59, 0.22); }
  100% { box-shadow: 0 0 0 26px rgba(184, 134, 59, 0); }
}
.star-card--born { animation: card-born 0.9s ease-out 2; }

/* ---------- BEAT のリズム譜(js/midi/card.js の layersHtml) ---------- */
.beat-section { margin-top: 8px; padding: 6px 8px; background: rgba(109, 90, 138, 0.06); border-radius: 6px; }
.beat-section-name { font-size: 11px; font-weight: 600; color: #6d5a8a; margin-bottom: 3px; }
.beat-row { display: grid; grid-template-columns: 6.5em 1fr; gap: 6px; align-items: center; font-size: 11px; }
.beat-row code { font-family: ui-monospace, Consolas, monospace; font-size: 11px; letter-spacing: 0.08em; color: var(--ink); overflow-x: auto; white-space: nowrap; }
.beat-inst { color: var(--muted); }
.beat-fill-label { font-size: 10px; color: var(--faint); margin-top: 3px; }
.beat-row--fill code { color: #8a4f3a; }

/* ---------- 画像検索(Pixabay、js/imagesearch.js、2026-09-26) ----------
   キャンバスを隠さない浮いたパネル(左上)。開いたままサムネイルを次々クリックして画像カードを入れ替える */
.imgsearch {
  position: fixed;
  left: 16px;
  top: 64px;
  width: 340px;
  max-height: calc(100vh - 150px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(60, 50, 20, 0.16);
  padding: 12px 14px;
  z-index: 60;
}
.imgsearch[hidden] { display: none; }
.imgsearch-head { display: flex; align-items: center; justify-content: space-between; }
.imgsearch-title { font-size: 13px; color: var(--ink); letter-spacing: 0.04em; }
.imgsearch-form { display: flex; gap: 6px; }
.imgsearch-q { flex: 1; min-width: 0; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.imgsearch-type { font-size: 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.imgsearch-keynote, .imgsearch-target { font-size: 11px; color: #6d6455; line-height: 1.5; }
.imgsearch-grid {
  flex: 1;
  min-height: 80px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  align-content: start;
}
.imgsearch-thumb {
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  background: #f1ece2;
  aspect-ratio: 1;
  overflow: hidden;
  cursor: pointer;
}
.imgsearch-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }
.imgsearch-thumb:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.imgsearch-thumb--picked { border-color: var(--accent); }
.imgsearch-thumb--loading { opacity: 0.45; cursor: progress; }
.imgsearch-msg { grid-column: 1 / -1; font-size: 11px; color: #6d6455; padding: 10px 2px; line-height: 1.5; }
.imgsearch-more-row { text-align: center; }
.imgsearch-foot { display: flex; align-items: center; justify-content: space-between; }
.imgsearch-credit { font-size: 11px; color: #6d6455; }
@media (max-width: 899px) {
  .imgsearch { left: 8px; right: 8px; width: auto; top: 56px; max-height: 55vh; }
}
/* display を指定した要素でも hidden 属性で隠れるように(もっと見る・画像の無いカードの img) */
.imgsearch [hidden], .ens-image[hidden], .panel-image[hidden] { display: none; }


/* ---------- MIDIのパネル(js/midi/card.js、2026-09-26): 凡例・層の一覧 ---------- */
.panel-roll .piano-roll { height: 130px; }
.roll-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--faint); margin: 4px 0 12px; }
.roll-legend i, .layer-name i, .me-part i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.roll-sel { fill: rgba(184, 134, 59, 0.12); stroke: var(--accent-deep); stroke-width: 1; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
.layer-row { border-top: 1px solid var(--line); padding: 8px 0 6px; }
.layer-row--muted { opacity: 0.45; }
.layer-name { font-size: 12.5px; color: var(--ink); font-weight: 600; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.layer-gen { font-size: 11px; color: var(--faint); font-weight: normal; margin-left: 4px; }
.layer-actions { display: flex; gap: 6px; margin-top: 4px; }

/* ---------- モデルのピッカー(js/midi/compose.js の pickModel) ---------- */
.modal.model-picker { width: min(720px, calc(100vw - 32px)); max-width: none; }
.model-group { margin-top: 10px; }
.model-group-name { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--accent-deep); margin-bottom: 4px; }
.model-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px; }
.model-group-name { grid-column: 1 / -1; }
.modal .model-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 8px 10px; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; box-shadow: none; cursor: pointer; font-weight: normal; }
.modal .model-item:hover, .modal .model-item:focus-visible { border-color: var(--accent); background: var(--accent-bg); color: var(--ink); outline: none; }
.modal .model-item--last { border-color: var(--accent-line); }
.model-item-label { font-size: 13px; font-weight: 600; }
.model-item-label em { font-style: normal; font-size: 10px; font-weight: 500; color: #fff; background: var(--accent); border-radius: 3px; padding: 0 5px; margin-left: 6px; vertical-align: 1px; }
.model-item-text { font-size: 11px; line-height: 1.6; color: var(--muted); }

/* ---------- MIDIの編集画面(js/midi/editor.js、canvas版) ---------- */
.modal.midi-editor { width: min(1280px, calc(100vw - 24px)); max-width: none; max-height: calc(100vh - 24px); display: flex; flex-direction: column; overflow: hidden; }
.me-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.me-head h2 { margin: 0; }
.me-info { font-size: 11.5px; color: var(--muted); }
.me-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; }
.me-bar-label { font-size: 11px; font-weight: 600; color: var(--accent-deep); letter-spacing: 0.05em; }
.me-ops, .me-scale { padding: 5px 8px; background: var(--accent-bg); border-radius: 6px; gap: 4px 6px; }
.me-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.midi-editor .me-seg button { background: transparent; color: var(--muted); border: 0; border-radius: 0; padding: 5px 12px; font-size: 12px; box-shadow: none; }
.midi-editor .me-seg button + button { border-left: 1px solid var(--line); }
.midi-editor .me-seg button.me-seg--active { background: var(--accent); color: #fff; }
.modal.midi-editor label.me-field { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); margin: 0; }
.modal.midi-editor .me-field select, .modal.midi-editor .me-field input { display: inline-block; font-size: 12px; padding: 3px 4px; width: auto; margin: 0; }
.modal.midi-editor label.me-check { display: inline-flex; margin: 0; }
.modal.midi-editor .me-check input, .modal.midi-editor input.me-hscroll { display: inline-block; }
.me-field input[type="number"] { width: 4.2em; }
.me-field input[type="range"] { width: 80px; accent-color: var(--accent); padding: 0; }
.me-field small { font-size: 10px; color: var(--faint); }
.me-field--off { opacity: 0.4; }
.me-field select.me-scale-select { max-width: 220px; }
.midi-editor .me-btn { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 5px; padding: 3px 8px; font-size: 11.5px; box-shadow: none; font-weight: normal; }
.midi-editor .me-btn:hover { border-color: var(--accent); }
.midi-editor .me-btn--accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.me-check { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); margin: 0; }
.me-check input { width: auto; margin: 0; }
.me-parts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.midi-editor .me-part { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 2px 9px; font-size: 11.5px; box-shadow: none; font-weight: normal; }
.midi-editor .me-part--off { opacity: 0.4; text-decoration: line-through; }
.me-stage { position: relative; flex: 1 1 auto; min-height: 280px; height: 62vh; margin-top: 8px; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: #fbf8f1; }
.me-canvas { display: block; touch-action: none; user-select: none; }
.me-foot { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.me-hscroll { flex: 1; accent-color: var(--accent); margin: 0; padding: 0; }
.me-zoom { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.me-help { font-size: 11px !important; margin: 6px 0 0 !important; }
@media (max-width: 640px) {
  .me-stage { height: 46vh; }
  .me-scale { display: none; }
}

/* ---------- 設定画面の MIDI の書き出し先 ---------- */
.settings-export-line { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink); }
.settings-export-line span { flex: 1; word-break: break-all; }
.settings-export-line button { width: auto; flex: none; }

/* ---------- MIDIカードの★評価(js/midi/feedback.js、2026-09-26) ---------- */
.midi-stars { display: inline-flex; gap: 1px; margin: 3px 0 1px; }
.midi-stars .midi-star { background: none; border: 0; box-shadow: none; padding: 0 1px; margin: 0; font-size: 15px; line-height: 1; color: #d8cfbd; cursor: pointer; width: auto; font-weight: normal; }
.midi-stars .midi-star--on { color: #d49a2a; }
.midi-stars:hover .midi-star { color: #e0b454; }
.midi-stars .midi-star:hover ~ .midi-star { color: #d8cfbd; }
.midi-stars--large .midi-star { font-size: 22px; padding: 0 2px; }
.model-item-stars { font-size: 11px; font-weight: 500; color: #b07d1e; margin-left: 8px; }

/* ---------- プロンプトカード(テキストカードの属性、js/screens/ensemble.js、2026-09-26) ---------- */
.star-card--ens-prompt { background: #f6f3fb; border-color: #c7bbdf; }
.ens-card-kind--prompt { color: #6d5a8a; font-weight: 600; }
.star-card-memo--prompt { font-size: 12px; line-height: 1.7; min-height: 4em; flex: none; } /* flex:1 だと高さ未定のカードで2行に縮むため、中身の高さに従わせる */
.prompt-origin { color: var(--faint); font-size: 10.5px; }
/* 気づき・課題の右下「→プロンプト」(左下は気づき⇔課題の入れ替え) */
.star-card-hex--toprompt { left: 100%; top: 100%; transform: translate(-55%, 14px); background: #6d5a8a; font-size: 10px; }
.star-card-hex-strut--toprompt { display: none; }
/* プロンプトカードの上: 整える・鳴らす・ビート(課題カードの聴く・鳴らす・ビートと同じ並び) */
.star-card-hex--refine { left: 50%; top: 0; background: #6d5a8a; letter-spacing: 0.04em; transform: translate(calc(-150% - 6px), calc(-100% - 10px)); }
.star-card-hex-strut--refine { display: none; }
.modal .model-item--recommended { border-color: #6d5a8a; box-shadow: 0 0 0 1px #6d5a8a inset; }
.model-item-label em.model-item-rec { background: #6d5a8a; }

/* ---------- 専門AIチャット(ソウル画面のチャットカード、js/soulchat.js、2026-09-27) ----------
   CONSTELLATIONの座談会カードの形: 見出し・会話ログ(カードの高さいっぱい、中だけスクロール)・入力欄。
   ログの上ではカードの移動・キャンバスのパンより、文字の選択とスクロールを優先する(js/canvas.js の .chat-log) */
/* overflow: hidden は付けない(カードの外に出る編集ガイドのヘックス・トンボが切り取られて、削除できなかった)。角は見出し・入力欄で丸める */
.star-card--chat { padding: 0; gap: 0; min-width: 240px; min-height: 220px; box-shadow: 0 2px 10px rgba(20, 18, 14, 0.14); }
.chat-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px 8px; border-bottom: 1px solid var(--line); background: var(--surface-2); border-radius: 8px 8px 0 0; cursor: grab; }
.chat-head svg { flex: none; }
.chat-orbs { display: flex; flex: none; }
.chat-orbs svg + svg { margin-left: -5px; }
.chat-speaker { display: flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; margin: 0 0 2px 2px; }
.chat-head-text { min-width: 0; }
.chat-topic { font-family: var(--serif); font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-log {
  flex: 1; min-height: 0; overflow-y: auto; padding: 10px 10px 6px;
  display: flex; flex-direction: column; gap: 8px;
  touch-action: pan-y; overscroll-behavior: contain;
  -webkit-user-select: text; user-select: text; cursor: text;
}
.chat-empty { font-size: 11px; line-height: 1.7; color: var(--muted); padding: 4px 2px; }
.chat-msg { max-width: 88%; }
.chat-msg--user { align-self: flex-end; }
.chat-msg--ai { align-self: flex-start; }
.chat-text { font-size: 12px; line-height: 1.7; color: var(--text); white-space: pre-wrap; word-break: break-word; padding: 7px 10px; border-radius: 10px; }
.chat-msg--user .chat-text { background: var(--accent-bg); border: 1px solid var(--accent-line); border-bottom-right-radius: 3px; }
.chat-msg--ai .chat-text { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 3px; }
.chat-params { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chat-param { font-size: 10.5px; padding: 2px 8px; border: 1px dashed var(--accent); border-radius: 10px; background: #fff; color: var(--accent-deep); cursor: pointer; }
.chat-param:hover { background: var(--accent-bg); }
.chat-typing { display: flex; gap: 4px; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px; border-bottom-left-radius: 3px; }
.chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); animation: chat-typing 1.1s infinite ease-in-out; }
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-typing { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.chat-composer { display: flex; gap: 6px; align-items: flex-end; padding: 8px; border-top: 1px solid var(--line); background: var(--panel); border-radius: 0 0 8px 8px; }
/* プラグインのソウル・パラメータカードの上の「チャット」ヘックス(アンサンブル) */
.star-card-hex--chat { left: 50%; top: 0; background: #4f7392; letter-spacing: 0.04em; transform: translate(-50%, calc(-100% - 10px)); }
.star-card-hex-strut--chat { display: none; }
.chat-input {
  flex: 1; resize: none; border: 1px solid var(--line-strong); border-radius: 7px; padding: 6px 8px;
  font-family: var(--sans); font-size: 12px; line-height: 1.5; color: var(--text); background: #fff; outline: none; max-height: 90px;
}
.chat-input:focus { border-color: var(--accent-line); }
.chat-send { flex: none; font-size: 12px; padding: 7px 12px; border: none; border-radius: 7px; background: var(--accent); color: #fff; cursor: pointer; }
.chat-send:disabled { opacity: 0.4; cursor: default; }
.chat-row-mark { font-size: 11px; }

/* ---------- モデルのピッカー: 小学生向けの解説(子どものアイコン+吹き出し、js/midi/compose.js、2026-09-27) ---------- */
.modal .model-item { position: relative; }
.modal .model-item:has(.model-side) { padding-right: 44px; }
.modal .model-item:has(.model-demo):has(.model-kids) { padding-right: 82px; }
.model-side { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; gap: 6px; align-items: center; }
.model-kids, .model-demo {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #fff8ec; border: 1px solid var(--accent-line); cursor: help;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}
.model-demo { cursor: pointer; color: var(--accent-deep); background: #fff; }
.model-kids:hover, .model-demo:hover { transform: scale(1.12); box-shadow: 0 2px 8px rgba(184, 134, 59, 0.35); }
.model-demo:hover { background: var(--accent); color: #fff; }

/* お手本の演奏(js/midi/compose.js の openDemo、お手本は js/midi/demos.js、2026-10-01)。ピッカーの上に重ねる */
.demo-overlay { z-index: 240; }
.modal.demo-modal { position: relative; width: min(760px, calc(100vw - 24px)); max-width: none; }
.demo-modal h2 { margin: 0 32px 4px 0; }
.demo-model { font-size: 11px; letter-spacing: 0.1em; color: var(--muted); }
.demo-close { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line, #ddd); background: #fff; cursor: pointer; font-size: 14px; line-height: 1; }
.demo-kids { display: flex; align-items: center; gap: 6px; font-family: var(--serif); font-size: 13px; font-weight: 700; color: var(--accent-deep); margin-bottom: 6px; }
.demo-listen { font-size: 13px; line-height: 1.8; margin: 4px 0 10px; }
.demo-listen b { display: inline-block; font-size: 11px; padding: 1px 7px; margin-right: 6px; border-radius: 9px; background: var(--accent); color: #fff; font-weight: 600; }
.demo-roll { position: relative; border-radius: 8px; overflow: hidden; background: #1d1a16; padding: 6px 0; }
.demo-roll .piano-roll { display: block; height: 240px; margin: 0; background: transparent; border-radius: 0; }
.demo-roll .roll-bars line { stroke: rgba(255, 255, 255, 0.08); }
.demo-roll .roll-marker { stroke: rgba(255, 220, 160, 0.25); stroke-dasharray: 3 3; }
.demo-roll rect { opacity: 0.55; transition: opacity 0.12s; }
.demo-roll rect.on { opacity: 1; filter: brightness(1.6) drop-shadow(0 0 3px rgba(255, 240, 200, 0.9)); }
.demo-head { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #ffe2a8; box-shadow: 0 0 8px rgba(255, 226, 168, 0.9); pointer-events: none; }
.demo-legend { margin-top: 6px; }
.demo-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.demo-play { min-width: 92px; }
.demo-time { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); }
.modal .demo-controls .demo-voice { display: flex; align-items: center; gap: 6px; font-size: 12px; margin: 0 0 0 auto; }
.modal .demo-controls .demo-voice select { width: auto; margin: 0; padding: 4px 8px; font-size: 12px; }
.demo-note { font-size: 11px; color: var(--muted); line-height: 1.7; margin: 10px 0 0; }
.kids-pop {
  position: fixed; z-index: 1; width: min(320px, calc(100vw - 20px));
  padding: 12px 14px; border-radius: 12px; background: #fffaf0; border: 1.5px solid var(--accent-line);
  box-shadow: 0 6px 22px rgba(40, 30, 10, 0.22); pointer-events: auto;
}
.kids-pop[hidden] { display: none; }
.kids-pop-head { display: flex; align-items: center; gap: 6px; font-family: var(--serif); font-size: 14px; font-weight: 700; color: var(--accent-deep); }
.kids-pop-model { font-size: 10px; color: var(--muted); margin: 2px 0 6px 28px; }
.kids-pop-text { font-size: 13px; line-height: 1.85; color: var(--ink); }

/* 矩形選択中の削除のバー(js/marquee.js、2026-09-27)。キャンバスの上に固定し、ズームしても大きさが変わらない */
.marquee-actions {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 40;
  display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px;
  background: rgba(255, 255, 255, 0.96); border: 1px solid var(--accent-line); border-radius: 10px;
  box-shadow: 0 4px 16px rgba(40, 30, 10, 0.16); font-family: var(--sans); white-space: nowrap;
}
.marquee-actions-count { font-size: 12px; color: var(--accent-deep); margin-right: 4px; }
.marquee-action { font-size: 12px; padding: 6px 12px; border-radius: 7px; border: 1px solid var(--line-strong); background: #fff; color: var(--ink); cursor: pointer; }
.marquee-action:hover:not(:disabled) { border-color: var(--rust); color: var(--rust); }
.marquee-action--danger { border-color: var(--rust); color: var(--rust); }
.marquee-action--danger:hover { background: var(--rust); color: #fff; }
.marquee-action:disabled { opacity: 0.4; cursor: default; }

/* 削除履歴(js/trash.js、2026-09-27) */
.toolbar .icon-btn svg { display: block; }
.modal.trash-modal { width: min(520px, calc(100vw - 32px)); max-width: none; }
.trash-list { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.trash-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.trash-row-text { flex: 1; min-width: 0; }
.trash-row-title { font-size: 13px; color: var(--ink); line-height: 1.5; }
.trash-row-sub { font-size: 11px; color: var(--muted); }

/* ---------- プレミックス(js/screens/premix.js、2026-09-27) ----------
   ユーザー判断「このUIはもっとかっこよくしていいよ」で、この画面だけ暗いスタジオ調にした(他の画面は明るいまま)。
   色は body[data-screen="premix"] の下の --pm-* にまとめる */
.premix-tab { margin-left: 6px; border-left: 1px solid var(--line); padding-left: 12px; }
.premix-tab[hidden] { display: none; }
.premix-tab-icon { font-size: 12px; opacity: 0.7; }

body[data-screen="premix"] {
  --pm-bg: #111216;
  --pm-panel: rgba(26, 28, 34, 0.92);
  --pm-line: #2c3039;
  --pm-line-2: #3a3f4a;
  --pm-text: #dfe2e8;
  --pm-muted: #8b91a0;
  --pm-faint: #5d6270;
  --pm-amber: #f2b24c;
  --pm-amber-2: #ff8a4c;
  --pm-hot: #ff5d52;
}
body[data-screen="premix"] .canvas-viewport {
  background-color: var(--pm-bg);
  background-image:
    radial-gradient(ellipse at 50% 35%, rgba(242, 178, 76, 0.06), transparent 60%),
    radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.2px);
  background-size: auto, 24px 24px;
}
body[data-screen="premix"] .ens-title { color: var(--pm-text); letter-spacing: 0.3em; font-size: 14px; }
body[data-screen="premix"] .ens-subtitle { color: var(--pm-faint); }
body[data-screen="premix"] .soul-empty { background: var(--pm-panel); border-color: var(--pm-line); color: var(--pm-muted); }
body[data-screen="premix"] .soul-empty-title { color: var(--pm-text); }
.premix-empty { top: 120px; }
body[data-screen="premix"] #bottombar { background: #16171c; border-top-color: var(--pm-line); }
body[data-screen="premix"] .tool-btn { color: var(--pm-muted); }
body[data-screen="premix"] .tool-btn:hover { background: #22252d; color: var(--pm-amber); }
body[data-screen="premix"] .marquee-box-label { color: var(--pm-amber); }

/* 小さなボタン(この画面のカードの中だけ暗く) */
body[data-screen="premix"] .star-card .btn-small {
  background: #262a33; border: 1px solid var(--pm-line-2); color: var(--pm-text); border-radius: 6px;
}
body[data-screen="premix"] .star-card .btn-small:hover { border-color: var(--pm-amber); color: var(--pm-amber); }
body[data-screen="premix"] .star-card .btn-small--accent { background: var(--pm-amber); border-color: var(--pm-amber); color: #1a1407; font-weight: 700; }

/* オーディオカード */
.star-card--sound {
  z-index: 2; gap: 6px; padding: 9px 10px 10px;
  background: linear-gradient(180deg, #252831, #1c1e25); border: 1px solid var(--pm-line-2); border-radius: 11px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: var(--pm-text); transition: box-shadow 0.12s ease-out, border-color 0.12s ease-out, opacity 0.2s;
}
.star-card--sound.star-card--edit-guide { z-index: 6; }
.star-card--sound-playing { border-color: var(--pm-amber); box-shadow: 0 0 0 1px rgba(242, 178, 76, 0.5), 0 0 26px rgba(242, 178, 76, 0.28), 0 8px 22px rgba(0, 0, 0, 0.5); }
.star-card--sound-muted { opacity: 0.42; filter: saturate(0.4); }
.star-card--sound-missing { opacity: 0.35; }
.snd-name { font-size: 12px; font-weight: 600; color: var(--pm-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0.02em; }
.snd-from { font-weight: 400; font-size: 10px; color: var(--pm-faint); margin-left: 4px; }
.snd-wave { position: relative; height: 30px; background: #121318; border-radius: 5px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6); }
.snd-wave canvas { width: 100%; height: 100%; display: block; opacity: 0.8; }
.star-card--sound-playing .snd-wave canvas { opacity: 1; }
.snd-playhead { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: #fff; box-shadow: 0 0 6px #fff; display: none; }
.snd-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10.5px; color: var(--pm-muted); }
.snd-msg:empty { display: none; }
.snd-row { display: flex; align-items: center; gap: 6px; }
.snd-play {
  width: 28px; height: 28px; padding: 0; border-radius: 50%; border: none; cursor: pointer; font-size: 11px;
  background: radial-gradient(circle at 35% 30%, #ffd07a, var(--pm-amber) 60%, #c7862a); color: #1a1407;
  box-shadow: 0 2px 8px rgba(242, 178, 76, 0.35);
}
.star-card--sound-playing .snd-play { background: radial-gradient(circle at 35% 30%, #ff9a8f, var(--pm-hot) 60%, #c23a31); color: #fff; box-shadow: 0 0 12px rgba(255, 93, 82, 0.55); }
.snd-play:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
/* ミュート・ソロ(2026-10-01)。M=赤、S=黄。鳴らないカード(ミュート、またはほかのカードのソロで黙っている)は暗くする */
.snd-ms { flex: none; width: 22px; height: 22px; padding: 0; border-radius: 6px; border: 1px solid var(--pm-line-2); background: transparent; color: var(--pm-faint); font: 700 10px/1 var(--mono, ui-monospace, monospace); cursor: pointer; }
.snd-ms:hover { color: var(--pm-text); border-color: var(--pm-muted); }
.snd-mute.on { background: #d9534a; border-color: #d9534a; color: #fff; }
.snd-solo.on { background: #e8c547; border-color: #e8c547; color: #1a1606; }
.star-card--silent { opacity: 0.45; filter: saturate(0.4); }
.star-card--silent:hover { opacity: 0.8; }
.star-card--sphere.star-card--soloed .sph { box-shadow: 0 0 0 2px #e8c547, 0 10px 24px rgba(0, 0, 0, 0.55); }
.snd-time { margin-left: auto; white-space: nowrap; font-size: 10.5px; color: var(--pm-faint); font-family: var(--mono); }
.snd-param { display: grid; grid-template-columns: 2.4em 1fr 2em; align-items: center; gap: 6px; font-size: 10.5px; color: var(--pm-muted); letter-spacing: 0.04em; }
.snd-param output { text-align: right; font-family: var(--mono); font-size: 10.5px; color: var(--pm-text); }
.snd-param input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px; margin: 0; border-radius: 2px; cursor: pointer;
  background: linear-gradient(90deg, var(--pm-amber), var(--pm-amber-2)) 0 / var(--fill, 50%) 100% no-repeat, #353945;
}
.snd-param input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: #f4f5f8; border: none;
  box-shadow: 0 0 0 3px rgba(242, 178, 76, 0.25), 0 1px 3px rgba(0, 0, 0, 0.6);
}
.snd-param input[type="range"]::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: #f4f5f8; border: none; }
/* タイムラインでは左端=鳴り始め(以前あった「音の長さの光る帯」は2026-09-29に廃止) */
.star-card--sound-tl { border-left: 2px solid var(--pm-amber); border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
/* ループの長さ: −/+・ドラッグできる数字・½・×2・音に合わせる */
/* カードの見た目: 名前の行・切り取り・語彙メモ */
.snd-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.snd-head .snd-name { flex: 1; min-width: 0; }
.snd-view, .sph-view {
  flex: none; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid var(--pm-line-2);
  background: #1b1d24; color: var(--pm-muted); font-size: 10px; line-height: 1; cursor: pointer;
}
.snd-view:hover, .sph-view:hover { border-color: var(--pm-amber); color: var(--pm-amber); }
.snd-wave { cursor: text; touch-action: none; }
.snd-unclip { flex: none; width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 1px solid var(--pm-line-2); background: transparent; color: var(--pm-muted); font-size: 9px; cursor: pointer; }
.snd-unclip:hover { border-color: var(--pm-hot); color: var(--pm-hot); }
.snd-unclip[hidden] { display: none; }
.snd-memo {
  width: 100%; field-sizing: content; min-height: 1.9em; max-height: 9em; resize: none; box-sizing: border-box;
  padding: 4px 7px; border: 1px solid transparent; border-radius: 6px; background: rgba(0, 0, 0, 0.22);
  color: var(--pm-text); font-family: var(--sans); font-size: 11px; line-height: 1.55;
}
.snd-memo::placeholder { color: var(--pm-faint); }
.snd-memo:hover { border-color: var(--pm-line-2); }
.snd-memo:focus { outline: none; border-color: rgba(242, 178, 76, 0.55); background: rgba(0, 0, 0, 0.32); }

/* 枠の外のカード(鳴らない) */
.star-card--sound-out { opacity: 0.5; filter: grayscale(0.8); border-style: dashed; }
.star-card--sound-out .snd-from { color: var(--pm-hot); }

/* スフィア: 小さな球。再生バーは12時から時計回り(--p は 0〜1。js/screens/premix.js の描画ループが入れる) */
.star-card--sphere,
.star-card--sphere.star-card--sound-playing,
.star-card--sphere.star-card--sound-tl {
  padding: 0; background: transparent; border: none; box-shadow: none; border-radius: 50%;
}
.sph {
  --p: 0;
  position: relative; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #3b3f4b, #1c1e25 60%, #0f1014);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -10px 20px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.15s ease-out;
}
.sph-ring { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; opacity: 0.75; pointer-events: none; }
.sph::before {
  content: ""; position: absolute; inset: 2px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 0.2s;
  background: conic-gradient(rgba(255, 226, 168, 0.5) calc(var(--p) * 360deg), transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%, #000 67%, transparent 68%);
  mask: radial-gradient(circle, transparent 60%, #000 61%, #000 67%, transparent 68%);
}
.sph-hand {
  position: absolute; left: calc(50% - 1px); top: 5%; width: 2px; height: 45%; border-radius: 1px; pointer-events: none;
  transform-origin: 50% 100%; transform: rotate(calc(var(--p) * 360deg));
  background: linear-gradient(#fff, rgba(255, 255, 255, 0.05)); opacity: 0.18;
}
.star-card--sound-playing .sph { box-shadow: 0 0 0 1px rgba(242, 178, 76, 0.65), 0 0 28px rgba(242, 178, 76, 0.35), 0 10px 24px rgba(0, 0, 0, 0.55), inset 0 -10px 20px rgba(0, 0, 0, 0.5); }
.star-card--sound-playing .sph::before { opacity: 1; }
.star-card--sound-playing .sph-hand { opacity: 1; filter: drop-shadow(0 0 3px #fff); }
.star-card--sound-playing .sph-ring { opacity: 1; }
.sph-play {
  position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; padding: 0;
  border-radius: 50%; border: none; cursor: pointer; font-size: 11px; color: #1a1407;
  background: radial-gradient(circle at 35% 30%, #ffd07a, var(--pm-amber) 60%, #c7862a); box-shadow: 0 2px 8px rgba(242, 178, 76, 0.35);
}
.star-card--sound-playing .sph-play { background: radial-gradient(circle at 35% 30%, #ff9a8f, var(--pm-hot) 60%, #c23a31); color: #fff; box-shadow: 0 0 12px rgba(255, 93, 82, 0.55); }
.sph-play:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
.sph-view { position: absolute; right: -2px; top: -2px; opacity: 0.7; }
.sph-name {
  position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%); width: 150px; pointer-events: none;
  text-align: center; font-size: 10.5px; color: var(--pm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sph-name .snd-from { margin-left: 0; }
/* チェーン: カードのループは使わない。線は流れる点線で向き(引き始め→引いた先)を見せ、流れが通った線を光らせる */
/* 線はフォルダ(z-index 0、半透明の背景)の上、オーディオカード(z-index 2)の下に重ねる。フォルダの下だと透けて見えなかった */
body[data-screen="premix"] .asterism-layer { z-index: 1; }
body[data-screen="premix"] .asterism-line--manual {
  stroke: rgba(242, 178, 76, 0.85); stroke-width: 2.4; stroke-dasharray: 3 6; stroke-linecap: round;
  animation: pm-line-flow 0.9s linear infinite;
}
@keyframes pm-line-flow { from { stroke-dashoffset: 9; } to { stroke-dashoffset: 0; } }
body[data-screen="premix"] .asterism-line--manual.pm-line-hot {
  animation: pm-line-flow 0.9s linear infinite, pm-line-hot 0.7s ease-out;
}
@keyframes pm-line-hot {
  0% { stroke: #fff4d6; stroke-width: 4; filter: drop-shadow(0 0 8px rgba(242, 178, 76, 0.95)); }
  100% { stroke: rgba(242, 178, 76, 0.85); stroke-width: 2.4; filter: none; }
}
/* 線の種類(2026-10-01): リンク=同時に鳴らす(まっすぐな水色の二重線)、チェイン=順に鳴らす(流れる琥珀の点線。以前からの線) */
body[data-screen="premix"] .asterism-line--manual[data-mode="link"] {
  stroke: rgba(127, 224, 255, 0.9); stroke-width: 3; stroke-dasharray: none; animation: none;
  filter: drop-shadow(0 0 3px rgba(127, 224, 255, 0.55));
}
/* カーソルを合わせると光る(押すとリンク/チェイン/削除のメニュー) */
.asterism-line--hover { stroke-width: 4 !important; filter: drop-shadow(0 0 6px rgba(255, 244, 214, 0.9)); }
body[data-screen="premix"] .asterism-line--manual.asterism-line--hover { stroke: #fff4d6; filter: drop-shadow(0 0 8px rgba(242, 178, 76, 0.95)); }
body[data-screen="premix"] .asterism-line--manual[data-mode="link"].asterism-line--hover { stroke: #e6fbff; filter: drop-shadow(0 0 8px rgba(127, 224, 255, 0.95)); }
.pm-line-menu {
  position: fixed; z-index: 80; display: flex; gap: 4px; padding: 5px; border-radius: 12px;
  background: rgba(14, 16, 24, 0.55); -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 14px 40px rgba(0, 0, 0, 0.55);
}
.pm-line-menu button {
  font: inherit; font-size: 12px; padding: 6px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.06); color: #eef0f6;
}
.pm-line-menu button:hover { background: rgba(255, 255, 255, 0.14); }
.pm-line-menu button[data-m="link"].on { border-color: #7fe0ff; color: #7fe0ff; background: rgba(127, 224, 255, 0.12); }
.pm-line-menu button[data-m="chain"].on { border-color: #f2b24c; color: #f2b24c; background: rgba(242, 178, 76, 0.12); }
.pm-line-menu button.danger:hover { border-color: #ff5d52; color: #ff8a80; }
/* タイムラインでは左端=鳴り始めの印 */
.star-card--sphere.star-card--sound-tl .sph::after {
  content: ""; position: absolute; left: -3px; top: 28%; height: 44%; width: 2px; border-radius: 1px;
  background: var(--pm-amber); box-shadow: 0 0 6px rgba(242, 178, 76, 0.6);
}
/* プレミックスの Shift+A(アンサンブルのMIDIを持ち込む)の一覧 */
.pm-midi-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; text-align: left; }
.pm-midi-name small { font-size: 10.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* プレミックスの語彙カード・画像カード(2026-09-29)。上の「MIDI」「ビート」は画像カード(アンサンブル)と同じ並び */
.star-card--pm-src .star-card-hex--sketch { transform: translate(calc(-100% - 3px), calc(-100% - 10px)); }
.star-card--pm-src .star-card-hex--beat { transform: translate(3px, calc(-100% - 10px)); }
/* オーディオカードの上の「語彙」(音を聞かせて長文の語彙カードにする) */
.star-card-hex--vocab { left: 50%; top: 0; transform: translate(-50%, calc(-100% - 10px)); background: #4f7392; letter-spacing: 0.04em; }
/* MIDIのカードの上の外側: 応答 | 語彙 | 伸ばす(2026-10-01) */
.star-card-hex--respond { left: 50%; top: 0; transform: translate(calc(-50% - 74px), calc(-100% - 10px)); background: #2f7f93; letter-spacing: 0.04em; }
.star-card-hex--extend { left: 50%; top: 0; transform: translate(calc(-50% + 74px), calc(-100% - 10px)); background: #8a6a2e; letter-spacing: 0.04em; }
.star-card-hex--host { left: 100%; top: 100%; transform: translate(-55%, 14px); background: #3d6e4f; letter-spacing: 0.04em; } /* LYRA Host で開く(右下の外側) */
.star-card-hex-strut--vocab, .star-card-hex-strut--respond, .star-card-hex-strut--extend, .star-card-hex-strut--host, .star-card-hex-strut--patch, .star-card-hex-strut--preset { display: none; }
.snd-vocab {
  flex: none; height: 20px; padding: 0 7px; border-radius: 10px; border: 1px solid var(--pm-line-2);
  background: #1b1d24; color: var(--pm-muted); font-size: 10px; letter-spacing: 0.06em; cursor: pointer;
}
.snd-vocab:hover { border-color: #7fa6c9; color: #a9cbe8; }
.star-card--pm-vocab {
  z-index: 3; gap: 6px; padding: 12px 13px 12px;
  background: linear-gradient(180deg, #1f2733, #181c24); border: 1px solid #34465c; border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); color: var(--pm-text);
}
.pmv-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pmv-kind { flex: none; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; color: #7fa6c9; }
.pmv-title { font-family: var(--serif); font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmv-src { font-size: 10px; color: var(--pm-faint); }
.pmv-summary { font-size: 12.5px; line-height: 1.6; color: #dbe6f2; }
.pmv-body {
  max-height: 380px; overflow-y: auto; padding-right: 4px; margin-top: 2px; border-top: 1px solid #2b3848; cursor: auto;
  user-select: text; -webkit-user-select: text; overscroll-behavior: contain;
}
.pmv-body section { padding: 8px 0 2px; }
.pmv-body h4 { margin: 0 0 4px; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; color: #7fa6c9; }
.pmv-body p, .pmv-body li { margin: 0; font-size: 11.5px; line-height: 1.7; color: var(--pm-text); }
.pmv-body ul { margin: 0; padding-left: 1.1em; }
.pmv-body li + li { margin-top: 3px; }
.pmv-time { list-style: none; padding-left: 0 !important; }
.pmv-time b { display: inline-block; min-width: 3.4em; font-family: var(--mono); font-weight: 400; font-size: 10.5px; color: #7fa6c9; }
.pmv-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.pmv-tags span { font-size: 10.5px; padding: 2px 7px; border-radius: 999px; background: #243142; color: #c6d8ea; }

.star-card--pm-image {
  z-index: 3; gap: 6px; padding: 8px;
  background: linear-gradient(180deg, #252831, #1c1e25); border: 1px solid var(--pm-line-2); border-radius: 11px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45); color: var(--pm-text);
}
.pmi-frame { position: relative; border-radius: 6px; overflow: hidden; background: #121318; min-height: 60px; }
.pmi-frame img { display: block; width: 100%; height: auto; -webkit-user-drag: none; user-select: none; pointer-events: none; }
.pmi-none { display: none; padding: 20px 8px; text-align: center; font-size: 10.5px; color: var(--pm-faint); }
.star-card--pm-image-none .pmi-none { display: block; }
.star-card--pm-image-none img { display: none; }
.pmi-name { font-size: 11.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmi-name span { font-weight: 400; font-size: 10px; color: var(--pm-faint); }
.pmi-imp { font-size: 11px; line-height: 1.6; color: var(--pm-muted); }
/* 語彙カードの芯(厳選した見立て1つ・理由・仕掛け)。本文の上に目立たせる */
.pmv-core { padding: 9px 10px; border-radius: 8px; background: rgba(127, 166, 201, 0.1); border-left: 3px solid #7fa6c9; }
.pmv-core-label { font-size: 9.5px; letter-spacing: 0.16em; color: #7fa6c9; margin-bottom: 3px; }
.pmv-mitate { font-family: var(--serif); font-size: 14px; line-height: 1.6; color: #eef4fa; }
.pmv-why { margin-top: 4px; font-size: 10.5px; line-height: 1.6; color: var(--pm-muted); }
.pmv-devices { margin: 6px 0 0; padding-left: 1.1em; }
.pmv-devices li { font-size: 11px; line-height: 1.6; color: #c6d8ea; }

/* 出力のピークメーター(js/sound.js の safeOut、2026-09-29)。ヘッダー右。リミッターの後のピーク、LIM=リミッターが効いている、OVER=手前で0dBFS超え */
.out-meter { display: inline-flex; align-items: center; gap: 4px; margin-right: 4px; }
.out-meter[hidden] { display: none; }
.out-meter-track { position: relative; width: 64px; height: 6px; border-radius: 3px; overflow: hidden; background: rgba(0, 0, 0, 0.12); }
.out-meter-bar {
  position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0);
  background: linear-gradient(90deg, #5fae6e 0%, #5fae6e 62%, #e0b24a 80%, #e0663f 96%);
}
.out-meter-hold { position: absolute; top: 0; bottom: 0; width: 2px; left: 0; background: rgba(0, 0, 0, 0.45); }
.out-meter b { font: 700 8.5px/1 var(--mono); letter-spacing: 0.06em; padding: 2px 3px; border-radius: 3px; color: rgba(0, 0, 0, 0.22); border: 1px solid rgba(0, 0, 0, 0.12); }
.out-meter--lim .out-meter-lim { color: #fff; background: #d48a2c; border-color: #d48a2c; }
.out-meter--over .out-meter-over { color: #fff; background: #d8442f; border-color: #d8442f; }

/* プレミックスのエリアのピークメーター(見出し) */
/* プレミックスのMIDIのカードの .mid 保存(2026-09-29)。名前の行の「⇩」と、左の「保存」ヘックス(スフィアでも使える) */
.snd-save {
  flex: none; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid rgba(242, 178, 76, 0.55);
  background: #1b1d24; color: var(--pm-amber); font-size: 11px; line-height: 1; cursor: pointer;
}
.snd-save:hover { background: var(--pm-amber); color: #1a1407; }
.star-card-hex--save { left: 0; top: 50%; transform: translate(-115%, -50%); background: #8a6a2e; }
.star-card-hex-strut--save { right: -20px; top: 50%; transform: translateY(-50%); }

/* ---------- ネビュラ(星雲、js/nebula.js、2026-09-29) ----------
   星雲のカードは背景・枠なしで、描いた星雲そのものが見える。フォルダ(0)より上、オーディオカード(2)より下 */
.star-card--nebula { z-index: 1; padding: 0; background: transparent; border: none; box-shadow: none; }
.star-card--nebula.star-card--edit-guide { z-index: 1; outline: 1px dashed rgba(207, 198, 255, 0.5); outline-offset: 2px; }
.star-card--nebula canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.star-card--nebula .neb-glow { mix-blend-mode: screen; }
.neb-label { display: none; position: absolute; left: 50%; top: 100%; transform: translate(-50%, 8px); white-space: nowrap; text-align: center; font-size: 10px; color: #8b91a0; pointer-events: none; }
.neb-label .en { display: block; font-size: 9px; letter-spacing: 0.3em; color: #cfc6ff; }
.star-card--nebula:hover .neb-label, .star-card--nebula.star-card--edit-guide .neb-label { display: block; }

/* オーディオカードに、かかっているエフェクト(カード=帯、スフィア=色の輪) */
.snd-fx { display: flex; flex-direction: column; gap: 3px; }
.snd-fx:empty { display: none; }
.snd-fx-row { display: grid; grid-template-columns: 7.6em 1fr 2.4em; align-items: center; gap: 5px; font-size: 10px; color: var(--pm-muted); white-space: nowrap; }
.snd-fx-row i { height: 4px; border-radius: 2px; background: #2a2e37; position: relative; overflow: hidden; }
.snd-fx-row i::after { content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--a, 0)); background: var(--c, #cfc6ff); }
.snd-fx-row output { text-align: right; font-family: var(--mono); color: var(--pm-text); }
.star-card--neb-on:not(.star-card--sphere) { border-color: color-mix(in srgb, var(--neb) 70%, transparent); }
.star-card--sphere.star-card--neb-on .sph { box-shadow: 0 0 0 2px var(--neb), 0 0 22px color-mix(in srgb, var(--neb) 60%, transparent), 0 10px 24px rgba(0, 0, 0, 0.55); }

/* アルバム(ポスター風の浮いたパネル)。画面の左端に縦長で置き、再生しながらキャンバスへドラッグしやすくする
   (2026-09-29、ユーザー要望「ポップアップの位置を左側に。今だと再生しながら入れにくい」。最初は画面下の中央に横長で出していた) */
.neb-album {
  position: fixed; left: 12px; top: 58px; bottom: 70px; z-index: 60; width: 340px;
  overflow-y: auto; padding: 12px 12px 14px; border-radius: 12px; background: rgba(6, 7, 10, 0.95); border: 1px solid #262a33; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7); color: #e2e4ea;
}
.neb-album[hidden] { display: none; }
.neb-album-head { position: relative; }
.neb-album-title { text-align: center; font-size: 11px; letter-spacing: 0.9em; color: #9aa0b0; padding: 4px 30px 2px; }
.neb-album-close { position: absolute; right: -4px; top: -2px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid #333844; background: #15171c; color: #8b91a0; cursor: pointer; }
.neb-album-sub { text-align: center; font-size: 10.5px; color: #5d6270; margin: 2px 0 12px; }
.neb-album-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.neb-item { cursor: grab; }
.neb-thumb { position: relative; }
.neb-thumb canvas { width: 100%; aspect-ratio: 1; display: block; border-radius: 4px; background: #000; }
.neb-item:hover .neb-thumb canvas { box-shadow: 0 0 0 1px #6d62b8; }
.neb-cap { position: absolute; left: 6px; top: 5px; right: 6px; display: flex; flex-direction: column; pointer-events: none; }
.neb-cap .en { font-size: 7.5px; letter-spacing: 0.22em; color: #e8e6f5; text-shadow: 0 1px 2px #000; }
.neb-cap .fx { font-size: 9px; color: #cfc6ff; text-shadow: 0 1px 2px #000; }
.neb-meta { margin-top: 5px; font-size: 10.5px; line-height: 1.5; }
.neb-meta p { margin: 2px 0 0; font-size: 9.5px; color: #8b91a0; line-height: 1.55; }
.neb-place { margin-top: 4px; font-size: 10px; padding: 3px 8px; border-radius: 5px; border: 1px solid #3a3f4a; background: #1b1d24; color: #e2e4ea; cursor: pointer; }
.neb-place:hover { border-color: #cfc6ff; color: #cfc6ff; }
/* 狭い画面では、左に置くとキャンバスが残らないので、下に横長で出す */
@media (max-width: 700px) {
  .neb-album { left: 8px; right: 8px; top: auto; bottom: 64px; width: auto; max-height: 46vh; }
  .neb-album-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- PLANETES(LFOの天体、js/planetes.js、2026-10-01) ----------
   奥の層はキャンバスの中身の下(影響範囲のにじみ・線)、手前の層は中身の上(輪・本体・名前)。どちらも押せない(当たり判定は premix.js) */
.pl-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pl-layer--front { z-index: 3; }
.pl-album-list { display: flex; flex-direction: column; gap: 2px; }
.pl-item { display: grid; grid-template-columns: 70px 1fr; gap: 9px; padding: 8px; border-radius: 8px; cursor: grab; }
.pl-item:hover { background: #121520; }
.pl-item canvas { width: 70px; height: 70px; border-radius: 6px; background: #000; }
.pl-en { font-size: 8px; letter-spacing: 0.2em; }
.pl-jp { font-size: 12px; font-weight: 600; }
.pl-item p { margin: 3px 0 0; font-size: 10px; line-height: 1.5; color: #8b91a0; }

/* ---------- KAIROS(即興する人造人間、js/kairos.js、2026-10-01) ----------
   プレミックスの上に浮かぶ小窓(見出しをつかんで動かす)。⤢で画面いっぱいに */
.kairos {
  position: fixed; right: 16px; bottom: 76px; z-index: 65; width: 460px; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; border-radius: 14px; overflow: hidden;
  background: #05060b; border: 1px solid #262a36; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.75); color: #e6e8f0;
}
.kairos[hidden] { display: none; }
.kairos--big { inset: 12px !important; width: auto; max-width: none; }
.kairos-head { display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 14px; cursor: move; touch-action: none; border-bottom: 1px solid #161a24; }
.kairos--big .kairos-head { cursor: default; }
.kairos-title { font-size: 12px; letter-spacing: 0.5em; font-weight: 600; color: #7fe0ff; }
.kairos-sub { flex: 1; font-size: 10.5px; color: #545a6c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kairos-icon { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #2c3242; background: #11141c; color: #8a90a2; cursor: pointer; font-size: 12px; }
.kairos-icon:hover { border-color: #7fe0ff; color: #7fe0ff; }
.kairos-stage { position: relative; height: 330px; max-height: calc(100vh - 360px); min-height: 170px; }
.kairos--big .kairos-stage { flex: 1; height: auto; max-height: none; }
.kairos-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.kairos-thought { position: absolute; left: 0; right: 0; top: 10px; text-align: center; pointer-events: none; }
.kairos-line { font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: 15px; color: #dfe9ff; text-shadow: 0 0 18px rgba(127, 224, 255, 0.35); min-height: 1.6em; transition: opacity 0.4s; }
.kairos--big .kairos-line { font-size: 19px; }
.kairos-hear { margin-top: 3px; font: 10px var(--mono, ui-monospace, monospace); color: #8a90a2; }
.kairos-controls { padding: 10px 14px 12px; border-top: 1px solid #161a24; background: rgba(12, 14, 22, 0.9); }
.kairos--big .kairos-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.kairos-row { display: grid; grid-template-columns: 4.6em 1fr 2.4em; align-items: center; gap: 8px; font-size: 11.5px; color: #8a90a2; margin: 5px 0; }
.kairos-row output { text-align: right; font: 11px var(--mono, ui-monospace, monospace); color: #e6e8f0; }
.kairos-row input[type="range"] { width: 100%; accent-color: #7fe0ff; }
.kairos-row select { min-width: 0; font: inherit; font-size: 11.5px; padding: 3px 6px; border-radius: 6px; border: 1px solid #2c3242; background: #11141c; color: #e6e8f0; }
.kairos-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kairos-btns button { font: inherit; font-size: 12px; padding: 6px 11px; border-radius: 8px; border: 1px solid #333a4a; background: #161a25; color: #e6e8f0; cursor: pointer; }
.kairos-btns button:hover:not(:disabled) { border-color: #7fe0ff; color: #7fe0ff; }
.kairos-btns button:disabled { opacity: 0.4; cursor: default; }
.kairos-btns .kairos-primary { background: #7fe0ff; border-color: #7fe0ff; color: #04121a; font-weight: 700; }
.kairos-btns .kairos-primary:hover { color: #04121a !important; }
.kairos-btns .kairos-primary.on { background: #ff5d52; border-color: #ff5d52; color: #fff; }
.kairos-rec, .kairos-note { margin-top: 6px; font-size: 10.5px; color: #545a6c; line-height: 1.5; }
.kairos-rec { color: #8a90a2; }
@media (max-width: 700px) {
  .kairos { right: 8px; left: 8px; width: auto; bottom: 64px; }
  .kairos-stage { height: 240px; }
}

/* ---------- プレミックスの浮いたウィンドウ(Pixabay・ネビュラ・プラネテス)を、フローティングのグラスモーフィズムに(2026-10-01、ユーザー要望) ----------
   すりガラス(背景をぼかして透かす)+細い光の縁+上辺のハイライト+深い影。画面の端から少し離して浮かせる。
   Pixabayのパネルはアンサンブル(明るい画面)でも使うので、プレミックスの時だけ(body[data-screen="premix"]) */
body[data-screen="premix"] .imgsearch,
body[data-screen="premix"] .neb-album {
  left: 18px; top: 64px; bottom: 82px; max-height: none;
  border-radius: 20px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.03) 40%, rgba(150, 160, 255, 0.07));
  background-color: rgba(14, 16, 24, 0.2);
  -webkit-backdrop-filter: blur(14px) saturate(180%) brightness(1.08);
  backdrop-filter: blur(14px) saturate(180%) brightness(1.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 24px 70px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.3);
  color: #eef0f6;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
body[data-screen="premix"] .imgsearch { bottom: auto; max-height: calc(100vh - 150px); }
body[data-screen="premix"] .neb-album-title,
body[data-screen="premix"] .imgsearch-title { color: #f2f4fa; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }
body[data-screen="premix"] .neb-album-sub,
body[data-screen="premix"] .imgsearch-keynote,
body[data-screen="premix"] .imgsearch-target,
body[data-screen="premix"] .imgsearch-msg,
body[data-screen="premix"] .imgsearch-credit { color: rgba(226, 230, 240, 0.62); }
body[data-screen="premix"] .neb-meta p,
body[data-screen="premix"] .pl-item p { color: rgba(226, 230, 240, 0.6); }
/* 閉じるボタン・小さなボタン・入力欄もガラスに */
body[data-screen="premix"] .neb-album-close,
body[data-screen="premix"] .imgsearch-close,
body[data-screen="premix"] .neb-place,
body[data-screen="premix"] .imgsearch .btn-small,
body[data-screen="premix"] .imgsearch-q,
body[data-screen="premix"] .imgsearch-type {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #eef0f6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body[data-screen="premix"] .imgsearch-q::placeholder { color: rgba(226, 230, 240, 0.4); }
body[data-screen="premix"] .imgsearch-type option { background: #161923; color: #eef0f6; }
body[data-screen="premix"] .neb-album-close:hover,
body[data-screen="premix"] .imgsearch-close:hover,
body[data-screen="premix"] .neb-place:hover,
body[data-screen="premix"] .imgsearch .btn-small:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.34); color: #fff; }
body[data-screen="premix"] .imgsearch-q:focus { outline: none; border-color: rgba(190, 200, 255, 0.55); background: rgba(255, 255, 255, 0.1); }
/* 中の項目: 触れると淡く光るガラスの板 */
body[data-screen="premix"] .pl-item,
body[data-screen="premix"] .neb-item { border-radius: 12px; transition: background 0.15s, box-shadow 0.15s; }
body[data-screen="premix"] .neb-item { padding: 6px; }
body[data-screen="premix"] .pl-item:hover,
body[data-screen="premix"] .neb-item:hover { background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
body[data-screen="premix"] .neb-item:hover .neb-thumb canvas { box-shadow: 0 0 0 1px rgba(207, 198, 255, 0.5); }
body[data-screen="premix"] .pl-item canvas,
body[data-screen="premix"] .neb-thumb canvas { background: rgba(0, 0, 0, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
body[data-screen="premix"] .imgsearch-thumb { background: rgba(255, 255, 255, 0.06); border-radius: 10px; }
body[data-screen="premix"] .imgsearch-thumb:hover { border-color: rgba(255, 255, 255, 0.45); }
body[data-screen="premix"] .imgsearch-thumb--picked { border-color: #f2b24c; }
@media (max-width: 899px) {
  body[data-screen="premix"] .imgsearch { left: 10px; right: 10px; width: auto; top: 56px; max-height: 55vh; }
}
@media (max-width: 700px) {
  body[data-screen="premix"] .neb-album { left: 10px; right: 10px; top: auto; bottom: 66px; width: auto; max-height: 46vh; }
}

/* ---------- プレミックスの一覧(js/screens/premix.js、2026-10-01) ---------- */
.premix-list { width: min(520px, calc(100vw - 32px)); }
.premix-list-rows { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.premix-list-row { display: flex; align-items: stretch; gap: 6px; }
.premix-list-row > button:not(.premix-list-open) { flex: none; font-size: 12px; padding: 4px 10px; }
.modal .premix-list-open { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }
.modal .premix-list-open b { font-size: 13.5px; color: var(--ink); }
.modal .premix-list-open span { font-size: 11px; color: var(--faint); }
.modal .premix-list-open:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); color: var(--ink); }
.modal .premix-list-row--current .premix-list-open { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.premix-landing-actions { display: flex; gap: 8px; justify-content: center; }
.premix-landing-actions [hidden] { display: none; }

/* 「このMIDIについて」(js/midi/card.js の aboutHtml。アンサンブルのパネルと、プレミックスの「ⓘ」、2026-09-29) */
.midi-about { display: flex; flex-direction: column; gap: 6px; font-size: 12px; line-height: 1.6; }
.midi-about-row { display: grid; grid-template-columns: 6.5em 1fr; gap: 8px; }
.midi-about-key { font-size: 10.5px; color: var(--faint); letter-spacing: 0.04em; padding-top: 1px; }
.midi-about-val { color: var(--ink); }
.midi-about-notes { display: block; font-size: 10.5px; color: var(--muted); }
.midi-about-intent { margin-top: 4px; padding: 8px 10px; border-radius: 8px; background: rgba(120, 100, 60, 0.07); border-left: 3px solid var(--accent); }
.midi-about-intent > .midi-about-key { margin-bottom: 4px; }
.midi-about-concept { font-family: var(--serif); font-size: 13.5px; color: var(--ink); }
.midi-about-text { font-size: 11.5px; color: var(--text); margin-top: 3px; }
.midi-about-sub { margin-top: 8px; font-size: 10px; letter-spacing: 0.08em; color: var(--faint); }
.midi-about-layer { margin-top: 4px; }
.midi-about-layer b { font-size: 11.5px; margin-right: 6px; }
.midi-about-layer span { font-size: 10.5px; color: var(--muted); }
.midi-about-layer p { margin: 1px 0 0; font-size: 11px; color: var(--text); }
.midi-about-modal { width: min(520px, calc(100vw - 32px)); }
.snd-info {
  flex: none; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid var(--pm-line-2);
  background: #1b1d24; color: var(--pm-muted); font-size: 11px; line-height: 1; cursor: pointer;
}
.snd-info:hover { border-color: #cfc6ff; color: #cfc6ff; }
.star-card-hex--info { left: 0; top: 100%; transform: translate(-45%, 14px); background: #5a5480; font-size: 13px; }
.star-card-hex-strut--info { display: none; }

/* 自作の音色(音階はしご、js/sampler.js、2026-09-29) */
.sampler-modal { width: min(560px, calc(100vw - 32px)); }
.sampler-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 14px; }
.sampler-item { padding: 9px 11px; border-radius: 8px; border: 1px solid var(--line); background: #fdfbf6; }
.sampler-name { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.sampler-default { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: #fff; }
.sampler-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.sampler-actions { display: flex; gap: 6px; margin-top: 6px; }
.sampler-new { padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.sampler-step { font-size: 12px; font-weight: 600; }
.sampler-field { display: grid; grid-template-columns: 3.5em 1fr; align-items: center; gap: 8px; font-size: 12px; }
.sampler-howto { font-size: 11.5px; line-height: 1.7; color: var(--text); background: rgba(120, 100, 60, 0.07); border-radius: 8px; padding: 8px 10px; }
.sampler-buttons { display: flex; gap: 8px; flex-wrap: wrap; }

/* 設定画面の「接続の設定」(APIキーなど)。間違って書き換えないよう、ふだんは折りたたむ(2026-09-29) */
.settings-keys { margin: 4px 0 12px; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; background: #fbf9f4; }
.settings-keys > summary { cursor: pointer; padding: 10px 0; font-size: 12.5px; font-weight: 600; color: var(--muted); list-style: revert; }
.settings-keys[open] > summary { color: var(--ink); border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.settings-keys[open] { padding-bottom: 6px; }

/* ---------- ソウルと VST のパラメータの対応表(js/hostmap.js、2026-10-01) ---------- */
.hostmap-row { display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; border-radius: 8px; border: 1px dashed var(--line); }
.hostmap-row b { font-size: 13px; }
.hostmap-row span { font-size: 11px; color: var(--faint); }
.hostmap-row--ok { border-style: solid; border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.hostmap-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.hostmap-actions button { font-size: 12px; }
.recipe-host { margin-left: 5px; padding: 0 4px; border-radius: 4px; font-size: 9px; letter-spacing: 0.06em; background: #3d6e4f; color: #fff; vertical-align: 1px; }

/* 画像から VST の新しい音色を作る(プレミックス、2026-10-01): 画像カードの「音色」ヘックス(右下の外側)と、「ⓘ」の設定の一覧 */
.star-card-hex--patch { left: 100%; top: 100%; transform: translate(-55%, 14px); background: #7a4f8c; letter-spacing: 0.04em; }
.patch-about { margin-bottom: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); }
.patch-about-head { display: flex; align-items: baseline; gap: 8px; }
.patch-about-head b { font-size: 14px; }
.patch-about-head span { font-size: 11px; color: var(--faint); }
.patch-about p { margin: 4px 0 8px; font-size: 12px; line-height: 1.6; }
.patch-rows { display: flex; flex-direction: column; gap: 3px; max-height: 38vh; overflow-y: auto; }
.patch-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; font-size: 11.5px; padding: 3px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent); }
.patch-row b { font-weight: 600; text-align: right; }
.patch-row b i { font-style: normal; font-size: 9px; padding: 0 3px; border-radius: 3px; background: #3d6e4f; color: #fff; }
.patch-row em { grid-column: 1 / -1; font-style: normal; font-size: 10.5px; color: var(--faint); }
.patch-row--ng span, .patch-row--ng b { opacity: 0.5; text-decoration: line-through; }

/* プリセット目録(js/presetcat.js、2026-10-01): 画像カードの「プリセット」ヘックス(下の真ん中)と、目録・選んだ結果の窓 */
.star-card-hex--preset { left: 50%; top: 100%; transform: translate(-50%, 14px); background: #4f6f8f; font-size: 10px; letter-spacing: 0.02em; }
.modal.pcat-modal { width: min(640px, calc(100vw - 32px)); max-width: none; }
.pcat-tools { display: flex; gap: 6px; margin: 6px 0; }
.pcat-tools input { flex: 1; min-width: 0; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; }
.pcat-list { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; margin-top: 6px; }
.pcat-row { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.pcat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pcat-main b { font-size: 13.5px; }
.pcat-main span { font-size: 11px; color: var(--faint); }
.pcat-main em { font-style: normal; font-size: 12px; }
.pcat-main i { font-style: normal; font-size: 12px; color: var(--accent); }
.pcat-copy { flex: none; font-size: 11.5px; padding: 4px 9px; }

/* ---------- 音色の窓(プレミックスの道具バーの「音色」、js/timbre.js、2026-10-01) ----------
   左に縦長で浮かぶグラスモーフィズムの窓。右に LYRA Host の小窓を並べて見比べる。見出しで動かし、右下の角で大きさを変える */
.timbre-win {
  position: fixed; left: 18px; top: 64px; bottom: 82px; width: 400px; min-width: 300px; min-height: 240px;
  max-width: calc(100vw - 20px);
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; z-index: 60;
  resize: both; overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.03) 40%, rgba(150, 160, 255, 0.07));
  background-color: rgba(14, 16, 24, 0.2);
  -webkit-backdrop-filter: blur(14px) saturate(180%) brightness(1.08);
  backdrop-filter: blur(14px) saturate(180%) brightness(1.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 24px 70px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.3);
  color: #eef0f6; font-size: 12.5px;
}
.timbre-head { display: flex; align-items: center; gap: 6px; cursor: grab; user-select: none; touch-action: none; }
.timbre-head:active { cursor: grabbing; }
.timbre-title { font-size: 13px; letter-spacing: 0.08em; color: #f2f4fa; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); margin-right: 2px; }
.timbre-win select, .timbre-win input, .timbre-win button {
  font: inherit; font-size: 12px; color: #eef0f6; border-radius: 8px; padding: 5px 8px;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.timbre-win button { cursor: pointer; }
.timbre-win button:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.34); color: #fff; }
.timbre-win button:disabled { opacity: 0.5; cursor: default; }
.timbre-win input::placeholder { color: rgba(226, 230, 240, 0.4); }
.timbre-win input:focus, .timbre-win select:focus { outline: none; border-color: rgba(190, 200, 255, 0.55); background: rgba(255, 255, 255, 0.1); }
.timbre-win select option { background: #161923; color: #eef0f6; }
.timbre-soul { flex: 1; min-width: 0; }
.timbre-close { width: 28px; padding: 4px 0 !important; }
.timbre-info { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: rgba(226, 230, 240, 0.55); }
.timbre-info .is-ok { color: #9fe3c4; }
.timbre-tabs { display: flex; gap: 4px; }
.timbre-tabs button { flex: 1; }
.timbre-tabs button.is-on { background: rgba(190, 200, 255, 0.22); border-color: rgba(200, 210, 255, 0.5); color: #fff; }
.timbre-search, .timbre-ask { display: flex; gap: 6px; }
.timbre-search input, .timbre-ask input { flex: 1; min-width: 0; }
.timbre-ask[hidden] { display: none; }
.timbre-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 2px;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }
.timbre-sub { display: flex; align-items: center; gap: 8px; font-size: 11px; color: rgba(226, 230, 240, 0.62); margin-top: 2px; }
.timbre-sub small { margin-left: auto; opacity: 0.7; }
.timbre-sub button { margin-left: auto; padding: 2px 8px; font-size: 11px; }
.timbre-empty { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; color: rgba(226, 230, 240, 0.7); line-height: 1.6; }
.timbre-win .panel-empty { color: rgba(226, 230, 240, 0.5); font-size: 11.5px; }
.timbre-win .pcat-row, .timbre-prow, .timbre-patch {
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; background: rgba(255, 255, 255, 0.035);
  transition: background 0.15s, box-shadow 0.15s;
}
.timbre-win .pcat-row:hover, .timbre-prow:hover, .timbre-patch:hover { background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.timbre-win .pcat-main span { color: rgba(226, 230, 240, 0.5); }
.timbre-win .pcat-main em { color: rgba(236, 238, 246, 0.82); }
.timbre-win .pcat-main i { color: #f2c46d; }
.timbre-win .pcat-copy { font-size: 11px; padding: 3px 7px; white-space: nowrap; }
.timbre-prow { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; }
.timbre-prow--vstonly { opacity: 0.7; border-style: dashed; }
.timbre-pmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.timbre-pmain b { font-size: 13px; }
.timbre-pmain > span { font-size: 11px; color: rgba(226, 230, 240, 0.5); }
.timbre-pmain em { font-style: normal; font-size: 12px; color: rgba(236, 238, 246, 0.82); line-height: 1.5; }
.timbre-pmain em small { display: inline-block; font-size: 10px; color: rgba(190, 200, 255, 0.75); margin-right: 6px; }
.timbre-vst { align-self: flex-start; font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px dashed rgba(190, 200, 255, 0.55); color: #cdd5ff; margin-top: 2px; }
.timbre-vst.is-ok { border-style: solid; color: #9fe3c4; border-color: rgba(159, 227, 196, 0.6); }
.timbre-vst.is-none { color: rgba(226, 230, 240, 0.4); border-color: rgba(255, 255, 255, 0.18); }
.timbre-val { font-size: 12px; color: #f2c46d; white-space: nowrap; font-variant-numeric: tabular-nums; }
.timbre-patch { padding: 8px 10px; }
.timbre-patch summary { cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.timbre-patch summary span { font-size: 11px; color: rgba(226, 230, 240, 0.55); }
.timbre-settings { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; font-size: 11.5px; }
.timbre-settings div { display: flex; justify-content: space-between; gap: 10px; }
.timbre-settings span { color: rgba(226, 230, 240, 0.6); }
@media (max-width: 699px) {
  .timbre-win { left: 10px !important; right: 10px; top: auto !important; bottom: 66px !important; width: auto !important; height: 55vh !important; resize: none; }
}

/* ---------- プレミックスのカードのピン留め(見出しのボタン。js/screens/premix.js の attachPin、2026-10-01) ---------- */
.pm-pin {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; margin-left: 2px;
  border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); color: rgba(226, 230, 240, 0.45); cursor: pointer;
  transform: rotate(35deg); transition: color 0.15s, background 0.15s, transform 0.15s;
}
.pm-pin:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
.pm-pin--on { color: #f2c46d; border-color: rgba(242, 196, 109, 0.6); background: rgba(242, 196, 109, 0.14); transform: rotate(0deg); }
.pm-pin--float { position: absolute; left: 8px; top: 8px; z-index: 3; opacity: 0; }
.star-card--nebula:hover .pm-pin--float, .pm-pin--float.pm-pin--on { opacity: 1; }
.pmi-name .pm-pin { width: 18px; height: 18px; vertical-align: middle; margin-left: 6px; }
.sph-name .pm-pin { width: 16px; height: 16px; margin-left: 4px; vertical-align: middle; }
.star-card.pm-pinned { box-shadow: 0 0 0 1px rgba(242, 196, 109, 0.55), 0 0 14px rgba(242, 196, 109, 0.18); }
.star-card--nebula.pm-pinned { box-shadow: none; }
.snd-msg .btn-small { pointer-events: auto; font-size: 10.5px; }

/* ---------- 見立て蔵(語彙帳、js/mitategura.js、2026-10-02) ---------- */
.mitate-btn { font-family: var(--serif); font-size: 14px; font-weight: 700; }
.mitate-overlay { z-index: 240; }
/* 見立て蔵の窓・お手本の窓(z-index 240)から開いた確認・入力のダイアログ(「Geminiで足す」「外す」など)は、窓より上に(2026-10-07、
   ユーザー指摘「ポップアップが見立て蔵ウィンドウの裏で開いている」)。どれも body の直下に後から足されるので、後ろの兄弟として選ぶ */
.mitate-overlay ~ .modal-overlay:not(.mitate-overlay):not(.demo-overlay),
.demo-overlay ~ .modal-overlay:not(.mitate-overlay):not(.demo-overlay) { z-index: 250; }
.modal.mitate-modal { position: relative; width: min(1180px, calc(100vw - 24px)); max-width: none; max-height: calc(100vh - 32px); }
.mitate-modal h2 { margin: 0 36px 6px 0; font-family: var(--serif); }
.mitate-sub { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 10px; font-family: inherit; }
.mitate-lead { font-size: 12px; line-height: 1.8; color: var(--muted); margin: 0 0 10px; }
.mitate-lead b { color: var(--ink); }
.mitate-filters { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 6px; }
.mitate-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.modal.mitate-modal .mitate-chips button { min-width: 0; margin: 0; font-size: 12px; padding: 3px 10px; border-radius: 12px; border: 1px solid var(--accent-line); background: #fff; color: var(--ink); cursor: pointer; }
.modal.mitate-modal .mitate-chips button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.mitate-count { font-size: 11px; color: var(--muted); margin: 4px 0 10px; }
/* Gemini で足す(js/mitategen.js、2026-10-02) */
.mitate-gen-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 10px; }
.modal.mitate-modal .mitate-gen-row button { min-width: 0; margin: 0; font-size: 12px; padding: 5px 14px; border-radius: 14px; }
.mitate-gen-note { font-size: 11px; color: var(--muted); }
.mitate-tags .t-gen { background: #fff; color: var(--accent-deep); border: 1px dashed var(--accent); }
.modal.mitate-modal .mitate-card footer [data-remove] { color: var(--muted); }
.mitate-card footer { flex-wrap: wrap; gap: 4px 0; }
.modal.mitate-modal .mitate-card footer button { white-space: nowrap; }
.mitate-card footer .mitate-stars { white-space: nowrap; }
.mitate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.mitate-empty { font-size: 13px; color: var(--muted); }
.mitate-card { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 10px; background: #fffdf8; border: 1.5px dashed var(--accent-line); }
.mitate-card.is-confirmed { border-style: solid; border-color: var(--accent); }
.mitate-card.is-playing { box-shadow: 0 0 0 2px rgba(184, 134, 59, 0.35); }
.mitate-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.mitate-name { font-family: var(--serif); font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.mitate-moment { display: block; font-family: inherit; font-size: 11px; font-weight: 400; color: var(--muted); line-height: 1.6; margin-top: 2px; }
.mitate-turn { flex: none; min-width: 40px; padding: 0 6px; white-space: nowrap; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 15px; font-weight: 700; color: #fff; background: #2b2620; letter-spacing: 0; }
.mitate-card header .mitate-name { flex: 1; }
.modal.mitate-modal .mitate-play { flex: none; padding: 0; min-width: 0; width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--accent); color: #fff; font-size: 13px; cursor: pointer; }
.mitate-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.mitate-tags span { font-size: 10px; padding: 1px 7px; border-radius: 8px; background: #f2ebdd; color: var(--ink); }
.mitate-tags .t-春 { background: #f8dde4; } .mitate-tags .t-夏 { background: #d9eedc; } .mitate-tags .t-秋 { background: #f6dfc6; } .mitate-tags .t-冬 { background: #dde6f2; }
.mitate-tags .t-sense { background: #fff; border: 1px solid var(--accent-line); }
.mitate-tags .t-tone-myst { background: #2b2620; color: #fff; } .mitate-tags .t-tone-daily { background: #6f8a5a; color: #fff; }
.mitate-tags .t-tone-wamon { background: #2a4a9a; color: #fff; } .mitate-tags .t-tone-bird { background: #d9412b; color: #fff; }
/* 文様・鳥(配色の音、js/mitatecolor.js): 配色の帯と、時間×高さに色の粒を置いた譜面 */
/* LYRA Host の音の情報(プレミックスの「このMIDIについて」、js/screens/premix.js の hostSoundHtml) */
.host-sound { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: rgba(127, 179, 168, 0.08); border: 1px solid rgba(127, 179, 168, 0.3); font-size: 12px; line-height: 1.7; }
.host-sound .hs-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; opacity: 0.75; }
.host-sound .hs-chain { margin: 2px 0; font-weight: 600; }
.host-sound .hs-note { margin: 2px 0; }
.host-sound details { margin-top: 4px; }
.host-sound summary { cursor: pointer; }
.host-sound ul { margin: 4px 0 0; padding-left: 18px; max-height: 220px; overflow-y: auto; }
.host-sound .hs-tag { font-size: 10px; padding: 0 5px; border-radius: 6px; background: rgba(201, 164, 92, 0.25); }
.host-sound .hs-soul { background: rgba(127, 179, 168, 0.3); }
.mitate-pal { display: flex; height: 8px; border-radius: 3px; overflow: hidden; border: 1px solid #d9cfbd; }
.mitate-pal i { display: block; height: 100%; }
.mitate-score { display: block; width: 100%; height: 90px; border-radius: 6px; background: #14120f; }
.mitate-roll { position: relative; border-radius: 6px; overflow: hidden; background: #1d1a16; }
.mitate-roll .piano-roll { display: block; height: 90px; margin: 0; background: transparent; border-radius: 0; }
.mitate-roll .roll-bars line { stroke: rgba(255, 255, 255, 0.08); }
.mitate-roll rect { opacity: 0.6; }
.mitate-roll rect.on { opacity: 1; filter: brightness(1.6) drop-shadow(0 0 3px rgba(255, 240, 200, 0.9)); }
.mitate-head { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #ffe2a8; box-shadow: 0 0 8px rgba(255, 226, 168, 0.9); pointer-events: none; }
.mitate-scene { font-size: 12px; line-height: 1.7; margin: 0; color: var(--ink); }
.mitate-kiki { font-size: 11px; margin: 0; color: var(--accent-deep); }
.mitate-device { font-size: 11px; line-height: 1.7; margin: 0; color: var(--muted); }
.mitate-device b { display: inline-block; font-size: 10px; padding: 0 6px; margin-right: 5px; border-radius: 8px; background: #f2ebdd; color: var(--ink); font-weight: 600; }
.mitate-meta { font-size: 10px; color: var(--muted); }
.mitate-card footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 4px; }
.modal.mitate-modal .mitate-star { border: none; background: none; box-shadow: none; min-width: 0; margin: 0; padding: 0 1px; font-size: 16px; color: #d9cfbd; cursor: pointer; }
.modal.mitate-modal .mitate-star.on { color: var(--accent); }
.modal.mitate-modal .mitate-confirm { min-width: 0; margin: 0; font-size: 11px; padding: 3px 10px; border-radius: 10px; border: 1px dashed var(--accent-line); background: #fff; color: var(--muted); cursor: pointer; }
.modal.mitate-modal .mitate-midi { min-width: 0; margin: 0 6px 0 auto; font-size: 11px; padding: 3px 10px; border-radius: 10px; border: 1px solid var(--accent-line); background: #fff; color: var(--ink); cursor: pointer; }
.modal.mitate-modal .is-confirmed .mitate-confirm { border-style: solid; border-color: var(--accent); color: var(--accent-deep); font-weight: 600; }

/* PLANCK: 承認済みの視野と変身 */
  /* ---- 変身の途中 ---- */
  .pk-ghost { position: fixed; z-index: 30; pointer-events: none; }
  .pk-ghost .shell { position: absolute; inset: 0; background: linear-gradient(180deg, #252831, #1c1e25); border: 1px solid var(--pm-line-2);
    border-radius: 11px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45); }
  .pk-ghost .shell.round { border-radius: 50%; background: radial-gradient(circle at 34% 28%, #3b3f4b, #1c1e25 60%, #0f1014); border: none; }
  .pk-ghost .ghead { position: absolute; left: 10px; top: 9px; right: 10px; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; }
  .pk-ghost .gbody { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 40%; border-radius: 6px;
    background: repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 22px, transparent 22px 30px); }
  .pk-ghost .win { position: absolute; overflow: hidden; border-radius: 5px; }
  .pk-ghost .win canvas { position: absolute; top: 0; height: 100%; }
  .pk-ghost .flare { position: absolute; inset: -16px; border-radius: 50%; filter: blur(16px); opacity: 0; background: rgba(242, 178, 76, .5); }

  /* ---- プランク ---- */
  .star-card--planck { position: absolute; }
  .star-card--planck::before { content: ''; position: absolute; left: 70px; top: 10px; right: -40px; bottom: -40px; pointer-events: none;
    background: radial-gradient(circle at center, rgba(110, 150, 255, .14), transparent 66%); filter: blur(22px); }
  .star-card--planck.hover::before { background: radial-gradient(circle at center, rgba(143, 211, 255, .34), transparent 70%); }
  .pk-head { height: 26px; display: flex; align-items: center; gap: 8px; padding-left: 92px; cursor: move; color: var(--pm-muted); white-space: nowrap; }
  .pk-head b { color: #fff; letter-spacing: .32em; font-size: 11px; }
  .pk-head button { background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--pm-text); border-radius: 6px; cursor: pointer; font-size: 11px; padding: 1px 8px; line-height: 16px; }
  .pk-head button.on { border-color: var(--acc); color: var(--acc); }
  .pk-head .read { color: var(--acc); font-variant-numeric: tabular-nums; }
  .pk-body { display: flex; }
  .pk-lanes { width: 80px; flex: none; position: relative; }
  .pk-lane { position: absolute; left: 0; right: 6px; display: flex; align-items: center; justify-content: flex-end; gap: 3px;
    color: var(--pm-muted); font-size: 10.5px; transform: translateY(-50%); }
  .pk-lane i { font-style: normal; margin-right: 2px; }
  .pk-lane button { background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--pm-muted); border-radius: 5px; cursor: pointer; font-size: 10px; width: 20px; height: 18px; padding: 0; font-weight: 700; }
  .pk-lane button.m.on { background: #d9534a; border-color: #d9534a; color: #fff; }
  .pk-lane button.s.on { background: #e8c547; border-color: #e8c547; color: #1a1606; }
  .pk-lane.off { opacity: .45; }
  .pk-lane.small i { display: none; }
  .pk-lenswrap { position: relative; }
  .pk-lens { position: relative;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 26px, #000 calc(100% - 26px), transparent),
                        linear-gradient(to bottom, transparent, #000 22px, #000 calc(100% - 22px), transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 26px, #000 calc(100% - 26px), transparent),
                linear-gradient(to bottom, transparent, #000 22px, #000 calc(100% - 22px), transparent);
    mask-composite: intersect; }
  .pk-lens canvas { display: block; }
  .reticle { position: absolute; width: 124px; height: 124px; right: -62px; bottom: -62px; cursor: move; touch-action: none; }
  .reticle canvas { display: block; width: 124px; height: 124px; }


body[data-screen="premix"] .star-card--planck { background:transparent; border:0; padding:0; box-shadow:none; border-radius:0; overflow:visible; min-width:520px; --acc:#8fd3ff; --line:rgba(140,160,255,.18); }
.pk-lanes { height:440px; }
.pk-lenswrap { width:440px; height:440px; }
.pk-head .read { font-size:10px; }
.pk-head .pm-pin { flex:none; }

/* プレミックスの出どころ一覧。エリアの枠は使わない。 */
.pm-sources { position:fixed; left:24px; top:100px; width:340px; max-height:70vh; overflow:auto; z-index:80; padding:14px; border:1px solid #475063; border-radius:16px; color:#dfe2e8; background:rgba(20,23,32,.86); backdrop-filter:blur(14px); box-shadow:0 18px 50px #0006; }
.pm-sources-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.pm-source { display:flex; flex-wrap:wrap; gap:6px; padding:12px 0; border-top:1px solid #ffffff18; }
.pm-source > b, .pm-source > span { flex-basis:100%; }
.pm-source > span { color:#9ba5ba; font-size:11px; }
.pm-sources button { background:#ffffff08; border:1px solid #ffffff30; border-radius:7px; color:inherit; padding:5px 9px; cursor:pointer; }
.snd-permission { position:absolute; top:-22px; left:0; }