@onjmin/dtm 2.1.8 → 2.1.10

package/dist/index.d.ts

@@ -17,6 +17,10 @@ declare function createAudioContext(): {
 declare function buildNameToKeyMapping(): Promise<Record<string, string>>;
 /** GM楽器名一覧（128音色）。トラック個別楽器のプルダウン選択肢に使う。 */
 declare const GM_INSTRUMENT_NAMES: string[];
+/**
+ * 楽器名（または正規化名）からGMプログラム番号(0-127)を取得する。見つからなければ null。
+ */
+declare const programOfInstrumentName: (name: string) => number | null;
 
 type MountChordPlayerOptions = {
     /** 使用する AudioContext（省略時は内部生成） */
@@ -312,6 +316,11 @@ type StructureFeatures = {
     climaxPeaks: number;
     /** メロディが鳴っていないステップに、サブメロの音が入っている比率（コール&レスポンス）。 */
     complementarity: number;
+    /**
+     * 音の進む向きが反転した割合（折り返しの多さ）。跳躍率も順次進行率も隣接2音しか
+     * 見ないので、「同じ方向へ流れ続ける旋律」と「上って下りる旋律」を区別できない。
+     */
+    turnRatio: number;
 };
 /**
  * コール&レスポンス。サブメロの**音の入り（オンセット）**のうち、メロディが休んで
@@ -349,6 +358,18 @@ type DensityFeatures = {
     notesPerBar: number;
     /** 8分音符以下の短い音が占める比率。曲の「刻みの細かさ」。 */
     shortNoteRatio: number;
+    /**
+     * 小節ごとの音数の変動係数（標準偏差÷平均）。歌っている小節だけを母数にする。
+     * {@link notesPerBar} は平均なので、どの小節に音が集まっているかを何も言わない。
+     */
+    barDensityCv: number;
+    /**
+     * 音数の「崖」の割合。直前の小節が3音以上あり、そこから**3割以下**へ落ちる
+     * 小節が、隣接する小節の組のうちどれだけあるか（参考曲は2%、初版の生成物は11%）。
+     * 人間の曲もフレーズの切れ目で音数を落とすが、5.9音→1.3音の落とし方はしない。
+     * **無音（0音）の小節は数えない**——間奏や落ちは構造として正しいため。
+     */
+    densityCliff: number;
 };
 type TensionFeatures = {
     /** B部（9〜12小節）がA部（1〜4小節）より緊張しているか。0〜1。 */
@@ -394,15 +415,214 @@ declare const featureVector: (f: {
 declare const featureDistance: (a: number[], b: number[]) => number;
 
 /**
- * 曲のセクション（イントロ・Aメロ・Bメロ・サビ・Cメロ・落ちサビ・間奏・アウトロ）。
+ * 作曲で使う音階の定義。
  *
- * ## なぜ要るか
+ * ## なぜ「中核音」と「主音の位置」だけで足りるのか
  *
- * 作曲マクロは長らく**16小節を A-A'-B-A'' という抽象的な形でしか作っていなかった**。
- * 「いま作っているのが曲のどこなのか」を持っていないので、どの小節も同じ密度・同じ音域で
- * 鳴り、イントロもサビも区別が付かない。人が聴いて最初に分かるのは和音や音程ではなく
- * **「ここはAメロだ」「サビに入った」というセクションの切り替わり**なので、そこが
- * 無いまま細部を詰めても「曲の一部を切り出したもの」にしかならない。
+ * `compose.ts` の旋律は、ハ長調の7音（`MAJOR_SCALE`）の**度数**で組み立ててから
+ * 最後に半音へ落とす。この作りのまま音階を増やせるのは、**日本の伝統的な5音音階
+ * （陽・民謡・律・都節・琉球）が4つともハ長調の7音の部分集合**だからで、違うのは
+ *
+ * - どの音を主音に置くか（{@link ComposeScale.tonic}）
+ * - 7音のうちどの5音を旋律の柱にするか（{@link ComposeScale.core}）
+ *
+ * の2点しかない。チャーチモード（ドリアン等）も同じ2点で書ける。
+ *
+ * | 音階 | 主音 | 構成音 | 主音からの半音 |
+ * |---|---|---|---|
+ * | 陽 | ド | ド レ ミ ソ ラ | 0,2,4,7,9 |
+ * | 民謡 | ラ | ラ ド レ ミ ソ | 0,3,5,7,10 |
+ * | 律 | レ | レ ミ ソ ラ シ | 0,2,5,7,9 |
+ * | 都節 | ミ | ミ ファ ラ シ ド | 0,1,5,7,8 |
+ * | 琉球 | ド | ド ミ ファ ソ シ | 0,4,5,7,11 |
+ *
+ * 陽＝従来の長調、民謡＝従来の短調なので、**この2つは以前と完全に同じ挙動**になる
+ * （`core` が昇順で `[0,1,2,4,5]`、`tonic` が 0 と 5）。
+ *
+ * ## 親音階を差し替える音階
+ *
+ * ハーモニックマイナー・ヒジャーズ・ハンガリアン・ブルースはハ長調に無いピッチクラスを
+ * 含むので、上の2点では書けない。こちらは **{@link ComposeScale.parent} で音程集合
+ * そのものを差し替える**。度数の計算は親音階の長さで回るので、6音のブルースも
+ * そのまま乗る。
+ *
+ * | 音階 | 親の音程集合 | 主音 | 中核音 |
+ * |---|---|---|---|
+ * | ハーモニックマイナー | ド レ ミ ファ ソ♯ ラ シ | ラ | ラ ド レ ミ ソ♯ |
+ * | ヒジャーズ | 同上 | ミ | ミ ファ ソ♯ ラ シ |
+ * | ハンガリアン | ド レ♯ ミ ファ ソ♯ ラ シ | ラ | ラ ド レ♯ ミ ソ♯ |
+ * | ブルース | ド ミ♭ ファ ソ♭ ソ シ♭ | ド | ド ミ♭ ファ ソ シ♭ |
+ *
+ * **親音階を差し替える音階は進行プールを必ず自前で持つ**（{@link ComposeScale.center}）。
+ * ハ長調の和音をそのまま当てると、音階に無い音が伴奏から鳴って音階が壊れるため。
+ */
+/**
+ * 音階の1つの音。`semi` は主音からの半音、`fifth` は五度圏インデックス
+ * （C=0, G=1, D=2 … F=-1, B♭=-2 …）。**綴りを保持するために `fifth` を持つ**。
+ * 31平均律で増4度と減5度、ソ♯とラ♭を区別するのに要る。
+ */
+type ScaleDegree = {
+    semi: number;
+    fifth: number;
+};
+/**
+ * ハ長調（イ短調も同じ音の集合で、主音の取り方だけが違う）。
+ * 既定の親音階で、日本の5音音階もチャーチモードも全部この上に乗る。
+ */
+declare const MAJOR_SCALE: ScaleDegree[];
+/**
+ * 和声的短音階の音程集合（イ短調から見て A B C D E F G♯）。ハ長調の座標で書くので
+ * ソがソ♯に入れ替わった形になる。
+ *
+ * **導音（ソ♯）を持つのがこの音階の全部**で、`E7 → Am` の引力はここから出る。
+ * ファとソ♯の間が増2度（3半音）空くのが特徴で、旋律がそこを跨ぐと一気に
+ * 「泣き」の響きになる。主音をラに取れば和声的短音階、ミに取ればヒジャーズ
+ * （フリジアン・ドミナント）で、音の集合は同じ。
+ */
+declare const HARMONIC_MINOR_SCALE: ScaleDegree[];
+/**
+ * ハンガリアン・マイナー（ジプシー音階）の音程集合（A B C D♯ E F G♯）。
+ *
+ * 和声的短音階のレをレ♯へ上げた形で、**増2度が2か所**（ド→レ♯、ファ→ソ♯）になる。
+ * 音階の中で最も跳ねた響きを持つ代わりに、三和音がほとんど組めない
+ * （{@link HUNGARIAN_CENTER} 参照）。
+ */
+declare const HUNGARIAN_SCALE: ScaleDegree[];
+/**
+ * ブルース音階（C E♭ F G♭ G B♭）。**この音階だけ6音**で、度数の計算が
+ * 7で回らないことの試金石になっている。
+ *
+ * ソ♭がブルーノート。中核から外して経過音の位置に置くと、マイナーペンタの上を
+ * 掠める本来の使われ方になる。伴奏は `C7`・`F7`・`G7` で長3度を鳴らすので、
+ * **旋律の短3度と伴奏の長3度がぶつかる**——それがブルースの響きそのもの。
+ */
+declare const BLUES_SCALE: ScaleDegree[];
+/** 音階の識別子。 */
+type ComposeScaleId = "yo" | "minyo" | "ritsu" | "miyakobushi" | "ryukyu" | "dorian" | "phrygian" | "lydian" | "mixolydian" | "harmonic_minor" | "hijaz" | "hungarian" | "blues";
+/**
+ * 主音のダイアトニック度数。0=ド, 1=レ, ..., 6=シ。
+ * 進行プールはこの値で引く（{@link TONIC_CENTERS}）。
+ */
+type TonicDegree = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+type ComposeScale = {
+    id: ComposeScaleId;
+    /** 表示名。 */
+    label: string;
+    /** 主音の度数（{@link ComposeScale.parent} の何番目か）。 */
+    tonic: TonicDegree;
+    /**
+     * 音程集合そのものの差し替え。省略時は {@link MAJOR_SCALE}（ハ長調の7音）。
+     *
+     * ここを差し替えると `degreeToPitch` の返す音が変わるので、**旋律だけでなく
+     * 順次進行・跳躍の埋め・着地音まで全部が新しい音程集合の上に乗る**。
+     * 長さは7でなくてよい（ブルースは6音）。
+     */
+    parent?: ScaleDegree[];
+    /**
+     * 旋律の柱にする5音（ダイアトニック度数）。主音から順に書く。
+     * ここに無い2音は「音階の外」として、和音構成音か経過音のときだけ通す。
+     */
+    core: number[];
+    /**
+     * 主和音が短三和音か。調性格（`COMPOSE_KEYS`）をどちら側から引くかに使う。
+     * 主音が短三和音を持つ音階に長調の調性格を当てると、説明と響きが食い違う。
+     */
+    minorish: boolean;
+    /**
+     * **中核音の外を厳しく締めるか。**
+     *
+     * `true` にすると、和音の構成音であっても中核の外なら隣へ逃がし、変化音も減らし、
+     * モチーフを必ず中核音の歩数で組み、ハモリも中核へ寄せる。
+     *
+     * 締めるのは、**中核の外が「音階に無い音」になる音階**だけ。
+     *
+     * - 律・都節・琉球 … 本物の5音音階。中核から外れた2音は音階に無い。琉球音階の
+     *   `F` と `G` はレとラを持っていて、そこを無条件に通すと**「レとラを抜く」という
+     *   音階の定義そのものが崩れる**（実測でレ8%・ラ6%が紛れ込んでいた）
+     * - ブルース … 中核外のソ♭は音階の中だが、**伴奏の `C7`・`F7`・`G7` が
+     *   音階に無い長3度を供給してくる**。締めないと旋律がそちらへ引かれ、
+     *   短3度で歌う／長3度で鳴るというブルースの構図が消える
+     *
+     * 締めないのは次の2つ。
+     *
+     * - 陽・民謡 … ファ・シを自由に使うのはJ-POPの実際の書法で、参考曲の実測値も
+     *   そちら（`compose.ts` の `applyPentatonic` 参照）。締めると従来の曲が変わる
+     * - モード・和声的短音階・ヒジャーズ・ハンガリアン … 7音音階なので、中核の5音は
+     *   旋律の柱を選んだだけ。残りの2音も立派な音階の構成音で、締める理由が無い
+     */
+    strict: boolean;
+    /**
+     * 進行プールの上書き。省略時は主音の位置から {@link TONIC_CENTERS} を引き、
+     * それも無ければ（主音がド／ラ）従来の長調・短調のプールを使う。
+     *
+     * **音程集合を差し替える音階（{@link ComposeScale.parent}）では必須。** ハ長調の
+     * 和音をそのまま当てると、音階に無い音が伴奏から鳴って音階が壊れる。
+     *
+     * **主音が同じでも音階が違えば使える和音が違う**ので、親が同じでもここが要る。琉球音階は
+     * 主音がドだが `Am`・`Dm` を使うとレとラが前に出てしまうし、都節音階と
+     * フリジアンはどちらも主音がミだが、`Am`（ラ・ド・ミ）が中核に収まるのは
+     * 都節だけ。
+     */
+    center?: TonicCenter;
+    /** どんな曲になるかの説明。UI のヒントに出す。 */
+    description: string;
+};
+/** 音階のマスターデータ。 */
+declare const COMPOSE_SCALES: Record<ComposeScaleId, ComposeScale>;
+/** 全音階の識別子。 */
+declare const COMPOSE_SCALE_IDS: ComposeScaleId[];
+/**
+ * 主音の位置ごとの「和声の中心」。進行プールと終止形をここで引く。
+ *
+ * **旋律が5音でも伴奏は7音のダイアトニック和音を使う。** ペンタトニックの旋律を
+ * ダイアトニックの和音に乗せるのは民俗音楽でもポップスでも標準の書き方で、
+ * 和音まで5音に絞ると三和音が組めない音階が出る（律音階には主音の3度が無い）。
+ *
+ * ド（0）とラ（5）は従来の長調・短調そのものなので、ここには置かず
+ * `compose.ts` の既存プール（`SECTION_A_PROGRESSIONS` 他）をそのまま使う。
+ */
+type TonicCenter = {
+    /** 主和音。セクションの締めはここへ落とす。 */
+    tonic: string;
+    /** 半終止に使う和音。「まだ続く」で止めるところに置く。 */
+    half: string;
+    /** 偽終止の落とし先。主和音の代理。 */
+    deceptive: string;
+    /** その主音がトニックかどうかを和音名から判定する正規表現。 */
+    tonicPattern: RegExp;
+    /** A部（Aメロ系）の進行候補。 */
+    a: string[][];
+    /** B部（サビ系）の進行候補。 */
+    b: string[][];
+    /** Cメロの進行候補。 */
+    c: string[][];
+};
+/** その音階の音程集合。省略されていればハ長調。 */
+declare const scaleDegrees: (scale: ComposeScale) => ScaleDegree[];
+/** 1オクターブあたりの音数。7とは限らない（ブルースは6）。 */
+declare const scaleSize: (scale: ComposeScale) => number;
+/**
+ * 音階の指定（`"auto"` | `"any"` | 音階ID）を解決する。
+ *
+ * - `"auto"`（既定）… 従来通り。長調なら陽音階、短調なら民謡音階
+ * - `"any"` … 全音階から抽選
+ * - 音階ID … その音階を使う
+ */
+declare const resolveComposeScale: (choice: string | undefined, minorKey: boolean, rnd?: () => number) => ComposeScale;
+/** 音階の説明文（UI のヒント用）。 */
+declare const getComposeScaleDescription: (choice: string) => string;
+/**
+ * その音階が使う和声の中心。音階ごとの上書き → 主音の位置の既定 → 無し（＝従来の
+ * 長調・短調のプールを使う）の順に引く。
+ */
+declare const resolveCenter: (scale: ComposeScale) => TonicCenter | null;
+
+/**
+ * 曲のセクション（イントロ・Aメロ・Bメロ・サビ・Cメロ・落ちサビ・間奏・アウトロ）。
+ *
+ * 人が聴いて最初に分かるのは和音や音程ではなく**「ここはAメロだ」「サビに入った」という
+ * 切り替わり**なので、どの小節が何なのかを持っていないと、細部を詰めても
+ * 「曲の一部を切り出したもの」にしかならない。
  *
  * ## セクションごとに何を変えるか
  *
@@ -423,11 +643,10 @@ declare const featureDistance: (a: number[], b: number[]) => number;
  *
  * ## テンプレートによる曲構成
  *
- * 現代のJ-POPは「Aメロ→Bメロ→サビ」を2回繰り返し、Cメロを挟んでラスサビへ至る
- * 構成が王道（参考: ONLIVE Studio blog）。同じセクションの**繰り返し**が曲の基本
- * 構造であるため、{@link STRUCTURE_TEMPLATES} でプリセットの構成パターンを用意し、
- * {@link buildSectionPlan} が同一セクション種別の複数回出現を扱えるようにしてある。
- * 2回目以降は `restatement: true` が付き、compose側でメロディ・リズムを再現する。
+ * 現代のJ-POPは「Aメロ→Bメロ→サビ」を2回繰り返し、Cメロを挟んでラスサビへ至る構成が
+ * 王道。同じセクションの**繰り返し**が曲の基本構造なので、{@link STRUCTURE_TEMPLATES}
+ * に構成パターンを持ち、2回目以降には `restatement: true` を付ける（compose側が
+ * メロディ・リズムを1回目から再現する）。
  */
 /** セクションの種類。 */
 type SectionKind = "intro" | "verse" | "prechorus" | "chorus"
@@ -505,122 +724,39 @@ type PlacedSection = {
 declare const buildSectionPlan: (kinds: SectionKind[], templateName?: string) => PlacedSection[];
 
 /**
- * 自動作曲マクロ。シンプルモードの4トラック（メロディ／サブメロ／ベース／伴奏）へ
- * 16小節の曲を丸ごと組み立てる。
- *
- * ## 設計の根拠
- *
- * 「和音構成音を均等音価で並べる」素朴な自動生成は、**リズムが単調で機械的に聞こえる**。
- * この実装は、実際に人が聴いて評価した結果から逆算した次の基準を満たすように作ってある
- * （{@link ComposeStats} で毎回検算し、満たさない draw は引き直す）。
- *
- * - 音価は4種類以上を混在させる。メロディの音価のシャノンエントロピーが
- *   {@link MIN_ENTROPY_BITS} を下回るものは「単調」とみなして採用しない。
- * - 休符を全体の {@link MIN_REST_RATIO}〜{@link MAX_REST_RATIO} 程度入れる。
- * - **順番が本質**: ①コード進行を決める →②先に各小節のリズム型を、隣接小節で変化を
- *   つけて設計する →③その上に音を乗せる。
- * - **短いモチーフを1つ作り、変形で展開する**（反復／セクエンツ／オクターブ上げ）。
- * - **緩急**をつける。休符・ロングトーンの「緩」と16分音符の「急」を対比させる。
- *
- * ## 「どの曲も似ている」を潰すための設計
- *
- * 初版は品質基準こそ満たしていたが、**曲どうしの違い**が出ていなかった。300曲を生成して
- * 測ったところ、ベースの配置は1種類（全曲同一）、サブメロの配置も1種類、メロディの
- * 隣接音程は77%が2半音以内、16小節の役割配置は定数で固定——つまり「同じ設計図の上で
- * 音名だけが違う曲」を量産していた。そこで次を曲ごとの引きに変えてある。
- *
- * - **曲の骨格をランダムに組む**。{@link SECTION_FORMS} から4セクションぶんを引く。
- *   固定するのは「1小節目はモチーフ提示」「B部にクライマックスが1回」「16小節目は終止」
- *   の3点だけで、残りの配置は曲ごとに変わる。
- * - **メロディの書法を曲ごとに引く**（{@link MelodyStyle}）。走句の形・つなぎの形・
- *   ロングトーンの形・終止形・モチーフの原型・跳躍の混ぜ具合を、曲ごとに選び直す。
- * - **跳躍を積極的に使う**。順次進行だけのメロディは「歌いやすい」が「印象に残らない」。
- *   跳躍が隣接音程に占める比率を {@link MIN_LEAP_RATIO}〜{@link MAX_LEAP_RATIO} に収め、
- *   **跳躍の直後は反行の順次進行で埋める**（gap fill）という古典的な定石で歌える形に保つ。
- * - **サブメロを対旋律にする**。初版は和音構成音を1小節に1〜2個置くだけで、旋律と
- *   呼べる形をしていなかった。メロディと反行（contrary motion）する輪郭を持たせ、
- *   置き方も曲ごとに変える。ただし**単音・低密度・長音価**という形は崩さない——
- *   おまかせマスタリングの役割推定がこの3点でサブメロを判定するため。
- * - **ベースに奏法を持たせる**。ルート4分打ち固定をやめ、オルタネイト／ウォーキング／
- *   8分ドライブ／シンコペ等から曲ごとに引く。
- *
- * ## 強拍に何を置くか（重み3階層）
- *
- * 和音の構成音には重みがある（ルート・5度＝最重要／3度・7度＝重要／それ以外＝経過音）。
- * 強拍（小節頭と3拍目）では重みの高い音へ着地させ、弱拍は隣接音でつなぐ。
- * さらに**その瞬間の和音によって、同じ音でも重要度が変わる**。半音上に和音構成音が
- * 来るスケール音は「アボイドノート」として重み0とし、強拍・長い音価では使わない
- * （弱拍の経過音としてだけ通す）。{@link toneWeight} 参照。
- *
- * ## 「基準を満たす」から「候補から選ぶ」へ
- *
- * ここまでの設計でも、**受け入れ基準そのものが曲の構造を測っていなかった**。
- * 16小節の順番をシャッフルして曲を破壊しても、7項目のうち5つは値が1つも動かない。
- * 順序を見ていたのは隣接2音までの2項目だけで、モチーフの配置も盛り上がりの位置も
- * フレーズの呼応も評価対象外だった。しきい値をいくら引き直しても改善しようがない。
- *
- * そこで次の3点を変えてある。
- *
- * - **順序に依存する指標を作った**（{@link file://./compose-metrics.ts}）。
- *   小節どうしの自己相似プロファイル、フレーズの息継ぎ、クライマックスの単峰性、
- *   緊張カーブ、メロディとサブメロのコール&レスポンス。採点の重みは
- *   {@link WEIGHTS} のとおり構造側へ半分以上を配分している。
- * - **合否ではなく点数にした**。ハード制約（{@link HARD}）に触れたものだけを捨て、
- *   残りは {@link DRAW_COUNT} 本の候補から**点数最大のものを選ぶ**。初版は
- *   「しきい値を全部満たした最初の1本」を返していたので、構造が良くても休符率が
- *   0.09なら捨てるし、しきい値さえ満たせば1本目で確定していた。
- * - **しきい値を人間の曲から採った**（{@link CORPUS_BANDS}）。手で決めた定数をやめ、
- *   実際のMIDIから同じ指標を抽出した分布の中央50%を満点にしている。
- *   較正は `scripts/calibrate-corpus.ts`。
- *
- * さらに、指標に最適化した結果として全曲が同じ統計値へ寄るのを防ぐため、直近に作った
- * 曲との距離を加点している（{@link ComposeOptions.recent}）。
- *
- * ## 「調が固定に聞こえる」を潰したこと
- *
- * 曲の調（{@link ROOT_SHIFTS}）は曲ごとに12調へ散らしてあるのに、続けて聴くと
- * どれも同じ調子に聞こえる、という状態が長く残っていた。参考曲91本と生成物を
- * **同じ物差しで測って**原因を特定した（`scripts/compare-corpus.ts`）。
- *
- * - **メロディが調の外の音を1音も出せなかった。** 音の並びは最後まで音階の度数
- *   （{@link MAJOR_SCALE}）で持っていて、{@link nearestChordTone} が `E7` の `G#` を
- *   返しても `semitoneToDegree` がその場で `G` へ丸めていた。実測で非ダイアトニック音は
- *   40曲・約4000音を測って**0音**（参考曲は音数比で中央値4%・p75で11%）。
- *   進行にセカンダリドミナントを入れておきながら、旋律だけが調に留まっていた。
- *   {@link applyChromatic} と、アボイドノートを半音上の和音構成音へ解決させる分岐
- *   （{@link shapeBar}）で、和音の変化音・半音の経過音を通すようにしてある。
- * - **和音の側にも調の外が無かった。** 進行の候補が全部ハ長調／イ短調の
- *   ダイアトニックだったので、借用和音（サブドミナントマイナー・bVII・裏コード）を
- *   候補に足した。
- *
- * ## 帯の内側で、どこに居るか
- *
- * 目標帯（{@link CORPUS_BANDS}）は指標ごとに独立して採った**周辺分布**なので、
- * p25〜p75 を一律に満点にすると**全部の帯の端に同時に居座る曲**も満点を取れる。
- * 実測がまさにそれで、参考曲と生成物の中央値を並べると
- *
- *   1小節の音数 6.3 / 5.2　　順次進行 0.50 / 0.36　　休符率 0.07 / 0.18
- *   跳躍率 0.37 / 0.51　　音域 19 / 23半音
- *
- * と、**どの項目も帯の内側なのに揃って同じ側へ寄っていた**——「スカスカで跳ねて
- * ばかりの曲」は、周辺分布だけ見れば全項目が人間の範囲に収まる。帯の内側にも
- * 中央値へ向かう傾斜を付け（`centeredBand`）、測っていたのに採点していなかった
- * 密度（{@link file://./compose-metrics.ts} の `DensityFeatures`）と順次進行の比率を
- * 採点項目に足した。
- *
- * ただし**採点だけでは密度は動かない**。候補40本はどれも同じ分布から引いた
- * ものなので、選抜しても中央値は1音も動かなかった。曲ごとに狙いの密度と休符率を
- * 先に決めて、それに近いリズム型を引くようにしてある（`targetNotesPerBar` /
- * `targetRestRatio`）。
- *
- * ## サブメロの制約が外れたこと
- *
- * サブメロは長らく「単音・低密度・長音価」の形しか書けなかった。おまかせマスタリングの
- * 役割推定がその3点でサブメロを判定していたため、外すと伴奏と誤判定されて楽器が
- * 変わってしまうからで、**ツールの都合が音楽を縛っていた**。`daw.ts` が simple モードで
- * トラックIDをそのまま役割として使うようになった（推定はMIDI取り込みと advanced モード
- * 専用に退いた）ので、この制約は無くなった。合いの手・ハモリ・対旋律・保続音を
- * {@link SubStyle} として持たせてある。
+ * 自動作曲マクロ。コード進行・メロディ・サブメロ・ハモリ・ベース・伴奏・パッドを
+ * まとめて組み立てる。曲の長さは選んだセクションで決まる
+ * （{@link file://./compose-sections.ts}）。
+ *
+ * ## 組み立ての順番
+ *
+ * ①セクションの設計図を作る →②コード進行を割り当てる →③**各小節のリズム型を先に
+ * 決める** →④その上に音を乗せる。音を先に置いて音価を均等割りすると、どうやっても
+ * 「同じ長さの音が延々と続く」機械的な曲になる。
+ *
+ * 音の側は**2小節のモチーフ**を1つ作り、反復・セクエンツ・オクターブ上げの3通りに
+ * 変形して展開する。小楽節は【問い2小節】＋【答え2小節】で、答えは問いのリズムを
+ * 受けて着地音だけを変える。
+ *
+ * ## 引いて、測って、選ぶ
+ *
+ * {@link DRAW_COUNT} 本の候補を独立に引き、{@link HARD} に触れたものだけを捨てて、
+ * 残りから点数最大のものを返す（{@link evaluate}）。合否ではなく点数にしてあるのは
+ * 「構造は良いが休符率が 0.09 だったので捨てる」を避けるため。
+ *
+ * 採点の目標帯（{@link CORPUS_BANDS}）は**人間が書いたMIDIから実測した分布**で、手で
+ * 決めた定数ではない。較正は `scripts/calibrate-corpus.ts`。帯の内側にも中央値へ向かう
+ * 傾斜を付けてある（`centeredBand`）——周辺分布を一律に満点にすると、全項目が帯の端へ
+ * 同時に寄った曲（スカスカで跳ねてばかりの曲）も満点を取れてしまう。
+ *
+ * 指標に最適化した結果として全曲が同じ統計値へ寄るのを防ぐため、直近に作った曲との
+ * 距離も加点する（{@link ComposeOptions.recent}）。
+ *
+ * ## 測り直し
+ *
+ * 生成物と参考コーパスを同じ物差しで並べるスクリプトが `scripts/compare-*.ts` にある
+ * （特徴量・小節ごとの密度・リズムの語彙・完全一致の反復・音高）。ここを触ったら
+ * 前後を比べる。耳で確かめるときは `scripts/export-samples.ts` で .mid を書き出す。
  */
 
 type ComposedNote = {
@@ -703,6 +839,12 @@ type ComposeOptions = {
      * 省略時は "any"（全24調からランダム抽選）。
      */
     baseKey?: string;
+    /**
+     * 音階の指定（`"auto"` | `"any"` | 音階ID）。省略時は `"auto"` で、
+     * ベース調の長短に合わせて陽音階（長調）／民謡音階（短調）を使う——
+     * **つまり指定しなければ以前と同じ曲が出る**。{@link COMPOSE_SCALES}
+     */
+    scale?: string;
 };
 type ComposeResult = {
     /** 伴奏トラック用のコード進行文字列。`buildChordPlacements` へそのまま渡せる。 */
@@ -719,6 +861,10 @@ type ComposeResult = {
     keyName: string;
     /** 曲の調の表示ラベル（例: "ハ長調 (C)", "イ短調 (Am)"）。 */
     keyLabel: string;
+    /** 曲の音階の識別子（例: "yo", "ryukyu"）。{@link COMPOSE_SCALES} */
+    scaleId: ComposeScaleId;
+    /** 曲の音階の表示ラベル（例: "琉球音階"）。 */
+    scaleLabel: string;
     /** 雰囲気カテゴリのラベル（該当する場合）。 */
     moodLabel?: string;
     /** 曲のテンポ（BPM）。 */
@@ -727,6 +873,10 @@ type ComposeResult = {
     sections: PlacedSection[];
     /** 曲の長さ（小節）。セクションの選び方で変わる。 */
     bars: number;
+    /** 歌の割り当て（ハモリ・デュエット）。{@link VocalPlan} */
+    vocal: VocalPlan;
+    /** 調のふるまい（平行調・トニック回避）。{@link TonalPlan} */
+    tonal: TonalPlan;
     /** 曲に合わせて組み込みから自動選択されたドラムパターン名（DRUM_PATTERNS のキー）。 */
     drum: string;
     /** 曲に合わせて組み込みから自動選択された楽器プリセット名（INSTRUMENT_PRESETS のキー）。 */
@@ -736,12 +886,139 @@ type ComposeResult = {
     bass: ComposedNote[];
     /** ハモリトラック。メロディの3度/6度上。サビセクションでのみ鳴る。 */
     harmony: ComposedNote[];
+    /** 2声目のハモリ。{@link VocalPlan.harmony2} が true のときだけ中身が入る。 */
+    harmony2: ComposedNote[];
+    /**
+     * 主旋律のオクターブ下の重ね（{@link VocalPlan.octaveLayer}）。音高は主旋律の
+     * ままで、トラック側のオクターブ設定で下げる。要所だけなので主旋律の一部。
+     */
+    octave: ComposedNote[];
     /** コードパッド。ストリングス/シンセパッド的なロングトーン。Bメロ以降で鳴る。 */
     pad: ComposedNote[];
+    /**
+     * 間奏の器楽ソロ。**間奏の小節にしか音が入らない**ので、専用トラックへ
+     * そのまま書き込めば、その1本だけ別の楽器（ギターソロ等）に割り当てられる。
+     * 歌メロと同時には鳴らない（歌が休む場所を引き取る声部）。
+     */
+    solo: ComposedNote[];
+    /**
+     * 上級者モードの編曲プラン。どの層をどのセクションでどの奏法で鳴らすか。
+     * {@link ArrangePlan}
+     */
+    arrange: ArrangePlan;
     stats: ComposeStats;
 };
 /** 音価のシャノンエントロピー（bit）。全部同じ音価なら 0 になる。 */
 declare const durationEntropy: (durations: number[]) => number;
+/**
+ * 歌の割り当て。**歌入り作曲**が、どのトラックに誰の声を当てるかを決めるのに使う。
+ *
+ * 歌モノの定石として、ハモリはサビ（または Bメロ）から入り、デュエットでは
+ * 掛け合いで交互に歌う。どちらもトラックが潤沢な advanced モードでだけ展開する。
+ * **ユーザーの操作パラメータにはしない**——曲ごとに自動で引く。
+ */
+type DuetStyle = "none"
+/** セクションごとに交代（1番のAメロはA、2番のAメロはB）。 */
+ | "section"
+/** Aメロ・Bメロで2小節ごとに交代（問い＝A、答え＝B）。 */
+ | "phrase"
+/** サビで2小節ごとに交代する掛け合いサビ。 */
+ | "chorus"
+/** Aメロだけ交代し、あとは1人が歌う。 */
+ | "verse";
+type VocalPlan = {
+    /**
+     * 2人目が歌う区間 `[開始ステップ, 終了ステップ)`。**小節番号ではなく区間で持つ**
+     * ——小節線でぴったり交代すると受け渡しが機械的に聞こえるので、次の人が
+     * 手前から食い気味に入れるようにしてある。
+     */
+    duetSpans: [number, number][];
+    duetStyle: DuetStyle;
+    /** ハモリが入るセクション種別。 */
+    harmonyKinds: SectionKind[];
+    /**
+     * 2声目のハモリを鳴らすか。参考曲（チョウチン少女 ch12/ch11/ch13）では
+     * **1声目が下〜ユニゾン寄り、2声目が上**で主旋律を挟む形になっていた。
+     */
+    harmony2: boolean;
+    /** 主旋律のオクターブ下を重ねるか（ハモリではなく厚みの層）。 */
+    octaveLayer: boolean;
+};
+/**
+ * 編曲の1層。伴奏・装飾・重ねを同じ形で表す。
+ *
+ * `sections` が `null` なら曲全体。`octave` はトラック側のオクターブ設定
+ * （ノート自体は動かさない）。
+ */
+type ArrangeLayer = {
+    pattern: ChordPatternType;
+    sections: SectionKind[] | null;
+    octave: number;
+};
+/**
+ * 上級者モードの編曲プラン。**曲ごとに引く。**
+ *
+ * ここが無かったころ、編曲は「どのトラックが何を鳴らすか」を書いた静的な表だった。
+ * ベースの奏法もサブメロの書法もハモリの範囲も曲ごとに引き直しているのに、編曲だけ
+ * 全曲同じ——伴奏3種が最初から最後まで鳴りっぱなしで、セクションが変わっても伴奏の
+ * 手触りが変わらなかった。
+ *
+ * ## オクターブの重ねを主役にしない
+ *
+ * 「既にあるトラックを1オクターブ動かして別トラックへ写す」層は、音楽的な価値が高くない。
+ * 人の耳はオクターブ違いを**同じ音**として聞く（オクターブ等価）ので、写した層は新しい
+ * 声部にならず、音量と音色がわずかに変わるだけになる。強調としての意味はあるので
+ * 全否定はしないが、**常設にする理由は無い**。
+ *
+ * そこで、
+ *
+ * - 伴奏の層は**奏法そのものを変える**（{@link ArrangeLayer.pattern}）。同じ和音でも
+ *   ブロック・アルペジオ・裏拍・八分食い・分散では鳴る音の位置が違うので、写しではない。
+ * - 主旋律に重ねる層（{@link ArrangePlan.lead}）は**オクターブ上だけでなくユニゾンも引く**。
+ *   同じ高さを別の楽器で重ねると合成音色になり、オクターブ転写より情報量が多い。
+ * - ベースの重ね（{@link ArrangePlan.bassLayer}）は既定で**出さない**。出すときも
+ *   オクターブ下ではなく上へ、盛り上がる場所だけに置く。下へ重ねると 30Hz 前後まで
+ *   落ちて、強調どころか輪郭が濁る。
+ */
+type ArrangePlan = {
+    /**
+     * 伴奏の層。1本目は曲全体の「地」で、2本目以降はセクションを絞って足す。
+     * 長さは1〜3。
+     */
+    backing: ArrangeLayer[];
+    /** きらびやかな装飾（ウワモノ）。`null` なら出さない。 */
+    sparkle: ArrangeLayer | null;
+    /** コードパッドを鳴らすセクション。 */
+    padSections: SectionKind[];
+    /**
+     * 主旋律に重ねる別音色の層。`null` なら重ねない。
+     * `octave` が 0 ならユニゾン（音色だけが変わる）、1 ならオクターブ上。
+     */
+    lead: {
+        sections: SectionKind[];
+        octave: number;
+    } | null;
+    /** ベースの重ね。`null` なら出さない（多くの曲はこちら）。 */
+    bassLayer: {
+        sections: SectionKind[];
+        octave: number;
+    } | null;
+};
+/** 曲の調のふるまい。 */
+type TonalPlan = {
+    /**
+     * 平行調へ振ったセクション種別。ハ長調とイ短調は同じ音の集合なので、調号も
+     * 仲介の和音も要らずに明暗だけが入れ替わる（`keyShift` は 0 のまま）。
+     */
+    relativeKinds: SectionKind[];
+    /**
+     * 平行調なら 0、同主調なら ±3。平行調は調号が変わらないのが利点なので 0 のまま、
+     * 同主調（ハ長調→ハ短調）は主音を保ったまま調号が3つ変わるので ±3 になる。
+     */
+    relativeShift: number;
+    /** トニックを避けて浮遊感を出す曲か。主和音を鳴らさず、主音へも着地しない。 */
+    floating: boolean;
+};
 /**
  * 16小節の曲を組み立てる。
  *
@@ -787,11 +1064,14 @@ declare const CORPUS_BANDS: {
     melodyRange: Band;
     notesPerBar: Band;
     shortNoteRatio: Band;
+    barDensityCv: Band;
+    densityCliff: Band;
     sim1: Band;
     sim2: Band;
     sim4: Band;
     sim8: Band;
     phraseBreath: Band;
+    turnRatio: Band;
     climaxPosition: Band;
     climaxPeaks: Band;
     complementarity: Band;
@@ -2513,8 +2793,71 @@ type InstrumentPreset = {
     submelody: string;
     bass: string;
     chord: string;
+    /**
+     * 間奏のソロを弾く楽器。**歌が休んでいる場所を担当する**ので、`melody` と
+     * 同じでも構わない（ロックの間奏がボーカルと同じ歪みギターなのは正しい）。
+     * 逆に、ここを持たせないと間奏が「伴奏だけの空白」になる。
+     */
+    solo: string;
+    /**
+     * サビでだけ重ねる楽器。主旋律のオクターブ上に薄く足して、サビの手前と
+     * 音色そのものを変える。1トラック1楽器という制約の下で
+     * 「セクションで楽器が変わる」を作る唯一の方法が、**セクションごとに
+     * 別トラックへ書き分けること**。
+     */
+    chorusLead: string;
 };
 declare const INSTRUMENT_PRESETS: Record<string, InstrumentPreset>;
+/**
+ * 実物の楽器の音域（実音・MIDIノート番号、C4=60）。
+ *
+ * **音を作るためではなく、置き場所を決めるために要る。** 1トラック1楽器という制約の下で
+ * セクションごとに音色を変えるには、同じ旋律を別のトラックへオクターブを変えて置くことに
+ * なるが、そのオクターブを楽器の都合と無関係に決めると**その楽器が出せない高さ**へ行く。
+ * サンプルが引き伸ばされて金切り音になり、聴き手には「耳が痛い」としか感じられない。
+ *
+ * 実測すると、サビの重ねを1オクターブ上げる指定は、ミュートトランペット・トランペットで
+ * 14半音、ブラス・合唱・Lead 7 で12半音ぶん音域を突き抜けていた。コードパッド（実音
+ * 77〜93）も、伴奏用の楽器をそのまま使うためナイロンギターで10半音・カリンバで9半音
+ * はみ出していた。
+ *
+ * ソフトシンセは実物が無いので、一般的な音源の使用域を入れてある。
+ * **この表は判断であって実測ではない**——音源を差し替えたら見直すこと。
+ * 未登録の楽器は制限なしとして扱う（{@link fitInstrumentOctave}）。
+ */
+declare const GM_INSTRUMENT_RANGE: Record<string, [number, number]>;
+/**
+ * 明るい音色を持続的に鳴らしてよい高さの上限（実音・MIDIノート番号）。
+ *
+ * **「耳が痛い」は音域の話ではなく、絶対的な高さの話。** 金属体・ベル系の音色は
+ * 倍音が 2〜4kHz に集まり、そこは人の耳がいちばん敏感な帯域なので、実物の音域に
+ * 収まっていても高いところで鳴らし続けると刺さる。グロッケンは実物の音域が
+ * G5(79)〜C8 なので、{@link GM_INSTRUMENT_RANGE} だけで見ると旋律の音域（〜C6）は
+ * 「余裕で範囲内」と判定されてしまう。実際には C6 のグロッケンは金切り音になる。
+ *
+ * ここに載せた楽器は、この高さより上で鳴らないところまでオクターブを下げる
+ * （{@link fitInstrumentOctave}）。**楽器を候補から外すのではなく、置き場所を変える**
+ * ——トラックのオクターブ設定（{@link TrackState.trackOctave} 相当）は、まさに
+ * こういう「得意な音域が偏った音源」を使えるようにするために在る。
+ * 低く鳴らしたグロッケンやオルゴールは、ポップスで普通に使われる柔らかい音になる。
+ */
+declare const GM_BRIGHT_CEILING: Record<string, number>;
+/**
+ * その楽器で無理なく鳴る位置まで、トラックのオクターブを下げる。
+ *
+ * **音色を選び直すのではなく、置き場所を変える。** 得意な音域が偏った音源
+ * （グロッケンのような高音楽器）を使えるようにするのがオクターブ設定の役目なので、
+ * 「その楽器では痛いから候補から外す」は筋が悪い。外すと音色の幅がそのぶん減る。
+ *
+ * **下げる方向にしか動かさない。** 上げる側は「耳が痛い」を作る方向で、直したい当のもの。
+ * 低いほうへはみ出すのは（サンプルは伸びるが）柔らかく鳴るだけなので放っておく。
+ *
+ * @param semitoneRange そのトラックが実際に鳴らす音域 `[最低, 最高]`（オクターブ補正前）
+ * @param instrument GM楽器名。{@link GM_INSTRUMENT_RANGE} に無ければ何もしない
+ * @param wanted 編曲が指定したオクターブ
+ * @returns 実際に設定するオクターブ（`wanted` 以下）
+ */
+declare const fitInstrumentOctave: (semitoneRange: [number, number] | null, instrument: string, wanted: number) => number;
 
 /**
  * 操作履歴を管理するための双方向連結リスト
@@ -2547,13 +2890,14 @@ declare class LinkedList<T> {
 /**
  * マクロアコーディオン内で選択された設定値の localStorage 永続化
  *
- * 構成プリセット、作る部分（セクション）、ベース調、全体シフト、移調の
+ * 構成プリセット、作る部分（セクション）、ベース調、音階、全体シフト、移調の
  * 選択状態を保持し、次回ロード時に復元できるようにする。
  */
 declare const MACRO_STORAGE_KEYS: {
     readonly template: "dtm-macro:template";
     readonly sections: "dtm-macro:sections";
     readonly key: "dtm-macro:key";
+    readonly scale: "dtm-macro:scale";
     readonly shift: "dtm-macro:shift";
     readonly transpose: "dtm-macro:transpose";
 };
@@ -2778,11 +3122,13 @@ declare const isPlausibleMidiTranscription: (midi: unknown, selectedIndices: num
  * ドラム(ch10 = channel 9)のノートはスキップする。
  */
 declare const extractMidiPlacementsByTrack: (midi: unknown, selectedIndices: number[], trackIds: string[]) => MidiExtraction;
+type ExportMidiTrack = {
+    notes: Note[];
+    volume: number;
+    program?: number;
+};
 type ExportMidiOptions = {
-    tracks: {
-        notes: Note[];
-        volume: number;
-    }[];
+    tracks: ExportMidiTrack[];
     getDrumPattern?: (currentBar: number) => DrumPattern | null;
     drumVolume?: number;
     bpm: number;
@@ -3536,7 +3882,7 @@ declare const createDtmStudio: (options?: DtmStudioOptions) => Promise<DtmStudio
  * ドット絵・レトロゲーム風ピクセルアートデザイン（美咲フォント・角なし・ハードシャドウ）。
  * モバイルファースト（狭幅基準）で設計し、min-width メディアクエリで広幅に拡張する。
  */
-declare const DAW_CSS = "\n@font-face {\n  font-family: 'k8x12';\n  src: url('https://db.onlinewebfonts.com/t/777630d46640dc5a928ea833c2fcb875.woff2') format('woff2'),\n       url('https://db.onlinewebfonts.com/t/777630d46640dc5a928ea833c2fcb875.woff') format('woff'),\n       url('https://db.onlinewebfonts.com/t/777630d46640dc5a928ea833c2fcb875.ttf') format('truetype');\n  font-weight: normal;\n  font-style: normal;\n}\n\n/* ====================================================\n   PIXEL MUSIC STUDIO \u2014 \u30C9\u30C3\u30C8\u7D75UI\u30B7\u30B9\u30C6\u30E0\n   PICO-8\u30AB\u30E9\u30FC\u30D1\u30EC\u30C3\u30C8\u30FB\u7F8E\u54B2\u30D5\u30A9\u30F3\u30C8\u30FB\u30B2\u30FC\u30E0\u30A6\u30A3\u30F3\u30C9\u30A6\u67A0\n   ==================================================== */\n\n/* \u30C7\u30B6\u30A4\u30F3\u30C8\u30FC\u30AF\u30F3\u306F\u7DE8\u96C6UI\u672C\u4F53\uFF08.dtm-daw\uFF09\u306B\u52A0\u3048\u3001\u305D\u306E\u5916\u5074\u306B\u5DEE\u3057\u8FBC\u307E\u308C\u308B\n   \u30B3\u30F3\u30C8\u30ED\u30FC\u30EB\u30D0\u30FC\uFF08.dtm-controlbar\uFF09\u306B\u3082\u4F9B\u7D66\u3059\u308B\u3002mountPresetSelect /\n   mountModeSwitch \u306EUI\u306F .dtm-daw \u306E\u5144\u5F1F\u3068\u3057\u3066\u7F6E\u304B\u308C\u308B\u305F\u3081\u3001\u3053\u3053\u3067\u914D\u3089\u306A\u3044\u3068\n   var(--dtm-*) \u304C\u89E3\u6C7A\u3067\u304D\u305A\u7121\u88C5\u98FE\uFF08\u767D\u5730\u30FB\u65E2\u5B9A\u30D5\u30A9\u30F3\u30C8\uFF09\u306B\u306A\u3063\u3066\u3057\u307E\u3046\u3002\n   \u518D\u751F\u5C02\u7528\u30D3\u30E5\u30FC\u306E\u30E2\u30FC\u30C0\u30EB\uFF0F\u5229\u7528\u898F\u7D04\u30AB\u30D0\u30FC\u3001\u6B4C\u58F0\u30E2\u30C7\u30EB\u540D\u306E\u5439\u304D\u51FA\u3057(.dtm-player-balloon)\n   \u306F document.body \u76F4\u4E0B\u3078\u91CD\u306D\u308B\u305F\u3081\u3001.dtm-daw \u306E\u5916\u306B\u51FA\u308B\u3002\u3053\u308C\u3089\u3082\u540C\u69D8\u306B\u30C8\u30FC\u30AF\u30F3\u3092\n   \u4F9B\u7D66\u3057\u306A\u3044\u3068\u7121\u88C5\u98FE\uFF08\u67A0\u7DDA\u306A\u3057\u30FB\u6587\u5B57\u8272\u4E0D\u660E\u306E\u767D\u3044\u7BB1\uFF09\u306B\u306A\u308B\u3002 */\n.dtm-daw,\n.dtm-controlbar,\n.dtm-modal-overlay,\n.dtm-consent-overlay,\n.dtm-chord-player,\n.dtm-player-balloon {\n  /* PICO-8 16\u8272\u30D1\u30EC\u30C3\u30C8\u3088\u308A */\n  --c-black:   #000000;\n  --c-navy:    #1d2b53;\n  --c-purple:  #7e2553;\n  --c-dkgreen: #008751;\n  --c-brown:   #ab5236;\n  --c-dkgray:  #5f574f;\n  --c-gray:    #c2c3c7;\n  --c-white:   #fff1e8;\n  --c-red:     #ff004d;\n  --c-orange:  #ffa300;\n  --c-yellow:  #ffec27;\n  --c-green:   #00e436;\n  --c-cyan:    #29adff;\n  --c-lavend:  #83769c;\n  --c-pink:    #ff77a8;\n  --c-peach:   #ffccaa;\n\n  /* \u30BB\u30DE\u30F3\u30C6\u30A3\u30C3\u30AF\u30C8\u30FC\u30AF\u30F3 */\n  --dtm-bg:       var(--c-black);\n  --dtm-surface:  var(--c-navy);\n  --dtm-deep:     #0a0f1f;\n  --dtm-border:   var(--c-cyan);\n  --dtm-border2:  var(--c-dkgray);\n  --dtm-text:     var(--c-white);\n  --dtm-muted:    var(--c-lavend);\n  --dtm-primary:  var(--c-cyan);\n  --dtm-pfg:      var(--c-black);\n  --dtm-danger:   var(--c-red);\n  --dtm-success:  var(--c-green);\n  --dtm-accent:   var(--c-pink);\n  --dtm-gold:     var(--c-yellow);\n  --dtm-warn:     var(--c-orange);\n  --dtm-tap:      40px;\n  --dtm-gap:      6px;\n  --dtm-font:     'k8x12',ui-monospace,monospace;\n}\n\n.dtm-daw {\n  box-sizing: border-box;\n  font-family: var(--dtm-font);\n  font-size: 14px;\n  line-height: 1.6;\n  letter-spacing: .06em;\n  color: var(--dtm-text);\n  background: var(--dtm-bg);\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: var(--dtm-gap);\n  padding: 0;\n  image-rendering: pixelated;\n  -webkit-font-smoothing: none;\n  -moz-osx-font-smoothing: unset;\n  font-smooth: never;\n  -webkit-tap-highlight-color: transparent;\n}\n.dtm-daw *,\n.dtm-daw *::before,\n.dtm-daw *::after { box-sizing: border-box; }\n\n/* \u2500\u2500\u2500 \u30B2\u30FC\u30E0\u30A6\u30A3\u30F3\u30C9\u30A6\u5171\u901A\u67A0 \u2500\u2500\u2500 */\n/* \u5916\u67A0(\u9ED22px) \u2192 \u8272\u4ED8\u304D2px border \u2192 \u5185\u67A0(\u9ED2inset2px) \u306E3\u91CD\u69CB\u9020 */\n.dtm-win {\n  border: 2px solid var(--c-black);\n  box-shadow:\n    inset 0 0 0 2px var(--c-black),\n    0 0 0 2px var(--dtm-primary),\n    4px 4px 0 var(--c-black);\n  background: var(--dtm-surface);\n}\n\n/* \u2500\u2500\u2500 \u5171\u901A\u30DC\u30BF\u30F3 \u2500\u2500\u2500 */\n.dtm-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  min-height: var(--dtm-tap);\n  min-width: var(--dtm-tap);\n  padding: 0 10px;\n  border: 2px solid var(--dtm-border2);\n  background: var(--dtm-surface);\n  color: var(--dtm-text);\n  font-family: var(--dtm-font);\n  font-size: 13px;\n  text-transform: uppercase;\n  letter-spacing: .12em;\n  cursor: pointer;\n  user-select: none;\n  white-space: nowrap;\n  box-shadow: 3px 3px 0 var(--c-black);\n  transition: none;\n}\n.dtm-btn:active  { transform: translate(3px,3px); box-shadow: none; }\n.dtm-btn:disabled { opacity: .3; cursor: default; box-shadow: none; }\n.dtm-btn--ghost   { background: transparent; border-color: var(--dtm-border2); }\n.dtm-btn--primary { border-color: var(--dtm-primary); background: var(--dtm-primary); color: var(--dtm-pfg); }\n.dtm-btn--success { border-color: var(--dtm-success); background: var(--dtm-success); color: var(--c-black); }\n.dtm-btn--danger  { border-color: var(--dtm-danger);  background: var(--dtm-danger);  color: var(--c-white); }\n.dtm-btn--accent  { border-color: var(--dtm-accent);  background: var(--dtm-accent);  color: var(--c-black); }\n.dtm-btn--icon    { padding: 0; }\n\n/* \u2500\u2500\u2500 \u30A2\u30A4\u30B3\u30F3\u30DC\u30BF\u30F3 \u2500\u2500\u2500 */\n.dtm-iconbtn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dtm-tap);\n  height: var(--dtm-tap);\n  flex: 0 0 auto;\n  border: 2px solid var(--dtm-border2);\n  background: var(--dtm-surface);\n  color: var(--dtm-text);\n  font-size: 16px;\n  cursor: pointer;\n  box-shadow: 3px 3px 0 var(--c-black);\n}\n.dtm-iconbtn:active  { transform: translate(3px,3px); box-shadow: none; }\n.dtm-iconbtn:disabled { opacity: .3; cursor: default; box-shadow: none; }\n\n/* \u2500\u2500\u2500 \u30C8\u30E9\u30F3\u30B9\u30DD\u30FC\u30C8\u30D0\u30FC\uFF08HUD\u30B9\u30BF\u30A4\u30EB\uFF09 \u2500\u2500\u2500 */\n.dtm-topbar {\n  position: sticky;\n  top: 0;\n  z-index: 20;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--dtm-gap);\n  padding: 6px;\n  background: var(--dtm-deep);\n  border: 2px solid var(--c-black);\n  box-shadow:\n    inset 0 0 0 2px var(--c-black),\n    0 0 0 2px var(--dtm-success),\n    4px 4px 0 var(--c-black);\n}\n.dtm-topbar-row1 {\n  display: flex;\n  align-items: center;\n  gap: var(--dtm-gap);\n  flex-basis: 100%;\n  min-width: 0;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n.dtm-topbar-row1::-webkit-scrollbar { display: none; }\n.dtm-topbar-row1 > * { flex-shrink: 0; }\n.dtm-topbar-row1 > .dtm-grow { flex-shrink: 1; }\n\n/* PLAY\u30DC\u30BF\u30F3 \u2014 \u30B2\u30FC\u30E0\u306E\u300C\u6C7A\u5B9A\u30DC\u30BF\u30F3\u300D\u7684\u5B58\u5728\u611F */\n.dtm-play {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dtm-tap);\n  height: var(--dtm-tap);\n  flex: 0 0 auto;\n  border: 2px solid var(--c-black);\n  background: var(--dtm-success);\n  color: var(--c-black);\n  cursor: pointer;\n  box-shadow: 0 0 0 2px var(--dtm-success), 4px 4px 0 var(--c-black);\n}\n.dtm-play:active  { transform: translate(4px,4px); box-shadow: none; }\n.dtm-play:disabled { opacity: .35; cursor: default; box-shadow: none; }\n.dtm-play--stop {\n  background: var(--dtm-danger);\n  box-shadow: 0 0 0 2px var(--dtm-danger), 4px 4px 0 var(--c-black);\n}\n.dtm-rec { color: var(--dtm-danger); }\n\n/* BPM \u2014 \u30C7\u30B8\u30BF\u30EB\u30AB\u30A6\u30F3\u30BF\u30FC\u98A8 */\n.dtm-label {\n  font-family: var(--dtm-font);\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: .14em;\n  color: var(--dtm-muted);\n  white-space: nowrap;\n}\n.dtm-checkbox-label {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-family: var(--dtm-font);\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: .12em;\n  color: var(--dtm-muted);\n  cursor: pointer;\n  user-select: none;\n  margin-top: 4px;\n}\n.dtm-checkbox-label:hover { color: var(--dtm-text); }\n\n/* \u2500\u2500\u2500 \u4F5C\u66F2\u3059\u308B\u30BB\u30AF\u30B7\u30E7\u30F3\u306E\u9078\u629E\uFF08\u30A4\u30F3\u30C8\u30ED\u30FBA\u30E1\u30ED\u2026\u306E\u30C1\u30A7\u30C3\u30AF\uFF09 \u2500\u2500\u2500 */\n.dtm-checks {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px 10px;\n  align-items: center;\n}\n.dtm-check {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-family: var(--dtm-font);\n  font-size: 11px;\n  color: var(--dtm-muted);\n  cursor: pointer;\n  user-select: none;\n  white-space: nowrap;\n}\n.dtm-check:hover { color: var(--dtm-text); }\n.dtm-check input {\n  width: 13px;\n  height: 13px;\n  accent-color: var(--dtm-success);\n  cursor: pointer;\n  flex-shrink: 0;\n}\n.dtm-info-table {\n  border-collapse: collapse;\n  margin: 6px 0;\n  font-size: 11px;\n  width: 100%;\n}\n.dtm-info-table th,\n.dtm-info-table td {\n  border: 1px solid var(--dtm-border);\n  padding: 3px 6px;\n  text-align: left;\n  white-space: nowrap;\n}\n.dtm-info-table th { color: var(--dtm-muted); font-weight: normal; }\n.dtm-hint {\n  font-family: var(--dtm-font);\n  font-size: 10px;\n  color: var(--dtm-muted);\n  white-space: nowrap;\n}\n.dtm-checkbox-label--sub { margin-left: 20px; font-size: 10px; }\n.dtm-checkbox {\n  width: 14px;\n  height: 14px;\n  accent-color: var(--dtm-success);\n  cursor: pointer;\n  flex-shrink: 0;\n}\n\n.dtm-toggle {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-family: var(--dtm-font);\n  font-size: 12px;\n  text-transform: uppercase;\n  letter-spacing: .1em;\n  color: var(--dtm-muted);\n  cursor: pointer;\n}\n.dtm-toggle input { width: 16px; height: 16px; accent-color: var(--dtm-accent); }\n\n/* \u2500\u2500\u2500 \u30C4\u30FC\u30EB\u30C9\u30C3\u30AF\uFF08\u88C5\u5099\u30B9\u30ED\u30C3\u30C8\u98A8\uFF09 \u2500\u2500\u2500 */\n.dtm-tooldock {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--dtm-gap);\n  padding: 6px;\n  background: var(--dtm-deep);\n  border: 2px solid var(--c-black);\n  box-shadow:\n    inset 0 0 0 2px var(--c-black),\n    0 0 0 2px var(--dtm-border2),\n    4px 4px 0 var(--c-black);\n}\n.dtm-sep {\n  width: 2px; align-self: stretch;\n  background: var(--dtm-border2); margin: 2px;\n}\n.dtm-row .dtm-label[data-dtm] { min-width: 48px; text-align: center; }\n\n/* \u2500\u2500\u2500 \u30BB\u30B0\u30E1\u30F3\u30C8\uFF08\u30A2\u30A4\u30C6\u30E0\u30B9\u30ED\u30C3\u30C8\uFF09 \u2500\u2500\u2500 */\n.dtm-seg {\n  display: inline-flex;\n  border: 2px solid var(--dtm-border2);\n  background: var(--dtm-deep);\n  box-shadow: 3px 3px 0 var(--c-black);\n}\n.dtm-segbtn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dtm-tap);\n  height: var(--dtm-tap);\n  border: none;\n  border-right: 2px solid var(--dtm-border2);\n  background: transparent;\n  color: var(--dtm-muted);\n  cursor: pointer;\n}\n.dtm-segbtn:last-child { border-right: none; }\n.dtm-segbtn--active {\n  background: var(--dtm-gold);\n  color: var(--c-black);\n}\n.dtm-segbtn:not(.dtm-segbtn--active):active { background: var(--dtm-border2); }\n\n/* \u2500\u2500\u2500 \u30D5\u30A9\u30FC\u30E0\u8981\u7D20 \u2500\u2500\u2500 */\n.dtm-select, .dtm-input, .dtm-textarea {\n  min-height: var(--dtm-tap);\n  padding: 4px 8px;\n  border: 2px solid var(--dtm-border2);\n  background: var(--dtm-deep);\n  color: var(--dtm-text);\n  font-family: var(--dtm-font);\n  font-size: 13px;\n  letter-spacing: .06em;\n  box-shadow: inset 2px 2px 0 var(--c-black);\n}\n.dtm-select:focus, .dtm-input:focus, .dtm-textarea:focus {\n  outline: none;\n  border-color: var(--dtm-primary);\n}\n.dtm-input--num { width: 64px; text-align: center; font-size: 16px; }\n/* \u4ED6\u306E\u30B3\u30F3\u30C8\u30ED\u30FC\u30EB\u3068\u540C\u3058\u884C\u306B\u7F6E\u304F\u30D7\u30EB\u30C0\u30A6\u30F3\uFF08\u697D\u5668\u30FB\u6B4C\u5531\u30E2\u30C7\u30EB\uFF09 */\n.dtm-select--half { flex: 1 1 120px; min-width: 0; max-width: 200px; }\n.dtm-textarea { width: 100%; min-height: 56px; resize: vertical; line-height: 1.7; }\n.dtm-textarea.dtm-grow { width: 0; }\n.dtm-range { height: var(--dtm-tap); accent-color: var(--dtm-primary); }\n.dtm-range:disabled { opacity: .35; cursor: default; }\n\n/* \u2500\u2500\u2500 \u30B3\u30F3\u30C8\u30ED\u30FC\u30EB\u30D0\u30FC\uFF08\u697D\u5668\u30D7\u30EA\u30BB\u30C3\u30C8 / \u30E2\u30FC\u30C9\u5207\u66FF\u306A\u3069\u306E\u5DEE\u3057\u8FBC\u307FUI\uFF09 \u2500\u2500\u2500 */\n.dtm-controlbar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--dtm-gap);\n  padding: 6px 8px;\n  background: var(--dtm-deep);\n  border: 2px solid var(--c-black);\n  box-shadow:\n    inset 0 0 0 2px var(--c-black),\n    0 0 0 2px var(--dtm-border2),\n    4px 4px 0 var(--c-black);\n  margin-bottom: var(--dtm-gap);\n}\n.dtm-controlbar-label {\n  font-family: var(--dtm-font);\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: .14em;\n  color: var(--dtm-accent);\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n.dtm-controlbar .dtm-select { flex: 1 1 160px; }\n\n/* \u30E2\u30FC\u30C9\u5207\u66FF\uFF08\u30C6\u30AD\u30B9\u30C8\u7248\u30BB\u30B0\u30E1\u30F3\u30C8\uFF09 */\n.dtm-modeseg {\n  display: inline-flex;\n  border: 2px solid var(--dtm-border2);\n  box-shadow: 3px 3px 0 var(--c-black);\n}\n.dtm-modebtn {\n  min-height: var(--dtm-tap);\n  padding: 0 14px;\n  border: none;\n  border-right: 2px solid var(--dtm-border2);\n  background: var(--dtm-deep);\n  color: var(--dtm-muted);\n  font-family: var(--dtm-font);\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: .12em;\n  cursor: pointer;\n}\n.dtm-modebtn:last-child { border-right: none; }\n.dtm-modebtn--active { background: var(--dtm-primary); color: var(--dtm-pfg); }\n.dtm-modebtn:not(.dtm-modebtn--active):active { background: var(--dtm-border2); }\n\n/* \u2500\u2500\u2500 \u30C8\u30E9\u30C3\u30AF\u30D4\u30EB\uFF08\u756A\u53F7\u30DC\u30BF\u30F3\u3001\u30C8\u30E9\u30F3\u30B9\u30DD\u30FC\u30C8\u30D0\u30FC2\u884C\u76EE\uFF09 \u2500\u2500\u2500 */\n.dtm-tracks {\n  flex-basis: 100%;\n  display: flex;\n  flex-wrap: nowrap;\n  gap: 4px;\n  align-items: flex-end;\n}\n.dtm-pill {\n  --dtm-pill-color: var(--dtm-primary);\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1 1 0;\n  min-width: 0;\n  height: 24px;\n  padding: 0;\n  border: 2px solid var(--c-black);\n  background: color-mix(in srgb, var(--dtm-pill-color) 22%, #0e121e);\n  color: color-mix(in srgb, var(--c-white) 60%, transparent);\n  font-family: var(--dtm-font);\n  font-size: 11px;\n  font-weight: bold;\n  cursor: pointer;\n  box-shadow: 1px 1px 0 var(--c-black);\n  opacity: 0.55;\n  transition: opacity 120ms ease, background 120ms ease, transform 120ms ease;\n}\n.dtm-pill:hover:not(.dtm-pill--active) {\n  opacity: 0.85;\n  background: color-mix(in srgb, var(--dtm-pill-color) 45%, #0e121e);\n  color: var(--c-white);\n}\n/* \u30A2\u30AF\u30C6\u30A3\u30D6\u9078\u629E = \u9BAE\u660E\u306A\u30C8\u30E9\u30C3\u30AF\u8272 + \u30B4\u30FC\u30EB\u30C9\u67A0 + \u30B0\u30ED\u30FC + \u4E0A\u6607\u7ACB\u4F53\u30BF\u30D6\u8868\u73FE */\n.dtm-pill--active {\n  opacity: 1;\n  height: 28px;\n  background: var(--dtm-pill-color);\n  color: #ffffff;\n  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;\n  border-color: var(--dtm-gold);\n  box-shadow:\n    0 0 0 1.5px var(--dtm-gold),\n    0 0 10px color-mix(in srgb, var(--dtm-pill-color) 70%, transparent),\n    2px 2px 0 var(--c-black);\n  z-index: 1;\n  transform: translateY(-2px);\n}\n.dtm-pill--active::before {\n  content: '';\n  position: absolute;\n  top: -2px;\n  left: 2px;\n  right: 2px;\n  height: 2px;\n  background: #ffffff;\n  border-radius: 1px;\n  opacity: 0.85;\n}\n.dtm-pill:not(.dtm-pill--active):active { transform: translate(1px,1px); box-shadow: none; }\n/* \u518D\u751F\u4E2D\u3001\u5B9F\u969B\u306B\u767A\u97F3\u3057\u305F\u77AC\u9593\u3060\u3051\u70B9\u706F\uFF08\u3069\u306E\u30BF\u30D6\u304C\u4ECA\u9CF4\u3063\u3066\u3044\u308B\u304B\u8996\u899A\u7684\u306B\u5206\u304B\u308B\u3088\u3046\u306B\uFF09 */\n.dtm-pill--sounding {\n  filter: brightness(1.6);\n  transition: filter 30ms linear;\n}\n\n/* \u2500\u2500\u2500 \u30D4\u30A2\u30CE\u30ED\u30FC\u30EB\uFF08\u30C8\u30E9\u30C3\u30AB\u30FC\u98A8\uFF09 \u2500\u2500\u2500 */\n.dtm-roll-wrap { display: flex; gap: var(--dtm-gap); }\n.dtm-roll {\n  position: relative;\n  flex: 1 1 auto;\n  height: 32vh;\n  max-height: 32vh;\n  background: var(--dtm-deep);\n  border: 2px solid var(--c-black);\n  box-shadow:\n    inset 0 0 0 2px var(--c-black),\n    0 0 0 2px var(--dtm-border2),\n    4px 4px 0 var(--c-black);\n  overflow: hidden;\n}\n/* \u30AB\u30B9\u30BF\u30E0\u80CC\u666F\u753B\u50CF\u30EC\u30A4\u30E4\u30FC\uFF08\u753B\u50CF\u81EA\u4F53\u3092\u534A\u900F\u660E\u5316\u3057\u3001\u30AD\u30E3\u30F3\u30D0\u30B9\u5074\u306E\u5857\u308A\u306F\u7DAD\u6301\uFF09 */\n.dtm-roll::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background-image: var(--dtm-roll-bg-image, none);\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n  opacity: var(--dtm-roll-bg-opacity, 0.4);\n  pointer-events: none;\n}\n.dtm-vscroll {\n  position: relative;\n  width: 20px;\n  background: var(--dtm-deep);\n  border: 2px solid var(--dtm-border2);\n  cursor: pointer;\n  flex: 0 0 auto;\n  touch-action: none;\n}\n.dtm-vscroll-thumb, .dtm-hscroll-thumb {\n  position: absolute;\n  background: var(--dtm-primary);\n  min-width: 20px;\n  min-height: 20px;\n}\n.dtm-vscroll-thumb { left: 0; width: 100%; }\n.dtm-hscroll {\n  position: relative;\n  width: 100%; height: 20px;\n  background: var(--dtm-deep);\n  border: 2px solid var(--dtm-border2);\n  cursor: pointer;\n  touch-action: none;\n}\n.dtm-hscroll-thumb { top: 0; height: 100%; }\n\n/* \u2500\u2500\u2500 \u30D1\u30CD\u30EB\uFF08RPG\u30C0\u30A4\u30A2\u30ED\u30B0\u30A6\u30A3\u30F3\u30C9\u30A6\uFF09 \u2500\u2500\u2500 */\n.dtm-panel {\n  background: var(--dtm-surface);\n  border: 2px solid var(--c-black);\n  box-shadow:\n    inset 0 0 0 2px var(--c-black),\n    0 0 0 2px var(--dtm-primary),\n    4px 4px 0 var(--c-black);\n  overflow: hidden;\n}\n.dtm-panel > summary {\n  list-style: none;\n  cursor: pointer;\n  padding: 0 12px;\n  font-family: var(--dtm-font);\n  font-size: 12px;\n  text-transform: uppercase;\n  letter-spacing: .14em;\n  display: flex;\n  align-items: center;\n  min-height: var(--dtm-tap);\n  background: var(--dtm-deep);\n  border-bottom: 2px solid var(--dtm-border2);\n  color: var(--dtm-primary);\n  gap: 8px;\n}\n.dtm-panel:not([open]) > summary { border-bottom: none; }\n.dtm-panel > summary::-webkit-details-marker { display: none; }\n/* \u5DE6\u7AEF\u30E9\u30A4\u30F3\uFF08\u30B2\u30FC\u30E0UI\u306E\u30BB\u30AF\u30B7\u30E7\u30F3\u8272\u5206\u3051\uFF09 */\n.dtm-panel > summary::before {\n  content: '';\n  display: block;\n  width: 4px;\n  height: 20px;\n  background: var(--dtm-accent);\n  flex: 0 0 auto;\n}\n.dtm-panel[open] > summary::before { background: var(--dtm-primary); }\n/* \u6298\u308A\u305F\u305F\u307F\u77E2\u5370 */\n.dtm-panel > summary::after {\n  content: \"\u25B6\";\n  margin-left: auto;\n  color: var(--dtm-muted);\n  font-size: 10px;\n}\n.dtm-panel[open] > summary::after { content: \"\u25BC\"; }\n.dtm-panel-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 10px; }\n.dtm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }\n.dtm-track-body { display: flex; flex-direction: column; gap: 10px; }\n\n/* \u2500\u2500\u2500 \u81EA\u52D5\u4F5C\u66F2\u30B3\u30F3\u30C6\u30CA\uFF08\u30DE\u30AF\u30ED\u30D1\u30CD\u30EB\u5185\u306E\u5C02\u7528\u30AB\u30FC\u30C9\u98A8\u30B0\u30EB\u30FC\u30D7\u67A0\uFF09 \u2500\u2500\u2500 */\n.dtm-compose-container {\n  background: var(--dtm-deep);\n  border: 2px solid var(--c-black);\n  box-shadow:\n    inset 0 0 0 1px var(--dtm-border2),\n    0 0 0 1px var(--dtm-success),\n    3px 3px 0 var(--c-black);\n  padding: 10px 12px 12px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-bottom: 6px;\n}\n\n/* \u2500\u2500\u2500 \u30A2\u30AF\u30C6\u30A3\u30D6\u30C8\u30E9\u30C3\u30AF\u8272\uFF08\u500B\u5225\u30C8\u30E9\u30C3\u30AF\u8A2D\u5B9A\u30D1\u30CD\u30EB\u306E\u5DE6\u7AEF\u30E9\u30A4\u30F3\uFF09 \u2500\u2500\u2500 */\n.dtm-panel--track > summary::before,\n.dtm-panel--track[open] > summary::before {\n  background: var(--dtm-track-color, var(--dtm-primary));\n}\n\n/* \u2500\u2500\u2500 MML\u51FA\u529B\uFF08CRT\u30BF\u30FC\u30DF\u30CA\u30EB\uFF09 \u2500\u2500\u2500 */\n.dtm-output {\n  background: var(--c-black);\n  color: var(--dtm-success);\n  border: 2px solid var(--dtm-success);\n  padding: 10px;\n  box-shadow: 0 0 0 2px var(--c-black), 4px 4px 0 var(--c-black);\n}\n.dtm-output::before {\n  content: \"C:\\> MML OUTPUT\";\n  display: block;\n  font-size: 11px;\n  color: var(--dtm-muted);\n  letter-spacing: .14em;\n  margin-bottom: 6px;\n  padding-bottom: 6px;\n  border-bottom: 1px solid var(--dtm-border2);\n}\n.dtm-output pre {\n  margin: 0;\n  background: transparent;\n  padding: 0;\n  overflow-x: auto;\n  font-family: var(--dtm-font);\n  font-size: 12px;\n  line-height: 1.8;\n  color: var(--dtm-success);\n}\n.dtm-output-label {\n  font-size: 11px;\n  color: var(--dtm-muted);\n  font-family: var(--dtm-font);\n  margin-top: 10px;\n}\n.dtm-output-label:first-of-type {\n  margin-top: 0;\n}\n.dtm-output-row { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; }\n.dtm-output-row pre { flex: 1; }\n.dtm-output-scroll { max-height: 240px; overflow-y: auto; }\n\n/* \u2500\u2500\u2500 \u30ED\u30FC\u30C7\u30A3\u30F3\u30B0\u30AA\u30FC\u30D0\u30FC\u30EC\u30A4 \u2500\u2500\u2500 */\n.dtm-overlay {\n  position: absolute; inset: 0; z-index: 10;\n  background: rgba(0,0,0,.92);\n  display: flex; align-items: center; justify-content: center;\n  flex-direction: column; gap: 14px;\n  pointer-events: auto;\n  cursor: wait;\n}\n.dtm-overlay[hidden] { display: none; }\n.dtm-overlay::before {\n  content: '\u30ED\u30FC\u30C9\u4E2D';\n  font-family: var(--dtm-font);\n  font-size: 13px;\n  color: var(--dtm-primary);\n  text-transform: uppercase;\n  letter-spacing: .25em;\n  animation: dtm-blink 1s steps(1) infinite;\n}\n/* 8\u30D6\u30ED\u30C3\u30AF\u523B\u307F\u3067\u57CB\u307E\u308B\u30D4\u30AF\u30BB\u30EB\u30D0\u30FC */\n.dtm-spinner {\n  width: 96px; height: 12px;\n  position: relative;\n  background: var(--c-navy);\n  border: 2px solid var(--dtm-primary);\n  box-shadow: 0 0 0 2px var(--c-black), 4px 4px 0 var(--c-black);\n}\n.dtm-spinner::after {\n  content: '';\n  position: absolute;\n  left: 0; top: 0; height: 100%;\n  background: var(--dtm-primary);\n  animation: dtm-load 1.6s steps(8) infinite;\n}\n@keyframes dtm-load { 0%{width:0} 100%{width:100%} }\n/* \u9032\u6357\u304C\u78BA\u5B9A\u3057\u305F\u3089\u7121\u9650\u30EB\u30FC\u30D7\u6F14\u51FA\u3092\u6B62\u3081\u3001\u5B9F\u6E2C\u5024\u3067\u5857\u308A\u3064\u3076\u3059 */\n.dtm-spinner--determinate::after { display: none; }\n.dtm-spinner-fill {\n  position: absolute;\n  left: 0; top: 0; height: 100%;\n  width: 0;\n  background: var(--dtm-primary);\n  transition: width .12s steps(8);\n}\n.dtm-loading-label {\n  font-family: var(--dtm-font);\n  font-size: 11px;\n  color: var(--dtm-primary);\n  letter-spacing: .15em;\n  min-height: 1em;\n}\n.dtm-overlay-skip-btn {\n  margin-top: 12px;\n  min-height: 32px;\n  font-size: 11px;\n  font-family: var(--dtm-font);\n  padding: 0 12px;\n  background: var(--dtm-surface);\n  border: 2px solid var(--dtm-border2);\n  color: var(--dtm-muted);\n  box-shadow: 2px 2px 0 var(--c-black);\n  cursor: pointer;\n  pointer-events: auto;\n}\n.dtm-overlay-skip-btn:hover {\n  color: var(--dtm-text);\n  border-color: var(--dtm-primary);\n}\n.dtm-overlay-skip-btn:active {\n  transform: translate(2px, 2px);\n  box-shadow: none;\n}\n.dtm-overlay-skip-btn:disabled {\n  opacity: .3;\n  cursor: default;\n  box-shadow: none;\n  transform: none;\n}\n.dtm-topbar-loading {\n  display: none;\n  font-family: var(--dtm-font);\n  font-size: 11px;\n  color: var(--dtm-primary);\n  margin-left: 12px;\n  letter-spacing: .15em;\n  align-self: center;\n}\n.dtm-topbar.is-loading .dtm-topbar-loading {\n  display: inline-block;\n}\n.dtm-topbar.is-loading {\n  pointer-events: none;\n  opacity: 0.7;\n}\n\n@keyframes dtm-blink { 0%,100%{opacity:1} 50%{opacity:0} }\n.dtm-blink { animation: dtm-blink 1s steps(1) infinite; }\n\n/* \u2500\u2500\u2500 \u97F3\u5272\u308C\u691C\u77E5\u30D0\u30C3\u30B8 \u2500\u2500\u2500 \u30AF\u30EA\u30C3\u30D7\u767A\u751F\u4E2D\u3060\u3051\u8868\u793A\u3055\u308C\u308B\u8B66\u544A\u30DC\u30BF\u30F3\u3002\u30AF\u30EA\u30C3\u30AF\u3067\u6D88\u305B\u308B\u3002 */\n.dtm-clip-badge {\n  flex: 0 0 auto;\n  min-height: 24px;\n  padding: 0 8px;\n  border: 2px solid var(--c-black);\n  background: var(--dtm-danger);\n  color: var(--c-white);\n  font-family: var(--dtm-font);\n  font-size: 10px;\n  letter-spacing: .1em;\n  cursor: pointer;\n  box-shadow: 0 0 0 2px var(--dtm-danger), 2px 2px 0 var(--c-black);\n  animation: dtm-blink .5s steps(1) infinite;\n}\n.dtm-clip-badge:active { transform: translate(2px,2px); box-shadow: none; }\n\n/* \u2500\u2500\u2500 \u30A4\u30F3\u30D5\u30A9\u30DC\u30BF\u30F3 \u2500\u2500\u2500 */\n.dtm-infobtn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  flex: 0 0 auto;\n  border: 2px solid var(--dtm-border2);\n  background: var(--dtm-surface);\n  color: var(--dtm-muted);\n  cursor: pointer;\n  box-shadow: 1px 1px 0 var(--c-black);\n  padding: 0;\n  margin: 0;\n}\n.dtm-infobtn:hover {\n  color: var(--dtm-primary);\n  border-color: var(--dtm-primary);\n}\n.dtm-infobtn:active {\n  transform: translate(1px, 1px);\n  box-shadow: none;\n}\n\n/* \u2500\u2500\u2500 \u89E3\u8AAC\u30E2\u30FC\u30C0\u30EB \u2500\u2500\u2500 */\n.dtm-modal-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 10000;\n  background: rgba(0, 0, 0, 0.7);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 16px;\n  backdrop-filter: blur(2px);\n  /* body\u76F4\u4E0B\u306B\u91CD\u306D\u305F\u5834\u5408\uFF08\u518D\u751F\u5C02\u7528\u30D3\u30E5\u30FC\uFF09\u3067\u3082\u6587\u5B57\u8272\u30FB\u30D5\u30A9\u30F3\u30C8\u304C\n     .dtm-daw \u304B\u3089\u7D99\u627F\u3067\u304D\u306A\u3044\u305F\u3081\u3001\u3053\u3053\u3067\u660E\u793A\u3059\u308B\u3002 */\n  color: var(--dtm-text);\n  font-family: var(--dtm-font);\n}\n.dtm-modal-overlay[hidden] {\n  display: none !important;\n}\n\n/* \u2500\u2500\u2500 \u5229\u7528\u898F\u7D04\u540C\u610F\u30AB\u30D0\u30FC \u2500\u2500\u2500 */\n.dtm-consent-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 10100;\n  background: rgba(0, 0, 0, 0.6);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 16px;\n  backdrop-filter: blur(2px);\n  /* body\u76F4\u4E0B\u306B\u91CD\u306D\u308B\u305F\u3081 .dtm-daw \u304B\u3089\u7D99\u627F\u3067\u304D\u306A\u3044\u6587\u5B57\u8272\u30FB\u30D5\u30A9\u30F3\u30C8\u3092\u660E\u793A\u3002 */\n  color: var(--dtm-text);\n  font-family: var(--dtm-font);\n}\n.dtm-consent-overlay[hidden] {\n  display: none !important;\n}\n.dtm-consent-modal {\n  max-width: 450px;\n  width: 100%;\n  max-height: 85vh;\n  display: flex;\n  flex-direction: column;\n  background: var(--dtm-surface);\n  border: 2px solid var(--c-black);\n  box-shadow:\n    inset 0 0 0 2px var(--c-black),\n    0 0 0 2px var(--dtm-primary),\n    4px 4px 0 var(--c-black);\n  overflow-y: auto;\n}\n.dtm-consent-header {\n  background: var(--dtm-deep);\n  color: var(--dtm-text);\n  padding: 8px 12px;\n  border-bottom: 2px solid var(--c-black);\n  font-weight: bold;\n  text-align: center;\n  font-size: 14px;\n}\n.dtm-consent-body {\n  padding: 12px 16px;\n  font-size: 13px;\n  line-height: 1.6;\n}\n.dtm-consent-body a {\n  color: var(--dtm-primary);\n  text-decoration: underline;\n}\n.dtm-consent-body a:hover {\n  color: var(--dtm-accent);\n}\n.dtm-consent-footer {\n  padding: 8px;\n  border-top: 2px solid var(--c-black);\n  background: var(--dtm-deep);\n  display: flex;\n  justify-content: center;\n}\n\n.dtm-confirm-footer {\n  padding: 8px 12px;\n  border-top: 2px solid var(--c-black);\n  background: var(--dtm-deep);\n  display: flex;\n  gap: 8px;\n  justify-content: flex-end;\n}\n\n.dtm-modal {\n  max-width: 500px;\n  width: 100%;\n  max-height: 80vh;\n  display: flex;\n  flex-direction: column;\n  background: var(--dtm-surface);\n  border: 2px solid var(--c-black);\n  box-shadow:\n    inset 0 0 0 2px var(--c-black),\n    0 0 0 2px var(--dtm-primary),\n    4px 4px 0 var(--c-black);\n  overflow: hidden;\n}\n.dtm-modal-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background: var(--dtm-deep);\n  padding: 8px 12px;\n  border-bottom: 2px solid var(--c-black);\n}\n.dtm-modal-title {\n  font-family: var(--dtm-font);\n  font-size: 14px;\n  color: var(--dtm-gold);\n  font-weight: bold;\n}\n.dtm-modal-close {\n  background: transparent;\n  border: none;\n  color: var(--dtm-text);\n  font-size: 20px;\n  cursor: pointer;\n  padding: 0;\n  line-height: 1;\n}\n.dtm-modal-close:hover {\n  color: var(--dtm-danger);\n}\n.dtm-modal-body {\n  padding: 12px;\n  overflow-y: auto;\n  overflow-x: hidden;\n  font-size: 13px;\n  line-height: 1.6;\n}\n.dtm-modal-body * {\n  max-width: 100%;\n  box-sizing: border-box;\n}\n.dtm-modal-body a {\n  color: var(--dtm-primary);\n  text-decoration: underline;\n}\n.dtm-modal-body a:hover {\n  color: var(--dtm-accent);\n}\n.dtm-modal-body h4 {\n  margin: 12px 0 6px 0;\n  color: var(--dtm-primary);\n  font-size: 13px;\n}\n.dtm-modal-body h4:first-child {\n  margin-top: 0;\n}\n.dtm-modal-body p {\n  margin: 0 0 8px 0;\n}\n.dtm-modal-body ul {\n  margin: 0 0 8px 0;\n  padding-left: 16px;\n}\n.dtm-modal-body li {\n  margin-bottom: 4px;\n}\n.dtm-modal-body code {\n  background: var(--dtm-deep);\n  color: var(--dtm-accent);\n  padding: 1px 4px;\n  font-family: var(--dtm-font);\n  font-size: 12px;\n}\n.dtm-modal-body pre {\n  background: var(--dtm-deep);\n  color: var(--dtm-success);\n  padding: 8px;\n  border: 1px solid var(--dtm-border2);\n  margin: 6px 0;\n  overflow-x: auto;\n  font-family: var(--dtm-font);\n  font-size: 12px;\n}\n\n.dtm-modal-sample-box {\n  background: var(--dtm-deep);\n  border: 1px solid var(--dtm-border2);\n  border-radius: 4px;\n  padding: 8px 10px;\n  margin-bottom: 12px;\n}\n.dtm-modal-sample-box:last-child {\n  margin-bottom: 0;\n}\n.dtm-modal-sample-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 6px;\n}\n.dtm-modal-sample-tag {\n  font-family: var(--dtm-font);\n  font-size: 11px;\n  font-weight: bold;\n  color: var(--dtm-accent);\n}\n.dtm-modal-sample-desc {\n  margin: 6px 0 0 0;\n  font-size: 11px;\n  color: var(--dtm-muted);\n}\n.dtm-modal-sample-player-container {\n  margin-top: 8px;\n}\n.dtm-modal-sample-player-container:empty {\n  margin-top: 0;\n}\n.dtm-modal-sample-player-container .dtm-player {\n  border: 1px solid var(--dtm-border2);\n  box-shadow: none;\n  background: rgba(0, 0, 0, 0.3);\n}\n.dtm-modal-sample-player-container .dtm-player-body {\n  max-height: 100px;\n  overflow-y: auto;\n}\n\n.dtm-hidden { display: none !important; }\n/* \u8AAD\u8FBC\u6642\u306E\u8B66\u544A\u304A\u77E5\u3089\u305B\uFF08\u4F8B: \u30B7\u30F3\u30D7\u30EB\u30E2\u30FC\u30C9\u3067\u306E\u30C8\u30E9\u30C3\u30AF\u5408\u7B97\uFF09\u3002 */\n.dtm-load-note {\n  margin: 6px 0 0;\n  padding: 0 2px;\n  font-family: var(--dtm-font);\n  font-size: 11px;\n  line-height: 1.5;\n  letter-spacing: .04em;\n  color: var(--dtm-warn); /* \u8B66\u544A\u8272\uFF08\u30AA\u30EC\u30F3\u30B8\uFF09 */\n  font-weight: bold;\n  opacity: 1.0;\n}\n.dtm-load-note::before { content: \"\u26A0 \"; }\n.dtm-grow { flex: 1 1 auto; }\n.dtm-lyric-icon {\n  flex: 0 0 auto;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  object-fit: cover;\n  image-rendering: pixelated;\n}\n/* \u6B4C\u8A5E\u30C8\u30E9\u30C3\u30AF\u306E\u300C\u8A73\u7D30\u8A2D\u5B9A\u300D\u2014 \u5E38\u7528\u3057\u306A\u3044\u30D1\u30E9\u30E1\u30FC\u30BF\uFF08\u30AA\u30AF\u30BF\u30FC\u30D6/\u5B9A\u4F4D/\u30EA\u30D0\u30FC\u30D6\u9001\u308A/\n   \u30B8\u30A7\u30F3\u30C0\u30FC/\u30D6\u30EC\u30B7\u30CD\u30B9/\u30D3\u30D6\u30E9\u30FC\u30C8\uFF09\u3092\u7573\u3093\u3067\u304A\u304F\u8EFD\u91CF\u306A details\u3002dtm-panel \u307B\u3069\n   \u4EF0\u3005\u3057\u304F\u305B\u305A\u3001\u5C0F\u3055\u3044\u25B6\u30DE\u30FC\u30AB\u30FC\u3060\u3051\u4ED8\u3051\u308B\uFF08\u4ED5\u5207\u308A\u7DDA\u306F\u9AD8\u3055\u3092\u98DF\u3046\u306E\u3067\u7F6E\u304B\u306A\u3044\uFF09\u3002 */\n.dtm-advanced {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.dtm-advanced > summary {\n  list-style: none;\n  cursor: pointer;\n  font-size: 11px;\n  letter-spacing: .08em;\n  color: var(--dtm-text);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  min-height: 28px;\n  padding: 0 8px;\n  border: 2px solid var(--dtm-border2);\n  background: var(--dtm-deep);\n  box-shadow: 2px 2px 0 var(--c-black);\n  width: fit-content;\n}\n.dtm-advanced > summary:active { transform: translate(2px,2px); box-shadow: none; }\n.dtm-advanced > summary::-webkit-details-marker { display: none; }\n.dtm-advanced > summary::before { content: \"\u25B6\"; font-size: 9px; color: var(--dtm-accent); }\n.dtm-advanced[open] > summary::before { content: \"\u25BC\"; }\n.dtm-advanced[open] > summary { border-color: var(--dtm-primary); color: var(--dtm-primary); }\n\n/* \u2500\u2500\u2500 \u5E83\u5E45\u62E1\u5F35 \u2500\u2500\u2500 */\n@media (min-width: 768px) {\n  .dtm-daw { gap: 8px; padding: 10px; }\n  .dtm-roll { height: 420px; }\n}\n\n/* ====================================================\n   MML PLAYER \u2014 \u518D\u751F\u5C02\u7528\u30D3\u30E5\u30FC\uFF08mountMmlPlayer\uFF09\n   ==================================================== */\n.dtm-player {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dtm-gap);\n  padding: var(--dtm-gap);\n  background: var(--dtm-deep);\n  border: 2px solid var(--dtm-border2);\n  box-shadow: 4px 4px 0 var(--c-black);\n}\n.dtm-player-message {\n  padding: 4px 8px;\n  background: var(--c-purple);\n  color: var(--c-yellow);\n  font-size: 11px;\n  border: 2px solid var(--c-black);\n  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2);\n  font-family: var(--dtm-font);\n  text-align: center;\n  width: 100%;\n  box-sizing: border-box;\n}\n.dtm-player-head {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n.dtm-player-play {\n  flex: 0 0 auto;\n  width: 28px;\n  height: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--dtm-primary);\n  color: var(--dtm-pfg);\n  border: 2px solid var(--c-black);\n  box-shadow: 2px 2px 0 var(--c-black);\n  cursor: pointer;\n  padding: 0;\n}\n.dtm-player-play:active { transform: translate(2px, 2px); box-shadow: none; }\n.dtm-player-play--stop { background: var(--dtm-danger); }\n.dtm-player-play:disabled { opacity: 0.4; cursor: default; }\n.dtm-player-loop {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  border: 2px solid var(--dtm-border2);\n  background: var(--dtm-bg);\n  color: var(--dtm-muted);\n  cursor: pointer;\n  flex: 0 0 auto;\n}\n.dtm-player-loop:active { transform: translate(1px, 1px); }\n.dtm-player-loop--on {\n  border-color: var(--c-black);\n  background: var(--dtm-gold);\n  color: var(--c-black);\n  box-shadow: 2px 2px 0 var(--c-black);\n}\n.dtm-player-loop:disabled { opacity: 0.4; cursor: default; }\n.dtm-player-beat-row {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n.dtm-player-beat-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: var(--dtm-border2);\n  transition: background 0.06s;\n}\n.dtm-player-beat-dot--on { background: var(--dtm-primary); }\n.dtm-player-bar {\n  font-family: 'k8x12', monospace;\n  font-size: 11px;\n  color: var(--dtm-text);\n  min-width: 2em;\n  margin-left: 4px;\n}\n.dtm-player-chord {\n  font-family: 'k8x12', monospace;\n  font-size: 11px;\n  color: var(--dtm-accent);\n  min-width: 4em;\n  margin-left: 8px;\n  font-weight: bold;\n}\n.dtm-player-seek-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.dtm-player-seek {\n  --fill: 0%;\n  flex: 1 1 auto;\n  min-width: 0;\n  height: 12px;\n  margin: 0;\n  background: transparent;\n  cursor: pointer;\n  -webkit-appearance: none;\n  appearance: none;\n}\n.dtm-player-seek:disabled { cursor: default; opacity: 0.4; }\n/* \u518D\u751F\u6E08\u307F\u533A\u9593\u3092YouTube\u98A8\u306B\u8272\u5857\u308A\u3059\u308B\uFF08--fill \u306F\u518D\u751F\u4F4D\u7F6E\u306B\u5FDC\u3058\u3066JS\u304B\u3089\u8A2D\u5B9A\uFF09 */\n.dtm-player-seek::-webkit-slider-runnable-track {\n  height: 6px;\n  background: linear-gradient(\n    to right,\n    var(--dtm-primary) var(--fill),\n    var(--dtm-border2) var(--fill)\n  );\n  border: 2px solid var(--c-black);\n}\n.dtm-player-seek::-moz-range-track {\n  height: 6px;\n  background: var(--dtm-border2);\n  border: 2px solid var(--c-black);\n}\n.dtm-player-seek::-moz-range-progress {\n  height: 6px;\n  background: var(--dtm-primary);\n  border: 2px solid var(--c-black);\n  border-right: none;\n}\n.dtm-player-seek::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  width: 12px;\n  height: 16px;\n  margin-top: -7px;\n  background: var(--dtm-primary);\n  border: 2px solid var(--c-black);\n  box-shadow: 2px 2px 0 var(--c-black);\n  cursor: pointer;\n}\n.dtm-player-seek::-moz-range-thumb {\n  width: 12px;\n  height: 16px;\n  background: var(--dtm-primary);\n  border: 2px solid var(--c-black);\n  box-shadow: 2px 2px 0 var(--c-black);\n  cursor: pointer;\n  border-radius: 0;\n}\n.dtm-player-time {\n  flex: 0 0 auto;\n  font-family: 'k8x12', monospace;\n  font-size: 11px;\n  color: var(--dtm-text);\n  white-space: nowrap;\n}\n.dtm-player-dots {\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.dtm-player-dot { width: 8px; height: 8px; display: inline-block; }\n.dtm-player-mml-header {\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n.dtm-player-mml-link {\n  font-family: 'k8x12', monospace;\n  font-size: 10px;\n  color: var(--dtm-muted);\n  text-decoration: none;\n  white-space: nowrap;\n}\n.dtm-player-mml-link:hover { color: var(--dtm-primary); }\n.dtm-player-more-container {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n.dtm-player-more-btn {\n  background: transparent;\n  border: none;\n  color: var(--dtm-muted);\n  cursor: pointer;\n  padding: 2px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  width: 24px;\n  height: 24px;\n  transition: color 0.15s, background-color 0.15s;\n}\n.dtm-player-more-btn:hover,\n.dtm-player-more-btn.is-active {\n  color: var(--dtm-text);\n  background: var(--dtm-border2);\n}\n.dtm-player-menu {\n  position: absolute;\n  top: calc(100% + 4px);\n  right: 0;\n  background: var(--dtm-deep);\n  border: 2px solid var(--dtm-border2);\n  box-shadow: 4px 4px 0 var(--c-black);\n  z-index: 200;\n  display: flex;\n  flex-direction: column;\n  padding: 4px 0;\n  min-width: 130px;\n  font-family: var(--dtm-font);\n}\n.dtm-player-menu-item {\n  background: transparent;\n  border: none;\n  color: var(--dtm-text);\n  padding: 6px 12px;\n  text-align: left;\n  cursor: pointer;\n  font-size: 11px;\n  font-family: inherit;\n  white-space: nowrap;\n  width: 100%;\n  box-sizing: border-box;\n  transition: background-color 0.1s, color 0.1s;\n}\n.dtm-player-menu-item:hover {\n  background: var(--dtm-primary);\n  color: var(--dtm-pfg);\n}\n.dtm-player-emoji {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  font-size: 18px;\n  line-height: 1;\n  user-select: none;\n}\n.dtm-player-balloon {\n  /* body \u76F4\u4E0B\u306B\u751F\u6210\u3055\u308C\u3001JS(positionBalloon)\u304C\u6BCE\u56DE left/top \u3092\u30A2\u30F3\u30AB\u30FC\u306E\u753B\u9762\u5EA7\u6A19\u3067\n     \u8A2D\u5B9A\u3059\u308B\u3002overflow:hidden \u306A\u7956\u5148\uFF08\u6295\u7A3F\u30AB\u30FC\u30C9\u7B49\uFF09\u306B\u30AF\u30EA\u30C3\u30D7\u3055\u308C\u306A\u3044\u3088\u3046 fixed \u3067\u6D6E\u304B\u305B\u308B\u3002\n     top \u306F\u30A2\u30F3\u30AB\u30FC\u4E0A\u7AEF-6px\u3001transform \u3067\u81EA\u8EAB\u306E\u5DE6\u4E0B\u89D2\u3092\u305D\u306E\u70B9\u306B\u5408\u308F\u305B\u308B\u3002 */\n  position: fixed;\n  left: 0;\n  top: 0;\n  transform: translate(-50%, -100%);\n  z-index: 1000;\n  display: none;\n  pointer-events: none;\n  font-family: var(--dtm-font);\n  font-size: 9px;\n  color: var(--c-black);\n  background: var(--c-white);\n  border: 2px solid var(--c-black);\n  padding: 2px 4px;\n  white-space: nowrap;\n  box-shadow: 2px 2px 0 var(--c-black);\n}\n.dtm-player-balloon::after {\n  content: \"\";\n  position: absolute;\n  bottom: -6px;\n  left: 50%;\n  transform: translateX(-50%) rotate(45deg);\n  width: 8px;\n  height: 8px;\n  background: var(--c-white);\n  border-right: 2px solid var(--c-black);\n  border-bottom: 2px solid var(--c-black);\n}\n/* \u30A2\u30A4\u30B3\u30F3\u304C\u753B\u9762\u4E0A\u7AEF\u306B\u8FD1\u304F\u4E0A\u306B\u51FA\u3059\u4F59\u767D\u304C\u7121\u3044\u5834\u5408\u306F\u4E0B\u306B\u53CD\u8EE2\u8868\u793A\u3059\u308B\uFF08positionBalloon \u304C\u4ED8\u4E0E\uFF09 */\n.dtm-player-balloon--below {\n  transform: translate(-50%, 0);\n}\n.dtm-player-balloon--below::after {\n  bottom: auto;\n  top: -6px;\n  border-right: none;\n  border-bottom: none;\n  border-left: 2px solid var(--c-black);\n  border-top: 2px solid var(--c-black);\n}\n.dtm-player-balloon--visible {\n  display: block;\n  animation: dtm-balloon-fade-in 0.1s steps(2);\n}\n.dtm-player-balloon--below.dtm-player-balloon--visible {\n  animation-name: dtm-balloon-fade-in-below;\n}\n@keyframes dtm-balloon-fade-in {\n  from { opacity: 0; transform: translate(-50%, -100%) translateY(4px); }\n  to { opacity: 1; transform: translate(-50%, -100%) translateY(0); }\n}\n@keyframes dtm-balloon-fade-in-below {\n  from { opacity: 0; transform: translate(-50%, 0) translateY(-4px); }\n  to { opacity: 1; transform: translate(-50%, 0) translateY(0); }\n}\n@keyframes dtm-emoji-jump {\n  0%   { transform: translateY(0); }\n  35%  { transform: translateY(-5px); }\n  65%  { transform: translateY(-5px); }\n  100% { transform: translateY(0); }\n}\n.dtm-player-emoji--jump {\n  animation: dtm-emoji-jump 0.18s ease-out forwards;\n}\n.dtm-player-chip {\n  font-family: 'k8x12', monospace;\n  font-size: 9px;\n  color: var(--dtm-text);\n  background: var(--dtm-border2);\n  padding: 2px 6px;\n  white-space: nowrap;\n}\n.dtm-player-body {\n  position: relative; /* \u30ED\u30FC\u30C7\u30A3\u30F3\u30B0\u30AA\u30FC\u30D0\u30FC\u30EC\u30A4\u306E\u57FA\u6E96\u3002\u30EC\u30FC\u30F3\u7FA4\u3060\u3051\u3092\u8986\u3046 */\n  display: flex;\n  flex-direction: column;\n  gap: var(--dtm-gap);\n}\n.dtm-player-lane-row {\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  gap: 6px;\n}\n.dtm-player-lane-label {\n  position: relative;\n  flex: 0 0 auto;\n  width: 16px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 2px;\n}\n.dtm-player-lane-label--btn {\n  cursor: pointer;\n  user-select: none;\n}\n.dtm-player-lane-label--btn:hover { opacity: 0.7; }\n.dtm-player-lane-label--muted { opacity: 0.3; }\n\n/* \u2500\u2500\u2500 \u30DF\u30E5\u30FC\u30C8\u8868\u793A\uFF08\u6392\u4ED6\u540C\u671F\uFF09 \u2500\u2500\u2500 */\n.dtm-player-emoji.is-muted,\n.dtm-player-lane-label.is-muted {\n  position: relative;\n}\n\n/* \u30DF\u30E5\u30FC\u30C8\u6642\u306E\u300C\u00D7\u300D\u30DE\u30FC\u30AF\u91CD\u306D\u63CF\u304D */\n.dtm-player-emoji.is-muted::before,\n.dtm-player-lane-label.is-muted::before {\n  content: \"\u00D7\";\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--dtm-danger);\n  font-family: var(--dtm-font);\n  font-size: 16px;\n  font-weight: bold;\n  z-index: 10;\n  pointer-events: none;\n  text-shadow: 1px 1px 0 var(--c-black);\n}\n\n.dtm-player-lane-label.is-muted::before {\n  font-size: 14px;\n}\n\n/* \u30DF\u30E5\u30FC\u30C8\u6642\u306E\u30A2\u30A4\u30B3\u30F3\u3084\u8981\u7D20\u306E\u8584\u6697\u5316\uFF08\u5439\u304D\u51FA\u3057\u306F\u9664\u5916\uFF09 */\n.dtm-player-emoji.is-muted > img,\n.dtm-player-emoji.is-muted > span:not(.dtm-player-balloon) {\n  opacity: 0.25;\n  filter: grayscale(80%);\n}\n\n.dtm-player-lane-label.is-muted {\n  opacity: 0.25;\n}\n\n/* \u30DF\u30E5\u30FC\u30C8\u6642\u306E\u30C8\u30E9\u30C3\u30AF\u30EC\u30FC\u30F3\uFF08\u30B9\u30AF\u30ED\u30FC\u30EB\u90E8\uFF09\u306E\u8584\u6697\u5316\u3068\u30C7\u30AB\u00D7\u30DE\u30FC\u30AF\uFF08\u8272\u5F31\u5BFE\u5FDC\uFF09 */\n.dtm-player-lane-row.is-muted::after {\n  content: \"\u00D7\";\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 22px; /* label width (16px) + gap (6px) */\n  right: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--dtm-danger);\n  font-family: var(--dtm-font);\n  font-size: 24px;\n  font-weight: bold;\n  background: rgba(0, 0, 0, 0.45);\n  z-index: 10;\n  pointer-events: none;\n  text-shadow: 1px 1px 0 var(--c-black);\n}\n.dtm-player-lane-no {\n  font-family: 'k8x12', monospace;\n  font-size: 9px;\n  color: var(--dtm-muted);\n}\n.dtm-player-lane {\n  position: relative; /* \u30C8\u30FC\u30AF\u30F3\u306E offsetParent \u3092\u30EC\u30FC\u30F3\u306B\u56FA\u5B9A\u3057\u3001\u4E2D\u592E\u5BC4\u305B\u8A08\u7B97\u3092\u6B63\u3059 */\n  flex: 1 1 auto;\n  overflow-x: auto;\n  overflow-y: hidden;\n  white-space: nowrap;\n  background: var(--c-black);\n  border: none;\n  padding: 0 6px;\n  scrollbar-width: none;\n  display: flex;\n  align-items: center;\n}\n.dtm-player-lane::-webkit-scrollbar { display: none; }\n.dtm-tk {\n  font-family: 'k8x12', monospace;\n  font-size: 12px;\n  color: var(--dtm-text);\n  flex: 0 0 auto;\n}\n.dtm-tk--rest { color: var(--dtm-muted); }\n.dtm-tk--octave,\n.dtm-tk--shift,\n.dtm-tk--length,\n.dtm-tk--ctrl { color: var(--dtm-border2); }\n.dtm-tk--lyric { color: var(--dtm-text); letter-spacing: 1px; }\n/* \u7D99\u7D9A\uFF08\u30FC / \u301C\uFF09\u306F\u300C\u8A00\u3044\u76F4\u3055\u306A\u3044\u300D\u97F3\u3002\u304B\u306A\u3088\u308A\u6DE1\u304F\u3057\u3066\u97F3\u7BC0\u306E\u5207\u308C\u76EE\u3092\u76EE\u3067\u8FFD\u3048\u308B\u3088\u3046\u306B\u3059\u308B */\n.dtm-tk--lyric-tie { color: var(--dtm-muted); }\n/* \u4FC3\u97F3\uFF08\u3063\uFF09\u30FB\u4F11\u7B26\uFF08_\uFF09\u306F\u6B4C\u308F\u306A\u3044\u30CE\u30FC\u30C8\u3002\u3055\u3089\u306B\u843D\u3068\u3057\u3066\u7121\u97F3\u3067\u3042\u308B\u3053\u3068\u3092\u793A\u3059 */\n.dtm-tk--lyric-stop,\n.dtm-tk--lyric-rest { color: var(--dtm-border2); }\n.dtm-tk--break { color: var(--dtm-muted); opacity: 0.7; margin: 0 2px; }\n.dtm-tk--meta { color: var(--dtm-border2); margin-right: 4px; }\n.dtm-tk.is-active {\n  background: var(--tk, var(--dtm-primary));\n  color: var(--c-black);\n  font-weight: bold;\n}\n\n/* \u2500\u2500\u2500 \u30B3\u30FC\u30C9\u9032\u884C\u30D7\u30EC\u30A4\u30E4\u30FC \u2500\u2500\u2500 */\n/* MML\u518D\u751F\u5C02\u7528\u30D7\u30EC\u30A4\u30E4\u30FC\uFF08.dtm-player\uFF09\u3068\u67A0\u30C7\u30B6\u30A4\u30F3\u3092\u63C3\u3048\u308B */\n.dtm-chord-player {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dtm-gap);\n  padding: var(--dtm-gap);\n  font-family: var(--dtm-font);\n  font-size: 13px;\n  letter-spacing: .06em;\n  color: var(--dtm-text);\n  background: var(--dtm-deep);\n  border: 2px solid var(--dtm-border2);\n  box-shadow: 4px 4px 0 var(--c-black);\n  image-rendering: pixelated;\n  -webkit-font-smoothing: none;\n}\n.dtm-chord-player *,\n.dtm-chord-player *::before,\n.dtm-chord-player *::after { box-sizing: border-box; }\n\n/* \u30B3\u30F3\u30C8\u30ED\u30FC\u30EB\u30D0\u30FC \u2014 MML\u518D\u751F\u5C02\u7528\u30D7\u30EC\u30A4\u30E4\u30FC\u306E .dtm-player-head \u3068\u63C3\u3048\u308B */\n.dtm-cp-ctrl {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n.dtm-cp-ctrl .dtm-player-more-container {\n  margin-left: auto;\n}\n\n/* \u30EB\u30FC\u30D7\u5207\u66FF\u30DC\u30BF\u30F3 */\n.dtm-cp-loop {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  border: 2px solid var(--dtm-border2);\n  background: var(--dtm-bg);\n  color: var(--dtm-muted);\n  cursor: pointer;\n  flex: 0 0 auto;\n}\n.dtm-cp-loop:active { transform: translate(1px,1px); }\n.dtm-cp-loop--on {\n  border-color: var(--c-black);\n  background: var(--dtm-gold);\n  color: var(--c-black);\n  box-shadow: 2px 2px 0 var(--c-black);\n}\n\n/* \u30E1\u30BF\u60C5\u5831 (BPM) */\n.dtm-cp-meta {\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: .12em;\n  color: var(--dtm-muted);\n}\n\n/* \u30B9\u30AF\u30ED\u30FC\u30EB\u30A8\u30EA\u30A2 */\n.dtm-cp-scroll {\n  position: relative;\n  max-height: 180px;\n  overflow-y: auto;\n  padding: 8px 10px 10px;\n  scrollbar-width: none;\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n}\n.dtm-cp-scroll::-webkit-scrollbar { display: none; }\n\n/* \u30BB\u30AF\u30B7\u30E7\u30F3\u898B\u51FA\u3057 \u2014 \u30BB\u30AF\u30B7\u30E7\u30F3\u8272\u306E\u5E2F\u3068\u30D4\u30AF\u30BB\u30EB\u30DE\u30FC\u30AB\u30FC */\n.dtm-cp-section {\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: .14em;\n  margin-top: 8px;\n  padding: 1px 8px 1px 5px;\n  color: var(--cp-fg, var(--dtm-text));\n  border-left: 4px solid var(--cp-fg, var(--dtm-text));\n  background: linear-gradient(90deg, var(--cp-bg, transparent), transparent);\n  align-self: flex-start;\n}\n.dtm-cp-section::before {\n  content: \"\u25A0\";\n  margin-right: 5px;\n}\n\n/* \u5C0F\u7BC0\u884C */\n.dtm-cp-bar {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 2px;\n  margin-top: 2px;\n}\n\n/* \u5C0F\u7BC0\u533A\u5207\u308A\u30D1\u30A4\u30D7 */\n.dtm-cp-pipe {\n  font-size: 13px;\n  color: rgba(255, 255, 255, 0.35);\n  font-family: var(--dtm-font);\n  font-weight: bold;\n  margin: 0 4px;\n  user-select: none;\n}\n\n/* \u30B3\u30FC\u30C9\u30BB\u30EB \u2014 \u30B2\u30FC\u30E0\u306E\u30DC\u30BF\u30F3\u98A8\u30C1\u30C3\u30D7\uFF08\u30BF\u30C3\u30D7\u3067\u305D\u3053\u304B\u3089\u518D\u751F\uFF09 */\n.dtm-cp-chord {\n  display: inline-block;\n  font-family: var(--dtm-font);\n  font-size: 12px;\n  padding: 2px 5px;\n  border: 2px solid transparent;\n  color: var(--cp-fg, var(--dtm-text));\n  background: var(--cp-bg, transparent);\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n}\n.dtm-cp-chord:not(.dtm-cp-chord--dead):hover {\n  border-color: var(--cp-fg, var(--dtm-text));\n}\n.dtm-cp-chord:not(.dtm-cp-chord--dead):active {\n  transform: translate(1px,1px);\n}\n.dtm-cp-chord:focus-visible {\n  outline: 2px solid var(--c-white);\n  outline-offset: 0;\n}\n.dtm-cp-chord--dead { cursor: default; }\n.dtm-cp-chord--played { opacity: .45; }\n.dtm-cp-chord--active {\n  border-color: var(--c-black);\n  color: var(--c-black);\n  background: var(--cp-fg, var(--dtm-primary));\n  box-shadow: 2px 2px 0 var(--c-black);\n  opacity: 1;\n}\n";
+declare const DAW_CSS = "\n@font-face {\n  font-family: 'k8x12';\n  src: url('https://db.onlinewebfonts.com/t/777630d46640dc5a928ea833c2fcb875.woff2') format('woff2'),\n       url('https://db.onlinewebfonts.com/t/777630d46640dc5a928ea833c2fcb875.woff') format('woff'),\n       url('https://db.onlinewebfonts.com/t/777630d46640dc5a928ea833c2fcb875.ttf') format('truetype');\n  font-weight: normal;\n  font-style: normal;\n}\n\n/* ====================================================\n   PIXEL MUSIC STUDIO \u2014 \u30C9\u30C3\u30C8\u7D75UI\u30B7\u30B9\u30C6\u30E0\n   PICO-8\u30AB\u30E9\u30FC\u30D1\u30EC\u30C3\u30C8\u30FB\u7F8E\u54B2\u30D5\u30A9\u30F3\u30C8\u30FB\u30B2\u30FC\u30E0\u30A6\u30A3\u30F3\u30C9\u30A6\u67A0\n   ==================================================== */\n\n/* \u30C7\u30B6\u30A4\u30F3\u30C8\u30FC\u30AF\u30F3\u306F\u7DE8\u96C6UI\u672C\u4F53\uFF08.dtm-daw\uFF09\u306B\u52A0\u3048\u3001\u305D\u306E\u5916\u5074\u306B\u5DEE\u3057\u8FBC\u307E\u308C\u308B\n   \u30B3\u30F3\u30C8\u30ED\u30FC\u30EB\u30D0\u30FC\uFF08.dtm-controlbar\uFF09\u306B\u3082\u4F9B\u7D66\u3059\u308B\u3002mountPresetSelect /\n   mountModeSwitch \u306EUI\u306F .dtm-daw \u306E\u5144\u5F1F\u3068\u3057\u3066\u7F6E\u304B\u308C\u308B\u305F\u3081\u3001\u3053\u3053\u3067\u914D\u3089\u306A\u3044\u3068\n   var(--dtm-*) \u304C\u89E3\u6C7A\u3067\u304D\u305A\u7121\u88C5\u98FE\uFF08\u767D\u5730\u30FB\u65E2\u5B9A\u30D5\u30A9\u30F3\u30C8\uFF09\u306B\u306A\u3063\u3066\u3057\u307E\u3046\u3002\n   \u518D\u751F\u5C02\u7528\u30D3\u30E5\u30FC\u306E\u30E2\u30FC\u30C0\u30EB\uFF0F\u5229\u7528\u898F\u7D04\u30AB\u30D0\u30FC\u3001\u6B4C\u58F0\u30E2\u30C7\u30EB\u540D\u306E\u5439\u304D\u51FA\u3057(.dtm-player-balloon)\n   \u306F document.body \u76F4\u4E0B\u3078\u91CD\u306D\u308B\u305F\u3081\u3001.dtm-daw \u306E\u5916\u306B\u51FA\u308B\u3002\u3053\u308C\u3089\u3082\u540C\u69D8\u306B\u30C8\u30FC\u30AF\u30F3\u3092\n   \u4F9B\u7D66\u3057\u306A\u3044\u3068\u7121\u88C5\u98FE\uFF08\u67A0\u7DDA\u306A\u3057\u30FB\u6587\u5B57\u8272\u4E0D\u660E\u306E\u767D\u3044\u7BB1\uFF09\u306B\u306A\u308B\u3002 */\n.dtm-daw,\n.dtm-controlbar,\n.dtm-modal-overlay,\n.dtm-consent-overlay,\n.dtm-chord-player,\n.dtm-player-balloon {\n  /* PICO-8 16\u8272\u30D1\u30EC\u30C3\u30C8\u3088\u308A */\n  --c-black:   #000000;\n  --c-navy:    #1d2b53;\n  --c-purple:  #7e2553;\n  --c-dkgreen: #008751;\n  --c-brown:   #ab5236;\n  --c-dkgray:  #5f574f;\n  --c-gray:    #c2c3c7;\n  --c-white:   #fff1e8;\n  --c-red:     #ff004d;\n  --c-orange:  #ffa300;\n  --c-yellow:  #ffec27;\n  --c-green:   #00e436;\n  --c-cyan:    #29adff;\n  --c-lavend:  #83769c;\n  --c-pink:    #ff77a8;\n  --c-peach:   #ffccaa;\n\n  /* \u30BB\u30DE\u30F3\u30C6\u30A3\u30C3\u30AF\u30C8\u30FC\u30AF\u30F3 */\n  --dtm-bg:       var(--c-black);\n  --dtm-surface:  var(--c-navy);\n  --dtm-deep:     #0a0f1f;\n  --dtm-border:   var(--c-cyan);\n  --dtm-border2:  var(--c-dkgray);\n  --dtm-text:     var(--c-white);\n  --dtm-muted:    var(--c-lavend);\n  --dtm-primary:  var(--c-cyan);\n  --dtm-pfg:      var(--c-black);\n  --dtm-danger:   var(--c-red);\n  --dtm-success:  var(--c-green);\n  --dtm-accent:   var(--c-pink);\n  --dtm-gold:     var(--c-yellow);\n  --dtm-warn:     var(--c-orange);\n  --dtm-tap:      40px;\n  --dtm-gap:      6px;\n  --dtm-font:     'k8x12',ui-monospace,monospace;\n}\n\n.dtm-daw {\n  box-sizing: border-box;\n  font-family: var(--dtm-font);\n  font-size: 14px;\n  line-height: 1.6;\n  letter-spacing: .06em;\n  color: var(--dtm-text);\n  background: var(--dtm-bg);\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: var(--dtm-gap);\n  padding: 0;\n  image-rendering: pixelated;\n  -webkit-font-smoothing: none;\n  -moz-osx-font-smoothing: unset;\n  font-smooth: never;\n  -webkit-tap-highlight-color: transparent;\n}\n.dtm-daw *,\n.dtm-daw *::before,\n.dtm-daw *::after { box-sizing: border-box; }\n\n/* \u2500\u2500\u2500 \u30B2\u30FC\u30E0\u30A6\u30A3\u30F3\u30C9\u30A6\u5171\u901A\u67A0 \u2500\u2500\u2500 */\n/* \u5916\u67A0(\u9ED22px) \u2192 \u8272\u4ED8\u304D2px border \u2192 \u5185\u67A0(\u9ED2inset2px) \u306E3\u91CD\u69CB\u9020 */\n.dtm-win {\n  border: 2px solid var(--c-black);\n  box-shadow:\n    inset 0 0 0 2px var(--c-black),\n    0 0 0 2px var(--dtm-primary),\n    4px 4px 0 var(--c-black);\n  background: var(--dtm-surface);\n}\n\n/* \u2500\u2500\u2500 \u5171\u901A\u30DC\u30BF\u30F3 \u2500\u2500\u2500 */\n.dtm-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  min-height: var(--dtm-tap);\n  min-width: var(--dtm-tap);\n  padding: 0 10px;\n  border: 2px solid var(--dtm-border2);\n  background: var(--dtm-surface);\n  color: var(--dtm-text);\n  font-family: var(--dtm-font);\n  font-size: 13px;\n  text-transform: uppercase;\n  letter-spacing: .12em;\n  cursor: pointer;\n  user-select: none;\n  white-space: nowrap;\n  box-shadow: 3px 3px 0 var(--c-black);\n  transition: none;\n}\n.dtm-btn:active  { transform: translate(3px,3px); box-shadow: none; }\n.dtm-btn:disabled { opacity: .3; cursor: default; box-shadow: none; }\n.dtm-btn--ghost   { background: transparent; border-color: var(--dtm-border2); }\n.dtm-btn--primary { border-color: var(--dtm-primary); background: var(--dtm-primary); color: var(--dtm-pfg); }\n.dtm-btn--success { border-color: var(--dtm-success); background: var(--dtm-success); color: var(--c-black); }\n.dtm-btn--danger  { border-color: var(--dtm-danger);  background: var(--dtm-danger);  color: var(--c-white); }\n.dtm-btn--accent  { border-color: var(--dtm-accent);  background: var(--dtm-accent);  color: var(--c-black); }\n.dtm-btn--icon    { padding: 0; }\n\n/* \u2500\u2500\u2500 \u30A2\u30A4\u30B3\u30F3\u30DC\u30BF\u30F3 \u2500\u2500\u2500 */\n.dtm-iconbtn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dtm-tap);\n  height: var(--dtm-tap);\n  flex: 0 0 auto;\n  border: 2px solid var(--dtm-border2);\n  background: var(--dtm-surface);\n  color: var(--dtm-text);\n  font-size: 16px;\n  cursor: pointer;\n  box-shadow: 3px 3px 0 var(--c-black);\n}\n.dtm-iconbtn:active  { transform: translate(3px,3px); box-shadow: none; }\n.dtm-iconbtn:disabled { opacity: .3; cursor: default; box-shadow: none; }\n\n/* \u2500\u2500\u2500 \u30C8\u30E9\u30F3\u30B9\u30DD\u30FC\u30C8\u30D0\u30FC\uFF08HUD\u30B9\u30BF\u30A4\u30EB\uFF09 \u2500\u2500\u2500 */\n.dtm-topbar {\n  position: sticky;\n  top: 0;\n  z-index: 20;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--dtm-gap);\n  padding: 6px;\n  background: var(--dtm-deep);\n  border: 2px solid var(--c-black);\n  box-shadow:\n    inset 0 0 0 2px var(--c-black),\n    0 0 0 2px var(--dtm-success),\n    4px 4px 0 var(--c-black);\n}\n.dtm-topbar-row1 {\n  display: flex;\n  align-items: center;\n  gap: var(--dtm-gap);\n  flex-basis: 100%;\n  min-width: 0;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n.dtm-topbar-row1::-webkit-scrollbar { display: none; }\n.dtm-topbar-row1 > * { flex-shrink: 0; }\n.dtm-topbar-row1 > .dtm-grow { flex-shrink: 1; }\n\n/* PLAY\u30DC\u30BF\u30F3 \u2014 \u30B2\u30FC\u30E0\u306E\u300C\u6C7A\u5B9A\u30DC\u30BF\u30F3\u300D\u7684\u5B58\u5728\u611F */\n.dtm-play {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dtm-tap);\n  height: var(--dtm-tap);\n  flex: 0 0 auto;\n  border: 2px solid var(--c-black);\n  background: var(--dtm-success);\n  color: var(--c-black);\n  cursor: pointer;\n  box-shadow: 0 0 0 2px var(--dtm-success), 4px 4px 0 var(--c-black);\n}\n.dtm-play:active  { transform: translate(4px,4px); box-shadow: none; }\n.dtm-play:disabled { opacity: .35; cursor: default; box-shadow: none; }\n.dtm-play--stop {\n  background: var(--dtm-danger);\n  box-shadow: 0 0 0 2px var(--dtm-danger), 4px 4px 0 var(--c-black);\n}\n.dtm-rec { color: var(--dtm-danger); }\n\n/* BPM \u2014 \u30C7\u30B8\u30BF\u30EB\u30AB\u30A6\u30F3\u30BF\u30FC\u98A8 */\n.dtm-label {\n  font-family: var(--dtm-font);\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: .14em;\n  color: var(--dtm-muted);\n  white-space: nowrap;\n}\n.dtm-checkbox-label {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-family: var(--dtm-font);\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: .12em;\n  color: var(--dtm-muted);\n  cursor: pointer;\n  user-select: none;\n  margin-top: 4px;\n}\n.dtm-checkbox-label:hover { color: var(--dtm-text); }\n\n/* \u2500\u2500\u2500 \u4F5C\u66F2\u3059\u308B\u30BB\u30AF\u30B7\u30E7\u30F3\u306E\u9078\u629E\uFF08\u30A4\u30F3\u30C8\u30ED\u30FBA\u30E1\u30ED\u2026\u306E\u30C1\u30A7\u30C3\u30AF\uFF09 \u2500\u2500\u2500 */\n.dtm-checks {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px 10px;\n  align-items: center;\n}\n.dtm-check {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-family: var(--dtm-font);\n  font-size: 11px;\n  color: var(--dtm-muted);\n  cursor: pointer;\n  user-select: none;\n  white-space: nowrap;\n}\n.dtm-check:hover { color: var(--dtm-text); }\n.dtm-check input {\n  width: 13px;\n  height: 13px;\n  accent-color: var(--dtm-success);\n  cursor: pointer;\n  flex-shrink: 0;\n}\n.dtm-info-table {\n  border-collapse: collapse;\n  margin: 6px 0;\n  font-size: 11px;\n  width: 100%;\n}\n.dtm-info-table th,\n.dtm-info-table td {\n  border: 1px solid var(--dtm-border);\n  padding: 3px 6px;\n  text-align: left;\n  white-space: nowrap;\n}\n.dtm-info-table th { color: var(--dtm-muted); font-weight: normal; }\n.dtm-hint {\n  font-family: var(--dtm-font);\n  font-size: 10px;\n  color: var(--dtm-muted);\n  white-space: nowrap;\n}\n.dtm-checkbox-label--sub { margin-left: 20px; font-size: 10px; }\n.dtm-checkbox {\n  width: 14px;\n  height: 14px;\n  accent-color: var(--dtm-success);\n  cursor: pointer;\n  flex-shrink: 0;\n}\n\n.dtm-toggle {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-family: var(--dtm-font);\n  font-size: 12px;\n  text-transform: uppercase;\n  letter-spacing: .1em;\n  color: var(--dtm-muted);\n  cursor: pointer;\n}\n.dtm-toggle input { width: 16px; height: 16px; accent-color: var(--dtm-accent); }\n\n/* \u2500\u2500\u2500 \u30C4\u30FC\u30EB\u30C9\u30C3\u30AF\uFF08\u88C5\u5099\u30B9\u30ED\u30C3\u30C8\u98A8\uFF09 \u2500\u2500\u2500 */\n.dtm-tooldock {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--dtm-gap);\n  padding: 6px;\n  background: var(--dtm-deep);\n  border: 2px solid var(--c-black);\n  box-shadow:\n    inset 0 0 0 2px var(--c-black),\n    0 0 0 2px var(--dtm-border2),\n    4px 4px 0 var(--c-black);\n}\n.dtm-sep {\n  width: 2px; align-self: stretch;\n  background: var(--dtm-border2); margin: 2px;\n}\n.dtm-row .dtm-label[data-dtm] { min-width: 48px; text-align: center; }\n\n/* \u2500\u2500\u2500 \u30BB\u30B0\u30E1\u30F3\u30C8\uFF08\u30A2\u30A4\u30C6\u30E0\u30B9\u30ED\u30C3\u30C8\uFF09 \u2500\u2500\u2500 */\n.dtm-seg {\n  display: inline-flex;\n  border: 2px solid var(--dtm-border2);\n  background: var(--dtm-deep);\n  box-shadow: 3px 3px 0 var(--c-black);\n}\n.dtm-segbtn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dtm-tap);\n  height: var(--dtm-tap);\n  border: none;\n  border-right: 2px solid var(--dtm-border2);\n  background: transparent;\n  color: var(--dtm-muted);\n  cursor: pointer;\n}\n.dtm-segbtn:last-child { border-right: none; }\n.dtm-segbtn--active {\n  background: var(--dtm-gold);\n  color: var(--c-black);\n}\n.dtm-segbtn:not(.dtm-segbtn--active):active { background: var(--dtm-border2); }\n\n/* \u2500\u2500\u2500 \u30D5\u30A9\u30FC\u30E0\u8981\u7D20 \u2500\u2500\u2500 */\n.dtm-select, .dtm-input, .dtm-textarea {\n  min-height: var(--dtm-tap);\n  padding: 4px 8px;\n  border: 2px solid var(--dtm-border2);\n  background: var(--dtm-deep);\n  color: var(--dtm-text);\n  font-family: var(--dtm-font);\n  font-size: 13px;\n  letter-spacing: .06em;\n  box-shadow: inset 2px 2px 0 var(--c-black);\n}\n.dtm-select:focus, .dtm-input:focus, .dtm-textarea:focus {\n  outline: none;\n  border-color: var(--dtm-primary);\n}\n.dtm-input--num { width: 64px; text-align: center; font-size: 16px; }\n/* \u4ED6\u306E\u30B3\u30F3\u30C8\u30ED\u30FC\u30EB\u3068\u540C\u3058\u884C\u306B\u7F6E\u304F\u30D7\u30EB\u30C0\u30A6\u30F3\uFF08\u697D\u5668\u30FB\u6B4C\u5531\u30E2\u30C7\u30EB\uFF09 */\n.dtm-select--half { flex: 1 1 120px; min-width: 0; max-width: 200px; }\n.dtm-textarea { width: 100%; min-height: 56px; resize: vertical; line-height: 1.7; }\n.dtm-textarea.dtm-grow { width: 0; }\n.dtm-range { height: var(--dtm-tap); accent-color: var(--dtm-primary); }\n.dtm-range:disabled { opacity: .35; cursor: default; }\n\n/* \u2500\u2500\u2500 \u30B3\u30F3\u30C8\u30ED\u30FC\u30EB\u30D0\u30FC\uFF08\u697D\u5668\u30D7\u30EA\u30BB\u30C3\u30C8 / \u30E2\u30FC\u30C9\u5207\u66FF\u306A\u3069\u306E\u5DEE\u3057\u8FBC\u307FUI\uFF09 \u2500\u2500\u2500 */\n.dtm-controlbar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--dtm-gap);\n  padding: 6px 8px;\n  background: var(--dtm-deep);\n  border: 2px solid var(--c-black);\n  box-shadow:\n    inset 0 0 0 2px var(--c-black),\n    0 0 0 2px var(--dtm-border2),\n    4px 4px 0 var(--c-black);\n  margin-bottom: var(--dtm-gap);\n}\n.dtm-controlbar-label {\n  font-family: var(--dtm-font);\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: .14em;\n  color: var(--dtm-accent);\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n.dtm-controlbar .dtm-select { flex: 1 1 160px; }\n\n/* \u30E2\u30FC\u30C9\u5207\u66FF\uFF08\u30C6\u30AD\u30B9\u30C8\u7248\u30BB\u30B0\u30E1\u30F3\u30C8\uFF09 */\n.dtm-modeseg {\n  display: inline-flex;\n  border: 2px solid var(--dtm-border2);\n  box-shadow: 3px 3px 0 var(--c-black);\n}\n.dtm-modebtn {\n  min-height: var(--dtm-tap);\n  padding: 0 14px;\n  border: none;\n  border-right: 2px solid var(--dtm-border2);\n  background: var(--dtm-deep);\n  color: var(--dtm-muted);\n  font-family: var(--dtm-font);\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: .12em;\n  cursor: pointer;\n}\n.dtm-modebtn:last-child { border-right: none; }\n.dtm-modebtn--active { background: var(--dtm-primary); color: var(--dtm-pfg); }\n.dtm-modebtn:not(.dtm-modebtn--active):active { background: var(--dtm-border2); }\n\n/* \u2500\u2500\u2500 \u30C8\u30E9\u30C3\u30AF\u30D4\u30EB\uFF08\u756A\u53F7\u30DC\u30BF\u30F3\u3001\u30C8\u30E9\u30F3\u30B9\u30DD\u30FC\u30C8\u30D0\u30FC2\u884C\u76EE\uFF09 \u2500\u2500\u2500 */\n.dtm-tracks {\n  flex-basis: 100%;\n  display: flex;\n  flex-wrap: nowrap;\n  gap: 4px;\n  align-items: flex-end;\n}\n.dtm-pill {\n  --dtm-pill-color: var(--dtm-primary);\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1 1 0;\n  min-width: 0;\n  height: 24px;\n  padding: 0;\n  border: 2px solid var(--c-black);\n  background: color-mix(in srgb, var(--dtm-pill-color) 22%, #0e121e);\n  color: color-mix(in srgb, var(--c-white) 60%, transparent);\n  font-family: var(--dtm-font);\n  font-size: 11px;\n  font-weight: bold;\n  cursor: pointer;\n  box-shadow: 1px 1px 0 var(--c-black);\n  opacity: 0.55;\n  transition: opacity 120ms ease, background 120ms ease, transform 120ms ease;\n}\n.dtm-pill:hover:not(.dtm-pill--active) {\n  opacity: 0.85;\n  background: color-mix(in srgb, var(--dtm-pill-color) 45%, #0e121e);\n  color: var(--c-white);\n}\n/* \u30A2\u30AF\u30C6\u30A3\u30D6\u9078\u629E = \u9BAE\u660E\u306A\u30C8\u30E9\u30C3\u30AF\u8272 + \u30B4\u30FC\u30EB\u30C9\u67A0 + \u30B0\u30ED\u30FC + \u4E0A\u6607\u7ACB\u4F53\u30BF\u30D6\u8868\u73FE */\n.dtm-pill--active {\n  opacity: 1;\n  height: 28px;\n  background: var(--dtm-pill-color);\n  color: #ffffff;\n  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;\n  border-color: var(--dtm-gold);\n  box-shadow:\n    0 0 0 1.5px var(--dtm-gold),\n    0 0 10px color-mix(in srgb, var(--dtm-pill-color) 70%, transparent),\n    2px 2px 0 var(--c-black);\n  z-index: 1;\n  transform: translateY(-2px);\n}\n.dtm-pill--active::before {\n  content: '';\n  position: absolute;\n  top: -2px;\n  left: 2px;\n  right: 2px;\n  height: 2px;\n  background: #ffffff;\n  border-radius: 1px;\n  opacity: 0.85;\n}\n.dtm-pill:not(.dtm-pill--active):active { transform: translate(1px,1px); box-shadow: none; }\n/* \u30DC\u30FC\u30AB\u30EB\u304C\u9078\u629E\u3055\u308C\u3066\u3044\u308B\u30C8\u30E9\u30C3\u30AF\u306E\u30BF\u30D6\u306B\u3001\u3046\u3063\u3059\u3089\u58F0\u306E\u30A2\u30A4\u30B3\u30F3\u3092\u91CD\u306D\u308B\uFF08\u80CC\u666F\u8272\u30FB\u30B5\u30A4\u30BA\u306F\u5909\u3048\u306A\u3044\uFF09 */\n.dtm-pill--vocal::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background-image: var(--dtm-pill-icon);\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: right center;\n  opacity: 0.4;\n  pointer-events: none;\n}\n.dtm-pill__label {\n  position: relative;\n  z-index: 1;\n}\n/* \u518D\u751F\u4E2D\u3001\u5B9F\u969B\u306B\u767A\u97F3\u3057\u305F\u77AC\u9593\u3060\u3051\u70B9\u706F\uFF08\u3069\u306E\u30BF\u30D6\u304C\u4ECA\u9CF4\u3063\u3066\u3044\u308B\u304B\u8996\u899A\u7684\u306B\u5206\u304B\u308B\u3088\u3046\u306B\uFF09 */\n.dtm-pill--sounding {\n  filter: brightness(1.6);\n  transition: filter 30ms linear;\n}\n\n/* \u2500\u2500\u2500 \u30D4\u30A2\u30CE\u30ED\u30FC\u30EB\uFF08\u30C8\u30E9\u30C3\u30AB\u30FC\u98A8\uFF09 \u2500\u2500\u2500 */\n.dtm-roll-wrap { display: flex; gap: var(--dtm-gap); }\n.dtm-roll {\n  position: relative;\n  flex: 1 1 auto;\n  height: 32vh;\n  max-height: 32vh;\n  background: var(--dtm-deep);\n  border: 2px solid var(--c-black);\n  box-shadow:\n    inset 0 0 0 2px var(--c-black),\n    0 0 0 2px var(--dtm-border2),\n    4px 4px 0 var(--c-black);\n  overflow: hidden;\n}\n/* \u30AB\u30B9\u30BF\u30E0\u80CC\u666F\u753B\u50CF\u30EC\u30A4\u30E4\u30FC\uFF08\u753B\u50CF\u81EA\u4F53\u3092\u534A\u900F\u660E\u5316\u3057\u3001\u30AD\u30E3\u30F3\u30D0\u30B9\u5074\u306E\u5857\u308A\u306F\u7DAD\u6301\uFF09 */\n.dtm-roll::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background-image: var(--dtm-roll-bg-image, none);\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n  opacity: var(--dtm-roll-bg-opacity, 0.4);\n  pointer-events: none;\n}\n.dtm-vscroll {\n  position: relative;\n  width: 20px;\n  background: var(--dtm-deep);\n  border: 2px solid var(--dtm-border2);\n  cursor: pointer;\n  flex: 0 0 auto;\n  touch-action: none;\n}\n.dtm-vscroll-thumb, .dtm-hscroll-thumb {\n  position: absolute;\n  background: var(--dtm-primary);\n  min-width: 20px;\n  min-height: 20px;\n}\n.dtm-vscroll-thumb { left: 0; width: 100%; }\n.dtm-hscroll {\n  position: relative;\n  width: 100%; height: 20px;\n  background: var(--dtm-deep);\n  border: 2px solid var(--dtm-border2);\n  cursor: pointer;\n  touch-action: none;\n}\n.dtm-hscroll-thumb { top: 0; height: 100%; }\n\n/* \u2500\u2500\u2500 \u30D1\u30CD\u30EB\uFF08RPG\u30C0\u30A4\u30A2\u30ED\u30B0\u30A6\u30A3\u30F3\u30C9\u30A6\uFF09 \u2500\u2500\u2500 */\n.dtm-panel {\n  background: var(--dtm-surface);\n  border: 2px solid var(--c-black);\n  box-shadow:\n    inset 0 0 0 2px var(--c-black),\n    0 0 0 2px var(--dtm-primary),\n    4px 4px 0 var(--c-black);\n  overflow: hidden;\n}\n.dtm-panel > summary {\n  list-style: none;\n  cursor: pointer;\n  padding: 0 12px;\n  font-family: var(--dtm-font);\n  font-size: 12px;\n  text-transform: uppercase;\n  letter-spacing: .14em;\n  display: flex;\n  align-items: center;\n  min-height: var(--dtm-tap);\n  background: var(--dtm-deep);\n  border-bottom: 2px solid var(--dtm-border2);\n  color: var(--dtm-primary);\n  gap: 8px;\n}\n.dtm-panel:not([open]) > summary { border-bottom: none; }\n.dtm-panel > summary::-webkit-details-marker { display: none; }\n/* \u5DE6\u7AEF\u30E9\u30A4\u30F3\uFF08\u30B2\u30FC\u30E0UI\u306E\u30BB\u30AF\u30B7\u30E7\u30F3\u8272\u5206\u3051\uFF09 */\n.dtm-panel > summary::before {\n  content: '';\n  display: block;\n  width: 4px;\n  height: 20px;\n  background: var(--dtm-accent);\n  flex: 0 0 auto;\n}\n.dtm-panel[open] > summary::before { background: var(--dtm-primary); }\n/* \u6298\u308A\u305F\u305F\u307F\u77E2\u5370 */\n.dtm-panel > summary::after {\n  content: \"\u25B6\";\n  margin-left: auto;\n  color: var(--dtm-muted);\n  font-size: 10px;\n}\n.dtm-panel[open] > summary::after { content: \"\u25BC\"; }\n.dtm-panel-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 10px; }\n.dtm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }\n.dtm-track-body { display: flex; flex-direction: column; gap: 10px; }\n\n/* \u2500\u2500\u2500 \u81EA\u52D5\u4F5C\u66F2\u30B3\u30F3\u30C6\u30CA\uFF08\u30DE\u30AF\u30ED\u30D1\u30CD\u30EB\u5185\u306E\u5C02\u7528\u30AB\u30FC\u30C9\u98A8\u30B0\u30EB\u30FC\u30D7\u67A0\uFF09 \u2500\u2500\u2500 */\n.dtm-compose-container {\n  background: var(--dtm-deep);\n  border: 2px solid var(--c-black);\n  box-shadow:\n    inset 0 0 0 1px var(--dtm-border2),\n    0 0 0 1px var(--dtm-success),\n    3px 3px 0 var(--c-black);\n  padding: 10px 12px 12px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-bottom: 6px;\n}\n\n/* \u2500\u2500\u2500 \u30A2\u30AF\u30C6\u30A3\u30D6\u30C8\u30E9\u30C3\u30AF\u8272\uFF08\u500B\u5225\u30C8\u30E9\u30C3\u30AF\u8A2D\u5B9A\u30D1\u30CD\u30EB\u306E\u5DE6\u7AEF\u30E9\u30A4\u30F3\uFF09 \u2500\u2500\u2500 */\n.dtm-panel--track > summary::before,\n.dtm-panel--track[open] > summary::before {\n  background: var(--dtm-track-color, var(--dtm-primary));\n}\n\n/* \u2500\u2500\u2500 MML\u51FA\u529B\uFF08CRT\u30BF\u30FC\u30DF\u30CA\u30EB\uFF09 \u2500\u2500\u2500 */\n.dtm-output {\n  background: var(--c-black);\n  color: var(--dtm-success);\n  border: 2px solid var(--dtm-success);\n  padding: 10px;\n  box-shadow: 0 0 0 2px var(--c-black), 4px 4px 0 var(--c-black);\n}\n.dtm-output::before {\n  content: \"C:\\> MML OUTPUT\";\n  display: block;\n  font-size: 11px;\n  color: var(--dtm-muted);\n  letter-spacing: .14em;\n  margin-bottom: 6px;\n  padding-bottom: 6px;\n  border-bottom: 1px solid var(--dtm-border2);\n}\n.dtm-output pre {\n  margin: 0;\n  background: transparent;\n  padding: 0;\n  overflow-x: auto;\n  font-family: var(--dtm-font);\n  font-size: 12px;\n  line-height: 1.8;\n  color: var(--dtm-success);\n}\n.dtm-output-label {\n  font-size: 11px;\n  color: var(--dtm-muted);\n  font-family: var(--dtm-font);\n  margin-top: 10px;\n}\n.dtm-output-label:first-of-type {\n  margin-top: 0;\n}\n.dtm-output-row { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; }\n.dtm-output-row pre { flex: 1; }\n.dtm-output-scroll { max-height: 240px; overflow-y: auto; }\n\n/* \u2500\u2500\u2500 \u30ED\u30FC\u30C7\u30A3\u30F3\u30B0\u30AA\u30FC\u30D0\u30FC\u30EC\u30A4 \u2500\u2500\u2500 */\n.dtm-overlay {\n  position: absolute; inset: 0; z-index: 10;\n  background: rgba(0,0,0,.92);\n  display: flex; align-items: center; justify-content: center;\n  flex-direction: column; gap: 14px;\n  pointer-events: auto;\n  cursor: wait;\n}\n.dtm-overlay[hidden] { display: none; }\n.dtm-overlay::before {\n  content: '\u30ED\u30FC\u30C9\u4E2D';\n  font-family: var(--dtm-font);\n  font-size: 13px;\n  color: var(--dtm-primary);\n  text-transform: uppercase;\n  letter-spacing: .25em;\n  animation: dtm-blink 1s steps(1) infinite;\n}\n/* 8\u30D6\u30ED\u30C3\u30AF\u523B\u307F\u3067\u57CB\u307E\u308B\u30D4\u30AF\u30BB\u30EB\u30D0\u30FC */\n.dtm-spinner {\n  width: 96px; height: 12px;\n  position: relative;\n  background: var(--c-navy);\n  border: 2px solid var(--dtm-primary);\n  box-shadow: 0 0 0 2px var(--c-black), 4px 4px 0 var(--c-black);\n}\n.dtm-spinner::after {\n  content: '';\n  position: absolute;\n  left: 0; top: 0; height: 100%;\n  background: var(--dtm-primary);\n  animation: dtm-load 1.6s steps(8) infinite;\n}\n@keyframes dtm-load { 0%{width:0} 100%{width:100%} }\n/* \u9032\u6357\u304C\u78BA\u5B9A\u3057\u305F\u3089\u7121\u9650\u30EB\u30FC\u30D7\u6F14\u51FA\u3092\u6B62\u3081\u3001\u5B9F\u6E2C\u5024\u3067\u5857\u308A\u3064\u3076\u3059 */\n.dtm-spinner--determinate::after { display: none; }\n.dtm-spinner-fill {\n  position: absolute;\n  left: 0; top: 0; height: 100%;\n  width: 0;\n  background: var(--dtm-primary);\n  transition: width .12s steps(8);\n}\n.dtm-loading-label {\n  font-family: var(--dtm-font);\n  font-size: 11px;\n  color: var(--dtm-primary);\n  letter-spacing: .15em;\n  min-height: 1em;\n}\n.dtm-overlay-skip-btn {\n  margin-top: 12px;\n  min-height: 32px;\n  font-size: 11px;\n  font-family: var(--dtm-font);\n  padding: 0 12px;\n  background: var(--dtm-surface);\n  border: 2px solid var(--dtm-border2);\n  color: var(--dtm-muted);\n  box-shadow: 2px 2px 0 var(--c-black);\n  cursor: pointer;\n  pointer-events: auto;\n}\n.dtm-overlay-skip-btn:hover {\n  color: var(--dtm-text);\n  border-color: var(--dtm-primary);\n}\n.dtm-overlay-skip-btn:active {\n  transform: translate(2px, 2px);\n  box-shadow: none;\n}\n.dtm-overlay-skip-btn:disabled {\n  opacity: .3;\n  cursor: default;\n  box-shadow: none;\n  transform: none;\n}\n.dtm-topbar-loading {\n  display: none;\n  font-family: var(--dtm-font);\n  font-size: 11px;\n  color: var(--dtm-primary);\n  margin-left: 12px;\n  letter-spacing: .15em;\n  align-self: center;\n}\n.dtm-topbar.is-loading .dtm-topbar-loading {\n  display: inline-block;\n}\n.dtm-topbar.is-loading {\n  pointer-events: none;\n  opacity: 0.7;\n}\n\n@keyframes dtm-blink { 0%,100%{opacity:1} 50%{opacity:0} }\n.dtm-blink { animation: dtm-blink 1s steps(1) infinite; }\n\n/* \u2500\u2500\u2500 \u97F3\u5272\u308C\u691C\u77E5\u30D0\u30C3\u30B8 \u2500\u2500\u2500 \u30AF\u30EA\u30C3\u30D7\u767A\u751F\u4E2D\u3060\u3051\u8868\u793A\u3055\u308C\u308B\u8B66\u544A\u30DC\u30BF\u30F3\u3002\u30AF\u30EA\u30C3\u30AF\u3067\u6D88\u305B\u308B\u3002 */\n.dtm-clip-badge {\n  flex: 0 0 auto;\n  min-height: 24px;\n  padding: 0 8px;\n  border: 2px solid var(--c-black);\n  background: var(--dtm-danger);\n  color: var(--c-white);\n  font-family: var(--dtm-font);\n  font-size: 10px;\n  letter-spacing: .1em;\n  cursor: pointer;\n  box-shadow: 0 0 0 2px var(--dtm-danger), 2px 2px 0 var(--c-black);\n  animation: dtm-blink .5s steps(1) infinite;\n}\n.dtm-clip-badge:active { transform: translate(2px,2px); box-shadow: none; }\n\n/* \u2500\u2500\u2500 \u30A4\u30F3\u30D5\u30A9\u30DC\u30BF\u30F3 \u2500\u2500\u2500 */\n.dtm-infobtn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  flex: 0 0 auto;\n  border: 2px solid var(--dtm-border2);\n  background: var(--dtm-surface);\n  color: var(--dtm-muted);\n  cursor: pointer;\n  box-shadow: 1px 1px 0 var(--c-black);\n  padding: 0;\n  margin: 0;\n}\n.dtm-infobtn:hover {\n  color: var(--dtm-primary);\n  border-color: var(--dtm-primary);\n}\n.dtm-infobtn:active {\n  transform: translate(1px, 1px);\n  box-shadow: none;\n}\n\n/* \u2500\u2500\u2500 \u89E3\u8AAC\u30E2\u30FC\u30C0\u30EB \u2500\u2500\u2500 */\n.dtm-modal-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 10000;\n  background: rgba(0, 0, 0, 0.7);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 16px;\n  backdrop-filter: blur(2px);\n  /* body\u76F4\u4E0B\u306B\u91CD\u306D\u305F\u5834\u5408\uFF08\u518D\u751F\u5C02\u7528\u30D3\u30E5\u30FC\uFF09\u3067\u3082\u6587\u5B57\u8272\u30FB\u30D5\u30A9\u30F3\u30C8\u304C\n     .dtm-daw \u304B\u3089\u7D99\u627F\u3067\u304D\u306A\u3044\u305F\u3081\u3001\u3053\u3053\u3067\u660E\u793A\u3059\u308B\u3002 */\n  color: var(--dtm-text);\n  font-family: var(--dtm-font);\n}\n.dtm-modal-overlay[hidden] {\n  display: none !important;\n}\n\n/* \u2500\u2500\u2500 \u5229\u7528\u898F\u7D04\u540C\u610F\u30AB\u30D0\u30FC \u2500\u2500\u2500 */\n.dtm-consent-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 10100;\n  background: rgba(0, 0, 0, 0.6);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 16px;\n  backdrop-filter: blur(2px);\n  /* body\u76F4\u4E0B\u306B\u91CD\u306D\u308B\u305F\u3081 .dtm-daw \u304B\u3089\u7D99\u627F\u3067\u304D\u306A\u3044\u6587\u5B57\u8272\u30FB\u30D5\u30A9\u30F3\u30C8\u3092\u660E\u793A\u3002 */\n  color: var(--dtm-text);\n  font-family: var(--dtm-font);\n}\n.dtm-consent-overlay[hidden] {\n  display: none !important;\n}\n.dtm-consent-modal {\n  max-width: 450px;\n  width: 100%;\n  max-height: 85vh;\n  display: flex;\n  flex-direction: column;\n  background: var(--dtm-surface);\n  border: 2px solid var(--c-black);\n  box-shadow:\n    inset 0 0 0 2px var(--c-black),\n    0 0 0 2px var(--dtm-primary),\n    4px 4px 0 var(--c-black);\n  overflow-y: auto;\n}\n.dtm-consent-header {\n  background: var(--dtm-deep);\n  color: var(--dtm-text);\n  padding: 8px 12px;\n  border-bottom: 2px solid var(--c-black);\n  font-weight: bold;\n  text-align: center;\n  font-size: 14px;\n}\n.dtm-consent-body {\n  padding: 12px 16px;\n  font-size: 13px;\n  line-height: 1.6;\n}\n.dtm-consent-body a {\n  color: var(--dtm-primary);\n  text-decoration: underline;\n}\n.dtm-consent-body a:hover {\n  color: var(--dtm-accent);\n}\n.dtm-consent-footer {\n  padding: 8px;\n  border-top: 2px solid var(--c-black);\n  background: var(--dtm-deep);\n  display: flex;\n  justify-content: center;\n}\n\n.dtm-confirm-footer {\n  padding: 8px 12px;\n  border-top: 2px solid var(--c-black);\n  background: var(--dtm-deep);\n  display: flex;\n  gap: 8px;\n  justify-content: flex-end;\n}\n\n.dtm-modal {\n  max-width: 500px;\n  width: 100%;\n  max-height: 80vh;\n  display: flex;\n  flex-direction: column;\n  background: var(--dtm-surface);\n  border: 2px solid var(--c-black);\n  box-shadow:\n    inset 0 0 0 2px var(--c-black),\n    0 0 0 2px var(--dtm-primary),\n    4px 4px 0 var(--c-black);\n  overflow: hidden;\n}\n.dtm-modal-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background: var(--dtm-deep);\n  padding: 8px 12px;\n  border-bottom: 2px solid var(--c-black);\n}\n.dtm-modal-title {\n  font-family: var(--dtm-font);\n  font-size: 14px;\n  color: var(--dtm-gold);\n  font-weight: bold;\n}\n.dtm-modal-close {\n  background: transparent;\n  border: none;\n  color: var(--dtm-text);\n  font-size: 20px;\n  cursor: pointer;\n  padding: 0;\n  line-height: 1;\n}\n.dtm-modal-close:hover {\n  color: var(--dtm-danger);\n}\n.dtm-modal-body {\n  padding: 12px;\n  overflow-y: auto;\n  overflow-x: hidden;\n  font-size: 13px;\n  line-height: 1.6;\n}\n.dtm-modal-body * {\n  max-width: 100%;\n  box-sizing: border-box;\n}\n.dtm-modal-body a {\n  color: var(--dtm-primary);\n  text-decoration: underline;\n}\n.dtm-modal-body a:hover {\n  color: var(--dtm-accent);\n}\n.dtm-modal-body h4 {\n  margin: 12px 0 6px 0;\n  color: var(--dtm-primary);\n  font-size: 13px;\n}\n.dtm-modal-body h4:first-child {\n  margin-top: 0;\n}\n.dtm-modal-body p {\n  margin: 0 0 8px 0;\n}\n.dtm-modal-body ul {\n  margin: 0 0 8px 0;\n  padding-left: 16px;\n}\n.dtm-modal-body li {\n  margin-bottom: 4px;\n}\n.dtm-modal-body code {\n  background: var(--dtm-deep);\n  color: var(--dtm-accent);\n  padding: 1px 4px;\n  font-family: var(--dtm-font);\n  font-size: 12px;\n}\n.dtm-modal-body pre {\n  background: var(--dtm-deep);\n  color: var(--dtm-success);\n  padding: 8px;\n  border: 1px solid var(--dtm-border2);\n  margin: 6px 0;\n  overflow-x: auto;\n  font-family: var(--dtm-font);\n  font-size: 12px;\n}\n\n.dtm-modal-sample-box {\n  background: var(--dtm-deep);\n  border: 1px solid var(--dtm-border2);\n  border-radius: 4px;\n  padding: 8px 10px;\n  margin-bottom: 12px;\n}\n.dtm-modal-sample-box:last-child {\n  margin-bottom: 0;\n}\n.dtm-modal-sample-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 6px;\n}\n.dtm-modal-sample-tag {\n  font-family: var(--dtm-font);\n  font-size: 11px;\n  font-weight: bold;\n  color: var(--dtm-accent);\n}\n.dtm-modal-sample-desc {\n  margin: 6px 0 0 0;\n  font-size: 11px;\n  color: var(--dtm-muted);\n}\n.dtm-modal-sample-player-container {\n  margin-top: 8px;\n}\n.dtm-modal-sample-player-container:empty {\n  margin-top: 0;\n}\n.dtm-modal-sample-player-container .dtm-player {\n  border: 1px solid var(--dtm-border2);\n  box-shadow: none;\n  background: rgba(0, 0, 0, 0.3);\n}\n.dtm-modal-sample-player-container .dtm-player-body {\n  max-height: 100px;\n  overflow-y: auto;\n}\n\n.dtm-hidden { display: none !important; }\n/* \u8AAD\u8FBC\u6642\u306E\u8B66\u544A\u304A\u77E5\u3089\u305B\uFF08\u4F8B: \u30B7\u30F3\u30D7\u30EB\u30E2\u30FC\u30C9\u3067\u306E\u30C8\u30E9\u30C3\u30AF\u5408\u7B97\uFF09\u3002 */\n.dtm-load-note {\n  margin: 6px 0 0;\n  padding: 0 2px;\n  font-family: var(--dtm-font);\n  font-size: 11px;\n  line-height: 1.5;\n  letter-spacing: .04em;\n  color: var(--dtm-warn); /* \u8B66\u544A\u8272\uFF08\u30AA\u30EC\u30F3\u30B8\uFF09 */\n  font-weight: bold;\n  opacity: 1.0;\n}\n.dtm-load-note::before { content: \"\u26A0 \"; }\n.dtm-grow { flex: 1 1 auto; }\n.dtm-lyric-icon {\n  flex: 0 0 auto;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  object-fit: cover;\n  image-rendering: pixelated;\n}\n/* \u6B4C\u8A5E\u30C8\u30E9\u30C3\u30AF\u306E\u300C\u8A73\u7D30\u8A2D\u5B9A\u300D\u2014 \u5E38\u7528\u3057\u306A\u3044\u30D1\u30E9\u30E1\u30FC\u30BF\uFF08\u30AA\u30AF\u30BF\u30FC\u30D6/\u5B9A\u4F4D/\u30EA\u30D0\u30FC\u30D6\u9001\u308A/\n   \u30B8\u30A7\u30F3\u30C0\u30FC/\u30D6\u30EC\u30B7\u30CD\u30B9/\u30D3\u30D6\u30E9\u30FC\u30C8\uFF09\u3092\u7573\u3093\u3067\u304A\u304F\u8EFD\u91CF\u306A details\u3002dtm-panel \u307B\u3069\n   \u4EF0\u3005\u3057\u304F\u305B\u305A\u3001\u5C0F\u3055\u3044\u25B6\u30DE\u30FC\u30AB\u30FC\u3060\u3051\u4ED8\u3051\u308B\uFF08\u4ED5\u5207\u308A\u7DDA\u306F\u9AD8\u3055\u3092\u98DF\u3046\u306E\u3067\u7F6E\u304B\u306A\u3044\uFF09\u3002 */\n.dtm-advanced {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.dtm-advanced > summary {\n  list-style: none;\n  cursor: pointer;\n  font-size: 11px;\n  letter-spacing: .08em;\n  color: var(--dtm-text);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  min-height: 28px;\n  padding: 0 8px;\n  border: 2px solid var(--dtm-border2);\n  background: var(--dtm-deep);\n  box-shadow: 2px 2px 0 var(--c-black);\n  width: fit-content;\n}\n.dtm-advanced > summary:active { transform: translate(2px,2px); box-shadow: none; }\n.dtm-advanced > summary::-webkit-details-marker { display: none; }\n.dtm-advanced > summary::before { content: \"\u25B6\"; font-size: 9px; color: var(--dtm-accent); }\n.dtm-advanced[open] > summary::before { content: \"\u25BC\"; }\n.dtm-advanced[open] > summary { border-color: var(--dtm-primary); color: var(--dtm-primary); }\n\n/* \u2500\u2500\u2500 \u5E83\u5E45\u62E1\u5F35 \u2500\u2500\u2500 */\n@media (min-width: 768px) {\n  .dtm-daw { gap: 8px; padding: 10px; }\n  .dtm-roll { height: 420px; }\n}\n\n/* ====================================================\n   MML PLAYER \u2014 \u518D\u751F\u5C02\u7528\u30D3\u30E5\u30FC\uFF08mountMmlPlayer\uFF09\n   ==================================================== */\n.dtm-player {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dtm-gap);\n  padding: var(--dtm-gap);\n  background: var(--dtm-deep);\n  border: 2px solid var(--dtm-border2);\n  box-shadow: 4px 4px 0 var(--c-black);\n}\n.dtm-player-message {\n  padding: 4px 8px;\n  background: var(--c-purple);\n  color: var(--c-yellow);\n  font-size: 11px;\n  border: 2px solid var(--c-black);\n  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2);\n  font-family: var(--dtm-font);\n  text-align: center;\n  width: 100%;\n  box-sizing: border-box;\n}\n.dtm-player-head {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n.dtm-player-play {\n  flex: 0 0 auto;\n  width: 28px;\n  height: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--dtm-primary);\n  color: var(--dtm-pfg);\n  border: 2px solid var(--c-black);\n  box-shadow: 2px 2px 0 var(--c-black);\n  cursor: pointer;\n  padding: 0;\n}\n.dtm-player-play:active { transform: translate(2px, 2px); box-shadow: none; }\n.dtm-player-play--stop { background: var(--dtm-danger); }\n.dtm-player-play:disabled { opacity: 0.4; cursor: default; }\n.dtm-player-loop {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  border: 2px solid var(--dtm-border2);\n  background: var(--dtm-bg);\n  color: var(--dtm-muted);\n  cursor: pointer;\n  flex: 0 0 auto;\n}\n.dtm-player-loop:active { transform: translate(1px, 1px); }\n.dtm-player-loop--on {\n  border-color: var(--c-black);\n  background: var(--dtm-gold);\n  color: var(--c-black);\n  box-shadow: 2px 2px 0 var(--c-black);\n}\n.dtm-player-loop:disabled { opacity: 0.4; cursor: default; }\n.dtm-player-beat-row {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n.dtm-player-beat-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: var(--dtm-border2);\n  transition: background 0.06s;\n}\n.dtm-player-beat-dot--on { background: var(--dtm-primary); }\n.dtm-player-bar {\n  font-family: 'k8x12', monospace;\n  font-size: 11px;\n  color: var(--dtm-text);\n  min-width: 2em;\n  margin-left: 4px;\n}\n.dtm-player-chord {\n  font-family: 'k8x12', monospace;\n  font-size: 11px;\n  color: var(--dtm-accent);\n  min-width: 4em;\n  margin-left: 8px;\n  font-weight: bold;\n}\n.dtm-player-seek-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.dtm-player-seek {\n  --fill: 0%;\n  flex: 1 1 auto;\n  min-width: 0;\n  height: 12px;\n  margin: 0;\n  background: transparent;\n  cursor: pointer;\n  -webkit-appearance: none;\n  appearance: none;\n}\n.dtm-player-seek:disabled { cursor: default; opacity: 0.4; }\n/* \u518D\u751F\u6E08\u307F\u533A\u9593\u3092YouTube\u98A8\u306B\u8272\u5857\u308A\u3059\u308B\uFF08--fill \u306F\u518D\u751F\u4F4D\u7F6E\u306B\u5FDC\u3058\u3066JS\u304B\u3089\u8A2D\u5B9A\uFF09 */\n.dtm-player-seek::-webkit-slider-runnable-track {\n  height: 6px;\n  background: linear-gradient(\n    to right,\n    var(--dtm-primary) var(--fill),\n    var(--dtm-border2) var(--fill)\n  );\n  border: 2px solid var(--c-black);\n}\n.dtm-player-seek::-moz-range-track {\n  height: 6px;\n  background: var(--dtm-border2);\n  border: 2px solid var(--c-black);\n}\n.dtm-player-seek::-moz-range-progress {\n  height: 6px;\n  background: var(--dtm-primary);\n  border: 2px solid var(--c-black);\n  border-right: none;\n}\n.dtm-player-seek::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  width: 12px;\n  height: 16px;\n  margin-top: -7px;\n  background: var(--dtm-primary);\n  border: 2px solid var(--c-black);\n  box-shadow: 2px 2px 0 var(--c-black);\n  cursor: pointer;\n}\n.dtm-player-seek::-moz-range-thumb {\n  width: 12px;\n  height: 16px;\n  background: var(--dtm-primary);\n  border: 2px solid var(--c-black);\n  box-shadow: 2px 2px 0 var(--c-black);\n  cursor: pointer;\n  border-radius: 0;\n}\n.dtm-player-time {\n  flex: 0 0 auto;\n  font-family: 'k8x12', monospace;\n  font-size: 11px;\n  color: var(--dtm-text);\n  white-space: nowrap;\n}\n.dtm-player-dots {\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.dtm-player-dot { width: 8px; height: 8px; display: inline-block; }\n.dtm-player-mml-header {\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n.dtm-player-mml-link {\n  font-family: 'k8x12', monospace;\n  font-size: 10px;\n  color: var(--dtm-muted);\n  text-decoration: none;\n  white-space: nowrap;\n}\n.dtm-player-mml-link:hover { color: var(--dtm-primary); }\n.dtm-player-more-container {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n.dtm-player-more-btn {\n  background: transparent;\n  border: none;\n  color: var(--dtm-muted);\n  cursor: pointer;\n  padding: 2px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  width: 24px;\n  height: 24px;\n  transition: color 0.15s, background-color 0.15s;\n}\n.dtm-player-more-btn:hover,\n.dtm-player-more-btn.is-active {\n  color: var(--dtm-text);\n  background: var(--dtm-border2);\n}\n.dtm-player-menu {\n  position: absolute;\n  top: calc(100% + 4px);\n  right: 0;\n  background: var(--dtm-deep);\n  border: 2px solid var(--dtm-border2);\n  box-shadow: 4px 4px 0 var(--c-black);\n  z-index: 200;\n  display: flex;\n  flex-direction: column;\n  padding: 4px 0;\n  min-width: 130px;\n  font-family: var(--dtm-font);\n}\n.dtm-player-menu-item {\n  background: transparent;\n  border: none;\n  color: var(--dtm-text);\n  padding: 6px 12px;\n  text-align: left;\n  cursor: pointer;\n  font-size: 11px;\n  font-family: inherit;\n  white-space: nowrap;\n  width: 100%;\n  box-sizing: border-box;\n  transition: background-color 0.1s, color 0.1s;\n}\n.dtm-player-menu-item:hover {\n  background: var(--dtm-primary);\n  color: var(--dtm-pfg);\n}\n.dtm-player-emoji {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  font-size: 18px;\n  line-height: 1;\n  user-select: none;\n}\n.dtm-player-balloon {\n  /* body \u76F4\u4E0B\u306B\u751F\u6210\u3055\u308C\u3001JS(positionBalloon)\u304C\u6BCE\u56DE left/top \u3092\u30A2\u30F3\u30AB\u30FC\u306E\u753B\u9762\u5EA7\u6A19\u3067\n     \u8A2D\u5B9A\u3059\u308B\u3002overflow:hidden \u306A\u7956\u5148\uFF08\u6295\u7A3F\u30AB\u30FC\u30C9\u7B49\uFF09\u306B\u30AF\u30EA\u30C3\u30D7\u3055\u308C\u306A\u3044\u3088\u3046 fixed \u3067\u6D6E\u304B\u305B\u308B\u3002\n     top \u306F\u30A2\u30F3\u30AB\u30FC\u4E0A\u7AEF-6px\u3001transform \u3067\u81EA\u8EAB\u306E\u5DE6\u4E0B\u89D2\u3092\u305D\u306E\u70B9\u306B\u5408\u308F\u305B\u308B\u3002 */\n  position: fixed;\n  left: 0;\n  top: 0;\n  transform: translate(-50%, -100%);\n  z-index: 1000;\n  display: none;\n  pointer-events: none;\n  font-family: var(--dtm-font);\n  font-size: 9px;\n  color: var(--c-black);\n  background: var(--c-white);\n  border: 2px solid var(--c-black);\n  padding: 2px 4px;\n  white-space: nowrap;\n  box-shadow: 2px 2px 0 var(--c-black);\n}\n.dtm-player-balloon::after {\n  content: \"\";\n  position: absolute;\n  bottom: -6px;\n  left: 50%;\n  transform: translateX(-50%) rotate(45deg);\n  width: 8px;\n  height: 8px;\n  background: var(--c-white);\n  border-right: 2px solid var(--c-black);\n  border-bottom: 2px solid var(--c-black);\n}\n/* \u30A2\u30A4\u30B3\u30F3\u304C\u753B\u9762\u4E0A\u7AEF\u306B\u8FD1\u304F\u4E0A\u306B\u51FA\u3059\u4F59\u767D\u304C\u7121\u3044\u5834\u5408\u306F\u4E0B\u306B\u53CD\u8EE2\u8868\u793A\u3059\u308B\uFF08positionBalloon \u304C\u4ED8\u4E0E\uFF09 */\n.dtm-player-balloon--below {\n  transform: translate(-50%, 0);\n}\n.dtm-player-balloon--below::after {\n  bottom: auto;\n  top: -6px;\n  border-right: none;\n  border-bottom: none;\n  border-left: 2px solid var(--c-black);\n  border-top: 2px solid var(--c-black);\n}\n.dtm-player-balloon--visible {\n  display: block;\n  animation: dtm-balloon-fade-in 0.1s steps(2);\n}\n.dtm-player-balloon--below.dtm-player-balloon--visible {\n  animation-name: dtm-balloon-fade-in-below;\n}\n@keyframes dtm-balloon-fade-in {\n  from { opacity: 0; transform: translate(-50%, -100%) translateY(4px); }\n  to { opacity: 1; transform: translate(-50%, -100%) translateY(0); }\n}\n@keyframes dtm-balloon-fade-in-below {\n  from { opacity: 0; transform: translate(-50%, 0) translateY(-4px); }\n  to { opacity: 1; transform: translate(-50%, 0) translateY(0); }\n}\n@keyframes dtm-emoji-jump {\n  0%   { transform: translateY(0); }\n  35%  { transform: translateY(-5px); }\n  65%  { transform: translateY(-5px); }\n  100% { transform: translateY(0); }\n}\n.dtm-player-emoji--jump {\n  animation: dtm-emoji-jump 0.18s ease-out forwards;\n}\n.dtm-player-chip {\n  font-family: 'k8x12', monospace;\n  font-size: 9px;\n  color: var(--dtm-text);\n  background: var(--dtm-border2);\n  padding: 2px 6px;\n  white-space: nowrap;\n}\n.dtm-player-body {\n  position: relative; /* \u30ED\u30FC\u30C7\u30A3\u30F3\u30B0\u30AA\u30FC\u30D0\u30FC\u30EC\u30A4\u306E\u57FA\u6E96\u3002\u30EC\u30FC\u30F3\u7FA4\u3060\u3051\u3092\u8986\u3046 */\n  display: flex;\n  flex-direction: column;\n  gap: var(--dtm-gap);\n}\n.dtm-player-lane-row {\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  gap: 6px;\n}\n.dtm-player-lane-label {\n  position: relative;\n  flex: 0 0 auto;\n  width: 16px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 2px;\n}\n.dtm-player-lane-label--btn {\n  cursor: pointer;\n  user-select: none;\n}\n.dtm-player-lane-label--btn:hover { opacity: 0.7; }\n.dtm-player-lane-label--muted { opacity: 0.3; }\n\n/* \u2500\u2500\u2500 \u30DF\u30E5\u30FC\u30C8\u8868\u793A\uFF08\u6392\u4ED6\u540C\u671F\uFF09 \u2500\u2500\u2500 */\n.dtm-player-emoji.is-muted,\n.dtm-player-lane-label.is-muted {\n  position: relative;\n}\n\n/* \u30DF\u30E5\u30FC\u30C8\u6642\u306E\u300C\u00D7\u300D\u30DE\u30FC\u30AF\u91CD\u306D\u63CF\u304D */\n.dtm-player-emoji.is-muted::before,\n.dtm-player-lane-label.is-muted::before {\n  content: \"\u00D7\";\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--dtm-danger);\n  font-family: var(--dtm-font);\n  font-size: 16px;\n  font-weight: bold;\n  z-index: 10;\n  pointer-events: none;\n  text-shadow: 1px 1px 0 var(--c-black);\n}\n\n.dtm-player-lane-label.is-muted::before {\n  font-size: 14px;\n}\n\n/* \u30DF\u30E5\u30FC\u30C8\u6642\u306E\u30A2\u30A4\u30B3\u30F3\u3084\u8981\u7D20\u306E\u8584\u6697\u5316\uFF08\u5439\u304D\u51FA\u3057\u306F\u9664\u5916\uFF09 */\n.dtm-player-emoji.is-muted > img,\n.dtm-player-emoji.is-muted > span:not(.dtm-player-balloon) {\n  opacity: 0.25;\n  filter: grayscale(80%);\n}\n\n.dtm-player-lane-label.is-muted {\n  opacity: 0.25;\n}\n\n/* \u30DF\u30E5\u30FC\u30C8\u6642\u306E\u30C8\u30E9\u30C3\u30AF\u30EC\u30FC\u30F3\uFF08\u30B9\u30AF\u30ED\u30FC\u30EB\u90E8\uFF09\u306E\u8584\u6697\u5316\u3068\u30C7\u30AB\u00D7\u30DE\u30FC\u30AF\uFF08\u8272\u5F31\u5BFE\u5FDC\uFF09 */\n.dtm-player-lane-row.is-muted::after {\n  content: \"\u00D7\";\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 22px; /* label width (16px) + gap (6px) */\n  right: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--dtm-danger);\n  font-family: var(--dtm-font);\n  font-size: 24px;\n  font-weight: bold;\n  background: rgba(0, 0, 0, 0.45);\n  z-index: 10;\n  pointer-events: none;\n  text-shadow: 1px 1px 0 var(--c-black);\n}\n.dtm-player-lane-no {\n  font-family: 'k8x12', monospace;\n  font-size: 9px;\n  color: var(--dtm-muted);\n}\n.dtm-player-lane {\n  position: relative; /* \u30C8\u30FC\u30AF\u30F3\u306E offsetParent \u3092\u30EC\u30FC\u30F3\u306B\u56FA\u5B9A\u3057\u3001\u4E2D\u592E\u5BC4\u305B\u8A08\u7B97\u3092\u6B63\u3059 */\n  flex: 1 1 auto;\n  overflow-x: auto;\n  overflow-y: hidden;\n  white-space: nowrap;\n  background: var(--c-black);\n  border: none;\n  padding: 0 6px;\n  scrollbar-width: none;\n  display: flex;\n  align-items: center;\n}\n.dtm-player-lane::-webkit-scrollbar { display: none; }\n.dtm-tk {\n  font-family: 'k8x12', monospace;\n  font-size: 12px;\n  color: var(--dtm-text);\n  flex: 0 0 auto;\n}\n.dtm-tk--rest { color: var(--dtm-muted); }\n.dtm-tk--octave,\n.dtm-tk--shift,\n.dtm-tk--length,\n.dtm-tk--ctrl { color: var(--dtm-border2); }\n.dtm-tk--lyric { color: var(--dtm-text); letter-spacing: 1px; }\n/* \u7D99\u7D9A\uFF08\u30FC / \u301C\uFF09\u306F\u300C\u8A00\u3044\u76F4\u3055\u306A\u3044\u300D\u97F3\u3002\u304B\u306A\u3088\u308A\u6DE1\u304F\u3057\u3066\u97F3\u7BC0\u306E\u5207\u308C\u76EE\u3092\u76EE\u3067\u8FFD\u3048\u308B\u3088\u3046\u306B\u3059\u308B */\n.dtm-tk--lyric-tie { color: var(--dtm-muted); }\n/* \u4FC3\u97F3\uFF08\u3063\uFF09\u30FB\u4F11\u7B26\uFF08_\uFF09\u306F\u6B4C\u308F\u306A\u3044\u30CE\u30FC\u30C8\u3002\u3055\u3089\u306B\u843D\u3068\u3057\u3066\u7121\u97F3\u3067\u3042\u308B\u3053\u3068\u3092\u793A\u3059 */\n.dtm-tk--lyric-stop,\n.dtm-tk--lyric-rest { color: var(--dtm-border2); }\n.dtm-tk--break { color: var(--dtm-muted); opacity: 0.7; margin: 0 2px; }\n.dtm-tk--meta { color: var(--dtm-border2); margin-right: 4px; }\n.dtm-tk.is-active {\n  background: var(--tk, var(--dtm-primary));\n  color: var(--c-black);\n  font-weight: bold;\n}\n\n/* \u2500\u2500\u2500 \u30B3\u30FC\u30C9\u9032\u884C\u30D7\u30EC\u30A4\u30E4\u30FC \u2500\u2500\u2500 */\n/* MML\u518D\u751F\u5C02\u7528\u30D7\u30EC\u30A4\u30E4\u30FC\uFF08.dtm-player\uFF09\u3068\u67A0\u30C7\u30B6\u30A4\u30F3\u3092\u63C3\u3048\u308B */\n.dtm-chord-player {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dtm-gap);\n  padding: var(--dtm-gap);\n  font-family: var(--dtm-font);\n  font-size: 13px;\n  letter-spacing: .06em;\n  color: var(--dtm-text);\n  background: var(--dtm-deep);\n  border: 2px solid var(--dtm-border2);\n  box-shadow: 4px 4px 0 var(--c-black);\n  image-rendering: pixelated;\n  -webkit-font-smoothing: none;\n}\n.dtm-chord-player *,\n.dtm-chord-player *::before,\n.dtm-chord-player *::after { box-sizing: border-box; }\n\n/* \u30B3\u30F3\u30C8\u30ED\u30FC\u30EB\u30D0\u30FC \u2014 MML\u518D\u751F\u5C02\u7528\u30D7\u30EC\u30A4\u30E4\u30FC\u306E .dtm-player-head \u3068\u63C3\u3048\u308B */\n.dtm-cp-ctrl {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n.dtm-cp-ctrl .dtm-player-more-container {\n  margin-left: auto;\n}\n\n/* \u30EB\u30FC\u30D7\u5207\u66FF\u30DC\u30BF\u30F3 */\n.dtm-cp-loop {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  border: 2px solid var(--dtm-border2);\n  background: var(--dtm-bg);\n  color: var(--dtm-muted);\n  cursor: pointer;\n  flex: 0 0 auto;\n}\n.dtm-cp-loop:active { transform: translate(1px,1px); }\n.dtm-cp-loop--on {\n  border-color: var(--c-black);\n  background: var(--dtm-gold);\n  color: var(--c-black);\n  box-shadow: 2px 2px 0 var(--c-black);\n}\n\n/* \u30E1\u30BF\u60C5\u5831 (BPM) */\n.dtm-cp-meta {\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: .12em;\n  color: var(--dtm-muted);\n}\n\n/* \u30B9\u30AF\u30ED\u30FC\u30EB\u30A8\u30EA\u30A2 */\n.dtm-cp-scroll {\n  position: relative;\n  max-height: 180px;\n  overflow-y: auto;\n  padding: 8px 10px 10px;\n  scrollbar-width: none;\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n}\n.dtm-cp-scroll::-webkit-scrollbar { display: none; }\n\n/* \u30BB\u30AF\u30B7\u30E7\u30F3\u898B\u51FA\u3057 \u2014 \u30BB\u30AF\u30B7\u30E7\u30F3\u8272\u306E\u5E2F\u3068\u30D4\u30AF\u30BB\u30EB\u30DE\u30FC\u30AB\u30FC */\n.dtm-cp-section {\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: .14em;\n  margin-top: 8px;\n  padding: 1px 8px 1px 5px;\n  color: var(--cp-fg, var(--dtm-text));\n  border-left: 4px solid var(--cp-fg, var(--dtm-text));\n  background: linear-gradient(90deg, var(--cp-bg, transparent), transparent);\n  align-self: flex-start;\n}\n.dtm-cp-section::before {\n  content: \"\u25A0\";\n  margin-right: 5px;\n}\n\n/* \u5C0F\u7BC0\u884C */\n.dtm-cp-bar {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 2px;\n  margin-top: 2px;\n}\n\n/* \u5C0F\u7BC0\u533A\u5207\u308A\u30D1\u30A4\u30D7 */\n.dtm-cp-pipe {\n  font-size: 13px;\n  color: rgba(255, 255, 255, 0.35);\n  font-family: var(--dtm-font);\n  font-weight: bold;\n  margin: 0 4px;\n  user-select: none;\n}\n\n/* \u30B3\u30FC\u30C9\u30BB\u30EB \u2014 \u30B2\u30FC\u30E0\u306E\u30DC\u30BF\u30F3\u98A8\u30C1\u30C3\u30D7\uFF08\u30BF\u30C3\u30D7\u3067\u305D\u3053\u304B\u3089\u518D\u751F\uFF09 */\n.dtm-cp-chord {\n  display: inline-block;\n  font-family: var(--dtm-font);\n  font-size: 12px;\n  padding: 2px 5px;\n  border: 2px solid transparent;\n  color: var(--cp-fg, var(--dtm-text));\n  background: var(--cp-bg, transparent);\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n}\n.dtm-cp-chord:not(.dtm-cp-chord--dead):hover {\n  border-color: var(--cp-fg, var(--dtm-text));\n}\n.dtm-cp-chord:not(.dtm-cp-chord--dead):active {\n  transform: translate(1px,1px);\n}\n.dtm-cp-chord:focus-visible {\n  outline: 2px solid var(--c-white);\n  outline-offset: 0;\n}\n.dtm-cp-chord--dead { cursor: default; }\n.dtm-cp-chord--played { opacity: .45; }\n.dtm-cp-chord--active {\n  border-color: var(--c-black);\n  color: var(--c-black);\n  background: var(--cp-fg, var(--dtm-primary));\n  box-shadow: 2px 2px 0 var(--c-black);\n  opacity: 1;\n}\n";
 /**
  * スタイルを document.head に一度だけ注入する。
  */
@@ -3612,4 +3958,4 @@ declare const encodeWavPCM16: (channels: Float32Array[], sampleRate: number) =>
 /** Float32Array のチャンクを1本へ連結する。 */
 declare const concatFloat32: (chunks: Float32Array[]) => Float32Array;
 
-export { A4_HZ, A4_UNITS, type AddNoteOptions, type AnyDrumPattern, type ApplyChordOptions, BREATH_MARK, type Band, CENTS_PER_UNIT, COMPOSE_KEYS, COMPOSE_MOOD_GROUPS, CORPUS_BANDS, CORPUS_SIZE, type ChordPatternType, type ChordPlacement, type ChordPlayerInstance, type ComposeKeyTarget, type ComposeMoodGroup, type ComposeMoodId, type ComposeOptions, type ComposeResult, type ComposeStats, type ComposedNote, type ConsumedSyllable, type CoreEventHandlers, type CustomVocalDef, DAW_CSS, DEFAULT_BPM, DEFAULT_EDO, DEFAULT_GATE, DEFAULT_PAN, DEFAULT_PLAYBACK_VELOCITY, DEFAULT_SECTIONS, DEFAULT_STEPS_PER_BAR, DEFAULT_VELOCITY, DEFAULT_VOCAL_VOLUME, DRUM_FONT, DRUM_KEYS, DRUM_PATTERNS, type DawInstance, type DawMode, type DawOptions, type DawViewState, type DrumPattern, type DrumPatternDef, type DtmStudio, type DtmStudioEngines, type DtmStudioOptions, EDO31_NAMES, type Edo, type ExportMidiOptions, FADE_IN_MARK, FADE_OUT_MARK, type FadeScheduleParams, GLOBAL_STORAGE_KEYS, GM_INSTRUMENT_NAMES, type GlobalStorageKey, INSTRUMENT_PRESETS, type InstrumentPreset, KEY_COUNT, KOE_BASE_URL, KOE_VOICEBANKS, KOE_VOICEBANK_LABELS, KOE_VOICEBANK_TERMS, type KeyMode, type KoeVoiceOptions, LinkedList, type LoopConfig, type LoopPoint, type LyricSyllable, type LyricSyllableKind, type LyricSyncData, type LyricTrack, type LyricsConductor, MACRO_STORAGE_KEYS, MAJOR_KEY_IDS, MAX_VOCAL_VOLUME, MICRO_STEP, MINOR_KEY_IDS, MMLCore, type MMLDisplayToken, type MMLNotePlacement, MML_END_MARKER, type MacroStorageKey, type MetricNote, type MetricOptions, type MidiExtraction, type MidiNote, type MidiNotePlacement, MidiSearchClient, type MidiSearchConfig, type MidiTrackAnalysis, type MmlMeta, type MmlPlayback, type MmlPlayerInstance, type MmlPlayerOptions, type ModeSwitchInstance, type ModeSwitchOptions, type MountChordPlayerOptions, type MountEditorOptions, type MountPlayerOptions, type Note, type NoteData, type NoteRemove, type OctaveUnisonMode, PITCH_ENCODING_VERSION, PITCH_MAP, PITCH_RANGE_END, PITCH_RANGE_START, PORTAMENTO_MARK, PREWARM_NOTES, type ParseMMLOptions, type ParseMidiFn, type ParsedMML, type PianoRollInstance, type PianoRollOptions, type PicotuneSearchParams, type PicotuneSong, type PitchSegment, type PitchToken, type PlacedSection, type PlayChordsOptions, type PlayDrumEvent, type PlayMmlOptions, type PlayNoteEvent, type PlayNoteOptions, type PlayPlacementsOptions, type PlaySingingMmlOptions, type PlaybackCue, type PlaybackState, type PresetSelectInstance, type PresetSelectOptions, type PreviewSoundCallback, REST_MARK, type RenderConfig, type Renderer, type ResolvedComposeKey, SECTION_LABELS, SECTION_ORDER, SECTION_SPECS, STOP_MARK, type SectionKind, type SectionSpec, type Sequencer, type SequencerOptions, type SequencerTrack, type SingingVoices, type SingingVoicesOptions, type StreamPlaybackOptions, type StreamVoiceNote, type StreamVoiceNoteOptions, type StreamVoiceTrack, type StructureFeatures, type Synth, TIE_MARK, TIE_MERGE_MAX_SEC, TRACKS_ADVANCED, TRACKS_SIMPLE, type TensionFeatures, type TieSourceNote, type ToolMode, type TrackConfig, UNITS_PER_EDO31_DEGREE, UNITS_PER_OCTAVE, UNITS_PER_SEMITONE, type Units, VIBRATO_MIN_SEC, VOICE_IMAGES, VOICE_IMAGE_KEY, type VoiceExpression, type VoiceModel, type VoiceRegistry, addUnits, analyzeMidiTracks, applyHarmonicFilter, applyMonophonic, band, buildChordPlacements, buildDrumPatternJson, buildNameToKeyMapping, buildSectionPlan, buildStreamVoiceNotes, chromaticStep, collectPitchTokens, complementarity, composeSong, concatFloat32, createAudioContext, createDtmStudio, createKlattVoice, createKoeVoice, createLyricsConductor, createPianoRoll, createRenderer, createSequencer, createSingingVoices, createSynth, createVoiceRegistry, decodeMml, decomposeToMonophonic, displayKana, durationEntropy, encodeMml, encodeWavPCM16, exportMIDI, extractDrumPatternFromNotes, extractMidiDrumPattern, extractMidiPlacements, extractMidiPlacementsByTrack, featureDistance, featureVector, fifthToStep, fifthToUnits, formatMmlMeta, freqFromPitch, generateRandomPattern, getComposeKeyDescription, getDrumPatternKeys, getMidiBPM, icon, injectStyles, isChordHeavyTrack, isNaturalLetter, isPlausibleMidiTranscription, isValidHttpUrl, keyCountFor, koeUrl, midiNote, midiToUnits, mountChordPlayer, mountDAW, mountMmlPlayer, naturalStep, normalizeDrumPatterns, normalizeLyrics, panToStereo, parseCustomVocals, parseLyrics, parseMML, parseMmlMeta, pitchV1ToUnits, playChords, playMML, playNote, playPlacements, playSingingMML, readGlobalBool, readGlobalNumber, readGlobalSetting, readMacroSections, readMacroSetting, resolveComposeKey, resolveDrumPattern, resolveLoopPoint, semitonesToUnits, shiftNotes, showLoadingOverlay, spelledToUnits, spellingToUnits, stripCustomVocals, stripLyrics, stripMmlMeta, structureFeatures, syllablesToText, tensionFeatures, transposeNotes, units, unitsPerRow, unitsPerStep, unitsToHz, unitsToMidi, unitsToMidiDetune, unitsToPitchV1, vocalVolumeToGain, writeGlobalSetting, writeMacroSections, writeMacroSetting };
+export { A4_HZ, A4_UNITS, type AddNoteOptions, type AnyDrumPattern, type ApplyChordOptions, BLUES_SCALE, BREATH_MARK, type Band, CENTS_PER_UNIT, COMPOSE_KEYS, COMPOSE_MOOD_GROUPS, COMPOSE_SCALES, COMPOSE_SCALE_IDS, CORPUS_BANDS, CORPUS_SIZE, type ChordPatternType, type ChordPlacement, type ChordPlayerInstance, type ComposeKeyTarget, type ComposeMoodGroup, type ComposeMoodId, type ComposeOptions, type ComposeResult, type ComposeScale, type ComposeScaleId, type ComposeStats, type ComposedNote, type ConsumedSyllable, type CoreEventHandlers, type CustomVocalDef, DAW_CSS, DEFAULT_BPM, DEFAULT_EDO, DEFAULT_GATE, DEFAULT_PAN, DEFAULT_PLAYBACK_VELOCITY, DEFAULT_SECTIONS, DEFAULT_STEPS_PER_BAR, DEFAULT_VELOCITY, DEFAULT_VOCAL_VOLUME, DRUM_FONT, DRUM_KEYS, DRUM_PATTERNS, type DawInstance, type DawMode, type DawOptions, type DawViewState, type DrumPattern, type DrumPatternDef, type DtmStudio, type DtmStudioEngines, type DtmStudioOptions, EDO31_NAMES, type Edo, type ExportMidiOptions, type ExportMidiTrack, FADE_IN_MARK, FADE_OUT_MARK, type FadeScheduleParams, GLOBAL_STORAGE_KEYS, GM_BRIGHT_CEILING, GM_INSTRUMENT_NAMES, GM_INSTRUMENT_RANGE, type GlobalStorageKey, HARMONIC_MINOR_SCALE, HUNGARIAN_SCALE, INSTRUMENT_PRESETS, type InstrumentPreset, KEY_COUNT, KOE_BASE_URL, KOE_VOICEBANKS, KOE_VOICEBANK_LABELS, KOE_VOICEBANK_TERMS, type KeyMode, type KoeVoiceOptions, LinkedList, type LoopConfig, type LoopPoint, type LyricSyllable, type LyricSyllableKind, type LyricSyncData, type LyricTrack, type LyricsConductor, MACRO_STORAGE_KEYS, MAJOR_KEY_IDS, MAJOR_SCALE, MAX_VOCAL_VOLUME, MICRO_STEP, MINOR_KEY_IDS, MMLCore, type MMLDisplayToken, type MMLNotePlacement, MML_END_MARKER, type MacroStorageKey, type MetricNote, type MetricOptions, type MidiExtraction, type MidiNote, type MidiNotePlacement, MidiSearchClient, type MidiSearchConfig, type MidiTrackAnalysis, type MmlMeta, type MmlPlayback, type MmlPlayerInstance, type MmlPlayerOptions, type ModeSwitchInstance, type ModeSwitchOptions, type MountChordPlayerOptions, type MountEditorOptions, type MountPlayerOptions, type Note, type NoteData, type NoteRemove, type OctaveUnisonMode, PITCH_ENCODING_VERSION, PITCH_MAP, PITCH_RANGE_END, PITCH_RANGE_START, PORTAMENTO_MARK, PREWARM_NOTES, type ParseMMLOptions, type ParseMidiFn, type ParsedMML, type PianoRollInstance, type PianoRollOptions, type PicotuneSearchParams, type PicotuneSong, type PitchSegment, type PitchToken, type PlacedSection, type PlayChordsOptions, type PlayDrumEvent, type PlayMmlOptions, type PlayNoteEvent, type PlayNoteOptions, type PlayPlacementsOptions, type PlaySingingMmlOptions, type PlaybackCue, type PlaybackState, type PresetSelectInstance, type PresetSelectOptions, type PreviewSoundCallback, REST_MARK, type RenderConfig, type Renderer, type ResolvedComposeKey, SECTION_LABELS, SECTION_ORDER, SECTION_SPECS, STOP_MARK, type ScaleDegree, type SectionKind, type SectionSpec, type Sequencer, type SequencerOptions, type SequencerTrack, type SingingVoices, type SingingVoicesOptions, type StreamPlaybackOptions, type StreamVoiceNote, type StreamVoiceNoteOptions, type StreamVoiceTrack, type StructureFeatures, type Synth, TIE_MARK, TIE_MERGE_MAX_SEC, TRACKS_ADVANCED, TRACKS_SIMPLE, type TensionFeatures, type TieSourceNote, type TonicCenter, type TonicDegree, type ToolMode, type TrackConfig, UNITS_PER_EDO31_DEGREE, UNITS_PER_OCTAVE, UNITS_PER_SEMITONE, type Units, VIBRATO_MIN_SEC, VOICE_IMAGES, VOICE_IMAGE_KEY, type VoiceExpression, type VoiceModel, type VoiceRegistry, addUnits, analyzeMidiTracks, applyHarmonicFilter, applyMonophonic, band, buildChordPlacements, buildDrumPatternJson, buildNameToKeyMapping, buildSectionPlan, buildStreamVoiceNotes, chromaticStep, collectPitchTokens, complementarity, composeSong, concatFloat32, createAudioContext, createDtmStudio, createKlattVoice, createKoeVoice, createLyricsConductor, createPianoRoll, createRenderer, createSequencer, createSingingVoices, createSynth, createVoiceRegistry, decodeMml, decomposeToMonophonic, displayKana, durationEntropy, encodeMml, encodeWavPCM16, exportMIDI, extractDrumPatternFromNotes, extractMidiDrumPattern, extractMidiPlacements, extractMidiPlacementsByTrack, featureDistance, featureVector, fifthToStep, fifthToUnits, fitInstrumentOctave, formatMmlMeta, freqFromPitch, generateRandomPattern, getComposeKeyDescription, getComposeScaleDescription, getDrumPatternKeys, getMidiBPM, icon, injectStyles, isChordHeavyTrack, isNaturalLetter, isPlausibleMidiTranscription, isValidHttpUrl, keyCountFor, koeUrl, midiNote, midiToUnits, mountChordPlayer, mountDAW, mountMmlPlayer, naturalStep, normalizeDrumPatterns, normalizeLyrics, panToStereo, parseCustomVocals, parseLyrics, parseMML, parseMmlMeta, pitchV1ToUnits, playChords, playMML, playNote, playPlacements, playSingingMML, programOfInstrumentName, readGlobalBool, readGlobalNumber, readGlobalSetting, readMacroSections, readMacroSetting, resolveCenter, resolveComposeKey, resolveComposeScale, resolveDrumPattern, resolveLoopPoint, scaleDegrees, scaleSize, semitonesToUnits, shiftNotes, showLoadingOverlay, spelledToUnits, spellingToUnits, stripCustomVocals, stripLyrics, stripMmlMeta, structureFeatures, syllablesToText, tensionFeatures, transposeNotes, units, unitsPerRow, unitsPerStep, unitsToHz, unitsToMidi, unitsToMidiDetune, unitsToPitchV1, vocalVolumeToGain, writeGlobalSetting, writeMacroSections, writeMacroSetting };