/* 303 layout v3 — the OUTER card never scrolls. Only the 16-step matrix scrolls. */
.workspace.shell{min-width:0!important;overflow:visible!important}
.pattern-card-wrap{width:100%!important;max-width:1080px!important;min-width:0!important;margin:0 auto!important;padding:0!important;overflow:visible!important}
.pattern-card-wrap>#patternSheet,
#patternSheet{width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;overflow:hidden!important;border-radius:17px!important}

/* ONLY horizontal scroller in the 303 section */
#patternSheet .sequence-table-wrap{width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-x:contain!important;-webkit-overflow-scrolling:touch!important;scrollbar-color:#45454c transparent!important}
#patternSheet .sequence-table{width:1080px!important;min-width:1080px!important;table-layout:fixed!important}
#patternSheet .sequence-table .row-label{position:sticky!important;left:0!important;z-index:8!important;box-shadow:1px 0 0 #2e2e34!important}
#patternSheet .sequence-table thead .row-label{z-index:12!important;background:#17171b!important}
#patternSheet .sequence-table tbody .row-label{background:#111114!important}
#patternSheet .sequence-table tbody tr:nth-child(even) .row-label{background:#151518!important}

/* All other 303 parts are responsive and fixed in place */
#patternSheet .sheet-header,
#patternSheet .sheet-meta,
#patternSheet .hardware-strip,
#patternSheet .notes-panel{width:100%!important;max-width:100%!important;min-width:0!important}

/* Separate fixed control card: actions + scope/MIDI */
.pattern-control-panel{width:100%!important;max-width:1080px!important;min-width:0!important;margin:12px auto 0!important;overflow:hidden!important;border:1px solid #2d2d33!important;border-radius:17px!important;background:#0f0f12!important}
.pattern-control-panel .pattern-actions{position:relative!important;inset:auto!important;width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;padding:14px!important;box-sizing:border-box!important;border:0!important;border-bottom:1px solid #29292e!important;background:#121215!important;display:block!important}

/* STRICT 2x2 ACTION GRID. This overrides the old mobile rule that made Generate span both columns. */
.pattern-control-panel .pattern-actions .toolbar-group,
.pattern-control-panel .pattern-actions .pattern-action-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-flow:row!important;grid-auto-rows:minmax(48px,auto)!important;gap:8px!important;width:100%!important;max-width:100%!important;min-width:0!important}
.pattern-control-panel .pattern-actions .toolbar-group>.tool-button,
.pattern-control-panel .pattern-actions .pattern-action-grid>.tool-button,
.pattern-control-panel #generateButton,
.pattern-control-panel #playButton,
.pattern-control-panel #downloadButton,
.pattern-control-panel #clearButton{grid-column:auto!important;grid-row:auto!important;width:100%!important;max-width:100%!important;min-width:0!important;min-height:48px!important;margin:0!important;padding:0 12px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;border:1px solid #34343a!important;border-radius:9px!important;background:#1a1a1e!important;color:#e9e9eb!important;box-shadow:none!important;font:800 .61rem/1 JetBrains Mono,monospace!important;text-align:center!important;white-space:normal!important;overflow:hidden!important}
.pattern-control-panel .pattern-actions .tool-button svg{display:none!important}
.pattern-control-panel .pattern-actions .tool-button-acid,
.pattern-control-panel #generateButton{border-color:#5b681b!important;background:#181c0b!important;color:#ddff37!important}
.pattern-control-panel .pattern-actions .tool-button-play,
.pattern-control-panel #playButton{border-color:#34343a!important;background:#1a1a1e!important;color:#e9e9eb!important}
.pattern-control-panel .pattern-actions .tool-button-clear,
.pattern-control-panel #clearButton{border-color:#492522!important;background:#181112!important;color:#ff6b64!important}
.pattern-control-panel .pattern-actions .status-led{flex:0 0 7px;width:7px;height:7px}
.pattern-control-panel .sheet-io{width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;border:0!important;background:#0b0b0d!important;overflow:hidden!important}
.pattern-control-panel .mini-analyzer,.pattern-control-panel .midi-compact{min-width:0!important}

/* Rhythm voice identity now lives in the left channel card; the middle VOICE selector is hidden. */
#drums .voice-selector-hidden{display:none!important}
#drums .drum-voice.drum-voice-compact{grid-template-columns:minmax(132px,1.25fr) minmax(105px,1fr)!important;gap:12px!important}
#drums .drum-voice.drum-voice-compact .drum-voice-id{height:50px!important;padding:8px 10px!important}
#drums .drum-voice.drum-voice-compact .drum-voice-id b{font-size:.68rem!important;letter-spacing:.015em!important}
#drums .drum-voice.drum-voice-compact .drum-voice-id span{font-size:.51rem!important}
#drums .drum-voice.drum-voice-compact label:has([data-level]){min-width:0!important;width:100%!important}

/* Shortcut guide */
.shortcuts-open{overflow:hidden}
.shortcut-overlay{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,.72);backdrop-filter:blur(10px)}
.shortcut-overlay.open{display:flex}
.shortcut-dialog{width:min(100%,520px);border:1px solid #303038;border-radius:18px;background:linear-gradient(180deg,#151518,#0d0d10);box-shadow:0 36px 110px rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.035);overflow:hidden}
.shortcut-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:20px 22px 16px;border-bottom:1px solid #29292f;background:radial-gradient(circle at 85% 0,rgba(221,255,55,.08),transparent 40%)}
.shortcut-head span{display:block;margin-bottom:7px;color:#ddff37;font:800 .55rem/1 JetBrains Mono,monospace;letter-spacing:.13em}
.shortcut-head h2{margin:0;color:#f3f3ef;font-size:1.22rem;letter-spacing:-.025em}
.shortcut-x{width:34px;height:34px;border:1px solid #33333a;border-radius:8px;background:#19191d;color:#8a8a92;font-size:1.15rem;cursor:pointer}
.shortcut-x:hover{color:#fff;background:#222227}
.shortcut-intro{margin:0;padding:16px 22px;color:#85858d;font-size:.76rem;line-height:1.6;border-bottom:1px solid #25252b}
.shortcut-list{padding:8px 22px}
.shortcut-list>div{min-height:52px;display:flex;align-items:center;gap:8px;border-bottom:1px solid #232329;color:#b4b4ba;font-size:.74rem}
.shortcut-list>div:last-child{border-bottom:0}
.shortcut-list>div span{margin-left:auto;text-align:right;color:#9b9ba2}
.shortcut-list b{color:#55555c;font-size:.68rem}
.shortcut-list kbd{min-width:35px;height:27px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #393940;border-bottom-color:#202025;border-radius:6px;background:#1c1c20;color:#efefeb;box-shadow:inset 0 -2px #101012;font:800 .57rem/1 JetBrains Mono,monospace;white-space:nowrap}
.shortcut-done{width:calc(100% - 44px);min-height:44px;margin:8px 22px 20px;border:1px solid #62721c;border-radius:9px;background:#1b200b;color:#ddff37;font:800 .66rem/1 JetBrains Mono,monospace;cursor:pointer}
.shortcut-done:hover{background:#22290d}
.footer-links [data-shortcuts-link]{color:#ddff37}

@media(max-width:760px){
  .pattern-card-wrap,#patternSheet,.pattern-control-panel{width:100%!important;max-width:100%!important;min-width:0!important}

  #patternSheet .sheet-header{min-height:auto!important;padding:15px 16px!important;align-items:flex-start!important;flex-direction:column!important;gap:8px!important}
  #patternSheet .sheet-model{font-size:.52rem!important}

  #patternSheet .sheet-meta{grid-template-columns:1fr!important}
  #patternSheet .memory-panel{border-left:0!important;border-top:1px solid #303036!important}
  #patternSheet .meta-fields label{grid-template-columns:78px 1fr!important;min-height:52px!important;padding:0 14px!important}

  #patternSheet .hardware-strip{grid-template-columns:1fr 1fr!important;min-height:0!important}
  #patternSheet .waveform-module,#patternSheet .tempo-module{min-height:146px!important;padding:12px 8px!important}
  #patternSheet .tempo-module{border-right:0!important}
  #patternSheet .synth-controls{grid-column:1/-1!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;padding:14px 4px 16px!important;border-top:1px solid #303036!important}
  #patternSheet .knob{gap:5px!important}
  #patternSheet .knob + .knob::before{top:20px!important;bottom:20px!important}
  #patternSheet .knob-title{font-size:.43rem!important;letter-spacing:.035em!important;white-space:normal!important;text-align:center!important;line-height:1.15!important}
  #patternSheet .knob-control,#patternSheet .tempo-module .knob-control{width:54px!important;height:54px!important}
  #patternSheet .knob-value{font-size:.47rem!important}
  #patternSheet .wave-button{width:76px!important;height:44px!important}
  #patternSheet .notes-panel{padding:15px!important}
  #patternSheet .notes-panel textarea{min-height:105px!important}

  .pattern-control-panel{margin-top:10px!important;border-radius:15px!important}
  .pattern-control-panel .pattern-actions{padding:10px!important}
  .pattern-control-panel .pattern-actions .toolbar-group,
  .pattern-control-panel .pattern-actions .pattern-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:minmax(46px,auto)!important;gap:7px!important}
  .pattern-control-panel .pattern-actions .tool-button,
  .pattern-control-panel #generateButton,
  .pattern-control-panel #playButton,
  .pattern-control-panel #downloadButton,
  .pattern-control-panel #clearButton{grid-column:auto!important;grid-row:auto!important;min-height:46px!important;padding:0 8px!important;font-size:.56rem!important}
  .pattern-control-panel .sheet-io{grid-template-columns:1fr!important}
  .pattern-control-panel .mini-analyzer{border-right:0!important;border-bottom:1px solid #303036!important}
  .pattern-control-panel .midi-compact-grid{grid-template-columns:1fr!important}

  .shortcut-overlay{align-items:flex-end;padding:10px}
  .shortcut-dialog{border-radius:16px}
  .shortcut-head{padding:17px 17px 14px}
  .shortcut-intro{padding:14px 17px}
  .shortcut-list{padding:5px 17px}
  .shortcut-list>div{min-height:48px;font-size:.68rem}
  .shortcut-list>div span{max-width:48%}
  .shortcut-done{width:calc(100% - 34px);margin:8px 17px 17px}
}

@media(min-width:1120px){
  #patternSheet .sequence-table{width:100%!important;min-width:100%!important}
  #patternSheet .sequence-table-wrap{overflow-x:visible!important}
}

/* 303 hardware refinement */
#patternSheet .notes-panel{display:none!important}
#patternSheet .synth-controls{grid-template-columns:repeat(6,minmax(0,1fr))!important}
#patternSheet .tune-knob .knob-value{font-family:JetBrains Mono,monospace!important;letter-spacing:.02em!important}
#patternSheet .tune-knob .knob-title{color:#ddff37!important}

@media(max-width:760px){
  #patternSheet .waveform-module{display:grid!important;grid-template-rows:auto auto!important;align-content:center!important;justify-items:center!important;gap:10px!important}
  #patternSheet .waveform-module>.control-label{grid-row:1!important}
  #patternSheet .wave-selector{grid-row:2!important;width:100%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;padding:0 4px!important}
  #patternSheet .wave-button{width:100%!important;min-width:0!important;height:46px!important;padding:0 7px!important}
  #patternSheet .wave-button svg{width:23px!important}

  #patternSheet .tempo-module{display:grid!important;grid-template-columns:minmax(0,1fr) 62px!important;grid-template-rows:auto auto!important;align-content:center!important;align-items:center!important;column-gap:7px!important;row-gap:10px!important;padding:12px 8px!important}
  #patternSheet .tempo-module>.control-label{grid-column:1/-1!important;grid-row:1!important;text-align:center!important}
  #patternSheet .tempo-module>.seven-display{grid-column:1!important;grid-row:2!important;width:100%!important;max-width:112px!important;justify-self:end!important}
  #patternSheet .tempo-module>#tempoKnob{grid-column:2!important;grid-row:2!important;width:62px!important;display:grid!important;place-items:center!important}
  #patternSheet .tempo-module>#tempoKnob .knob{gap:3px!important}
  #patternSheet .tempo-module>#tempoKnob .knob-control{width:54px!important;height:54px!important}

  #patternSheet .synth-controls{grid-template-columns:repeat(3,minmax(0,1fr))!important;row-gap:13px!important;padding:14px 8px 16px!important}
  #patternSheet .synth-controls .knob + .knob::before{display:none!important}
  #patternSheet .synth-controls .knob-control{width:58px!important;height:58px!important}
  #patternSheet .synth-controls .knob-title{font-size:.46rem!important;min-height:1.1rem!important;display:flex!important;align-items:flex-end!important;justify-content:center!important}
}