:root { --system-accent: #00ffaa; --system-accent-soft: #00ffaa33; --system-accent-bg: rgba(0, 255, 170, 0.035); }
        *, *::before, *::after { box-sizing: border-box; }
        html { overflow-x: hidden; width: 100%; }
        body { 
            background: #050508; 
            color: #d0d0d6; 
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
            text-align: center; 
            margin: 0;
            padding: clamp(20px, 4vw, 40px) clamp(12px, 3vw, 40px);
            min-height: 100vh;
            overflow-x: hidden;
            width: 100%;
        }
        h1 { font-size: 26px; letter-spacing: 0.25em; margin-bottom: 5px; color: #fff; font-weight: 300; }
        .subtitle { font-size: 10px; color: #555; margin-bottom: 10px; letter-spacing: 0.15em; text-transform: uppercase; }
        .system-note {
            font-size: 11px;
            color: #555;
            letter-spacing: 0.12em;
            text-transform: capitalize;
            margin-bottom: 25px;
        }
        
        .upload-zone { width: min(100%, 830px); margin: 0 auto 14px; }
        input[type="file"] { display: none !important; }
        .file-label {
            padding: 12px 24px; background: #121216; border: 1px dashed #333; color: #aaa;
            border-radius: 4px; cursor: pointer; display: inline-block; font-size: 14px; transition: all 0.2s;
        }
        .file-label:hover { background: #1a1a24; border-color: #00ffaa; color: #fff; }
        .sample-gallery {
            width: 100%;
            max-width: 640px;
            margin: 10px auto 0;
            text-align: left;
        }
        .sample-gallery-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 6px;
            color: #777;
            font-size: 10px;
            font-weight: bold;
            letter-spacing: 0.16em;
        }
        .sample-gallery-status {
            color: #666;
            font-size: 10px;
            letter-spacing: 0.04em;
            text-align: right;
        }
        .sample-gallery-track {
            display: flex;
            width: max-content;
            max-width: 100%;
            min-width: 100%;
            gap: 8px;
            overflow-x: auto;
            overscroll-behavior-x: contain;
            scroll-snap-type: x proximity;
            -webkit-overflow-scrolling: touch;
            padding: 3px 2px 8px;
            cursor: grab;
        }
        .sample-gallery-track.dragging { cursor: grabbing; }
        .sample-gallery-track::-webkit-scrollbar { height: 6px; }
        .sample-gallery-track::-webkit-scrollbar-track { background: #0b0b10; border-radius: 999px; }
        .sample-gallery-track::-webkit-scrollbar-thumb { background: #252533; border-radius: 999px; }
        .sample-gallery-track.empty {
            min-height: 58px;
            align-items: center;
            border: 1px dashed #242432;
            border-radius: 6px;
            background: #0d0d12;
            cursor: default;
            padding: 0 12px;
        }
        .sample-gallery-track.empty::before {
            content: "画像を読み込んでください";
            color: #666;
            font-size: 11px;
            letter-spacing: 0.08em;
        }
        .sample-thumb {
            flex: 0 0 88px;
            height: 58px;
            border: 1px solid #242432;
            border-radius: 6px;
            padding: 0;
            background: #101016;
            cursor: pointer;
            overflow: hidden;
            position: relative;
            scroll-snap-align: start;
            transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
        }
        .sample-thumb:hover { border-color: #00ffaa88; box-shadow: 0 0 8px rgba(0, 255, 170, 0.10); }
        .sample-thumb.active { border-color: var(--system-accent, #00ffaa); box-shadow: 0 0 10px var(--system-accent-soft, #00ffaa33); }
        .sample-thumb img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            opacity: 0.88;
        }
        .sample-thumb.active img { opacity: 1; }
        .sample-thumb span {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 10px 6px 4px;
            color: #ddd;
            font-size: 8px;
            font-weight: bold;
            letter-spacing: 0.05em;
            text-align: left;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
        }
        .sample-thumb.missing img { opacity: 0.18; }
        .sample-thumb.missing::before {
            content: "";
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(135deg, #15151d 0 8px, #101016 8px 16px);
        }

        /* 💡 真のUDレイアウト：可変フレキシブル・コックピット構造 */
        .workspace-grid {
            display: flex;
            flex-direction: row;
            gap: 20px;
            max-width: 1550px;
            width: 100%;
            margin: 0 auto;
            text-align: left;
            align-items: flex-start;
        }
        
        /* 左側：写真 ＋ サウンドコンソールの主役エリア */
        .main-stream { 
            flex: 1; 
            min-width: 830px; 
            display: flex; 
            flex-direction: column; 
            gap: 20px; 
        }
        
        /* 右側：アナライザー ＋ リズムの統合タワー */
        .side-monitor-stream { 
            width: 25vw;             /* 画面幅に応じた可変へシフト */
            min-width: 350px;        /* 縮みすぎの限界線 */
            max-width: 500px;        /* 大画面でのワイド化上限をホールド */
            flex: 0 1 auto;          /* 柔軟な縮小を許可 */
            display: flex; 
            flex-direction: column; 
            gap: 20px; 
            align-self: flex-start;
        }

        /* パネル共通デザイン */
        .tuning-panel {
            background: #111116; 
            padding: 22px; border-radius: 8px; border: 1px solid #1a1a24;
            display: flex; flex-direction: column; justify-content: flex-start;
        }
        .tuning-panel-header {
            display: flex; justify-content: space-between; align-items: center;
            border-bottom: 1px solid #222; padding-bottom: 10px; margin-bottom: 18px;
        }
        .tuning-panel h3 { margin: 0; font-size: 12px; color: #888; letter-spacing: 0.15em; }

        /* ステージ */
        .photo-master-stage {
            background: #0a0a0d; border: 1px solid #161620; border-radius: 8px; padding: 5px;
            display: flex; flex-direction: column; align-items: center; gap: 15px;
            width: 100%;
        }
        .container { 
            position: relative; display: inline-block;
            box-shadow: 0 20px 50px rgba(0,0,0,0.8); background: #000;
            border-radius: 4px; overflow: hidden; cursor: ew-resize;
            width: 100%; text-align: center;
        }
        .container.radial-scan-mode { cursor: crosshair; }
        canvas { display: inline-block; max-width: 100%; max-height: 55vh; height: auto; transition: filter 1.0s ease; }
        canvas.portrait-preview {
            max-height: min(78vh, 860px);
            max-width: min(100%, 720px);
        }
        .container.portrait-preview-container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: min(78vh, 860px);
        }
        .live-canvas-monitor {
            position: fixed;
            left: 16px;
            bottom: 16px;
            z-index: 1200;
            width: min(26vw, 260px);
            max-width: calc(100vw - 32px);
            padding: 4px;
            border: 1px solid #263d38;
            border-radius: 4px;
            background: rgba(8, 12, 14, 0.94);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42);
            cursor: grab;
            pointer-events: auto;
            touch-action: none;
            user-select: none;
        }
        .live-canvas-monitor.dragging { cursor: grabbing; }
        .live-canvas-monitor[hidden] { display: none !important; }
        .live-canvas-monitor canvas {
            display: block;
            width: 100%;
            height: auto;
            max-height: 180px;
            object-fit: contain;
        }
        /* 統合トランスポートバー：フレックスで美しく中央集約管理 */
        .main-transport-bar {
            display: flex; width: 100%; max-width: 100%; min-width: 0; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap;
            background: #111116; padding: 12px 12px; border-radius: 6px; border: 1px solid #1a1a24;
        }
        .transport-sub-group { display: flex; max-width: 100%; min-width: 0; gap: 6px; align-items: center; justify-content: center; flex: 0 1 auto; flex-wrap: nowrap; }
        .scan-mode-control {
            display: flex;
            gap: 4px;
            align-items: center;
            min-width: 0;
            max-width: 100%;
            flex: 1 1 160px;
            padding: 4px;
            border: 1px solid #222633;
            border-radius: 4px;
            background: #0c0d12;
        }
        .scan-settings-row {
            display: flex;
            align-items: stretch;
            gap: 8px;
            min-width: 0;
            max-width: 100%;
            flex: 1 1 100%;
        }
        .scan-mode-label {
            flex: 0 1 auto;
            color: #667078;
            font-size: 8px;
            line-height: 1;
            letter-spacing: 0.12em;
            text-align: center;
            white-space: nowrap;
        }
        .scan-mode-btn {
            flex: 1 1 0;
            min-width: 0;
            height: 22px;
            padding: 0 6px;
            color: #59636b;
            background: #101117;
            border: 1px solid #252936;
            border-radius: 3px;
            font: 700 9px/1 monospace;
            letter-spacing: 0.04em;
            cursor: pointer;
        }
        .scan-mode-btn:hover { color: #aefde0; border-color: #376957; }
        .scan-mode-btn.active {
            color: #00ffaa;
            border-color: #00ffaa;
            background: rgba(0, 255, 170, 0.08);
            box-shadow: 0 0 7px rgba(0, 255, 170, 0.12);
        }
        .scan-speed-control {
            display: flex;
            align-items: center;
            gap: 6px;
            min-width: 0;
            max-width: 100%;
            flex: 1 1 190px;
            padding: 6px 8px;
            border: 1px solid #222633;
            border-radius: 4px;
            background: #0c0d12;
        }
        .scan-speed-label {
            color: #667078;
            font-size: 8px;
            line-height: 1;
            letter-spacing: 0.12em;
            white-space: nowrap;
        }
        .scan-speed-control input[type="range"] {
            flex: 1 1 90px;
            min-width: 70px;
            max-width: 150px;
            margin: 0;
            accent-color: #00ffaa;
            cursor: pointer;
        }
        .scan-speed-value {
            width: 38px;
            color: #00ffaa;
            font: 700 9px/1 monospace;
            text-align: right;
            white-space: nowrap;
        }

        .scan-settings-row > .scan-mode-control {
            flex: 1 1 160px;
            min-width: 0;
            max-width: 100%;
        }

        /* トランスポート内ボタンのサイズ統一（物理サイズをシャープに統一） */
        button.main-btn, button.play-toggle-btn, button.stop-btn {
            width: 100px;
            height: 38px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: bold;
            letter-spacing: 0.05em;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.15s;
            white-space: nowrap;
        }

        button.main-btn { 
            background: #1e1e28; color: #00ffaa; border: 1px solid #33443e; 
        }
        button.main-btn:hover:not(:disabled) { background: #252538; color: #fff; border-color: #00ffaa; }
        button.main-btn:disabled { background: #1a1a20; color: #444; cursor: not-allowed; border-color: #222; }
        
        button.play-toggle-btn {
            background: #00ffaa; color: #000; border: none;
            box-shadow: 0 4px 15px rgba(0, 255, 170, 0.15);
        }
        button.play-toggle-btn:hover:not(:disabled) { background: #55ffcc; }
        button.play-toggle-btn:disabled { background: #222; color: #444; cursor: not-allowed; box-shadow: none; }

        button.stop-btn {
            background: #222; color: #999; border: 1px solid #333;
        }
        button.stop-btn:hover:not(:disabled) { background: #ff0055; color: #fff; border-color: #ff0055; }
        button.stop-btn:disabled { cursor: not-allowed; opacity: 0.2; }

        /* ⚙️ 安定したレスポンシブ・スライダー制御構造 */
        .control-group { 
            margin-bottom: 14px; 
            display: flex; 
            align-items: center; 
            flex-wrap: nowrap;
            gap: 12px;
            width: 100%;
            max-width: 680px; 
        }
        .control-group:last-child { margin-bottom: 0; }
        
        .control-group label { 
            font-size: 11px; 
            color: #aaa; 
            width: 145px; 
            max-width: 100%;
            flex-shrink: 0; 
            font-weight: 500; 
            letter-spacing: 0.05em;
            white-space: nowrap;
        }
        
        .control-group input[type="range"] { 
            flex: 1; 
            min-width: 100px; 
            max-width: 320px;
            margin: 0; 
            accent-color: #00ffaa; 
            background: transparent;
            height: 20px; 
            cursor: pointer; 
        }
        
        .control-group progress {
            flex: 1; min-width: 100px; max-width: 320px; margin: 0; height: 8px; -webkit-appearance: none; appearance: none; border: none; background: #222; border-radius: 4px;
        }
        .control-group progress::-webkit-progress-value { background: #00ffaa; border-radius: 4px; }
        .control-group progress::-moz-progress-bar { background: #00ffaa; border-radius: 4px; }

        /* トグル＆ステップボタン */
        .toggle-btn {
            background: #191922; color: #00ffaa; border: 1px solid #2a2a38; padding: 6px 12px;
            font-size: 11px; font-weight: bold; border-radius: 4px; cursor: pointer; transition: all 0.2s;
            white-space: nowrap;
        }
        .toggle-btn.off { color: #555; border-color: #222; background: #0c0c10; }
        .melody-memory-control[hidden],
        #scaleMoodDisplay[hidden],
        #chordDisplay[hidden] { display: none !important; }
        .toggle-btn.legacy {
            color: #b18b58;
            border-color: #795d3a;
            background: #8b652218;
            text-shadow: none;
        }
        .toggle-btn.eclipse-active { color: #00e1ff; border-color: #00e1ff; background: #00e1ff15; text-shadow: 0 0 8px rgba(0, 225, 255, 0.6); }
        .toggle-btn.mutated-nice { color: #aa00ff; border-color: #aa00ff; background: #aa00ff15; }
        .toggle-btn.mutated-mid { color: #ff8800; border-color: #ff8800; background: #ff880015; }
        .toggle-btn.mutated-rage { color: #ff0055; border-color: #ff0055; background: #ff005515; }
        .toggle-btn.mutated-hyper {
            color: #00e1ff;
            border-color: #00e1ff;
            background: #00e1ff15;
        }
        .toggle-btn:hover { background: #222230; border-color: #00ffaa; color: #00ffaa; box-shadow: 0 0 8px rgba(0,255,170,0.12); }

        .step-tuning { display: flex; align-items: center; flex-shrink: 0; }
        .step-btn {
            background: #191922; color: #00ffaa; border: 1px solid #2a2a35; 
            font-size: 11px; width: 24px; height: 24px; border-radius: 4px; 
            cursor: pointer; display: flex; align-items: center; justify-content: center; font-weight: bold;
        }
        .step-btn:hover { background: #222230; color: #fff; border-color: #666; }
        .control-center-panel .control-group .val { font-size: 12px; font-family: monospace; color: #00ffaa; width: 65px; text-align: center; font-weight: bold; white-space: nowrap; }
        .reset-btn { background: #1f1f26; color: #888; border: 1px solid #333; padding: 5px 10px; font-size: 11px; border-radius: 4px; cursor: pointer; flex-shrink: 0; white-space: nowrap; }
        .reset-btn:hover { background: #333; color: #fff; }
        .all-reset-btn { background: transparent; color: #55ffcc; border: 1px solid #22443a; padding: 4px 10px; font-size: 11px; border-radius: 4px; cursor: pointer; white-space: nowrap; }
        .all-reset-btn:hover { background: #222230; color: #fff; border-color: #666; }

        /* コンソール内分割グリッド */
        .console-internal-flex {
            display: flex; flex-direction: row; gap: 24px; flex-wrap: wrap;
        }
        .console-left-sliders { flex: 1.5; min-width: min(300px, 100%); border-right: 1px solid #222; padding-right: 20px; }
        .console-tab-header {
            gap: 10px;
            flex-wrap: wrap;
        }
        .console-tab-header > h3 {
            flex: 1 1 180px;
            text-align: left;
        }
        .console-tab-header-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
            min-width: 0;
        }
        .console-tab-list {
            display: flex;
            gap: 4px;
            padding: 3px;
            border: 1px solid #262632;
            border-radius: 4px;
            background: #0d0d12;
        }
        .console-tab-btn {
            min-height: 24px;
            padding: 4px 9px;
            border: 1px solid transparent;
            border-radius: 3px;
            color: #5d5d68;
            background: #121218;
            font-size: 9px;
            font-weight: bold;
            letter-spacing: 0.06em;
            cursor: pointer;
        }
        .console-tab-btn:hover {
            color: #b8b8c2;
            border-color: #3a3a46;
        }
        .console-tab-btn.active {
            color: var(--system-accent, #00ffaa);
            border-color: var(--system-accent-soft, #00ffaa33);
            background: var(--system-accent-bg, rgba(0, 255, 170, 0.035));
        }
        .console-tab-btn:focus-visible {
            outline: 1px solid var(--system-accent, #00ffaa);
            outline-offset: 2px;
        }
        .console-tab-panels {
            width: 100%;
            min-height: 370px;
        }
        .console-tab-panel {
            width: 100%;
        }
        .console-tab-panel[hidden] {
            display: none !important;
        }
        .console-lab-note {
            margin: 4px 0 0;
            color: #555563;
            font: 9px/1.4 monospace;
            letter-spacing: 0.08em;
            text-align: left;
        }
        .lab-section-heading {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 12px;
            margin: 0 0 10px;
            color: var(--system-accent, #00ffaa);
            font-size: 10px;
            font-weight: bold;
            letter-spacing: 0.12em;
        }
        .lab-section-caption {
            color: #4f4f5b;
            font: 8px/1.2 monospace;
            letter-spacing: 0.08em;
        }
        .waveshaper-lab {
            margin-top: 18px;
            padding-top: 15px;
            border-top: 1px dashed #2a2a35;
        }
        .waveshaper-switch-row,
        .waveshaper-choice-row,
        .waveshaper-select-field {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            min-height: 34px;
            margin-bottom: 7px;
        }
        .waveshaper-field-label {
            flex: 0 0 112px;
            color: #777;
            font-size: 10px;
            font-weight: 500;
            letter-spacing: 0.05em;
            white-space: nowrap;
        }
        .waveshaper-switch {
            min-width: 78px;
        }
        .waveshaper-select-field select {
            width: min(250px, 100%);
            min-width: 0;
            padding: 6px 28px 6px 9px;
            color: var(--system-accent, #00ffaa);
            border: 1px solid #2a2a38;
            border-radius: 4px;
            background: #121218;
            font: bold 10px/1.2 monospace;
            letter-spacing: 0.04em;
        }
        .waveshaper-choice-group {
            display: grid;
            grid-auto-flow: column;
            grid-auto-columns: minmax(54px, 1fr);
            gap: 4px;
            width: min(250px, 100%);
        }
        .waveshaper-choice {
            min-height: 27px;
            padding: 4px 7px;
            color: #5d5d68;
            border: 1px solid #292932;
            border-radius: 3px;
            background: #111117;
            font-size: 9px;
            font-weight: bold;
            letter-spacing: 0.04em;
            cursor: pointer;
        }
        .waveshaper-choice:hover {
            color: #b8b8c2;
            border-color: #444451;
        }
        .waveshaper-choice.active {
            color: var(--system-accent, #00ffaa);
            border-color: var(--system-accent-soft, #00ffaa55);
            background: var(--system-accent-bg, rgba(0, 255, 170, 0.04));
        }
        .waveshaper-ab-group {
            grid-auto-columns: minmax(92px, 1fr);
        }
        .waveshaper-range-row {
            margin-bottom: 7px;
        }
        .waveshaper-curve-figure {
            margin: 12px 0 11px;
            padding: 7px 7px 5px;
            border: 1px solid #252530;
            border-radius: 4px;
            background: #0b0b10;
        }
        #waveShaperCurveCanvas {
            display: block;
            width: 100%;
            height: 156px;
            max-width: 100%;
        }
        .waveshaper-curve-figure figcaption {
            display: flex;
            justify-content: space-between;
            gap: 8px;
            margin-top: 4px;
            color: #4d4d58;
            font: 8px/1.2 monospace;
            letter-spacing: 0.06em;
        }
        .waveshaper-reset {
            width: 100%;
            min-height: 29px;
        }
        @media (max-width: 566px) {
            .waveshaper-switch-row,
            .waveshaper-choice-row,
            .waveshaper-select-field {
                align-items: stretch;
                flex-direction: column;
                gap: 5px;
            }
            .waveshaper-field-label {
                flex-basis: auto;
            }
            .waveshaper-choice-group,
            .waveshaper-select-field select {
                width: 100%;
            }
            #waveShaperCurveCanvas {
                height: 132px;
            }
        }
        .console-right-presets { flex: 1; min-width: min(260px, 100%); display: flex; flex-direction: column; justify-content: flex-start; gap: 16px; }
        
        /* プリセット配置ゾーン：PC表示のデフォルト */
        .preset-grid-zone { 
            display: grid; 
            grid-template-columns: repeat(2, 1fr); 
            gap: 8px; 
            margin-top: 0px; 
        }
        .preset-btn {
            padding: 11px 4px; background: #15151c; border: 1px solid #2a2a35; color: #aaa; font-size: 11px; font-weight: bold; border-radius: 4px; cursor: pointer; text-align: center; letter-spacing: 0.05em; transition: all 0.15s; white-space: nowrap;
        }
        .preset-btn:hover { background: #1e1e28; color: #fff; border-color: #666; }
        .preset-btn.active { background: #00ffaa12; border-color: var(--system-accent, #00ffaa); color: var(--system-accent, #00ffaa); box-shadow: 0 0 10px rgba(0, 255, 170, 0.1); }
        .system-color-box {
            width: 100%;
            margin-top: 4px;
            padding: 8px 10px;
            background: #101018;
            border: 1px solid var(--system-accent-soft, #00ffaa33);
            border-radius: 4px;
        }
        .system-color-title {
            font-size: 10px;
            color: #777;
            font-weight: bold;
            margin-bottom: 7px;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            text-align: center;
        }
        .system-color-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 5px;
            width: 100%;
        }
        .system-color-btn {
            width: 100%;
            height: 18px;
            padding: 0;
            border: 1px solid #333;
            border-radius: 4px;
            cursor: pointer;
            background: var(--system-color);
            transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
        }
        .system-color-btn:hover { transform: translateY(-1px); border-color: #ddd; }
        .system-color-btn.active {
            border-color: #fff;
            box-shadow: 0 0 8px var(--system-color);
        }

        /* モニターボックス */
        .color-mood-box {
            background: #0d0d12; padding: 12px 14px; border-radius: 4px; border: 1px solid #1c1c28;
            font-size: 11px; font-family: monospace; color: #999; display: flex; flex-direction: column; gap: 6px; text-align: left;
            max-width: 680px; width: 100%;
        }
        .color-title-line { display: flex; align-items: center; gap: 8px; color: #555; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: bold; white-space: nowrap; }
        .color-value-line { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: bold; color: #fff; white-space: nowrap; }
        .color-dot { width: 10px; height: 10px; border-radius: 50%; background: #666; display: inline-block; flex-shrink: 0; }
        .melody-line-box { border-color: #00e1ff44; background: linear-gradient(145deg, #081017, #0b0d14); gap: 8px; overflow: hidden; }
        .melody-line-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; }
        .melody-line-header > div { min-width: 0; }
        .melody-line-subtitle { margin-top: 3px; color: #39515c; font-size: 8px; letter-spacing: 0.08em; white-space: normal; }
        .musical-translation-panel {
            display: grid;
            gap: 6px;
            padding: 8px 9px;
            border: 1px solid #16444a;
            border-radius: 4px;
            background: rgba(0, 225, 255, 0.035);
        }
        .musical-translation-control {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            min-width: 0;
        }
        .musical-translation-control > div { min-width: 0; }
        .musical-translation-label {
            color: #81eaf0;
            font-size: 9px;
            font-weight: bold;
            letter-spacing: 0.08em;
            white-space: nowrap;
        }
        .musical-translation-caption {
            margin-top: 2px;
            color: #35565d;
            font-size: 7px;
            letter-spacing: 0.06em;
            overflow-wrap: anywhere;
        }
        .musical-translation-toggle {
            min-width: 48px;
            padding: 4px 9px;
            color: #00e1ff;
            border-color: #23606b;
        }
        .musical-translation-context {
            min-height: 14px;
            padding-top: 5px;
            color: #eafcff;
            border-top: 1px solid #15343a;
            font-size: 10px;
            font-weight: bold;
            letter-spacing: 0.055em;
            overflow-wrap: anywhere;
        }
        .musical-translation-context.legacy {
            color: #9a835f;
            border-top-color: #4b3d2a;
            opacity: 0.72;
        }
        .melody-memory-control {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            min-width: 0;
            padding-top: 6px;
            border-top: 1px solid #15343a;
        }
        .melody-memory-control > div { min-width: 0; }
        @media (max-width: 566px) {
            .musical-translation-label { white-space: normal; }
            .musical-translation-control,
            .melody-memory-control { align-items: flex-start; }
        }
        .melody-composition-label { color: #4e6671; font-size: 8px; letter-spacing: 0.12em; }
        .melody-composition-title { color: #eafcff; font-size: clamp(11px, 1.5vw, 14px); line-height: 1.25; font-weight: bold; letter-spacing: 0.075em; overflow-wrap: anywhere; text-shadow: 0 0 10px rgba(0,225,255,0.18); }
        .melody-phrase-status { color: #557078; font-size: 8px; letter-spacing: 0.08em; min-height: 10px; }
        .melody-eeg {
            display: grid;
            gap: 8px;
            padding: 9px;
            border: 1px solid #14505c;
            border-radius: 4px;
            background:
                linear-gradient(rgba(0, 225, 255, 0.025) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 225, 255, 0.025) 1px, transparent 1px),
                #060d12;
            background-size: 12px 12px;
            box-shadow: inset 0 0 18px rgba(0, 225, 255, 0.025);
        }
        .melody-eeg-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 8px;
            min-width: 0;
        }
        .melody-eeg-title {
            color: #a9fbff;
            font-size: 10px;
            font-weight: bold;
            letter-spacing: 0.14em;
            text-shadow: 0 0 9px rgba(0, 225, 255, 0.35);
        }
        .melody-eeg-subtitle {
            margin-top: 2px;
            color: #38626b;
            font-size: 6px;
            letter-spacing: 0.07em;
            line-height: 1.35;
        }
        .melody-eeg-tabs { display: flex; gap: 3px; flex-shrink: 0; }
        .melody-eeg-tab {
            min-width: 42px;
            padding: 3px 5px;
            border: 1px solid #1a3f48;
            border-radius: 3px;
            background: #091219;
            color: #48656c;
            font: bold 7px monospace;
            letter-spacing: 0.06em;
            cursor: pointer;
        }
        .melody-eeg-tab.active {
            color: #00ffaa;
            border-color: #168361;
            background: rgba(0, 255, 170, 0.08);
            box-shadow: inset 0 0 8px rgba(0, 255, 170, 0.08);
        }
        .melody-eeg-standby {
            padding: 12px 6px;
            border: 1px dashed #18343b;
            color: #3c5b62;
            font-size: 8px;
            letter-spacing: 0.12em;
            text-align: center;
        }
        .melody-eeg-content { display: grid; gap: 8px; min-width: 0; }
        .melody-eeg-standby[hidden],
        .melody-eeg-ready[hidden],
        .melody-eeg-content[hidden],
        .melody-eeg-simple[hidden],
        .melody-eeg-detail[hidden] { display: none; }
        .melody-eeg-ready {
            display: grid;
            gap: 7px;
            padding: 12px 10px;
            border: 1px solid #17664f;
            border-radius: 3px;
            background: linear-gradient(120deg, rgba(0,255,170,0.08), rgba(0,225,255,0.025));
        }
        .melody-eeg-ready strong {
            color: #00ffaa;
            font-size: 10px;
            letter-spacing: 0.13em;
            text-shadow: 0 0 9px rgba(0,255,170,0.32);
        }
        .melody-eeg-ready[data-state="rest"] { border-color: #8b6524; }
        .melody-eeg-ready[data-state="rest"] strong { color: #ffb14d; text-shadow: 0 0 9px rgba(255,177,77,0.28); }
        .melody-eeg-ready div { display: grid; gap: 2px; }
        .melody-eeg-ready div span:first-child {
            color: #eafff7;
            font-size: 18px;
            font-weight: bold;
        }
        .melody-eeg-ready div span:last-child {
            color: #82cbd1;
            font-size: 9px;
            letter-spacing: 0.06em;
        }
        .melody-eeg-ready small {
            color: #42656b;
            font-size: 7px;
            letter-spacing: 0.08em;
        }
        .melody-eeg-transport {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            min-width: 0;
            padding: 5px 7px;
            border: 1px solid #16424b;
            border-radius: 3px;
            background: rgba(0,225,255,0.035);
        }
        .melody-eeg-transport strong {
            flex-shrink: 0;
            color: #00e1ff;
            font-size: 8px;
            letter-spacing: 0.11em;
        }
        .melody-eeg-transport span {
            min-width: 0;
            color: #45666d;
            font-size: 7px;
            text-align: right;
            overflow-wrap: anywhere;
        }
        .melody-eeg-transport[data-state="rest"] {
            border-color: #8b6524;
            background: rgba(255,177,77,0.055);
        }
        .melody-eeg-transport[data-state="rest"] strong { color: #ffb14d; }
        .melody-eeg-transport[data-state="stopped"] {
            border-color: #263b41;
            background: rgba(132,155,160,0.03);
        }
        .melody-eeg-transport[data-state="stopped"] strong { color: #71878b; }
        .melody-eeg-transport[data-state="ready"] strong { color: #00ffaa; }
        .melody-eeg-current {
            display: grid;
            grid-template-columns: auto 1fr;
            align-items: baseline;
            column-gap: 8px;
            padding: 7px 8px 6px;
            border-left: 2px solid #00ffaa;
            background: linear-gradient(90deg, rgba(0,255,170,0.08), transparent);
        }
        .melody-eeg-note {
            color: #eafff7;
            font-size: 21px;
            font-weight: bold;
            line-height: 1;
            text-shadow: 0 0 12px rgba(0,255,170,0.45);
        }
        .melody-eeg-frequency { color: #7af6d0; font-size: 10px; }
        .melody-eeg-source {
            grid-column: 1 / -1;
            margin-top: 4px;
            color: #3b6871;
            font-size: 7px;
            letter-spacing: 0.08em;
        }
        .melody-eeg-indicators {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 4px 8px;
        }
        .melody-eeg-indicator {
            display: flex;
            align-items: center;
            gap: 5px;
            color: #527078;
            font-size: 7px;
            letter-spacing: 0.04em;
        }
        .melody-eeg-indicator i {
            width: 6px;
            height: 6px;
            flex: 0 0 6px;
            border-radius: 50%;
            background: #20383d;
            box-shadow: 0 0 0 rgba(0,225,255,0);
            transition: background-color 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease;
            opacity: calc(0.32 + var(--eeg-level, 0) * 0.68);
        }
        .melody-eeg-indicator.active i {
            background: #00e1ff;
            box-shadow: 0 0 calc(3px + var(--eeg-level, 0) * 8px) rgba(0,225,255,0.7);
        }
        .melody-eeg-indicator.primary { color: #a8ffe5; }
        .melody-eeg-indicator.primary i { background: #00ffaa; box-shadow: 0 0 10px rgba(0,255,170,0.78); }
        .melody-eeg-indicator.lingering i {
            background: #5fbca0;
            box-shadow: 0 0 6px rgba(0,255,170,0.32);
        }
        .melody-eeg-canvas {
            display: block;
            width: 100%;
            height: 72px;
            border: 1px solid #102d35;
            border-radius: 3px;
            background: rgba(1, 8, 12, 0.88);
        }
        .melody-eeg-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 4px;
            margin: 0;
        }
        .melody-eeg-grid > div {
            display: grid;
            grid-template-columns: 72px minmax(0, 1fr);
            gap: 7px;
            min-width: 0;
            padding-bottom: 3px;
            border-bottom: 1px solid rgba(27, 67, 75, 0.45);
        }
        .melody-eeg-grid dt {
            color: #3f6971;
            font-size: 7px;
            letter-spacing: 0.04em;
        }
        .melody-eeg-grid dd {
            min-width: 0;
            margin: 0;
            color: #c7edf0;
            font-size: 8px;
            font-weight: bold;
            overflow-wrap: anywhere;
        }
        .melody-eeg-grid dd.reason-primary { color: #00ffaa; }
        .melody-eeg-grid dd.reason-secondary { color: #8debf5; }
        .melody-eeg-detail { display: grid; gap: 7px; }
        .melody-eeg-layer {
            display: grid;
            gap: 6px;
            padding: 7px;
            border: 1px solid #12333b;
            border-radius: 3px;
            background: rgba(4, 14, 20, 0.84);
        }
        .melody-eeg-layer h4 {
            margin: 0;
            color: #7dabb2;
            font-size: 8px;
            letter-spacing: 0.08em;
        }
        .melody-eeg-layer h4 span { margin-right: 5px; color: #00e1ff; }
        .melody-eeg-final { border-color: #17664f; background: rgba(0, 255, 170, 0.025); }
        .melody-eeg-race { display: grid; gap: 5px; }
        .melody-eeg-race-row {
            display: grid;
            grid-template-columns: 28px minmax(24px, 1fr) 30px 24px;
            align-items: center;
            gap: 5px;
            min-width: 0;
            color: #7ba1a8;
            font-size: 7px;
        }
        .melody-eeg-race-row[hidden] { display: none; }
        .race-note { color: #bde8eb; font-weight: bold; }
        .race-track {
            height: 6px;
            overflow: hidden;
            border: 1px solid #173039;
            border-radius: 2px;
            background: #03080b;
        }
        .race-track i {
            display: block;
            width: 0;
            height: 100%;
            background: linear-gradient(90deg, #176c7a, #00e1ff);
            transition: width 0.24s ease;
        }
        .melody-eeg-race-row.selected { color: #00ffaa; }
        .melody-eeg-race-row.selected .race-note { color: #ddfff4; text-shadow: 0 0 7px rgba(0,255,170,0.5); }
        .melody-eeg-race-row.selected .race-track { border-color: #168361; }
        .melody-eeg-race-row.selected .race-track i { background: linear-gradient(90deg, #168361, #00ffaa); }
        .melody-eeg-race-row b { color: #00ffaa; font-size: 6px; font-weight: bold; }
        .melody-eeg-race-note { color: #2d4b52; font-size: 6px; letter-spacing: 0.04em; }
        .melody-eeg-history {
            display: grid;
            grid-template-columns: repeat(8, minmax(0, 1fr));
            gap: 3px;
            min-width: 0;
            padding-top: 6px;
            border-top: 1px solid #14343c;
        }
        .melody-eeg-history-item {
            min-width: 0;
            padding: 3px 1px;
            border-radius: 2px;
            background: #09141a;
            color: #78a5ad;
            font-size: 7px;
            font-weight: bold;
            text-align: center;
            overflow: hidden;
        }
        .melody-eeg-history-item:last-child { color: #00ffaa; background: rgba(0,255,170,0.08); }
        .melody-eeg-history-item small {
            display: block;
            min-height: 7px;
            margin-top: 2px;
            color: #36555c;
            font-size: 5px;
            font-weight: normal;
            white-space: nowrap;
        }
        .melody-eeg[aria-busy="true"] .melody-eeg-note { color: #78888b; text-shadow: none; }
        @media (max-width: 566px) {
            .melody-eeg-header { flex-direction: column; }
            .melody-eeg-tabs { align-self: stretch; }
            .melody-eeg-tab { flex: 1; }
        }
        .velocity-meter-box { border-color: #00ffaa33; background: #090f0d; padding: 10px 12px; }
        .velocity-readout { display: flex; justify-content: space-between; gap: 10px; color: #00ffaa; font-size: 11px; font-weight: bold; letter-spacing: 0.05em; }
        .velocity-readout span:last-child { color: #00e1ff; }
        .velocity-meter-track { position: relative; height: 8px; background: #050808; border: 1px solid #12302a; border-radius: 3px; overflow: hidden; }
        .velocity-meter-scan { position: absolute; top: 0; bottom: 0; width: 1px; left: 0%; background: #9affdd; opacity: 0.72; box-shadow: 0 0 6px rgba(0,255,170,0.45); }
        .velocity-meter-glow { height: 100%; width: 0%; background: linear-gradient(90deg, rgba(0,255,170,0.95), rgba(0,225,255,0.95)); opacity: 0.86; box-shadow: 0 0 12px rgba(0,255,170,0.85); transition: width 0.18s ease; }

        /* ヒストグラム */
        .chord-histogram { display: flex; flex-direction: column; gap: 5px; }
        .chord-bar-row { display: flex; align-items: center; gap: 8px; font-family: monospace; font-size: 10px; }
        .chord-bar-label { width: 65px; flex-shrink: 0; color: #666; letter-spacing: 0.03em; font-weight: bold; }
        .chord-vibe-toggle {
            width: 36px;
            min-width: 36px;
            height: 17px;
            padding: 0 3px;
            border: 1px solid #00ffaa66;
            border-radius: 4px;
            background: #07120e;
            color: #00ffaa;
            font: 700 8px/15px monospace;
            letter-spacing: 0.02em;
            cursor: pointer;
            box-shadow: 0 0 7px rgba(0, 255, 170, 0.2);
        }
        .chord-vibe-toggle.off { border-color: #303038; background: #09090c; color: #666; box-shadow: none; }
        .chord-vibe-toggle:focus-visible { outline: 1px solid #00e1ff; outline-offset: 1px; }
        .chord-bar-track { flex: 1; height: 11px; background: #07070b; border-radius: 3px; overflow: hidden; position: relative; border: 1px solid #1a1a26; }
        .chord-bar-fill { height: 100%; width: 0%; background: #333; transition: width 0.1s ease; border-radius: 2px; }
        .chord-bar-pct { width: 35px; flex-shrink: 0; text-align: right; color: #555; font-weight: bold; }
        .chord-bar-row.sounding .chord-bar-label, .chord-bar-row.sounding .chord-bar-pct { color: #fff; }
        .chord-mode-badge { font-size: 10px; letter-spacing: 0.05em; color: #555; margin-bottom: 2px; font-family: monospace; font-weight: bold; }

        .dna-status-box {
            border-color: #00e1ff33;
            background: #090d12;
            padding: 12px;
            gap: 9px;
        }
        .dna-layout-grid {
            display: flex;
            flex-direction: column;
            gap: 9px;
            width: 100%;
            min-width: 0;
        }
        .dna-performer-block,
        .dna-data-block,
        .dna-profile-block {
            display: flex;
            flex-direction: column;
            gap: 7px;
            min-width: 0;
        }
        .dna-status-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
        }
        .dna-status-right {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 6px;
            flex-shrink: 0;
        }
        .dna-persona-line {
            display: flex;
            align-items: baseline;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 4px;
        }
        #dnaPersonaName {
            color: #fff;
            font-size: 14px;
            font-weight: bold;
            letter-spacing: 0.08em;
        }
        #dnaPersonaJp {
            color: #00e1ff;
            font-size: 10px;
            font-weight: bold;
            letter-spacing: 0.08em;
        }
        .dna-confidence {
            min-width: 44px;
            text-align: right;
            color: #00ffaa;
            font-size: 13px;
            font-weight: bold;
        }
        .rhythm-auto-control {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #667985;
            font-family: monospace;
            font-size: 8px;
            font-weight: bold;
            letter-spacing: 0.08em;
            white-space: nowrap;
        }
        #rhythmAutoToggle {
            min-width: 38px;
            padding: 3px 7px;
            border: 1px solid #263641;
            border-radius: 4px;
            background: #0a1015;
            color: #60717c;
            font-family: monospace;
            font-size: 9px;
            font-weight: bold;
            cursor: pointer;
            transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
        }
        #rhythmAutoToggle.active {
            color: #00ffaa;
            border-color: #00ffaa88;
            background: #082019;
            box-shadow: 0 0 10px #00ffaa33;
        }
        .rhythm-auto-summary {
            min-height: 11px;
            color: #4f606a;
            font-family: monospace;
            font-size: 8px;
            letter-spacing: 0.04em;
            line-height: 1.35;
        }
        .phosonograph-conductor-control {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
            align-items: center;
            gap: 7px;
            margin-top: 6px;
            padding: 8px 9px;
            border: 1px solid #1c2b35;
            border-radius: 5px;
            background: #070c11;
            min-width: 0;
        }
        .phosonograph-conductor-dot {
            grid-column: 1;
            grid-row: 1;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #35434c;
            box-shadow: 0 0 7px rgba(0, 255, 170, 0.2);
            transition: background 0.35s ease, box-shadow 0.35s ease;
        }
        .phosonograph-conductor-label {
            grid-column: 2 / -1;
            grid-row: 1;
            color: #71838e;
            font-family: monospace;
            font-size: 8px;
            font-weight: bold;
            letter-spacing: 0.11em;
            white-space: nowrap;
        }
        #conductorScanPlayToggle,
        #phosonographConductorToggle {
            min-width: 54px;
            padding: 4px 8px;
            border: 1px solid #293943;
            border-radius: 4px;
            background: #0a1015;
            color: #60717c;
            font-family: monospace;
            font-size: 8px;
            font-weight: bold;
            letter-spacing: 0.06em;
            cursor: pointer;
            transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
        }
        #conductorScanPlayToggle {
            grid-column: 1 / 3;
            grid-row: 2;
            min-width: 70px;
            width: 100%;
        }
        #phosonographConductorToggle {
            grid-column: 3;
            grid-row: 2;
            width: 100%;
        }
        .phosonograph-conductor-control.active {
            border-color: #00e1ff55;
            background: #071319;
        }
        .phosonograph-conductor-control.active .phosonograph-conductor-dot {
            background: #00e1ff;
            box-shadow: 0 0 8px #00e1ff66;
        }
        .phosonograph-conductor-control.active .phosonograph-conductor-label { color: #a7dce5; }
        #phosonographConductorToggle.active {
            color: #00ffaa;
            border-color: #00ffaa88;
            background: #082019;
            box-shadow: 0 0 9px #00ffaa2b;
        }
        #conductorScanPlayToggle.active {
            color: #00e1ff;
            border-color: #00e1ff88;
            background: #071a20;
            box-shadow: 0 0 9px #00e1ff2b;
        }
        #conductorScanPlayToggle:disabled {
            opacity: 0.38;
            color: #52616a;
            border-color: #202d34;
            background: #080d11;
            box-shadow: none;
            cursor: not-allowed;
            pointer-events: none;
        }
        .phosonograph-conductor-goal {
            grid-column: 1 / -1;
            grid-row: 3;
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            gap: 8px;
            align-items: baseline;
            padding-top: 5px;
            border-top: 1px solid #14232c;
            color: #52646e;
            font-family: monospace;
            font-size: 7px;
            letter-spacing: 0.10em;
        }
        .phosonograph-conductor-goal strong {
            overflow: hidden;
            color: #8498a3;
            font-size: 8px;
            font-weight: bold;
            letter-spacing: 0.08em;
            text-align: right;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .phosonograph-conductor-control.active .phosonograph-conductor-goal strong {
            color: #7de6dc;
        }
        .persona-score-debug {
            display: none;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 3px 10px;
            padding: 7px 8px;
            border: 1px solid #263641;
            border-radius: 4px;
            background: #070b0f;
            color: #70818b;
            font-family: monospace;
            font-size: 8px;
            line-height: 1.35;
        }
        html[data-persona-debug="true"] .persona-score-debug { display: grid; }
        .persona-score-debug-title {
            grid-column: 1 / -1;
            color: #00e1ff;
            font-weight: bold;
            letter-spacing: 0.08em;
        }
        .persona-score-debug-row {
            display: flex;
            justify-content: space-between;
            gap: 8px;
        }
        .persona-score-debug-row.winner { color: #00ffaa; font-weight: bold; }
        .rhythm-toggle.auto-controlled {
            border-style: dashed;
            opacity: 0.92;
        }
        .rhythm-toggle.auto-muted { opacity: 0.46; }
        .breath-indicator {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            color: #42505a;
            font-size: 9px;
            font-weight: bold;
            letter-spacing: 0.12em;
            transition: color 0.35s ease, text-shadow 0.35s ease;
            flex-basis: 100%;
            margin-top: 4px;
        }
        .breath-indicator span {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #1b252c;
            box-shadow: 0 0 0 1px #263641;
            transition: background 0.35s ease, box-shadow 0.35s ease;
        }
        .breath-indicator.active {
            color: #bdefff;
            text-shadow: 0 0 8px #00e1ff88;
        }
        .breath-indicator.active span {
            background: #00e1ff;
            box-shadow: 0 0 10px #00e1ffaa, 0 0 0 1px #7af6ff;
        }
        .dna-subline {
            color: #667;
            font-size: 10px;
            line-height: 1.35;
            letter-spacing: 0.03em;
        }
        .dna-section-title {
            color: #7a8894;
            font-size: 10px;
            font-weight: bold;
            letter-spacing: 0.12em;
            border-top: 1px dashed #1b2b35;
            padding-top: 8px;
            margin-top: 1px;
        }
        .dna-bar-list {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        .dna-bar-row {
            display: flex;
            align-items: center;
            gap: 7px;
            min-height: 14px;
        }
        .dna-bar-label {
            width: 62px;
            flex-shrink: 0;
            color: #667;
            font-size: 9px;
            font-weight: bold;
            letter-spacing: 0.03em;
        }
        .dna-bar-track {
            flex: 1;
            height: 9px;
            min-width: 46px;
            background: #05080c;
            border: 1px solid #172633;
            border-radius: 3px;
            overflow: hidden;
        }
        .dna-bar-fill {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #00e1ff, #00ffaa);
            opacity: 0.82;
            transition: width 0.18s ease;
        }
        .dna-bar-row.connected .dna-bar-label,
        .dna-bar-row.connected .dna-bar-value {
            color: #00ffaa;
        }
        .dna-bar-row.connected .dna-bar-fill {
            background: linear-gradient(90deg, #00ffaa, #ffcc00);
        }
        .dna-bar-value {
            width: 34px;
            flex-shrink: 0;
            color: #778;
            text-align: right;
            font-size: 9px;
            font-weight: bold;
        }
        .photo-voice-control-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            align-items: stretch;
            gap: 8px;
            min-width: 0;
            margin-top: 5px;
            padding-top: 8px;
            border-top: 1px dashed #1b2b35;
        }
        .momentum-status {
            border: 1px solid #172633;
            border-radius: 4px;
            background: #070b10;
            padding: 7px;
        }
        .momentum-status {
            display: flex;
            flex-direction: column;
            gap: 5px;
            min-width: 0;
            font-family: monospace;
        }
        .momentum-header {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 10px;
        }
        .momentum-label {
            color: #7a8894;
            font-size: 9px;
            font-weight: bold;
            letter-spacing: 0.12em;
        }
        .momentum-value {
            color: #00ffaa;
            font-size: 10px;
            font-weight: bold;
            letter-spacing: 0.04em;
        }
        .momentum-track {
            height: 6px;
            overflow: hidden;
            background: #05080c;
            border: 1px solid #172633;
            border-radius: 3px;
        }
        .momentum-fill {
            width: 0%;
            height: 100%;
            background: linear-gradient(90deg, #00e1ff, #00ffaa 58%, #d6cf18);
            opacity: 0.88;
            transition: width 180ms linear;
        }
        .momentum-meta {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto auto;
            align-items: baseline;
            align-content: start;
            gap: 4px 8px;
            min-height: calc(1.35em * 2);
            color: #52646e;
            font-size: 7px;
            font-weight: bold;
            letter-spacing: 0.07em;
            line-height: 1.35;
        }
        .momentum-reason {
            min-width: 0;
            min-height: calc(1.35em * 2);
            color: #6f858f;
            overflow-wrap: anywhere;
        }
        .momentum-target { color: #52646e; white-space: nowrap; }
        .momentum-direction { color: #7de6dc; white-space: nowrap; }
        .momentum-status[data-direction="falling"] .momentum-direction { color: #9bbda8; }
        .momentum-status[data-direction="steady"] .momentum-direction { color: #6f858f; }
        .photo-profile-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 5px;
        }
        .photo-profile-grid div {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
            background: #070a0f;
            border: 1px solid #151f2a;
            border-radius: 3px;
            padding: 5px 6px;
            min-width: 0;
        }
        .photo-profile-grid span {
            color: #a0a8ad;
            font-size: 9px;
            font-weight: bold;
            letter-spacing: 0.02em;
            white-space: nowrap;
        }
        .photo-profile-grid b {
            color: #d8eef8;
            font-size: 10px;
            font-weight: bold;
            white-space: nowrap;
        }

        .current-color-display { border-style: solid; background: #0c111a; }
        .current-color-mainline {
            display: flex;
            align-items: center;
            gap: 8px;
            min-height: 24px;
        }
        .current-color-swatch {
            width: 18px;
            height: 18px;
            flex: 0 0 18px;
            border-radius: 3px;
            background: #1b2530;
            border: 1px solid #344556;
            box-shadow: 0 0 8px rgba(120, 180, 220, 0.12);
        }
        .current-color-hex {
            color: #eaf6ff;
            font: bold 12px ui-monospace, SFMono-Regular, Menlo, monospace;
            letter-spacing: 0.04em;
        }
        .current-color-details {
            display: grid;
            gap: 3px;
            margin-top: 6px;
            color: #6f858f;
            font-size: 9px;
        }
        .current-color-details div {
            display: grid;
            grid-template-columns: 58px minmax(0, 1fr);
            gap: 6px;
            min-width: 0;
        }
        .current-color-details span { color: #81939a; }
        .current-color-details b {
            min-width: 0;
            overflow-wrap: anywhere;
            color: #c9e1ea;
            font: 10px ui-monospace, SFMono-Regular, Menlo, monospace;
            font-weight: 600;
        }

        /* リズムボタン構造 */
        .rhythm-btn-group { 
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 4px;
            width: 100%;
        }
        .rhythm-toggle {
            padding: 10px 2px; font-size: 10px; font-weight: bold; background: #15151c; border: 1px solid #2a2a35; color: #555; border-radius: 4px; cursor: pointer; transition: all 0.15s;
            text-align: center; white-space: nowrap; width: 100%;
        }
        .rhythm-toggle:hover { background: #1e1e28; color: #fff; border-color: #666; box-shadow: 0 0 8px rgba(255,255,255,0.06); }
        .rhythm-toggle.active-kick { background: #ff005518; border-color: #ff0055; color: #ff0055; }
        .rhythm-toggle.active-bass { background: #00e1ff18; border-color: #00e1ff; color: #00e1ff; }
        .rhythm-toggle.active-hat { background: #00ffaa18; border-color: #00ffaa; color: #00ffaa; }
        .rhythm-toggle.active-snare { background: #ffaa0018; border-color: #ffaa00; color: #ffaa00; }
        .rhythm-toggle.active-vinyl { background: #aa00ff18; border-color: #aa66ff; color: #aa66ff; }
        .rhythm-main-btn-group { grid-template-columns: repeat(4, 1fr); }
        .atmosphere-layer-btn-group { grid-template-columns: repeat(4, 1fr); }
        .music-layer-btn-group { grid-template-columns: repeat(2, 1fr); }
        .rhythm-toggle.active-bird { background: #d6ff4a18; border-color: #d6ff4a; color: #d6ff4a; }
        .rhythm-toggle.active-city { background: #6688aa18; border-color: #6688aa; color: #6688aa; }
        .rhythm-toggle.active-machine { background: #cc773318; border-color: #cc7733; color: #cc7733; }
        .rhythm-toggle.active-melody { background: #00b8b018; border-color: #00b8b0; color: #00b8b0; }
        .rhythm-toggle.active-chord { background: #ff669918; border-color: #ff6699; color: #ff6699; }
        .audio-section-heading {
            margin: 12px 0 7px;
            padding-bottom: 6px;
            border-bottom: 1px dashed #442233;
            color: #655;
            font-size: 10px;
            font-weight: bold;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }
        .audio-layer-sections { display: flex; flex-direction: column; }
        .audio-layer-sections .ambience-section-heading { order: 1; }
        .audio-layer-sections .atmosphere-layer-controls { order: 2; }
        .audio-layer-sections .performance-section-heading { order: 3; }
        .audio-layer-sections .performance-layer-controls { order: 4; }
        .audio-layer-sections .atmosphere-layer-btn-group,
        .audio-layer-sections .performance-layer-btn-group {
            grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
        }
        #atmosphereToggle {
            min-width: 0;
            width: 100%;
            padding: 10px 2px;
            font-size: 10px;
            font-weight: bold;
            background: #15151c;
            border: 1px solid #2a2a35;
            color: #555;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0;
        }
        #atmosphereToggle::after { content: "DRONE"; font-size: 10px; }
        #atmosphereToggle:not(.off) { background: #f3ead018; border-color: #e8ddbd; color: #f3ead0; }
        #atmosphereToggle.off { background: #15151c; border-color: #2a2a35; color: #555; }
        .sync-matrix-group { 
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 4px;
            width: 100%;
        }
        .sync-btn { padding: 8px 2px; font-size: 9px; font-weight: bold; background: #13131a; border: 1px solid #252533; color: #555; border-radius: 4px; cursor: pointer; text-align: center; white-space: nowrap; width: 100%; }
        .sync-btn.active { background: #ff337718; border-color: #ff3377; color: #ff3377; }
        .sync-btn:not(.active):hover { color: #fff; border-color: #fff; box-shadow: 0 0 6px rgba(255,255,255,0.14); text-shadow: 0 0 5px rgba(255,255,255,0.20); }
        .sync-btn.active:hover { background: #ff337718; border-color: #ff3377; color: #ff3377; box-shadow: 0 0 8px rgba(255,51,119,0.10); text-shadow: none; }
        .main-transport-bar .toggle-btn:hover,
        .main-transport-bar button.main-btn:hover:not(:disabled) {
            background: #00ffaa22;
            color: #00ffaa;
            border-color: #00ffaa;
            box-shadow: 0 0 8px rgba(0,255,170,0.12);
        }
        .main-transport-bar #loopToggle:hover,
        .main-transport-bar #flipHToggle:hover,
        .main-transport-bar #flipVToggle:hover {
            background: #191922;
            color: #00ffaa;
            border-color: #00ffaa;
            box-shadow: 0 0 8px rgba(0,255,170,0.18);
            text-shadow: none;
        }
        .main-transport-bar #loopToggle.off:hover,
        .main-transport-bar #eclipseToggle.off:hover,
        .main-transport-bar #flipHToggle.off:hover,
        .main-transport-bar #flipVToggle.off:hover {
            background: #0c0c10;
            color: #555;
            border-color: #00ffaa;
            box-shadow: 0 0 8px rgba(0,255,170,0.18);
            text-shadow: none;
        }
        .main-transport-bar #eclipseToggle.eclipse-active:hover {
            background: #00e1ff15;
            color: #00e1ff;
            border-color: #00e1ff;
            box-shadow: 0 0 8px rgba(0,225,255,0.20);
            text-shadow: none;
        }
        .main-transport-bar button.play-toggle-btn:hover:not(:disabled) {
            background: #55ffcc;
            color: #000;
            box-shadow: 0 4px 15px rgba(0, 255, 170, 0.15);
        }
        #chaosDriveToggle:hover,
        #chillDreamToggle:hover,
        #stereoSpaceToggle:hover {
            background: #222230;
            color: #00ffaa;
            border-color: #00ffaa;
            box-shadow: 0 0 8px rgba(0,255,170,0.12);
        }
        #mutationNiceToggle.off:hover,
        #mutationMidToggle.off:hover,
        #mutationRageToggle.off:hover,
        #mutationHyperToggle.off:hover {
            color: #fff;
            border-color: #fff;
            box-shadow: 0 0 6px rgba(255,255,255,0.14);
            text-shadow: 0 0 5px rgba(255,255,255,0.20);
        }
        #mutationNiceToggle.mutated-nice:hover { background: #aa00ff15; color: #aa00ff; border-color: #aa00ff; box-shadow: 0 0 8px rgba(170,0,255,0.10); text-shadow: none; }
        #mutationMidToggle.mutated-mid:hover { background: #ff880015; color: #ff8800; border-color: #ff8800; box-shadow: 0 0 8px rgba(255,136,0,0.10); text-shadow: none; }
        #mutationRageToggle.mutated-rage:hover { background: #ff005515; color: #ff0055; border-color: #ff0055; box-shadow: 0 0 8px rgba(255,0,85,0.10); text-shadow: none; }
        #mutationHyperToggle.mutated-hyper:hover {
            background: #00e1ff15;
            color: #00e1ff;
            border-color: #00e1ff;
            box-shadow: 0 0 8px rgba(0,225,255,0.10);
            text-shadow: none;
        }
        .control-center-panel .step-btn:hover,
        .control-center-panel .all-reset-btn:hover,
        .control-center-panel .toggle-btn:hover,
        .control-center-panel .preset-btn:hover {
            color: var(--system-accent, #00ffaa);
            border-color: var(--system-accent, #00ffaa);
            background: var(--system-accent-bg, rgba(0,255,170,0.035));
            box-shadow: 0 0 8px var(--system-accent-soft, #00ffaa33);
        }
        .control-center-panel #toggleSpaceAuto {
            color: var(--system-accent, #00ffaa);
            border-color: var(--system-accent-soft, #00ffaa33);
            background: var(--system-accent-bg, rgba(0,255,170,0.035));
            box-shadow: none;
            text-shadow: none;
        }
        .control-center-panel #toggleSpaceAuto.off {
            color: #555;
            border-color: #222;
            background: #0c0c10;
            box-shadow: none;
            text-shadow: none;
        }
        .control-center-panel #toggleSpaceAuto:hover {
            border-color: var(--system-accent, #00ffaa);
            box-shadow: 0 0 8px var(--system-accent-soft, #00ffaa33);
            text-shadow: none;
        }
        .control-center-panel #toggleSpaceAuto.off:hover {
            color: #555;
            background: #0c0c10;
        }
        .control-center-panel input[type="range"] {
            accent-color: var(--system-accent, #00ffaa) !important;
            background: transparent !important;
        }
        .control-center-panel progress::-webkit-progress-value { background: var(--system-accent, #00ffaa); }
        .control-center-panel progress::-moz-progress-bar { background: var(--system-accent, #00ffaa); }

        /* 🎨 マトリクス展開パネル：スマートに余白を極限までシェイプアップ */
        .matrix-flow-block { max-width: 680px; width: 100%; margin: 0 auto; align-self: center; }
        .matrix-flow-block .matrix-toggle-container { max-width: none; width: 100%; margin-top: 0; }
        .spec-flow-block { max-width: 680px; width: 100%; margin: 0 auto; align-self: center; }
        .matrix-toggle-container { max-width: 680px; margin: 20px auto 0 auto; text-align: right; }
        .matrix-container { display: none; max-width: 680px; width: 100%; margin: 15px auto; background: #0c1211; border: 1px solid #00ffaacc; border-radius: 8px; padding: 12px; text-align: left; }
        .matrix-header { font-size: 12px; color: #00ffaa; font-weight: bold; margin-bottom: 8px; border-bottom: 1px solid #00ffaa33; padding-bottom: 6px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; }
        .matrix-row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; background: #101715; border: 1px solid #1d2a26; border-radius: 4px; padding: 6px 10px; margin-bottom: 5px; gap: 12px; }
        .matrix-row:last-child { margin-bottom: 0; }
        .matrix-row-title { font-size: 11px; font-weight: bold; width: 145px; flex-shrink: 0; font-family: monospace; color: #d0d0d6; white-space: nowrap; }
        .matrix-slider-zone { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; background: #070c0a; padding: 4px 10px; border-radius: 4px; border: 1px solid #121c19; }
        .matrix-slider-zone input[type="range"] { flex: 1; margin: 0; accent-color: #00ffaa; min-width: 50px; }
        .matrix-pitch-val { font-size: 11px; font-family: monospace; color: #00ffaa; width: 45px; flex-shrink: 0; text-align: right; font-weight: bold; }

        /* v225：演奏決定の透明化パネル */
        .transparency-panel {
            width: 100%;
            max-width: none;
            margin: 0;
            align-self: stretch;
            padding: clamp(18px, 2.4vw, 28px);
            overflow: hidden;
            color: #cdd7d5;
            background:
                linear-gradient(145deg, var(--system-accent-bg, rgba(0, 255, 170, 0.035)), transparent 42%),
                #090c0f;
            border: 1px solid var(--system-accent-soft, #00ffaa33);
            border-radius: 9px;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
            text-align: left;
        }
        .transparency-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 20px;
            padding-bottom: 18px;
            border-bottom: 1px solid #1d2928;
        }
        .transparency-heading { min-width: 0; }
        .transparency-eyebrow {
            margin: 0 0 5px;
            color: var(--system-accent, #00ffaa);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.16em;
        }
        .transparency-heading h2 {
            margin: 0;
            color: #f0f6f4;
            font-size: clamp(17px, 2vw, 22px);
            font-weight: 620;
            line-height: 1.45;
            letter-spacing: 0.045em;
        }
        .transparency-heading > p:last-child {
            max-width: 760px;
            margin: 8px 0 0;
            color: #83908e;
            font-size: 12px;
            line-height: 1.7;
        }
        .transparency-toolbar {
            display: flex;
            flex: 0 0 auto;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-end;
            gap: 7px;
            max-width: 360px;
        }
        .transparency-mode-switch {
            display: inline-grid;
            grid-template-columns: repeat(2, minmax(58px, 1fr));
            gap: 3px;
            padding: 3px;
            border: 1px solid #25302f;
            border-radius: 6px;
            background: #07090b;
        }
        .transparency-mode-btn,
        .transparency-latest-btn,
        .transparency-history button {
            min-height: 32px;
            border: 1px solid #283331;
            border-radius: 4px;
            background: #0d1214;
            color: #8e9b98;
            font: 600 11px/1.3 inherit;
            letter-spacing: 0.035em;
            cursor: pointer;
        }
        .transparency-mode-btn { padding: 6px 10px; }
        .transparency-mode-btn.active,
        .transparency-mode-btn[aria-pressed="true"] {
            color: #04110d;
            border-color: var(--system-accent, #00ffaa);
            background: var(--system-accent, #00ffaa);
            box-shadow: 0 0 10px var(--system-accent-soft, #00ffaa33);
        }
        .transparency-latest-btn { padding: 7px 11px; }
        .transparency-latest-btn:not(:disabled):hover,
        .transparency-history button:hover,
        .transparency-history button[aria-pressed="true"] {
            color: var(--system-accent, #00ffaa);
            border-color: var(--system-accent, #00ffaa);
            background: var(--system-accent-bg, rgba(0, 255, 170, 0.035));
        }
        .transparency-latest-btn:disabled {
            opacity: 0.42;
            cursor: not-allowed;
        }
        .transparency-mode-btn:focus-visible,
        .transparency-latest-btn:focus-visible,
        .transparency-history button:focus-visible,
        .transparency-card summary:focus-visible {
            outline: 2px solid var(--system-accent, #00ffaa);
            outline-offset: 2px;
        }
        .transparency-follow-state,
        .transparency-status-badge,
        .transparency-badge {
            display: inline-flex;
            align-items: center;
            min-height: 25px;
            padding: 4px 8px;
            border: 1px solid #27433a;
            border-radius: 999px;
            color: var(--system-accent, #00ffaa);
            background: var(--system-accent-bg, rgba(0, 255, 170, 0.035));
            font: 700 10px/1.25 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            letter-spacing: 0.035em;
            white-space: nowrap;
        }
        .transparency-follow-state.is-pinned,
        .transparency-status-badge[data-state="pinned"] {
            color: #ffcc66;
            border-color: #5b4720;
            background: #2a210d;
        }
        .transparency-live-status {
            display: flex;
            align-items: center;
            gap: 10px;
            min-height: 42px;
            margin-top: 14px;
            padding: 8px 11px;
            color: #93a09e;
            border: 1px solid #1d2928;
            border-radius: 6px;
            background: #080b0d;
            font-size: 11px;
            line-height: 1.55;
        }
        .transparency-section {
            padding-top: 24px;
        }
        .transparency-section + .transparency-section {
            margin-top: 22px;
            border-top: 1px solid #1a2423;
        }
        .transparency-section-header {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-bottom: 12px;
        }
        .transparency-section-header > span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            flex: 0 0 28px;
            border: 1px solid var(--system-accent-soft, #00ffaa33);
            border-radius: 50%;
            color: var(--system-accent, #00ffaa);
            background: var(--system-accent-bg, rgba(0, 255, 170, 0.035));
            font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        }
        .transparency-section-header h3 {
            margin: 1px 0 2px;
            color: #e6eeec;
            font-size: 14px;
            line-height: 1.45;
            letter-spacing: 0.065em;
        }
        .transparency-section-header p {
            margin: 0;
            color: #74817f;
            font-size: 11px;
            line-height: 1.55;
        }
        .transparency-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }
        .transparency-card {
            min-width: 0;
            margin: 0;
            padding: 14px;
            border: 1px solid #202b2a;
            border-radius: 6px;
            background: rgba(13, 17, 20, 0.92);
        }
        .transparency-card-wide { grid-column: 1 / -1; }
        .transparency-card h4 {
            margin: 0 0 10px;
            color: #d8e3e0;
            font-size: 12px;
            line-height: 1.45;
            letter-spacing: 0.055em;
        }
        .transparency-card-content {
            min-width: 0;
            color: #aab5b2;
            font-size: 12px;
            line-height: 1.65;
            overflow-wrap: anywhere;
        }
        .transparency-card-content > :first-child { margin-top: 0; }
        .transparency-card-content > :last-child { margin-bottom: 0; }
        .transparency-empty {
            margin: 0;
            color: #66716f;
            font-size: 11px;
            line-height: 1.6;
        }
        .transparency-detail-only { display: none !important; }
        .transparency-panel.is-detail .transparency-detail-only { display: block !important; }
        .transparency-panel.is-detail .transparency-value-row.transparency-detail-only {
            display: grid !important;
        }
        .transparency-panel.is-detail .transparency-flag-grid.transparency-detail-only,
        .transparency-panel.is-detail .transparency-candidate-details.transparency-detail-only {
            display: grid !important;
        }
        .transparency-value-row {
            display: grid;
            grid-template-columns: minmax(118px, 0.72fr) minmax(0, 1.28fr);
            gap: 9px;
            padding: 5px 0;
            border-bottom: 1px solid #182220;
        }
        .transparency-value-row:last-child { border-bottom: none; }
        .transparency-value-label {
            color: #778582;
            font-size: 10px;
            font-weight: 650;
            letter-spacing: 0.025em;
        }
        .transparency-value {
            min-width: 0;
            color: #d4dfdc;
            font: 600 11px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            overflow-wrap: anywhere;
        }
        .transparency-value.is-unavailable { color: #c9a766; font-weight: 500; }
        .transparency-message {
            margin: 6px 0;
            color: #82908d;
            font-size: 11px;
            line-height: 1.65;
        }
        .transparency-message.is-rest-notice {
            padding: 8px 10px;
            color: #e2c879;
            border: 1px solid #493d20;
            border-radius: 4px;
            background: #1b170b;
        }
        .transparency-color-preview {
            display: flex;
            align-items: center;
            gap: 9px;
            margin-bottom: 9px;
            padding: 8px;
            border: 1px solid #1d2927;
            border-radius: 5px;
            background: #080b0d;
            color: #d4dfdc;
            font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        }
        .transparency-color-swatch {
            width: 28px;
            height: 28px;
            flex: 0 0 28px;
            border: 1px solid #71807c;
            border-radius: 4px;
            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
        }
        .transparency-feature-grid,
        .transparency-color-map-grid,
        .transparency-flag-grid,
        .transparency-candidate-details {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
            gap: 8px;
            margin-top: 10px;
        }
        .transparency-feature-card,
        .transparency-color-map-card,
        .transparency-candidate-card,
        .transparency-causal-card {
            min-width: 0;
            padding: 10px;
            border: 1px solid #1d2927;
            border-radius: 5px;
            background: #090d0f;
        }
        .transparency-causal-card + .transparency-causal-card { margin-top: 8px; }
        .transparency-candidate-card.is-accepted {
            border-color: var(--system-accent, #00ffaa);
            box-shadow: inset 3px 0 0 var(--system-accent, #00ffaa);
        }
        .transparency-card-title,
        .transparency-path-title {
            margin: 0 0 7px !important;
            color: #e0ebe8 !important;
            font-size: 11px !important;
            letter-spacing: 0.035em !important;
        }
        .transparency-path-stage {
            position: relative;
            margin-bottom: 8px;
            padding: 10px 11px 10px 16px;
            border-left: 2px solid var(--system-accent-soft, #00ffaa33);
            border-radius: 0 4px 4px 0;
            background: #090d0f;
        }
        .transparency-path-stage::before {
            content: "";
            position: absolute;
            top: 14px;
            left: -5px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--system-accent, #00ffaa);
            box-shadow: 0 0 8px var(--system-accent-soft, #00ffaa33);
        }
        .transparency-authority-box {
            margin-top: 12px;
            padding: 11px;
            border: 1px solid var(--system-accent-soft, #00ffaa33);
            border-radius: 5px;
            background: var(--system-accent-bg, rgba(0, 255, 170, 0.035));
        }
        .transparency-rest-evaluation,
        .transparency-audio-graph,
        .transparency-raw-details {
            margin-top: 10px;
            padding: 10px;
            border: 1px dashed #293432;
            border-radius: 5px;
            background: #080b0d;
        }
        .transparency-summary-list,
        .transparency-warning-list,
        .transparency-runtime-error-list {
            display: grid;
            gap: 6px;
            margin: 0;
            padding-left: 18px;
        }
        .transparency-warning-list { color: #c8b47c; }
        .transparency-runtime-error-list {
            margin-top: 10px;
            color: #ff8793;
        }
        .transparency-live-status.is-live { border-color: #1d4c3c; }
        .transparency-live-status.is-rest { color: #d6bc72; border-color: #493d20; }
        .transparency-live-status.is-pinned { color: #efcc74; border-color: #5b4720; }
        .transparency-live-status.is-waiting { color: #7f8a88; }
        .transparency-table-wrap {
            max-width: 100%;
            overflow-x: auto;
            overscroll-behavior-x: contain;
            scrollbar-color: var(--system-accent-soft, #00ffaa33) #07090b;
            scrollbar-width: thin;
        }
        .transparency-table-wrap table {
            width: 100%;
            min-width: 620px;
            border-collapse: collapse;
            color: #aab5b2;
            font-size: 11px;
            text-align: left;
        }
        .transparency-table-wrap th,
        .transparency-table-wrap td {
            padding: 8px 9px;
            border-bottom: 1px solid #202b2a;
            vertical-align: top;
        }
        .transparency-table-wrap th {
            color: #d8e3e0;
            background: #0a0e10;
            font-weight: 700;
            white-space: nowrap;
        }
        .transparency-table-wrap tr:last-child td { border-bottom: none; }
        .transparency-decision-card {
            border-color: var(--system-accent-soft, #00ffaa33);
            background: linear-gradient(90deg, var(--system-accent-bg, rgba(0, 255, 170, 0.035)), #0c1113 42%);
        }
        .transparency-decision-path .transparency-route,
        .transparency-decision-path ol {
            display: grid;
            gap: 8px;
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .transparency-decision-path .transparency-route-step,
        .transparency-decision-path li {
            position: relative;
            padding: 9px 11px 9px 16px;
            border-left: 2px solid var(--system-accent-soft, #00ffaa33);
            background: #090d0f;
        }
        .transparency-decision-path .transparency-route-step::before,
        .transparency-decision-path li::before {
            content: "";
            position: absolute;
            left: -5px;
            top: 14px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--system-accent, #00ffaa);
            box-shadow: 0 0 8px var(--system-accent-soft, #00ffaa33);
        }
        .transparency-history {
            display: flex;
            align-items: stretch;
            gap: 7px;
            min-height: 42px;
            padding: 9px;
            overflow-x: auto;
            border: 1px solid #202b2a;
            border-radius: 6px;
            background: #080b0d;
            overscroll-behavior-x: contain;
        }
        .transparency-history > .transparency-empty { align-self: center; padding-inline: 3px; }
        .transparency-history-list {
            display: flex;
            align-items: stretch;
            gap: 7px;
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .transparency-history-item { display: flex; }
        .transparency-history button {
            flex: 0 0 auto;
            min-width: 76px;
            padding: 6px 9px;
            text-align: left;
        }
        .transparency-history button span {
            display: block;
            margin-top: 2px;
            color: #6f7c79;
            font-size: 9px;
            font-weight: 500;
            max-width: 170px;
            white-space: normal;
        }
        .transparency-warning-card {
            border-color: #4a3e24;
            background: linear-gradient(135deg, rgba(255, 190, 70, 0.035), #0d1114 52%);
        }
        .transparency-warning-card h4 { color: #e6c77a; }
        .transparency-card details,
        details.transparency-card { color: #aab5b2; }
        .transparency-card summary {
            color: #d8e3e0;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
        }
        details.transparency-card[open] summary { margin-bottom: 12px; }
        .transparency-glossary dl,
        .transparency-glossary-list { display: grid; gap: 8px; margin: 0; }
        .transparency-glossary-item {
            padding-bottom: 8px;
            border-bottom: 1px solid #1a2423;
        }
        .transparency-glossary dt,
        .transparency-glossary-list dt { color: #d8e3e0; font-weight: 700; }
        .transparency-glossary dd,
        .transparency-glossary-list dd { margin: 2px 0 0; color: #879491; }

        /* 📖 QUICK GUIDE / SYSTEM MAP */
        .note { 
            color: #999; font-size: 12px; max-width: 680px; width: 100%; margin: 20px auto; line-height: 1.8; 
            display: block; text-align: left; background: #0b0b10; padding: 25px; 
            border-radius: 6px; border: 1px solid #151520; margin-top: 15px;
        }
        .note ul { list-style-type: square; padding-left: 18px; margin: 0; display: flex; flex-direction: column; gap: 12px; color: #999; }
        .guide-toggle-container {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
            width: 100%;
            margin-top: 20px;
        }
        .guide-toggle-btn {
            width: 100%;
            min-width: 0;
            min-height: 36px;
            padding: 8px 10px;
            letter-spacing: 0.04em;
            color: var(--system-accent, #00ffaa);
        }
        .guide-toggle-btn.off {
            color: #666;
            border-color: #24242f;
            background: #0c0c10;
            box-shadow: none;
        }
        .guide-toggle-btn:not(.off) {
            color: var(--system-accent, #00ffaa);
            border-color: var(--system-accent, #00ffaa);
            background: var(--system-accent-bg, rgba(0,255,170,0.035));
            box-shadow: 0 0 10px var(--system-accent-soft, #00ffaa33);
        }
        .guide-toggle-btn:hover,
        .guide-toggle-btn:focus-visible {
            color: var(--system-accent, #00ffaa);
            border-color: var(--system-accent, #00ffaa);
            background: var(--system-accent-bg, rgba(0,255,170,0.035));
            box-shadow: 0 0 8px var(--system-accent-soft, #00ffaa33);
        }
        .guide-toggle-btn:focus-visible { outline: 1px solid var(--system-accent, #00ffaa); outline-offset: 2px; }
        .guide-panel[hidden] { display: none !important; }
        .guide-panel { overflow-wrap: anywhere; }
        .system-map-panel {
            max-height: min(72vh, 820px);
            overflow-y: auto;
            overscroll-behavior: contain;
            scrollbar-color: var(--system-accent-soft, #00ffaa33) #08080c;
            scrollbar-width: thin;
        }
        .system-map-panel::-webkit-scrollbar { width: 8px; }
        .system-map-panel::-webkit-scrollbar-track { background: #08080c; }
        .system-map-panel::-webkit-scrollbar-thumb { background: var(--system-accent-soft, #00ffaa33); border-radius: 999px; }
        .guide-panel-header { padding-bottom: 20px; }
        .guide-panel-header h2 {
            margin: 3px 0 10px;
            color: #fff;
            font-size: 17px;
            line-height: 1.35;
            letter-spacing: 0.16em;
            font-weight: 650;
        }
        .guide-panel-header p:last-child { margin-bottom: 0; }
        .guide-eyebrow {
            margin: 0;
            color: var(--system-accent, #00ffaa);
            font-size: 9px;
            font-weight: bold;
            letter-spacing: 0.18em;
        }
        .guide-section {
            padding: 22px 0;
            border-top: 1px solid #22222c;
        }
        .guide-section:last-child { padding-bottom: 0; }
        .guide-section-title {
            margin: 0 0 14px;
            color: var(--system-accent, #00ffaa);
            font-size: 13px;
            line-height: 1.5;
            letter-spacing: 0.11em;
        }
        .guide-section-subtitle {
            margin: 18px 0 8px;
            color: #eee;
            font-size: 11px;
            line-height: 1.6;
            letter-spacing: 0.06em;
        }
        .guide-section-subtitle:first-child { margin-top: 0; }
        .guide-section-subtitle span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            margin-right: 5px;
            border: 1px solid var(--system-accent-soft, #00ffaa33);
            border-radius: 50%;
            color: var(--system-accent, #00ffaa);
            font-family: monospace;
        }
        .guide-panel p { margin: 0 0 10px; }
        .guide-panel p:last-child { margin-bottom: 0; }
        .guide-panel strong { color: #ddd; }
        .guide-panel ul { margin: 10px 0 14px; gap: 7px; }
        .guide-step-grid { display: grid; gap: 8px; }
        .guide-step-grid article,
        .guide-key-map article,
        .guide-compare-grid article {
            min-width: 0;
            padding: 13px 14px;
            border: 1px solid #20202a;
            border-radius: 5px;
            background: #0e0e14;
        }
        .guide-key-map {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }
        .guide-key-map.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .guide-key-map h4 {
            margin: 0 0 6px;
            color: #eee;
            font-size: 10px;
            letter-spacing: 0.04em;
        }
        .guide-key-map p { font-size: 11px; }
        .guide-definition-list { display: grid; gap: 8px; margin: 0; }
        .guide-definition-list > div {
            display: grid;
            grid-template-columns: minmax(126px, 0.7fr) minmax(0, 1.8fr);
            gap: 12px;
            padding: 10px 12px;
            border-left: 2px solid var(--system-accent-soft, #00ffaa33);
            background: #0e0e13;
        }
        .guide-definition-list dt { color: #ddd; font-size: 10px; font-weight: bold; letter-spacing: 0.04em; }
        .guide-definition-list dd { margin: 0; font-size: 11px; }
        .guide-definition-list.compact > div { grid-template-columns: minmax(105px, 0.65fr) minmax(0, 1.8fr); }
        .guide-route {
            max-width: 100%;
            margin: 14px 0;
            padding: 16px;
            overflow-x: auto;
            border: 1px solid #202631;
            border-left-color: var(--system-accent, #00ffaa);
            border-radius: 5px;
            background: #07090d;
            color: #c8d0d0;
            font: 11px/1.65 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
            text-align: left;
            white-space: pre;
            tab-size: 4;
        }
        .compact-route { white-space: pre-wrap; }
        .guide-columns { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; }
        .guide-compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
        .guide-recommendation { background: linear-gradient(90deg, var(--system-accent-bg, rgba(0,255,170,0.035)), transparent); padding-left: 15px; padding-right: 15px; }
        .guide-note-block { border: 1px solid var(--system-accent-soft, #00ffaa33); border-radius: 5px; padding: 18px; background: var(--system-accent-bg, rgba(0,255,170,0.035)); }
        .guide-principle { color: #fff; font-size: 13px; font-weight: bold; letter-spacing: 0.06em; }
        .guide-principle-map { color: var(--system-accent, #00ffaa); font-weight: bold; }

        /* ==========================================================================
           📱 レスポンシブホールド制御
           ========================================================================= */

        /* PHOTO INTERPRETATION STATUS：全レイアウト共通の横長カード */
        .dna-status-box.dna-wide-layout {
                width: 100%;
                max-width: none;
                padding: 14px;
                gap: 0;
                border-radius: 8px;
        }
        .dna-status-box.dna-wide-layout .dna-layout-grid {
                display: grid;
                grid-template-columns: minmax(210px, 0.82fr) minmax(275px, 1.12fr) minmax(245px, 1fr);
                align-items: start;
                gap: 12px;
        }
        .dna-status-box.dna-wide-layout .dna-data-block,
        .dna-status-box.dna-wide-layout .dna-profile-block {
                padding-left: 12px;
                border-left: 1px dashed #1b2b35;
        }
        .dna-status-box.dna-wide-layout .dna-status-header {
                flex-direction: column;
                gap: 8px;
        }
        .dna-status-box.dna-wide-layout .dna-status-right {
                width: 100%;
                flex-direction: row;
                flex-wrap: wrap;
                align-items: center;
                justify-content: flex-start;
                gap: 6px 10px;
        }
        .dna-status-box.dna-wide-layout .dna-confidence {
                min-width: 38px;
                text-align: left;
        }
        .dna-status-box.dna-wide-layout .dna-section-title {
                border-top: none;
                padding-top: 0;
                margin: 0 0 2px;
        }
        .dna-status-box.dna-wide-layout .dna-bar-list {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 5px 8px;
        }
        .dna-status-box.dna-wide-layout .dna-bar-row {
                gap: 4px;
                min-width: 0;
        }
        .dna-status-box.dna-wide-layout .dna-bar-label {
                width: 43px;
                font-size: 8px;
        }
        .dna-status-box.dna-wide-layout .dna-bar-track { min-width: 28px; }
        .dna-status-box.dna-wide-layout .dna-bar-value {
                width: 28px;
                font-size: 8px;
        }
        .dna-status-box.dna-wide-layout .photo-profile-grid { gap: 4px; }
        .dna-status-box.dna-wide-layout .photo-profile-grid div { padding: 4px 5px; }
        .dna-status-box.dna-wide-layout .photo-profile-grid span { font-size: 8px; }
        .dna-status-box.dna-wide-layout .photo-profile-grid b { font-size: 9px; }

        /* 1.5／2カラム共通：EXPAND群を420px・右寄せの同一基準で保持 */
        @media (min-width: 1280px) {
            .matrix-flow-block {
                max-width: 420px;
                align-self: flex-end;
                margin-left: auto;
                margin-right: 0;
            }
            .matrix-flow-block .matrix-container {
                max-width: 100%;
            }
            .spec-flow-block {
                max-width: 420px;
                margin-top: -8px;
                margin-left: auto;
                margin-right: 0;
            }
            .spec-flow-block .guide-toggle-container {
                margin-top: 6px;
            }
            .spec-flow-block .note {
                margin-top: 10px;
            }
        }

        @media (min-width: 1100px) and (max-width: 1450px) {

            .scan-mode-control{
                flex: 0 1 642px;
                max-width: 642px;
                margin: 0 auto;
            }

        }

        /* 1100〜1279px：1.5カラムを維持する中間レイアウト */
        @media (min-width: 1100px) and (max-width: 1279px) {
            .workspace-grid {
                display: flex;
                flex-direction: row;
                align-items: flex-start;
                gap: 14px;
                max-width: 100%;
                width: 100%;
            }

            .main-stream {
                flex: 1 1 auto;
                min-width: 0;
            }

            .side-monitor-stream {
                flex: 0 0 300px;
                width: 300px;
                min-width: 300px;
                max-width: 300px;
            }

            .dna-status-box.dna-wide-layout .dna-layout-grid {
                grid-template-columns:
                    minmax(180px, 0.82fr)
                    minmax(235px, 1.12fr)
                    minmax(205px, 1fr);
                gap: 10px;
            }

            .main-transport-bar {
                gap: 6px;
            }

            button.main-btn,
            button.play-toggle-btn,
            button.stop-btn {
                width: 88px;
            }

                .control-center-panel .control-group {
                gap: 6px;
            }

            .control-center-panel .control-group label {
                width: 118px;
                font-size: 10px;
            }

            .control-center-panel .control-group input[type="range"] {
                min-width: 70px;
                max-width: 150px;
            }

            .control-center-panel .control-group .val {
                width: 48px;
                font-size: 11px;
            }

            .control-center-panel .step-tuning {
                flex-shrink: 0;
            }

            .control-center-panel .reset-btn {
                padding: 4px 6px;
                font-size: 9px;
            }

            .matrix-flow-block {
                max-width: 420px;
                align-self: flex-end;
                margin-left: auto;
                margin-right: 0;
            }

            .matrix-flow-block .matrix-container {
                max-width: 100%;
            }

            .spec-flow-block {
                max-width: 420px;
                margin-top: -8px;
                margin-left: auto;
                margin-right: 0;
            }

            .spec-flow-block .guide-toggle-container {
                max-width: 100%;
                margin-top: 6px;
            }

            .spec-flow-block .note {
                margin-top: 10px;
            }
        }

        /* 💡 1099px以下：1カラム化とトランスポートバーの「LOOPの後ろから強制改行」 */
        @media (max-width: 1099px) {
            /* 1. ワークスペースをグリッド化し、パーツのエリアを指定 */
            .workspace-grid { 
                display: grid;
                grid-template-columns: 1fr;
                grid-template-areas: 
                    "photo"
                    "photo-status"
                    "ai-engine"
                    "sound-console"
                    "matrix"
                    "transparency"
                    "spec";
                justify-items: center;
                gap: 20px;
            }

            /* 2. 各パーツをグリッドのエリアにカチッとハメ込む */
            .photo-master-stage { 
                grid-area: photo; 
                width: 100%;
                max-width: 680px;
            }
            .side-monitor-stream { 
                grid-area: ai-engine; 
                width: 100%; 
                max-width: 680px; 
                flex: none; 
                margin: 0 auto;
            }
            .control-center-panel { 
                grid-area: sound-console; 
                width: 100%;
                max-width: 680px;
            }
            .dna-status-box.dna-wide-layout {
                grid-area: photo-status;
                width: 100%;
                max-width: 680px;
            }
            .matrix-flow-block {
                grid-area: matrix;
                width: 100%;
                max-width: 680px;
            }
            .transparency-panel {
                grid-area: transparency;
                width: 100%;
                max-width: 680px;
                margin: 0 auto;
            }
            .spec-flow-block {
                grid-area: spec;
                width: 100%;
                max-width: 680px;
                margin-top: -8px;
            }
            .spec-flow-block .guide-toggle-container {
                margin-top: 6px;
            }
            .spec-flow-block .note {
                margin-top: 10px;
            }

            /* main-stream自体の枠線を消してレイアウトの邪魔をさせない */
            .main-stream { 
                display: contents; 
            }

            /* 1カラムでも横長版を維持し、PROFILEのみ次行へ自然に折り返す */
            .dna-status-box.dna-wide-layout .dna-layout-grid {
                grid-template-columns: minmax(190px, 0.75fr) minmax(300px, 1.25fr);
            }
            .dna-status-box.dna-wide-layout .dna-profile-block {
                grid-column: 1 / -1;
                padding: 10px 0 0;
                border-left: none;
                border-top: 1px dashed #1b2b35;
            }
            .dna-status-box.dna-wide-layout .photo-profile-grid {
                grid-template-columns: repeat(4, minmax(0, 1fr));
            }

            /* --- 以下、元の調整コードをそのまま綺麗に統合 --- */
            .console-internal-flex { flex-direction: column; gap: 20px; }
            .console-left-sliders { border-right: none; padding-right: 0; width: 100%; }
            .console-right-presets { width: 100%; justify-content: flex-start; }
    
            .preset-grid-zone { 
                grid-template-columns: repeat(4, 1fr); 
                justify-content: center;
                width: 100%;
            }

            .side-monitor-stream .tuning-panel { align-items: center; text-align: center; }
            .side-monitor-stream .tuning-panel-header { width: 100%; justify-content: center; }
            .side-monitor-stream .color-mood-box { margin-left: auto; margin-right: auto; }
            .side-monitor-stream .control-group { justify-content: center; margin-left: auto; margin-right: auto; }
    
            .rhythm-btn-group, .sync-matrix-group { 
                grid-template-columns: repeat(5, 1fr); 
                justify-content: center;
                max-width: 100%;
            }

            .side-monitor-stream label[for="drumReverbParam"] {
                width: 115px !important; 
            }

            /* トランスポートの改行ロジック */
            .main-transport-bar {
                justify-content: center;
                flex-wrap: wrap;
            }
            .main-transport-bar .transport-sub-group:nth-child(1) {
                flex-basis: 100%;
                justify-content: center;
            }
        }

        /* 💡 624px以下：マトリクス行の改行を阻止し、合わせて自動でバーが縮む設計へホールド */
        @media (max-width: 624px) {
            .main-transport-bar {
                flex-direction: row;
                justify-content: center;
                align-items: center;
                gap: 12px 14px;
                padding: 15px;
            }
            .main-transport-bar > .transport-sub-group {
                flex-basis: auto; /* 1200px以下の100%固定を解除し、流動中央ホールドへ移行 */
                width: auto;
                justify-content: center;
                flex-shrink: 0;
            }

            .control-center-panel .control-group { 
                flex-direction: row; 
                align-items: center; 
                flex-wrap: nowrap; 
                gap: 8px; 
                width: 100%;
            }

            .control-center-panel .control-group label { width: 100px; font-size: 10px; }
            .control-center-panel .control-group input[type="range"] { min-width: 60px; }
            .control-center-panel .control-group .step-tuning { display: flex; }
            .control-center-panel .control-group .val { width: 40px; font-size: 11px; }
            .control-center-panel .control-group .reset-btn { padding: 4px 6px; font-size: 10px; }
            .console-tab-header > h3 {
                flex-basis: 100%;
                text-align: center;
            }
            .console-tab-header-actions {
                width: 100%;
                justify-content: space-between;
            }
            .console-tab-list {
                flex: 1 1 auto;
            }
            .console-tab-btn {
                flex: 1;
                padding-inline: 5px;
            }
            .console-lab-note {
                text-align: center;
            }

            /* 🎨 マトリクスの624px幅以下でも改行させず、バーをフレキシブルに追従縮小 */
            .matrix-row { flex-direction: row; align-items: center; gap: 6px; }
            .matrix-row-title { width: 95px; font-size: 10px; }
            .matrix-slider-zone { padding: 4px 6px; gap: 6px; }
            .matrix-pitch-val { width: 38px; font-size: 10px; }
            
            .preset-grid-zone { grid-template-columns: repeat(2, 1fr); }
            .preset-btn { white-space: normal; font-size: 10px; padding: 10px 2px; }
            
            .rhythm-btn-group { grid-template-columns: repeat(3, 1fr); }
            .rhythm-toggle:nth-child(4), .rhythm-toggle:nth-child(5) { grid-column: span 1; }
            .sync-matrix-group { grid-template-columns: repeat(3, 1fr); }
            
            .side-monitor-stream .control-group { flex-direction: row; flex-wrap: nowrap; align-items: center; width: 100%; }
            .side-monitor-stream .control-group label { width: 85px; font-size: 10px; margin-bottom: 0; }
            .side-monitor-stream .control-group input[type="range"] { flex: 1; max-width: 120px; min-width: 50px; margin: 0 4px; }
            .side-monitor-stream .control-group .step-tuning { transform: scale(0.9); transform-origin: right center; }
            .photo-profile-grid { grid-template-columns: 1fr; }
            .dna-status-box.dna-wide-layout .photo-profile-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .dna-bar-label { width: 58px; }
            .dna-bar-value { width: 32px; }

            .transparency-panel { padding: 16px 12px; }
            .transparency-header { flex-direction: column; gap: 14px; }
            .transparency-toolbar { width: 100%; max-width: none; justify-content: flex-start; }
            .transparency-mode-switch { flex: 1 1 150px; }
            .transparency-latest-btn { flex: 1 1 145px; }
            .transparency-follow-state { flex: 0 0 auto; }
            .transparency-live-status { align-items: flex-start; }
            .transparency-grid { grid-template-columns: minmax(0, 1fr); }
            .transparency-card-wide { grid-column: auto; }
            .transparency-section-header p { line-height: 1.45; }
            .transparency-table-wrap table { min-width: 560px; }
            .transparency-value-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
            .transparency-feature-grid,
            .transparency-color-map-grid,
            .transparency-flag-grid,
            .transparency-candidate-details { grid-template-columns: minmax(0, 1fr); }

            .control-center-panel .control-group .val {
                width: 60px;
                font-size: 11px;
            }

            .guide-toggle-container { grid-template-columns: minmax(0, 1fr); }
            .guide-toggle-btn { min-height: 38px; }
            .guide-panel { padding: 20px 15px; }
            .system-map-panel {
                max-height: none;
                overflow-y: visible;
                overscroll-behavior: auto;
            }
            .guide-key-map,
            .guide-key-map.compact,
            .guide-compare-grid { grid-template-columns: minmax(0, 1fr); }
            .guide-columns { grid-template-columns: minmax(0, 1fr); }
            .guide-definition-list > div,
            .guide-definition-list.compact > div {
                grid-template-columns: minmax(0, 1fr);
                gap: 5px;
            }
            .guide-route { padding: 13px 12px; font-size: 10px; }
        }

        @media (min-width: 567px) and (max-width: 1279px) {
            .main-transport-bar {
                justify-content: stretch;
                align-items: stretch;
                gap: 8px;
                padding: 12px;
            }
            .main-transport-bar > .transport-sub-group {
                flex: 1 1 100%;
                width: 100%;
                min-width: 0;
                justify-content: stretch;
                gap: 8px;
            }
            .main-transport-bar > .scan-mode-control {
                flex: 1 1 100%;
                width: 100%;
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            button.main-btn, button.play-toggle-btn, button.stop-btn, .main-transport-bar .toggle-btn {
                flex: 1 1 0;
                width: auto;
                max-width: none;
                min-width: 0;
            }
        }

        /* 💡 566px以下：ミニマム画面対応（3×3グリッド＆ドラム隙間確保） */
        @media (max-width: 566px) {
            body { padding: 16px 8px; }
            h1 { font-size: 21px; letter-spacing: 0.18em; }
            .sample-gallery { margin-top: 8px; max-width: 100%; }
            .sample-gallery-header { align-items: flex-start; flex-direction: column; gap: 4px; }
            .sample-gallery-status { text-align: left; }
            .sample-thumb { flex-basis: 82px; height: 54px; }
            
            /* カード自体の内余白を調整し、横幅の固定化を完全解除 */
            .tuning-panel { padding: 15px 10px !important; width: 100% !important; min-width: 0 !important; }
            .photo-master-stage { padding: 4px !important; width: 100% !important; min-width: 0 !important; }

            .dna-status-box.dna-wide-layout .dna-layout-grid {
                grid-template-columns: minmax(0, 1fr);
            }
            .dna-status-box.dna-wide-layout .dna-data-block,
            .dna-status-box.dna-wide-layout .dna-profile-block {
                grid-column: 1;
                padding: 10px 0 0;
                border-left: none;
                border-top: 1px dashed #1b2b35;
            }
            /* 1. ドラムリバーブ周りの5px隙間を確実にホールド */
            .side-monitor-stream .control-group[style*="margin-bottom: 0"] {
                display: flex !important;
                flex-direction: row !important;
                align-items: center !important;
                gap: 5px !important; 
            }
            .side-monitor-stream label[for="drumReverbParam"] {
                width: 78px !important;
                margin-right: 5px !important;
            }
            #drumReverbParam {
                margin: 0 5px !important;
            }

            /* 2. トランスポートバーを大正解の「3×3グリッド」へ完全最適化 */
            .main-transport-bar { 
                padding: 10px 8px !important; 
                gap: 6px !important; 
                display: grid !important;
                /* 9個のボタンすべてを直接3列×3行（3×3）の均等格子に配置 */
                grid-template-columns: repeat(3, 1fr) !important; 
                width: 100% !important; 
                max-width: 100% !important;
                min-width: 0 !important;
            }
            
            /* グループ用の外枠がグリッド配置の邪魔をしないように完全に無効化 */
            .main-transport-bar > .transport-sub-group { 
                display: contents !important; 
            }
            .main-transport-bar > .scan-mode-control {
                grid-column: 1 / -1;
                width: 100%;
                min-width: 0;
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            
            /* 9個すべてのボタンの固定幅を解除し、3×3マトリクス内に等幅で100%フィットさせる */
            button.main-btn, button.play-toggle-btn, button.stop-btn, .main-transport-bar .toggle-btn { 
                width: 100% !important; 
                max-width: none !important;
                min-width: 0 !important; 
                height: 36px !important;
                font-size: 9px !important; /* スマホ幅で文字が絶対にはみ出さないシャープなサイズ */
                letter-spacing: 0em !important;
                white-space: nowrap !important; /* ボタン内での予期せぬ文字改行を完全防御 */
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                margin: 0 !important;
            }
            
            /* スライダー周りの共通微調整 */
            .control-center-panel .control-group label { 
                width: 80px !important; 
                font-size: 9px; 
            }
            .control-center-panel .control-group .val { width: 32px; font-size: 10px; }
            .control-center-panel .control-group input[type="range"] { min-width: 40px; }
            
            .rhythm-btn-group, .sync-matrix-group { grid-template-columns: repeat(2, 1fr); }
            .atmosphere-layer-btn-group { grid-template-columns: repeat(2, 1fr); }
            .matrix-row-title { width: 85px; }

            .control-center-panel .control-group .val {
                width: 60px;
                font-size: 11px;
            }
        }
    
        /* 471〜566px：演奏人格の右側へPHOSONOGRAPH指揮者を配置 */
        @media (min-width: 471px) and (max-width: 566px) {
            .dna-status-box.dna-wide-layout .dna-performer-block {
                display: grid;
                grid-template-columns: minmax(0, 1fr) minmax(185px, 0.85fr);
                grid-template-areas:
                    "header conductor"
                    "subline conductor"
                    "ensemble conductor";
                column-gap: 12px;
                row-gap: 7px;
                align-items: start;
            }

            .dna-status-box.dna-wide-layout .dna-status-header {
                grid-area: header;
                min-width: 0;
            }

            .dna-status-box.dna-wide-layout .dna-subline {
                grid-area: subline;
                min-width: 0;
            }

            .dna-status-box.dna-wide-layout .rhythm-auto-summary {
                grid-area: ensemble;
                min-width: 0;
            }

            .dna-status-box.dna-wide-layout .phosonograph-conductor-control {
                grid-area: conductor;
                width: 100%;
                min-width: 0;
                margin-top: 0;
                align-self: stretch;
            }
        }

/* ?pitchUsageDebug=1 専用。通常表示では hidden のためレイアウトへ介入しない。 */
.pitch-usage-debug-panel {
    position: fixed;
    z-index: 100000;
    right: 12px;
    bottom: 12px;
    width: min(560px, calc(100vw - 24px));
    max-height: min(76vh, 820px);
    overflow: auto;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid #4cffe1;
    border-radius: 8px;
    color: #d9fff9;
    background: rgba(4, 10, 16, 0.97);
    box-shadow: 0 0 28px rgba(0, 255, 210, 0.22);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 11px;
    line-height: 1.45;
}

.pitch-usage-debug-panel[hidden] { display: none !important; }

.pitch-usage-debug-panel > header {
    position: sticky;
    top: -12px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: -12px -12px 10px;
    padding: 12px;
    border-bottom: 1px solid #28453f;
    background: #07110f;
}

.pitch-usage-debug-panel header strong,
.pitch-usage-debug-panel header small { display: block; }
.pitch-usage-debug-panel header small { color: #75a89f; }
.pitch-usage-debug-actions { display: flex; gap: 6px; }
.pitch-usage-debug-actions button {
    min-height: 28px;
    padding: 4px 8px;
    border: 1px solid #3c8f80;
    border-radius: 4px;
    color: #d9fff9;
    background: #10251f;
    font: inherit;
    cursor: pointer;
}
.pitch-usage-debug-actions button:hover { background: #17372e; }
.pitch-usage-debug-status { min-height: 16px; color: #7fffdc; text-align: right; }
.pitch-usage-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px 12px;
    margin-bottom: 12px;
    padding: 8px;
    border: 1px solid #263e39;
    background: #0a1815;
}
.pitch-usage-summary b { grid-column: 1 / -1; color: #7fffdc; }
.pitch-usage-color { margin: 12px 0; }
.pitch-usage-color h3 {
    display: flex;
    justify-content: space-between;
    margin: 0 0 4px;
    color: #8ffff0;
    font-size: 12px;
}
.pitch-usage-color h3 span { color: #88a9a3; font-weight: normal; }
.pitch-usage-color table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pitch-usage-color th,
.pitch-usage-color td { padding: 3px 5px; border-bottom: 1px solid #172c27; text-align: right; }
.pitch-usage-color th:first-child,
.pitch-usage-color td:first-child { text-align: left; }
.pitch-usage-color th { color: #70948d; font-size: 9px; }

@media (max-width: 600px) {
    .pitch-usage-debug-panel { right: 6px; bottom: 6px; width: calc(100vw - 12px); max-height: 68vh; }
    .pitch-usage-debug-panel > header { align-items: flex-start; flex-direction: column; }
    .pitch-usage-debug-actions { width: 100%; }
    .pitch-usage-debug-actions button { flex: 1; }
}

/* v227 exception: v224には存在しないENGINE HEALTH CHECK収納だけを維持。 */
.engine-health-flow-block {
    width: 100%;
    max-width: none;
    margin: 0;
    align-self: stretch;
}

.engine-health-toggle-container {
    width: 100%;
    text-align: right;
}

.engine-health-toggle {
    min-height: 32px;
    padding: 6px 11px;
    border-color: #24453d;
    color: #78968f;
    font-size: 10px;
    letter-spacing: 0.08em;
}

.engine-health-toggle:hover,
.engine-health-toggle.active {
    border-color: var(--system-accent, #00ffaa);
    color: var(--system-accent, #00ffaa);
}

.engine-health-flow-block .transparency-panel {
    margin-top: 10px;
}

.transparency-panel[hidden] {
    display: none !important;
}

@media (max-width: 1099px) {
    .engine-health-flow-block {
        grid-area: transparency;
        width: 100%;
        max-width: 680px;
        margin: 0 auto;
    }

    .engine-health-flow-block .transparency-panel {
        width: 100%;
        max-width: 680px;
    }
}

@media (max-width: 600px) {
    .engine-health-toggle {
        width: 100%;
        min-height: 36px;
    }
}

/* SCAN SPEEDとSCAN MODEは既存の中間幅指定より優先して同じ行を維持する */
.scan-settings-row > .scan-mode-control {
    flex: 1 1 160px;
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 566px) {
    .main-transport-bar > .scan-settings-row {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
    }
}

.audio-layer-sections .performance-layer-btn-group #toggleMelody { order: 1; }
.audio-layer-sections .performance-layer-btn-group #toggleChord { order: 2; }
.audio-layer-sections .performance-layer-btn-group #toggleBass { order: 3; }
.audio-layer-sections .performance-layer-btn-group #toggleKick { order: 4; }
.audio-layer-sections .performance-layer-btn-group #toggleSnare { order: 5; }
.audio-layer-sections .performance-layer-btn-group #toggleHat { order: 6; }
.audio-layer-sections .atmosphere-layer-btn-group,
.audio-layer-sections .performance-layer-btn-group {
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
}
#atmosphereToggle.off:hover {
    background: #1e1e28;
    color: #fff;
    border-color: #666;
    box-shadow: 0 0 8px rgba(255,255,255,0.06);
}