:root {
  color-scheme: dark;
  --bg:#08090c; --card:#11131a; --line:#292d38;
  --text:#f4f6fb; --muted:#9ca3b1; --green:#b7ff4a;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 50% -10%,#222832,#08090c 45%);color:var(--text);font:14px system-ui,-apple-system,Segoe UI,sans-serif}
.wrap{width:min(1200px,calc(100% - 28px));margin:auto;padding:28px 0 70px}
.site-nav{display:flex;justify-content:center;gap:8px;margin-bottom:28px;flex-wrap:wrap}
.site-nav a{color:var(--muted);text-decoration:none;border:1px solid var(--line);padding:9px 14px;border-radius:999px}
.site-nav a.active,.site-nav a:hover{color:var(--text);background:#171a22;border-color:#555c6c}
header{text-align:center;margin-bottom:25px}
.logo{font-weight:850;margin-bottom:18px}
h1{font-size:clamp(32px,5vw,55px);line-height:1.03;letter-spacing:-.04em;margin:0 auto 14px;max-width:850px}
header p{color:var(--muted)}
.card{background:#11131add;border:1px solid var(--line);border-radius:18px;padding:18px;margin-bottom:14px;box-shadow:0 18px 60px #0005}
.toolbar{display:flex;align-items:end;gap:10px;flex-wrap:wrap}
.field{display:flex;flex-direction:column;gap:7px;min-width:230px}
.field.small{min-width:100px;width:110px}
label{font-size:11px;text-transform:uppercase;font-weight:800;color:var(--muted)}
select,input{width:100%;background:#090b0f;color:var(--text);border:1px solid var(--line);border-radius:10px;padding:11px;font:inherit}
button{border:0;border-radius:10px;padding:11px 15px;background:var(--green);color:#090c06;font-weight:850;cursor:pointer}
button.secondary{background:#191c24;color:var(--text);border:1px solid var(--line)}
button:disabled{opacity:.4;cursor:not-allowed}
.info-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.info-row div{background:#171a22;border-radius:11px;padding:11px}
.info-row span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase}
.info-row b{display:block;margin-top:4px}
.piano-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:14px}
.piano-head small{display:block;color:var(--muted);margin-top:4px}
.zoom{display:flex;align-items:center;gap:6px;white-space:nowrap}
.zoom button{padding:7px 11px}
.roll-wrap{display:grid;grid-template-columns:65px 1fr;max-height:650px;overflow:auto;border:1px solid var(--line);border-radius:12px}
.keys{position:sticky;left:0;z-index:4;background:#0d0f14}
.key{height:28px;padding:6px 7px;border-bottom:1px solid #20242d;font-size:11px;text-align:right;color:var(--muted)}
.key.black{background:#101218;color:#ddd}
.roll{display:grid;grid-template-columns:repeat(16,64px);position:relative;background:#0b0d12}
.cell{height:28px;border-right:1px solid #20242d;border-bottom:1px solid #20242d;cursor:pointer;position:relative}
.cell.beat{background:#10131a}
.cell.bar{border-right:2px solid #414755}
.cell:hover{background:#171b24}
.cell.active{background:var(--green);box-shadow:inset 0 0 0 1px #eaffbf}
.cell.active:hover{background:#d0ff7b}
.muted{color:var(--muted)}
.help li{margin:7px 0}
@media(max-width:700px){.info-row{grid-template-columns:repeat(2,1fr)}.piano-head{align-items:flex-start;flex-direction:column}}

.hidden { display: none !important; }
.paste-panel { margin-top: 0; }
.paste-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 12px;
}
.paste-head small {
  display: block;
  color: var(--muted);
  margin-top: 4px;
}
#hossTextInput {
  width: 100%;
  min-height: 230px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  line-height: 1.5;
}
.paste-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.playback-card{display:flex;align-items:center;gap:22px;padding:12px 16px}
.playback-left{display:flex;align-items:center;gap:9px;min-width:110px;font-weight:700}
.playback-dot{width:9px;height:9px;border-radius:50%;background:#777}
.playback-dot.playing{background:#42d97b;box-shadow:0 0 0 3px rgba(66,217,123,.14)}
.playback-next{flex:1;min-width:0}
.playback-next span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;opacity:.58}
.playback-next strong{display:block;font-size:16px;margin-top:2px}
.playback-time{font-variant-numeric:tabular-nums;opacity:.72;white-space:nowrap}
#roll{position:relative}
.playhead{position:absolute;z-index:50;top:0;bottom:0;left:0;width:2px;pointer-events:none;background:#ff4d67;box-shadow:0 0 7px rgba(255,77,103,.8)}
.playhead::before{content:"";position:absolute;top:0;left:-5px;width:12px;height:8px;border-radius:2px;background:#ff4d67}

.roll-wrap{
  overflow-x:auto;
  overflow-y:auto;
  position:relative;
  max-height:70vh;
}
#roll{
  min-width:max-content;
}
#pause{
  min-width:96px;
}

.zoom-controls{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:10px;
}
.zoom-btn{
  min-width:30px;
  height:30px;
  padding:0 8px;
  font-size:18px;
  line-height:1;
}
#zoomLabel{
  min-width:48px;
  text-align:center;
  font-variant-numeric:tabular-nums;
  opacity:.75;
}

.roll-wrap{overflow-x:auto!important;overflow-y:auto!important;}

.zoom{display:flex;align-items:center;gap:6px;white-space:nowrap}
.zoom button{min-width:32px;padding:7px 11px}
#zoomValue{min-width:52px;text-align:center;font-variant-numeric:tabular-nums}

/* V4 editor zoom + scrolling */
.roll-wrap {
  overflow-x: auto !important;
  overflow-y: auto !important;
  max-height: 650px;
}
.zoom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
}
.zoom button {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  font-size: 18px;
}
#zoomValue {
  min-width: 52px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* V5 2D editor zoom */
.zoom{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:10px;
  vertical-align:middle;
}
.zoom button{
  min-width:32px;
  height:30px;
  padding:0 9px;
  font-size:18px;
  line-height:1;
}
#zoomValue{
  min-width:100px;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.roll-wrap{
  overflow-x:auto !important;
  overflow-y:auto !important;
  max-height:70vh;
}

/* Final stable 2D zoom */
.roll-wrap {
  overflow-x: auto !important;
  overflow-y: auto !important;
  max-height: 70vh !important;
}

/* Keep pitch labels aligned with the zoomed cells */
#keys {
  overflow: hidden;
}
#keys > * {
  box-sizing: border-box;
}
.playhead {
  cursor: ew-resize;
  pointer-events: auto;
}

/* The playhead is draggable; everything else in the roll remains a normal
   piano-roll editing surface. */
#roll .cell {
  position: relative;
  z-index: 1;
}
#roll .playhead {
  z-index: 100;
  pointer-events: auto;
  cursor: ew-resize;
}

/* Dynamic timeline */
.roll-wrap {
  overflow-x: auto !important;
  overflow-y: auto !important;
}
.roll {
  width: max-content;
  min-width: 100%;
}