/* Layout: template rack — control rows on top, sheet canvas (left) beside gel/sol model cards (right) */
        :root {
            --bg: #ffffff;  --panel: #ffffff;  --panel-2: #ffffff;
            --line: #d6d6d6; --edge: #000000; --sep: #999999;
            --fg: #000000;  --muted: #555555;
            --val-bg: #fdfcc4; --val-fg: #000000;       /* template value chip */
            --active-bg: #c1fdc3; --active-fg: #000000; /* template active state */
            --fill: #fae1c2;                            /* template slider fill */
            --gel: #e8a33d; --sol: #3fb4cf; --blank: #d3d3d3;
            --vef: #94ac86;                             /* gel → sol by n; set from js */
            --ok: #2e8b4a; --warn: #b8860b; --crit: #d63a2f;
            --f-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
            --f-mono: "JetBrains Mono", "Courier New", ui-monospace, monospace;
            color-scheme: light;
        }
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html, body {
            width: 100%; height: 100%; overflow: hidden;
            background: var(--bg);
            font-family: var(--f-ui);
            color: var(--fg);
        }
        body {
            display: flex; flex-direction: column;
            padding-left: max(0px, env(safe-area-inset-left, 0px));
            padding-right: max(0px, env(safe-area-inset-right, 0px));
        }

        /* ── Top bar: Panel 1, global drive controls ── */
        #top-bar {
            background: var(--panel); padding: 6px 16px;
            display: flex; flex-direction: column; gap: 5px;
            border-bottom: 1px solid var(--sep);
            flex-shrink: 0; z-index: 20;
        }
        .ctrl-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
        .ctrl { display: flex; align-items: center; gap: 5px; }
        #app-title { font-size: 13px; font-weight: 700; letter-spacing: .02em; margin-right: 6px; white-space: nowrap; }

        .grp {
            display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
            padding: 3px 8px; border: 1px solid var(--edge); border-radius: 6px;
            background: var(--panel);
        }
        .grp-label {
            font-size: 9px; font-weight: 700; color: var(--muted);
            text-transform: uppercase; letter-spacing: .08em; white-space: nowrap;
        }
        label { font-size: 10.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }

        input[type="range"] {
            -webkit-appearance: none; appearance: none;
            width: 76px; height: 14px; border-radius: 0; border: 1px solid var(--edge);
            --acc: var(--fg);
            background: linear-gradient(to right,
                var(--fill) 0%, var(--fill) calc(var(--pct,50%) - 0.75px),
                var(--acc) calc(var(--pct,50%) - 0.75px), var(--acc) calc(var(--pct,50%) + 0.75px),
                var(--bg) calc(var(--pct,50%) + 0.75px), var(--bg) 100%);
            cursor: pointer; outline: none;
        }
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none; width: 14px; height: 14px; border: none; background: transparent; opacity: 0;
        }
        input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: none; background: transparent; opacity: 0; }
        input[type="range"]::-moz-range-track { height: 14px; background: transparent; }
        input[type="range"]:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
        .model-panel.gel input[type="range"] { --fill: #fbdcae; }
        .model-panel.sol input[type="range"] { --fill: #c6ecf5; }
        .model-panel.vef input[type="range"] { --fill: #dfe8d6; }

        .val {
            font-family: var(--f-mono); font-size: 10.5px; font-weight: 700;
            color: var(--val-fg); background: var(--val-bg);
            border: 1px solid var(--edge); border-radius: 3px;
            height: 16px; padding: 0 5px; min-width: 30px;
            display: inline-flex; align-items: center; white-space: nowrap;
            font-variant-numeric: tabular-nums;
        }

        .res-btn {
            background: var(--panel-2); color: var(--fg); border: 1px solid var(--edge);
            padding: 3px 9px; border-radius: 4px; font-size: 11px; cursor: pointer;
            transition: all .15s; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
            font-family: inherit;
        }
        .res-btn:hover  { background: #f0f0f0; }
        .res-btn.active { background: var(--active-bg); color: var(--active-fg); border-color: var(--active-fg); font-weight: 700; }
        .res-btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
        #play-btn { font-weight: 700; padding: 3px 14px; }
        #sound-btn { font-weight: 700; padding: 2px 10px; }

        /* template Pd-style toggle box — empty square, smaller solid square when checked */
        .chk-wrap { display: flex; align-items: center; gap: 4px; cursor: pointer; }
        .chk-wrap input[type="checkbox"] {
            -webkit-appearance: none; appearance: none; margin: 0; position: relative;
            width: 14px; height: 14px; flex-shrink: 0;
            background: #ffffff; border: 1px solid var(--edge); border-radius: 0; cursor: pointer;
        }
        .chk-wrap input[type="checkbox"]:checked::after {
            content: ''; position: absolute; left: 2px; top: 2px; right: 2px; bottom: 2px; background: var(--fg);
        }
        .chk-wrap input[type="checkbox"]:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

        .sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
        .sw.gel { background: var(--gel); }
        .sw.sol { background: var(--sol); opacity: .72; }
        .sw.vef { background: var(--vef); }
        .sw.air { border: 1px dashed var(--muted); }

        /* drive readouts (status-bar style) */
        #status-bar { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: 11px; color: var(--muted); }
        #status-bar b { font-family: var(--f-mono); color: var(--val-fg); font-weight: 700; font-size: 11px;
                        background: var(--val-bg); border: 1px solid var(--edge); border-radius: 3px; padding: 0 4px;
                        font-variant-numeric: tabular-nums; }
        .chip {
            display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px; border-radius: 999px;
            font-size: 11px; font-weight: 700; border: 1px solid currentColor; margin-left: auto; white-space: nowrap;
        }
        .chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
        .chip.ok { color: var(--ok); } .chip.warn { color: var(--warn); } .chip.crit { color: var(--crit); }
        .chip small { font-family: var(--f-mono); font-weight: 400; color: var(--fg); font-size: 10.5px; }

        /* ── body row: Panel 2 (sheet) | Panels 3+4 (models) ── */
        #body-row { flex: 1; display: flex; flex-direction: row; min-height: 0; }
        #sheet-panel {
            flex: 1 1 58%; display: flex; flex-direction: column; min-width: 0; min-height: 0;
            border-right: 1px solid var(--sep); padding: 8px 16px 10px; gap: 6px;
        }
        /* right column: the three panels share the window height (plots grow and
           shrink with it); it scrolls only once every plot is at its minimum */
        #right-col { flex: 1 1 42%; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow-y: auto; }
        .model-panel {
            display: flex; flex-direction: column;
            padding: 6px 16px 8px; gap: 5px;
            flex: 1 1 0;
        }
        .model-panel.spec { flex-grow: 1.5; }
        .model-panel + .model-panel { border-top: 1px solid var(--sep); }

        .panel-header {
            display: flex; justify-content: space-between; align-items: center; gap: 6px 12px; flex-wrap: wrap;
            font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
            flex-shrink: 0;
        }
        .panel-header .ttl { display: inline-flex; align-items: center; gap: 7px; color: var(--fg); font-weight: 700; }
        .formula { font-family: var(--f-mono); font-size: 11px; text-transform: none; letter-spacing: 0; color: var(--muted); }
        .formula b { font-weight: 700; }
        .model-panel.gel .formula b { color: var(--gel); }
        .model-panel.sol .formula b { color: var(--sol); }
        .model-panel.vef .formula b { color: var(--vef); }

        #sheet-wrap { flex: 1; position: relative; min-height: 180px; }
        #sheetCanvas { position: absolute; display: block; touch-action: none; cursor: crosshair; border-radius: 3px; }

        table.sheet-stats { width: 100%; border-collapse: collapse; font-size: 11px; flex-shrink: 0; }
        .sheet-stats th { text-align: right; font-weight: 600; color: var(--muted); font-size: 10px; padding: 3px 6px; border-bottom: 1px solid var(--line); }
        .sheet-stats td { text-align: right; padding: 3px 6px; font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
        .sheet-stats th:first-child, .sheet-stats td:first-child { text-align: left; }
        .sheet-stats td:first-child { font-family: var(--f-ui); font-weight: 700; }
        .sheet-stats td:first-child .sw { margin-right: 6px; vertical-align: -1px; }
        .note { font-size: 10.5px; color: var(--muted); line-height: 1.45; flex: 0 1 auto; min-height: 0; overflow-y: auto;
                padding-left: 16px; display: grid; gap: 1px; align-content: start; }
        .note code { font-family: var(--f-mono); color: var(--fg); font-size: 10px; }

        select.ctl-select {
            background: var(--val-bg); color: var(--fg); border: 1px solid var(--edge);
            padding: 1px 4px; border-radius: 4px; font-size: 10.5px; cursor: pointer; font-family: inherit;
        }
        select.ctl-select:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

        /* bake progress overlay (template style) */
        #bake-overlay {
            position: absolute; inset: 0; display: none;
            flex-direction: column; align-items: center; justify-content: center; gap: 12px;
            background: rgba(255,255,255,.82); z-index: 5;
        }
        #bake-overlay.visible { display: flex; }
        #bake-label { font-size: 13px; letter-spacing: .05em; }
        #bake-sub   { font-size: 11px; color: var(--muted); font-family: var(--f-mono); }
        #bake-bar-wrap { width: min(300px, 80%); height: 10px; background: #e0e0e0; border: 1px solid var(--edge); border-radius: 3px; overflow: hidden; }
        #bake-bar { height: 100%; width: 0%; background: var(--active-bg); transition: width .08s linear; }

        .spec-wrap { position: relative; flex: 1.3 1 0; min-height: 90px; max-height: 160px; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
        .spec-wrap.ref { flex: 1.5 1 0; min-height: 80px; max-height: 190px; }
        .spec-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

        .plots { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 0; min-height: 90px; max-height: 240px; }
        .plot-wrap {
            flex: 1 1 200px; max-width: 320px; min-height: 90px; position: relative; min-width: 0;
            background: var(--bg); border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
        }
        .plot-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
        .kv { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 10.5px; color: var(--muted); flex-shrink: 0; }
        .kv span { white-space: nowrap; }
        .kv b { font-family: var(--f-mono); color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; }

        /* ── narrow screens: stack panels and let the page scroll ── */
        @media (max-width: 900px) {
            html, body { height: auto; overflow: auto; }
            #body-row { flex-direction: column; }
            #sheet-panel { border-right: none; border-bottom: 1px solid var(--sep); }
            #sheet-wrap { flex: none; aspect-ratio: 1; width: 100%; max-width: 100%; }
            #right-col { overflow: visible; }
            .model-panel { flex: none; }
            .plots { flex: none; max-height: none; }
            .plot-wrap { height: 150px; }
            .spec-wrap { flex: none; height: 130px; }
            .spec-wrap.ref { height: 130px; }
            .note { overflow: visible; }
            #top-bar, #sheet-panel, .model-panel {
                padding-left: max(16px, env(safe-area-inset-left, 0px));
                padding-right: max(16px, env(safe-area-inset-right, 0px));
            }
        }
        @media (max-width: 520px) {
            .plot-wrap { flex-basis: 100%; }
            input[type="range"] { width: 96px; }
        }