:root {
    --bg:#111416;
    --panel:#24282b;
    --panel2:#303539;
    --edge:#51595e;
    --text:#eef0eb;
    --muted:#aeb6b8;
    --cyan:#26c7d9;
    --orange:#ff8d24;
    --green:#6fd58b;
    --red:#e05454;
    --screen:#0b1214;
    --screen2:#112227;
    --black:#050606;
    --yellow:#e7c762;
}

* {
    box-sizing:border-box
}

body {
    margin:0;
    background:radial-gradient(circle at top,#2a3034 0,#121618 45%,#090b0c 100%);
    color:var(--text);
    font-family:Arial,Helvetica,sans-serif;
    font-size:14px;
    line-height:1.35
}

a:link, a:visited {color:var(--orange);}

button,select,input {
    font:inherit
}

.app {
    max-width:1540px;
    margin:auto;
    padding-bottom:36px
}

.topbar {
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:center;
    padding:14px 18px;
    background:#090b0c;
    border-bottom:2px solid var(--cyan);
    position:sticky;
    top:0;
    z-index:10;
    box-shadow:0 8px 25px #0008
}

.topbar h1 {
    margin:0;
    font-size:1.45rem;
    letter-spacing:.09em
}

.topbar p {
    margin:.18rem 0 0;
    color:var(--muted)
}

.transport,.presetbar,.roll-controls {
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap
}

.panel {
    background:linear-gradient(180deg,#30363a,#202427);
    border:1px solid var(--edge);
    border-radius:10px;
    box-shadow:inset 0 1px #ffffff0f,0 8px 18px #0005
}

.presetbar {
    margin:14px;
    padding:10px
}

.presetbar input,.presetbar select,.transport input,.roll-controls select {
    background:#101416;
    border:1px solid #596166;
    color:var(--text);
    padding:7px 8px;
    border-radius:5px
}

.presetbar #soundName {
    min-width:190px
}

button,.file-button {
    border:1px solid #697277;
    border-radius:6px;
    background:linear-gradient(#41484c,#25292c);
    color:var(--text);
    padding:8px 11px;
    cursor:pointer;
    box-shadow:inset 0 1px #ffffff18
}

button:hover,.file-button:hover {
    border-color:var(--cyan)
}

button:active {
    transform:translateY(1px)
}

.file-button input {
    display:none
}

.transport button:first-of-type {
    border-color:#34775a
}

.transport #stopBtn {
    border-color:#7a4040
}

.transport #recordStartBtn {
    border-color:#7a6634
}

.transport #recordStopBtn {
    border-color:#7a4040
}

.transport button:disabled {
    opacity:.45;
    cursor:not-allowed
}

.metronome-toggle {
    display:flex;
    align-items:center;
    gap:5px;
    color:var(--muted);
    white-space:nowrap
}

.record-status {
    font-size:.78rem;
    color:var(--muted);
    min-width:92px
}

.record-status.armed {
    color:var(--yellow)
}

.record-status.recording {
    color:var(--red);
    font-weight:bold
}

main {
    padding:0 14px
}

.synth-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(250px,1fr));
    gap:12px
}

.synth-grid>.panel {
    padding:12px;
    min-height:190px
}

.panel h2 {
    margin:0 0 10px;
    font-size:1rem;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:#f8f9f3
}

.panel label {
    color:var(--muted);
    margin-right:8px
}

.panel select {
    background:#111719;
    color:var(--text);
    border:1px solid #576066;
    border-radius:4px;
    padding:5px 7px
}

.knobrow {
    display:flex;
    gap:8px;
    justify-content:space-between;
    flex-wrap:wrap;
    margin-top:16px
}

.knobctl {
    width:76px;
    text-align:center
}

.knobctl span {
    display:block;
    font-size:.78rem;
    color:var(--muted);
    margin-top:5px
}

.knobctl b {
    display:block;
    font-size:.75rem;
    color:var(--cyan);
    margin-top:2px
}

.knob {
    width:72px;
    accent-color:var(--cyan)
}

.osc-panel {
    border-top:3px solid var(--cyan)
}

.filter-panel {
    border-top:3px solid var(--orange)
}

.sample-panel {
    border-top:3px solid #f8f5ed
}

.env-panel {
    border-top:3px solid var(--green)
}

.mod-panel {
    border-top:3px solid var(--yellow)
}

.fx-panel {
    border-top:3px solid #c07ad8
}

.piano-roll-panel {
    margin-top:14px;
    padding:12px;
    overflow:hidden
}

.roll-head {
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:center;
    margin-bottom:10px
}

.roll-head h2 {
    margin-bottom:2px
}

.roll-head span,.legend {
    color:var(--muted);
    font-size:.82rem
}

.piano-roll {
    display:grid;
    overflow:auto;
    max-height:560px;
    background:var(--screen);
    border:1px solid #536066
}

.roll-row {
    display:grid;
    grid-template-columns:70px repeat(var(--steps),minmax(0,1fr));
    width:100%;
    min-width:0
}

.note-label {
    position:sticky;
    left:0;
    z-index:2;
    background:#1c2326;
    border-right:1px solid #4f595e;
    border-bottom:1px solid #283136;
    padding:4px 6px;
    color:#cbd4d6;
    font-size:.75rem
}

.cell {
    min-width:0;
    height:22px;
    border-right:1px solid #223036;
    border-bottom:1px solid #223036;
    background:#0e1518;
    cursor:pointer;
    position:relative
}

.cell.beat {
    border-left:1px solid #526066
}

.cell.active {
    background:linear-gradient(180deg,#2bd5e8,#187f8d)
}

.cell.active::after {
    content:"";
    position:absolute;
    left:2px;
    right:2px;
    bottom:2px;
    height:calc(var(--vel,80) * .14px);
    max-height:16px;
    background:#e8f6f8aa;
    border-radius:2px
}

.cell.playing {
    outline:2px solid var(--orange);
    outline-offset:-2px
}

.legend {
    margin-top:8px
}

@media(max-width:1150px) {
    .synth-grid {
        grid-template-columns:repeat(2,minmax(250px,1fr))
    }

    .topbar {
        position:static
    }

}

@media(max-width:700px) {
    .synth-grid {
        grid-template-columns:1fr
    }

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

    .presetbar {
        margin:8px
    }

    .app {
        padding-bottom:20px
    }

}

/* V1.1: gemeinsame Scrollfläche für Piano Roll und Velocity-Kurve */
.roll-scroller {
    overflow-x:hidden;
    overflow-y:auto;
    max-height:690px;
    background:var(--screen);
    border:1px solid #536066
}

.piano-roll {
    overflow:visible;
    max-height:none;
    border:0
}

.velocity-wrap {
    width:100%;
    min-width:0;
    background:#0a1012;
    border-top:1px solid #536066;
    position:sticky;
    bottom:0;
    z-index:5;
    box-shadow:0 -7px 18px #0008
}

.velocity-graph {
    display:block;
    width:100%;
    max-width:100%;
    touch-action:none;
    cursor:crosshair;
    user-select:none
}

.velocity-bg {
    fill:#0b1214
}

.velocity-grid {
    stroke:#223036;
    stroke-width:1
}

.velocity-grid.beat {
    stroke:#526066
}

.velocity-line {
    fill:none;
    stroke:var(--orange);
    stroke-width:2.5;
    stroke-linejoin:round;
    stroke-linecap:round
}

.velocity-point {
    fill:var(--orange);
    stroke:#ffe0bd;
    stroke-width:1
}

.velocity-label {
    fill:var(--muted);
    font-size:12px;
    font-family:Arial,Helvetica,sans-serif
}

#midiStatus {
    margin-left:10px;
    color:var(--cyan)
}

/* V1.9: Effektsektion nutzt die volle Synth-Breite. */
.fx-panel {
    grid-column:1 / -1;
    min-height:0!important
}

.fx-knobrow {
    display:grid!important;
    grid-template-columns:repeat(10,minmax(80px,1fr));
    gap:14px;
    align-items:start
}

.fx-knobrow .knobctl {
    min-width:0
}

@media(max-width:1150px) {
    .fx-knobrow {
        grid-template-columns:repeat(5,minmax(80px,1fr))
    }

}

@media(max-width:700px) {
    .fx-knobrow {
        grid-template-columns:repeat(2,minmax(100px,1fr))
    }

}

/* Anleitung */
.manual-panel {
    margin-top:16px;
    padding:18px 20px 22px;
}

.manual-panel h2 {
    margin:0 0 10px;
}

.manual-intro {
    max-width:1180px;
}

.manual-intro p, .manual-grid p {
    line-height:1.55;
}

.manual-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px 28px;
    margin-top:14px;
}

.manual-grid article {
    border-top:1px solid var(--line);
    padding-top:12px;
}

.manual-grid h3 {
    margin:0 0 7px;
    font-size:1rem;
    letter-spacing:.04em;
}

.manual-grid p {
    margin:0 0 9px;
    color:var(--muted);
}

.manual-grid strong {
    color:var(--text);
}

@media (max-width:850px) {
    .manual-grid {
        grid-template-columns:1fr;
    }

}

/* V2.0: kompakter Effektbereich + Master-Oszilloskop */
.fx-panel {
    grid-column:1 / span 3;
    min-height:0!important;
}

.scope-panel {
    grid-column:4;
    min-height:0!important;
    border-top:3px solid var(--red);
    display:flex;
    flex-direction:column;
}

.fx-knobrow {
    grid-template-columns:repeat(5,minmax(80px,1fr))!important;
    gap:12px 10px;
}

.scope-screen {
    flex:1;
    min-height:128px;
    background:#07100d;
    border:1px solid #45594f;
    border-radius:6px;
    overflow:hidden;
    box-shadow:inset 0 0 18px #000b;
}

#masterScope {
    display:block;
    width:100%;
    height:100%;
    min-height:128px;
}

.scope-caption {
    margin-top:7px;
    color:var(--muted);
    font-size:.78rem;
    text-align:center;
}

/* Anleitung besser lesbar */
.manual-intro p, .manual-grid p {
    font-size:1rem;
    line-height:1.68;
}

.manual-grid h3 {
    font-size:1.08rem;
}

@media(max-width:1150px) {
    .fx-panel {
        grid-column:1 / -1
    }

    .scope-panel {
        grid-column:1 / -1;
        min-height:190px!important
    }

    .fx-knobrow {
        grid-template-columns:repeat(5,minmax(80px,1fr))!important
    }

}

@media(max-width:700px) {
    .fx-knobrow {
        grid-template-columns:repeat(2,minmax(100px,1fr))!important
    }

    .manual-intro p,.manual-grid p {
        font-size:1rem
    }

}

/* =========================================================
   V2.1 – Space-Hintergrund & ruhigere Anleitung
   Erwartet space.jpg im Hauptverzeichnis neben index.php.
   ========================================================= */
html {
    min-height:100%;
    background:#05080b;
}

body {
    min-height:100vh;
    background:     linear-gradient(rgba(4,8,12,.46),rgba(4,8,12,.62)),     url("space.jpg") center center / cover fixed no-repeat;
    background-color:#05080b;
}

/* Dezentes Abdunkeln nur hinter der Anwendung – das Bild bleibt sichtbar. */
.app {
    position:relative;
    z-index:0;
}

/* Hauptflächen leicht transparent, damit space.jpg hier und da durchscheint. */
.panel {
    background:     linear-gradient(180deg,rgba(48,54,58,.90),rgba(27,32,35,.91));
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
    box-shadow:     inset 0 1px rgba(255,255,255,.06),     0 8px 22px rgba(0,0,0,.48);
}

.presetbar {
    background:     linear-gradient(180deg,rgba(34,40,44,.88),rgba(21,26,29,.91));
}

.topbar {
    background:rgba(5,9,11,.91);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
}

/* Einige Bereiche bewusst etwas transparenter – kleine "Weltraumfenster". */
.osc-panel, .pad-panel, .mod-panel, .scope-panel {
    background:     linear-gradient(180deg,rgba(42,48,52,.84),rgba(24,29,32,.86));
}

.piano-roll-panel {
    background:     linear-gradient(180deg,rgba(36,42,46,.91),rgba(22,27,30,.93));
}

/* Anleitung: eine ruhige, zusammenhängende Lesespalte statt zweier
   unterschiedlich hoher Spalten mit großen Leerstellen. */
.manual-panel {
    max-width:1180px;
    margin:18px auto 0;
    padding:24px 30px 30px;
    background:     linear-gradient(180deg,rgba(33,39,43,.90),rgba(20,25,28,.92));
}

.manual-panel > h2 {
    font-size:1.35rem;
    margin:0 0 12px;
    padding-bottom:10px;
    border-bottom:1px solid rgba(118,205,222,.28);
}

.manual-intro {
    max-width:none;
    margin-bottom:10px;
}

.manual-intro p {
    font-size:1.05rem;
    line-height:1.72;
    margin:0;
}

.manual-grid {
    display:block;
    margin-top:12px;
}

.manual-grid article {
    position:relative;
    padding:16px 18px 15px 20px;
    margin:0 0 12px;
    border-top:0;
    border-left:3px solid rgba(78,190,211,.55);
    border-radius:0 8px 8px 0;
    background:rgba(7,12,16,.24);
}

.manual-grid article:nth-child(even) {
    border-left-color:rgba(128,200,151,.50);
}

.manual-grid h3 {
    margin:0 0 8px;
    font-size:1.12rem;
    letter-spacing:.025em;
    color:#f4f7f8;
}

.manual-grid p {
    margin:0 0 9px;
    font-size:1.03rem;
    line-height:1.72;
    color:#c4cbce;
}

.manual-grid p:last-child {
    margin-bottom:0;
}

.manual-grid strong {
    color:#f2f5f6;
}

/* Auf kleineren Geräten bleibt das Weltraumbild performant und die
   Anleitung erhält weniger Seitenrand. */
@media(max-width:900px) {
    body {
        background-attachment:scroll;
    }

    .manual-panel {
        margin:14px;
        padding:20px 18px 24px;
    }

    .manual-grid article {
        padding:14px 14px 13px 16px;
    }

}

@media(max-width:600px) {
    .manual-panel {
        margin:10px;
        padding:17px 14px 20px;
    }

    .manual-intro p,   .manual-grid p {
        font-size:1rem;
        line-height:1.65;
    }

}

/* =========================================================
   V2.2 – Weltraumbild stärker sichtbar + Anleitungssuche
   ========================================================= */
/* Das Hintergrundbild soll durch die gesamte Bedienoberfläche hindurch
   erkennbar bleiben. Die dunkle Tönung sorgt weiterhin für Lesbarkeit. */
body {
    background:     linear-gradient(rgba(2,6,10,.22),rgba(2,6,10,.34)),     url("space.jpg") center center / cover fixed no-repeat;
}

.topbar {
    background:rgba(5,9,12,.72);
}

.panel, .presetbar, .osc-panel, .filter-panel, .env-panel, .pad-panel, .mod-panel, .fx-panel, .scope-panel, .piano-roll-panel, .manual-panel {
    background:     linear-gradient(180deg,rgba(35,42,47,.70),rgba(17,23,27,.74));
    backdrop-filter:blur(1.5px);
    -webkit-backdrop-filter:blur(1.5px);
}

.presetbar {
    background:     linear-gradient(180deg,rgba(26,33,38,.68),rgba(14,20,24,.72));
}

.manual-panel {
    background:     linear-gradient(180deg,rgba(27,34,39,.72),rgba(14,20,24,.76));
}

.manual-grid article {
    background:rgba(5,10,14,.30);
}

/* Suche in der Anleitung */
.manual-search {
    margin:14px 0 18px;
    padding:14px 16px;
    border:1px solid rgba(103,190,207,.28);
    border-radius:8px;
    background:rgba(4,10,14,.34);
}

.manual-search > label {
    display:block;
    margin-bottom:7px;
    color:#eef4f5;
    font-weight:700;
    font-size:.98rem;
}

.manual-search-row {
    display:flex;
    gap:8px;
}

#manualSearch {
    flex:1;
    min-width:0;
    padding:10px 12px;
    border:1px solid #56656c;
    border-radius:6px;
    background:rgba(7,13,17,.76);
    color:var(--text);
    outline:none;
}

#manualSearch:focus {
    border-color:var(--cyan);
    box-shadow:0 0 0 2px rgba(43,213,232,.12);
}

#manualSearchClear {
    white-space:nowrap;
}

.manual-search-status {
    min-height:1.25em;
    margin-top:7px;
    color:var(--muted);
    font-size:.88rem;
}

.manual-grid article.manual-hidden {
    display:none;
}

.manual-grid mark {
    padding:0 .08em;
    border-radius:2px;
    background:#e4bd4f;
    color:#111;
}

@media(max-width:600px) {
    .manual-search-row {
        align-items:stretch;
    }

}

/* =========================================================
   V2.3 – Audio-/Rendering-Optimierung
   ========================================================= */
/*
  Die Panels bleiben transparent. Der grafisch teure
  Hintergrund-Blur wird jedoch entfernt, weil er beim
  Bewegen der Maus zusätzliche Compositing-Arbeit auslösen
  kann und dadurch die Audio-Wiedergabe ins Stocken geraten
  kann.
*/
.panel, .presetbar, .osc-panel, .filter-panel, .env-panel, .pad-panel, .mod-panel, .fx-panel, .scope-panel, .piano-roll-panel, .manual-panel, .topbar {
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}

/*
  Das Weltraumbild liegt auf einer eigenen festen Ebene.
  So bleibt es optisch unverändert sichtbar, ohne dass
  "background-attachment: fixed" bei UI-Aktivität große
  Flächen neu rendern muss.
*/
body {
    position:relative;
    isolation:isolate;
    background:#05080b;
}

body::before {
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:     linear-gradient(       rgba(2,6,10,.22),       rgba(2,6,10,.34)     ),     url("space.jpg")       center center /       cover       no-repeat;
}

html {
    background:#05080b;
}

#masterScope {
    contain:strict;
}

/* =========================================================
   V2.4 – Oszilloskop Ein/Aus
   ========================================================= */
.scope-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
}

.scope-head h2 {
    margin:0;
}

.scope-toggle {
    display:flex;
    align-items:center;
    gap:6px;
    margin:0;
    color:var(--muted);
    font-size:.78rem;
    white-space:nowrap;
    cursor:pointer;
}

.scope-toggle input {
    accent-color:var(--green);
    cursor:pointer;
}

.scope-screen {
    position:relative;
}

.scope-off-message {
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#7f9489;
    font-size:.82rem;
    letter-spacing:.04em;
    pointer-events:none;
}

.scope-off-message[hidden] {
    display:none;
}

/* =========================================================
   V2.5 – direkte Zahlenwerte für alle Soundparameter
   ========================================================= */
.value-editor {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin-top: 3px;
}

.knobctl .value-editor > span {
    display: inline;
    margin: 0;
    color: var(--cyan);
    font-size: .75rem;
}

.param-value {
    width: 52px;
    padding: 2px 3px;
    border: 1px solid #596166;
    border-radius: 4px;
    background: rgba(8, 14, 17, .78);
    color: var(--cyan);
    font-size: .75rem;
    font-weight: 700;
    text-align: right;
}

.param-value:focus {
    border-color: var(--cyan);
    outline: none;
    box-shadow: 0 0 0 2px rgba(38, 199, 217, .12);
}


/* =========================================================
   V2.7 – Swing & Gate in der Piano Roll
   ========================================================= */

.roll-param {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 2px;
    white-space: nowrap;
}

.roll-param > span:first-child {
    color: var(--muted);
}

.roll-param input[type="range"] {
    width: 72px;
    accent-color: var(--cyan);
}

.roll-param input[type="number"] {
    width: 48px;
    padding: 4px 3px;
    border: 1px solid #596166;
    border-radius: 4px;
    background: rgba(8, 14, 17, .78);
    color: var(--cyan);
    font-size: .78rem;
    font-weight: 700;
    text-align: right;
}

.roll-param input[type="number"]:focus {
    border-color: var(--cyan);
    outline: none;
    box-shadow: 0 0 0 2px rgba(38, 199, 217, .12);
}

.roll-param > span:last-child {
    color: var(--cyan);
    font-size: .78rem;
}

@media(max-width:700px) {
    .roll-param {
        width: 100%;
    }

    .roll-param input[type="range"] {
        flex: 1;
        min-width: 90px;
    }
}