@onjmin/dtm 2.1.9 → 2.1.11

package/dist/index.d.ts

@@ -414,6 +414,209 @@ declare const featureVector: (f: {
 /** 特徴ベクトル間のユークリッド距離。 */
 declare const featureDistance: (a: number[], b: number[]) => number;
 
+/**
+ * 作曲で使う音階の定義。
+ *
+ * ## なぜ「中核音」と「主音の位置」だけで足りるのか
+ *
+ * `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メロ・落ちサビ・間奏・アウトロ）。
  *
@@ -538,13 +741,29 @@ declare const buildSectionPlan: (kinds: SectionKind[], templateName?: string) =>
  * ## 引いて、測って、選ぶ
  *
  * {@link DRAW_COUNT} 本の候補を独立に引き、{@link HARD} に触れたものだけを捨てて、
- * 残りから点数最大のものを返す（{@link evaluate}）。合否ではなく点数にしてあるのは
- * 「構造は良いが休符率が 0.09 だったので捨てる」を避けるため。
+ * 残りから**確率的に**引く（{@link evaluate}・{@link SELECT_TEMPERATURE}）。合否ではなく
+ * 点数にしてあるのは「構造は良いが休符率が 0.09 だったので捨てる」を避けるため。
+ * 最大値を必ず取っていた頃は、**引く本数を増やすほど分布が狭まっていた**——
+ * 順次進行の幅が 0.25〜0.86（1本）→ 0.32〜0.65（40本）と、採点式の頂点1点へ収束する。
  *
  * 採点の目標帯（{@link CORPUS_BANDS}）は**人間が書いたMIDIから実測した分布**で、手で
- * 決めた定数ではない。較正は `scripts/calibrate-corpus.ts`。帯の内側にも中央値へ向かう
- * 傾斜を付けてある（`centeredBand`）——周辺分布を一律に満点にすると、全項目が帯の端へ
- * 同時に寄った曲（スカスカで跳ねてばかりの曲）も満点を取れてしまう。
+ * 決めた定数ではない。較正は `scripts/calibrate-corpus.ts`。
+ *
+ * ## 「中央値へ寄せる」のをやめた理由
+ *
+ * 以前は帯の内側にも中央値へ向かう傾斜を付けていた（`centeredBand`）。全項目が帯の端へ
+ * 同時に寄った曲を弾くためだったが、**目標帯は21項目を独立に採った周辺分布**なので、
+ * その中央値は「どの曲でもない平均的な一点」でしかない。コーパス91本を自分の帯で
+ * 測り直すと、人間の曲は中央値で**10項目が帯の外**にあり、素点の中央値は 0.673——
+ * **生成物（0.851）のほうが較正元より高い点を取っていた**。選抜を完全に切っても
+ * 生成物 0.970 対 人間 0.921 で、選抜ではなく採点式そのものが中央を報酬にしていた。
+ *
+ * そこで周辺分布の項目は「人間の範囲に居るか」の確認だけに格下げし（`plausibleBand`）、
+ * 「人間が書いた曲の形か」の判断は**項目の組み合わせ**——コーパス91本のうち
+ * **いちばん近い1曲との距離**（`nearestProfileDistance`、重み `typicality`）——へ渡した。
+ * 中央から離れることではなく、**人が1本も居ない場所に居ること**を罰する形にしてある。
+ * さらに、人間の曲が普通いくつの軸を外すかを実測して {@link DEVIATION_BUDGET} とし、
+ * その本数だけは減点を見逃す。検算は `scripts/check-evaluator.ts`。
  *
  * 指標に最適化した結果として全曲が同じ統計値へ寄るのを防ぐため、直近に作った曲との
  * 距離も加点する（{@link ComposeOptions.recent}）。
@@ -556,6 +775,33 @@ declare const buildSectionPlan: (kinds: SectionKind[], templateName?: string) =>
  * 前後を比べる。耳で確かめるときは `scripts/export-samples.ts` で .mid を書き出す。
  */
 
+/**
+ * 曲の**展開の仕方**。
+ *
+ * - `motif` … 2小節のモチーフを反復・セクエンツ・オクターブ上げの3通りに変形して
+ *   展開する。J-POPの歌モノの作り。
+ * - `ostinato` … **同じ型を曲全体で回す。**変形しない。対比は編曲（ドラム・楽器・
+ *   レイヤ）の側が担う。
+ * - `through` … **通し作曲。**同じ楽句を再現せず、書き進める。
+ *   反復が戻ってこない側の作り。
+ *
+ * ## なぜ要るか
+ *
+ * 初版は `motif` しか無く、しかも小節の役割が**セクション種別で決め打ち**だった
+ * （サビは必ず `climax` ＝オクターブ上げ、それ以外はほぼ `sequence`）。その結果、
+ * 生成系の反復プロファイルが**上にも下にも詰まった**狭い帯に固定されていた。
+ *
+ *   自己相似 sim1 の生成系レンジ 0.31〜0.76／sim4 0.58〜0.86
+ *
+ * 実測（`scripts/compare-reach.ts`）で、採点を完全に切って1500本引いても
+ * コーパス91本のうち27本へ到達できず、**その原因の1位が sim4/sim8 の各19本**だった。
+ * 通し作曲（低い側）にも静的なリフ（高い側・ヤツメ穴の sim1 は 0.97）にもなれない。
+ * 採点式をどう直してもこれは出ないので、生成の型そのものを増やす。
+ *
+ * `ostinato` を入れて上限を開けた後も、未到達26本の原因1位は依然 sim系だった
+ * （下側が空いたまま）。そこで `through` を足して反復の**下限**も開けている。
+ */
+type MelodyForm = "motif" | "ostinato" | "through";
 type ComposedNote = {
     startStep: number;
     pitchUnits: Units;
@@ -636,6 +882,17 @@ type ComposeOptions = {
      * 省略時は "any"（全24調からランダム抽選）。
      */
     baseKey?: string;
+    /**
+     * 展開の仕方（`"auto"` | `"motif"` | `"ostinato"`）。省略時は `"auto"` で曲ごとに引く。
+     * `"ostinato"` は同じ型を曲全体で回すリフ主体の作り。{@link MelodyForm}
+     */
+    form?: string;
+    /**
+     * 音階の指定（`"auto"` | `"any"` | 音階ID）。省略時は `"auto"` で、
+     * ベース調の長短に合わせて陽音階（長調）／民謡音階（短調）を使う——
+     * **つまり指定しなければ以前と同じ曲が出る**。{@link COMPOSE_SCALES}
+     */
+    scale?: string;
 };
 type ComposeResult = {
     /** 伴奏トラック用のコード進行文字列。`buildChordPlacements` へそのまま渡せる。 */
@@ -652,6 +909,12 @@ type ComposeResult = {
     keyName: string;
     /** 曲の調の表示ラベル（例: "ハ長調 (C)", "イ短調 (Am)"）。 */
     keyLabel: string;
+    /** 曲の音階の識別子（例: "yo", "ryukyu"）。{@link COMPOSE_SCALES} */
+    scaleId: ComposeScaleId;
+    /** 曲の音階の表示ラベル（例: "琉球音階"）。 */
+    scaleLabel: string;
+    /** 曲の展開の仕方。{@link MelodyForm} */
+    form: MelodyForm;
     /** 雰囲気カテゴリのラベル（該当する場合）。 */
     moodLabel?: string;
     /** 曲のテンポ（BPM）。 */
@@ -682,6 +945,17 @@ type ComposeResult = {
     octave: ComposedNote[];
     /** コードパッド。ストリングス/シンセパッド的なロングトーン。Bメロ以降で鳴る。 */
     pad: ComposedNote[];
+    /**
+     * 間奏の器楽ソロ。**間奏の小節にしか音が入らない**ので、専用トラックへ
+     * そのまま書き込めば、その1本だけ別の楽器（ギターソロ等）に割り当てられる。
+     * 歌メロと同時には鳴らない（歌が休む場所を引き取る声部）。
+     */
+    solo: ComposedNote[];
+    /**
+     * 上級者モードの編曲プラン。どの層をどのセクションでどの奏法で鳴らすか。
+     * {@link ArrangePlan}
+     */
+    arrange: ArrangePlan;
     stats: ComposeStats;
 };
 /** 音価のシャノンエントロピー（bit）。全部同じ音価なら 0 になる。 */
@@ -720,6 +994,66 @@ type VocalPlan = {
     /** 主旋律のオクターブ下を重ねるか（ハモリではなく厚みの層）。 */
     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 = {
     /**
@@ -2509,8 +2843,97 @@ type InstrumentPreset = {
     submelody: string;
     bass: string;
     chord: string;
+    /**
+     * 間奏のソロを弾く楽器。**歌が休んでいる場所を担当する**ので、`melody` と
+     * 同じでも構わない（ロックの間奏がボーカルと同じ歪みギターなのは正しい）。
+     * 逆に、ここを持たせないと間奏が「伴奏だけの空白」になる。
+     */
+    solo: string;
+    /**
+     * サビでだけ重ねる楽器。主旋律のオクターブ上に薄く足して、サビの手前と
+     * 音色そのものを変える。1トラック1楽器という制約の下で
+     * 「セクションで楽器が変わる」を作る唯一の方法が、**セクションごとに
+     * 別トラックへ書き分けること**。
+     */
+    chorusLead: string;
+    /**
+     * 伴奏の2色目。**同じ進行を別の奏法で鳴らす層を、別の音色にするため**にある。
+     *
+     * 上級者モードは伴奏を t7〜t9 の3本に書き分けていて、奏法（`ChordPatternType`）は
+     * 実際に別のリズムになっている——発音位置の一致は中央 Jaccard 0.13、ほぼ完全一致は
+     * 4%しかない。にもかかわらず**t6〜t10 の5本すべてが `chord` の1楽器**だったため、
+     * せっかく書き分けた層が同じ音色で重なって団子になっていた。
+     * `chord` と喧嘩しない、かつ他のスロットと被らないものを選ぶこと。
+     */
+    chordAlt: string;
+    /**
+     * ウワモノ（装飾）の楽器。高い位置で薄く鳴らす、きらびやかな音。
+     * ここも以前は `chord` を使い回していた。
+     */
+    sparkle: string;
+    /**
+     * ベースの2色目。**セクションでベースの音色を替える**ために使う。
+     * t4 が静かな側、t5 が盛り上がる側を持ち、**同じ音を二度鳴らさずに**
+     * 境目で音色だけが入れ替わる。`bass` と喧嘩しない同族を選ぶこと。
+     */
+    bassAlt: string;
+    /**
+     * ハモリの2色目。同じくセクションで音色を替えるため（t2 が静かな側、
+     * t12 が盛り上がる側）。ハモリは声部なので、声もの・柔らかい持続音が合う。
+     */
+    harmonyAlt: 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;
 
 /**
  * 操作履歴を管理するための双方向連結リスト
@@ -2543,13 +2966,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";
 };
@@ -3534,7 +3958,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 に一度だけ注入する。
  */
@@ -3580,7 +4004,7 @@ type Synth = {
 type SynthTone = {
     /** オシレータ波形。既定 "square" */
     wave?: OscillatorType;
-    /** アタック秒（0 で即時立ち上がり）。既定 0 */
+    /** アタック秒（0 でも {@link MIN_ATTACK_SEC} だけは掛かる）。既定 0 */
     attack?: number;
     /** true でピアノ/ギター的な指数減衰（持続音でなく減衰音になる） */
     decay?: boolean;
@@ -3610,4 +4034,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, type ExportMidiTrack, 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, programOfInstrumentName, 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 MelodyForm, 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 };