* { box-sizing: border-box; }

:root {
    color-scheme: dark;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    background: #121312;
    color: #eee1bd;
}

html, body { min-height: 100%; }

body {
    margin: 0;
    background:
        radial-gradient(circle at 45% -20%, #2c2d2a 0, transparent 52%),
        linear-gradient(#151615, #111211);
}

button, select, input { font: inherit; }

.instrument {
    width: min(1360px, calc(100% - 28px));
    margin: 18px auto 26px;
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    margin-bottom: 14px;
    padding: 0 6px;
}

.brand h1 {
    margin: 0;
    font-size: clamp(2.6rem, 5vw, 4.9rem);
    line-height: .86;
    letter-spacing: .035em;
    text-transform: uppercase;
    color: #f5e8c5;
    text-shadow: 0 1px 0 #fff8, 0 6px 14px #0008;
}

.brand h1 span { color: #d88c26; }

.brand p {
    margin: 9px 0 0;
    color: #d6a35a;
    text-transform: uppercase;
    letter-spacing: .23em;
    font-size: .72rem;
}

.transport {
    display: flex;
    align-items: end;
    gap: 10px;
    flex-wrap: wrap;
}

.status {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-right: 4px;
    padding-bottom: 9px;
    font-size: .69rem;
    letter-spacing: .12em;
    color: #bea66d;
}

.led {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #4d3f28;
    box-shadow: inset 0 0 3px #000;
}

.led.on {
    background: #ffad2d;
    box-shadow: 0 0 9px #ff9e1f, inset 0 0 2px #fff7;
}

.panel {
    position: relative;
    border: 1px solid #474238;
    border-radius: 9px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.025), transparent 22%),
        #222320;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        inset 0 -1px 0 rgba(0,0,0,.5),
        0 6px 18px rgba(0,0,0,.28);
}

.pattern-controls {
    display: flex;
    align-items: end;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 16px;
    margin-bottom: 14px;
}

.pattern-controls .spacer { flex: 1 1 auto; }

label {
    display: grid;
    gap: 6px;
    color: #d8bf83;
    font-size: .68rem;
    letter-spacing: .11em;
    text-transform: uppercase;
}

select,
input[type="number"],
.hardware-button,
.segmented button {
    min-height: 38px;
    border: 1px solid #514b3d;
    border-radius: 5px;
    background: linear-gradient(#1c1d1b, #141513);
    color: #f0e3c1;
    padding: 7px 10px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 2px 4px #0005;
}

.hardware-button,
.segmented button {
    cursor: pointer;
}

.hardware-button:hover:not(:disabled),
.segmented button:hover {
    border-color: #766d59;
}

.hardware-button:disabled {
    opacity: .42;
    cursor: default;
}

.hardware-button.primary,
.hardware-button.toggle.active,
.segmented button.active {
    border-color: #d48a26;
    color: #ffd88b;
    box-shadow:
        inset 0 0 12px rgba(229,154,43,.12),
        0 0 8px rgba(229,154,43,.08);
}

.compact-field input { width: 68px; }

.segmented {
    display: flex;
    border: 1px solid #4a4437;
    border-radius: 6px;
    overflow: hidden;
}

.segmented button {
    border: 0;
    border-radius: 0;
    min-height: 36px;
}

.segmented button + button { border-left: 1px solid #4a4437; }

.sequencer {
    margin-bottom: 14px;
    padding: 15px;
}

.grid-shell { overflow-x: auto; }

.grid {
    display: grid;
    grid-template-columns: 62px repeat(16, minmax(42px, 1fr));
    gap: 4px;
    min-width: 910px;
    user-select: none;
    touch-action: none;
}

.grid-label,
.step-number,
.cell {
    min-height: 31px;
}

.grid-label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 7px;
    color: #dcc591;
    font: 600 .74rem/1 "Consolas", "Courier New", monospace;
}

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #817a68;
    font-size: .67rem;
}

.step-number.active-step { color: #ffca69; }

.cell {
    position: relative;
    border: 1px solid #403d35;
    border-radius: 4px;
    background:
        linear-gradient(180deg, #191a18, #151614);
    box-shadow: inset 0 1px 2px #000a;
    cursor: pointer;
}

.cell:hover { border-color: #756c59; }

.cell.on {
    border-color: #a36a24;
    background: linear-gradient(#805419, #6b4515);
}

.cell.velocity-1 {
    background: linear-gradient(#774c16, #5c3b12);
    border-color: #96611d;
}

.cell.velocity-2 {
    background: linear-gradient(#b87520, #8d5919);
    border-color: #d28c2c;
    box-shadow: inset 0 0 8px rgba(255,196,91,.14);
}

.cell.velocity-3 {
    background: linear-gradient(#f0a438, #c27a1f);
    border-color: #ffc060;
    box-shadow:
        inset 0 0 9px rgba(255,237,178,.24),
        0 0 5px rgba(235,151,38,.15);
}

.cell.playing {
    outline: 2px solid #ffe7a7;
    outline-offset: -2px;
}

.cell.merge-left {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left-color: transparent;
}

.cell.merge-right {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right-color: transparent;
}

.grid-legend {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 11px;
    color: #938a75;
    font-size: .72rem;
}

.grid-legend span {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.velocity-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}

.velocity-dot.v1 { background: #774c16; }
.velocity-dot.v2 { background: #b87520; }
.velocity-dot.v3 { background: #ef9f31; box-shadow: 0 0 6px #e99424; }

.legend-note { margin-left: auto; }

.synth-panel {
    display: grid;
    grid-template-columns: minmax(150px, .75fr) minmax(310px, 1.3fr) minmax(520px, 2.35fr) minmax(130px, .6fr);
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.module {
    padding: 16px 18px 18px;
    min-width: 0;
}

.module + .module { border-left: 1px solid #4b463a; }

.module h2 {
    margin: 0 0 13px;
    color: #e3bd69;
    font-size: .78rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.oscillator-module select { width: 100%; }

.knob-row {
    display: flex;
    justify-content: space-around;
    gap: 16px;
    flex-wrap: wrap;
}

.knob-control {
    display: grid;
    justify-items: center;
    gap: 6px;
    min-width: 78px;
}

.knob-control label {
    display: block;
    text-align: center;
}

.knob {
    --angle: 0deg;
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    cursor: ns-resize;
    background:
        radial-gradient(circle at 38% 32%, #4a4b47 0 5%, #2d2e2b 34%, #191a18 68%, #10110f 70%);
    border: 1px solid #0d0e0c;
    box-shadow:
        inset 0 0 0 2px #3a3a35,
        inset -6px -8px 12px #0009,
        0 3px 6px #000a;
    transform: rotate(var(--angle));
}

.knob:focus {
    outline: 1px solid #d89028;
    outline-offset: 4px;
}

.knob::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background:
        conic-gradient(
            from 225deg,
            transparent 0 2%,
            #9a7d42 2% 2.8%,
            transparent 2.8% 9%,
            #9a7d42 9% 9.8%,
            transparent 9.8% 16%,
            #9a7d42 16% 16.8%,
            transparent 16.8% 23%,
            #9a7d42 23% 23.8%,
            transparent 23.8% 30%,
            #9a7d42 30% 30.8%,
            transparent 30.8% 37%,
            #9a7d42 37% 37.8%,
            transparent 37.8% 44%,
            #9a7d42 44% 44.8%,
            transparent 44.8% 51%,
            #9a7d42 51% 51.8%,
            transparent 51.8% 58%,
            #9a7d42 58% 58.8%,
            transparent 58.8% 65%,
            #9a7d42 65% 65.8%,
            transparent 65.8% 72%,
            #9a7d42 72% 72.8%,
            transparent 72.8%
        );
    opacity: .55;
    z-index: -1;
}

.knob-marker {
    position: absolute;
    width: 3px;
    height: 22px;
    left: calc(50% - 1.5px);
    top: 8px;
    border-radius: 2px;
    background: #e1b45c;
    box-shadow: 0 0 3px #d99726;
}

.knob-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

.knob-control output {
    color: #9f8f69;
    font: .67rem/1.2 "Consolas", monospace;
}

.knob-control.small .knob {
    width: 58px;
    height: 58px;
}

.knob-control.small .knob-marker {
    height: 17px;
    top: 7px;
}

.adsr-display {
    height: 122px;
    margin: 2px 0 13px;
    border: 1px solid #0e0f0d;
    border-radius: 5px;
    background:
        repeating-linear-gradient(90deg, transparent 0 79px, rgba(217,163,77,.08) 80px),
        linear-gradient(#171816, #131412);
    box-shadow: inset 0 0 12px #000b;
    overflow: hidden;
}

.adsr-display svg { width: 100%; height: 100%; }

.adsr-path {
    fill: none;
    stroke: #e39a2e;
    stroke-width: 2.5;
    vector-effect: non-scaling-stroke;
}

.adsr-fill { fill: url(#envFill); }

.adsr-display circle {
    fill: #f2b85b;
    stroke: #7a4b17;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.master-module {
    display: grid;
    align-content: start;
}

footer {
    display: flex;
    justify-content: space-between;
    padding: 10px 7px 0;
    color: #696457;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .62rem;
}

@media (max-width: 1080px) {
    .synth-panel {
        grid-template-columns: 1fr 2fr;
    }

    .module:nth-child(3),
    .module:nth-child(4) {
        border-top: 1px solid #4b463a;
    }

    .module:nth-child(3) {
        border-left: 0;
    }
}

@media (max-width: 720px) {
    .instrument {
        width: min(100% - 12px, 1360px);
        margin-top: 10px;
    }

    .topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .brand h1 { font-size: 2.8rem; }

    .synth-panel { grid-template-columns: 1fr; }

    .module + .module {
        border-left: 0;
        border-top: 1px solid #4b463a;
    }

    .legend-note {
        width: 100%;
        margin-left: 0;
    }
}

.oscillator-module {
    min-width: 250px;
}

.waveform-selector {
    display: grid;
    grid-template-columns: repeat(2, minmax(96px, 1fr));
    gap: 9px;
}

.waveform-button {
    min-height: 78px;
    display: grid;
    place-items: center;
    gap: 4px;
    padding: 9px 8px 8px;
    border: 1px solid #4d473b;
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.025), transparent 20%),
        linear-gradient(#1c1d1b, #141513);
    color: #aa9872;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        inset 0 -2px 5px rgba(0,0,0,.55),
        0 2px 4px rgba(0,0,0,.45);
}

.waveform-button svg {
    width: 48px;
    height: 28px;
}

.waveform-button svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.waveform-button span {
    font-size: .68rem;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.waveform-button:hover {
    border-color: #776d58;
    color: #d6bd87;
}

.waveform-button.active {
    color: #f2ae43;
    border-color: #c97f21;
    background:
        linear-gradient(180deg, rgba(232,151,37,.10), rgba(232,151,37,.025)),
        linear-gradient(#211d17, #151513);
    box-shadow:
        inset 0 0 14px rgba(232,151,37,.08),
        0 0 8px rgba(232,151,37,.10);
}

/* Cleaner knob body and tick marks */
.knob-control {
    min-width: 86px;
}

.knob {
    width: 68px;
    height: 68px;
    border: 1px solid #090a09;
    background:
        radial-gradient(circle at 38% 31%, rgba(255,255,255,.08), transparent 18%),
        radial-gradient(circle, #30312e 0 45%, #222320 46% 62%, #111210 63% 100%);
    box-shadow:
        inset 0 0 0 2px #3d3e39,
        inset 0 0 0 5px #1a1b19,
        inset -7px -9px 14px rgba(0,0,0,.65),
        0 3px 7px rgba(0,0,0,.72);
}

.knob::before {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    background:
        repeating-conic-gradient(
            from 225deg,
            rgba(211,167,79,.70) 0deg 1.4deg,
            transparent 1.4deg 13.5deg
        );
    -webkit-mask:
        radial-gradient(circle, transparent 0 68%, #000 69% 74%, transparent 75%);
    mask:
        radial-gradient(circle, transparent 0 68%, #000 69% 74%, transparent 75%);
    opacity: .65;
    z-index: -1;
}

.knob::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.03);
    box-shadow: inset 0 1px 2px rgba(255,255,255,.03);
}

.knob-marker {
    width: 3px;
    height: 21px;
    left: calc(50% - 1.5px);
    top: 8px;
    background: #e2a640;
    box-shadow: 0 0 3px rgba(226,166,64,.45);
}

.knob-control.small .knob {
    width: 54px;
    height: 54px;
}

.knob-control.small .knob::before {
    inset: -10px;
}

.knob-control.small .knob-marker {
    height: 16px;
    top: 7px;
}

.adsr-display {
    height: 132px;
    background:
        linear-gradient(rgba(221,159,54,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(221,159,54,.05) 1px, transparent 1px),
        linear-gradient(#161714, #111210);
    background-size: 100% 32px, 72px 100%, auto;
}

.adsr-path {
    stroke-width: 2.7;
}

.adsr-display circle {
    r: 4;
}

:root{background:#c8c8c5;color:#efefea}
body{background:linear-gradient(90deg,rgba(255,255,255,.14),rgba(0,0,0,.025) 45%,rgba(255,255,255,.08)),#b9bab7}
.instrument{width:min(1380px,calc(100% - 24px));padding:10px;border:1px solid #858682;border-radius:5px;background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(0,0,0,.035)),#c4c5c2;box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 6px 22px rgba(0,0,0,.28)}
.topbar{margin-bottom:10px;padding:10px 14px 12px;border:1px solid #8a8a86;background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(0,0,0,.03)),#c3c4c1;color:#171817}
.brand h1{color:#161716;text-shadow:0 1px 0 rgba(255,255,255,.55);font-size:clamp(2.2rem,4.5vw,4.2rem)}.brand h1 span{color:#202120}.brand p{color:#4f504d}
.panel{border-color:#4f504c;border-radius:4px;background:linear-gradient(180deg,rgba(255,255,255,.018),transparent 22%),#171817;box-shadow:inset 0 1px 0 rgba(255,255,255,.025),inset 0 -1px 0 rgba(0,0,0,.8)}
.pattern-controls{border:1px solid #8f908c;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(0,0,0,.025)),#bfc0bd;color:#171817}.pattern-controls label{color:#272825}
.pattern-controls select,.pattern-controls .hardware-button,.pattern-controls .segmented button{border-color:#7b7c78;background:linear-gradient(#e1e1de,#b8b9b5);color:#171817;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 2px rgba(0,0,0,.35)}
.pattern-controls .hardware-button.primary,.pattern-controls .hardware-button.toggle.active,.pattern-controls .segmented button.active{border-color:#9b1f1b;color:#171817;box-shadow:inset 0 0 0 2px rgba(168,30,24,.16),0 1px 2px rgba(0,0,0,.35)}
.hardware-button.primary::before,.hardware-button.toggle.active::before,.segmented button.active::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#d2261f;box-shadow:0 0 5px rgba(210,38,31,.6);vertical-align:1px}
.status{color:#292a27}.led.on{background:#d7251f;box-shadow:0 0 7px rgba(215,37,31,.65)}.compact-field{color:#2d2e2b}.compact-field input{background:#151615;color:#e42a22;border-color:#555651;font-family:Consolas,monospace}
.mini-range{min-width:112px}.mini-range input[type=range]{width:112px;accent-color:#b92720}.patch-select{margin-bottom:12px}.oscillator-module h3{margin:0 0 9px;color:#bdbdb6;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase}
.grid{grid-template-columns:62px repeat(16,minmax(44px,1fr))}.grid-label{color:#dadad4}.step-number{color:#83847f}.step-number.active-step{color:#eee}.cell{border-color:#3a3b38;background:linear-gradient(#20211f,#171816)}.cell.velocity-1{background:linear-gradient(#6d4613,#4f330f);border-color:#7d5017}.cell.velocity-2{background:linear-gradient(#aa6b1d,#7b4c16);border-color:#c27a24}.cell.velocity-3{background:linear-gradient(#f0a13a,#bf741f);border-color:#ffc46a;box-shadow:inset 0 0 8px rgba(255,240,190,.20),0 0 5px rgba(239,155,45,.10)}.cell.playing{outline-color:#e4e4df}
.synth-panel{grid-template-columns:minmax(250px,1.25fr) minmax(280px,1.15fr) minmax(390px,1.6fr) minmax(120px,.55fr);border:1px solid #4f504c}.module{background:#171817}.module+.module{border-left-color:#555650}.module h2,.oscillator-module h3{color:#f0f0eb;letter-spacing:.16em}.module label{color:#c6c6bf}
.waveform-selector{gap:8px}.waveform-button{min-height:70px;border-color:#555650;background:linear-gradient(#d4d4d0,#a9aaa6);color:#242522;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 3px rgba(0,0,0,.4);position:relative}.waveform-button:hover{color:#111;border-color:#7b7c77}.waveform-button.active{color:#171817;border-color:#8d8e89;background:linear-gradient(#e0e0dc,#bdbeba);box-shadow:inset 0 0 0 2px rgba(176,32,26,.16),0 2px 3px rgba(0,0,0,.42)}.waveform-button.active::after{content:"";width:7px;height:7px;border-radius:50%;background:#d5231c;box-shadow:0 0 5px rgba(213,35,28,.7);position:absolute;top:7px;right:7px}
.knob{width:64px;height:64px;background:radial-gradient(circle at 37% 31%,rgba(255,255,255,.07),transparent 17%),radial-gradient(circle,#262724 0 58%,#111210 59% 100%);border:1px solid #050605;box-shadow:inset 0 0 0 2px #373834,inset -6px -8px 11px rgba(0,0,0,.72),0 2px 5px rgba(0,0,0,.75)}.knob::before{inset:-10px;background:repeating-conic-gradient(from 225deg,rgba(232,232,224,.78) 0deg 1deg,transparent 1deg 15deg);-webkit-mask:radial-gradient(circle,transparent 0 71%,#000 72% 75%,transparent 76%);mask:radial-gradient(circle,transparent 0 71%,#000 72% 75%,transparent 76%);opacity:.72}.knob-marker{width:2px;height:20px;background:#edede7;box-shadow:none}.knob-control.small .knob{width:52px;height:52px}.knob-control.small .knob-marker{height:16px}.knob-control output{color:#b6b6af}
.adsr-display{height:116px;border-color:#080908;background:linear-gradient(rgba(235,235,225,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(235,235,225,.035) 1px,transparent 1px),#0f100f;background-size:100% 29px,68px 100%,auto}.adsr-path{stroke:#e59128}.adsr-display circle{fill:#e59128;stroke:#4b2e0c}footer{color:#353633}@media(max-width:1180px){.synth-panel{grid-template-columns:1fr 1fr}}

.cell.velocity-1 {
    background: linear-gradient(#772d18, #572010);
    border-color: #8d371b;
}
.cell.velocity-2 {
    background: linear-gradient(#b94420, #873019);
    border-color: #d25229;
}
.cell.velocity-3 {
    background: linear-gradient(#ef552d, #c53a1d);
    border-color: #ff7144;
    box-shadow:
        inset 0 0 8px rgba(255,225,210,.18),
        0 0 5px rgba(239,85,45,.12);
}
.velocity-dot.v1 { background: #772d18; }
.velocity-dot.v2 { background: #b94420; }
.velocity-dot.v3 {
    background: #ef552d;
    box-shadow: 0 0 5px rgba(239,85,45,.4);
}
.adsr-path { stroke: #ef552d; }
.adsr-display circle {
    fill: #ef552d;
    stroke: #6d210f;
}

.generator-cluster {
    display: flex;
    align-items: end;
    gap: 10px;
    padding-left: 10px;
    border-left: 1px solid #949590;
}
.generator-style { min-width: 118px; }
.generator-button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.generator-button .button-led {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #681a14;
    box-shadow: inset 0 0 2px #000;
}
.generator-button:active .button-led {
    background: #e13a28;
    box-shadow: 0 0 5px rgba(225,58,40,.75);
}
.generator-knobs {
    display: flex;
    align-items: end;
    gap: 10px;
}
.knob-control.tiny {
    min-width: 64px;
    gap: 4px;
}
.knob-control.tiny .knob {
    width: 44px;
    height: 44px;
}
.knob-control.tiny .knob::before { inset: -7px; }
.knob-control.tiny .knob-marker {
    height: 13px;
    top: 6px;
}
.knob-control.tiny label {
    font-size: .58rem;
    margin-bottom: 2px;
}
.cell.velocity-1 {
    background: linear-gradient(#a23b20, #752916);
    border-color: #bd4827;
}
.cell.velocity-2,
.cell.velocity-3 {
    background: linear-gradient(#f05a2f, #c43b1e);
    border-color: #ff7648;
    box-shadow:
        inset 0 0 8px rgba(255,230,215,.20),
        0 0 5px rgba(240,90,47,.14);
}
.velocity-dot.v2 { background: #a23b20; }
.velocity-dot.v3 {
    background: #f05a2f;
    box-shadow: 0 0 5px rgba(240,90,47,.45);
}
@media (max-width: 1050px) {
    .generator-cluster {
        width: 100%;
        padding-left: 0;
        padding-top: 10px;
        border-left: 0;
        border-top: 1px solid #949590;
        flex-wrap: wrap;
    }
}

.hidden-select{position:absolute!important;opacity:0!important;pointer-events:none!important;width:1px!important;height:1px!important}
.music-setting,.generator-style{display:grid;gap:6px}
.setting-label{color:#272825;font-size:.68rem;letter-spacing:.11em;text-transform:uppercase}
.stepper-control{display:flex;min-height:38px}
.stepper-button,.stepper-display,.mode-button{border:1px solid #7b7c78;background:linear-gradient(#e1e1de,#b8b9b5);color:#171817;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 2px rgba(0,0,0,.28);cursor:pointer}
.stepper-button{width:30px;padding:0;font-size:1rem}
.stepper-display{min-width:46px;padding:0 9px;border-left:0;border-right:0;font:600 .79rem/1 Consolas,monospace}
.stepper-display.wide{min-width:92px}
.stepper-button:first-child{border-radius:4px 0 0 4px}.stepper-button:last-child{border-radius:0 4px 4px 0}
.mode-buttons{display:flex;gap:4px}
.mode-button{min-height:38px;min-width:58px;display:flex;justify-content:center;align-items:center;gap:6px;padding:5px 8px;border-radius:4px}
.mode-led{width:7px;height:7px;border-radius:50%;background:#67211a;box-shadow:inset 0 0 2px #000}
.mode-button.active .mode-led{background:#e3422d;box-shadow:0 0 5px rgba(227,66,45,.65)}
.transport-button{min-width:124px;min-height:48px;display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid #6f706c;border-radius:5px;background:linear-gradient(#dededa,#b9bab6);color:#171817;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 2px 4px rgba(0,0,0,.32)}
.transport-button.playing{border-color:#913329;box-shadow:inset 0 0 0 2px rgba(195,55,38,.12),0 2px 4px rgba(0,0,0,.32)}
.transport-led{width:8px;height:8px;border-radius:50%;background:#5f211b;box-shadow:inset 0 0 2px #000}
.transport-led.on{background:#e03c2a;box-shadow:0 0 6px rgba(224,60,42,.7)}
.transport-icon{width:14px;text-align:center}
.generator-button .button-led{display:none}

.v091-controls{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center}
.control-group-top,.control-group-generator,.control-group-state{display:flex;align-items:flex-end;gap:12px}
.control-group-generator{justify-content:center;padding:0 18px;border-left:1px solid #959691;border-right:1px solid #959691}
.control-group-state{flex-direction:column;align-items:flex-start;justify-content:center}
.hidden-select{position:absolute!important;opacity:0!important;pointer-events:none!important;width:1px!important;height:1px!important}
.lcd-control{display:grid;gap:6px}
.lcd-stepper{display:flex;min-height:38px}
.lcd-arrow{width:30px;border:1px solid #777873;background:linear-gradient(#d6d7d3,#adaeaa);color:#1a1b19;cursor:pointer}
.lcd-arrow:first-child{border-radius:4px 0 0 4px}.lcd-arrow:last-child{border-radius:0 4px 4px 0}
.lcd-display{min-width:54px;border:1px solid #3d3e3a;border-left:0;border-right:0;background:#111210;color:#e4422d;padding:0 10px;font:700 .86rem/1 Consolas,"Courier New",monospace;letter-spacing:.08em;cursor:pointer;text-shadow:0 0 5px rgba(228,66,45,.2);box-shadow:inset 0 0 8px rgba(0,0,0,.8)}
.lcd-display.wide{min-width:104px}.lcd-display.wider{min-width:118px}
.toggle-row{display:flex;gap:6px}
.state-button{min-height:36px;display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid #777873;border-radius:4px;background:linear-gradient(#d7d8d4,#afb0ac);color:#1a1b19;cursor:pointer}
.state-led{width:7px;height:7px;border-radius:50%;background:#652018;box-shadow:inset 0 0 2px #000}
.state-button.active .state-led{background:#e3412b;box-shadow:0 0 5px rgba(227,65,43,.68)}
@media(max-width:1200px){.v091-controls{grid-template-columns:1fr}.control-group-generator{justify-content:flex-start;padding:12px 0;border-left:0;border-right:0;border-top:1px solid #959691;border-bottom:1px solid #959691;flex-wrap:wrap}.control-group-state{flex-direction:row;align-items:center}}

.v010-controls {
    display: grid;
    grid-template-columns: auto minmax(420px, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 13px 16px;
}

.pitch-bank,
.generator-bank-compact,
.pattern-state-bank {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.generator-bank-compact {
    justify-content: center;
    padding: 0 14px;
    border-left: 1px solid #959691;
    border-right: 1px solid #959691;
}

.pattern-state-bank {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.segment-control {
    display: grid;
    gap: 5px;
}

.segment-stepper {
    display: flex;
    min-height: 38px;
}

.segment-arrow {
    width: 28px;
    border: 1px solid #777873;
    background: linear-gradient(#d6d7d3,#adaeaa);
    color: #1b1c19;
    cursor: pointer;
    padding: 0;
    font-size: .68rem;
}

.segment-arrow:first-child { border-radius: 4px 0 0 4px; }
.segment-arrow:last-child { border-radius: 0 4px 4px 0; }

.segment-display {
    min-width: 52px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1px;
    padding: 3px 6px;
    border: 1px solid #343532;
    border-left: 0;
    border-right: 0;
    background:
        linear-gradient(180deg, rgba(255,255,255,.025), transparent),
        #0d0f0d;
    cursor: pointer;
    box-shadow: inset 0 0 9px rgba(0,0,0,.9);
}

.segment-display-4 { min-width: 88px; }
.segment-display-8 { min-width: 154px; }

.segment-char {
    width: 15px;
    height: 27px;
    flex: 0 0 auto;
}

.segment {
    stroke: #351711;
    stroke-width: 2.4;
    stroke-linecap: round;
    opacity: .5;
}

.segment.lit {
    stroke: #ef4b32;
    opacity: 1;
    filter: drop-shadow(0 0 1.5px rgba(239,75,50,.75));
}

.generator-selector {
    min-width: 145px;
}

.compact-knobs {
    gap: 7px;
}

.compact-knobs .knob-control.tiny {
    min-width: 55px;
}

.compact-knobs .knob-control.tiny .knob {
    width: 40px;
    height: 40px;
}

.compact-knobs .knob-control.tiny label {
    font-size: .55rem;
}

.compact-actions {
    display: flex;
    gap: 6px;
    align-items: flex-end;
}

.compact-actions .hardware-button {
    padding-left: 9px;
    padding-right: 9px;
}

.pattern-state-actions {
    display: flex;
    gap: 6px;
}

@media (max-width: 1200px) {
    .v010-controls {
        grid-template-columns: 1fr;
    }

    .generator-bank-compact {
        justify-content: flex-start;
        padding: 11px 0;
        border-left: 0;
        border-right: 0;
        border-top: 1px solid #959691;
        border-bottom: 1px solid #959691;
        flex-wrap: wrap;
    }

    .pattern-state-bank {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }
}

/* Give the arrow switches physical separation from the display */
.segment-stepper {
    gap: 6px;
    align-items: center;
}

.segment-arrow {
    width: 32px;
    height: 34px;
    flex: 0 0 32px;
    border: 1px solid #686964;
    border-radius: 4px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,255,255,.08) 45%, rgba(0,0,0,.09)),
        #c2c3bf;
    color: #181917;
    padding: 0;
    font-size: .72rem;
    line-height: 1;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        inset 0 -1px 0 rgba(0,0,0,.16),
        0 2px 2px rgba(0,0,0,.30);
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

.segment-arrow:first-child,
.segment-arrow:last-child {
    border-radius: 4px;
}

.segment-arrow:hover {
    background:
        linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.12) 45%, rgba(0,0,0,.07)),
        #cdceca;
}

.segment-arrow:active {
    transform: translateY(1px);
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,.22),
        0 1px 1px rgba(0,0,0,.24);
}

/* Displays become their own recessed modules instead of part of one joined widget */
.segment-display {
    border: 1px solid #30312e;
    border-radius: 3px;
    box-shadow:
        inset 0 0 0 2px #171815,
        inset 0 0 10px rgba(0,0,0,.9),
        0 1px 0 rgba(255,255,255,.14);
}

/* Generic hardware pushbutton */
.hardware-button,
.state-button,
.transport-button {
    position: relative;
    border: 1px solid #666762;
    border-radius: 4px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,255,255,.06) 44%, rgba(0,0,0,.08)),
        #bfc0bc;
    color: #151614;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        inset 0 -1px 0 rgba(0,0,0,.13),
        0 2px 3px rgba(0,0,0,.30);
    text-shadow: 0 1px 0 rgba(255,255,255,.55);
}

.hardware-button::after,
.state-button::after,
.transport-button::after {
    content: "";
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 2px;
    pointer-events: none;
}

.hardware-button:hover,
.state-button:hover,
.transport-button:hover {
    background:
        linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.10) 44%, rgba(0,0,0,.06)),
        #c8c9c5;
}

.hardware-button:active,
.state-button:active,
.transport-button:active {
    transform: translateY(1px);
    box-shadow:
        inset 0 1px 3px rgba(0,0,0,.24),
        0 1px 1px rgba(0,0,0,.22);
}

/* Latching switches: LED carries state rather than whole button becoming "web active" */
.state-button {
    min-height: 38px;
    padding: 7px 11px;
}

.state-button.active {
    border-color: #70534b;
    background:
        linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.05) 44%, rgba(0,0,0,.09)),
        #b9bab6;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.82),
        0 2px 3px rgba(0,0,0,.28);
}

.state-led {
    width: 8px;
    height: 8px;
    border: 1px solid #3d120e;
    background: #4e1712;
    box-shadow:
        inset 0 0 2px rgba(0,0,0,.85);
}

.state-button.active .state-led {
    background: #e0442f;
    border-color: #742017;
    box-shadow:
        0 0 5px rgba(224,68,47,.72),
        inset 0 0 1px rgba(255,255,255,.55);
}

/* Transport gets a stronger physical face */
.transport-button {
    min-width: 132px;
    min-height: 50px;
    padding: 8px 16px;
}

.transport-button.playing {
    border-color: #71443c;
    background:
        linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.05) 44%, rgba(0,0,0,.10)),
        #b8b9b5;
}

.transport-led {
    width: 9px;
    height: 9px;
    border: 1px solid #3b110d;
    background: #4b1611;
}

.transport-led.on {
    background: #e1422d;
    box-shadow: 0 0 6px rgba(225,66,45,.72);
}

/* Give momentary actions a compact "console button" feel */
.compact-actions .hardware-button,
.pattern-state-actions .hardware-button {
    min-height: 38px;
    padding: 7px 12px;
}

/* Make the segmented character strokes slightly cleaner */
.segment {
    stroke-width: 2.2;
}

.segment.lit {
    stroke-width: 2.5;
    filter:
        drop-shadow(0 0 1px rgba(239,75,50,.75))
        drop-shadow(0 0 2px rgba(239,75,50,.20));
}

.master-module {
    min-width: 250px;
}

.output-knobs {
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    gap: 12px;
    flex-wrap: nowrap;
}

.output-knobs .knob-control {
    min-width: 68px;
}

.output-knobs .knob {
    width: 56px;
    height: 56px;
}

.output-knobs .knob-marker {
    height: 17px;
    top: 7px;
}

.output-knobs label {
    font-size: .60rem;
}

.output-knobs output {
    font-size: .62rem;
}

:root{--bg:#07090c;--panel:#0b1015;--line:#17303b;--text:#d7f4ff;--muted:#6f8b96;--cyan:#38d7ff;--orange:#ff5a32}
body{background:radial-gradient(circle at 50% -10%,rgba(21,78,96,.22),transparent 45%),linear-gradient(#06080b,#090b0f);color:var(--text)}
.instrument{background:transparent;border:0;box-shadow:none;padding:0}
.topbar{background:transparent;border:0;color:var(--text)}
.brand h1{color:#effbff;text-shadow:0 0 18px rgba(56,215,255,.12)}.brand h1 span{color:var(--cyan)}.brand p{color:var(--muted)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:7px}
.neon-controls{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;padding:14px 16px}
.selector-bank,.generator-neon,.display-neon{display:flex;align-items:flex-end;gap:10px}.generator-neon{justify-content:center;padding:0 18px;border-left:1px solid var(--line);border-right:1px solid var(--line)}.display-neon{flex-direction:column}
.neon-selector{display:grid;gap:5px}.selector-label,.arc-label{color:var(--muted);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase}.selector-line{display:flex;gap:7px;align-items:center}
.selector-arrow,.neon-button,.neon-toggle{border:1px solid var(--line);background:#0a0f14;color:var(--text);border-radius:5px;cursor:pointer}.selector-arrow{width:30px;height:34px;color:var(--cyan);font-size:1.15rem}.selector-display{min-width:52px;height:34px;border:1px solid #18404f;background:#071017;color:var(--cyan);border-radius:4px;padding:0 12px;font:600 .80rem/1 "Segoe UI",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}.selector-wide{min-width:104px}.selector-medium{min-width:72px}
.neon-button,.neon-toggle{min-height:36px;padding:6px 10px;text-transform:uppercase;letter-spacing:.08em;font-size:.68rem}.neon-toggle.active{border-color:#2d7185;color:var(--cyan);box-shadow:inset 0 0 12px rgba(56,215,255,.08),0 0 8px rgba(56,215,255,.07)}
.arc-control{min-width:88px;display:grid;justify-items:center;gap:3px}.arc-control.compact{min-width:64px}.arc-widget{width:82px;height:62px;cursor:ns-resize;touch-action:none}.arc-control.compact .arc-widget{width:62px;height:48px}.arc-svg{width:100%;height:100%;overflow:visible}.arc-base,.arc-fill{fill:none;stroke-linecap:round}.arc-base{stroke:#17303b;stroke-width:5}.arc-fill{stroke:var(--cyan);stroke-width:5;filter:drop-shadow(0 0 4px rgba(56,215,255,.35))}.arc-marker{fill:#dff9ff;stroke:var(--cyan);stroke-width:2;filter:drop-shadow(0 0 4px rgba(56,215,255,.65))}.arc-input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}.arc-control output{color:var(--muted);font:.64rem/1.2 Consolas,monospace}
.sequencer{background:#080d12;border-color:#17303b}.grid-label{color:#8eb3bf}.step-number{color:#3e6673}.step-number.active-step{color:var(--cyan);text-shadow:0 0 6px rgba(56,215,255,.42)}.cell{border-color:#18303a;background:#091016}.cell.velocity-1{background:radial-gradient(circle,rgba(255,90,50,.16),transparent 62%),#141012;border-color:#663022}.cell.velocity-2,.cell.velocity-3{background:radial-gradient(circle,rgba(255,125,88,.34),transparent 62%),#22100d;border-color:#b14a2e;box-shadow:0 0 8px rgba(255,90,50,.14)}.cell.playing{outline:2px solid var(--cyan);box-shadow:0 0 10px rgba(56,215,255,.10)}
.module{background:transparent}.module+.module{border-left-color:var(--line)}.module h2,.oscillator-module h3{color:#d8f6ff}.module label{color:var(--muted)}
.waveform-button{background:#091016;color:#6f98a6;border-color:#18313b}.waveform-button.active{color:var(--cyan);border-color:#286074;background:#0a141b}.waveform-button.active::after{background:var(--cyan);box-shadow:0 0 6px rgba(56,215,255,.55)}
.adsr-display{background:linear-gradient(rgba(56,215,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(56,215,255,.035) 1px,transparent 1px),#071016;border-color:#17303b}.adsr-path{stroke:var(--cyan)}.adsr-display circle{fill:#dff9ff;stroke:var(--cyan)}
.master-module{min-width:150px}.output-knobs{display:grid;grid-template-columns:1fr;justify-items:center;gap:8px}
.transport-button{background:#091016;border-color:#1c4050;color:var(--cyan)}.transport-button.playing{border-color:#2b758d}.transport-led,.transport-led.on{background:var(--cyan);border-color:#134252;box-shadow:0 0 7px rgba(56,215,255,.62)}.compact-field{color:var(--muted)}.compact-field input{color:var(--cyan);border-color:#17303b;background:#071016}
.grid-legend .legend-note::after{content:"  Shift-click toggles Accent.";color:#557682}
@media(max-width:1180px){.neon-controls{grid-template-columns:1fr}.generator-neon{justify-content:flex-start;padding:11px 0;border-left:0;border-right:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);flex-wrap:wrap}.display-neon{flex-direction:row;flex-wrap:wrap}}

.future-controls {
    min-height: 150px;
    display: grid;
    grid-template-columns: minmax(420px, 1.15fr) minmax(280px, .8fr) minmax(330px, .9fr);
    align-items: center;
    gap: 28px;
    padding: 22px 26px;
    overflow: hidden;
}

.music-context,
.generator-context {
    min-width: 0;
}

.context-kicker {
    margin-bottom: 10px;
    color: #456d7b;
    font-size: .58rem;
    letter-spacing: .22em;
}

.key-composite {
    display: grid;
    grid-template-columns: 24px 52px 24px 1px 24px 190px 24px;
    align-items: center;
    gap: 8px;
    width: 371px;
}

.context-divider {
    height: 31px;
    background: #18323d;
}

.context-value,
.generator-value,
.octave-value,
.ghost-chevron,
.micro-chevron {
    border: 0;
    background: transparent;
    font-family: "Segoe UI", Arial, sans-serif;
}

.context-value {
    height: 42px;
    padding: 0;
    color: #dff9ff;
    text-align: center;
    cursor: pointer;
    text-transform: uppercase;
    text-shadow: 0 0 9px rgba(56,215,255,.16);
}

.root-value {
    width: 52px;
    color: var(--cyan);
    font-size: 1.30rem;
    font-weight: 650;
}

.scale-value {
    width: 190px;
    font-size: 1.28rem;
    font-weight: 450;
    letter-spacing: .09em;
}

.ghost-chevron {
    width: 24px;
    height: 32px;
    padding: 0;
    color: #376776;
    font-size: 1.25rem;
    cursor: pointer;
    transition: color .12s, text-shadow .12s;
}

.ghost-chevron:hover {
    color: var(--cyan);
    text-shadow: 0 0 6px rgba(56,215,255,.35);
}

.octave-inline {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    margin-left: 32px;
    color: #456d7b;
    font-size: .58rem;
    letter-spacing: .16em;
}

.micro-chevron {
    width: 20px;
    height: 20px;
    padding: 0;
    color: #527987;
    cursor: pointer;
}

.octave-value {
    width: 24px;
    color: var(--cyan);
    cursor: pointer;
}

.generator-context {
    display: grid;
    justify-items: center;
    border-left: 1px solid #142a33;
    border-right: 1px solid #142a33;
    padding: 0 26px;
}

.generator-selector {
    display: grid;
    grid-template-columns: 24px 150px 24px;
    align-items: center;
    gap: 8px;
}

.generator-value {
    width: 150px;
    height: 42px;
    padding: 0;
    color: var(--cyan);
    font-size: 1.04rem;
    font-weight: 550;
    letter-spacing: .12em;
    cursor: pointer;
    text-shadow: 0 0 8px rgba(56,215,255,.18);
}

.generator-actions {
    display: flex;
    gap: 9px;
    margin-top: 10px;
}

.future-action {
    height: 30px;
    padding: 0 14px;
    border: 1px solid #193844;
    border-radius: 3px;
    background: transparent;
    color: #688b98;
    font-size: .59rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    cursor: pointer;
}

.future-action:hover {
    color: #c9f4ff;
    border-color: #286274;
}

.future-action.primary {
    color: var(--cyan);
    border-color: #245768;
    box-shadow: inset 0 0 10px rgba(56,215,255,.025);
}

.motion-bank {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    justify-content: center;
    gap: 8px;
}

.motion-bank .arc-control.compact {
    width: 100px;
    min-width: 100px;
}

.motion-bank .arc-widget {
    width: 100px;
    height: 68px;
}

/* Proper open luminous gauge: dim full arc + bright completed arc */
.arc-base {
    stroke: #163540;
    stroke-width: 4;
    opacity: .82;
}

.arc-fill {
    stroke: var(--cyan);
    stroke-width: 4;
    filter:
        drop-shadow(0 0 2px rgba(56,215,255,.65))
        drop-shadow(0 0 7px rgba(56,215,255,.22));
}

.arc-marker {
    r: 4px;
    fill: #e8fcff;
    stroke: var(--cyan);
    stroke-width: 1.5;
    filter:
        drop-shadow(0 0 3px rgba(56,215,255,.9))
        drop-shadow(0 0 7px rgba(56,215,255,.35));
}

/* Grid toolbar belongs to the grid, not the generator */
.grid-toolbar {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 7px 12px;
    border-bottom: 1px solid #122b35;
    margin-bottom: 14px;
}

.grid-title {
    display: flex;
    align-items: baseline;
    gap: 13px;
}

.grid-title-main {
    color: #8bb3c0;
    font-size: .64rem;
    letter-spacing: .24em;
}

.grid-title-hint {
    color: #345866;
    font-size: .57rem;
    letter-spacing: .06em;
}

.grid-tools {
    display: flex;
    align-items: center;
    gap: 6px;
}

.grid-tool {
    height: 28px;
    padding: 0 10px;
    border: 1px solid #173440;
    border-radius: 3px;
    background: transparent;
    color: #4d7482;
    font-size: .57rem;
    letter-spacing: .10em;
    text-transform: uppercase;
    cursor: pointer;
}

.grid-tool:hover {
    color: #a7dce9;
    border-color: #245565;
}

.grid-tool.active {
    color: var(--cyan);
    border-color: #286477;
    box-shadow:
        inset 0 0 8px rgba(56,215,255,.05),
        0 0 5px rgba(56,215,255,.035);
}

.grid-tool.clear-tool {
    margin-left: 8px;
    color: #506c76;
    border-color: transparent;
}

.grid-tool.accent-tool.active {
    color: #e8fcff;
    background: rgba(56,215,255,.07);
}

/* Grid becomes more like an instrument than a spreadsheet */
.grid {
    column-gap: 5px;
    row-gap: 5px;
}

.cell {
    border-radius: 1px !important;
    aspect-ratio: 1.35 / 1;
    min-height: 0;
    border: 1px solid #16313b;
    background: #081016;
    box-shadow: inset 0 0 7px rgba(0,0,0,.55);
}

.cell:hover {
    border-color: #286276;
    background: #09141b;
}

/* Notes are now the strongest information in the grid */
.cell.velocity-1 {
    border-color: #27a7c7;
    background:
        radial-gradient(circle at 50% 50%, rgba(56,215,255,.19), rgba(56,215,255,.055) 55%, transparent 76%),
        #09161c;
    box-shadow:
        inset 0 0 10px rgba(56,215,255,.10),
        0 0 5px rgba(56,215,255,.10);
}

.cell.velocity-2,
.cell.velocity-3 {
    border-color: #72e9ff;
    background:
        radial-gradient(circle at 50% 50%, rgba(214,249,255,.34), rgba(56,215,255,.18) 42%, rgba(56,215,255,.07) 70%),
        #0b1920;
    box-shadow:
        inset 0 0 12px rgba(56,215,255,.18),
        0 0 7px rgba(56,215,255,.20);
}

/* Playhead: subtle column wash instead of hard cell outlines */
.cell.playing {
    outline: none !important;
    border-color: #1b4655;
    box-shadow:
        inset 3px 0 0 rgba(56,215,255,.20),
        inset 0 0 9px rgba(56,215,255,.025);
}

.cell.velocity-1.playing {
    border-color: #35bddc;
    box-shadow:
        inset 3px 0 0 rgba(222,250,255,.28),
        inset 0 0 11px rgba(56,215,255,.13),
        0 0 5px rgba(56,215,255,.10);
}

.cell.velocity-2.playing,
.cell.velocity-3.playing {
    border-color: #82efff;
    box-shadow:
        inset 3px 0 0 rgba(255,255,255,.38),
        inset 0 0 13px rgba(56,215,255,.20),
        0 0 7px rgba(56,215,255,.18);
}

.step-number.active-step {
    color: #83eaff;
    text-shadow: 0 0 5px rgba(56,215,255,.30);
}

/* Remove obsolete velocity colour language */
.velocity-dot.v2,
.velocity-dot.v3 {
    background: var(--cyan);
}

.grid-legend {
    color: #496c78;
}

.grid-legend .legend-note::after {
    content: "";
}

/* Lower panel: same sparse language, less conventional synth chrome */
.synth-panel {
    border-color: #15303a;
}

.waveform-button {
    border-radius: 2px;
}

.master-module {
    min-width: 142px;
}

.output-knobs {
    grid-template-columns: 1fr !important;
    gap: 3px;
}

.output-knobs .arc-widget {
    width: 74px;
    height: 52px;
}

@media (max-width: 1250px) {
    .future-controls {
        grid-template-columns: 1fr 1fr;
    }
    .motion-bank {
        grid-column: 1 / -1;
        justify-content: start;
        padding-top: 14px;
        border-top: 1px solid #142a33;
    }
}

.instrument { width: min(1440px, calc(100% - 20px)); }

.topbar {
    min-height: 76px;
    padding: 4px 8px 10px;
    align-items: center;
}

.brand h1 {
    font-size: clamp(2.35rem, 4.2vw, 3.8rem);
    line-height: .92;
    margin: 0;
}

.brand p {
    margin-top: 5px;
    font-size: .60rem;
    letter-spacing: .20em;
}

.transport {
    gap: 10px;
    align-items: center;
    padding-top: 1px;
    margin-right: 2px;
}

.transport-button {
    min-width: 114px;
    min-height: 40px;
    height: 40px;
    padding: 6px 12px;
}

.topbar .transport .transport-button,
.topbar .transport .transport-button:hover,
.topbar .transport .transport-button:focus,
.topbar .transport .transport-button:active,
.topbar .transport .transport-button.playing,
.topbar .transport .transport-button.playing:hover {
    background: #091016 !important;
    border: 1px solid #1d4655 !important;
    color: var(--cyan) !important;
    box-shadow: inset 0 0 13px rgba(56,215,255,.035), 0 0 7px rgba(56,215,255,.035) !important;
    text-shadow: none !important;
    transform: none !important;
}

.topbar .transport .transport-button:hover,
.topbar .transport .transport-button.playing {
    border-color: #2c6f84 !important;
    box-shadow: inset 0 0 14px rgba(56,215,255,.075), 0 0 9px rgba(56,215,255,.07) !important;
}

.topbar .transport .transport-button::after { display: none !important; }

.compact-field { gap: 4px; font-size: .56rem; }
.compact-field input { width: 58px; height: 36px; padding: 0 7px; }

.future-controls {
    min-height: 126px;
    padding: 14px 18px;
    gap: 20px;
    grid-template-columns: minmax(365px, 1.1fr) minmax(240px, .72fr) minmax(280px, .78fr);
}

.context-kicker { margin-bottom: 6px; }

.key-composite {
    grid-template-columns: 22px 46px 22px 1px 22px 172px 22px;
    gap: 6px;
    width: 319px;
}

.root-value { width: 46px; font-size: 1.12rem; }
.scale-value { width: 172px; font-size: 1.08rem; }
.ghost-chevron { width: 22px; height: 28px; }

.octave-inline { margin-top: 4px; margin-left: 28px; }

.generator-context { padding: 0 18px; }

.generator-selector {
    grid-template-columns: 22px 142px 22px;
    gap: 6px;
}

.generator-value { width: 142px; height: 36px; font-size: .94rem; }
.generator-actions { margin-top: 6px; }
.future-action { height: 27px; }

.motion-bank {
    grid-template-columns: repeat(3, 88px);
    gap: 4px;
}

.motion-bank .arc-control.compact {
    width: 88px;
    min-width: 88px;
}

.motion-bank .arc-widget {
    width: 88px;
    height: 56px;
}

.sequencer {
    padding-top: 12px;
    padding-bottom: 12px;
}

.grid-toolbar {
    min-height: 34px;
    padding: 0 4px 8px;
    margin-bottom: 8px;
}

.grid-title-main { font-size: .60rem; }
.grid-title-hint { font-size: .54rem; }

.grid-tool {
    height: 25px;
    padding: 0 8px;
    font-size: .53rem;
}

.grid {
    column-gap: 4px;
    row-gap: 3px;
    grid-template-columns: 58px repeat(16, minmax(0, 1fr));
}

.step-number {
    height: 16px;
    line-height: 16px;
    font-size: .56rem;
}

.grid-label { font-size: .61rem; }

.cell {
    aspect-ratio: auto !important;
    height: 29px;
    min-height: 29px;
    max-height: 29px;
}

.cell.velocity-1 {
    border-color: #3bdcff;
    background: linear-gradient(180deg, rgba(56,215,255,.18), rgba(56,215,255,.08)), #0a171d;
    box-shadow: inset 0 0 10px rgba(56,215,255,.14), 0 0 6px rgba(56,215,255,.12);
}

.cell.velocity-2,
.cell.velocity-3 {
    border-color: #b5f6ff;
    background: radial-gradient(circle at 50% 50%, rgba(232,252,255,.48) 0 13%, rgba(56,215,255,.31) 30%, rgba(56,215,255,.13) 62%, rgba(56,215,255,.06) 100%), #0b1920;
    box-shadow: inset 0 0 12px rgba(56,215,255,.24), 0 0 9px rgba(56,215,255,.25);
}

.cell.playing {
    outline: none !important;
    border-color: #1c3f4a !important;
    box-shadow: inset 2px 0 0 rgba(56,215,255,.10), inset 0 0 5px rgba(56,215,255,.018) !important;
}

.cell.velocity-1.playing {
    border-color: #48dfff !important;
    box-shadow: inset 2px 0 0 rgba(232,252,255,.18), inset 0 0 10px rgba(56,215,255,.15), 0 0 6px rgba(56,215,255,.12) !important;
}

.cell.velocity-2.playing,
.cell.velocity-3.playing {
    border-color: #b5f6ff !important;
    box-shadow: inset 2px 0 0 rgba(255,255,255,.20), inset 0 0 12px rgba(56,215,255,.24), 0 0 8px rgba(56,215,255,.22) !important;
}

.grid-legend { display: none !important; }

.synth-panel { margin-top: 12px; }
.module { padding-top: 12px; padding-bottom: 12px; }
.module h2 { margin-bottom: 8px; }
.waveform-selector { gap: 5px; }

.waveform-button,
.waveform-button:hover,
.waveform-button:focus,
.waveform-button:active {
    background: #091016 !important;
    color: #789aa6 !important;
    border-color: #18313b !important;
    box-shadow: inset 0 0 9px rgba(0,0,0,.42) !important;
    text-shadow: none !important;
    transform: none !important;
}

.waveform-button:hover {
    color: #bdefff !important;
    border-color: #28596a !important;
}

.waveform-button.active,
.waveform-button.active:hover {
    color: var(--cyan) !important;
    border-color: #286074 !important;
    background: #0a141b !important;
    box-shadow: inset 0 0 12px rgba(56,215,255,.065), 0 0 7px rgba(56,215,255,.055) !important;
}

.waveform-button::after { display: none !important; }

.patch-select select,
.patch-select select:hover,
.patch-select select:focus,
.module select,
.module select:hover,
.module select:focus {
    background: #071016 !important;
    color: #9bdff0 !important;
    border: 1px solid #193843 !important;
    box-shadow: inset 0 0 8px rgba(0,0,0,.5) !important;
    outline: none !important;
}

.patch-select select option,
.module select option {
    background: #071016 !important;
    color: #bfefff !important;
}

.adsr-fill { fill: rgba(56,215,255,.035) !important; }

.adsr-display {
    box-shadow: inset 0 0 16px rgba(0,0,0,.42) !important;
}

.adsr-path { stroke: var(--cyan) !important; }

.adsr-display circle {
    fill: #e6fbff !important;
    stroke: var(--cyan) !important;
}

.arc-control { min-width: 76px; }
.arc-widget { width: 74px; height: 52px; }
.arc-control.compact { min-width: 60px; }
.arc-control.compact .arc-widget { width: 64px; height: 46px; }

.master-module {
    min-width: 118px !important;
    max-width: 128px;
}

.output-knobs { gap: 0 !important; }
.output-knobs .arc-control { min-width: 66px; }
.output-knobs .arc-widget { width: 62px !important; height: 43px !important; }

@media (max-width: 1180px) {
    .future-controls { grid-template-columns: 1fr 1fr; }

    .motion-bank {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, 80px);
        padding-top: 8px;
    }
}

@media (max-height: 850px) and (min-width: 1000px) {
    .topbar { min-height: 64px; }
    .brand h1 { font-size: 2.65rem; }

    .future-controls {
        min-height: 112px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .cell {
        height: 25px;
        min-height: 25px;
        max-height: 25px;
    }

    .grid-toolbar { margin-bottom: 6px; }
}

.transport-strip{display:grid;grid-template-columns:auto auto auto;gap:8px;padding:5px;border:1px solid #153642;border-radius:5px;background:#081016}.tempo-control{display:flex;align-items:stretch;border-left:1px solid #153642;padding-left:8px}.tempo-value{display:grid;place-items:center;min-width:58px}.tempo-value input{width:46px;border:0!important;background:transparent!important;text-align:center;color:var(--cyan);font:600 .72rem monospace;-moz-appearance:textfield}.tempo-value input::-webkit-inner-spin-button{display:none}.tempo-value b{font-size:.46rem;letter-spacing:.14em;color:#4d7482}.tempo-nudge{display:grid}.tempo-nudge button,.help-button{border:0;background:transparent;color:#477786;cursor:pointer}.tempo-nudge button:hover,.help-button:hover{color:var(--cyan)}.help-button{width:30px;font-size:1rem;border-left:1px solid #153642}.motion-section{display:grid;justify-items:center}.motion-title{margin-bottom:0}.future-controls{grid-template-columns:minmax(330px,1fr) minmax(230px,.72fr) minmax(300px,.9fr)}.generator-context{border-left:0}.motion-section{border-left:1px solid #142a33;padding-left:20px}
.sequence-layout{display:grid;grid-template-columns:auto 118px;gap:16px;align-items:start}.grid-shell{width:max-content;max-width:100%;overflow:auto}.grid{grid-template-columns:42px repeat(16,36px)!important;column-gap:3px!important;row-gap:3px!important}.cell{width:36px!important;height:36px!important;min-height:36px!important;max-height:36px!important}.sequence-tools{display:grid;gap:6px;padding:4px 0}.sequence-tools .grid-tool{width:100%;height:30px}.tool-gap{margin-top:12px}.grid-toolbar{border-bottom:0;margin-bottom:5px}.grid-title-hint{display:none}
.simplified-synth{display:grid;grid-template-columns:minmax(210px,.8fr) minmax(170px,.6fr) minmax(360px,1.35fr) minmax(280px,1fr) 110px}.simplified-synth .module{min-width:0}.compact-waves{grid-template-columns:repeat(4,1fr)}.compact-waves .waveform-button{height:34px}.tone-module .knob-row{justify-content:center}.fx-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.fx-block{display:grid;justify-items:center;gap:4px}.fx-name{font-size:.65rem;letter-spacing:.14em;color:#9bdff0;text-transform:uppercase}.fx-block label{display:grid;gap:3px;width:82px;font-size:.52rem}.fx-block select{width:82px;height:26px;font-size:.58rem}.master-module{display:grid;align-content:start;justify-items:center}.adsr-display{height:82px}.envelope-knobs{margin-top:4px}
.help-overlay[hidden]{display:none}.help-overlay{position:fixed;inset:0;z-index:100;background:rgba(2,6,9,.82);display:grid;place-items:center;padding:20px}.help-card{position:relative;width:min(760px,94vw);background:#081117;border:1px solid #235061;box-shadow:0 0 35px rgba(56,215,255,.12);padding:26px}.help-card h2{margin:0 0 20px;color:var(--cyan);letter-spacing:.1em}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.help-grid h3{color:#aeeeff;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}.help-grid p{color:#7698a4;font-size:.78rem;line-height:1.55}.help-close{position:absolute;right:12px;top:10px;border:0;background:transparent;color:#6e9aa8;font-size:1.5rem;cursor:pointer}
@media(max-width:1100px){.sequence-layout{grid-template-columns:1fr}.sequence-tools{grid-template-columns:repeat(5,1fr)}.tool-gap{display:none}.grid-shell{max-width:100%}.simplified-synth{grid-template-columns:1fr 1fr}.future-controls{grid-template-columns:1fr}.motion-section{border-left:0;border-top:1px solid #142a33;padding:10px 0 0}}

.help-overlay.is-hidden,.help-overlay[hidden]{display:none!important}
.help-button{width:28px;height:28px;border:1px solid #173742!important;border-radius:50%;padding:0;color:#5c8795!important}
.help-button:hover{color:var(--cyan)!important;border-color:#286176!important}

/* transport: + above - and one coherent block */
.transport-strip{display:flex!important;align-items:center!important;gap:8px!important;padding:4px 5px!important}
.tempo-control{display:flex!important;align-items:center!important;padding-left:8px!important}
.tempo-nudge{display:grid!important;grid-template-rows:1fr 1fr!important;gap:0!important}
.tempo-nudge button{width:24px;height:18px;line-height:16px;padding:0}

/* top panel: one divider between logical groups, consistent heading baseline */
.future-controls{align-items:center!important;grid-template-columns:minmax(340px,1.05fr) minmax(240px,.72fr) minmax(300px,.9fr)!important}
.music-context,.generator-context,.motion-section{min-height:92px;display:grid;align-content:center}
.generator-context{border-left:1px solid #142a33!important;border-right:0!important;padding-left:26px!important}
.motion-section{border-left:1px solid #142a33!important;padding-left:26px!important}
.context-kicker,.motion-title{height:16px;line-height:16px;margin:0 0 8px!important;text-align:left!important;align-self:start}
.motion-section{justify-items:stretch!important}
.motion-bank{border:0!important;padding:0!important;align-self:center}

/* true grid + right tools desktop layout */
.sequence-layout{display:grid!important;grid-template-columns:max-content 132px!important;gap:20px!important;align-items:start!important}
.grid-shell{width:max-content!important;overflow:visible!important}
.sequence-tools{display:grid!important;align-content:start!important;gap:7px!important;padding:20px 0 0!important}
.sequence-tools .grid-tool{width:118px!important;height:29px!important}
.grid{grid-template-columns:42px repeat(16,36px)!important;column-gap:3px!important;row-gap:3px!important}
.cell{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;max-width:36px!important;max-height:36px!important}

/* lower panel: Sound | Tone over FX | Shape | Output */
.simplified-synth{display:grid!important;grid-template-columns:minmax(250px,.95fr) minmax(285px,1.05fr) minmax(390px,1.45fr) minmax(105px,.45fr)!important;grid-template-rows:auto auto;grid-template-areas:"sound tone shape output" "sound fx shape output";align-items:stretch!important}
.sound-module{grid-area:sound}.tone-module{grid-area:tone}.fx-module{grid-area:fx;border-left:1px solid #15303a!important;border-top:1px solid #15303a!important}.envelope-module{grid-area:shape}.master-module{grid-area:output}
.simplified-synth .module{min-width:0!important}
.fx-row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important}
.master-module{display:grid!important;align-content:start!important;justify-items:center!important}

/* restore waveform graphics */
.compact-waves{grid-template-columns:repeat(4,1fr)!important;gap:5px!important}
.compact-waves .waveform-button{height:66px!important;display:grid!important;place-items:center!important;align-content:center!important;gap:5px!important}
.wave-icon{display:block;width:34px;height:20px}.wave-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.wave-label{display:block!important;opacity:1!important;visibility:visible!important}

@media(max-width:1100px){.sequence-layout{grid-template-columns:1fr!important}.grid-shell{overflow-x:auto!important;max-width:100%!important}.sequence-tools{grid-template-columns:repeat(5,1fr)!important;padding-top:0!important}.sequence-tools .grid-tool{width:auto!important}.simplified-synth{grid-template-columns:1fr 1fr!important;grid-template-areas:"sound tone" "shape shape" "fx output"}.future-controls{grid-template-columns:1fr!important}.generator-context,.motion-section{border-left:0!important;border-top:1px solid #142a33!important;padding:10px 0 0!important}}

.root-value,
#rootDisplay {
    text-transform: none !important;
}

.scale-value,
#scaleDisplay,
.generator-value,
#generatorDisplay {
    text-transform: uppercase;
}

.future-controls { display:none !important; }

.sequencer-workspace { padding: 18px; }
.sequence-layout-v17 {
  display:grid;
  grid-template-columns:max-content minmax(270px, 1fr);
  gap:34px;
  align-items:start;
}
.sequence-console {
  width:min(100%, 360px);
  display:flex;
  flex-direction:column;
  gap:0;
  align-self:stretch;
}
.console-group {
  padding:18px 4px;
  border-bottom:1px solid #132d37;
}
.console-group:last-child { border-bottom:0; }
.sequence-console .context-kicker { margin-bottom:10px !important; }
.sequence-console .key-composite {
  width:100%;
  grid-template-columns:22px 42px 22px 1px 22px minmax(130px, 170px) 22px;
}
.sequence-console .octave-inline {
  margin:7px 0 0 28px;
  text-transform:none;
  letter-spacing:.10em;
}
.sequence-console .generator-console { align-items:flex-start; }
.sequence-console .generator-selector {
  grid-template-columns:22px 150px 22px;
}
.sequence-console .generator-actions { margin-left:30px; }
.console-arcs {
  display:grid;
  grid-template-columns:repeat(3, 82px);
  gap:7px;
}
.console-arcs .arc-control { min-width:82px; }
.console-arcs .arc-widget { width:76px; height:52px; }
.sequence-tools { display:block !important; padding-top:18px !important; }
.tool-pair { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-bottom:7px; }
.sequence-tools .grid-tool { width:100%; }
.sequence-tools .clear-tool { margin:3px 0 0; width:auto; padding:0 12px; }

.synth-v17 {
  display:grid !important;
  grid-template-columns:minmax(330px, .95fr) minmax(420px, 1.35fr) minmax(300px, .8fr) !important;
  align-items:stretch;
}
.synth-v17 > .module { min-width:0; padding:16px 18px; }
.synth-v17 .sound-module,
.synth-v17 .envelope-module { border-right:1px solid #15303a; }
.synth-v17 h2 { margin:0 0 10px; }
.synth-v17 h3 {
  margin:0 0 7px;
  color:#dff9ff;
  font-size:.70rem;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.sound-divider { height:1px; background:#15303a; margin:14px 0 12px; }
.tone-grid {
  display:grid;
  grid-template-columns:78px 78px 78px minmax(82px,1fr);
  gap:8px;
  align-items:end;
}
.tone-grid .arc-control { min-width:74px; }
.tone-grid .arc-widget { width:70px; height:50px; }
.motion-rate {
  align-self:center;
  display:grid;
  gap:6px;
  color:#5d8795;
  font-size:.55rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.motion-rate select { width:100%; }
.synth-v17 .envelope-module { padding-left:20px; padding-right:20px; }
.synth-v17 .adsr-display { height:110px; }
.synth-v17 .envelope-knobs { margin-top:9px; }
.synth-v17 .fx-module {
  display:block !important;
}
.synth-v17 .fx-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.synth-v17 .fx-block { min-width:0; }
.synth-v17 .fx-output {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:15px;
  padding-top:13px;
  border-top:1px solid #15303a;
}
.synth-v17 .fx-output .arc-control { margin:0; }

@media (min-width: 1180px) {
  .grid { grid-template-columns:40px repeat(16,36px) !important; }
  .cell { width:36px !important; height:36px !important; min-width:36px !important; min-height:36px !important; }
}

@media (max-width: 1050px) {
  .sequence-layout-v17 { grid-template-columns:1fr; }
  .sequence-console { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:0 24px; }
  .synth-v17 { grid-template-columns:1fr 1fr !important; }
  .synth-v17 .fx-module { grid-column:1 / -1; }
}

.compact-brand{min-height:58px;padding:2px 8px 8px}.compact-brand .brand h1{font-size:clamp(2.1rem,3.5vw,3.15rem)}.compact-brand .brand p{margin-top:3px}
.sequence-layout-v18{display:grid;grid-template-columns:max-content minmax(310px,1fr);gap:34px;align-items:start}.sequence-console{width:min(100%,390px);display:flex;flex-direction:column}.console-group{padding:16px 4px;border-bottom:1px solid #132d37}.console-group:last-child{border-bottom:0}
.transport-console{padding-top:0}.transport-inline{display:grid;grid-template-columns:120px minmax(126px,1fr) 34px;align-items:center;gap:10px}.transport-inline .transport-button{width:120px;min-width:120px;height:40px;min-height:40px}.tempo-stack{display:grid;gap:4px}.tempo-label{color:#456d7b;font-size:.54rem;letter-spacing:.18em;text-transform:uppercase}.tempo-controls{display:grid;grid-template-columns:28px 52px 28px;gap:4px}.tempo-step{width:28px;height:30px;border:1px solid #173742;border-radius:3px;background:transparent;color:#5f8e9d;cursor:pointer}.tempo-controls input{width:52px;height:30px;padding:0;text-align:center;border:1px solid #173742;border-radius:3px;background:#071016;color:var(--cyan)}
.key-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}.sequence-console .key-composite{width:auto;grid-template-columns:20px 40px 20px 1px 20px minmax(105px,1fr) 20px;gap:5px}.octave-beside{margin:0!important;display:grid;grid-template-columns:auto 20px 22px 20px;gap:3px;align-items:center;white-space:nowrap}.octave-beside>span:first-child{color:#456d7b;font-size:.52rem;letter-spacing:.10em;text-transform:uppercase}
.pattern-console .generator-selector{margin-bottom:10px}.pattern-console .generator-actions{margin:8px 0 0}.console-arcs{display:grid;grid-template-columns:repeat(3,82px);gap:7px}.console-arcs .arc-control{min-width:82px}.console-arcs .arc-widget{width:76px;height:52px}
.sequence-tools .tool-pair{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:9px}.sequence-tools .grid-tool{width:100%;min-height:38px;font-size:.61rem}.sequence-tools .clear-tool{width:100%;min-height:36px;margin:0}
.grid{overflow:visible}.cell.merge-left{border-left-color:transparent!important;margin-left:-4px!important;width:40px!important;border-radius:0!important}.cell.merge-right{border-right-color:transparent!important;margin-right:-4px!important;width:40px!important;border-radius:0!important}.cell.merge-left.merge-right{margin-left:-4px!important;margin-right:-4px!important;width:44px!important;border-left-color:transparent!important;border-right-color:transparent!important}
.synth-v18{display:grid!important;grid-template-columns:minmax(340px,1.05fr) minmax(420px,1.3fr) minmax(360px,1.05fr)!important;align-items:stretch}.synth-v18>.module{min-width:0;padding:16px 18px;border-top:0!important}.synth-v18 .sound-module,.synth-v18 .fx-module{border-right:1px solid #15303a}.synth-v18 .fx-module{display:block!important;position:relative}.synth-v18 .fx-module::before,.synth-v18 .fx-module::after{display:none!important;content:none!important}.synth-v18 .fx-row{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}.synth-v18 .fx-output{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:14px;border-top:1px solid #15303a}.synth-v18 .envelope-module{border-right:0!important}.synth-v18 .adsr-display{height:110px}.synth-v18 .tone-grid{grid-template-columns:78px 78px 78px minmax(90px,1fr)}
@media(max-width:1080px){.sequence-layout-v18{grid-template-columns:1fr}.sequence-console{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.synth-v18{grid-template-columns:1fr 1fr!important}.synth-v18 .envelope-module{grid-column:1/-1}}

/* Play button must never fall back to legacy hardware grey. */
.sequence-console .transport-button,
.sequence-console .transport-button:hover,
.sequence-console .transport-button:focus,
.sequence-console .transport-button:active,
.sequence-console .transport-button.playing,
.sequence-console .transport-button.playing:hover {
    background: #091016 !important;
    color: var(--cyan) !important;
    border: 1px solid #1d4655 !important;
    box-shadow:
        inset 0 0 14px rgba(56,215,255,.05),
        0 0 7px rgba(56,215,255,.04) !important;
    text-shadow: none !important;
    transform: none !important;
}

.sequence-console .transport-button:hover,
.sequence-console .transport-button.playing {
    border-color: #2b7188 !important;
    box-shadow:
        inset 0 0 15px rgba(56,215,255,.09),
        0 0 10px rgba(56,215,255,.08) !important;
}

.sequence-console .transport-button::after {
    display: none !important;
}

/* Transport/BPM forms one visually balanced row. */
.transport-inline {
    grid-template-columns: 124px 132px 34px !important;
    justify-content: center;
    gap: 12px !important;
}

.tempo-stack {
    width: 132px;
    justify-items: center;
}

.tempo-label {
    width: 100%;
    text-align: center;
    margin-bottom: 1px;
}

.tempo-controls {
    width: 132px;
    grid-template-columns: 34px 56px 34px !important;
    gap: 4px !important;
}

.tempo-step,
.tempo-controls input {
    height: 34px !important;
}

.tempo-step {
    width: 34px !important;
}

.tempo-controls input {
    width: 56px !important;
    appearance: textfield;
    -moz-appearance: textfield;
}

.tempo-controls input::-webkit-inner-spin-button,
.tempo-controls input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Key / Scale / Octave all share the same control language. */
.musical-context-row {
    display: grid;
    grid-template-columns: 82px 196px 86px;
    gap: 9px;
    align-items: end;
    justify-content: center;
}

.context-selector {
    display: grid;
    gap: 4px;
}

.mini-label {
    color: #456d7b;
    font-size: .50rem;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.context-selector-line {
    display: grid;
    grid-template-columns: 20px 1fr 20px;
    align-items: center;
    gap: 3px;
}

.context-selector .ghost-chevron {
    width: 20px !important;
    height: 30px !important;
}

.context-selector .context-value {
    width: 100% !important;
    height: 34px !important;
    min-width: 0 !important;
    text-align: center !important;
}

.root-selector .root-value {
    width: 36px !important;
    justify-self: center;
}

.scale-selector .scale-value {
    width: 150px !important;
    justify-self: center;
    letter-spacing: .08em;
}

.octave-selector .octave-value {
    width: 36px !important;
    justify-self: center;
    color: var(--cyan);
    font-size: 1.05rem;
}

/* Pattern reads as one centred block instead of a left-biased stack. */
.pattern-console {
    text-align: left;
}

.pattern-main {
    width: 100%;
    display: grid;
    justify-items: center;
    gap: 10px;
}

.pattern-main .generator-selector {
    display: grid;
    grid-template-columns: 22px 160px 22px !important;
    justify-content: center;
    gap: 6px;
    margin: 0 !important;
}

.pattern-main .generator-value {
    width: 160px !important;
    text-align: center;
}

.pattern-main .console-arcs {
    display: grid;
    grid-template-columns: repeat(3, 84px) !important;
    justify-content: center;
    gap: 10px !important;
}

.pattern-main .generator-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 176px;
    gap: 8px;
    margin: 0 !important;
}

.pattern-main .future-action {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* View/Edit is two clear equal columns with a full-width Clear. */
.view-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 4px;
}

.view-edit-column {
    display: grid;
    gap: 8px;
}

.view-edit-column .mini-label {
    margin-bottom: 1px;
}

.sequence-tools .grid-tool {
    min-height: 40px !important;
    font-size: .62rem !important;
}

.sequence-tools .clear-tool {
    margin-top: 12px !important;
    min-height: 36px !important;
    width: 100% !important;
}

/* Keep the sidebar geometry stable regardless of scale name length. */
.sequence-console {
    min-width: 390px;
}

@media (max-width: 1080px) {
    .sequence-console {
        min-width: 0;
    }

    .musical-context-row {
        grid-template-columns: 82px 196px 86px;
    }
}

/* Transport: one clean visual row, no legacy grey leakage anywhere. */
.transport-console {
    padding-top: 4px !important;
}

.transport-inline {
    display: grid !important;
    grid-template-columns: 124px 138px 34px !important;
    justify-content: center !important;
    align-items: end !important;
    gap: 12px !important;
}

.sequence-console .transport-button,
.sequence-console .transport-button:hover,
.sequence-console .transport-button:focus,
.sequence-console .transport-button:active,
.sequence-console .transport-button.playing,
.sequence-console .transport-button.playing:hover {
    width: 124px !important;
    min-width: 124px !important;
    height: 38px !important;
    min-height: 38px !important;
    background: #091016 !important;
    color: var(--cyan) !important;
    border: 1px solid #1d4655 !important;
    border-radius: 4px !important;
    box-shadow:
        inset 0 0 13px rgba(56,215,255,.045),
        0 0 7px rgba(56,215,255,.035) !important;
    text-shadow: none !important;
    transform: none !important;
}

.sequence-console .transport-button:hover,
.sequence-console .transport-button.playing {
    border-color: #2c7188 !important;
    box-shadow:
        inset 0 0 14px rgba(56,215,255,.085),
        0 0 9px rgba(56,215,255,.07) !important;
}

.sequence-console .transport-button::after {
    display: none !important;
}

/* BPM: coherent single unit. */
.tempo-stack {
    width: 138px !important;
    display: grid !important;
    gap: 4px !important;
    justify-items: center !important;
}

.tempo-label {
    width: 100% !important;
    text-align: center !important;
    margin: 0 !important;
}

.tempo-controls {
    width: 138px !important;
    display: grid !important;
    grid-template-columns: 36px 58px 36px !important;
    gap: 4px !important;
}

.tempo-step,
.tempo-controls input {
    height: 34px !important;
    box-sizing: border-box !important;
}

.tempo-step {
    width: 36px !important;
    border: 1px solid #173742 !important;
    background: #081016 !important;
    color: #6d9baa !important;
    border-radius: 4px !important;
}

.tempo-step:hover {
    color: var(--cyan) !important;
    border-color: #286176 !important;
}

.tempo-controls input {
    width: 58px !important;
    padding: 0 !important;
    text-align: center !important;
    background: #071016 !important;
    color: var(--cyan) !important;
    border: 1px solid #173742 !important;
    border-radius: 4px !important;
    appearance: textfield !important;
    -moz-appearance: textfield !important;
}

.tempo-controls input::-webkit-inner-spin-button,
.tempo-controls input::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Help follows the same neon visual language. */
.sequence-console .help-trigger,
.sequence-console .help-trigger:hover,
.sequence-console .help-trigger:focus,
.sequence-console .help-trigger:active {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: #081016 !important;
    border: 1px solid #1d4655 !important;
    color: #74a3b2 !important;
    box-shadow: inset 0 0 9px rgba(56,215,255,.025) !important;
    text-shadow: none !important;
}

.sequence-console .help-trigger:hover {
    color: var(--cyan) !important;
    border-color: #286176 !important;
    box-shadow:
        inset 0 0 10px rgba(56,215,255,.05),
        0 0 7px rgba(56,215,255,.045) !important;
}

/* Section headings need stronger hierarchy. */
.sequence-console .context-kicker {
    font-size: .66rem !important;
    letter-spacing: .19em !important;
    color: #6f99a7 !important;
    margin-bottom: 12px !important;
}

.sequence-console .mini-label {
    font-size: .53rem !important;
}

/* View/Edit: clean 2-column block, all controls aligned. */
.view-edit-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    align-items: start !important;
}

.view-edit-column {
    display: grid !important;
    grid-template-rows: auto 42px 42px !important;
    gap: 8px !important;
}

.view-edit-column .mini-label {
    min-height: 13px !important;
}

.sequence-tools .grid-tool {
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    display: grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
}

.sequence-tools .clear-tool,
.sequence-tools .clear-tool:hover,
.sequence-tools .clear-tool:focus {
    margin-top: 13px !important;
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    border: 1px solid #173742 !important;
    border-radius: 4px !important;
    background: #081016 !important;
    color: #638b99 !important;
}

.sequence-tools .clear-tool:hover {
    color: var(--cyan) !important;
    border-color: #286176 !important;
}

/* Bottom hierarchy: Sound | Shape | FX. */
.synth-v18 {
    display: grid !important;
    grid-template-columns:
        minmax(340px, 1.05fr)
        minmax(390px, 1.15fr)
        minmax(390px, 1.12fr) !important;
    align-items: stretch !important;
}

.synth-v18 > .module {
    min-width: 0 !important;
    padding: 16px 18px !important;
    border-top: 0 !important;
}

.synth-v18 .sound-module,
.synth-v18 .envelope-module {
    border-right: 1px solid #15303a !important;
}

.synth-v18 .fx-module {
    border-right: 0 !important;
    display: block !important;
}

/* Primary headings all equal. */
.synth-v18 > .module > h2 {
    font-size: .76rem !important;
    letter-spacing: .17em !important;
    margin: 0 0 11px !important;
}

/* Tone / Output are secondary headings, not competing with module titles. */
.subsection-title {
    color: #9bc8d5 !important;
    font-size: .62rem !important;
    font-weight: 600 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    margin: 0 0 8px !important;
}

.sound-divider {
    margin: 14px 0 11px !important;
}

/* Sound subsection remains compact. */
.synth-v18 .tone-grid {
    display: grid !important;
    grid-template-columns: 76px 76px 76px minmax(94px, 1fr) !important;
    gap: 8px !important;
    align-items: end !important;
}

/* Shape sits in the middle and gets enough breathing room. */
.synth-v18 .adsr-display {
    height: 108px !important;
}

.synth-v18 .envelope-knobs {
    margin-top: 9px !important;
}

/* FX: Delay/Reverb top row, Output is a real subsection below. */
.synth-v18 .fx-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    align-items: start !important;
}

.synth-v18 .fx-output {
    display: block !important;
    margin-top: 16px !important;
    padding-top: 13px !important;
    border-top: 1px solid #15303a !important;
}

.synth-v18 .fx-output .subsection-title {
    margin-bottom: 7px !important;
}

.synth-v18 .output-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

.synth-v18 .output-row .arc-control {
    margin: 0 !important;
}

@media (max-width: 1080px) {
    .synth-v18 {
        grid-template-columns: 1fr 1fr !important;
    }

    .synth-v18 .fx-module {
        grid-column: 1 / -1 !important;
    }
}

.synth-v18 {
    display: grid !important;
    grid-template-columns:
        minmax(340px, 1.05fr)
        minmax(390px, 1.15fr)
        minmax(390px, 1.12fr) !important;
    align-items: stretch !important;
}

.synth-v18 > .sound-module {
    grid-column: 1 !important;
}

.synth-v18 > .envelope-module {
    grid-column: 2 !important;
}

.synth-v18 > .fx-module {
    grid-column: 3 !important;
}

.synth-v18 > .module {
    height: auto !important;
    box-sizing: border-box !important;
}

.synth-v18 .fx-output {
    display: block !important;
}

.synth-v18 .output-row {
    display: flex !important;
    justify-content: flex-start !important;
}

/* BPM controls: equal boxes, baseline/alignment fixed. */
.transport-inline {
    align-items: center !important;
}

.tempo-stack {
    align-self: center !important;
    gap: 3px !important;
}

.tempo-label {
    line-height: 1 !important;
    height: 10px !important;
}

.tempo-controls {
    align-items: stretch !important;
}

.tempo-step,
.tempo-controls input {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 32px !important;
    vertical-align: middle !important;
}

.tempo-step {
    display: grid !important;
    place-items: center !important;
    font: inherit !important;
    line-height: 1 !important;
}

.tempo-controls input {
    font: 600 .72rem/32px Consolas, monospace !important;
}

/* Merge rendering:
   preserve the square grid geometry and bridge only the gaps between
   adjacent active cells. This avoids overlapping/widened cells. */
.cell {
    position: relative !important;
    overflow: visible !important;
}

.cell.merge-right::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: -1px;
    bottom: -1px;
    left: 100%;
    width: 5px;
    background:
        linear-gradient(
            180deg,
            rgba(56,215,255,.18),
            rgba(56,215,255,.08)
        ),
        #0a171d;
    border-top: 1px solid #3bdcff;
    border-bottom: 1px solid #3bdcff;
    box-shadow:
        inset 0 0 8px rgba(56,215,255,.10),
        0 0 4px rgba(56,215,255,.08);
    pointer-events: none;
}

.cell.velocity-2.merge-right::after,
.cell.velocity-3.merge-right::after {
    background:
        linear-gradient(
            180deg,
            rgba(232,252,255,.34),
            rgba(56,215,255,.16)
        ),
        #0b1920;
    border-top-color: #b5f6ff;
    border-bottom-color: #b5f6ff;
    box-shadow:
        inset 0 0 10px rgba(56,215,255,.18),
        0 0 5px rgba(56,215,255,.14);
}

/* Hide the inner vertical seam between merged cells. */
.cell.merge-right {
    border-right-color: transparent !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.cell.merge-left {
    border-left-color: transparent !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Undo older width/margin hacks completely. */
.cell.merge-left,
.cell.merge-right,
.cell.merge-left.merge-right {
    width: 36px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Shape: give the envelope graphic more vertical room. */
.synth-v18 .adsr-display {
    height: 145px !important;
    min-height: 145px !important;
}

.synth-v18 .envelope-module {
    display: flex !important;
    flex-direction: column !important;
}

.synth-v18 .envelope-knobs {
    margin-top: 12px !important;
}

/* Output: horizontal linear control. */
.synth-v18 .fx-output {
    display: block !important;
    margin-top: 17px !important;
    padding-top: 14px !important;
    border-top: 1px solid #15303a !important;
}

.linear-output-control {
    display: grid;
    gap: 7px;
    width: 100%;
}

.linear-output-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.linear-output-head output {
    color: #6f9ba9;
    font: .62rem/1 Consolas, monospace;
}

.linear-range {
    width: 100%;
    height: 18px;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: ew-resize;
}

.linear-range::-webkit-slider-runnable-track {
    height: 3px;
    border-radius: 2px;
    background: #173742;
    box-shadow: inset 0 0 5px rgba(0,0,0,.5);
}

.linear-range::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
    margin-top: -4.5px;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 50%;
    border: 1px solid var(--cyan);
    background: #e7fbff;
    box-shadow:
        0 0 3px rgba(56,215,255,.95),
        0 0 8px rgba(56,215,255,.35);
}

.linear-range::-moz-range-track {
    height: 3px;
    border-radius: 2px;
    background: #173742;
}

.linear-range::-moz-range-progress {
    height: 3px;
    border-radius: 2px;
    background: var(--cyan);
    box-shadow: 0 0 5px rgba(56,215,255,.28);
}

.linear-range::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid var(--cyan);
    background: #e7fbff;
    box-shadow:
        0 0 3px rgba(56,215,255,.95),
        0 0 8px rgba(56,215,255,.35);
}

/* WebKit cannot style the progress segment directly; add a restrained
   cyan track so the control still reads clearly without JS duplication. */
.linear-range::-webkit-slider-runnable-track {
    background:
        linear-gradient(90deg, rgba(56,215,255,.72), rgba(56,215,255,.72))
        0 0 / var(--range-fill, 0%) 100% no-repeat,
        #173742;
}

.transport-inline{display:grid!important;grid-template-columns:124px 150px 104px 34px!important;align-items:center!important;justify-content:center!important;gap:12px!important}
.tempo-unit{display:grid;grid-template-columns:38px 66px 38px;align-items:center;gap:4px;width:150px}
.tempo-readout{position:relative;width:66px;height:38px}
.tempo-readout .tempo-label{position:absolute!important;top:-14px;left:0;width:100%!important;height:auto!important;text-align:center!important;line-height:1!important}
.tempo-readout input,.tempo-step{height:38px!important;box-sizing:border-box!important}
.tempo-readout input{width:66px!important;padding:0!important;text-align:center!important;line-height:38px!important}
.tempo-step{width:38px!important;display:grid!important;place-items:center!important;padding:0!important;line-height:1!important}
.swing-unit{display:grid;gap:4px;width:104px}.swing-unit .tempo-label{position:static!important;width:auto!important;height:auto!important;text-align:left!important}
.swing-control{display:grid;grid-template-columns:1fr 34px;gap:7px;align-items:center}.swing-control input{width:100%;accent-color:var(--cyan)}.swing-control output{color:#6f9ba9;font:.60rem/1 Consolas,monospace;text-align:right}
.synth-v18 .fx-row{grid-template-columns:repeat(3,1fr)!important;gap:18px!important}.synth-v18 .fx-block+.fx-block{border-left:1px solid #15303a;padding-left:18px}.synth-v18 .fx-block select{width:100%}

.tempo-readout input,
.tempo-readout input:focus,
.tempo-readout input:hover {
    color: var(--cyan) !important;
    -webkit-text-fill-color: var(--cyan) !important;
    caret-color: var(--cyan) !important;
    background: #071016 !important;
    border-color: #1d4655 !important;
    box-shadow: inset 0 0 10px rgba(56,215,255,.035) !important;
    outline: none !important;
}

.tempo-step,
.tempo-step:hover,
.tempo-step:focus {
    background: #081016 !important;
    border-color: #1d4655 !important;
    color: #6f9baa !important;
    box-shadow: none !important;
}

.tempo-step:hover {
    color: var(--cyan) !important;
    border-color: #2a687b !important;
}

.transport-inline {
    grid-template-columns: 124px 150px 82px 34px !important;
}

.swing-unit {
    width: 82px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.swing-arc {
    width: 82px !important;
    min-width: 82px !important;
}

.swing-arc .arc-widget {
    width: 76px !important;
    height: 52px !important;
}

.swing-arc output {
    min-height: 12px;
    color: #6f9ba9;
    font: .58rem/1 Consolas, monospace;
}

/* =========================================================
   v0.20 - Responsive layout
   ========================================================= */

#bpmInput::-webkit-inner-spin-button,
#bpmInput::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

#bpmInput {
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.instrument {
    width: min(1480px, calc(100% - 24px)) !important;
    margin-inline: auto;
}

.grid-shell,
.sequence-console,
.synth-v18 > .module {
    min-width: 0 !important;
}

@media (min-width: 1201px) {
    .sequence-layout-v18 {
        grid-template-columns: max-content minmax(330px, 390px) !important;
        justify-content: space-between;
    }

    .sequence-console {
        width: 390px !important;
    }
}

@media (max-width: 1200px) {
    .instrument {
        width: min(1120px, calc(100% - 20px)) !important;
    }

    .sequence-layout-v18 {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .grid-shell {
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 6px;
        scrollbar-width: thin;
        scrollbar-color: #1f5364 #081016;
    }

    .grid-shell::-webkit-scrollbar {
        height: 8px;
    }

    .grid-shell::-webkit-scrollbar-track {
        background: #081016;
    }

    .grid-shell::-webkit-scrollbar-thumb {
        background: #1f5364;
        border-radius: 8px;
    }

    .sequence-console {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0 22px !important;
    }

    .sequence-console .console-group {
        padding: 16px 4px !important;
    }

    .transport-console,
    .key-console {
        border-bottom: 1px solid #132d37 !important;
    }

    .pattern-console,
    .sequence-tools {
        border-bottom: 0 !important;
    }

    .transport-inline,
    .musical-context-row {
        justify-content: start !important;
    }

    .pattern-main {
        justify-items: start !important;
    }

    .pattern-main .generator-selector,
    .pattern-main .console-arcs {
        justify-content: start !important;
    }

    .pattern-main .generator-actions {
        justify-self: start;
    }

    .synth-v18 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .synth-v18 .sound-module {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .synth-v18 .envelope-module {
        grid-column: 2 !important;
        grid-row: 1 !important;
        border-right: 0 !important;
    }

    .synth-v18 .fx-module {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        border-top: 1px solid #15303a !important;
    }

    .synth-v18 .fx-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 820px) {
    body {
        overflow-x: hidden;
    }

    .instrument {
        width: calc(100% - 16px) !important;
    }

    .compact-brand {
        min-height: 52px !important;
        padding: 4px 4px 8px !important;
    }

    .compact-brand .brand h1 {
        font-size: clamp(2rem, 9vw, 2.8rem) !important;
        letter-spacing: .02em;
    }

    .compact-brand .brand p {
        font-size: .54rem !important;
        letter-spacing: .16em !important;
    }

    .sequencer-workspace {
        padding: 12px !important;
    }

    .grid-title-hint {
        display: none !important;
    }

    .grid {
        min-width: 680px !important;
        grid-template-columns: 40px repeat(16, 36px) !important;
        column-gap: 4px !important;
        row-gap: 4px !important;
    }

    .cell {
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
    }

    .sequence-console {
        display: block !important;
    }

    .console-group {
        border-bottom: 1px solid #132d37 !important;
        padding: 15px 2px !important;
    }

    .sequence-console .console-group:last-child {
        border-bottom: 0 !important;
    }

    .transport-inline {
        grid-template-columns: 124px 150px 82px 34px !important;
        justify-content: start !important;
        overflow-x: auto;
        padding-top: 15px;
        padding-bottom: 3px;
    }

    .musical-context-row {
        grid-template-columns: 82px minmax(150px, 196px) 86px !important;
        justify-content: start !important;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .pattern-main {
        justify-items: center !important;
    }

    .pattern-main .generator-selector,
    .pattern-main .console-arcs {
        justify-content: center !important;
    }

    .pattern-main .generator-actions {
        justify-self: center;
    }

    .synth-v18 {
        display: block !important;
    }

    .synth-v18 > .module {
        border-right: 0 !important;
        border-bottom: 1px solid #15303a !important;
        padding: 15px !important;
    }

    .synth-v18 > .module:last-child {
        border-bottom: 0 !important;
    }

    .waveform-selector {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .tone-grid {
        grid-template-columns: repeat(3, 76px) minmax(105px, 1fr) !important;
    }

    .synth-v18 .adsr-display {
        height: 160px !important;
    }

    .synth-v18 .fx-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    .instrument {
        width: calc(100% - 10px) !important;
    }

    .compact-brand .brand h1 {
        font-size: clamp(1.9rem, 11vw, 2.45rem) !important;
    }

    .compact-brand .brand p {
        font-size: .50rem !important;
    }

    .sequencer-workspace {
        padding: 10px 8px !important;
    }

    .grid {
        min-width: 632px !important;
        grid-template-columns: 36px repeat(16, 34px) !important;
        column-gap: 3px !important;
        row-gap: 3px !important;
    }

    .cell {
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
    }

    .transport-inline {
        width: 100%;
        grid-template-columns: 1fr 34px !important;
        grid-template-areas:
            "play help"
            "tempo tempo"
            "swing swing";
        gap: 10px !important;
        overflow: visible;
        padding-top: 15px;
    }

    .transport-button {
        grid-area: play;
        width: 100% !important;
        min-width: 0 !important;
    }

    .help-trigger {
        grid-area: help;
    }

    .tempo-unit {
        grid-area: tempo;
        width: 100% !important;
        grid-template-columns: 42px 1fr 42px !important;
    }

    .tempo-readout,
    .tempo-readout input {
        width: 100% !important;
    }

    .swing-unit {
        grid-area: swing;
        width: 100% !important;
        justify-content: flex-start !important;
    }

    .musical-context-row {
        display: grid !important;
        grid-template-columns: 82px 1fr !important;
        grid-template-areas:
            "root octave"
            "scale scale";
        gap: 10px 12px !important;
        overflow: visible;
    }

    .root-selector {
        grid-area: root;
    }

    .octave-selector {
        grid-area: octave;
    }

    .scale-selector {
        grid-area: scale;
    }

    .scale-selector .scale-value {
        width: 100% !important;
        max-width: none !important;
    }

    .pattern-main .console-arcs {
        width: 100%;
        grid-template-columns: repeat(3, minmax(70px, 1fr)) !important;
        gap: 4px !important;
    }

    .console-arcs .arc-control {
        min-width: 0 !important;
        width: auto !important;
    }

    .console-arcs .arc-widget {
        width: 68px !important;
        height: 48px !important;
    }

    .pattern-main .generator-actions {
        width: min(220px, 100%) !important;
    }

    .view-edit-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .waveform-selector {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .tone-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 5px !important;
    }

    .tone-grid .motion-rate {
        grid-column: 1 / -1;
        width: 100%;
    }

    .tone-grid .motion-rate select {
        width: 100% !important;
    }

    .synth-v18 .adsr-display {
        height: 150px !important;
    }

    .synth-v18 .fx-row {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .synth-v18 .fx-block {
        display: grid;
        grid-template-columns: 92px 1fr;
        align-items: center;
        gap: 8px 14px;
        padding: 12px 0 !important;
        border-left: 0 !important;
        border-bottom: 1px solid #15303a;
    }

    .synth-v18 .fx-block:last-child {
        border-bottom: 0;
    }

    .synth-v18 .fx-block .fx-name {
        grid-column: 1 / -1;
    }

    .synth-v18 .fx-block .arc-control {
        grid-column: 1;
        grid-row: 2;
    }

    .synth-v18 .fx-block label {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
    }
}

@media (pointer: coarse) {
    button,
    select {
        min-height: 40px;
    }

    .ghost-chevron,
    .micro-chevron {
        min-width: 32px !important;
        min-height: 36px !important;
    }

    .grid-tool,
    .future-action {
        min-height: 42px !important;
    }
}

.step-number.group-end::after {
    content: "";
    display: block;
    width: 9px;
    height: 1px;
    margin: 2px auto 0;
    background: rgba(56,215,255,.26);
    box-shadow: 0 0 4px rgba(56,215,255,.08);
}

.cell.group-end {
    border-right-color: #24434e !important;
}

.grid.tie-edit-mode .cell.on {
    cursor: ew-resize;
}

.grid.tie-edit-mode .cell.on:hover {
    border-color: #78eaff !important;
}

/* Selective ties use the existing bridge treatment, but only where a tie exists. */
.cell.merge-right::after {
    width: 5px !important;
}

/* Give the active Merge editor a slightly stronger state so its changed meaning is clear. */
#mergeButton.active {
    box-shadow:
        inset 0 0 12px rgba(56,215,255,.10),
        0 0 7px rgba(56,215,255,.08) !important;
}

/* =========================================================
   v0.22 - phone usability + clean beat grouping
   ========================================================= */

/* No marker under 4 / 8 / 12 headings. */
.step-number.group-end::after {
    content: none !important;
    display: none !important;
}

/* Beat grouping lives in the gap, never in a cell border. */
.cell.group-end {
    border-right-color: #18303a !important;
    position: relative !important;
}

.cell.group-end::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -1px;
    bottom: -1px;
    right: -3px;
    width: 1px;
    background: rgba(56,215,255,.20);
    box-shadow: 0 0 4px rgba(56,215,255,.05);
    pointer-events: none;
}

/* Selected-note borders always win over grouping. */
.cell.velocity-1.group-end {
    border-color: #3bdcff !important;
}
.cell.velocity-2.group-end,
.cell.velocity-3.group-end {
    border-color: #b5f6ff !important;
}

/* The tie bridge is above the subtle grouping separator. */
.cell.merge-right::after {
    z-index: 3 !important;
}

.grid.tie-edit-mode .cell.on {
    cursor: pointer !important;
}

/* A tiny tail makes the tied state obvious without adding another symbol. */
.grid.tie-edit-mode .cell.on.merge-right {
    box-shadow:
        inset 0 0 12px rgba(56,215,255,.17),
        0 0 7px rgba(56,215,255,.14) !important;
}

/* Moto G84 / typical ~390px Android portrait layout. */
@media (max-width: 600px) {
    body {
        overscroll-behavior-x: none;
    }

    .instrument {
        width: calc(100% - 8px) !important;
    }

    .compact-brand {
        min-height: 44px !important;
        padding: 3px 4px 6px !important;
    }

    .compact-brand .brand h1 {
        font-size: clamp(1.75rem, 9.5vw, 2.2rem) !important;
    }

    .compact-brand .brand p {
        font-size: .46rem !important;
        letter-spacing: .13em !important;
    }

    .sequencer-workspace {
        padding: 8px 6px 10px !important;
    }

    /* Turn the sidebar into ordered page sections so the grid can sit
       between Pattern and View/Edit rather than forcing one big sidebar. */
    .sequence-layout-v18 {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    .sequence-console {
        display: contents !important;
    }

    .transport-console { order: 1; }
    .key-console       { order: 2; }
    .pattern-console   { order: 3; }
    .grid-shell        { order: 4; }
    .sequence-tools    { order: 5; }

    .console-group {
        padding: 12px 2px !important;
    }

    .sequence-console .context-kicker {
        font-size: .61rem !important;
        margin-bottom: 9px !important;
    }

    /* Compact transport but keep real touch targets. */
    .transport-inline {
        padding-top: 14px !important;
        grid-template-columns: 1fr 38px !important;
        grid-template-areas:
            "play help"
            "tempo tempo"
            "swing swing" !important;
        gap: 9px !important;
    }

    .transport-inline .transport-button {
        grid-area: play;
        width: 100% !important;
        min-width: 0 !important;
        height: 42px !important;
    }

    .transport-inline .help-trigger {
        grid-area: help;
        width: 38px !important;
        height: 38px !important;
    }

    .tempo-unit {
        grid-area: tempo;
        width: 100% !important;
        grid-template-columns: 44px 1fr 44px !important;
    }

    .tempo-readout,
    .tempo-readout input {
        width: 100% !important;
    }

    .swing-unit {
        grid-area: swing;
        width: 92px !important;
        justify-content: flex-start !important;
    }

    /* Key/Scale/Octave: one full-width scale row, compact root/octave. */
    .musical-context-row {
        width: 100%;
        grid-template-columns: minmax(90px, 1fr) minmax(90px, 1fr) !important;
        grid-template-areas:
            "root octave"
            "scale scale" !important;
        gap: 9px 12px !important;
        overflow: visible !important;
    }

    .root-selector   { grid-area: root; }
    .octave-selector { grid-area: octave; }
    .scale-selector  { grid-area: scale; }

    .root-selector .context-value,
    .octave-selector .context-value,
    .scale-selector .context-value {
        height: 38px !important;
    }

    .scale-selector .scale-value {
        width: 100% !important;
        max-width: none !important;
    }

    /* Pattern remains a compact instrument block. */
    .pattern-main {
        width: 100%;
        justify-items: center !important;
        gap: 8px !important;
    }

    .pattern-main .generator-selector {
        grid-template-columns: 38px minmax(150px, 190px) 38px !important;
    }

    .pattern-main .console-arcs {
        width: 100%;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2px !important;
    }

    .console-arcs .arc-control {
        width: 100% !important;
        min-width: 0 !important;
    }

    .console-arcs .arc-widget {
        width: 72px !important;
        height: 50px !important;
    }

    .pattern-main .generator-actions {
        width: min(230px, 100%) !important;
    }

    /* Grid: retain large touch targets and horizontal scroll. */
    .grid-shell {
        width: 100%;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        padding: 5px 0 9px !important;
        border-top: 1px solid #122b35;
        border-bottom: 1px solid #122b35;
    }

    .grid {
        width: max-content !important;
        min-width: max-content !important;
        grid-template-columns: 48px repeat(16, 40px) !important;
        column-gap: 4px !important;
        row-gap: 4px !important;
    }

    .cell {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        touch-action: none;
    }

    /* Swipe the header or pitch labels to move around the grid; touching
       a note cell remains an editing gesture. */
    .step-number,
    .grid-label {
        touch-action: pan-x;
        background: #080d12;
    }

    .grid-label {
        position: sticky;
        left: 0;
        z-index: 6;
        padding-right: 5px;
        box-shadow: 5px 0 8px rgba(4,8,11,.58);
    }

    .grid > .grid-label:first-child {
        z-index: 8;
    }

    .step-number {
        font-size: .60rem !important;
    }

    /* Editing tools now sit directly under the grid. */
    .sequence-tools {
        padding-top: 12px !important;
    }

    .view-edit-grid {
        gap: 8px !important;
    }

    .sequence-tools .grid-tool {
        min-height: 44px !important;
        font-size: .62rem !important;
    }

    /* Sound sections: stacked, compact, and touch sized. */
    .synth-v18 {
        display: block !important;
    }

    .synth-v18 > .module {
        padding: 13px 10px !important;
    }

    .waveform-selector {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }

    .tone-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .tone-grid .motion-rate {
        grid-column: 1 / -1;
    }

    .synth-v18 .fx-row {
        grid-template-columns: 1fr !important;
    }

    .synth-v18 .fx-block {
        grid-template-columns: 92px 1fr !important;
    }
}

@media (max-width: 430px) {
    .grid {
        grid-template-columns: 46px repeat(16, 40px) !important;
    }

    .grid-title-main {
        font-size: .58rem !important;
    }
}

.grid-navigator {
    display: none;
}

@media (max-width: 820px) {
    .grid-navigator {
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr) 46px;
        gap: 8px;
        align-items: center;
        margin: 8px 0 4px;
        padding: 4px 0;
        user-select: none;
        touch-action: none;
    }

    .grid-nav-nudge {
        width: 46px;
        height: 46px;
        min-height: 46px;
        display: grid;
        place-items: center;
        padding: 0;
        border: 1px solid #1d4655;
        border-radius: 6px;
        background: #081016;
        color: #79a7b5;
        font-size: 1.25rem;
        line-height: 1;
        box-shadow: inset 0 0 10px rgba(56,215,255,.025);
        touch-action: manipulation;
    }

    .grid-nav-nudge:active {
        color: var(--cyan);
        border-color: #2a687b;
        background: #0a151b;
    }

    .grid-nav-track {
        position: relative;
        height: 24px;
        min-height: 24px;
        overflow: hidden;
        border: 1px solid #173742;
        border-radius: 12px;
        background:
            linear-gradient(
                to right,
                transparent 24.55%,
                rgba(56,215,255,.13) 24.7%,
                rgba(56,215,255,.13) 25.3%,
                transparent 25.45%,
                transparent 49.55%,
                rgba(56,215,255,.13) 49.7%,
                rgba(56,215,255,.13) 50.3%,
                transparent 50.45%,
                transparent 74.55%,
                rgba(56,215,255,.13) 74.7%,
                rgba(56,215,255,.13) 75.3%,
                transparent 75.45%
            ),
            #071016;
        box-shadow:
            inset 0 0 10px rgba(0,0,0,.55),
            0 0 8px rgba(56,215,255,.025);
        touch-action: none;
    }

    .grid-nav-thumb {
        position: absolute;
        top: 3px;
        left: 0;
        height: 16px;
        min-width: 58px;
        border-radius: 8px;
        border: 1px solid #62e9ff;
        background:
            linear-gradient(
                180deg,
                rgba(205,250,255,.96),
                rgba(56,215,255,.68)
            );
        box-shadow:
            0 0 5px rgba(56,215,255,.78),
            0 0 13px rgba(56,215,255,.30),
            inset 0 0 5px rgba(255,255,255,.34);
        cursor: grab;
        will-change: transform, width;
        touch-action: none;
    }

    .grid-nav-thumb:active {
        cursor: grabbing;
    }

    .grid-navigator.is-idle {
        opacity: .4;
    }
}

@media (max-width: 560px) {
    .grid-navigator {
        grid-template-columns: 50px minmax(0, 1fr) 50px;
        gap: 7px;
        margin-top: 10px;
    }

    .grid-nav-nudge {
        width: 50px;
        height: 50px;
        min-height: 50px;
    }

    .grid-nav-track {
        height: 28px;
        min-height: 28px;
        border-radius: 14px;
    }

    .grid-nav-thumb {
        top: 4px;
        height: 18px;
        min-width: 64px;
        border-radius: 9px;
    }
}

.grid-area {
    min-width: 0;
}

@media (min-width: 821px) {
    .grid-area {
        width: max-content;
    }
}

@media (max-width: 1200px) {
    .grid-area {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 820px) {
    /* The grid and navigator are now a single layout item. */
    .grid-area {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        order: 0 !important;
    }

    .grid-shell {
        width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    .grid-navigator {
        position: static !important;
        inset: auto !important;
        float: none !important;

        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;

        grid-template-columns: 46px minmax(120px, 1fr) 46px !important;
        grid-template-areas: "prev track next" !important;
        align-items: center !important;
        column-gap: 8px !important;

        margin: 10px 0 4px !important;
        padding: 0 !important;

        transform: none !important;
    }

    #gridNavPrev {
        grid-area: prev;
    }

    #gridNavTrack {
        grid-area: track;
    }

    #gridNavNext {
        grid-area: next;
    }

    .grid-nav-track {
        display: block !important;
        width: 100% !important;
        min-width: 120px !important;
        max-width: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex: none !important;
    }

    .grid-nav-thumb {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .grid-nav-nudge {
        flex: none !important;
    }
}

@media (max-width: 560px) {
    /* Do not let the phone breakpoint convert/collapse the navigator. */
    .grid-area {
        width: 100% !important;
    }

    .grid-navigator {
        width: 100% !important;
        grid-template-columns: 48px minmax(0, 1fr) 48px !important;
        grid-template-areas: "prev track next" !important;
        gap: 7px !important;

        margin: 10px 0 5px !important;
        padding: 0 !important;

        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
    }

    .grid-nav-track {
        width: 100% !important;
        min-width: 0 !important;
        height: 28px !important;
        min-height: 28px !important;
    }

    .grid-nav-thumb {
        height: 18px !important;
        min-width: 54px !important;
    }

    .grid-nav-nudge {
        width: 48px !important;
        min-width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
    }
}

.percussion-panel {
    display: grid;
    gap: 14px;
    margin-top: 12px;
    padding: 15px 18px;
}

.percussion-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}

.percussion-header h2 {
    margin: 0;
    font-size: .76rem;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.percussion-header p {
    margin: 4px 0 0;
    color: #557d8a;
    font-size: .56rem;
    letter-spacing: .08em;
}

.percussion-preset {
    width: min(180px, 100%);
}

.percussion-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(130px, 1fr)) 92px;
    gap: 16px;
    align-items: end;
}

.percussion-controls > label,
.percussion-preset {
    display: grid;
    gap: 6px;
    color: #6f99a7;
    font-size: .55rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.percussion-controls select,
.percussion-preset select {
    width: 100%;
}

.percussion-level {
    justify-self: center;
}

@media (max-width: 820px) {
    .percussion-header {
        align-items: stretch;
        flex-direction: column;
    }

    .percussion-preset {
        width: 100%;
    }

    .percussion-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .percussion-level {
        justify-self: start;
    }
}

@media (max-width: 560px) {
    .percussion-panel {
        padding: 14px;
    }

    .percussion-controls {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .percussion-controls > label:nth-child(3) {
        grid-column: 1 / -1;
    }

    .percussion-level {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

/* Remove the exposed grey browser/page surround. */
html,
body {
    background: #050a0d !important;
}

body {
    min-height: 100vh;
}

/* Percussion selectors should use the current cyan/black UI,
   not the old brown hardware-era select styling. */
.percussion-panel select {
    appearance: none;
    -webkit-appearance: none;
    color: #9bdce8 !important;
    background-color: #081116 !important;
    border: 1px solid #1d4655 !important;
    border-radius: 4px !important;
    box-shadow:
        inset 0 0 10px rgba(0, 0, 0, .45),
        0 0 8px rgba(56, 215, 255, .025) !important;
}

.percussion-panel select:hover,
.percussion-panel select:focus {
    color: #c5f6ff !important;
    background-color: #0a151b !important;
    border-color: #2a687b !important;
    outline: none !important;
}

.percussion-panel select option {
    color: #9bdce8;
    background: #081116;
}

/* Restore a restrained custom dropdown chevron. */
.percussion-controls > label,
.percussion-preset {
    position: relative;
}

.percussion-controls > label::after,
.percussion-preset::after {
    content: "⌄";
    position: absolute;
    right: 10px;
    bottom: 9px;
    color: #4d9caf;
    font-size: .8rem;
    line-height: 1;
    pointer-events: none;
}

.percussion-panel select,
.percussion-panel select:hover,
.percussion-panel select:focus,
.percussion-panel select:active {
    background: #081116 !important;
    background-color: #081116 !important;
    background-image: none !important;
    filter: none !important;

    color: #9bdce8 !important;
    -webkit-text-fill-color: #9bdce8 !important;

    border: 1px solid #1d4655 !important;
    border-radius: 4px !important;

    box-shadow: none !important;
    text-shadow: none !important;

    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

.percussion-panel select:hover,
.percussion-panel select:focus {
    background: #081116 !important;
    background-image: none !important;
    border-color: #2a687b !important;
    color: #c5f6ff !important;
    -webkit-text-fill-color: #c5f6ff !important;
    outline: none !important;
}

.percussion-panel label {
    background: none !important;
    box-shadow: none !important;
}

.linear-range {
    --range-fill: 0%;
}

.linear-range::-webkit-slider-runnable-track {
    background:
        linear-gradient(
            90deg,
            rgba(56,215,255,.72),
            rgba(56,215,255,.72)
        )
        0 0 / var(--range-fill) 100% no-repeat,
        #173742 !important;
}

.linear-range::-moz-range-progress {
    background: var(--cyan) !important;
}

.linear-range {
    --range-fill: 0%;

    appearance: none !important;
    -webkit-appearance: none !important;

    width: 100% !important;
    height: 3px !important;
    border-radius: 2px !important;

    background:
        linear-gradient(
            to right,
            rgba(56, 215, 255, .72) 0,
            rgba(56, 215, 255, .72) var(--range-fill),
            #173742 var(--range-fill),
            #173742 100%
        ) !important;

    cursor: ew-resize;
}

/* Chrome / Brave / Safari: let the input background show through. */
.linear-range::-webkit-slider-runnable-track {
    height: 3px !important;
    border: 0 !important;
    border-radius: 2px !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Firefox keeps its native progress pseudo-element. */
.linear-range::-moz-range-track {
    height: 3px !important;
    border: 0 !important;
    border-radius: 2px !important;
    background: #173742 !important;
}

.linear-range::-moz-range-progress {
    height: 3px !important;
    border-radius: 2px !important;
    background: var(--cyan) !important;
}

/* Keep the existing thumb visual but ensure both engines align it
   with the now-3px track. */
.linear-range::-webkit-slider-thumb {
    margin-top: -4.5px !important;
}

.linear-range::-moz-range-thumb {
    margin-top: 0 !important;
}

.linear-range-shell {
    position: relative;
    width: 100%;
    height: 18px;
    display: flex;
    align-items: center;
}

.linear-range-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 3px;
    transform: translateY(-50%);
    border-radius: 2px;
    background: #173742;
    overflow: hidden;
    pointer-events: none;
}

.linear-range-fill {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: rgba(56,215,255,.78);
    box-shadow: 0 0 5px rgba(56,215,255,.30);
    pointer-events: none;
}

.linear-range {
    position: relative;
    z-index: 2;

    width: 100% !important;
    height: 18px !important;
    margin: 0 !important;

    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;

    background: transparent !important;
    border: 0 !important;
    outline: none !important;
    cursor: ew-resize;
}

/* Native tracks must be fully transparent in every engine. */
.linear-range::-webkit-slider-runnable-track {
    height: 18px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.linear-range::-moz-range-track,
.linear-range::-moz-range-progress {
    height: 18px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Thumb stays centred over the custom 3px track. */
.linear-range::-webkit-slider-thumb {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 12px !important;
    height: 12px !important;
    margin-top: 3px !important;
    border-radius: 50% !important;
    border: 1px solid var(--cyan) !important;
    background: #e7fbff !important;
    box-shadow:
        0 0 3px rgba(56,215,255,.95),
        0 0 8px rgba(56,215,255,.35) !important;
}

.linear-range::-moz-range-thumb {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    border: 1px solid var(--cyan) !important;
    background: #e7fbff !important;
    box-shadow:
        0 0 3px rgba(56,215,255,.95),
        0 0 8px rgba(56,215,255,.35) !important;
}


/* Production baseline */
html,
body {
    margin: 0;
    min-height: 100%;
    background: #050a0d;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
}