400;500;600;700&family=Inter:wght@400;500;600&display=swap');

        :root {
            --bg-0: #070810;
            --bg-1: #0b0d1a;
            --surface: rgba(255, 255, 255, 0.035);
            --surface-2: rgba(255, 255, 255, 0.06);
            --surface-hover: rgba(255, 255, 255, 0.08);
            --border: rgba(255, 255, 255, 0.09);
            --border-strong: rgba(255, 255, 255, 0.16);
            --text: #f5f6fc;
            --text-dim: #aab0d4;
            --text-mute: #737aa0;
            --accent: #8b7bff;
            --accent-2: #22d3ee;
            --accent-3: #f472b6;
            --accent-soft: rgba(139, 123, 255, 0.14);
            --grad: linear-gradient(135deg, #8b7bff 0%, #6aa8ff 45%, #22d3ee 100%);
            --grad-warm: linear-gradient(135deg, #f472b6, #8b7bff);
            --glow: rgba(139, 123, 255, 0.45);
            --danger: #ff5c7a;
            --ok: #34e2b0;
            --r-xl: 28px;
            --r-lg: 22px;
            --r-md: 16px;
            --r-sm: 11px;
            --shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
            --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.35);
            --font: 'Landini Display', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
        }

        :root[data-theme="light"] {
            --bg-0: #eef0fb;
            --bg-1: #f7f8ff;
            --surface: rgba(255, 255, 255, 0.72);
            --surface-2: rgba(255, 255, 255, 0.9);
            --surface-hover: rgba(255, 255, 255, 1);
            --border: rgba(20, 22, 60, 0.09);
            --border-strong: rgba(20, 22, 60, 0.16);
            --text: #171a2e;
            --text-dim: #4a4f75;
            --text-mute: #8388ac;
            --accent-soft: rgba(139, 123, 255, 0.16);
            --glow: rgba(139, 123, 255, 0.3);
            --shadow: 0 24px 60px rgba(80, 90, 160, 0.18);
            --shadow-soft: 0 10px 30px rgba(80, 90, 160, 0.12);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        html { scroll-behavior: smooth; }

        body {
            font-family: var(--font);
            background: var(--bg-0);
            min-height: 100vh;
            color: var(--text);
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            line-height: 1.55;
            transition: background 0.5s ease, color 0.4s ease;
        }

        /* ---------- Ambient background ---------- */
        .bg {
            position: fixed;
            inset: 0;
            z-index: -2;
            background:
                radial-gradient(900px 600px at 12% -5%, rgba(139, 123, 255, 0.28), transparent 60%),
                radial-gradient(1000px 700px at 100% 0%, rgba(34, 211, 238, 0.18), transparent 55%),
                radial-gradient(900px 800px at 50% 110%, rgba(244, 114, 182, 0.16), transparent 55%),
                var(--bg-0);
        }
        .bg-orb {
            position: fixed;
            border-radius: 50%;
            filter: blur(90px);
            opacity: 0.5;
            z-index: -1;
            pointer-events: none;
            animation: drift 26s ease-in-out infinite;
        }
        .bg-orb.a { width: 460px; height: 460px; background: #6d5bff; top: -160px; left: -120px; }
        .bg-orb.b { width: 420px; height: 420px; background: #16b6d6; bottom: -180px; right: -120px; animation-delay: -13s; }
        :root[data-theme="light"] .bg-orb { opacity: 0.28; }
        @keyframes drift {
            0%, 100% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(60px, 40px) scale(1.12); }
        }

        /* ---------- Top bar ---------- */
        .topbar {
            position: sticky;
            top: 0;
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 14px clamp(16px, 4vw, 40px);
            background: color-mix(in srgb, var(--bg-0) 72%, transparent);
            backdrop-filter: blur(22px) saturate(140%);
            -webkit-backdrop-filter: blur(22px) saturate(140%);
            border-bottom: 1px solid var(--border);
        }
        .brand { display: flex; align-items: center; gap: 13px; min-width: 0; }
        .brand .logo {
            width: 42px; height: 42px;
            display: grid; place-items: center;
            border-radius: 13px;
            background: var(--grad);
            box-shadow: 0 6px 22px var(--glow);
            flex-shrink: 0;
        }
        .brand .logo svg { width: 24px; height: 24px; }
        .brand .txt { min-width: 0; }
        .brand .name {
            font-weight: 600; font-size: 1.06rem; letter-spacing: 0.2px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .brand .name b {
            background: var(--grad);
            -webkit-background-clip: text; background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .brand .tag { font-size: 0.72rem; color: var(--text-mute); letter-spacing: 0.4px; }

        .top-actions { display: flex; align-items: center; gap: 10px; }
        .segmented {
            display: flex; gap: 2px; padding: 3px;
            background: var(--surface); border: 1px solid var(--border);
            border-radius: 12px;
        }
        .segmented button {
            border: none; background: transparent; color: var(--text-dim);
            font-family: var(--font); font-weight: 500; font-size: 0.82rem;
            padding: 6px 12px; border-radius: 9px; cursor: pointer;
            transition: all 0.25s ease;
        }
        .segmented button:hover { color: var(--text); }
        .segmented button.active { background: var(--grad); color: #fff; box-shadow: 0 4px 14px var(--glow); }
        .icon-btn {
            width: 40px; height: 40px; border-radius: 12px;
            border: 1px solid var(--border); background: var(--surface);
            color: var(--text-dim); cursor: pointer; display: grid; place-items: center;
            transition: all 0.25s ease;
        }
        .icon-btn:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-hover); transform: translateY(-1px); }
        .icon-btn svg { width: 19px; height: 19px; }

        /* ---------- Layout ---------- */
        .wrap { max-width: 1240px; margin: 0 auto; padding: clamp(20px, 3vw, 34px) clamp(16px, 4vw, 40px) 60px; }
        .layout { display: grid; grid-template-columns: 1.55fr 1fr; gap: 22px; align-items: start; margin-top: 22px; }
        .col { display: flex; flex-direction: column; gap: 22px; }

        .card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--r-lg);
            padding: 26px;
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            box-shadow: var(--shadow-soft);
        }
        .card-head { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; }
        .card-head .ico {
            width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
            display: grid; place-items: center;
            background: var(--accent-soft); color: var(--accent);
        }
        .card-head .ico svg { width: 18px; height: 18px; }
        .card-head h2 { font-size: 1.08rem; font-weight: 600; letter-spacing: 0.2px; }
        .card-head .sub { font-size: 0.76rem; color: var(--text-mute); margin-top: 1px; }
        .card-head .spacer { flex: 1; }

        /* ---------- Now Playing hero ---------- */
        .hero {
            position: relative;
            overflow: hidden;
            border-radius: var(--r-xl);
            border: 1px solid var(--border-strong);
            background:
                linear-gradient(140deg, rgba(139, 123, 255, 0.14), rgba(34, 211, 238, 0.06) 55%, transparent),
                var(--surface-2);
            padding: 28px;
            box-shadow: var(--shadow);
        }
        .hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px; align-items: center; }
        .np-label {
            display: inline-flex; align-items: center; gap: 8px;
            font-size: 0.72rem; letter-spacing: 1.6px; text-transform: uppercase;
            color: var(--text-mute); font-weight: 600; margin-bottom: 14px;
        }
        .np-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-mute); transition: all .3s; }
        body.is-playing .np-dot { background: var(--ok); box-shadow: 0 0 12px var(--ok); animation: blink 1.4s infinite; }
        @keyframes blink { 50% { opacity: 0.35; } }

        .np-title { font-size: clamp(1.5rem, 3.4vw, 2.15rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.4px; }
        .np-desc { color: var(--text-dim); font-size: 0.95rem; margin-top: 10px; max-width: 46ch; min-height: 2.6em; }

        .chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
        .chip {
            display: inline-flex; align-items: baseline; gap: 6px;
            padding: 7px 13px; border-radius: 11px;
            background: var(--surface); border: 1px solid var(--border);
            font-size: 0.8rem; color: var(--text-dim);
        }
        .chip b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
        .chip span { font-size: 0.68rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.5px; }

        .visual-wrap {
            position: relative;
            border-radius: var(--r-lg);
            overflow: hidden;
            border: 1px solid var(--border);
            background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.32));
            aspect-ratio: 16 / 10;
            min-height: 170px;
        }
        .visual-wrap, :root[data-theme="light"] .visual-wrap {
            background: #05060c;
        }
        #visualizer { display: block; width: 100%; height: 100%; }
        .fs-btn {
            position: absolute; top: 10px; right: 10px; z-index: 3;
            width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
            display: grid; place-items: center; color: #fff;
            background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
            backdrop-filter: blur(8px); transition: all .2s ease; opacity: 0.7;
        }
        .fs-btn:hover { opacity: 1; background: rgba(255,255,255,0.16); transform: scale(1.06); }
        .fs-btn svg { width: 17px; height: 17px; }
        .cym-tag {
            position: absolute; top: 12px; left: 14px; z-index: 3;
            font-size: 0.62rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 600;
            color: rgba(255,255,255,0.5); pointer-events: none;
        }
        .visual-wrap:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0; border: none; }
        .visual-wrap:-webkit-full-screen { width: 100vw; height: 100vh; border-radius: 0; }
        .visual-wrap.cym-fs {
            position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 9999;
            aspect-ratio: auto; border-radius: 0; border: none;
        }
        body.cym-fs-lock { overflow: hidden; }
        .visual-wrap:fullscreen .fs-btn, .visual-wrap.cym-fs .fs-btn { width: 44px; height: 44px; top: 20px; right: 20px; }
        .visual-wrap:fullscreen .cym-tag, .visual-wrap.cym-fs .cym-tag { top: 22px; left: 24px; font-size: 0.8rem; }

        /* Transport */
        .transport { display: flex; align-items: center; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
        .play-btn {
            width: 66px; height: 66px; border-radius: 50%; border: none; cursor: pointer;
            background: var(--grad); color: #fff; display: grid; place-items: center;
            box-shadow: 0 10px 30px var(--glow); transition: transform .2s ease, box-shadow .2s ease;
            flex-shrink: 0;
        }
        .play-btn:hover { transform: scale(1.06); box-shadow: 0 14px 40px var(--glow); }
        .play-btn:active { transform: scale(0.97); }
        .play-btn svg { width: 26px; height: 26px; }
        .stop-btn {
            width: 50px; height: 50px; border-radius: 50%; cursor: pointer;
            background: var(--surface); border: 1px solid var(--border-strong);
            color: var(--text-dim); display: grid; place-items: center; transition: all .2s ease;
        }
        .stop-btn:hover { color: var(--danger); border-color: var(--danger); }
        .stop-btn svg { width: 18px; height: 18px; }
        .transport-hint { font-size: 0.78rem; color: var(--text-mute); }
        .transport-hint kbd {
            font-family: inherit; font-size: 0.72rem; padding: 2px 7px; border-radius: 6px;
            background: var(--surface); border: 1px solid var(--border); color: var(--text-dim);
        }

        /* Sliders */
        .sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 26px; }
        .slider-block .slabel { display: flex; justify-content: space-between; align-items: center; margin-bottom: 11px; }
        .slabel .lname { font-size: 0.85rem; color: var(--text-dim); font-weight: 500; display: flex; align-items: center; gap: 7px; }
        .slabel .lname svg { width: 15px; height: 15px; opacity: 0.8; }
        .slabel .lval { font-size: 0.82rem; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
        input[type="range"] {
            -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
            border-radius: 6px; outline: none; cursor: pointer;
            background: linear-gradient(90deg, var(--accent) 0%, var(--accent) var(--fill, 50%), var(--surface-2) var(--fill, 50%));
            border: 1px solid var(--border);
        }
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none; appearance: none;
            width: 20px; height: 20px; border-radius: 50%;
            background: #fff; border: 3px solid var(--accent);
            box-shadow: 0 2px 10px var(--glow); cursor: pointer; transition: transform .15s ease;
        }
        input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
        input[type="range"]::-moz-range-thumb {
            width: 18px; height: 18px; border-radius: 50%; background: #fff;
            border: 3px solid var(--accent); box-shadow: 0 2px 10px var(--glow); cursor: pointer;
        }
        /* Read-only beat indicator (fixed, not user-adjustable) */
        .beat-track {
            height: 6px; border-radius: 6px; margin-top: 9px; position: relative; overflow: hidden;
            background: var(--surface-2); border: 1px solid var(--border);
        }
        .beat-pulse {
            position: absolute; inset: 0; border-radius: 6px;
            background: var(--grad); opacity: 0.22;
        }
        body.is-playing .beat-pulse { animation: beatPulse var(--beat-period, 1s) ease-in-out infinite; }
        @keyframes beatPulse { 0%, 100% { opacity: 0.16; } 50% { opacity: 0.9; } }

        /* ---------- Library ---------- */
        .tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
        .tab {
            padding: 9px 15px; border-radius: 12px; cursor: pointer;
            border: 1px solid var(--border); background: var(--surface);
            color: var(--text-dim); font-family: var(--font); font-size: 0.85rem; font-weight: 500;
            transition: all .22s ease; display: inline-flex; align-items: center; gap: 7px;
        }
        .tab:hover { color: var(--text); border-color: var(--border-strong); transform: translateY(-1px); }
        .tab.active { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 6px 18px var(--glow); }
        .subtabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
        .subtab {
            padding: 6px 12px; border-radius: 20px; cursor: pointer; font-size: 0.78rem; font-weight: 500;
            border: 1px solid var(--border); background: transparent; color: var(--text-mute);
            font-family: var(--font); transition: all .2s ease;
        }
        .subtab:hover { color: var(--text); }
        .subtab.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

        .search {
            position: relative; margin-bottom: 16px;
        }
        .search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--text-mute); }
        .search input {
            width: 100%; padding: 12px 14px 12px 42px; border-radius: 13px;
            background: var(--surface); border: 1px solid var(--border); color: var(--text);
            font-family: var(--font); font-size: 0.9rem; outline: none; transition: all .2s ease;
        }
        .search input::placeholder { color: var(--text-mute); }
        .search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

        .freq-list { display: flex; flex-direction: column; gap: 8px; max-height: 430px; overflow-y: auto; padding-right: 6px; margin-right: -6px; }
        .freq-item {
            display: flex; align-items: center; gap: 14px; padding: 13px 15px;
            border-radius: 14px; cursor: pointer; text-align: left;
            border: 1px solid var(--border); background: var(--surface);
            font-family: var(--font); transition: all .18s ease; width: 100%;
        }
        .freq-item:hover { background: var(--surface-hover); border-color: var(--border-strong); transform: translateX(3px); }
        .freq-item.selected { border-color: var(--accent); background: var(--accent-soft); }
        .freq-item .fi-ic {
            width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
            display: grid; place-items: center; font-size: 1.15rem;
            background: var(--surface-2); border: 1px solid var(--border);
        }
        .freq-item.selected .fi-ic { background: var(--grad); }
        .fi-body { min-width: 0; flex: 1; }
        .fi-name { font-size: 0.9rem; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .fi-sub { font-size: 0.74rem; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .fi-freq {
            font-size: 0.78rem; font-weight: 600; color: var(--accent-2); font-variant-numeric: tabular-nums;
            flex-shrink: 0; padding: 4px 9px; border-radius: 8px; background: var(--surface-2);
        }
        .freq-item.selected .fi-freq { color: #fff; background: rgba(255,255,255,0.15); }
        :root[data-theme="light"] .freq-item.selected .fi-freq { color: var(--accent); background: rgba(139, 123, 255, 0.16); }
        .empty-note { text-align: center; color: var(--text-mute); font-size: 0.86rem; padding: 30px 0; }

        /* ---------- Ambient ---------- */
        .ambient-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
        .amb-btn {
            aspect-ratio: 1; border-radius: 15px; cursor: pointer; position: relative; overflow: hidden;
            border: 1px solid var(--border); background: var(--surface);
            display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
            font-family: var(--font); transition: all .22s ease;
        }
        .amb-btn .emoji { font-size: 1.5rem; line-height: 1; transition: transform .3s ease; }
        .amb-btn .albl { font-size: 0.64rem; color: var(--text-mute); font-weight: 500; }
        .amb-btn:hover { border-color: var(--border-strong); transform: translateY(-3px); background: var(--surface-hover); }
        .amb-btn:hover .emoji { transform: scale(1.15); }
        .amb-btn.active { border-color: var(--accent); background: var(--accent-soft); }
        .amb-btn.active .albl { color: var(--accent); }
        .amb-btn.active::after {
            content: ''; position: absolute; top: 8px; right: 8px; width: 7px; height: 7px;
            border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: blink 1.4s infinite;
        }
        .amb-btn.active .emoji { animation: bob 2.4s ease-in-out infinite; }
        @keyframes bob { 50% { transform: translateY(-3px) scale(1.05); } }

        /* ---------- Session / timer ---------- */
        .timer-face { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
        .ring-wrap { position: relative; width: 108px; height: 108px; flex-shrink: 0; }
        .ring-wrap svg { transform: rotate(-90deg); width: 100%; height: 100%; }
        .ring-bg { fill: none; stroke: var(--surface-2); stroke-width: 8; }
        .ring-fg { fill: none; stroke: url(#ringGrad); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 0.9s linear; }
        .ring-time {
            position: absolute; inset: 0; display: grid; place-items: center;
            font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1.35rem; letter-spacing: 0.5px;
        }
        .timer-ctl { flex: 1; }
        .quick-times { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
        .qt {
            padding: 6px 11px; border-radius: 9px; cursor: pointer; font-size: 0.78rem; font-weight: 500;
            border: 1px solid var(--border); background: var(--surface); color: var(--text-dim);
            font-family: var(--font); transition: all .18s ease;
        }
        .qt:hover { color: var(--text); border-color: var(--border-strong); }
        .qt.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
        .timer-row { display: flex; align-items: center; gap: 10px; }
        .num-input {
            width: 68px; padding: 9px; border-radius: 10px; text-align: center;
            background: var(--surface); border: 1px solid var(--border); color: var(--text);
            font-family: var(--font); font-size: 0.9rem; outline: none;
        }
        .num-input:focus { border-color: var(--accent); }
        .btn {
            padding: 10px 18px; border-radius: 11px; border: none; cursor: pointer;
            font-family: var(--font); font-weight: 600; font-size: 0.85rem;
            transition: all .2s ease; display: inline-flex; align-items: center; gap: 7px;
        }
        .btn-primary { background: var(--grad); color: #fff; box-shadow: 0 6px 18px var(--glow); }
        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px var(--glow); }
        .btn-ghost { background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); }
        .btn-ghost:hover { color: var(--text); border-color: var(--border-strong); }
        .btn svg { width: 15px; height: 15px; }

        /* ---------- Presets ---------- */
        .preset-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
        .preset-item {
            display: flex; align-items: center; gap: 12px; padding: 11px 14px;
            border-radius: 12px; border: 1px solid var(--border); background: var(--surface);
            transition: all .18s ease;
        }
        .preset-item:hover { border-color: var(--border-strong); background: var(--surface-hover); }
        .preset-item .pi-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--accent-soft); display: grid; place-items: center; font-size: 0.95rem; flex-shrink: 0; }
        .preset-item .pi-body { flex: 1; min-width: 0; cursor: pointer; }
        .preset-item .pi-name { font-size: 0.86rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .preset-item .pi-meta { font-size: 0.72rem; color: var(--text-mute); }
        .preset-item .pi-del {
            width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border);
            background: transparent; color: var(--text-mute); cursor: pointer; display: grid; place-items: center;
            transition: all .18s ease; flex-shrink: 0;
        }
        .preset-item .pi-del:hover { color: var(--danger); border-color: var(--danger); }
        .preset-item .pi-del svg { width: 14px; height: 14px; }

        /* ---------- History ---------- */
        .log-list { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
        .log-entry {
            display: flex; gap: 10px; padding: 9px 13px; border-radius: 10px;
            background: var(--surface); border-left: 2px solid var(--accent);
            font-size: 0.82rem; color: var(--text-dim);
        }
        .log-entry .lt { color: var(--text-mute); font-variant-numeric: tabular-nums; flex-shrink: 0; font-size: 0.76rem; }

        /* ---------- Footer ---------- */
        .footer { text-align: center; margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--border); color: var(--text-mute); }
        .footer a { color: var(--accent-2); text-decoration: none; transition: opacity .2s; }
        .footer a:hover { opacity: 0.8; }
        .footer .disc { font-size: 0.74rem; max-width: 60ch; margin: 10px auto 0; opacity: 0.75; line-height: 1.6; }

        /* ---------- Toast + Modal ---------- */
        .toast-host { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 10px; align-items: center; }
        .toast {
            padding: 12px 20px; border-radius: 13px; background: var(--surface-2); color: var(--text);
            border: 1px solid var(--border-strong); box-shadow: var(--shadow); font-size: 0.86rem; font-weight: 500;
            backdrop-filter: blur(18px); animation: toastIn .35s cubic-bezier(.2,.9,.3,1.3);
            display: flex; align-items: center; gap: 9px;
        }
        .toast.err { border-color: var(--danger); }
        .toast .ti { font-size: 1.1rem; }
        @keyframes toastIn { from { opacity: 0; transform: translateY(16px); } }

        .modal-host {
            position: fixed; inset: 0; z-index: 400; display: none;
            align-items: center; justify-content: center; padding: 20px;
            background: rgba(0,0,0,0.6); backdrop-filter: blur(6px);
        }
        .modal-host.show { display: flex; animation: fadeIn .3s ease; }
        @keyframes fadeIn { from { opacity: 0; } }
        .modal {
            background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--r-lg);
            padding: 36px 40px; text-align: center; max-width: 380px; box-shadow: var(--shadow);
            animation: modalIn .4s cubic-bezier(.2,.9,.3,1.2);
        }
        @keyframes modalIn { from { opacity: 0; transform: scale(0.9) translateY(10px); } }
        .modal .m-ic { font-size: 2.6rem; margin-bottom: 12px; }
        .modal h3 { font-size: 1.35rem; font-weight: 600; margin-bottom: 8px; }
        .modal p { color: var(--text-dim); font-size: 0.92rem; margin-bottom: 22px; }

        /* Scrollbar */
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--accent); }

        /* ---------- Responsive ---------- */
        @media (max-width: 940px) {
            .layout { grid-template-columns: 1fr; }
            .hero-grid { grid-template-columns: 1fr; }
            .visual-wrap { order: -1; }
        }
        @media (max-width: 560px) {
            .sliders { grid-template-columns: 1fr; }
            .ambient-grid { grid-template-columns: repeat(3, 1fr); }
            .brand .tag { display: none; }
            .transport-hint { display: none; }
            .timer-face { flex-direction: column; text-align: center; }
        }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
        }
    
@font-face{font-family:'Landini Display';src:url('/assets/fonts/88a36cab6d7cfa75bff7e49535b9642a.woff2') format('woff2');font-weight:400;font-display:block}
@font-face{font-family:'Landini Signature';src:url('/assets/fonts/e682d3f3040dc5961e9b8c104e3f6831.woff2') format('woff2');font-weight:400;font-display:block}
:root{--bg-0:#17130f;--bg-1:#211b14;--surface:rgba(208,170,115,.045);--surface-2:rgba(208,170,115,.065);--surface-hover:rgba(208,170,115,.11);--border:rgba(208,170,115,.16);--border-strong:rgba(208,170,115,.32);--text:#f3e6d2;--text-dim:#cdbfa9;--text-mute:#a99b86;--accent:#d0aa73;--accent-2:#e6c895;--accent-3:#b38b53;--accent-soft:rgba(208,170,115,.14);--grad:linear-gradient(135deg,#d0aa73,#e6c895);--grad-warm:linear-gradient(135deg,#b38b53,#d0aa73);--glow:rgba(208,170,115,.24);--font:'Landini Display',system-ui,sans-serif;--r-xl:20px;--r-lg:16px;--r-md:12px}
:root[data-theme="light"]{--bg-0:#efe5d5;--bg-1:#f8f2e8;--text:#31291f;--text-dim:#665640;--text-mute:#796850;--surface:rgba(255,255,255,.7);--surface-2:rgba(255,255,255,.9);--surface-hover:rgba(208,170,115,.17);--border:rgba(100,76,42,.19);--border-strong:rgba(100,76,42,.32);--accent:#886238;--accent-2:#a27a48;--grad:linear-gradient(135deg,#886238,#a27a48);--glow:rgba(120,85,40,.18)}
.bg{background:radial-gradient(ellipse at 70% 0,rgba(208,170,115,.1),transparent 60%),var(--bg-0)}
.bg-orb{display:none}.topbar{background:var(--bg-0);border-bottom:1px solid var(--border);flex-wrap:wrap;gap:14px}.top-actions{flex-wrap:wrap}.brand .name{background:none;-webkit-text-fill-color:var(--text);color:var(--text)}
.site-signature{font-family:'Landini Signature',cursive;font-size:17px;color:var(--text);text-decoration:none;line-height:2}.site-return{color:var(--accent);border:1px solid var(--border-strong);border-radius:24px;padding:9px 16px;text-decoration:none;font-size:12px;white-space:nowrap}
.card,.hero{box-shadow:0 12px 40px rgba(0,0,0,.12)}.np-title{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500}.play-btn{color:#21190f}.custom-listening{margin:24px 0;padding:26px}.lab-controls{display:grid;grid-template-columns:1fr 1fr;gap:24px}.lab-quick{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0}.lab-quick button{padding:13px 22px;border:1px solid var(--border-strong);border-radius:24px;background:var(--accent-soft);color:var(--text);cursor:pointer;font:inherit}.lab-field{display:grid;gap:10px;margin:16px 0}.lab-field span{display:flex;justify-content:space-between;gap:12px;color:var(--text-dim);font-size:13px}.lab-field select{padding:10px;background:var(--bg-1);color:var(--text);border:1px solid var(--border);border-radius:8px}.lab-note{font-size:13px;line-height:1.7;color:var(--text-dim)}.lab-footer-links{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin:16px}.topbar .logo svg{stroke:#302116;opacity:1}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button,input,select{touch-action:manipulation}.beat-track{background:var(--accent-soft)}
@media(max-width:760px){.lab-controls{grid-template-columns:1fr}.topbar{padding:14px 18px}.top-actions{gap:10px}.site-signature{font-size:15px}.custom-listening{padding:20px}.site-return{padding:8px 12px}.np-title{overflow-wrap:anywhere}.topbar .brand{width:100%}.top-actions{width:100%;justify-content:space-between}}
@media(prefers-reduced-motion:reduce){.np-dot,.beat-pulse{animation:none!important}}
/* Workstation: library, instrument and environmental mixer; persistent transport. */
.wrap{max-width:1680px;padding:24px 28px 135px}.lab-intro{margin:0 0 24px}.lab-eyebrow{font-size:10px;letter-spacing:2.5px;color:var(--accent)}.lab-intro h1{font:500 clamp(28px,3vw,42px)/1.15 'Cormorant Garamond',Georgia,serif;margin:8px 0}.lab-intro p{color:var(--text-dim);font-size:13px;line-height:1.6}
.workstation{display:grid;grid-template-columns:minmax(260px,.9fr) minmax(340px,1.5fr) minmax(240px,.8fr);gap:18px;align-items:start}.workstation>*{min-width:0}.workstation .card{padding:20px;background:var(--surface)}.workstation #libraryCard{position:sticky;top:115px}.workstation .hero{padding:20px;background:radial-gradient(ellipse at 50% 60%,rgba(208,170,115,.08),transparent 80%),var(--surface);margin:0}.hero-grid{display:flex;flex-direction:column;align-items:stretch;gap:16px}.np-label{margin-bottom:8px}.np-title{font-size:30px}.np-desc{font-size:12px;line-height:1.55;min-height:0;max-width:none}.chips{gap:5px;margin-top:10px}.chip{padding:5px 8px}.visual-wrap{aspect-ratio:1.4;min-height:220px}.visual-side{width:100%}.visual-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}.visual-toolbar button{background:transparent;border:1px solid var(--border);color:var(--text-dim);padding:8px 12px;border-radius:20px;font:inherit;font-size:11px;cursor:pointer}.visual-toolbar button.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-2)}#modelReadout{font-size:10px;color:var(--text-mute);width:100%;font-variant-numeric:tabular-nums}.model-caption{font-size:10px;line-height:1.6;color:var(--text-mute);margin-top:10px}.cym-tag{max-width:75%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;letter-spacing:1px}.visual-side .sliders{display:block;margin-top:12px}.visual-side .sliders .slider-block{padding:0}.custom-listening{margin:16px 0 0!important;padding:18px!important}.custom-listening h2{font-size:14px}.custom-listening h3{font-size:12px}.custom-listening .lab-note{font-size:11px;margin:6px 0 14px}.lab-controls{gap:18px}.lab-field{margin:10px 0;gap:6px}.lab-field span{font-size:11px}.lab-quick{gap:8px;margin:10px 0}.lab-quick button{padding:9px 16px;font-size:12px}.lab-controls .btn{font-size:11px;min-height:38px}.ambient-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.amb-btn{min-height:76px;padding:10px 6px}.amb-btn.active{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}.freq-list{max-height:calc(100dvh - 440px);min-height:180px;overscroll-behavior:contain}.freq-item{gap:8px;padding:11px 9px}.freq-item .fi-ic{width:28px;height:28px;flex-shrink:0}.fi-name{font-size:12px}.fi-sub{font-size:10px}.fi-freq{font-size:10px;white-space:nowrap}.tabs{gap:6px}.tab{font-size:10px;padding:7px 8px}.card-head h2{font-size:15px}.card-head .sub{font-size:11px}.search input{font-size:12px}.col{gap:14px}.lab-secondary,.model-explanation{border:1px solid var(--border);border-radius:14px;margin-top:14px;background:var(--surface)}.lab-secondary summary,.model-explanation summary{cursor:pointer;padding:14px 18px;color:var(--accent-2);font-size:12px}.lab-secondary .card{border:none;box-shadow:none}.model-explanation p,.model-explanation a{font-size:12px;line-height:1.7;margin:0 18px 16px;display:block;color:var(--text-dim)}.history{margin-top:22px}.history>section{margin-top:0!important}.ring-wrap{width:82px;height:82px}.timer-face{gap:12px;flex-wrap:wrap}.timer-ctl{min-width:0}.lab-dock{position:fixed;bottom:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:center;gap:28px;padding:16px max(20px,calc((100vw - 1560px)/2));background:rgba(23,19,15,.97);border-top:1px solid var(--border-strong);box-shadow:0 -12px 45px #0003;backdrop-filter:blur(16px)}.dock-title{width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:#f3e6d2}.lab-dock .transport{margin:0;gap:12px;flex-shrink:0}.lab-dock .play-btn{width:48px;height:48px}.lab-dock .stop-btn{width:42px;height:42px}.lab-dock .slider-block{width:190px;padding:0}.lab-dock .slabel{margin-bottom:6px}.lab-dock .transport-hint{font-size:10px}.lab-dock .lname,.lab-dock .lval{color:#cdbfa9}.footer{margin-top:24px}
@media(max-width:1100px){.workstation{grid-template-columns:minmax(230px,.9fr) minmax(320px,1.3fr)}.workstation>.col{grid-column:1/-1;display:grid;grid-template-columns:1.5fr 1fr 1fr;align-items:start}.ambient-grid{grid-template-columns:repeat(4,1fr)}.workstation>.col .lab-secondary{margin:0}.topbar .brand{width:auto}.top-actions{width:auto}.transport-hint{display:none}.lab-dock{gap:18px}.freq-list{max-height:430px}}
@media(max-width:760px){.wrap{padding:20px 16px 150px}.workstation{display:flex;flex-direction:column;gap:18px}.workstation>*{width:100%}.workstation #libraryCard{position:static}.freq-list{max-height:320px;min-height:0}.workstation>.col{display:flex;flex-direction:column}.workstation>.col>*{width:100%}.lab-center{order:-1}.lab-controls{grid-template-columns:1fr 1fr;gap:12px}.np-title{font-size:28px}.lab-dock{gap:12px;justify-content:space-between;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}.dock-title{position:absolute;top:8px;left:16px;right:16px;width:auto;max-width:calc(100% - 32px);font-size:11px}.lab-dock .transport{margin-top:20px}.lab-dock .slider-block{width:45%;margin-top:20px}.visual-wrap{aspect-ratio:1.25}.ambient-grid{grid-template-columns:repeat(4,1fr)}.topbar{position:relative}.lab-intro h1{font-size:32px}}
@media(max-width:375px){.lab-controls{grid-template-columns:1fr}.ambient-grid{grid-template-columns:repeat(2,1fr)}.lab-dock .slider-block{width:42%}}
.lab-jump{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.lab-jump a{text-decoration:none;color:var(--accent-2);border:1px solid var(--border);border-radius:20px;padding:8px 12px;font-size:11px}#libraryCard,#labGenerator,#labMixer{scroll-margin-top:20px}.lab-dock input{accent-color:#d0aa73}.model-explanation a:hover{color:var(--accent)}

.plate-experiment{padding:14px 18px;border:1px solid #d0aa7333;border-radius:12px;margin:12px 0;color:#d8c5aa}.plate-experiment label{display:block;font-size:.85rem}.plate-frequency-row{display:flex;align-items:center;gap:10px;margin:10px 0 14px}.plate-frequency-row input{width:100px;min-width:0;padding:8px;background:#12100d;border:1px solid #d0aa7366;color:#f1dfc3;border-radius:6px}.plate-experiment button{background:#211b13;border:1px solid #d0aa7366;color:#edcf9e;padding:8px 10px;border-radius:6px;cursor:pointer}.plate-experiment>span{font-size:.8rem}.plate-mode-buttons{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}.plate-experiment button:hover{background:#3a2b19}.plate-experiment button:focus-visible{outline:2px solid #d0aa73;outline-offset:3px}

/* Full-window audio instrument. Decorative chassis never changes audio. */
body{background:#090a0b}.bg{background:radial-gradient(ellipse at 50% 10%,#9b71351c,transparent 65%),repeating-linear-gradient(0deg,#ffffff02 0 1px,transparent 1px 4px),#101112}
.topbar{padding:10px 22px;min-height:70px;background:linear-gradient(#232321,#131413);border-color:#9a795440}
.topbar .brand .name{font-size:20px}.topbar .logo{width:36px;height:36px}.site-signature{font-size:14px}.topbar .tag{display:none}
.wrap{max-width:none;padding:18px 22px 120px}.lab-intro{margin-bottom:16px;display:flex;align-items:center;gap:18px}.lab-intro h1{font:500 23px/1.2 'Cormorant Garamond',serif;margin:0}.lab-intro>p,.lab-jump{display:none}.lab-eyebrow{font-size:9px;letter-spacing:1.8px}.workstation{grid-template-columns:minmax(230px,.8fr) minmax(410px,1.55fr) minmax(265px,1fr);gap:16px}
.workstation>.card,.lab-center,.workstation>.col{border:1px solid #a58a5f55;border-radius:8px;background:linear-gradient(110deg,#232422,#171918 60%,#20211f);box-shadow:inset 0 1px #ffffff14,0 12px 28px #0006;position:relative}
.workstation>.card::before,.lab-center::before,.workstation>.col::before{content:'⊕';position:absolute;top:6px;right:9px;font:13px monospace;color:#665e4c;pointer-events:none}
.workstation .card{padding:16px;background:transparent;border-radius:6px;box-shadow:none}.workstation #libraryCard{position:static}.lab-center{padding:14px}.workstation .hero{padding:0;border:0;background:none;box-shadow:none}.hero-grid{gap:10px}.np-title{font-size:23px}.np-desc{max-height:38px;overflow:auto;font-size:11px}.np-label{font-size:9px;letter-spacing:2px}.chips{margin-top:8px}.chip{font-size:9px}.visual-wrap{min-height:190px;aspect-ratio:2.3;background:#050806;border:1px solid #bda57555;box-shadow:inset 0 2px 18px #000;border-radius:4px}.visual-toolbar{margin-bottom:8px}.model-caption{font-size:9px;margin-top:8px}.plate-experiment{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px;margin:10px 0;background:#080a0933;border-radius:5px}.plate-experiment>label{font-size:10px}.plate-frequency-row{margin:0;gap:6px;flex-wrap:wrap}.plate-mode-buttons{grid-column:1/-1;margin:0}.plate-experiment>span{font-size:9px}.plate-experiment button{font-size:9px;padding:6px}.plate-frequency-row input{width:80px;font-size:11px}.custom-listening{padding:12px!important;background:#07080622!important;border-radius:5px}.custom-listening .lab-note{display:none}.lab-controls{gap:14px}.lab-controls h3{margin-top:6px}.lab-field{margin:8px 0}.custom-listening h2{letter-spacing:.07em}.model-explanation{margin-top:10px}.model-explanation summary{padding:9px;font-size:10px}
.freq-list{max-height:calc(100dvh - 335px);min-height:160px}.freq-item{border-radius:5px}.freq-item.selected,.freq-item.active{background:#c2a16a18}.ambient-grid{grid-template-columns:repeat(3,1fr);gap:6px}.amb-btn{min-height:65px;background:linear-gradient(#30312e,#1c1e1b);border:1px solid #b1a18030;border-radius:5px;box-shadow:0 2px 3px #0007}.amb-btn.active{background:linear-gradient(#514631,#2b291e);box-shadow:inset 0 0 8px #d6b37533,0 0 12px #d6b37512}.amb-btn .amb-name{font-size:10px}.col{gap:0}.lab-dock{background:linear-gradient(#242522,#151614);border-top:1px solid #ab8e6155;padding:10px 24px;gap:24px;box-shadow:0 -7px 24px #0006}.lab-dock .slider-block{display:flex;align-items:center;gap:14px;width:240px}.lab-dock .slabel{min-width:90px}.lab-dock .transport-hint{display:none}.lab-dock .play-btn{border-radius:6px;background:linear-gradient(#dfc18c,#a98a55);box-shadow:inset 0 1px #fff9,0 3px 7px #0008}.footer{font-size:10px}.history{margin-top:16px}
/* Knob grip: original native range retains keyboard and screen-reader support. */
.instrument-knob{position:relative;width:66px;height:66px;flex-shrink:0;margin:7px auto;touch-action:none;user-select:none;border-radius:50%;background:conic-gradient(from 225deg,#bd9a5f calc(var(--dial,0)*.75),#45473f 0 75%,transparent 0);padding:5px}
.instrument-knob::before{content:'';position:absolute;inset:5px;border-radius:50%;background:repeating-conic-gradient(#ffffff08 0deg 2deg,transparent 2deg 9deg),radial-gradient(circle at 35% 25%,#575b53,#222722 58%,#111510 85%);box-shadow:inset 0 1px 3px #ffffff44,0 4px 8px #000b;border:1px solid #84724e}
.instrument-knob .knob-pointer{position:absolute;left:calc(50% - 1px);top:12px;width:2px;height:13px;background:#e7c98a;box-shadow:0 0 4px #e7c98a66;transform-origin:1px 21px;transform:rotate(var(--angle,-135deg));pointer-events:none}
.instrument-knob input[type=range]{position:absolute!important;inset:0;width:100%!important;height:100%!important;opacity:0;margin:0;cursor:ns-resize;touch-action:none}
.instrument-knob:focus-within{outline:2px solid #d0aa73;outline-offset:4px}.lab-field:has(.instrument-knob){align-content:start}.lab-controls .btn{min-height:32px}.slider-block:has(.instrument-knob){text-align:center}.slider-block .slabel{display:flex;justify-content:space-between}
@media(min-width:1200px) and (min-height:850px){.workstation>.card,.lab-center,.workstation>.col{height:calc(100dvh - 210px);overflow:auto;scrollbar-width:thin;scrollbar-color:#8d784955 transparent}.freq-list{max-height:calc(100dvh - 400px)}.lab-center{display:flex;flex-direction:column}.custom-listening{margin-top:auto!important}.visual-wrap{aspect-ratio:2.4}.history,.footer{display:none}}
@media(max-width:1199px){.workstation{grid-template-columns:minmax(230px,.8fr) minmax(350px,1.2fr)}.workstation>.col{grid-column:1/-1;display:grid;grid-template-columns:1.5fr 1fr;gap:12px}.ambient-grid{grid-template-columns:repeat(5,1fr)}.lab-intro{flex-wrap:wrap}}
@media(max-width:760px){.wrap{padding:14px 12px 130px}.topbar{padding:12px}.lab-intro{gap:8px}.workstation{display:flex}.lab-center{padding:12px}.workstation>.col{display:flex}.visual-wrap{aspect-ratio:1.6}.lab-controls{grid-template-columns:1fr 1fr}.instrument-knob{width:66px;height:66px}.lab-dock{padding:8px 12px 12px;gap:10px}.lab-dock .slider-block{width:130px;gap:4px;margin-top:18px}.lab-dock .slabel{min-width:50px;font-size:10px}.lab-dock .instrument-knob{width:56px;height:56px;margin:0}.lab-dock .knob-pointer{transform-origin:1px 16px;top:10px}.ambient-grid{grid-template-columns:repeat(3,1fr)}.top-actions{gap:7px}.site-return{font-size:10px}.lab-eyebrow{font-size:8px}}
.workstation .hero{overflow:visible;flex-shrink:0}.lab-center .hero-grid{gap:8px}.lab-center .visual-wrap{height:190px;aspect-ratio:auto;min-height:190px}.lab-center .visual-side{min-width:0}.plugin-plate{border:1px solid #ab8e6133;border-radius:5px;margin-top:8px}.plugin-plate summary{font-size:10px;padding:9px;color:#d0aa73;cursor:pointer}.plugin-plate .plate-experiment{margin:0;border:0}.custom-listening .lab-controls>div:nth-child(2){display:grid;grid-template-columns:1fr 1fr;gap:8px}.custom-listening .lab-controls>div:nth-child(2)>h3,.custom-listening #labCustom{grid-column:1/-1}.custom-listening .lab-field>span{flex-wrap:wrap;justify-content:center;text-align:center;gap:3px}.custom-listening .lab-field>span>span{width:100%;justify-content:center}.lab-center .sliders{display:none}.lab-center .model-caption{margin-top:8px}.lab-center .model-explanation{flex-shrink:0}.amb-btn{height:76px}.plugin-fullscreen{background:#211f1b!important;color:#dfc18c!important;cursor:pointer}.lab-dock .slabel{flex-wrap:wrap;gap:5px}.lab-dock .lval{display:block}.plugin-expanded .topbar{position:sticky;top:0}
.ambient-grid .emoji{display:none}.ambient-grid .albl{font-size:11px;letter-spacing:.04em}.amb-btn::before{content:'';display:block;width:5px;height:5px;border-radius:50%;background:#646553;box-shadow:inset 0 1px 2px #000;margin:0 auto 9px}.amb-btn.active::before{background:#e6c895;box-shadow:0 0 9px #e6c89599}.freq-list{counter-reset:instrument-channel}.freq-item{counter-increment:instrument-channel}.fi-ic{font-size:0!important;background:#0a0d0a!important;border:1px solid #ab8e6133;border-radius:3px!important}.fi-ic::after{content:counter(instrument-channel,decimal-leading-zero);font:10px monospace;color:#d0aa73}.plugin-fullscreen:focus-visible{outline:2px solid #d0aa73}

/* Interactive instruments aligned to the original 1672 × 941 room render. */
.room-lab{background:#080909;color:#eee7d8}.room-lab .bg{background:#080909}.room-lab .topbar{min-height:54px;padding:8px 20px;background:#090a09ed}.room-lab .wrap{padding:0 0 112px;max-width:none}.room-lab .lab-intro,.room-lab .history,.room-lab .footer{display:none}.room-nav{height:46px;display:flex;align-items:center;justify-content:center;gap:8px;background:#0c0d0d}.room-nav button{border:1px solid #b49c6338;background:#1c1b17;color:#ded0b5;padding:7px 12px;font:11px var(--font);border-radius:3px;cursor:pointer}.room-nav button[aria-pressed=true]{border-color:#d0aa73;background:#423321}.room-title{font:italic 18px Georgia,serif;margin-right:22px;color:#d0aa73}.room-back[hidden]{display:none}.room-lab .room-scene{position:relative;display:block;width:min(100%,calc((100dvh - 210px)*1.777));aspect-ratio:1672/941;margin:auto;isolation:isolate;overflow:hidden;container-type:inline-size;background:#0b0c0b;border:0;border-radius:0;box-shadow:none}
.room-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;transform:translate(var(--look-x,0px),var(--look-y,0px)) scale(1.005);transition:transform .8s ease,filter .6s;z-index:-1}.room-scene.room-focused .room-photo{filter:brightness(.47);transform:scale(1.13)}.room-scene[data-station=library] .room-photo{transform-origin:20% 45%}.room-scene[data-station=mixer] .room-photo{transform-origin:80% 45%}.room-scene[data-station=plate] .room-photo{transform-origin:50% 30%}.room-scene[data-station=generator] .room-photo{transform-origin:50% 75%}
.room-lab .lab-center{display:contents;border:0;background:none;height:auto;padding:0;overflow:visible}.room-lab .lab-center::before,.room-lab .room-library::before,.room-lab .room-mixer::before{display:none}.room-lab .lab-center>.model-explanation{display:none}.room-lab .workstation .room-library,.room-lab .workstation .room-mixer,.room-lab .workstation .room-monitor,.room-lab .workstation .room-console{position:absolute;overflow:auto;margin:0!important;background:#070b09d9;border:0;border-radius:0;box-shadow:none;height:auto;scrollbar-width:thin;scrollbar-color:#84705055 transparent;padding:8px}
.room-lab .workstation .room-library{left:11.4%;top:31.1%;width:18%;height:17.5%;transform:skewY(-1deg);font-size:9px}.room-library .card-head,.room-library .sub{display:none}.room-library .tabs{gap:2px;margin-bottom:4px}.room-library .tab{font-size:7px;padding:3px}.room-library .search{margin:2px 0}.room-library .search input{font-size:8px;padding:4px 5px}.room-library .freq-list{min-height:0;max-height:none;overflow:visible}.room-library .freq-item{padding:5px 3px;gap:3px}.room-library .fi-name{font-size:8px}.room-library .fi-sub{font-size:7px}.room-library .fi-freq{font-size:8px}.room-library .fi-ic{display:none}
.room-lab .workstation .room-monitor{left:41.4%;top:11%;width:17.5%;height:25.5%;padding:0;overflow:hidden}.room-monitor .hero-grid{height:100%;gap:0}.room-monitor .hero-grid>div:not(.visual-side){display:none}.room-monitor .visual-side{height:100%;position:relative}.room-monitor .visual-toolbar{position:absolute;bottom:0;left:0;right:0;margin:0;z-index:2;gap:2px;background:#07100bea;padding:4px}.room-monitor .visual-toolbar button{font-size:7px;padding:3px 4px}.room-monitor #modelReadout{display:none}.room-lab .room-monitor .visual-wrap{width:100%;height:100%;min-height:0;border:0;aspect-ratio:auto;border-radius:0}.room-monitor .cym-tag{font-size:7px}.room-monitor .plugin-plate,.room-monitor .model-caption{display:none}
.room-lab .workstation .room-mixer{left:71.8%;top:33.8%;width:20%;height:10%;padding:5px}.room-mixer>.card{padding:0;background:none}.room-mixer .card-head,.room-mixer .slider-block,.room-mixer>.lab-secondary{display:none}.room-mixer .ambient-grid{grid-template-columns:repeat(3,1fr);gap:2px}.room-mixer .amb-btn{height:auto;min-height:17px;padding:3px;border-radius:2px;background:#141815}.room-mixer .amb-btn::before{display:none}.room-mixer .albl{font-size:8px}
.room-lab .workstation .room-console{left:16%;top:59.6%;width:68%;height:20.5%;padding:5px 18px;background:transparent!important;overflow:hidden}.room-console h2,.room-console .lab-note,.room-console h3{display:none}.room-console .lab-controls{grid-template-columns:1fr 1.5fr;gap:22px;align-items:center;height:100%}.room-console .lab-controls>div:first-child{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.room-console .lab-quick{margin:4px 0;gap:6px}.room-console .lab-quick button{padding:8px 12px;font-size:11px;background:#0c100bbd;box-shadow:0 3px 5px #0008}.room-console .lab-field{margin:0}.room-console .lab-field select{font-size:10px;padding:5px}.room-console .lab-controls>div:nth-child(2){display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:12px}.room-console #labCustom{grid-column:auto;font-size:9px;max-width:110px;padding:10px;white-space:normal;background:#1d211be0}.room-console .lab-field>span{font-size:9px}.room-console .lab-field output{font-family:monospace;color:#e9cf9f}.room-console .instrument-knob{width:58px;height:58px;margin:4px auto}.room-console .knob-pointer{top:10px;transform-origin:1px 19px}
.room-hotspot{position:absolute;z-index:3;border:1px solid #b2935655;color:#eddbb7;background:#0b1009cf;padding:5px 10px;border-radius:2px;font:9px var(--font);cursor:pointer;box-shadow:0 3px 10px #0008;transition:background .2s}.room-hotspot:hover{background:#423522}.hotspot-library{left:11%;top:27.1%}.hotspot-plate{left:42%;top:6.5%}.hotspot-mixer{left:72%;top:29.6%}.hotspot-generator{left:43%;top:81.5%}.room-focused .room-hotspot{display:none}.room-hint{text-align:center;font:11px var(--font);color:#998c77;margin:8px 16px}.room-lab .lab-dock{background:#0b0d0ded;border-color:#9f835040;min-height:82px;padding:8px 20px}.room-lab .lab-dock .instrument-knob{width:52px;height:52px}.room-lab .lab-dock .knob-pointer{top:9px;transform-origin:1px 17px}
/* Move closer to a station without restarting or cloning any audio controls. */
.room-lab .workstation .room-selected{left:50%;top:50%;transform:translate(-50%,-50%);width:min(680px,83%);height:86%;padding:24px;z-index:6;overflow:auto!important;background:linear-gradient(130deg,#242824f5,#0b110df5)!important;border:2px solid #786440;box-shadow:0 30px 80px #000c,inset 0 0 0 5px #ffffff05;border-radius:8px}.room-focused>*:not(.room-photo):not(.lab-center):not(.room-selected){visibility:hidden}.room-focused .lab-center>*:not(.room-selected){visibility:hidden}
.room-selected .card-head,.room-selected h2,.room-selected h3,.room-selected .sub{display:flex!important}.room-selected .card-head .sub{font-size:11px}.room-selected .tabs{gap:6px;margin-bottom:12px}.room-selected .tab{font-size:11px;padding:8px}.room-selected .search input{padding:10px;font-size:13px}.room-selected .freq-item{padding:12px 8px;gap:9px}.room-selected .fi-name{font-size:13px}.room-selected .fi-sub{font-size:11px}.room-selected .fi-freq{font-size:12px}.room-selected .freq-list{max-height:calc(100% - 145px);overflow:auto}.room-selected .ambient-grid{gap:8px}.room-selected .amb-btn{min-height:58px;padding:10px}.room-selected .albl{font-size:12px}.room-selected .slider-block,.room-selected>.lab-secondary{display:block!important}.room-selected>.lab-secondary{margin-top:12px}.room-selected .hero-grid>div:not(.visual-side){display:block}.room-selected .hero-grid{height:auto;gap:12px}.room-selected .np-title{font-size:24px}.room-selected .np-desc{font-size:12px;max-height:none}.room-selected .visual-side{height:auto}.room-selected .visual-toolbar{position:static;gap:7px;margin-bottom:10px}.room-selected .visual-toolbar button{font-size:11px;padding:8px}.room-selected #modelReadout{display:block;font-size:10px}.room-lab .room-selected .visual-wrap{height:260px;min-height:200px}.room-selected .plugin-plate,.room-selected .model-caption{display:block}.room-selected .lab-controls{display:grid;grid-template-columns:1fr;gap:24px;height:auto}.room-selected .lab-controls>div:first-child{display:block}.room-selected .lab-controls>div:nth-child(2){grid-template-columns:1fr 1fr}.room-selected #labCustom{grid-column:1/-1;max-width:none;font-size:12px}.room-selected .lab-field>span{font-size:12px}.room-selected .instrument-knob{width:76px;height:76px}.room-selected .knob-pointer{top:12px;transform-origin:1px 26px}
@media(max-width:850px){.room-title{display:none}.room-nav{height:auto;min-height:48px;flex-wrap:wrap;padding:8px}.room-nav button{font-size:10px;padding:7px}.room-lab .room-scene{width:100%;min-height:580px;aspect-ratio:auto;overflow:visible;background:#10130f}.room-photo{height:330px;object-fit:cover;object-position:50% 25%;transform:none}.room-lab .workstation .room-library,.room-lab .workstation .room-mixer,.room-lab .workstation .room-monitor{visibility:hidden;pointer-events:none}.room-lab .workstation .room-console{position:relative;left:auto;top:auto;transform:none;width:calc(100% - 24px);height:auto;min-height:240px;margin:0 12px!important;padding:14px;top:300px;background:linear-gradient(130deg,#272b24,#131a15)!important;border:1px solid #9a7e50;border-radius:6px}.room-console .lab-controls{grid-template-columns:1fr;gap:12px}.room-console .lab-controls>div:first-child{justify-content:center}.room-console .lab-controls>div:nth-child(2){gap:5px}.room-console .lab-field>span{font-size:10px}.room-hotspot{font-size:10px}.hotspot-library{top:120px;left:3%}.hotspot-plate{top:65px;left:39%}.hotspot-mixer{top:180px;left:auto;right:3%}.hotspot-generator{display:none}.room-lab .workstation .room-selected{visibility:visible;pointer-events:auto;position:absolute;top:12px!important;left:12px!important;transform:none!important;width:calc(100% - 24px);height:550px;min-height:0;margin:0!important;padding:18px}.room-lab .room-focused{min-height:580px}.room-lab .room-focused .room-console:not(.room-selected){visibility:hidden}.room-lab .room-selected .visual-wrap{height:220px}.room-hint{font-size:10px;line-height:1.6}.room-lab .topbar .brand .name{font-size:15px}.room-lab .topbar .brand{width:auto}.room-lab .topbar .logo{display:none}.room-lab .topbar{gap:8px}.room-lab .top-actions{width:auto;gap:5px}.room-lab .site-return{padding:7px;font-size:9px}.room-lab .plugin-fullscreen{display:none}.room-lab .site-signature{font-size:13px}.room-lab .lab-dock{justify-content:space-between;gap:10px;padding:8px 12px}.room-lab .dock-title{font-size:10px}.room-lab .lab-dock .slider-block{width:120px}.room-lab .wrap{padding-bottom:130px}}
@media(prefers-reduced-motion:reduce){.room-photo{transition:none;transform:none!important}.room-selected{transition:none}}
/* Override the legacy sticky library and compact the foreground engravings. */
.room-lab .workstation #libraryCard{position:absolute}.room-lab .room-library .tabs{display:grid;grid-template-columns:1fr 1fr;gap:2px}.room-lab .room-library .tab{font-size:7px;padding:3px 2px;white-space:normal}.room-lab .room-console .lab-field>span{display:block;text-align:center;line-height:1.2;min-height:25px}.room-lab .room-console .lab-field>span>span{display:block;width:100%;font-size:9px;line-height:1.2}.room-lab .room-console .lab-field output{display:block;margin-top:3px;font-size:10px}.room-console .lab-field:has(.instrument-knob){gap:1px}.room-console .instrument-knob{width:48px;height:48px;margin:2px auto}.room-console .knob-pointer{top:9px;transform-origin:1px 15px}.room-console::before{display:none!important}.room-console .lab-controls>div:nth-child(2){height:100%}.room-console .lab-controls>div:nth-child(2)>h3{display:none!important}.room-console .lab-controls>div:nth-child(2)>label{align-self:center}.room-lab .room-selected.room-library .tab{font-size:11px;padding:8px}.room-lab .room-selected.room-library .tabs{display:flex;flex-wrap:wrap}.room-lab .room-selected.room-console .instrument-knob{width:76px;height:76px}.room-lab .room-selected.room-console .knob-pointer{top:12px;transform-origin:1px 26px}.room-lab .room-selected.room-console .lab-field>span>span{font-size:12px}
@media(max-width:850px){.room-lab .workstation #libraryCard.room-selected{position:absolute}}
.room-lab .workstation #libraryCard{top:31.1%}.room-lab .workstation #libraryCard.room-selected{top:50%}.room-lab .room-selected .search input{padding-left:35px}.room-lab .room-selected.room-monitor{overflow:auto!important}.room-lab .room-monitor .visual-wrap.cym-fs{position:fixed;inset:0;width:100vw;height:100dvh;z-index:1000;background:#050806}.room-lab .room-selected.room-monitor:has(.cym-fs){overflow:visible!important;transform:none;inset:0;width:100%;height:100%;padding:0}
@media(min-width:851px){.room-lab{height:100dvh;overflow:hidden}.room-lab .topbar{height:54px;min-height:54px}.room-lab .topbar .brand .name{font-size:18px;line-height:22px}.room-lab .topbar .site-signature{font-size:12px;line-height:16px}.room-lab .wrap{padding:0}.room-lab .room-nav{position:relative;z-index:10}.room-lab .room-scene{width:min(100%,calc((100dvh - 180px)*1.777))}.room-lab .room-hint{margin:5px 12px;font-size:10px}}
.room-library:not(.room-selected) .tabs,.room-library:not(.room-selected) .search{display:none}.room-lab .room-hotspot{width:auto}
@media(max-width:850px){.room-lab .workstation .room-library:not(.room-selected),.room-lab .workstation .room-mixer:not(.room-selected),.room-lab .workstation .room-monitor:not(.room-selected){display:none}.room-lab .workstation .room-selected{display:block}.room-lab .room-hotspot{max-width:60%;font-size:9px}.room-lab .hotspot-plate{left:35%}.room-lab .room-selected .tabs{display:flex;flex-wrap:wrap}.room-lab .room-selected .tab{font-size:9px;padding:5px}.room-lab .room-selected .freq-list{max-height:350px}}
.room-mixer .amb-btn{aspect-ratio:auto}.room-mixer:not(.room-selected) .ambient-grid{margin:0;gap:2px}.room-mixer:not(.room-selected) .amb-btn{min-height:0;height:19px;padding:2px}.room-selected.room-mixer .amb-btn{height:58px}.room-lab #themeToggle{display:none}
@container(min-width:1100px){.room-console .instrument-knob{width:72px;height:72px}.room-console .knob-pointer{top:12px;transform-origin:1px 24px}.room-lab .room-console .lab-field>span>span{font-size:12px}.room-lab .room-console .lab-field output{font-size:13px}.room-console .lab-quick button{font-size:13px;padding:12px 16px}.room-console #labCustom{font-size:11px}.room-console .lab-field select{font-size:12px}}
/* Full-bleed room, including ultrawide screens: image and instruments share coordinates. */
@media(min-width:851px){.room-lab .wrap{position:fixed;inset:0}.room-lab .room-scene{position:absolute;width:max(100vw,calc(100dvh * 1.777));height:max(100dvh,calc(100vw / 1.777));min-height:0;aspect-ratio:1672/941;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}.room-lab .topbar{position:fixed;inset:0 0 auto;z-index:60;background:#070907db;backdrop-filter:blur(12px)}.room-lab .room-nav{position:fixed;top:54px;left:0;right:0;background:#080b09a8;backdrop-filter:blur(10px);z-index:59}.room-lab .room-hint{position:fixed;bottom:85px;left:0;right:0;text-shadow:0 2px 4px #000}.room-lab .room-selected{max-height:calc(100dvh - 220px)}.room-lab .workstation .room-selected{top:50%}.room-lab .lab-dock{min-height:68px;padding:8px 20px;background:#090b09da}.room-lab .lab-dock .slider-block{display:none}.room-lab .room-photo{object-fit:fill;transform:none!important}}
.desk-mixer{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px;height:112px;min-width:0;margin-top:4px;border-top:1px solid #ac8c4c44;padding-top:6px}.mixer-strip{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;border-left:1px solid #0006;position:relative}.mixer-strip:first-child{border-left:0;background:#a68c4710}.fader-value{font:9px monospace;color:#d8c797;height:10px}.desk-fader{appearance:none;-webkit-appearance:none;writing-mode:vertical-lr;direction:rtl;width:22px;height:65px;min-height:65px;padding:0;margin:0;cursor:ns-resize;touch-action:none;background:linear-gradient(90deg,transparent 8px,#060906 8px 13px,transparent 13px),repeating-linear-gradient(0deg,transparent 0 8px,#b9a27055 8px 9px,transparent 9px 10px);border:0;box-shadow:none}.desk-fader::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;background:linear-gradient(#d0d0bf,#626d62 45%,#1a201a 46%,#afb7a7 52%,#444e43);border:1px solid #151c14;border-radius:3px;width:25px;height:12px;box-shadow:0 3px 4px #000b}.desk-fader::-moz-range-thumb{background:linear-gradient(#d0d0bf,#68745f,#323d2b);border:1px solid #151c14;border-radius:3px;width:25px;height:12px}.fader-name{font-size:8px;line-height:1.1;color:#dfd4b8;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;cursor:pointer}.channel-switch{border:1px solid #8f795044;background:#11190fe0;color:#4c5c42;border-radius:2px;font-size:8px;line-height:10px;padding:2px 12px;cursor:pointer}.channel-switch[aria-pressed=true]{color:#deb873;box-shadow:0 0 8px #d9b87433}.room-lab .room-console .lab-controls{height:68px;min-height:68px;gap:12px}.room-lab .room-console .instrument-knob{width:40px;height:40px;margin:1px auto}.room-lab .room-console .knob-pointer{top:8px;transform-origin:1px 12px;height:9px}.room-lab .room-console .lab-field>span{min-height:20px}.room-lab .room-console .lab-field>span>span{font-size:9px}.room-lab .room-console .lab-field output{font-size:10px;margin-top:1px}.room-lab .workstation .room-console{height:23.5%;top:58.7%;padding:5px 18px}.room-console .lab-quick button{padding:6px 12px;font-size:10px}.room-console #labCustom{font-size:9px;padding:6px}.room-console .lab-field select{font-size:10px;padding:5px}.room-physical-plate{position:absolute;left:33.5%;top:41.2%;width:33%;height:11.5%;pointer-events:none;z-index:2;filter:drop-shadow(0 3px 2px #0009)}
.room-lab .workstation .room-console.room-selected{top:50%;height:86%;padding:24px}.room-selected.room-console .desk-mixer{height:220px;gap:6px;margin-top:20px}.room-selected.room-console .desk-fader{height:145px;min-height:145px}.room-selected.room-console .fader-name{font-size:9px;white-space:normal}.room-selected.room-console .lab-controls{height:auto}.room-selected.room-console .instrument-knob{width:60px;height:60px}.room-selected.room-console .knob-pointer{top:10px;transform-origin:1px 20px}.room-focused .room-physical-plate{visibility:hidden}
@media(max-width:850px){.room-lab .room-physical-plate{display:none}.room-lab .workstation .room-console{height:auto;min-height:450px;top:300px}.room-lab .room-console .lab-controls{height:auto;min-height:140px}.desk-mixer{grid-template-columns:repeat(5,minmax(0,1fr));height:auto;gap:12px 5px}.desk-fader{height:95px;min-height:95px}.fader-name{font-size:9px}.fader-value{font-size:10px}.channel-switch{padding:4px 14px}.room-lab .room-scene{min-height:790px}.room-lab .room-console .instrument-knob{width:48px;height:48px}.room-lab .room-console .knob-pointer{top:9px;transform-origin:1px 15px}.room-lab .room-console.room-selected .desk-mixer{height:auto}.room-lab .room-console.room-selected .desk-fader{height:100px;min-height:100px}}
.room-physical-plate{left:35.5%;top:38.7%;width:28.5%;height:10.9%}
/* Override the original horizontal range styles only on the physical faders. */
.desk-mixer input.desk-fader[type=range]{appearance:none;-webkit-appearance:none;writing-mode:vertical-lr;direction:rtl;width:22px!important;height:80px;min-height:80px;padding:0;margin:0;border:0;border-radius:0;box-shadow:none;background:linear-gradient(90deg,transparent 8px,#060906 8px 13px,transparent 13px),repeating-linear-gradient(0deg,transparent 0 8px,#b9a27055 8px 9px,transparent 9px 10px)!important;cursor:ns-resize;touch-action:none}
.desk-mixer input.desk-fader[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;background:linear-gradient(#d0d0bf,#626d62 45%,#1a201a 46%,#afb7a7 52%,#444e43);border:1px solid #151c14;border-radius:3px;width:25px;height:12px;box-shadow:0 3px 4px #000b}
.desk-mixer input.desk-fader[type=range]::-moz-range-thumb{background:linear-gradient(#d0d0bf,#68745f,#323d2b);border:1px solid #151c14;border-radius:3px;width:25px;height:12px}.room-lab .room-console{backdrop-filter:none!important}.desk-mixer{height:130px}.fader-name{font-size:10px}.fader-value{font-size:10px}.room-selected .desk-mixer input.desk-fader[type=range]{height:140px;min-height:140px}
@media(max-width:850px){.desk-mixer input.desk-fader[type=range]{height:95px;min-height:95px}.desk-mixer{height:auto}.room-selected .desk-mixer input.desk-fader[type=range]{height:100px;min-height:100px}}
@media(max-width:850px){.room-lab .room-physical-plate{display:block;left:calc(50% - 84px);top:128px;width:168px;height:36px}.room-lab .room-focused .room-physical-plate{display:none}.fader-name{font-size:9px}}
@media(min-width:851px){.room-lab .workstation .room-console:not(.room-selected){left:7.3%;top:57.1%;width:85.2%;height:24.5%;padding:10px 30px;overflow:visible;transform-origin:0 0}.room-lab .room-console:not(.room-selected) .desk-mixer{gap:12px}.room-lab .room-console:not(.room-selected) .lab-controls{grid-template-columns:1fr 1.5fr}}
@media(min-width:851px){.room-lab .workstation .room-console:not(.room-selected){left:8.4%;top:58.1%;width:84.3%;height:22.8%;padding:8px 30px;overflow:hidden}.room-console:not(.room-selected) .desk-mixer{height:auto;margin-top:2px;padding-top:4px}.room-console:not(.room-selected) .desk-mixer input.desk-fader[type=range]{height:var(--desk-fader-length,65px);min-height:var(--desk-fader-length,65px)}.room-console:not(.room-selected) .lab-controls{height:60px;min-height:60px}.room-console:not(.room-selected) .fader-name{font-size:9px}}
@media(min-width:851px){.room-lab .workstation #libraryCard:not(.room-selected){left:11%;top:30.9%;width:18.2%;height:17.9%;padding:5px}.room-lab .workstation .room-mixer:not(.room-selected){left:71.77%;top:33.79%;width:19.62%;height:9.77%;padding:4px}}

/* Machined cylinders and raised caps: shadows and sidewalls above the desk. */
.room-console .instrument-knob{background:radial-gradient(ellipse,#151710 45%,#baa471 49%,#34362b 60%,transparent 65%);overflow:visible;filter:drop-shadow(5px 10px 3px #0009)}
.room-console .instrument-knob::after{content:'';position:absolute;inset:4px 5px -4px;border-radius:45% 45% 40% 40%;background:repeating-linear-gradient(90deg,#171c16 0 2px,#575a48 3px,#262b22 5px);border:1px solid #74664a;box-shadow:inset -5px 0 6px #0008;pointer-events:none}
.room-console .instrument-knob::before{inset:-7px 5px 9px;z-index:1;background:radial-gradient(ellipse at 28% 20%,#777a65,#343c30 50%,#131b13 90%);border:1px solid #c4b383;box-shadow:inset 0 2px 2px #e8e1bd66,inset 0 -2px 2px #000b;pointer-events:none}
.room-console .instrument-knob .knob-pointer{z-index:2;translate:0 -10px}
.room-console .binaural-hardware{position:relative;grid-template-columns:90px 90px 120px!important;justify-content:center;gap:14px!important;padding:0 12px;border-left:1px solid #a28b5950}
.room-console .frequency-led{position:absolute;left:12px;right:12px;top:-4px;display:flex;justify-content:center;gap:16px;background:#07100c;border:2px solid #292b23;border-radius:3px;box-shadow:inset 0 3px 6px #000,0 1px 0 #c9b98a66;padding:3px 8px;color:#a5c799;font:9px monospace;letter-spacing:1px}
.frequency-led b{color:#d3edbd;text-shadow:0 0 5px #9edb6866;font-weight:400}
.room-console .binaural-hardware .lab-field{padding-top:21px}.room-console .binaural-hardware .lab-field output{display:none}.room-console .binaural-hardware .lab-field>span{min-height:14px}
.physical-fader{position:relative;width:36px;height:var(--desk-fader-length,80px);flex-shrink:0}
.desk-mixer .physical-fader input.desk-fader[type=range]{position:absolute;left:7px;top:0;height:100%;min-height:100%;z-index:3}
.desk-mixer .physical-fader input.desk-fader[type=range]::-webkit-slider-thumb{opacity:0;background:transparent;border:0;box-shadow:none}
.desk-mixer .physical-fader input.desk-fader[type=range]::-moz-range-thumb{opacity:0;background:transparent;border:0;box-shadow:none}
.fader-cap{position:absolute;pointer-events:none;left:2px;top:calc(var(--travel)* (100% - 12px));width:32px;height:14px;translate:0 -6px;border:1px solid #121a13;border-radius:3px;background:repeating-linear-gradient(0deg,#c3c9b1 0 2px,#76836b 2px 3px);box-shadow:inset 0 2px 1px #f4f4db,0 6px 0 #4f5a45,0 8px 0 #172116,5px 12px 5px #000b;z-index:4}
.fader-cap::after{content:'';position:absolute;left:1px;right:1px;top:6px;height:2px;background:#182019;box-shadow:0 1px 0 #e7e9c9}
.room-console.room-selected .physical-fader{height:140px}
@media(max-width:850px){.physical-fader{height:95px}.room-console .binaural-hardware{grid-template-columns:82px 82px 100px!important;gap:5px!important;padding:0;border-left:0}.room-console .frequency-led{gap:8px;left:0;right:0}.room-console.room-selected .physical-fader{height:100px}}
.room-console .frequency-led{left:50%;right:auto;width:310px;max-width:100%;transform:translateX(-50%)}

/* Compact upper-right oscillator module; safe clearance at both desk ends. */
.room-console .native-waveform{display:none!important}
.room-console .waveform-bank{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.room-console .lab-controls>div:first-child{gap:20px;align-content:center}
.room-console .hardware-switch,.room-console #labCustom.hardware-switch{position:relative;min-width:64px;min-height:29px;border:1px solid #6c6455;border-radius:4px;background:linear-gradient(#393c37,#1c211c);color:#ece8d8;font:10px var(--font);padding:7px 10px;box-shadow:0 4px 0 #080c08,0 5px 1px #a08a5955,2px 7px 5px #0009,inset 0 1px 0 #ffffff40;transition:translate .08s,box-shadow .08s,background .08s;white-space:nowrap}
.room-console .hardware-switch::before{content:'';display:inline-block;width:4px;height:4px;margin-right:5px;border-radius:50%;background:#572524;box-shadow:inset 0 1px 2px #000}
.room-console .hardware-switch[aria-pressed=true],.room-console .hardware-switch:active{translate:0 3px;background:linear-gradient(#54251f,#301915);border-color:#9c5141;box-shadow:0 1px 0 #080c08,inset 0 2px 4px #000a,0 0 8px #ff362322;color:#ffd8c8}
.room-console .hardware-switch[aria-pressed=true]::before{background:#ff382a;box-shadow:0 0 5px #ff241b,0 0 10px #ff241b88}
.room-console .hardware-switch:focus-visible{outline:2px solid #e5bd7d;outline-offset:4px}
.room-console .binaural-hardware{justify-content:end!important;border-left:0;grid-template-columns:90px 90px 100px!important}
.room-console .frequency-led{width:280px;left:auto;right:10px;transform:none}
.room-console .instrument-knob{filter:drop-shadow(3px 6px 2px #000a)}
.room-console .instrument-knob::after{inset:8px 5px 0;border-radius:45%;background:repeating-linear-gradient(90deg,#121912 0 2px,#59614d 3px,#242e20 5px)}
.room-console .instrument-knob::before{inset:0 5px 8px}.room-console .instrument-knob .knob-pointer{translate:0 -3px}
.room-console .fader-cap{height:15px;border-radius:3px;background:linear-gradient(90deg,#a4aa98,#ecebd7 25%,#bfc6ab 70%,#77856e);box-shadow:inset 0 2px 0 #ffffdf,0 4px 0 #778367,0 7px 0 #36432e,0 8px 0 #121b10,4px 10px 4px #000b}
.room-console .fader-cap::before{content:'';position:absolute;left:3px;right:3px;top:2px;height:10px;background:repeating-linear-gradient(0deg,transparent 0 2px,#42543a66 2px 3px);border-radius:2px}
@media(min-width:851px){.room-lab .room-console:not(.room-selected) .lab-controls{grid-template-columns:minmax(0,1fr) 330px;gap:12px}.room-console:not(.room-selected) .desk-mixer{margin-left:30px;margin-right:45px;gap:8px}.room-console:not(.room-selected) .binaural-hardware .lab-field{padding-top:20px}.room-console:not(.room-selected) .lab-controls>div:first-child{flex-wrap:nowrap}.room-console:not(.room-selected) .waveform-bank{flex-wrap:nowrap}.room-console:not(.room-selected) .instrument-knob{width:48px;height:38px}}
@media(max-width:850px){.room-console .lab-controls>div:first-child{justify-content:center;gap:8px}.room-console .waveform-bank{gap:5px;justify-content:center}.room-console .hardware-switch{padding:7px;min-width:65px;font-size:9px}.room-console .frequency-led{left:0;right:0;width:100%}.room-console .binaural-hardware{justify-content:center!important;grid-template-columns:82px 82px 100px!important}.room-console .lab-controls{padding-bottom:8px}}
@media(min-width:851px){.room-lab .room-console:not(.room-selected) .lab-controls{height:72px;min-height:72px}.room-console:not(.room-selected) .binaural-hardware .lab-field{align-self:start}}

/* Equal-height switches, waveform glyphs and restored fader travel. */
.room-console .hardware-switch,.room-console #labCustom.hardware-switch{height:32px;min-height:32px;box-shadow:0 6px 0 #080c08,0 7px 0 #77705c,3px 10px 5px #0009,inset 0 1px 0 #ffffff40;display:inline-flex;align-items:center;justify-content:center;gap:3px}
.room-console .hardware-switch[aria-pressed=true],.room-console .hardware-switch:active,.room-console #labCustom.hardware-switch[aria-pressed=true]{translate:0 4px;box-shadow:0 2px 0 #080c08,0 3px 0 #65574a,inset 0 2px 4px #000a,0 0 8px #ff362322}
.room-console .hardware-switch svg{width:32px;height:20px}.room-console .hardware-switch::before{flex-shrink:0;margin-right:2px}
.room-console .binaural-hardware{grid-template-columns:90px 90px!important}.room-console .frequency-led{width:190px;right:0;font-size:8px;gap:7px}
@media(min-width:851px){.room-lab .room-console:not(.room-selected) .lab-controls{height:50px;min-height:50px;grid-template-columns:minmax(0,1fr) 210px;align-items:start}.room-console:not(.room-selected) .lab-controls>div:first-child{align-items:center;gap:16px;transform:translateY(-2px)}.room-console:not(.room-selected) .lab-quick{margin:0}.room-console:not(.room-selected) .binaural-hardware{grid-template-columns:90px 90px!important;gap:12px!important;padding:0}.room-console:not(.room-selected) .binaural-hardware .lab-field{padding-top:15px}.room-console:not(.room-selected) .binaural-hardware .lab-field>span{min-height:12px}.room-console:not(.room-selected) .binaural-hardware .lab-field>span>span{font-size:8px}.room-console:not(.room-selected) .frequency-led{top:-5px}}
@media(max-width:850px){.room-console .binaural-hardware{grid-template-columns:100px 100px!important}.room-console .frequency-led{width:100%;font-size:9px}.room-console .lab-controls>div:first-child{flex-wrap:wrap}.room-console .hardware-switch,.room-console #labCustom.hardware-switch{height:32px;min-height:32px}}

/* LED readout to the left, both rotary controls along the back edge. */
.room-console .binaural-hardware{grid-template-columns:190px 80px 80px!important;gap:12px!important;align-items:center!important;padding:0!important;}
.room-console .frequency-led{position:static;grid-column:1;grid-row:1;width:190px;max-width:none;transform:none;align-self:center;margin:0}
.room-console .binaural-hardware .lab-field{grid-row:1;padding-top:0!important;align-self:start!important}
.room-console .binaural-hardware .lab-field:has(#labCarrier){grid-column:2}.room-console .binaural-hardware .lab-field:has(#labBeat){grid-column:3}
@media(min-width:851px){.room-lab .room-console:not(.room-selected) .lab-controls{grid-template-columns:minmax(0,1fr) 374px}.room-console:not(.room-selected) .binaural-hardware{grid-template-columns:190px 80px 80px!important;transform:translateY(-5px);height:45px!important}.room-console:not(.room-selected) .frequency-led{font-size:9px}.room-console:not(.room-selected) .binaural-hardware .lab-field>span>span{font-size:9px}}
@media(max-width:850px){.room-console .binaural-hardware{grid-template-columns:minmax(0,1fr) 68px 68px!important;gap:8px!important}.room-console .frequency-led{width:100%;min-width:0;font-size:8px;gap:5px}}
.room-console.room-selected .binaural-hardware{grid-template-columns:minmax(0,1fr) 80px 80px!important}.room-console.room-selected .frequency-led{width:100%;min-width:0}
/* Readable console engravings and clearance from the upper-right screw. */
.room-console .fader-name,.room-console .fader-value,.room-console .lab-field>span>span{font-weight:700;color:#f3ead2;text-shadow:0 1px 2px #000b;letter-spacing:.15px}
.room-console .hardware-switch,.room-console #labCustom.hardware-switch{font-weight:600}
@media(min-width:851px){.room-console:not(.room-selected) .binaural-hardware{transform:translate(-34px,-5px)}.room-console:not(.room-selected) .fader-name{font-size:10px}.room-console:not(.room-selected) .binaural-hardware .lab-field>span>span{font-size:10px}}
/* Expanded console: allow clearance for protruding switch bodies. */
.room-lab .room-console.room-selected .lab-controls>div:first-child{display:flex;flex-direction:column;align-items:flex-start;gap:18px;height:auto}
.room-lab .room-console.room-selected .lab-controls>div:first-child>h3{margin:0}
.room-lab .room-console.room-selected .lab-quick{margin:0;gap:12px}
.room-lab .room-console.room-selected .waveform-bank{gap:12px;margin:0}
.room-lab .room-console.room-selected #labCustom{margin:0;grid-column:auto}
.room-lab .room-console.room-selected .lab-controls{height:auto;min-height:0;gap:30px}
.room-lab .room-console.room-selected .binaural-hardware{height:auto!important;min-height:85px}
/* A legible instrument display when the console is opened. */
.room-lab .room-console.room-selected .frequency-led{min-height:54px;padding:12px 14px;font-size:17px;letter-spacing:1px;gap:20px;border:3px solid #464837;border-radius:5px;background:linear-gradient(#020704,#0a1710);box-shadow:inset 0 4px 9px #000,0 1px 0 #c4b58a66}
.room-console.room-selected .frequency-led b{font-size:22px;color:#d9f0be;text-shadow:0 0 7px #9cdd7070}
.room-console.room-selected .frequency-led>span{white-space:nowrap}
@media(max-width:850px){.room-lab .room-console.room-selected .frequency-led{min-height:64px;padding:8px 6px;font-size:10px;gap:6px;flex-wrap:wrap}.room-console.room-selected .frequency-led b{font-size:13px}}

/* Keep the master volume within the mobile/tablet transport bar. */
@media(max-width:850px){.room-lab .lab-dock .slider-block{width:130px;min-width:0;flex-shrink:1;gap:8px}.room-lab .lab-dock .slabel{min-width:0;flex:1}.room-lab .lab-dock .instrument-knob{margin:0;width:52px;height:52px}}

/* Close each expanded station without stopping the audio engine. */
.room-panel-close{display:none}
.room-lab .room-selected>.room-panel-close{display:flex;position:absolute;top:12px;right:12px;z-index:30;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border:1px solid #b99b65;border-radius:50%;background:#111811;color:#f5e6c4;font-size:28px;line-height:1;cursor:pointer;box-shadow:0 3px 10px #0008}
.room-lab .room-selected>.room-panel-close:hover{background:#3c3424}
.room-lab .room-selected>.room-panel-close:focus-visible{outline:2px solid #ffd17a;outline-offset:3px}
.room-lab .workstation .room-selected{padding-top:60px!important}

/* Fixed-size LED window: editable values never resize the mixing desk. */
.room-lab .room-console .frequency-led{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap!important;white-space:nowrap;width:100%;min-width:0;max-width:100%;min-height:38px;padding:7px 10px;font-size:11px;gap:10px;box-sizing:border-box;overflow:hidden}
.room-console .frequency-led .led-part{display:flex;align-items:center;gap:4px;white-space:nowrap;flex-shrink:0}
.room-console .frequency-led input{appearance:textfield;-moz-appearance:textfield;width:8.5ch;min-width:0;max-width:none;padding:3px 0;border:0;border-bottom:1px solid #a6c28455;border-radius:0;background:transparent;color:#d9f0be;font:700 1em monospace;text-align:center;letter-spacing:.5px;box-shadow:none;box-sizing:content-box}
.room-console .frequency-led input#ledBeat{width:2.5ch}
.room-console .frequency-led input::-webkit-inner-spin-button,.room-console .frequency-led input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.room-console .frequency-led input:hover{background:#acd57c12}.room-console .frequency-led input:focus{outline:1px solid #c9e79c;background:#102117;border-bottom-color:#d9f0be}
.room-console .frequency-led b{font:700 1em monospace;letter-spacing:.5px}
@media(min-width:851px){.room-lab .room-console:not(.room-selected) .lab-controls{grid-template-columns:minmax(0,1fr) 520px}.room-console:not(.room-selected) .binaural-hardware{grid-template-columns:minmax(0,330px) 80px 80px!important;gap:12px!important;transform:translate(-22px,-5px)}.room-console:not(.room-selected) .frequency-led{font-size:11px;min-height:40px}}
.room-lab .room-console.room-selected .frequency-led{font-size:clamp(11px,1.2vw,17px);min-height:64px;padding:12px;gap:8px}
.room-console.room-selected .frequency-led b{font-size:1em}
@media(max-width:850px){.room-lab .room-console .binaural-hardware{grid-template-columns:minmax(0,1fr) 68px 68px!important}.room-lab .room-console .frequency-led{grid-column:1/-1;grid-row:1;font-size:clamp(10px,2.4vw,14px);min-height:48px;padding:8px 10px;gap:5px}.room-console .binaural-hardware .lab-field{grid-row:2!important}.room-console .binaural-hardware .lab-field:has(#labCarrier){grid-column:2}.room-console .binaural-hardware .lab-field:has(#labBeat){grid-column:3}.room-lab .room-console.room-selected .frequency-led{font-size:clamp(10px,2.4vw,14px)}}

/* Clearer side-instrument text, with reserved room for long translations. */
.room-library .fi-name{font-size:14px;font-weight:700;color:#f6eddc}.room-library .fi-sub{font-size:12px;color:#d0c5ae;line-height:1.3}.room-library .fi-freq{font-size:14px;font-weight:700;color:#edd39d}.room-library .freq-item{padding:6px 5px}
.room-mixer .amb-btn{font-size:14px!important;font-weight:700;color:#eee3c9!important;line-height:1.15;text-shadow:0 1px 2px #000;padding:4px 3px!important;overflow-wrap:anywhere}.room-mixer .amb-btn.active{color:#ffe1a8!important;background:#44341c!important;border-color:#c6a265!important}
.room-selected.room-library .fi-name{font-size:15px}.room-selected.room-library .fi-sub{font-size:12px;color:#d0c5ae}.room-selected.room-library .fi-freq{font-size:14px}.room-selected.room-mixer .amb-btn{font-size:15px!important;min-height:56px}
@media(min-width:1800px){.room-library .fi-name,.room-library .fi-freq{font-size:12px}.room-library .fi-sub{font-size:14px}.room-mixer .amb-btn{font-size:12px!important}}
.room-mixer .albl{font-size:14px;font-weight:700;color:inherit;line-height:1.2}.room-selected.room-mixer .albl{font-size:16px}
@media(min-width:1800px){.room-mixer .albl{font-size:16px}}
@media(min-width:851px) and (max-width:1150px){.room-lab .room-console:not(.room-selected) .lab-controls{grid-template-columns:minmax(0,1fr) 380px}.room-console:not(.room-selected) .binaural-hardware{grid-template-columns:minmax(0,250px) 54px 54px!important;gap:8px!important;transform:translate(-12px,-5px)}.room-console:not(.room-selected) .frequency-led{font-size:9px;padding:7px 4px;gap:3px}.room-console:not(.room-selected) .hardware-switch{min-width:0;padding:5px}.room-console:not(.room-selected) .lab-controls>div:first-child{gap:5px}}
.room-mixer:not(.room-selected) .amb-btn{height:auto;min-height:23px;padding:2px 3px!important;letter-spacing:0}.room-mixer:not(.room-selected) .albl{font-size:13px;white-space:nowrap}
.room-mixer:not(.room-selected) .ambient-grid{gap:2px}.room-lab .workstation .room-mixer:not(.room-selected){height:11%;padding:4px}
@media(min-width:1800px){.room-library .fi-name,.room-library .fi-freq{font-size:16px}.room-library .fi-sub{font-size:13px}.room-mixer:not(.room-selected) .albl{font-size:14px}}
@media(min-width:851px) and (max-width:1150px){.room-mixer:not(.room-selected) .albl{font-size:9px}.room-mixer:not(.room-selected) .amb-btn{padding:2px 1px!important;min-height:22px}}
/* A pure tone has one editable frequency; the second control fades away. */
.room-console .lab-field:has(#labBeat),.room-console .frequency-led .led-part:not(:first-child){transition:opacity .24s ease,visibility .24s ease}
.room-console[data-tone-mode=pure] .lab-field:has(#labBeat),.room-console[data-tone-mode=pure] .frequency-led .led-part:not(:first-child){opacity:0;visibility:hidden;pointer-events:none}
.room-console[data-tone-mode=pure] .frequency-led{justify-content:center}.room-console[data-tone-mode=pure] .frequency-led .led-part:not(:first-child){display:none}.room-console[data-tone-mode=pure] .frequency-led input{font-size:1.3em}
@media(prefers-reduced-motion:reduce){.room-console .lab-field:has(#labBeat),.room-console .frequency-led .led-part{transition:none}}
.room-console[data-tone-mode=pure] .led-channel{display:none}
/* Both mode switches stay adjacent; presets include the 7.83 Hz pure tone. */
.room-console .mode-bank{display:flex;align-items:center;gap:8px;flex-shrink:0}.room-console .lab-quick{flex-wrap:nowrap}
.room-console .frequency-led input#ledBeat{width:4.5ch}
@media(min-width:851px){.room-console:not(.room-selected) .lab-controls>div:first-child{gap:8px;flex-wrap:wrap;align-content:flex-start}.room-console:not(.room-selected) .lab-quick{gap:5px}.room-console:not(.room-selected) .waveform-bank{gap:5px}.room-console:not(.room-selected) .hardware-switch,.room-console:not(.room-selected) #labCustom.hardware-switch{min-width:48px;padding:5px 7px}.room-console:not(.room-selected) .lab-controls{height:70px!important;min-height:70px!important}}
@media(max-width:850px){.room-console .mode-bank{justify-content:center;width:100%;gap:12px}}
@media(min-width:1151px){.room-lab .room-console:not(.room-selected) .lab-controls{grid-template-columns:minmax(0,1fr) 480px;height:50px!important;min-height:50px!important}.room-console:not(.room-selected) .binaural-hardware{grid-template-columns:minmax(0,290px) 80px 80px!important}.room-console:not(.room-selected) .lab-controls>div:first-child{flex-wrap:nowrap;gap:6px}.room-console:not(.room-selected) .hardware-switch,.room-console:not(.room-selected) #labCustom.hardware-switch{min-width:40px;padding:5px 4px;font-size:9px}.room-console:not(.room-selected) .hardware-switch svg{width:28px}.room-console:not(.room-selected) .mode-bank{gap:5px}}
.room-mixer:not(.room-selected) .albl{font-size:clamp(9px,.88vw,13px)}

/* Warm breathing fixtures, restrained metal reflections and equipment standby LEDs. */
.room-living-light{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;mix-blend-mode:screen}
.room-glow{position:absolute;display:block;transform:translate(-50%,-50%);background:radial-gradient(ellipse,#ffd39160 0%,#eab26820 38%,transparent 72%);opacity:.32;animation:room-light-breathe 11s ease-in-out var(--light-delay) infinite alternate}
.room-glow-reflection{background:radial-gradient(ellipse,#f6d6a030,transparent 70%);opacity:.24;animation:room-reflection-drift 17s ease-in-out var(--light-delay) infinite alternate}
.room-equipment-led{position:absolute;width:clamp(2px,.18cqw,4px);aspect-ratio:1;border-radius:50%;background:#e9ae55;box-shadow:0 0 3px #ffc46d,0 0 8px #f1b05366;opacity:.7;animation:room-led-breathe 7s ease-in-out var(--light-delay) infinite alternate}
.room-equipment-led.green{background:#96bd85;box-shadow:0 0 3px #add896,0 0 7px #88b47055}
@keyframes room-light-breathe{0%,100%{opacity:.23}38%{opacity:.42}68%{opacity:.3}}
@keyframes room-reflection-drift{from{opacity:.14;transform:translate(-53%,-50%) scale(.94)}to{opacity:.36;transform:translate(-47%,-50%) scale(1.06)}}
@keyframes room-led-breathe{from{opacity:.48}to{opacity:.9}}
@media(max-width:850px){.room-living-light{height:330px}.room-living-light .room-equipment-led,.room-living-light .room-glow{display:none}.room-living-light{background:radial-gradient(ellipse at 28% 25%,#efbe7812,transparent 58%);animation:room-light-breathe 11s ease-in-out infinite alternate}}
@media(prefers-reduced-motion:reduce){.room-living-light,.room-glow,.room-equipment-led{animation:none!important}}

/* Monitor tabs replace the redundant track title; the Hz axis remains unobstructed. */
.room-monitor .cym-tag{display:none!important}
.room-monitor:not(.room-selected) .visual-toolbar{top:6px;bottom:auto;left:7px;right:42px;padding:0;background:transparent;flex-wrap:nowrap;gap:3px}
.room-monitor:not(.room-selected) .visual-toolbar button{font-size:clamp(8px,.65cqw,12px);padding:4px 5px;white-space:nowrap;background:#10150fee;color:#eadbc0}
/* Stronger local light variation, with occasional short dips instead of continuous flashing. */
.room-glow-lamp{background:radial-gradient(ellipse,#ffcf88b0 0%,#eeb56655 28%,transparent 72%);animation:room-lamp-life 19s linear var(--light-delay) infinite}
.room-glow-reflection{background:radial-gradient(ellipse,#f6d6a066,transparent 70%);animation:room-reflection-life 12s ease-in-out var(--light-delay) infinite alternate}
.room-equipment-led{width:clamp(3px,.25cqw,5px);box-shadow:0 0 5px #ffd186,0 0 13px #f1b053bb;animation:room-rack-life 9s linear var(--light-delay) infinite}
.room-equipment-led.green{box-shadow:0 0 5px #bcf5a4,0 0 12px #88b470aa}
@keyframes room-lamp-life{0%,100%{opacity:.45}25%{opacity:.8}52%{opacity:.55}71%{opacity:.7}72%{opacity:.18}73%{opacity:.72}74%{opacity:.38}76%{opacity:.66}88%{opacity:.82}}
@keyframes room-reflection-life{from{opacity:.2;transform:translate(-58%,-50%) scale(.92)}to{opacity:.8;transform:translate(-42%,-50%) scale(1.12)}}
@keyframes room-rack-life{0%,100%{opacity:.35}18%{opacity:1}42%{opacity:.65}43%,48%{opacity:.12}49%,74%{opacity:1}82%{opacity:.45}}
@media(prefers-reduced-motion:reduce){.room-glow,.room-equipment-led{animation:none!important;opacity:.5}}

/* Larger readout with the same fixed single-line window. */
@media(min-width:1151px){.room-console:not(.room-selected) .frequency-led{font-size:13px}}
@media(min-width:851px) and (max-width:1150px){.room-console:not(.room-selected) .frequency-led{font-size:10px}}
.room-lab .room-console.room-selected .frequency-led{font-size:clamp(12px,1.4vw,20px)}
@media(max-width:850px){.room-lab .room-console .frequency-led,.room-lab .room-console.room-selected .frequency-led{font-size:clamp(11px,2.8vw,16px)}}
.room-lab .room-console .frequency-led{gap:4px;padding-left:6px;padding-right:6px}
.room-console .frequency-led .led-part{gap:2px}
.room-console .frequency-led input{width:8ch;letter-spacing:0}
.room-console .frequency-led b{letter-spacing:0}

/* Random equipment events are scheduled individually in room.js. */
.room-glow-lamp{animation:room-light-breathe 23s ease-in-out var(--light-delay) infinite alternate}
.room-equipment-led{animation:none;opacity:.72}

.room-glow-lamp{animation:room-warm-presence 9s ease-in-out var(--light-delay) infinite alternate}
@keyframes room-warm-presence{from{opacity:.48}to{opacity:.88}}
@media(prefers-reduced-motion:reduce){.room-glow-lamp{animation:none!important}}

/* Compact monitor selectors leave the plate most of the screen. */
.room-monitor:not(.room-selected) .visual-toolbar{top:4px;left:7px;gap:4px}
.room-monitor:not(.room-selected) .visual-toolbar button{padding:2px 4px;border-width:1px;border-radius:5px;line-height:1.2;min-height:0}

.topbar .brand .logo{display:flex;background:transparent;box-shadow:none;width:48px;height:48px;border-radius:14px}.topbar .logo img{width:100%;height:100%}@media(max-width:850px){.room-lab .topbar .logo{display:flex;width:34px;height:34px;flex-shrink:0}}

/* Ambient labels: fit the actual rack width in every language. */
.room-mixer .ambient-grid{grid-template-columns:repeat(3,minmax(0,1fr));container-type:inline-size}
.room-mixer .amb-btn{min-width:0;box-sizing:border-box}
.room-mixer:not(.room-selected) .amb-btn .albl{font-size:clamp(8px,3.8cqi,13px);font-weight:700;letter-spacing:0;line-height:1.15;white-space:nowrap;max-width:100%}
.room-selected.room-mixer .amb-btn .albl{font-size:clamp(12px,3.8cqi,16px);white-space:normal;overflow-wrap:normal;line-height:1.2}
@media(max-width:850px){.room-mixer .amb-btn .albl{font-size:clamp(10px,3.8cqi,16px);white-space:normal;overflow-wrap:normal;line-height:1.2}}

/* Keep names fixed; selected overflowing subtitles travel to their end. */
.frequency-entry{position:relative;min-width:0}
.frequency-entry .freq-item{width:100%;box-sizing:border-box;padding-right:32px!important}
.frequency-info{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:21px;height:21px;display:grid;place-items:center;border:1px solid #bca16b;border-radius:50%;color:#e4ca94;background:#151812;font:bold 14px Georgia,serif;text-decoration:none;z-index:2}
.frequency-info:hover,.frequency-info:focus-visible{background:#d5b477;color:#10130e;outline:2px solid #ead7af;outline-offset:2px}
.frequency-entry.is-playing .frequency-info{animation:frequency-info-pulse 2.4s ease-in-out infinite}
.fi-sub .fi-scroll-text{display:inline-block;white-space:nowrap}
.freq-item.selected .fi-sub.has-overflow{overflow:hidden;text-overflow:clip!important}
.freq-item.selected .fi-sub.has-overflow .fi-scroll-text{animation:frequency-subtitle-scroll var(--scroll-duration,9s) linear infinite alternate}
@keyframes frequency-subtitle-scroll{0%,18%{transform:translateX(0)}82%,100%{transform:translateX(var(--scroll-distance,0px))}}
@keyframes frequency-info-pulse{0%,100%{box-shadow:0 0 0 #d5b47700;background:#151812}50%{box-shadow:0 0 8px #d5b47799;background:#66502b}}
@media(prefers-reduced-motion:reduce){.frequency-entry.is-playing .frequency-info{animation:none;background:#66502b}.freq-item.selected .fi-sub.has-overflow{white-space:normal!important}.freq-item.selected .fi-sub.has-overflow .fi-scroll-text{animation:none;white-space:normal}}

/* Header content stays inside the divider, including signature font ascenders. */
.room-lab .topbar{box-sizing:border-box;align-items:center}
.room-lab .topbar .brand{align-items:center}
.room-lab .topbar .brand .logo{flex-shrink:0;align-items:center;justify-content:center}
.room-lab .topbar .brand .txt{display:flex;flex-direction:column;justify-content:center}
.room-lab .topbar .site-signature{display:block}
@media(min-width:851px){.room-lab .topbar{padding:5px 22px}.room-lab .topbar .brand .logo{width:40px;height:40px}.room-lab .topbar .brand .name{line-height:22px}.room-lab .topbar .site-signature{font-size:12px;line-height:20px;height:20px}}

/* Preview the complete subtitle on hover/focus, before selecting a tone. */
.freq-item:hover .fi-sub.has-overflow,.freq-item:focus-visible .fi-sub.has-overflow{overflow:hidden;text-overflow:clip!important}
.freq-item:hover .fi-sub.has-overflow .fi-scroll-text,.freq-item:focus-visible .fi-sub.has-overflow .fi-scroll-text{animation:frequency-subtitle-scroll var(--scroll-duration,5s) linear infinite alternate}
@keyframes frequency-subtitle-scroll{0%,8%{transform:translateX(0)}92%,100%{transform:translateX(var(--scroll-distance,0px))}}
@media(prefers-reduced-motion:reduce){.freq-item:hover .fi-sub.has-overflow,.freq-item:focus-visible .fi-sub.has-overflow{white-space:normal!important}.freq-item:hover .fi-sub.has-overflow .fi-scroll-text,.freq-item:focus-visible .fi-sub.has-overflow .fi-scroll-text{animation:none;white-space:normal}}