@onjmin/dtm 0.1.75 → 0.1.76

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +3 -2
  2. package/dist/index.d.mts +1 -1
  3. package/dist/index.d.ts +1 -1
  4. package/dist/index.js +42 -40
  5. package/dist/index.mjs +42 -40
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -66,6 +66,7 @@ const bgm = playMML("@0 t120 o5 l8 ccggaag4 ffeeddc4", {
66
66
  volume: 70,
67
67
  });
68
68
  bgm.setVolume(50);
69
+ ```
69
70
 
70
71
  ```ts
71
72
  const chordPlayer = studio.mountChordPlayer(chordEl, "| C | G | Am | F |", {
@@ -87,7 +88,7 @@ chordPlayer.setVolume(65);
87
88
  | `playChords(chordStr, options)` | 不要 | 非対応 | `MmlPlayback` | コード進行のヘッドレス再生。`"\| C \| G \| Am \| F \|"` などの文字列からアルペジオ等の伴奏音を鳴らす。 |
88
89
  | `playNote(options)` | 不要 | 非対応 | `void` | 簡易単音発音。SE や音高確認のためのテスト発音。 |
89
90
  | `mountMmlPlayer(target, mml, options)` | **必要** | **対応** | `MmlPlayerInstance` | 再生専用 UI ビュー。トークン帯のハイライト、オートスクロール、歌声キャラクター表示を含む埋め込みプレイヤー。 |
90
- | `mountChordPlayer(target, chordStr, options)` | **必要** | 非対応 | `MmlPlayerInstance` | コード進行再生専用 UI コンポーネント。コードネーム表示と試聴操作。 |
91
+ | `mountChordPlayer(target, chordStr, options)` | **必要** | 非対応 | `ChordPlayerInstance` | コード進行再生専用 UI コンポーネント。コードネーム表示と試聴操作。 |
91
92
  | `createDtmStudio()` / `mountEditor` | **必要** | **対応** | `DtmStudio` / `DawInstance` | フル機能ピアノロールエディタ UI。SoundFont 演奏、マウス打ち込み編集、歌声合成、録音機能を提供。 |
92
93
 
93
94
  ---
@@ -345,7 +346,7 @@ const cp = mountChordPlayer(document.getElementById("chord-app"), "| C | G | Am
345
346
 
346
347
  - モデルに `klatt` を指定すると内蔵フォルマント合成（音源ロード不要）。
347
348
  - 内蔵 UTAU 音源（@onjmin/koe）キーワード:
348
- `tsukuyomi` / `rino` / `roze` / `ruko_male` / `ruko_female` / `teto` / `shiyo`。
349
+ `tsukuyomi` / `rino` / `roze` / `ruko_male` / `ruko_female` / `teto` / `shiyo` / `rei` / `mgroid` / `motroid` / `nynroid`。
349
350
  - `createDtmStudio` を使えば歌声は自動で配線されます。低レベル API で使う場合は
350
351
  `createSingingVoices` の戻り値を `mountDAW` / `mountMmlPlayer` の `singingVoices` に渡してください。
351
352
 
package/dist/index.d.mts CHANGED
@@ -1875,7 +1875,7 @@ declare const createDtmStudio: (options?: DtmStudioOptions) => Promise<DtmStudio
1875
1875
  * ドット絵・レトロゲーム風ピクセルアートデザイン（美咲フォント・角なし・ハードシャドウ）。
1876
1876
  * モバイルファースト（狭幅基準）で設計し、min-width メディアクエリで広幅に拡張する。
1877
1877
  */
1878
- 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\u306F document.body \u76F4\u4E0B\u3078\u91CD\u306D\u308B\u305F\u3081\u3001\n .dtm-daw \u306E\u5916\u306B\u51FA\u308B\u3002\u3053\u308C\u3089\u3082\u540C\u69D8\u306B\u30C8\u30FC\u30AF\u30F3\u3092\u4F9B\u7D66\u3057\u306A\u3044\u3068\u9ED2\u5730\u30FB\u767D\u6587\u5B57\u306B\u306A\u308B\u3002 */\n.dtm-daw,\n.dtm-controlbar,\n.dtm-modal-overlay,\n.dtm-consent-overlay,\n.dtm-chord-player {\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.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.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: 3px;\n}\n.dtm-pill {\n --dtm-pill-color: var(--dtm-primary);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 1 1 0;\n min-width: 0;\n height: 26px;\n padding: 0;\n border: 2px solid var(--c-black);\n background: color-mix(in srgb, var(--dtm-pill-color) 40%, black);\n color: var(--c-white);\n font-family: var(--dtm-font);\n font-size: 11px;\n font-weight: bold;\n cursor: pointer;\n box-shadow: 2px 2px 0 var(--c-black);\n opacity: 0.7;\n}\n/* \u30A2\u30AF\u30C6\u30A3\u30D6\u9078\u629E = \u4E0D\u900F\u660E + \u91D1\u67A0 */\n.dtm-pill--active {\n opacity: 1;\n border-color: var(--dtm-gold);\n box-shadow: 0 0 0 1px var(--dtm-gold), 2px 2px 0 var(--c-black);\n}\n.dtm-pill:not(.dtm-pill--active):active { transform: translate(2px,2px); 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 background: color-mix(in srgb, var(--dtm-pill-color) 85%, white);\n transition: background 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 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\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 \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\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-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 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.dtm-player-seek::-webkit-slider-runnable-track {\n height: 6px;\n background: var(--dtm-border2);\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::-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 position: absolute;\n bottom: calc(100% + 6px);\n left: 50%;\n transform: translateX(-50%);\n z-index: 100;\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.dtm-player-balloon--visible {\n display: block;\n animation: dtm-balloon-fade-in 0.1s steps(2);\n}\n@keyframes dtm-balloon-fade-in {\n from { opacity: 0; transform: translateX(-50%) translateY(4px); }\n to { opacity: 1; transform: translateX(-50%) 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.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.dtm-chord-player {\n font-family: var(--dtm-font);\n font-size: 13px;\n letter-spacing: .06em;\n color: var(--dtm-text);\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-border),\n 4px 4px 0 var(--c-black);\n overflow: hidden;\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 */\n.dtm-cp-ctrl {\n display: flex;\n align-items: center;\n gap: var(--dtm-gap);\n padding: 6px 8px;\n background: var(--dtm-deep);\n border-bottom: 2px solid var(--c-black);\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 / \u6642\u9593) */\n.dtm-cp-meta {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: .12em;\n color: var(--dtm-muted);\n}\n.dtm-cp-time {\n margin-left: auto;\n font-size: 11px;\n font-family: var(--dtm-font);\n color: var(--dtm-muted);\n letter-spacing: .1em;\n}\n\n/* \u30D7\u30ED\u30B0\u30EC\u30B9\u30D0\u30FC \u2014 \u30C9\u30C3\u30C8\u7D75\u98A8\u306E\u30BB\u30B0\u30E1\u30F3\u30C8\u5857\u308A\u3002\u30AF\u30EA\u30C3\u30AF\u3067\u30B7\u30FC\u30AF */\n.dtm-cp-progress {\n height: 14px;\n background: var(--dtm-deep);\n border-bottom: 2px solid var(--c-black);\n cursor: pointer;\n}\n.dtm-cp-progress-fill {\n height: 100%;\n width: 0%;\n background: repeating-linear-gradient(\n 90deg,\n var(--dtm-primary) 0, var(--dtm-primary) 6px,\n var(--c-navy) 6px, var(--c-navy) 8px\n );\n}\n.dtm-cp-progress-fill--on { border-right: 2px solid var(--c-white); }\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";
1878
+ 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\u306F document.body \u76F4\u4E0B\u3078\u91CD\u306D\u308B\u305F\u3081\u3001\n .dtm-daw \u306E\u5916\u306B\u51FA\u308B\u3002\u3053\u308C\u3089\u3082\u540C\u69D8\u306B\u30C8\u30FC\u30AF\u30F3\u3092\u4F9B\u7D66\u3057\u306A\u3044\u3068\u9ED2\u5730\u30FB\u767D\u6587\u5B57\u306B\u306A\u308B\u3002 */\n.dtm-daw,\n.dtm-controlbar,\n.dtm-modal-overlay,\n.dtm-consent-overlay,\n.dtm-chord-player {\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.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.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: 3px;\n}\n.dtm-pill {\n --dtm-pill-color: var(--dtm-primary);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 1 1 0;\n min-width: 0;\n height: 26px;\n padding: 0;\n border: 2px solid var(--c-black);\n background: color-mix(in srgb, var(--dtm-pill-color) 40%, black);\n color: var(--c-white);\n font-family: var(--dtm-font);\n font-size: 11px;\n font-weight: bold;\n cursor: pointer;\n box-shadow: 2px 2px 0 var(--c-black);\n opacity: 0.7;\n}\n/* \u30A2\u30AF\u30C6\u30A3\u30D6\u9078\u629E = \u4E0D\u900F\u660E + \u91D1\u67A0 */\n.dtm-pill--active {\n opacity: 1;\n border-color: var(--dtm-gold);\n box-shadow: 0 0 0 1px var(--dtm-gold), 2px 2px 0 var(--c-black);\n}\n.dtm-pill:not(.dtm-pill--active):active { transform: translate(2px,2px); 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 background: color-mix(in srgb, var(--dtm-pill-color) 85%, white);\n transition: background 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 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\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 \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\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-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 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.dtm-player-seek::-webkit-slider-runnable-track {\n height: 6px;\n background: var(--dtm-border2);\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::-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 position: absolute;\n bottom: calc(100% + 6px);\n left: 50%;\n transform: translateX(-50%);\n z-index: 100;\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.dtm-player-balloon--visible {\n display: block;\n animation: dtm-balloon-fade-in 0.1s steps(2);\n}\n@keyframes dtm-balloon-fade-in {\n from { opacity: 0; transform: translateX(-50%) translateY(4px); }\n to { opacity: 1; transform: translateX(-50%) 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.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.dtm-chord-player {\n font-family: var(--dtm-font);\n font-size: 13px;\n letter-spacing: .06em;\n color: var(--dtm-text);\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-border),\n 4px 4px 0 var(--c-black);\n overflow: hidden;\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 */\n.dtm-cp-ctrl {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--dtm-gap);\n padding: 6px 8px;\n background: var(--dtm-deep);\n border-bottom: 2px solid var(--c-black);\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 / \u6642\u9593) */\n.dtm-cp-meta {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: .12em;\n color: var(--dtm-muted);\n}\n.dtm-cp-time {\n margin-left: auto;\n font-size: 11px;\n font-family: var(--dtm-font);\n color: var(--dtm-muted);\n letter-spacing: .1em;\n}\n\n/* \u30D7\u30ED\u30B0\u30EC\u30B9\u30D0\u30FC \u2014 \u30C9\u30C3\u30C8\u7D75\u98A8\u306E\u30BB\u30B0\u30E1\u30F3\u30C8\u5857\u308A\u3002\u30AF\u30EA\u30C3\u30AF\u3067\u30B7\u30FC\u30AF */\n.dtm-cp-progress {\n height: 14px;\n background: var(--dtm-deep);\n border-bottom: 2px solid var(--c-black);\n cursor: pointer;\n}\n.dtm-cp-progress-fill {\n height: 100%;\n width: 0%;\n background: repeating-linear-gradient(\n 90deg,\n var(--dtm-primary) 0, var(--dtm-primary) 6px,\n var(--c-navy) 6px, var(--c-navy) 8px\n );\n}\n.dtm-cp-progress-fill--on { border-right: 2px solid var(--c-white); }\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";
1879
1879
  /**
1880
1880
  * スタイルを document.head に一度だけ注入する。
1881
1881
  */
package/dist/index.d.ts CHANGED
@@ -1875,7 +1875,7 @@ declare const createDtmStudio: (options?: DtmStudioOptions) => Promise<DtmStudio
1875
1875
  * ドット絵・レトロゲーム風ピクセルアートデザイン（美咲フォント・角なし・ハードシャドウ）。
1876
1876
  * モバイルファースト（狭幅基準）で設計し、min-width メディアクエリで広幅に拡張する。
1877
1877
  */
1878
- 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\u306F document.body \u76F4\u4E0B\u3078\u91CD\u306D\u308B\u305F\u3081\u3001\n .dtm-daw \u306E\u5916\u306B\u51FA\u308B\u3002\u3053\u308C\u3089\u3082\u540C\u69D8\u306B\u30C8\u30FC\u30AF\u30F3\u3092\u4F9B\u7D66\u3057\u306A\u3044\u3068\u9ED2\u5730\u30FB\u767D\u6587\u5B57\u306B\u306A\u308B\u3002 */\n.dtm-daw,\n.dtm-controlbar,\n.dtm-modal-overlay,\n.dtm-consent-overlay,\n.dtm-chord-player {\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.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.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: 3px;\n}\n.dtm-pill {\n --dtm-pill-color: var(--dtm-primary);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 1 1 0;\n min-width: 0;\n height: 26px;\n padding: 0;\n border: 2px solid var(--c-black);\n background: color-mix(in srgb, var(--dtm-pill-color) 40%, black);\n color: var(--c-white);\n font-family: var(--dtm-font);\n font-size: 11px;\n font-weight: bold;\n cursor: pointer;\n box-shadow: 2px 2px 0 var(--c-black);\n opacity: 0.7;\n}\n/* \u30A2\u30AF\u30C6\u30A3\u30D6\u9078\u629E = \u4E0D\u900F\u660E + \u91D1\u67A0 */\n.dtm-pill--active {\n opacity: 1;\n border-color: var(--dtm-gold);\n box-shadow: 0 0 0 1px var(--dtm-gold), 2px 2px 0 var(--c-black);\n}\n.dtm-pill:not(.dtm-pill--active):active { transform: translate(2px,2px); 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 background: color-mix(in srgb, var(--dtm-pill-color) 85%, white);\n transition: background 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 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\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 \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\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-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 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.dtm-player-seek::-webkit-slider-runnable-track {\n height: 6px;\n background: var(--dtm-border2);\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::-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 position: absolute;\n bottom: calc(100% + 6px);\n left: 50%;\n transform: translateX(-50%);\n z-index: 100;\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.dtm-player-balloon--visible {\n display: block;\n animation: dtm-balloon-fade-in 0.1s steps(2);\n}\n@keyframes dtm-balloon-fade-in {\n from { opacity: 0; transform: translateX(-50%) translateY(4px); }\n to { opacity: 1; transform: translateX(-50%) 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.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.dtm-chord-player {\n font-family: var(--dtm-font);\n font-size: 13px;\n letter-spacing: .06em;\n color: var(--dtm-text);\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-border),\n 4px 4px 0 var(--c-black);\n overflow: hidden;\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 */\n.dtm-cp-ctrl {\n display: flex;\n align-items: center;\n gap: var(--dtm-gap);\n padding: 6px 8px;\n background: var(--dtm-deep);\n border-bottom: 2px solid var(--c-black);\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 / \u6642\u9593) */\n.dtm-cp-meta {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: .12em;\n color: var(--dtm-muted);\n}\n.dtm-cp-time {\n margin-left: auto;\n font-size: 11px;\n font-family: var(--dtm-font);\n color: var(--dtm-muted);\n letter-spacing: .1em;\n}\n\n/* \u30D7\u30ED\u30B0\u30EC\u30B9\u30D0\u30FC \u2014 \u30C9\u30C3\u30C8\u7D75\u98A8\u306E\u30BB\u30B0\u30E1\u30F3\u30C8\u5857\u308A\u3002\u30AF\u30EA\u30C3\u30AF\u3067\u30B7\u30FC\u30AF */\n.dtm-cp-progress {\n height: 14px;\n background: var(--dtm-deep);\n border-bottom: 2px solid var(--c-black);\n cursor: pointer;\n}\n.dtm-cp-progress-fill {\n height: 100%;\n width: 0%;\n background: repeating-linear-gradient(\n 90deg,\n var(--dtm-primary) 0, var(--dtm-primary) 6px,\n var(--c-navy) 6px, var(--c-navy) 8px\n );\n}\n.dtm-cp-progress-fill--on { border-right: 2px solid var(--c-white); }\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";
1878
+ 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\u306F document.body \u76F4\u4E0B\u3078\u91CD\u306D\u308B\u305F\u3081\u3001\n .dtm-daw \u306E\u5916\u306B\u51FA\u308B\u3002\u3053\u308C\u3089\u3082\u540C\u69D8\u306B\u30C8\u30FC\u30AF\u30F3\u3092\u4F9B\u7D66\u3057\u306A\u3044\u3068\u9ED2\u5730\u30FB\u767D\u6587\u5B57\u306B\u306A\u308B\u3002 */\n.dtm-daw,\n.dtm-controlbar,\n.dtm-modal-overlay,\n.dtm-consent-overlay,\n.dtm-chord-player {\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.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.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: 3px;\n}\n.dtm-pill {\n --dtm-pill-color: var(--dtm-primary);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 1 1 0;\n min-width: 0;\n height: 26px;\n padding: 0;\n border: 2px solid var(--c-black);\n background: color-mix(in srgb, var(--dtm-pill-color) 40%, black);\n color: var(--c-white);\n font-family: var(--dtm-font);\n font-size: 11px;\n font-weight: bold;\n cursor: pointer;\n box-shadow: 2px 2px 0 var(--c-black);\n opacity: 0.7;\n}\n/* \u30A2\u30AF\u30C6\u30A3\u30D6\u9078\u629E = \u4E0D\u900F\u660E + \u91D1\u67A0 */\n.dtm-pill--active {\n opacity: 1;\n border-color: var(--dtm-gold);\n box-shadow: 0 0 0 1px var(--dtm-gold), 2px 2px 0 var(--c-black);\n}\n.dtm-pill:not(.dtm-pill--active):active { transform: translate(2px,2px); 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 background: color-mix(in srgb, var(--dtm-pill-color) 85%, white);\n transition: background 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 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\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 \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\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-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 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.dtm-player-seek::-webkit-slider-runnable-track {\n height: 6px;\n background: var(--dtm-border2);\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::-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 position: absolute;\n bottom: calc(100% + 6px);\n left: 50%;\n transform: translateX(-50%);\n z-index: 100;\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.dtm-player-balloon--visible {\n display: block;\n animation: dtm-balloon-fade-in 0.1s steps(2);\n}\n@keyframes dtm-balloon-fade-in {\n from { opacity: 0; transform: translateX(-50%) translateY(4px); }\n to { opacity: 1; transform: translateX(-50%) 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.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.dtm-chord-player {\n font-family: var(--dtm-font);\n font-size: 13px;\n letter-spacing: .06em;\n color: var(--dtm-text);\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-border),\n 4px 4px 0 var(--c-black);\n overflow: hidden;\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 */\n.dtm-cp-ctrl {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--dtm-gap);\n padding: 6px 8px;\n background: var(--dtm-deep);\n border-bottom: 2px solid var(--c-black);\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 / \u6642\u9593) */\n.dtm-cp-meta {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: .12em;\n color: var(--dtm-muted);\n}\n.dtm-cp-time {\n margin-left: auto;\n font-size: 11px;\n font-family: var(--dtm-font);\n color: var(--dtm-muted);\n letter-spacing: .1em;\n}\n\n/* \u30D7\u30ED\u30B0\u30EC\u30B9\u30D0\u30FC \u2014 \u30C9\u30C3\u30C8\u7D75\u98A8\u306E\u30BB\u30B0\u30E1\u30F3\u30C8\u5857\u308A\u3002\u30AF\u30EA\u30C3\u30AF\u3067\u30B7\u30FC\u30AF */\n.dtm-cp-progress {\n height: 14px;\n background: var(--dtm-deep);\n border-bottom: 2px solid var(--c-black);\n cursor: pointer;\n}\n.dtm-cp-progress-fill {\n height: 100%;\n width: 0%;\n background: repeating-linear-gradient(\n 90deg,\n var(--dtm-primary) 0, var(--dtm-primary) 6px,\n var(--c-navy) 6px, var(--c-navy) 8px\n );\n}\n.dtm-cp-progress-fill--on { border-right: 2px solid var(--c-white); }\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";
1879
1879
  /**
1880
1880
  * スタイルを document.head に一度だけ注入する。
1881
1881
  */
package/dist/index.js CHANGED
@@ -5176,6 +5176,7 @@ var DAW_CSS = `
5176
5176
  .dtm-cp-ctrl {
5177
5177
  display: flex;
5178
5178
  align-items: center;
5179
+ flex-wrap: wrap;
5179
5180
  gap: var(--dtm-gap);
5180
5181
  padding: 6px 8px;
5181
5182
  background: var(--dtm-deep);
@@ -6986,6 +6987,13 @@ var parseToneMeta = (chords) => {
6986
6987
  var parseMetronomeMeta = (chords) => {
6987
6988
  return !/^#\s*metronome\s*=\s*off\s*$/im.test(chords);
6988
6989
  };
6990
+ var parseBpmMeta = (chords) => {
6991
+ const m = chords.match(/^#\s*bpm\s*=\s*(\d+)\s*$/im);
6992
+ if (!m) return null;
6993
+ const val = Number.parseInt(m[1], 10);
6994
+ if (Number.isNaN(val)) return null;
6995
+ return Math.max(40, Math.min(240, val));
6996
+ };
6989
6997
  var _nameToKeyCache = null;
6990
6998
  var getNameToKey = async () => {
6991
6999
  if (!_nameToKeyCache) _nameToKeyCache = await buildNameToKeyMapping();
@@ -7148,7 +7156,7 @@ var buildDisplayLines = (chords, eventsCount) => {
7148
7156
  var mountChordPlayer = (target, chords, options = {}) => {
7149
7157
  const doc = target.ownerDocument;
7150
7158
  injectStyles(doc);
7151
- let bpm = options.bpm ?? 120;
7159
+ let bpm = options.bpm ?? parseBpmMeta(chords) ?? 120;
7152
7160
  let activeIndex = -1;
7153
7161
  let activePlayback = null;
7154
7162
  let isPlaying = false;
@@ -7284,17 +7292,9 @@ var mountChordPlayer = (target, chords, options = {}) => {
7284
7292
  { key: "guitar", label: "Guitar", emoji: "\u{1F3B8}" },
7285
7293
  { key: "strings", label: "Strings", emoji: "\u{1F3BB}" }
7286
7294
  ];
7287
- const instrGroup = doc.createElement("div");
7288
- instrGroup.className = "dtm-cp-instr-group";
7289
- const instrBtns = /* @__PURE__ */ new Map();
7290
- const updateInstrButtons = () => {
7291
- for (const { key } of INSTRUMENT_DEFS) {
7292
- instrBtns.get(key)?.classList.toggle(
7293
- "dtm-cp-instr-btn--active",
7294
- key === activeInstrumentKey
7295
- );
7296
- }
7297
- };
7295
+ const instrGroup = doc.createElement("select");
7296
+ instrGroup.className = "dtm-cp-instr-select";
7297
+ instrGroup.title = "\u697D\u5668";
7298
7298
  const switchInstrument = (key) => {
7299
7299
  if (activeInstrumentKey === key) return;
7300
7300
  activeInstrumentKey = key;
@@ -7305,16 +7305,19 @@ var mountChordPlayer = (target, chords, options = {}) => {
7305
7305
  if (ctx) loadWafFont(ctx, activeGmName);
7306
7306
  }
7307
7307
  };
7308
- for (const { key, label, emoji } of INSTRUMENT_DEFS) {
7309
- const btn = doc.createElement("button");
7310
- btn.type = "button";
7311
- btn.className = "dtm-cp-instr-btn";
7312
- btn.textContent = `${emoji} ${label}`;
7313
- btn.title = label;
7314
- btn.addEventListener("click", () => switchInstrument(key));
7315
- instrGroup.appendChild(btn);
7316
- instrBtns.set(key, btn);
7308
+ const updateInstrButtons = () => {
7309
+ instrGroup.value = activeInstrumentKey;
7310
+ };
7311
+ for (const { key, label } of INSTRUMENT_DEFS) {
7312
+ const opt = doc.createElement("option");
7313
+ opt.value = key;
7314
+ opt.textContent = label;
7315
+ instrGroup.appendChild(opt);
7317
7316
  }
7317
+ instrGroup.addEventListener("change", () => {
7318
+ const key = instrGroup.value;
7319
+ switchInstrument(key);
7320
+ });
7318
7321
  updateInstrButtons();
7319
7322
  const timeSpan = doc.createElement("span");
7320
7323
  timeSpan.className = "dtm-cp-time";
@@ -8052,32 +8055,31 @@ var mountChordPlayer = (target, chords, options = {}) => {
8052
8055
  animation: dtm-cp-spin 0.7s linear infinite;
8053
8056
  vertical-align: middle;
8054
8057
  }
8055
- /* \u697D\u5668\u30C8\u30B0\u30EB\u30DC\u30BF\u30F3\u7FA4 */
8056
- .dtm-cp-instr-group {
8057
- display: flex;
8058
- gap: 2px;
8059
- border: 1px solid rgba(255,255,255,0.15);
8060
- border-radius: 4px;
8061
- overflow: hidden;
8058
+ /* \u30B3\u30FC\u30C9\u9032\u884C\u30D7\u30EC\u30A4\u30E4\u30FC\u306EPLAY\u30DC\u30BF\u30F3\u306F\u901A\u5E38\u306EDAW\u3088\u308A\u5C0F\u3055\u3081\u3067\u3088\u3044 */
8059
+ .dtm-cp-ctrl .dtm-play {
8060
+ width: 24px;
8061
+ height: 24px;
8062
8062
  }
8063
- .dtm-cp-instr-btn {
8063
+ /* \u697D\u5668\u9078\u629E\u30D7\u30EB\u30C0\u30A6\u30F3\uFF08\u7701\u30B9\u30DA\u30FC\u30B9\u3067\u30B9\u30DE\u30DB\u3067\u3082\u96A0\u308C\u306A\u3044\uFF09 */
8064
+ .dtm-cp-instr-select {
8064
8065
  background: rgba(255,255,255,0.06);
8065
- border: none;
8066
- color: rgba(255,255,255,0.5);
8066
+ border: 1px solid rgba(255,255,255,0.15);
8067
+ border-radius: 4px;
8068
+ color: rgba(255,255,255,0.85);
8067
8069
  font-size: 11px;
8068
- padding: 2px 7px;
8070
+ font-family: inherit;
8071
+ padding: 2px 4px;
8069
8072
  cursor: pointer;
8070
- transition: background 0.15s, color 0.15s;
8071
- white-space: nowrap;
8073
+ max-width: 62px;
8074
+ flex-shrink: 1;
8075
+ min-width: 0;
8072
8076
  }
8073
- .dtm-cp-instr-btn:hover {
8077
+ .dtm-cp-instr-select:hover {
8074
8078
  background: rgba(255,255,255,0.14);
8075
- color: rgba(255,255,255,0.85);
8076
8079
  }
8077
- .dtm-cp-instr-btn--active {
8078
- background: var(--dtm-primary, #29adff) !important;
8079
- color: #000 !important;
8080
- font-weight: bold;
8080
+ .dtm-cp-instr-select option {
8081
+ background: #1a1a2e;
8082
+ color: #fff;
8081
8083
  }
8082
8084
  /* BPM widget styles */
8083
8085
  .dtm-cp-bpm-group {
package/dist/index.mjs CHANGED
@@ -5053,6 +5053,7 @@ var DAW_CSS = `
5053
5053
  .dtm-cp-ctrl {
5054
5054
  display: flex;
5055
5055
  align-items: center;
5056
+ flex-wrap: wrap;
5056
5057
  gap: var(--dtm-gap);
5057
5058
  padding: 6px 8px;
5058
5059
  background: var(--dtm-deep);
@@ -6863,6 +6864,13 @@ var parseToneMeta = (chords) => {
6863
6864
  var parseMetronomeMeta = (chords) => {
6864
6865
  return !/^#\s*metronome\s*=\s*off\s*$/im.test(chords);
6865
6866
  };
6867
+ var parseBpmMeta = (chords) => {
6868
+ const m = chords.match(/^#\s*bpm\s*=\s*(\d+)\s*$/im);
6869
+ if (!m) return null;
6870
+ const val = Number.parseInt(m[1], 10);
6871
+ if (Number.isNaN(val)) return null;
6872
+ return Math.max(40, Math.min(240, val));
6873
+ };
6866
6874
  var _nameToKeyCache = null;
6867
6875
  var getNameToKey = async () => {
6868
6876
  if (!_nameToKeyCache) _nameToKeyCache = await buildNameToKeyMapping();
@@ -7025,7 +7033,7 @@ var buildDisplayLines = (chords, eventsCount) => {
7025
7033
  var mountChordPlayer = (target, chords, options = {}) => {
7026
7034
  const doc = target.ownerDocument;
7027
7035
  injectStyles(doc);
7028
- let bpm = options.bpm ?? 120;
7036
+ let bpm = options.bpm ?? parseBpmMeta(chords) ?? 120;
7029
7037
  let activeIndex = -1;
7030
7038
  let activePlayback = null;
7031
7039
  let isPlaying = false;
@@ -7161,17 +7169,9 @@ var mountChordPlayer = (target, chords, options = {}) => {
7161
7169
  { key: "guitar", label: "Guitar", emoji: "\u{1F3B8}" },
7162
7170
  { key: "strings", label: "Strings", emoji: "\u{1F3BB}" }
7163
7171
  ];
7164
- const instrGroup = doc.createElement("div");
7165
- instrGroup.className = "dtm-cp-instr-group";
7166
- const instrBtns = /* @__PURE__ */ new Map();
7167
- const updateInstrButtons = () => {
7168
- for (const { key } of INSTRUMENT_DEFS) {
7169
- instrBtns.get(key)?.classList.toggle(
7170
- "dtm-cp-instr-btn--active",
7171
- key === activeInstrumentKey
7172
- );
7173
- }
7174
- };
7172
+ const instrGroup = doc.createElement("select");
7173
+ instrGroup.className = "dtm-cp-instr-select";
7174
+ instrGroup.title = "\u697D\u5668";
7175
7175
  const switchInstrument = (key) => {
7176
7176
  if (activeInstrumentKey === key) return;
7177
7177
  activeInstrumentKey = key;
@@ -7182,16 +7182,19 @@ var mountChordPlayer = (target, chords, options = {}) => {
7182
7182
  if (ctx) loadWafFont(ctx, activeGmName);
7183
7183
  }
7184
7184
  };
7185
- for (const { key, label, emoji } of INSTRUMENT_DEFS) {
7186
- const btn = doc.createElement("button");
7187
- btn.type = "button";
7188
- btn.className = "dtm-cp-instr-btn";
7189
- btn.textContent = `${emoji} ${label}`;
7190
- btn.title = label;
7191
- btn.addEventListener("click", () => switchInstrument(key));
7192
- instrGroup.appendChild(btn);
7193
- instrBtns.set(key, btn);
7185
+ const updateInstrButtons = () => {
7186
+ instrGroup.value = activeInstrumentKey;
7187
+ };
7188
+ for (const { key, label } of INSTRUMENT_DEFS) {
7189
+ const opt = doc.createElement("option");
7190
+ opt.value = key;
7191
+ opt.textContent = label;
7192
+ instrGroup.appendChild(opt);
7194
7193
  }
7194
+ instrGroup.addEventListener("change", () => {
7195
+ const key = instrGroup.value;
7196
+ switchInstrument(key);
7197
+ });
7195
7198
  updateInstrButtons();
7196
7199
  const timeSpan = doc.createElement("span");
7197
7200
  timeSpan.className = "dtm-cp-time";
@@ -7929,32 +7932,31 @@ var mountChordPlayer = (target, chords, options = {}) => {
7929
7932
  animation: dtm-cp-spin 0.7s linear infinite;
7930
7933
  vertical-align: middle;
7931
7934
  }
7932
- /* \u697D\u5668\u30C8\u30B0\u30EB\u30DC\u30BF\u30F3\u7FA4 */
7933
- .dtm-cp-instr-group {
7934
- display: flex;
7935
- gap: 2px;
7936
- border: 1px solid rgba(255,255,255,0.15);
7937
- border-radius: 4px;
7938
- overflow: hidden;
7935
+ /* \u30B3\u30FC\u30C9\u9032\u884C\u30D7\u30EC\u30A4\u30E4\u30FC\u306EPLAY\u30DC\u30BF\u30F3\u306F\u901A\u5E38\u306EDAW\u3088\u308A\u5C0F\u3055\u3081\u3067\u3088\u3044 */
7936
+ .dtm-cp-ctrl .dtm-play {
7937
+ width: 24px;
7938
+ height: 24px;
7939
7939
  }
7940
- .dtm-cp-instr-btn {
7940
+ /* \u697D\u5668\u9078\u629E\u30D7\u30EB\u30C0\u30A6\u30F3\uFF08\u7701\u30B9\u30DA\u30FC\u30B9\u3067\u30B9\u30DE\u30DB\u3067\u3082\u96A0\u308C\u306A\u3044\uFF09 */
7941
+ .dtm-cp-instr-select {
7941
7942
  background: rgba(255,255,255,0.06);
7942
- border: none;
7943
- color: rgba(255,255,255,0.5);
7943
+ border: 1px solid rgba(255,255,255,0.15);
7944
+ border-radius: 4px;
7945
+ color: rgba(255,255,255,0.85);
7944
7946
  font-size: 11px;
7945
- padding: 2px 7px;
7947
+ font-family: inherit;
7948
+ padding: 2px 4px;
7946
7949
  cursor: pointer;
7947
- transition: background 0.15s, color 0.15s;
7948
- white-space: nowrap;
7950
+ max-width: 62px;
7951
+ flex-shrink: 1;
7952
+ min-width: 0;
7949
7953
  }
7950
- .dtm-cp-instr-btn:hover {
7954
+ .dtm-cp-instr-select:hover {
7951
7955
  background: rgba(255,255,255,0.14);
7952
- color: rgba(255,255,255,0.85);
7953
7956
  }
7954
- .dtm-cp-instr-btn--active {
7955
- background: var(--dtm-primary, #29adff) !important;
7956
- color: #000 !important;
7957
- font-weight: bold;
7957
+ .dtm-cp-instr-select option {
7958
+ background: #1a1a2e;
7959
+ color: #fff;
7958
7960
  }
7959
7961
  /* BPM widget styles */
7960
7962
  .dtm-cp-bpm-group {
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "author": "onjmin",
3
3
  "license": "MIT",
4
4
  "name": "@onjmin/dtm",
5
- "version": "0.1.75",
5
+ "version": "0.1.76",
6
6
  "description": "MMLを中間言語に用いた、モバイルファーストなDAW / ピアノロール打ち込みコンポーネント",
7
7
  "homepage": "https://onjmin.github.io/dtm",
8
8
  "repository": {