:root{
  --paper:#F4EAD7; --ink:#141210; --mute:#7a7266; --line:#d9ccb3; --rec:#b4381e;
  --cell:#e9dcc2; --hit:#141210;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink)}
body{font-family:'Space Mono',ui-monospace,monospace;font-size:13px;line-height:1.4;padding:20px 24px 40px;max-width:1280px;margin:0 auto}
button,select,input{font:inherit;color:inherit}
h1{font-family:'Stick No Bills',sans-serif;font-weight:700;font-size:64px;line-height:.9;margin:0;letter-spacing:0}
.top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:12px}
.brand .sub{display:block;color:var(--mute);margin-top:4px}
.transport{display:flex;gap:8px;flex-wrap:wrap}
.tbtn{font-family:'Stick No Bills',sans-serif;font-weight:700;font-size:24px;background:var(--ink);color:var(--paper);border:0;padding:6px 16px 4px;cursor:pointer;min-width:96px}
.tbtn:hover{opacity:.85}
.tbtn.on{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 3px var(--ink)}
.tbtn.rec.on{background:var(--rec);color:var(--paper);box-shadow:none}
.tbtn.rec.armed{animation:blink .5s steps(2) infinite}
@keyframes blink{50%{background:var(--rec)}}

main{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:24px;margin-top:20px}
.stage{grid-row:span 1}
.pulse-wrap{display:flex;flex-direction:column;align-items:center;gap:12px}
.pulse{width:220px;height:220px;border-radius:50%;border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;will-change:transform;background:transparent}
.pulse span{font-family:'Stick No Bills',sans-serif;font-weight:700;font-size:80px;line-height:1}
.pulse.down{background:var(--ink);color:var(--paper)}
.pulse.recording{border-color:var(--rec)}
.beatdots{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:220px}
.beatdots .bar{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.beatdots i{display:block;height:6px;background:var(--line)}
.beatdots i.on{background:var(--ink)}
.barinfo{color:var(--mute);min-height:1.4em;text-align:center}
.barinfo .r{color:var(--rec);font-weight:700}

.right{display:flex;flex-direction:column;gap:18px}
.settings{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:flex-end;border-top:1px solid var(--line);padding-top:14px}
.settings label{display:flex;flex-direction:column;gap:3px;color:var(--mute);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.settings label.wide{flex-direction:row;align-items:center;gap:8px;min-width:200px}
.settings label.wide input{flex:1}
.settings label.check{flex-direction:row;align-items:center;gap:8px;text-transform:none;letter-spacing:0;color:var(--ink);font-size:13px}
.settings select,.settings input[type=number]{background:transparent;border:1px solid var(--ink);padding:3px 4px;color:var(--ink);text-transform:none}
input[type=range]{accent-color:var(--ink)}
output{color:var(--ink);min-width:56px;text-transform:none}

.pads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-content:start}
.pad{position:relative;background:var(--ink);color:var(--paper);padding:10px 10px 8px;min-height:132px;display:flex;flex-direction:column;justify-content:space-between;user-select:none;cursor:pointer;touch-action:manipulation;transition:background .08s}
.pad select.type{font-family:'Stick No Bills',sans-serif;font-weight:700;font-size:32px;line-height:1;background:transparent;color:inherit;border:0;padding:0 18px 0 0;margin:0;width:calc(100% - 40px);cursor:pointer;-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(-45deg,transparent 50%,currentColor 50%);background-position:calc(100% - 9px) 55%,calc(100% - 4px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.pad .rm{position:absolute;z-index:2;bottom:8px;right:10px;background:transparent;border:0;color:inherit;opacity:.5;cursor:pointer;font-size:16px;padding:0;line-height:1}
.pad .rm:hover{opacity:1}
.pad .key{pointer-events:none}
.pad.add{background:transparent;color:var(--ink);border:2px dashed var(--ink);align-items:center;justify-content:center;gap:2px;font-family:'Space Mono',monospace}
.pad.add .plus{font-family:'Stick No Bills',sans-serif;font-weight:700;font-size:48px;line-height:.9}
.pad.add .max{color:var(--mute);font-size:11px}
.pad.add:hover:not(:disabled){background:var(--ink);color:var(--paper)}
.pad.add:disabled{border-color:var(--line);cursor:default}
.kitsel{background:transparent;border:1px solid var(--ink);color:var(--ink);font-size:12px;padding:1px 2px;margin-left:4px}
.pad .key{position:absolute;top:8px;right:10px;font-family:'Stick No Bills',sans-serif;font-size:22px;opacity:.55}
.pad .ctl{display:flex;gap:4px;align-items:center;font-size:11px}
.pad select{flex:1;min-width:0;background:transparent;color:var(--paper);border:1px solid rgba(244,234,215,.35);padding:2px;font-size:11px}
.pad .tune{display:flex;align-items:center;gap:2px}
.pad .tune button{background:transparent;border:1px solid rgba(244,234,215,.35);color:var(--paper);width:20px;height:20px;padding:0;cursor:pointer;line-height:1}
.pad .tune .tv{min-width:26px;text-align:center}
.pad .tune .tl{font-size:10px;opacity:.6;margin-right:2px;text-transform:uppercase;letter-spacing:.04em}
.pad .row2{display:flex;justify-content:flex-start;gap:12px;align-items:center;font-size:11px;opacity:.8;margin-top:4px;padding-right:24px}
.pad .row2 label{display:flex;align-items:center;gap:4px;cursor:pointer}
.pad.flash{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 3px var(--ink)}
.pad.flash select,.pad.flash .tune button{color:var(--ink);border-color:var(--ink)}
.pad.locked{background:repeating-linear-gradient(-45deg,var(--paper) 0 6px,var(--line) 6px 12px);color:var(--mute);box-shadow:inset 0 0 0 2px var(--line)}
.pad.locked select,.pad.locked .tune button{color:var(--mute);border-color:var(--line)}
.pad.locked .row2 span:first-child::after{content:' · fehlt'}
.pad.shake{animation:shake .25s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

main>*{min-width:0}
.seq{grid-column:1 / -1}
.seq-head{display:flex;justify-content:space-between;color:var(--mute);margin-bottom:6px}
.grid-wrap{position:relative;overflow-x:auto}
.grid{display:grid;grid-template-columns:270px repeat(64,minmax(12px,1fr));gap:2px 1px;min-width:1000px}
.grid .rl{font-family:'Stick No Bills',sans-serif;font-weight:700;font-size:17px;white-space:nowrap;overflow:hidden;display:flex;align-items:center;justify-content:space-between;padding-right:6px;line-height:1}
.grid .rl button{background:transparent;border:0;color:var(--mute);cursor:pointer;font-size:14px;padding:0 2px}
.grid .rl button:hover{color:var(--rec)}
.grid .c{height:22px;background:var(--cell);cursor:pointer;position:relative}
.grid .c.b4{margin-left:2px}
.grid .c.bar{margin-left:6px}
.grid .c.q{background:#e2d3b5}
.grid .c.on{background:var(--hit)}
.grid .c.off{opacity:.45}
.grid .c.fresh{background:var(--rec)}
.grid .rl.guide{color:var(--mute)}
.playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--rec);pointer-events:none;left:0;display:none}

.out{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;border-top:2px solid var(--ink);padding-top:14px}
.out .lbl{font-family:'Stick No Bills',sans-serif;font-weight:700;font-size:22px;margin-right:6px}
.collect,.export{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sbtn{background:transparent;border:1.5px solid var(--ink);padding:5px 10px;cursor:pointer}
.sbtn:hover{background:var(--ink);color:var(--paper)}
.sbtn.strong{background:var(--ink);color:var(--paper)}
.sbtn.file{position:relative;overflow:hidden}
.sbtn.file input{position:absolute;inset:0;opacity:0;cursor:pointer}
.msg{flex-basis:100%;min-height:1.4em;color:var(--mute)}
.keys{grid-column:1 / -1;color:var(--mute);font-size:12px}
.keys b{color:var(--ink);font-weight:700}

@media (max-width:860px){
  body{padding:16px}
  main{grid-template-columns:1fr}
  .pads{grid-template-columns:repeat(2,minmax(0,1fr))}
  h1{font-size:48px}
}

/* Spur-Zeilen im Pattern */
.grid .rl{gap:4px;justify-content:flex-start;padding-right:4px}
.grid .rl .k{font-size:15px;color:var(--mute);width:12px;flex:none}
.grid .rl .rtype{flex:1;min-width:0;font-family:'Stick No Bills',sans-serif;font-weight:700;font-size:16px;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--ink);padding:0;cursor:pointer}
.grid .rl button{flex:none}
.grid .rl .rrm{font-size:15px}
.grid .addrow{grid-column:1 / -1;margin-top:6px;height:30px;background:transparent;border:1.5px dashed var(--ink);color:var(--ink);cursor:pointer;font-family:'Stick No Bills',sans-serif;font-weight:700;font-size:18px;text-align:left;padding:0 10px}
.grid .addrow span{font-family:'Space Mono',monospace;font-weight:400;font-size:11px;color:var(--mute);margin-left:8px}
.grid .addrow:hover{background:var(--ink);color:var(--paper)}
.grid .addrow:hover span{color:var(--paper)}

.grid .rl .lbl{flex:0 0 92px;overflow:hidden;text-overflow:ellipsis}
.grid .rl .rtype{flex:0 0 92px}
.grid .rl .rsnd{flex:1;min-width:0;font-size:11px;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--ink);padding:0;cursor:pointer;font-family:'Space Mono',monospace}
.grid .rl .k{cursor:pointer;width:14px}
.grid .rl .rrm-sp{width:14px;flex:none}
.grid .rl.extra{background:linear-gradient(90deg,var(--cell),transparent)}
.grid .rl.flash .k{color:var(--rec)}
.grid .rl.locked{opacity:.45}
.grid .rl.shake{animation:shake .25s}
.pad .name{font-family:'Stick No Bills',sans-serif;font-weight:700;font-size:32px;line-height:.95;padding-right:24px}

/* Aufklapplisten: immer lesbar (macOS zeichnet sie nativ – Schrift und Farbschema kommen vom Feld) */
select{color-scheme:light}
.pad select{color-scheme:dark}
select option,select optgroup{font-family:'Space Mono',ui-monospace,monospace;font-size:13px;font-weight:400;line-height:1.4;background:#fff;color:#141210}
.pad select option{background:#1d1b19;color:#F4EAD7}
select option:disabled{color:#9a9183}

/* Feed: Beats der anderen */
.feed{grid-column:1 / -1;border-top:2px solid var(--ink);padding-top:14px}
.feed[hidden]{display:none}
.feed-head{display:flex;align-items:center;gap:16px;margin-bottom:8px}
.feed .lbl{font-family:'Stick No Bills',sans-serif;font-weight:700;font-size:22px}
#feedList{list-style:none;margin:0 0 10px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px 18px}
#feedList li{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:5px 0}
#feedList li.empty{color:var(--mute);border:0}
.fplay{background:var(--ink);color:var(--paper);border:0;width:28px;height:28px;cursor:pointer;flex:none}
.fplay:hover{background:var(--rec)}
.fid{font-weight:700}
.fmeta{color:var(--mute);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.fwhen{color:var(--mute);font-size:11px;white-space:nowrap}