/* ======================================
   Variables
   ====================================== */

:root{
  --font-ui:Inter,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  --app-min-width:320px;

  --bg-primary:#0d0d0d;
  --bg-secondary:#181818;
  --bg-panel:#222326;
  --bg-control:#34363a;
  --bg-control-hover:#484b50;
  --bg-step:#303236;
  --bg-step-alt:#3b3e43;
  --bg-disabled:#151515;
  --bg-rail:#1a1a1a;

  --text:#fff;
  --text-muted:#a2a2a2;
  --text-soft:#ddd;
  --text-dark:#111;

  --accent:#e6aa06;
  --accent-strong:yellow;
  --accent-hover:#cc8800;
  --success:#4bbd00;
  --cyan:#00bfff;
  --danger:#d32f2f;
  --danger-hover:#b71c1c;
  --danger-active:#ff5252;

  --bank-b:#00bfff;
  --bank-c:#66bb6a;
  --bank-d:#ef5350;

  --border:#494b50;
  --border-dark:#333;
  --radius:8px;
  --radius-panel:12px;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --shadow-panel:0 1px 0 rgba(255,255,255,.035), 0 8px 20px rgba(0,0,0,.16);
  --transition:180ms ease;
  --control-height:36px;

  --spacing:10px;
  --step-size:36px;
  --track-name-width:100px;
  --track-control-width:76px;

  --fader-rod:#1a1a1a;
  --fader-knob:#333;
  --fader-height:125px;
  --sequencer-frame-width:1524px;
  --track-editor-width:852px;
}

/* ======================================
   Reset
   ====================================== */

*{
  box-sizing:border-box;
}

html{
  width:100%;
  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-width:none;
}

html::-webkit-scrollbar{
  width:0;
}

html,
body,
button,
input,
select,
textarea{
  font-family:var(--font-ui);
  letter-spacing:0;
}

button,
input{
  font:inherit;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible{
  outline:2px solid var(--accent-strong);
  outline-offset:3px;
}

/* ======================================
   Body
   ====================================== */

body{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  width:100%;
  min-width:0;
  min-height:100dvh;
  margin:0;
  padding:16px;
  background:var(--bg-primary);
  color:var(--text);
}

/* ======================================
   Tipografia
   ====================================== */

h1{
  margin-top:0;
  margin-bottom:25px;
  font-size:32px;
}

footer{
  margin-top:14px;
  padding-top:10px;
  border-top:1px solid var(--border-dark);
  color:#666;
  font-size:12px;
  text-align:center;
}

footer p{
  display:inline;
  margin:0;
}

footer p + p{
  margin:0;
}

footer p + p::before{
  content:" · ";
}

.app-footer{
  flex:0 0 auto;
  margin-top:auto;
}

/* ======================================
   Layout
   ====================================== */

.container{
  display:flex;
  flex-direction:column;
  width:min(1800px, 100%);
  min-width:0;
  min-height:calc(100dvh - 32px);
  max-width:1800px;
  margin:0 auto;
  padding:16px;
  border-radius:18px;
  background:var(--bg-secondary);
  box-shadow:var(--shadow);
}

.panel{
  padding:11px 12px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:var(--radius-panel);
  background:var(--bg-panel);
  box-shadow:var(--shadow-panel);
}

.visually-hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0, 0, 0, 0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.project-save-toast{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:70;
  display:flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  padding:10px 15px;
  border:1px solid rgba(255,176,0,.5);
  border-radius:8px;
  background:rgba(28,28,31,.96);
  color:var(--text);
  box-shadow:0 12px 30px rgba(0,0,0,.45);
  font-size:12px;
  font-weight:700;
  opacity:0;
  pointer-events:none;
  transform:translateY(14px) scale(.98);
  transition:opacity .18s ease, transform .18s ease;
}

.project-save-toast.visible{
  opacity:1;
  transform:translateY(0) scale(1);
}

.project-save-toast-icon{
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--accent);
  color:#151515;
  font-size:14px;
}

.project-sidebar-toggle{
  position:relative;
  isolation:isolate;
  grid-row:1;
  grid-column:1;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:0;
  min-height:50px;
  gap:8px;
  padding:4px 10px;
  overflow:visible;
  border:1px solid rgba(230,170,6,.48);
  border-radius:8px;
  background:
    radial-gradient(circle at 25% 18%, rgba(230,170,6,.13), transparent 48%),
    linear-gradient(145deg, #292a2e, #202124);
  color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055), 0 0 0 1px rgba(230,170,6,.05), var(--shadow-panel);
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  transition:var(--transition);
}

.project-sidebar-toggle:hover,
.project-sidebar-toggle[aria-expanded="true"]{
  border-color:var(--accent);
  background:
    radial-gradient(circle at 25% 18%, rgba(230,170,6,.24), transparent 52%),
    linear-gradient(145deg, #353331, #27282b);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 0 0 2px rgba(230,170,6,.12), 0 8px 22px rgba(0,0,0,.28);
  transform:translateY(-1px);
}

.project-sidebar-toggle:active{
  transform:translateY(0);
}

.project-sidebar-toggle[aria-expanded="true"]{
  box-shadow:inset 3px 0 0 var(--accent), 0 0 0 2px rgba(230,170,6,.16), 0 8px 22px rgba(0,0,0,.32);
}

.project-brand-mark{
  display:block;
  flex:0 0 auto;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  border-radius:6px;
  background:#000;
}

.project-brand-mark img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.18);
}

.project-brand-mark-toggle{
  width:46px;
  height:46px;
  margin:0 auto;
  border-radius:5px;
  transition:border-color var(--transition), filter var(--transition), transform var(--transition);
}

.project-sidebar-toggle:hover .project-brand-mark-toggle,
.project-sidebar-toggle[aria-expanded="true"] .project-brand-mark-toggle{
  border-color:rgba(230,170,6,.72);
  filter:brightness(1.08);
  transform:scale(1.025);
}

.project-sidebar-toggle-cue{
  position:absolute;
  top:-7px;
  right:-6px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:4px;
  min-height:19px;
  padding:4px 6px;
  border:1px solid #ffd84a;
  border-radius:999px;
  background:var(--accent);
  color:#121212;
  box-shadow:0 4px 10px rgba(0,0,0,.4), 0 0 12px rgba(230,170,6,.28);
  font-size:7px;
  font-weight:900;
  letter-spacing:.09em;
  line-height:1;
  pointer-events:none;
  animation:project-menu-cue-pulse 900ms ease 700ms 2 both;
}

.project-sidebar-toggle-icon{
  display:block;
  width:14px;
  height:10px;
  border-radius:1px;
  background:linear-gradient(
    to bottom,
    currentColor 0 2px,
    transparent 2px 4px,
    currentColor 4px 6px,
    transparent 6px 8px,
    currentColor 8px 10px
  );
}

.project-sidebar-toggle[aria-expanded="true"] .project-sidebar-toggle-cue{
  border-color:var(--accent);
  background:#171717;
  color:var(--accent-strong);
  box-shadow:0 4px 12px rgba(0,0,0,.5), 0 0 14px rgba(230,170,6,.34);
  animation:none;
}

.project-sidebar-backdrop{
  position:fixed;
  inset:0;
  z-index:40;
  visibility:hidden;
  background:rgba(0,0,0,.66);
  backdrop-filter:blur(0);
  opacity:0;
  pointer-events:none;
  transition:opacity 240ms ease, backdrop-filter 240ms ease, visibility 0s linear 240ms;
}

.project-sidebar-backdrop.open{
  visibility:visible;
  opacity:1;
  backdrop-filter:blur(5px);
  pointer-events:auto;
  transition-delay:0s;
}

.project-sidebar{
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  z-index:50;
  display:flex;
  flex-direction:column;
  width:min(390px, calc(100vw - 16px));
  overflow:hidden;
  padding:0;
  border-right:1px solid rgba(230,170,6,.26);
  background:
    radial-gradient(circle at 15% 0, rgba(230,170,6,.1), transparent 32%),
    linear-gradient(180deg, #27282c 0, #1c1d20 100%);
  box-shadow:24px 0 70px rgba(0,0,0,.68);
  transform:translateX(calc(-100% - 18px));
  transition:transform 260ms cubic-bezier(.22,.8,.24,1);
  scrollbar-width:none;
}

.project-sidebar::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  left:0;
  height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent-strong) 48%, transparent);
  opacity:.9;
}

.project-sidebar::-webkit-scrollbar,
.recording-downloads::-webkit-scrollbar{
  width:0;
}

.project-sidebar.open{
  transform:translateX(0);
}

.project-sidebar-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex:0 0 auto;
  margin:0;
  padding:20px 18px 15px;
  border-bottom:1px solid var(--border-dark);
  background:rgba(13,13,13,.2);
}

.project-sidebar-brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.project-brand-mark-menu{
  width:38px;
  height:38px;
}

.project-brand-copy{
  display:flex;
  flex-direction:column;
  gap:3px;
  line-height:1;
}

.project-sidebar-header strong{
  color:var(--accent);
  font-size:15px;
}

.project-sidebar-header small{
  color:var(--text-muted);
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
}

.project-sidebar-close{
  width:34px;
  height:34px;
  padding:0;
  border:1px solid rgba(255,255,255,.1);
  border-radius:6px;
  background:var(--bg-control);
  color:var(--text);
  font-size:22px;
  line-height:1;
  cursor:pointer;
  transition:border-color var(--transition), background var(--transition), color var(--transition), transform var(--transition);
}

.project-sidebar-close:hover{
  border-color:rgba(230,170,6,.65);
  background:rgba(230,170,6,.12);
  color:var(--accent-strong);
  transform:rotate(4deg);
}

.project-sidebar-content{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding:18px;
  scrollbar-width:none;
  overscroll-behavior:contain;
}

.project-sidebar-content::-webkit-scrollbar{
  width:0;
}

.project-summary{
  margin-bottom:20px;
  padding:16px;
  border:1px solid rgba(230,170,6,.17);
  border-radius:12px;
  background:linear-gradient(145deg, rgba(230,170,6,.075), rgba(255,255,255,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045), 0 12px 28px rgba(0,0,0,.16);
}

.project-summary-kicker{
  margin:0 0 7px;
  color:var(--accent);
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
}

.project-summary h2{
  margin:0 0 8px;
  color:var(--text);
  font-size:18px;
  line-height:1.2;
}

.project-summary-copy{
  margin:0;
  color:var(--text-muted);
  font-size:13px;
  line-height:1.55;
}

.project-live-state{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:7px;
  margin-top:15px;
}

.project-live-stat{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
  padding:9px 8px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:8px;
  background:rgba(8,8,8,.28);
  text-align:center;
}

.project-live-stat span{
  overflow:hidden;
  color:var(--text-muted);
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}

.project-live-stat output{
  overflow:hidden;
  color:var(--accent-strong);
  font-size:15px;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.project-summary-features{
  display:grid;
  gap:7px;
  margin:12px 0 0;
  padding:0;
  color:var(--text-soft);
  font-size:11px;
  line-height:1.35;
  list-style:none;
}

.project-summary-features li{
  position:relative;
  padding-left:13px;
}

.project-summary-features li::before{
  content:"";
  position:absolute;
  top:.45em;
  left:0;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 5px rgba(230,170,6,.35);
}

.project-toolbar{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:9px;
}

.project-menu-section-label{
  margin:0 0 2px;
  color:var(--text-muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.project-toolbar button,
.track-editor button,
.sample-area button,
.download-link{
  min-height:32px;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:6px;
  background:var(--bg-control);
  color:var(--text);
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  transition:var(--transition);
}

.project-toolbar button{
  width:100%;
  min-height:68px;
  text-align:left;
}

.project-toolbar .project-menu-action{
  display:grid;
  grid-template-columns:38px minmax(0, 1fr) auto;
  align-items:center;
  gap:11px;
  padding:10px 12px;
  border-color:rgba(255,255,255,.08);
  border-radius:10px;
  background:rgba(52,54,58,.74);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

.project-menu-action-icon{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid rgba(230,170,6,.2);
  border-radius:9px;
  background:rgba(230,170,6,.075);
  color:var(--accent);
  font-size:20px;
  font-weight:500;
  transition:background var(--transition), color var(--transition), transform var(--transition);
}

.project-menu-info-icon{
  font-size:20px;
  font-style:normal;
  font-weight:900;
  text-transform:none;
}

.project-menu-action-copy{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.project-menu-action-copy strong{
  color:var(--text);
  font-size:13px;
  line-height:1;
}

.project-menu-action-copy small{
  overflow:hidden;
  color:var(--text-muted);
  font-size:11px;
  font-weight:600;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:normal;
}

.project-menu-action-arrow{
  color:#777b83;
  font-size:22px;
  line-height:1;
  transition:color var(--transition), transform var(--transition);
}

.project-menu-action-key,
.project-menu-hint kbd{
  min-width:25px;
  padding:4px 6px;
  border:1px solid rgba(255,255,255,.16);
  border-bottom-color:rgba(255,255,255,.28);
  border-radius:6px;
  background:#1a1b1e;
  color:var(--text-soft);
  box-shadow:0 2px 0 rgba(0,0,0,.32);
  font:800 10px/1 var(--font-ui);
  text-align:center;
}

.project-toolbar button:hover,
.track-editor button:hover,
.sample-area button:hover,
.download-link:hover{
  border-color:var(--accent);
  background:var(--bg-control-hover);
}

.project-toolbar .project-menu-action:hover{
  transform:translateX(3px);
}

.project-menu-action:hover .project-menu-action-icon{
  background:var(--accent);
  color:var(--text-dark);
  transform:scale(1.04);
}

.project-menu-action:hover .project-menu-action-arrow{
  color:var(--accent-strong);
  transform:translateX(2px);
}

.project-menu-action:disabled{
  cursor:not-allowed;
  filter:saturate(.45);
  opacity:.48;
}

.project-sidebar-footer{
  flex:0 0 auto;
  margin:0;
  padding:14px 18px 16px;
  border-top:1px solid var(--border-dark);
  background:rgba(13,13,13,.28);
  color:var(--text-muted);
  font-size:13px;
  text-align:left;
}

.project-language{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0;
  padding:0;
  border:0;
  color:var(--text-muted);
  font-size:13px;
  font-weight:700;
}

.project-language .language-toggle{
  min-height:42px;
  padding:7px 12px;
}

.project-menu-hint,
footer .project-menu-hint{
  display:flex;
  align-items:center;
  gap:8px;
  margin:10px 0 0;
  color:#777b83;
  font-size:11px;
  font-weight:700;
}

.project-sidebar.open .project-summary,
.project-sidebar.open .project-menu-section-label,
.project-sidebar.open .project-menu-action,
.project-sidebar.open .project-sidebar-footer{
  animation:project-menu-item-in 320ms both;
}

.project-sidebar.open .project-menu-action:nth-of-type(2){ animation-delay:35ms; }
.project-sidebar.open .project-menu-action:nth-of-type(3){ animation-delay:60ms; }
.project-sidebar.open .project-menu-action:nth-of-type(4){ animation-delay:85ms; }
.project-sidebar.open .project-menu-action:nth-of-type(5){ animation-delay:110ms; }
.project-sidebar.open .project-sidebar-footer{ animation-delay:130ms; }

body.project-sidebar-open{
  overflow:hidden;
}

.workspace{
  display:grid;
  align-items:start;
  width:100%;
  min-width:0;
  gap:var(--spacing);
}

.workspace-panel,
.sequencer-scroll,
.step-position-dock,
.step-position-scroll,
.song-chain-dock,
.mixer{
  width:100%;
}

.workspace-panel{
  grid-area:1 / 1;
  z-index:1;
  width:100%;
  min-width:0;
  visibility:hidden;
  pointer-events:none;
  opacity:1;
  transition:none;
}

.workspace[data-active-view="sequencer"] [data-view-panel="sequencer"],
.workspace[data-active-view="mixer"] [data-view-panel="mixer"]{
  z-index:2;
  visibility:visible;
  pointer-events:auto;
}

.sequencer-scroll,
.step-position-scroll,
.song-chain-dock,
.mixer{
  -webkit-overflow-scrolling:touch;
}

.sequencer-scroll,
.step-position-scroll,
.song-chain-dock{
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:4px;
}

.sequencer-scroll{
  padding-top:8px;
}

.sequencer-scroll::-webkit-scrollbar,
.step-position-scroll::-webkit-scrollbar,
.song-chain-dock::-webkit-scrollbar,
.mixer::-webkit-scrollbar{
  height:8px;
}

.sequencer-scroll::-webkit-scrollbar-track,
.step-position-scroll::-webkit-scrollbar-track,
.song-chain-dock::-webkit-scrollbar-track,
.mixer::-webkit-scrollbar-track{
  border-radius:10px;
  background:var(--bg-rail);
}

.sequencer-scroll::-webkit-scrollbar-thumb,
.step-position-scroll::-webkit-scrollbar-thumb,
.song-chain-dock::-webkit-scrollbar-thumb{
  border-radius:10px;
  background:var(--bg-control-hover);
}

/* ======================================
   Navbar
   ====================================== */

.topbar{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  grid-template-rows:auto auto;
  align-items:stretch;
  width:100%;
  min-width:0;
  max-width:var(--sequencer-frame-width);
  gap:var(--spacing);
  margin-right:auto;
  margin-bottom:24px;
  margin-left:auto;
  font-family:var(--font-ui);
}

.topbar *{
  font-family:inherit;
}

.topbar .panel{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 1 auto;
  flex-wrap:wrap;
  gap:9px;
  width:100%;
  min-width:0;
  min-height:50px;
}

.topbar .project-sidebar-toggle{
  gap:0;
  padding-right:0;
  padding-left:0;
}

.topbar label,
.topbar button,
.topbar h1{
  font-size:12px;
  font-weight:700;
  letter-spacing:.035em;
  line-height:1;
  text-transform:uppercase;
}

.topbar h1{
  margin:0;
}

.transport{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1 1 520px;
  flex-wrap:wrap;
  gap:var(--spacing);
}

.transport-secondary-row{
  display:contents;
}

.bank-panel,
.kit-panel,
.pattern-panel,
.pattern-length-panel{
  display:flex;
  align-items:center;
  justify-content:center;
}

.bank-panel,
.kit-panel,
.pattern-panel{
  gap:var(--spacing);
}

.pattern-length-panel{
  gap:var(--spacing);
}

.pattern-length-panel label{
  font-size:12px;
  font-weight:700;
}

.transport{
  grid-row:1;
  grid-column:2 / -1;
}

.bank-panel{
  grid-row:2;
  grid-column:1 / span 3;
}

.pattern-length-panel{
  grid-row:2;
  grid-column:4 / span 2;
}

.kit-panel{
  grid-row:2;
  grid-column:6 / span 3;
}

.transport .bpm-control,
.transport .swing-control{
  display:flex;
  align-items:center;
  justify-content:center;
  height:var(--control-height);
  min-height:var(--control-height);
  max-height:var(--control-height);
  padding:5px 7px;
  gap:5px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius);
  background:var(--bg-control);
  color:var(--text);
}

.recording-stopwatch{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 86px;
  width:86px;
  height:var(--control-height);
  min-height:var(--control-height);
  gap:6px;
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius);
  background:#17181a;
  color:var(--text);
  font-variant-numeric:tabular-nums;
}

.recording-stopwatch-dot{
  flex:0 0 7px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#686a6f;
}

.recording-stopwatch time{
  font-size:17px;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1;
}

.recording-stopwatch.is-recording{
  border-color:rgba(255,82,82,.55);
  color:var(--text);
  box-shadow:inset 0 0 12px rgba(255,82,82,.08);
}

.recording-stopwatch.is-recording .recording-stopwatch-dot{
  animation:pulse 1s infinite;
  background:var(--danger-active);
  box-shadow:0 0 8px rgba(255,82,82,.7);
}

.transport .bpm-control,
.transport .swing-control{
  flex:0 0 104px;
  width:104px;
}

.numeric-drag-control{
  cursor:ns-resize;
  font-variant-numeric:tabular-nums;
  text-align:center;
  touch-action:none;
  transition:var(--transition);
  user-select:none;
}

.bpm-label,
.swing-label{
  flex:0 0 auto;
  color:var(--text);
  cursor:ns-resize;
  font-size:10px;
  font-weight:700;
}

#bpmInput,
#swingInput{
  display:block;
  flex:0 0 3.2ch;
  width:3.2ch;
  min-width:3.2ch;
  height:24px;
  padding:0;
  border:0;
  border-radius:3px;
  background:transparent;
  color:var(--text);
  font-size:18px;
  font-weight:700;
  line-height:24px;
  appearance:textfield;
  text-align:right;
}

#swingInput{
  flex-basis:2.6ch;
  width:2.6ch;
  min-width:2.6ch;
  text-align:center;
}

.transport .swing-control{
  gap:2px;
  padding-right:7px;
  padding-left:7px;
}

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

#bpmInput:focus-visible,
#swingInput:focus-visible{
  outline:0;
}

.bpm-drag-hint{
  color:var(--text-muted);
  font-size:16px;
  line-height:1;
}

.transport .bpm-control:hover,
.transport .bpm-control:focus-within,
.transport .bpm-control.is-dragging,
.transport .swing-control:hover,
.transport .swing-control:focus-within,
.transport .swing-control.is-dragging{
  border-color:var(--accent);
  background:var(--bg-control-hover);
  transform:none;
}

.transport .bpm-control.is-dragging,
.transport .swing-control.is-dragging{
  box-shadow:0 0 0 2px rgba(230,170,6,.2);
}

.transport .bpm-control.fine-tuning,
.transport .swing-control.fine-tuning{
  border-color:rgba(230,170,6,.72);
  background:#34363a;
  box-shadow:inset 0 0 0 1px rgba(230,170,6,.16), 0 0 8px rgba(230,170,6,.12);
}

.transport .bpm-control.fine-tuning .bpm-drag-hint,
.transport .swing-control.fine-tuning .bpm-drag-hint{
  color:var(--accent);
}

.transport .bpm-control:focus-within,
.transport .swing-control:focus-within{
  outline:2px solid var(--accent-strong);
  outline-offset:3px;
}

body.numeric-control-dragging{
  cursor:ns-resize;
  user-select:none;
}

.swing-unit{
  margin-left:-1px;
  color:var(--text);
  font-size:12px;
  font-weight:700;
}

/* ======================================
   Sidebar
   ====================================== */

/* Sin sidebar en la interfaz actual. */

/* ======================================
   Controles
   ====================================== */

.view-switch{
  display:flex;
  flex-wrap:wrap;
  grid-row:2;
  grid-column:9 / -1;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:50px;
  gap:var(--spacing);
  margin:0;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius-panel);
  background:var(--bg-panel);
  box-shadow:var(--shadow-panel);
}

.language-toggle{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  min-width:58px;
  min-height:32px;
  padding:6px 8px;
  gap:4px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:5px;
  color:var(--text);
  background:var(--bg-control);
  cursor:pointer;
}

.language-toggle:hover{
  border-color:var(--accent);
  background:var(--bg-control-hover);
}

.language-toggle [data-locale],
.language-divider{
  opacity:.45;
}

.language-toggle[data-language="es"] [data-locale="es"],
.language-toggle[data-language="en"] [data-locale="en"]{
  color:var(--accent);
  opacity:1;
}

.view-switch-btn{
  flex:0 0 auto;
  height:var(--control-height);
  min-height:var(--control-height);
  padding:8px 12px;
  border:0;
  border-radius:5px;
  background:var(--bg-control);
  color:var(--text);
  cursor:pointer;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  transition:var(--transition);
}

.view-switch-btn{
  min-width:64px;
}

.view-switch-btn:hover{
  background:var(--bg-control-hover);
  box-shadow:inset 0 0 0 1px #5a5d62;
}

.view-switch-btn.active{
  background:var(--accent);
  color:var(--text-dark);
  box-shadow:inset 0 0 0 1px var(--accent-strong);
}

.song-chain-dock{
  margin-bottom:10px;
}

.song-chain-dock .song-row{
  justify-content:center;
  width:max-content;
  min-width:max-content;
  margin-top:2px;
  margin-bottom:0;
  margin-right:auto;
  margin-left:auto;
}

/* ======================================
   Botones
   ====================================== */

.transport button,
.bank-btn,
.sound-bank-btn,
.pattern-length-btn,
.mute-btn,
.solo-btn,
.song-mode-btn,
.song-reset-btn{
  cursor:pointer;
  transition:var(--transition);
}

.transport button{
  flex:0 0 auto;
  min-height:var(--control-height);
  padding:8px 14px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius);
  background:var(--bg-control);
  color:var(--text);
}

.transport button:hover{
  background:var(--bg-control-hover);
  border-color:rgba(255,255,255,.13);
  transform:translateY(-1px);
}

.transport button.transport-symbol-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 var(--control-height);
  width:var(--control-height);
  min-width:var(--control-height);
  max-width:var(--control-height);
  height:var(--control-height);
  min-height:var(--control-height);
  max-height:var(--control-height);
  padding:0;
  line-height:0;
}

.transport-symbol{
  display:block;
  flex:0 0 auto;
  width:12px;
  height:12px;
}

.play-symbol{
  width:0;
  height:0;
  margin-left:2px;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  border-left:11px solid currentColor;
}

.stop-symbol,
.record-symbol{
  background:currentColor;
}

.record-symbol{
  border-radius:50%;
}

.record-btn.recording .record-symbol{
  border-radius:2px;
}

.transport button.active,
.song-mode-btn.active{
  background:var(--success);
  color:var(--text);
  box-shadow:0 4px 12px rgba(75,189,0,.18);
}

.transport button:active,
.bank-btn:active,
.sound-bank-btn:active,
.pattern-length-btn:active,
.mute-btn:active,
.solo-btn:active,
.song-mode-btn:active,
.song-reset-btn:active{
  transform:translateY(0);
}

button:disabled{
  cursor:not-allowed;
  opacity:.5;
  transform:none !important;
}

.transport .record-btn{
  padding:10px 14px;
  border-radius:var(--radius);
  background:var(--danger);
}

.transport .record-btn:hover{
  background:var(--danger-hover);
}

.transport .record-btn.recording{
  animation:pulse 1s infinite;
  background:var(--danger-active);
}

.record-option{
  display:flex;
  align-items:center;
  gap:5px;
  color:var(--text-muted);
  font-size:10px !important;
}

.record-duration-control{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}

.record-option select{
  min-height:30px;
  padding:4px 6px;
  border:1px solid var(--border);
  border-radius:5px;
  background:var(--bg-control);
  color:var(--text);
}

.record-option.is-disabled{
  opacity:.48;
}

.record-option select:disabled{
  cursor:not-allowed;
}

.numeric-drag-control.recording-locked,
.numeric-drag-control.recording-locked label{
  cursor:not-allowed;
}

.numeric-drag-control.recording-locked{
  opacity:.58;
}

.check-option input{
  accent-color:var(--accent);
}

.clear-btn{
  background:#c62828;
}

.bank-btn,
.sound-bank-btn,
.pattern-length-btn{
  min-height:var(--control-height);
  padding:8px 12px;
  border:2px solid var(--border);
  border-radius:6px;
  background:var(--bg-control);
  color:var(--text);
  font-size:12px;
  font-weight:700;
}

.bank-btn:hover,
.sound-bank-btn:hover,
.pattern-length-btn:hover{
  border-color:#666a70;
  background:var(--bg-control-hover);
  transform:translateY(-1px);
}

.bank-btn.active,
.sound-bank-btn.active,
.pattern-length-btn.active{
  border-color:var(--accent-strong);
  background:var(--accent);
  color:var(--text-dark);
  box-shadow:0 0 0 1px rgba(230,170,6,.2), 0 4px 12px rgba(230,170,6,.16);
}

.mute-btn,
.solo-btn,
.song-mode-btn,
.song-reset-btn{
  width:36px;
  min-height:var(--control-height);
  padding:8px 0;
  border:1px solid rgba(255,255,255,.07);
  border-radius:6px;
  background:var(--bg-control-hover);
  color:var(--text);
  font-size:12px;
  font-weight:700;
}

.mute-btn:hover,
.solo-btn:hover,
.song-mode-btn:hover,
.song-reset-btn:hover{
  background:#777;
  border-color:rgba(255,255,255,.2);
  transform:translateY(-1px);
}

.mute-btn.active{
  background:var(--accent);
}

.solo-btn.active{
  background:var(--cyan);
}

.song-mode-btn,
.song-reset-btn{
  font-size:10px;
}

.song-mode-btn{
  --song-beat-duration:.5s;
  --song-bar-duration:2s;
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

.song-mode-label{
  position:relative;
  z-index:2;
}

.song-mode-btn::before{
  content:"";
  position:absolute;
  right:4px;
  bottom:3px;
  left:4px;
  z-index:2;
  height:2px;
  border-radius:2px;
  background:rgba(255,255,255,.86);
  box-shadow:0 0 4px rgba(255,255,255,.4);
  opacity:0;
  transform:scaleX(0);
  transform-origin:left center;
}

.song-mode-btn::after{
  content:"";
  position:absolute;
  inset:-30% -70%;
  z-index:1;
  background:linear-gradient(
    105deg,
    transparent 37%,
    rgba(255,255,255,.2) 48%,
    rgba(255,255,255,.32) 50%,
    rgba(255,255,255,.16) 52%,
    transparent 63%
  );
  opacity:0;
  transform:translateX(-36%);
}

.song-mode-btn.active{
  border-color:rgba(181,255,132,.72);
  background:linear-gradient(180deg, #5bc820, #399c09);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 4px 12px rgba(75,189,0,.22);
  animation:song-mode-engage 360ms cubic-bezier(.2,.85,.24,1.2);
}

.song-mode-btn.active:hover{
  border-color:rgba(213,255,184,.9);
  background:linear-gradient(180deg, #69d72c, #42aa0e);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 5px 15px rgba(75,189,0,.3);
}

.song-mode-btn.active::before{
  opacity:.58;
  transform:scaleX(1);
}

.song-mode-btn.playing{
  animation:song-mode-beat var(--song-beat-duration) ease-out infinite;
}

.song-mode-btn.playing::before{
  opacity:1;
  animation:song-mode-progress var(--song-bar-duration) linear infinite;
}

.song-mode-btn.playing::after{
  opacity:1;
  animation:song-mode-sweep var(--song-bar-duration) ease-in-out infinite;
}

/* ======================================
   Cards
   ====================================== */

/* No hay cards reutilizables en la interfaz actual. */

/* ======================================
   Modales
   ====================================== */

/* No hay modales en la interfaz actual. */

/* ======================================
   Mixer
   ====================================== */

.mixer{
  display:flex;
  justify-content:safe center;
  gap:var(--spacing);
  min-height:250px;
  margin-top:2px;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:4px;
}

.mixer::-webkit-scrollbar-thumb{
  border-radius:10px;
  background:#4CAF50;
}

.mixer::-webkit-scrollbar-thumb:hover{
  background:var(--bank-c);
}

.master-effects-dock{
  position:absolute;
  top:5px;
  left:5px;
  z-index:2;
  display:flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  width:auto;
  min-height:0;
  margin:0;
  padding:4px;
  gap:5px;
  border:1px solid rgba(230,170,6,.22);
  border-radius:7px;
  background:#1d1e21;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

.master-effects-title{
  color:var(--text);
  font-size:9px;
  letter-spacing:.08em;
}

.stutter-rate-grid{
  display:grid;
  grid-template-columns:repeat(3, 44px);
  gap:4px;
}

.stutter-rate-pad{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:4px 3px;
  gap:3px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:5px;
  color:var(--text);
  background:var(--bg-control);
  font-size:10px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
  cursor:pointer;
  transition:var(--transition);
}

.stutter-rate-pad:hover{
  border-color:rgba(230,170,6,.55);
  background:var(--bg-control-hover);
}

.stutter-rate-pad.selected{
  border-color:rgba(230,170,6,.7);
  box-shadow:inset 0 0 0 1px rgba(230,170,6,.18);
}

.stutter-rate-pad.active{
  border-color:var(--accent);
  color:var(--text-dark);
  background:var(--accent);
  box-shadow:0 0 13px rgba(230,170,6,.4);
}

.stutter-rate-led{
  display:block;
  flex:0 0 7px;
  width:7px;
  height:7px;
  border:1px solid #090909;
  border-radius:50%;
  background:#3b3d41;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.08);
}

.stutter-rate-pad.selected .stutter-rate-led{
  background:#7b5b05;
}

.stutter-rate-pad.active .stutter-rate-led{
  background:var(--accent-strong);
  box-shadow:0 0 5px rgba(255,255,0,.8);
}

.stutter-rate-pad.step-pulse{
  animation:stutter-step-pulse 110ms ease-out;
}

.stutter-rate-pad.step-pulse .stutter-rate-led{
  animation:stutter-led-pulse 110ms ease-out;
}

.stutter-rate-pad.pending{
  animation:pulse 650ms ease-in-out infinite;
}

.channel{
  display:flex;
  align-items:center;
  flex-direction:column;
  flex-shrink:0;
  justify-content:flex-start;
  width:136px;
  min-width:136px;
  padding:11px 10px 12px;
  gap:10px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:11px;
  background:var(--bg-panel);
  box-shadow:var(--shadow-panel);
  text-align:center;
}

.channel h3{
  display:block;
  margin:0 auto 3px;
  color:var(--text);
  font-size:13px;
  font-weight:700;
  line-height:1;
  text-align:center;
}

.channel .track-title{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.master-channel{
  border-color:rgba(230,170,6,.22);
}

.channel-mode-controls{
  display:flex;
  gap:6px;
}

.channel-mode-controls .mute-btn,
.channel-mode-controls .solo-btn{
  width:32px;
  min-height:28px;
  padding:4px 0;
}

.level-meter{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  z-index:0;
  width:10px;
  height:100%;
  overflow:hidden;
  border:1px solid #111;
  border-radius:5px;
  background:linear-gradient(to top, #183218 0 70%, #3a3211 70% 88%, #3b1515 88%);
  box-shadow:inset 0 0 4px rgba(0,0,0,.8);
  transform:translateX(-50%);
}

.level-meter-fill{
  position:absolute;
  inset:0;
  background:linear-gradient(to top, #36d13b 0 70%, #f0d02f 70% 88%, #ff3939 88%);
  transform:scaleY(0);
  transform-origin:bottom;
  transition:transform 55ms linear;
}

.level-meter.clipping{
  outline:2px solid var(--danger-active);
  outline-offset:1px;
  box-shadow:0 0 9px rgba(255,82,82,.8);
}

.mixer-reset-btn{
  width:56px;
  min-height:28px;
  padding:4px 0;
  border:1px solid rgba(255,255,255,.07);
  border-radius:6px;
  color:var(--text);
  background:var(--bg-control-hover);
  font-size:12px;
  font-weight:700;
  letter-spacing:0;
  cursor:pointer;
  transition:var(--transition);
}

.mixer-reset-btn:hover{
  border-color:rgba(255,255,255,.2);
  background:#777;
  transform:translateY(-1px);
}

.mixer-reset-btn:active{
  transform:translateY(0);
}

.mixer-reset-btn:focus-visible{
  outline:2px solid var(--accent-strong);
  outline-offset:3px;
}

.master-shift-btn{
  width:72px;
  min-height:28px;
  margin-top:auto;
  padding:4px 0;
  border:1px solid rgba(255,255,255,.08);
  border-radius:6px;
  color:var(--text-soft);
  background:#292b2f;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  cursor:pointer;
  transition:var(--transition);
}

.master-shift-btn:hover{
  border-color:rgba(230,170,6,.55);
  color:var(--text);
  background:#34363a;
}

.master-shift-btn.active{
  border-color:#ffcf3f;
  color:#181300;
  background:linear-gradient(#ffd85a, var(--accent-strong));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 0 8px rgba(230,170,6,.36);
}

.master-shift-btn:active{
  transform:translateY(1px);
}

.master-shift-btn:focus-visible{
  outline:2px solid var(--accent-strong);
  outline-offset:3px;
}

.fader-group.compact{
  display:flex;
  align-items:center;
  flex-direction:column;
  justify-content:center;
  width:100%;
  height:auto;
  margin-right:auto;
  margin-left:auto;
}

.fader-group.compact .fader-track-container{
  position:relative;
  display:flex;
  justify-content:center;
  flex:0 0 var(--fader-height);
  width:56px;
  height:var(--fader-height);
}

.fader-group.compact .fader-track-container::before{
  content:none;
}

.fader-group.compact .ticks-bg{
  position:absolute;
  z-index:1;
  width:100%;
  height:100%;
  background-image:
    linear-gradient(to bottom, #d8d8d8 0 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.36) 0 1px, transparent 1px),
    linear-gradient(to bottom, #d8d8d8 0 1px, transparent 1px);
  background-position:
    0 0,
    0 0,
    0 100%;
  background-repeat:
    repeat-y,
    repeat-y,
    no-repeat;
  background-size:
    100% 25%,
    100% 12.5%,
    100% 100%;
  opacity:.75;
  pointer-events:none;
}

.fader-group.compact .vertical-fader{
  -webkit-appearance:none;
  appearance:none;
  position:absolute;
  top:50%;
  left:50%;
  z-index:2;
  width:var(--fader-height);
  height:0;
  margin:0;
  background:transparent;
  cursor:pointer;
  transform:translate(-50%, -50%) rotate(-90deg);
}

.fader-group.compact .vertical-fader::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:32px;
  height:44px;
  border:1px solid var(--text-dark);
  border-radius:3px;
  background:var(--fader-knob);
  background-image:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.1) 0%,
      transparent 45%,
      var(--text) 48%,
      var(--text) 52%,
      transparent 55%,
      rgba(0,0,0,.3) 100%
    ),
    repeating-linear-gradient(to bottom, #222, #222 2px, var(--bg-control) 2px, var(--bg-control) 4px);
  box-shadow:4px 0 10px rgba(0,0,0,.4);
  transform:rotate(90deg);
}

.fader-group.compact .vertical-fader::-moz-range-thumb{
  width:32px;
  height:44px;
  border:1px solid var(--text-dark);
  background:var(--fader-knob);
  background-image:
    linear-gradient(to bottom, transparent 45%, var(--text) 48%, var(--text) 52%, transparent 55%),
    repeating-linear-gradient(to bottom, #222, #222 2px, var(--bg-control) 2px, var(--bg-control) 4px);
  transform:rotate(90deg);
}

.fader-label{
  display:block;
  width:100%;
  padding:2px 2px 0;
  box-sizing:border-box;
  color:var(--text-soft);
  font-size:11px;
  line-height:1.3;
  text-align:center;
  word-break:break-word;
}

.fader-label.muted-value{
  color:var(--danger-active);
}

.mixer-control{
  display:flex;
  align-items:center;
  flex-direction:column;
  width:100%;
  gap:4px;
}

.mixer-control-label{
  color:var(--text-muted);
  font-size:10px;
  font-weight:700;
  line-height:12px;
}

.mixer-control-value{
  min-height:14px;
  color:var(--text-soft);
  font-size:9px;
  line-height:14px;
  white-space:nowrap;
}

.track-knobs{
  display:grid;
  grid-template-columns:repeat(2, 52px);
  justify-content:center;
  width:100%;
  gap:10px 8px;
}

.track-knobs.master-knobs{
  grid-template-columns:repeat(2, 52px);
  justify-items:center;
}

.knob-control{
  width:52px;
  gap:3px;
}

.knob-input-wrap{
  position:relative;
  width:46px;
  height:46px;
  border:1px solid #070708;
  border-radius:50%;
  background:radial-gradient(circle at 50% 43%, #2d2f33 0 61%, #151619 63% 71%, #3a3c40 73%, #0b0c0e 78% 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.1),
    inset 0 -3px 5px rgba(0,0,0,.72),
    0 3px 5px rgba(0,0,0,.52);
}

.knob-input-wrap.has-center-detent::before{
  content:"";
  position:absolute;
  top:-4px;
  left:50%;
  width:2px;
  height:5px;
  border-radius:2px;
  background:var(--text-muted);
  transform:translateX(-50%);
}

.knob-dial{
  --knob-angle:-135deg;
  position:absolute;
  inset:3px;
  border:0;
  background:#090a0c;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.1),
    inset 0 -4px 8px rgba(0,0,0,.72);
  clip-path:polygon(
    50% 1%,
    66.8% 9.4%,
    84.6% 15.4%,
    90.6% 33.2%,
    99% 50%,
    90.6% 66.8%,
    84.6% 84.6%,
    66.8% 90.6%,
    50% 99%,
    33.2% 90.6%,
    15.4% 84.6%,
    9.4% 66.8%,
    1% 50%,
    9.4% 33.2%,
    15.4% 15.4%,
    33.2% 9.4%
  );
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.7));
  transition:filter var(--transition);
}

.knob-dial::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(circle at 29% 23%, rgba(255,255,255,.16) 0 2%, rgba(255,255,255,.055) 17%, transparent 39%),
    linear-gradient(145deg, #242629 0%, #101113 43%, #050607 100%);
  box-shadow:
    inset 1px 1px 1px rgba(255,255,255,.08),
    inset -3px -4px 7px rgba(0,0,0,.72);
}

.knob-dial::after{
  content:"";
  position:absolute;
  top:5px;
  left:50%;
  z-index:2;
  width:4px;
  height:18px;
  border:1px solid rgba(0,0,0,.5);
  border-radius:4px;
  background:linear-gradient(90deg, #9f6900 0%, var(--accent) 28%, #ffc52f 52%, var(--accent) 75%, #8b5900 100%);
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,.24),
    0 0 4px rgba(230,170,6,.72),
    1px 1px 1px rgba(0,0,0,.78);
  transform:translateX(-50%) rotate(var(--knob-angle));
  transform-origin:50% 16px;
  transition:transform 45ms linear;
}

.rotary-knob{
  position:absolute;
  inset:0;
  z-index:2;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:ns-resize;
  touch-action:none;
}

.vertical-fader{
  cursor:ns-resize !important;
  touch-action:none;
}

.knob-input-wrap:hover .knob-dial,
.knob-input-wrap:focus-within .knob-dial{
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,.35))
    drop-shadow(0 3px 3px rgba(0,0,0,.74));
}

.sample-area{
  display:flex;
  width:100%;
  gap:5px;
}

.sample-area .sample-drop{
  flex:1;
  min-width:0;
  padding:5px;
  border-style:dashed;
  font-size:9px;
}

.sample-area .sample-drop.drag-over{
  border-color:var(--cyan);
  background:#15313a;
}

.sample-area .sample-reset{
  flex:0 0 36px;
  padding:5px 2px;
  font-size:9px;
}

.fader-label.compact{
  padding:2px 2px 0;
  font-size:11px;
}

/* ======================================
   Pads
   ====================================== */

.step{
  width:var(--step-size);
  height:var(--step-size);
  border:1px solid rgba(255,255,255,.055);
  border-radius:var(--radius);
  background:var(--bg-step);
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 2px 5px rgba(0,0,0,.16);
  transition:background-color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.step:nth-child(8n+5),
.step:nth-child(8n+6),
.step:nth-child(8n+7),
.step:nth-child(8n){
  background:var(--bg-step-alt);
}

.step:hover{
  background:var(--bg-control-hover);
  border-color:rgba(255,255,255,.16);
  transform:translateY(-1px);
}

.step.active{
  background:var(--accent);
  border-color:#ffd34f;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 1px rgba(230,170,6,.18), 0 3px 9px rgba(230,170,6,.18);
  filter:brightness(var(--step-strength, 1));
}

.step.selected{
  outline:2px solid var(--cyan);
  outline-offset:2px;
}

.step[data-ratchet]:not([data-ratchet=""])::after{
  content:attr(data-ratchet);
  display:block;
  color:var(--text-dark);
  font-size:8px;
  font-weight:800;
  line-height:1;
}

.step[data-probability]:not([data-probability=""])::before{
  content:"P";
  display:block;
  color:rgba(0,0,0,.72);
  font-size:7px;
  font-weight:800;
  line-height:1;
}

.step.inactive-step,
.step.inactive-step:hover,
.step.inactive-step.active{
  background:var(--bg-disabled);
  box-shadow:inset 0 0 0 1px #242424;
  cursor:not-allowed;
  opacity:.42;
  transform:none;
}

.step.playing{
  outline:3px solid var(--accent-strong);
  outline-offset:1px;
}

.song-step{
  color:var(--text-dark);
  font-size:12px;
  font-weight:700;
}

.song-step:not(.active){
  color:transparent;
}

.song-step[data-bank="A"]{
  background:var(--accent);
}

.song-step[data-bank="B"]{
  background:var(--bank-b);
}

.song-step[data-bank="C"]{
  background:var(--bank-c);
}

.song-step[data-bank="D"]{
  background:var(--bank-d);
}

.song-step:hover,
.song-step:focus-visible,
.song-step.song-current{
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.82), 0 0 0 1px rgba(255,255,255,.18), 0 0 14px rgba(255,255,255,.18);
  filter:brightness(1.12);
}

/* ======================================
   Secuenciador
   ====================================== */

#sequencer{
  width:max-content;
  min-width:max-content;
  margin:0 auto;
}

.step-position-dock{
  position:relative;
  display:block;
  max-width:var(--sequencer-frame-width);
  margin:0 auto 11px;
  padding:5px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.045);
  border-radius:9px;
  background:#151618;
}

.step-position-dock.stutter-looping{
  border-color:rgba(230,170,6,.2);
}

.step-position-scroll{
  align-self:center;
  min-width:0;
  margin-bottom:4px;
  padding-bottom:8px;
  scrollbar-width:thin;
}

#stepPosition{
  width:max-content;
  min-width:max-content;
  margin:0 auto;
}

.row{
  display:flex;
  align-items:center;
  gap:5px;
  margin-bottom:9px;
}

.track-name{
  width:var(--track-name-width);
  min-width:var(--track-name-width);
  color:#ededed;
  font-size:12px;
  font-weight:700;
  line-height:1.2;
}

.steps{
  display:flex;
  gap:5px;
}

.step-number-row{
  align-items:flex-end;
  margin-bottom:4px;
}

.step-number-controls-spacer{
  width:var(--track-control-width);
  min-width:var(--track-control-width);
  height:1px;
}

.step-number{
  display:flex;
  align-items:center;
  flex-direction:column;
  justify-content:flex-end;
  width:var(--step-size);
  height:29px;
  gap:4px;
  color:var(--text-muted);
  font-size:11px;
  font-weight:700;
  line-height:1;
  text-align:center;
}

.step-number-led{
  display:block;
  flex:0 0 9px;
  width:9px;
  height:9px;
  border:1px solid #090909;
  border-radius:50%;
  background:#3b3d41;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.08);
  transition:background-color 45ms linear, box-shadow 45ms linear;
}

.step-number.playing .step-number-led{
  background:var(--accent-strong);
  box-shadow:
    0 0 5px var(--accent-strong),
    0 0 12px rgba(255,255,0,.78);
}

.step-number.stutter-loop-step{
  color:var(--accent-strong);
}

.step-number.stutter-loop-pulse .step-number-led{
  animation:stutter-led-pulse 110ms ease-out;
}

.step-number-label{
  display:block;
  min-height:11px;
}

.step-number:nth-child(4n+1){
  color:var(--accent);
}

.step-number.inactive-step{
  color:#3a3a3a;
}

.step-number.inactive-step .step-number-led{
  background:#202124;
  box-shadow:none;
}

.mute-solo-group{
  display:flex;
  align-items:center;
  gap:7px;
  margin-right:12px;
}

.song-row{
  margin-top:0;
  padding-top:0;
  border-top:0;
}

.song-controls{
  margin-right:10px;
}

.song-controls .song-mode-btn{
  flex:0 0 auto;
  width:max-content;
  min-width:36px;
  padding-right:6px;
  padding-left:6px;
}

.tool-group{
  display:flex;
  align-items:center;
  gap:5px;
}

.track-tools{
  flex-wrap:wrap;
}

.track-selector{
  display:flex;
  align-items:center;
  flex:0 1 auto;
  min-width:0;
  gap:5px;
}

.track-tools label{
  color:var(--text-muted);
  font-size:9px;
  font-weight:700;
}

.track-tools select{
  min-width:0;
  max-width:130px;
}

.track-tools select,
.track-tools input{
  min-height:28px;
  accent-color:var(--accent);
  background:var(--bg-control);
  color:var(--text);
}

.track-tools output{
  min-width:30px;
  font-size:10px;
}

.editors-row{
  display:grid;
  grid-template-columns:minmax(0, var(--track-editor-width)) minmax(0, 1fr);
  align-items:stretch;
  width:100%;
  max-width:var(--sequencer-frame-width);
  gap:var(--spacing);
  margin:10px auto 0;
}

.track-editor{
  display:flex;
  align-items:center;
  min-width:0;
  max-width:100%;
  gap:12px;
}

.track-editor > strong{
  flex:0 0 auto;
  font-size:11px;
}

.track-editor .track-tools{
  flex:1 1 auto;
}

.track-select-button{
  padding:3px 4px;
  border:0;
  border-left:2px solid transparent;
  border-radius:3px;
  background:transparent;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
}

.track-select-button:hover{
  color:var(--cyan);
  background:rgba(0,191,255,.06);
}

.selected-track .track-select-button{
  border-left-color:var(--accent);
  color:var(--accent);
  background:transparent;
  text-decoration:none;
}

.step-editor{
  display:grid;
  grid-template-columns:minmax(100px, 1.1fr) repeat(3, minmax(82px, 1fr));
  align-items:center;
  min-width:0;
  max-width:100%;
  gap:8px;
}

.step-editor-heading{
  display:flex;
  flex-direction:column;
  min-width:0;
  gap:3px;
}

.step-editor-heading strong{
  font-size:11px;
}

.fine-tune-hint{
  display:flex;
  align-items:center;
  gap:4px;
  color:var(--text-muted);
  font-size:8px;
  font-weight:700;
  letter-spacing:.04em;
}

.fine-tune-hint kbd{
  padding:1px 3px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:3px;
  background:var(--bg-control);
  color:var(--text-soft);
  font:inherit;
}

.selected-step-toggle{
  display:flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  gap:4px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:var(--text-muted);
  font-size:10px;
  line-height:1.2;
  text-align:left;
  cursor:pointer;
}

.selected-step-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  transition:color var(--transition);
}

.selected-step-toggle:hover .selected-step-name{
  color:var(--text-soft);
}

.selected-step-toggle[aria-pressed="true"] .selected-step-name{
  color:var(--accent);
}

.step-editor label{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  min-width:0;
  gap:2px 4px;
  color:var(--text-muted);
  font-size:9px;
  font-weight:700;
}

.step-editor label input[type="range"]{
  grid-column:1 / -1;
  justify-self:start;
  width:min(100%, 110px);
  height:14px;
  margin:0;
  accent-color:var(--accent);
}

.step-editor output{
  color:var(--text);
  font-size:10px;
}

.app-dialog{
  width:min(520px, calc(100vw - 24px));
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--bg-panel);
  color:var(--text);
  box-shadow:var(--shadow);
}

.app-dialog::backdrop{
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(3px);
}

.app-dialog header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.app-dialog h2{
  margin:0;
  font-size:18px;
}

.app-dialog header button{
  width:34px;
  height:34px;
  border:0;
  border-radius:6px;
  background:var(--bg-control);
  color:var(--text);
  font-size:22px;
  cursor:pointer;
}

.app-dialog dl{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:8px 14px;
}

.app-dialog dt{
  color:var(--accent);
  font-weight:700;
}

.app-dialog dd{
  margin:0;
  color:var(--text-soft);
}

.info-dialog{
  width:min(720px, calc(100vw - 24px));
  max-height:calc(100dvh - 32px);
  padding:0;
  overflow:hidden;
  border-color:rgba(230,170,6,.28);
  background:
    radial-gradient(circle at 10% 0, rgba(230,170,6,.09), transparent 32%),
    linear-gradient(180deg, #27282c, #1c1d20);
}

.info-dialog > form{
  display:flex;
  flex-direction:column;
  max-height:calc(100dvh - 34px);
}

.info-dialog header{
  flex:0 0 auto;
  padding:18px 20px 15px;
  border-bottom:1px solid var(--border-dark);
  background:rgba(13,13,13,.28);
}

.info-dialog-kicker{
  margin:0 0 5px;
  color:var(--accent);
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em;
}

.info-dialog-content{
  display:grid;
  gap:12px;
  min-height:0;
  padding:16px 20px 20px;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:#777b83 #17181b;
  overscroll-behavior:contain;
}

.info-dialog-content::-webkit-scrollbar{
  width:8px;
}

.info-dialog-content::-webkit-scrollbar-track{
  border-radius:999px;
  background:#17181b;
}

.info-dialog-content::-webkit-scrollbar-thumb{
  border:2px solid #17181b;
  border-radius:999px;
  background:#777b83;
}

.info-card{
  padding:15px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:11px;
  background:rgba(52,54,58,.58);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

.info-credits-card{
  border-color:rgba(230,170,6,.24);
  background:linear-gradient(145deg, rgba(230,170,6,.09), rgba(52,54,58,.55));
}

.info-warning-card{
  border-color:rgba(239,83,80,.25);
}

.info-card-heading{
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:11px;
}

.info-card-icon{
  display:grid;
  place-items:center;
  flex:0 0 42px;
  width:42px;
  height:42px;
  border:1px solid rgba(230,170,6,.28);
  border-radius:9px;
  background:rgba(230,170,6,.08);
  color:var(--accent-strong);
  font-size:12px;
  font-weight:900;
  line-height:1.05;
  text-align:center;
}

.info-warning-card .info-card-icon{
  border-color:rgba(239,83,80,.38);
  background:rgba(239,83,80,.09);
  color:#ff817f;
  font-size:20px;
}

.info-card-label{
  margin:0 0 4px;
  color:var(--accent);
  font-size:9px;
  font-weight:800;
  letter-spacing:.11em;
}

.info-card h3{
  margin:0;
  color:var(--text);
  font-size:15px;
  line-height:1.25;
}

.info-card > p,
.info-card li{
  color:var(--text-soft);
  font-size:12px;
  line-height:1.55;
}

.info-card > p{
  margin:9px 0 0;
}

.info-card .info-muted{
  color:var(--text-muted);
  font-size:11px;
}

.info-card .info-free-project{
  padding:9px 10px;
  border-left:3px solid var(--accent);
  border-radius:0 7px 7px 0;
  background:rgba(230,170,6,.08);
  color:var(--text);
  font-weight:700;
}

.info-notice{
  padding:10px 11px;
  border-left:3px solid var(--bank-d);
  border-radius:0 7px 7px 0;
  background:rgba(239,83,80,.07);
}

.info-storage-note{
  border-left-color:var(--accent);
  background:rgba(230,170,6,.07);
}

.info-credit-links{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:12px;
}

.info-credit-links a{
  padding:7px 9px;
  border:1px solid rgba(230,170,6,.24);
  border-radius:7px;
  background:rgba(13,13,13,.25);
  color:var(--accent-strong);
  font-size:10px;
  font-weight:800;
  text-decoration:none;
  transition:border-color var(--transition), background var(--transition), transform var(--transition);
}

.info-credit-links a:hover{
  border-color:var(--accent);
  background:rgba(230,170,6,.1);
  transform:translateY(-1px);
}

.info-steps,
.info-recommendations{
  display:grid;
  gap:7px;
  margin:10px 0 0;
  padding-left:22px;
}

.info-steps li::marker{
  color:var(--accent);
  font-weight:900;
}

.info-recommendations li::marker{
  color:var(--success);
}

@media (max-width:520px){
  .info-dialog{
    width:calc(100vw - 12px);
    max-height:calc(100dvh - 12px);
  }

  .info-dialog > form{
    max-height:calc(100dvh - 14px);
  }

  .info-dialog header{
    padding:14px 14px 12px;
  }

  .info-dialog-content{
    padding:12px 14px 15px;
  }

  .info-card{
    padding:13px;
  }

  .info-card > p,
  .info-card li{
    font-size:11px;
  }
}

.recording-downloads{
  display:grid;
  gap:7px;
  max-height:55vh;
  overflow:auto;
  scrollbar-width:none;
}

.download-link{
  display:block;
}

/* ======================================
   Animaciones
   ====================================== */

@keyframes pulse{
  0%,
  100%{
    opacity:1;
  }

  50%{
    opacity:.7;
  }
}

@keyframes stutter-step-pulse{
  0%{
    border-color:var(--accent-strong);
    box-shadow:
      0 0 5px var(--accent-strong),
      0 0 14px rgba(255,255,0,.72);
  }

  100%{
    box-shadow:0 0 13px rgba(230,170,6,.4);
  }
}

@keyframes stutter-led-pulse{
  0%{
    background:#fff;
    box-shadow:
      0 0 6px #fff,
      0 0 13px var(--accent-strong);
  }

  100%{
    background:var(--accent-strong);
    box-shadow:0 0 5px rgba(255,255,0,.8);
  }
}

@keyframes song-mode-engage{
  0%{
    filter:brightness(1.45);
    transform:scale(.9);
  }

  58%{
    transform:scale(1.07);
  }

  100%{
    filter:brightness(1);
    transform:scale(1);
  }
}

@keyframes song-mode-beat{
  0%{
    border-color:#d8ffc2;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.34),
      0 0 0 1px rgba(181,255,132,.28),
      0 4px 16px rgba(75,189,0,.42);
    filter:brightness(1.17);
    transform:scale(1.025);
  }

  24%,
  100%{
    border-color:rgba(181,255,132,.72);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.22),
      0 4px 12px rgba(75,189,0,.22);
    filter:brightness(1);
    transform:scale(1);
  }
}

@keyframes song-mode-progress{
  from{
    transform:scaleX(0);
  }

  to{
    transform:scaleX(1);
  }
}

@keyframes song-mode-sweep{
  0%,
  68%{
    transform:translateX(-36%);
  }

  100%{
    transform:translateX(36%);
  }
}

@keyframes project-menu-item-in{
  from{
    opacity:0;
    translate:-8px 0;
  }

  to{
    opacity:1;
    translate:0 0;
  }
}

@keyframes project-menu-cue-pulse{
  0%, 100%{
    box-shadow:0 4px 10px rgba(0,0,0,.4), 0 0 0 0 rgba(230,170,6,.34);
  }

  50%{
    box-shadow:0 4px 12px rgba(0,0,0,.44), 0 0 0 5px rgba(230,170,6,0);
  }
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ======================================
   Media Queries
   ====================================== */

@media (max-width:1200px){
  body{
    padding:12px;
  }

  .container{
    min-height:calc(100vh - 24px);
    padding:12px;
    border-radius:16px;
  }

  .topbar{
    display:grid;
    grid-template-columns:repeat(12, minmax(0, 1fr));
    grid-template-rows:auto auto;
    grid-auto-rows:0;
    justify-items:center;
    gap:var(--spacing);
    overflow:hidden;
  }

  .topbar .panel{
    width:100%;
    min-width:0;
  }

  .transport{
    grid-row:1;
    grid-column:2 / -1;
  }

.bank-panel{
  grid-row:2;
  grid-column:1 / span 3;
}

.pattern-length-panel{
  grid-row:2;
  grid-column:4 / span 2;
}

.kit-panel{
  grid-row:2;
  grid-column:6 / span 3;
}

  .mixer{
    min-height:0;
    margin-top:0;
    padding-bottom:8px;
  }

}

@media (max-width:1360px){
  .editors-row{
    grid-template-columns:minmax(0, 1fr);
  }
}

@media (max-width:960px){
  .bank-panel > label,
  .pattern-length-panel > label,
  .kit-panel > label{
    display:none;
  }

}

@media (max-width:760px){
  body{
    padding:8px;
  }

  .step-position-dock{
    gap:5px;
    padding:4px;
  }

  .master-effects-dock{
    top:4px;
    left:4px;
    padding:3px 4px;
    gap:4px;
  }

  .master-effects-title{
    display:none;
  }

  .stutter-rate-grid{
    grid-template-columns:repeat(3, 40px);
    gap:4px;
  }

  .stutter-rate-pad{
    min-height:32px;
    padding:4px;
    gap:3px;
    font-size:9px;
  }

  .container{
    min-height:calc(100vh - 16px);
    padding:10px;
    border-radius:14px;
  }

  .topbar{
    grid-template-columns:repeat(12, minmax(0, 1fr));
    grid-template-rows:auto auto;
    grid-auto-rows:0;
    gap:var(--spacing);
    margin-bottom:10px;
    overflow:hidden;
  }

  .topbar .panel{
    min-height:44px;
    padding:8px;
  }

  .transport{
    display:flex;
    grid-row:1;
    grid-column:2 / -1;
    gap:8px;
  }

  .transport button{
    flex:1 1 68px;
    width:auto;
    padding:10px 8px;
  }

  .transport .bpm-control,
  .transport .swing-control{
    flex:auto;
    width:auto;
    min-width:86px;
  }

  .transport .recording-stopwatch{
    flex:0 0 82px;
    width:82px;
  }

  .bank-panel{
    grid-row:2;
    grid-column:1 / span 4;
  }

  .pattern-length-panel{
    grid-row:2;
    grid-column:5 / span 2;
  }

  .kit-panel{
    grid-row:2;
    grid-column:7 / span 3;
  }

  .view-switch{
    grid-row:2;
    grid-column:10 / -1;
  }

}

@media (max-width:520px){
  .topbar{
    grid-template-columns:repeat(12, minmax(0, 1fr));
    grid-template-rows:auto auto;
    grid-auto-rows:0;
    overflow:hidden;
  }

  .transport{
    grid-row:1;
    grid-column:2 / -1;
    max-width:100%;
    min-width:0;
    gap:5px;
    overflow:visible;
  }

  .topbar{
    display:flex;
    flex-direction:column;
    grid-template-columns:none;
    grid-template-rows:none;
    overflow:visible;
  }

  .topbar .panel,
  .project-sidebar-toggle,
  .transport,
  .bank-panel,
  .kit-panel,
  .pattern-length-panel{
    width:100%;
  }

  .transport button{
    flex:1 1 74px;
    max-width:104px;
    padding:9px 4px;
    font-size:10px;
  }

  .transport .bpm-control{
    flex:0 1 82px;
    width:82px;
    min-width:74px;
  }

  .transport .recording-stopwatch{
    flex:0 1 78px;
    width:78px;
    min-width:74px;
    padding-right:5px;
    padding-left:5px;
  }

  .transport .swing-control{
    flex:0 1 96px;
    width:96px;
    min-width:88px;
  }

  .transport .bpm-drag-hint{
    display:none;
  }

  .transport #clearBtn{
    order:2;
  }

  .transport .record-duration-control,
  .transport .record-option{
    order:3;
  }

  .transport .check-option{
    flex:1 0 100%;
    justify-content:center;
  }

  .transport .swing-label{
    font-size:10px;
  }

  .bank-panel,
  .kit-panel,
  .pattern-length-panel{
    justify-content:center;
  }

  .bank-panel label,
  .kit-panel label,
  .pattern-length-panel label{
    flex:0 0 auto;
  }

  .row{
    margin-bottom:7px;
  }

  .track-name{
    width:92px;
    min-width:92px;
    font-size:10px;
  }

  .mute-solo-group{
    gap:5px;
    margin-right:8px;
  }

  .mute-btn,
  .solo-btn,
  .song-mode-btn,
  .song-reset-btn{
    width:32px;
    min-width:32px;
    padding:7px 0;
  }

  .step-number-controls-spacer{
    width:70px;
    min-width:70px;
  }

  .step,
  .step-number{
    width:32px;
  }

  .step{
    height:32px;
    border-radius:7px;
  }

  .step-number{
    font-size:9px;
  }

  .channel{
    width:112px;
    min-width:112px;
  }
}

/* ======================================
   Responsive layout refinement
   ====================================== */

@media (max-width:1200px){
  :root{
    --control-height:34px;
    --spacing:8px;
    --step-size:32px;
  }

  body{
    padding:10px;
  }

  .container{
    min-height:calc(100dvh - 20px);
    padding:10px;
    border-radius:14px;
  }

  .topbar{
    grid-template-columns:repeat(12, minmax(0, 1fr));
    grid-template-rows:auto auto;
    grid-auto-rows:0;
    gap:var(--spacing);
    margin-bottom:8px;
    overflow:visible;
  }

  .topbar .panel,
  .view-switch{
    min-height:44px;
    padding:6px 8px;
  }

  .project-sidebar-toggle{
    min-height:44px;
    padding:2px 4px;
  }

  .topbar .project-sidebar-toggle{
    gap:0;
  }

  .project-brand-mark-toggle{
    width:44px;
    height:44px;
  }

  .transport{
    display:flex;
    grid-row:1;
    grid-column:2 / -1;
    flex-wrap:nowrap;
    gap:6px;
    overflow:hidden;
  }

  .transport button{
    min-height:var(--control-height);
    padding:6px 10px;
  }

  .recording-stopwatch{
    flex-basis:74px;
    width:74px;
    padding:4px 6px;
    gap:4px;
  }

  .recording-stopwatch time{
    font-size:15px;
  }

  .transport .bpm-control,
  .transport .swing-control{
    flex-basis:89px;
    width:89px;
  }

  .transport .bpm-control,
  .transport .swing-control{
    padding:4px 5px;
    gap:3px;
  }

  #bpmInput,
  #swingInput{
    height:22px;
    font-size:16px;
    line-height:22px;
  }

  .bpm-drag-hint{
    display:none;
  }

  .transport .swing-control{
    gap:2px;
    padding-right:3px;
    padding-left:3px;
  }

  #swingInput{
    flex-basis:2.6ch;
    width:2.6ch;
    min-width:2.6ch;
  }

  .swing-unit{
    margin-left:-1px;
    font-size:12px;
  }

  .record-option{
    flex:0 0 auto;
    gap:4px;
    white-space:nowrap;
  }

  .record-option select{
    min-height:28px;
    padding:3px 5px;
  }

  .bank-panel,
  .pattern-length-panel,
  .kit-panel{
    flex-wrap:nowrap;
    gap:6px;
  }

  .bank-panel{
    grid-row:2;
    grid-column:1 / span 3;
  }

  .pattern-length-panel{
    grid-row:2;
    grid-column:4 / span 2;
  }

  .kit-panel{
    grid-row:2;
    grid-column:6 / span 3;
  }

  .view-switch{
    grid-row:2;
    grid-column:9 / -1;
    gap:6px;
  }

  .bank-btn,
  .sound-bank-btn,
  .pattern-length-btn{
    min-height:var(--control-height);
    padding:6px 9px;
  }

  .view-switch-btn{
    height:var(--control-height);
    min-width:54px;
    min-height:var(--control-height);
    padding:6px 9px;
  }

  .song-chain-dock{
    margin-bottom:6px;
  }

  .step-position-dock{
    margin-bottom:6px;
  }

  .row{
    margin-bottom:6px;
  }

  .step-number-row{
    margin-bottom:3px;
  }

  .step-number{
    height:25px;
  }

  .editors-row{
    gap:8px;
    margin-top:6px;
  }

  .track-editor{
    gap:8px;
  }

  .panel.track-editor,
  .panel.step-editor{
    padding:8px 10px;
  }

  footer{
    margin-top:8px;
    padding-top:6px;
    font-size:10px;
    line-height:1.25;
  }
}

@media (max-width:960px){
  :root{
    --spacing:7px;
  }

  .bank-panel{
    grid-column:1 / span 4;
  }

  .pattern-length-panel{
    grid-column:5 / span 2;
  }

  .kit-panel{
    grid-column:7 / span 4;
  }

  .view-switch{
    grid-column:11 / -1;
    padding-right:5px;
    padding-left:5px;
    gap:4px;
  }

  .view-switch-btn{
    min-width:44px;
    padding-right:5px;
    padding-left:5px;
    font-size:10px;
  }

  .bank-panel > label,
  .pattern-length-panel > label,
  .kit-panel > label{
    display:none;
  }
}

@media (max-width:800px){
  body{
    padding:7px;
  }

  .container{
    min-height:calc(100dvh - 14px);
    padding:8px;
    border-radius:12px;
  }

}

@media (max-width:720px){
  :root{
    --control-height:32px;
    --fader-height:100px;
    --spacing:6px;
    --step-size:30px;
    --track-control-width:68px;
    --track-name-width:86px;
  }

  body{
    padding:5px;
  }

  .container{
    min-height:calc(100dvh - 10px);
    padding:7px;
    border-radius:11px;
  }

  .project-sidebar-toggle-cue{
    top:4px;
    right:4px;
    min-width:22px;
    min-height:18px;
    justify-content:center;
    padding:3px 4px;
  }

  .project-sidebar-toggle-cue > :last-child{
    display:none;
  }

  .project-sidebar-toggle-icon{
    width:13px;
    height:10px;
  }

  .topbar{
    display:flex;
    align-items:stretch;
    flex-direction:row;
    flex-wrap:wrap;
    gap:6px;
    width:100%;
    max-width:100%;
    min-width:0;
    margin-bottom:6px;
    overflow:visible;
  }

  .topbar .project-sidebar-toggle{
    flex:0 0 74px;
    width:74px;
    min-height:74px;
  }

  .project-brand-mark-toggle{
    width:56px;
    height:56px;
  }

  .topbar .transport{
    --transport-wide-column:calc((100% - 112px) / 2);
    display:grid;
    flex:1 0 calc(100% - 80px);
    grid-template-columns:repeat(3, 32px) minmax(56px, 1fr) minmax(60px, 1fr);
    grid-template-rows:32px 32px;
    align-items:center;
    width:auto;
    max-width:none;
    min-height:74px;
    padding:5px;
    gap:4px;
    overflow:hidden;
  }

  .transport > *{
    min-width:0;
  }

  .transport-secondary-row{
    display:flex;
    grid-row:2;
    grid-column:1 / -1;
    align-items:center;
    justify-content:center;
    width:100%;
    min-width:0;
    gap:4px;
  }

  .transport-secondary-row > *{
    min-width:0;
  }

  .transport #playBtn{
    grid-row:1;
    grid-column:1;
  }

  .transport #stopBtn{
    grid-row:1;
    grid-column:2;
  }

  .transport #recordBtn{
    grid-row:1;
    grid-column:3;
  }

  .transport .recording-stopwatch{
    grid-row:1;
    grid-column:4;
  }

  .transport .bpm-control{
    grid-row:1;
    grid-column:5;
  }

  .transport .transport-secondary-row .swing-control{
    display:grid;
    order:4;
    flex:0 0 var(--transport-wide-column);
    width:var(--transport-wide-column);
    grid-template-columns:auto 2.7ch auto;
    justify-content:center;
    column-gap:1px;
  }

  .transport #clearBtn{
    order:1;
    flex:0 0 32px;
    width:32px;
    font-size:0;
  }

  .transport #clearBtn::after{
    content:"CLR";
    font-size:8px;
  }

  .transport-secondary-row > .record-duration-control{
    order:2;
    display:grid;
    flex:1 1 96px;
    grid-template-columns:minmax(52px, 1fr) minmax(36px, .62fr);
    gap:3px;
  }

  .transport-secondary-row > .check-option{
    order:3;
    flex:0 0 auto;
  }

  .transport button,
  .transport button.transport-symbol-btn{
    width:100%;
    min-width:0;
    max-width:none;
    height:32px;
    min-height:32px;
    max-height:32px;
    padding:0;
  }

  .transport .recording-stopwatch,
  .transport .bpm-control,
  .transport .swing-control{
    width:100%;
    min-width:0;
    max-width:none;
    height:32px;
    min-height:32px;
    max-height:32px;
    padding:3px 4px;
  }

  .recording-stopwatch{
    gap:3px;
  }

  .recording-stopwatch-dot{
    flex-basis:5px;
    width:5px;
    height:5px;
  }

  .recording-stopwatch time{
    font-size:13px;
  }

  #bpmInput,
  #swingInput{
    height:20px;
    font-size:14px;
    line-height:20px;
  }

  .bpm-label,
  .swing-label{
    font-size:9px;
  }

  #swingInput{
    width:2.7ch;
    min-width:2.7ch;
    font-size:13px;
  }

  .bpm-drag-hint{
    display:none;
  }

  .swing-unit{
    margin-left:0;
    font-size:11px;
  }

  .record-duration-control > .record-option{
    display:block;
    min-width:0;
  }

  .record-duration-control > .record-option > span{
    display:none;
  }

  .record-duration-control > .record-option select{
    width:100%;
    min-width:0;
    min-height:28px;
    padding:2px 3px;
  }

  .transport-secondary-row > .check-option{
    justify-content:center;
    gap:3px;
    font-size:8px !important;
  }

  .transport-secondary-row > .check-option input{
    width:12px;
    height:12px;
    margin:0;
  }

  .bank-panel,
  .pattern-length-panel,
  .kit-panel,
  .view-switch{
    min-height:42px;
    padding:4px 6px;
    gap:4px;
  }

  .topbar .bank-panel{
    flex:0 0 60%;
    width:60%;
  }

  .topbar .pattern-length-panel{
    flex:1 1 0;
    width:auto;
    min-width:0;
  }

  .topbar .kit-panel{
    flex:0 0 56%;
    width:56%;
  }

  .topbar .view-switch{
    flex:1 1 0;
    width:auto;
    min-width:0;
  }

  .bank-btn,
  .sound-bank-btn,
  .pattern-length-btn,
  .view-switch-btn{
    min-height:32px;
    height:32px;
    padding:5px 7px;
    font-size:10px;
  }

  .view-switch-btn{
    min-width:42px;
  }

  .step-position-dock{
    padding:3px;
  }

  .master-effects-dock{
    top:3px;
    left:3px;
    padding:3px;
    gap:3px;
  }

  .stutter-rate-grid{
    grid-template-columns:repeat(3, 36px);
    gap:3px;
  }

  .stutter-rate-pad{
    min-height:28px;
    padding:3px 2px;
    gap:2px;
    font-size:8px;
  }

  .stutter-rate-led{
    flex-basis:5px;
    width:5px;
    height:5px;
  }

  .row{
    margin-bottom:5px;
  }

  .step-number{
    height:23px;
    gap:3px;
    font-size:8px;
  }

  .step-number-led{
    flex-basis:7px;
    width:7px;
    height:7px;
  }

  .track-name{
    font-size:9px;
  }

  .mute-solo-group{
    gap:4px;
    margin-right:6px;
  }

  .mute-btn,
  .solo-btn,
  .song-mode-btn,
  .song-reset-btn{
    width:30px;
    min-width:30px;
    min-height:30px;
    padding:5px 0;
    font-size:10px;
  }

  .step{
    height:var(--step-size);
    border-radius:6px;
  }

  .editors-row{
    gap:6px;
    margin-top:5px;
  }

  .panel.track-editor,
  .panel.step-editor{
    padding:6px 7px;
  }

  .track-editor{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    align-items:stretch;
    min-height:0;
    gap:6px;
    overflow:visible;
  }

  .track-editor > strong{
    display:block;
    font-size:10px;
  }

  .track-editor .track-tools{
    display:grid;
    grid-template-columns:repeat(6, minmax(0, 1fr));
    width:100%;
    min-width:0;
    gap:5px;
    overflow:visible;
    padding:0;
    scrollbar-gutter:auto;
  }

  .track-editor .track-tools > *{
    min-width:0;
    max-width:none;
  }

  .track-editor .track-selector{
    grid-row:1;
    grid-column:1 / span 2;
    width:100%;
  }

  .track-editor .track-selector select{
    flex:1 1 auto;
    width:100%;
    max-width:none;
  }

  .track-editor #undoBtn{
    grid-row:1;
    grid-column:3;
  }

  .track-editor #copyTrackBtn{
    grid-row:1;
    grid-column:4;
  }

  .track-editor #pasteTrackBtn{
    grid-row:1;
    grid-column:5;
  }

  .track-editor #duplicatePatternBtn{
    grid-row:1;
    grid-column:6;
  }

  .track-editor #shiftLeftBtn{
    grid-row:2;
    grid-column:1 / span 2;
  }

  .track-editor #shiftRightBtn{
    grid-row:2;
    grid-column:3 / span 2;
  }

  .track-editor #clearTrackBtn{
    grid-row:2;
    grid-column:5 / span 2;
  }

  .track-editor button{
    width:100%;
    min-height:34px;
    padding:6px 3px;
    overflow:hidden;
    font-size:9px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .step-editor{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:7px;
  }

  .step-editor-heading{
    display:grid;
    grid-column:1 / -1;
    grid-template-columns:auto 1fr minmax(0, 1fr);
    align-items:center;
    gap:6px;
  }

  .step-editor-heading strong,
  .fine-tune-hint{
    white-space:nowrap;
  }

  .step-editor-heading .fine-tune-hint{
    justify-self:center;
  }

  .step-editor-heading .selected-step-toggle{
    justify-self:stretch;
    justify-content:flex-end;
    width:100%;
    min-width:0;
  }

  .step-editor label input[type="range"]{
    width:100%;
    min-width:0;
    max-width:100%;
    height:18px;
  }

  .channel{
    width:108px;
    min-width:108px;
    padding:8px 7px;
    gap:7px;
  }

  .track-knobs,
  .track-knobs.master-knobs{
    grid-template-columns:repeat(2, 44px);
    gap:7px 4px;
  }

  .knob-control{
    width:44px;
  }

  .knob-input-wrap{
    width:40px;
    height:40px;
  }

  .knob-dial::after{
    height:15px;
    transform-origin:50% 13px;
  }

  .fader-group.compact .vertical-fader::-webkit-slider-thumb{
    width:28px;
    height:38px;
  }

  .fader-group.compact .vertical-fader::-moz-range-thumb{
    width:28px;
    height:38px;
  }

  footer{
    margin-top:6px;
    padding-top:5px;
    font-size:9px;
  }

  footer p + p{
    display:none;
  }

  .app-footer{
    display:none;
  }

  .sequencer-scroll,
  .step-position-scroll,
  .song-chain-dock,
  .mixer{
    scrollbar-width:none;
  }

  .sequencer-scroll::-webkit-scrollbar,
  .step-position-scroll::-webkit-scrollbar,
  .song-chain-dock::-webkit-scrollbar,
  .mixer::-webkit-scrollbar{
    height:0;
  }

  .app-dialog{
    max-height:calc(100dvh - 16px);
    overflow-y:auto;
    scrollbar-width:none;
  }

  .app-dialog::-webkit-scrollbar{
    width:0;
  }
}

@media (max-width:520px){
  .transport .check-option > span{
    display:none;
  }

  .step-editor{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    align-items:start;
    gap:9px 10px;
  }

  .step-editor > label:last-child{
    grid-column:1 / -1;
  }
}

@media (max-width:360px){
  .step-editor{
    grid-template-columns:minmax(0, 1fr);
  }

  .step-editor > label:last-child{
    grid-column:auto;
  }

  .step-editor-heading{
    grid-template-columns:1fr auto;
  }

  .step-editor-heading .fine-tune-hint{
    justify-self:end;
  }

  .step-editor-heading .selected-step-toggle{
    grid-column:1 / -1;
    justify-content:flex-start;
  }
}

@media (max-width:420px){
  :root{
    --control-height:30px;
    --fader-height:88px;
    --step-size:29px;
    --track-control-width:62px;
    --track-name-width:80px;
  }

  body{
    padding:4px;
  }

  .container{
    min-height:calc(100dvh - 8px);
    padding:6px;
    border-radius:10px;
  }

  .topbar{
    gap:5px;
  }

  .project-brand-mark-toggle{
    width:50px;
    height:50px;
  }

  .topbar .transport{
    --transport-wide-column:calc((100% - 106px) / 2);
    grid-template-columns:repeat(3, 30px) minmax(52px, 1fr) minmax(56px, 1fr);
    grid-template-rows:30px 30px;
    min-height:70px;
    padding:4px;
    gap:4px;
  }

  .topbar .project-sidebar-toggle{
    flex-basis:60px;
    width:60px;
    min-height:70px;
  }

  .topbar .transport{
    flex-basis:calc(100% - 65px);
    width:auto;
    max-width:none;
  }

  .transport button,
  .transport button.transport-symbol-btn,
  .transport .recording-stopwatch,
  .transport .bpm-control,
  .transport .swing-control{
    height:30px;
    min-height:30px;
    max-height:30px;
  }

  .bank-panel,
  .pattern-length-panel,
  .kit-panel,
  .view-switch{
    min-height:40px;
    padding:3px 4px;
  }

  .bank-btn,
  .sound-bank-btn,
  .pattern-length-btn,
  .view-switch-btn{
    min-height:30px;
    height:30px;
    padding:4px 6px;
  }

  .view-switch-btn{
    min-width:39px;
    font-size:9px;
  }

  .track-name{
    font-size:8px;
  }

  .mute-solo-group{
    margin-right:4px;
  }

  .mute-btn,
  .solo-btn,
  .song-mode-btn,
  .song-reset-btn{
    width:28px;
    min-width:28px;
    min-height:28px;
  }
}

@media (max-height:600px) and (orientation:landscape){
  :root{
    --control-height:30px;
    --fader-height:84px;
    --spacing:5px;
    --step-size:26px;
    --track-control-width:58px;
    --track-name-width:78px;
  }

  body{
    padding:4px;
  }

  .container{
    min-height:calc(100dvh - 8px);
    padding:6px;
    border-radius:10px;
  }

  .project-sidebar-toggle-cue{
    top:3px;
    right:3px;
    min-width:21px;
    min-height:17px;
    justify-content:center;
    padding:3px;
  }

  .project-sidebar-toggle-cue > :last-child{
    display:none;
  }

  .topbar{
    display:flex;
    align-items:stretch;
    flex-direction:row;
    width:100%;
    gap:5px;
    margin-bottom:5px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
  }

  .topbar::-webkit-scrollbar{
    height:0;
  }

  .topbar > *{
    grid-row:auto;
    grid-column:auto;
  }

  .topbar .project-sidebar-toggle{
    flex:0 0 62px;
    width:62px;
    min-height:40px;
  }

  .project-brand-mark-toggle{
    width:34px;
    height:34px;
  }

  .topbar .transport{
    display:flex;
    flex:0 0 auto;
    flex-wrap:nowrap;
    width:auto;
    min-height:40px;
    padding:4px 5px;
    gap:4px;
    overflow:visible;
  }

  .transport > *{
    grid-row:auto !important;
    grid-column:auto !important;
  }

  .transport-secondary-row{
    display:contents;
  }

  .transport-secondary-row > *{
    order:0;
  }

  .transport button,
  .transport button.transport-symbol-btn{
    flex:0 0 var(--control-height);
    width:var(--control-height);
    min-width:var(--control-height);
    max-width:none;
    height:var(--control-height);
    min-height:var(--control-height);
    max-height:var(--control-height);
    padding:0;
  }

  .transport #clearBtn{
    flex-basis:auto;
    width:auto;
    padding:5px 8px;
    font-size:10px;
  }

  .transport #clearBtn::after{
    content:none;
  }

  .transport .recording-stopwatch{
    flex:0 0 66px;
    width:66px;
  }

  .transport .bpm-control,
  .transport .transport-secondary-row .swing-control{
    flex:0 0 82px;
    width:82px;
  }

  .transport .bpm-drag-hint{
    display:none;
  }

  .transport-secondary-row > .record-duration-control{
    display:flex;
    flex:0 0 auto;
  }

  .record-duration-control > .record-option{
    display:flex;
  }

  .record-duration-control > .record-option > span{
    display:inline;
  }

  .record-duration-control > .record-option select{
    width:auto;
  }

  .transport-secondary-row > .check-option{
    flex:0 0 auto;
  }

  .topbar .bank-panel,
  .topbar .pattern-length-panel,
  .topbar .kit-panel,
  .topbar .view-switch{
    flex:0 0 auto;
    width:max-content;
    min-width:max-content;
    min-height:40px;
    padding:4px 6px;
    gap:4px;
  }

  .bank-panel > label,
  .pattern-length-panel > label,
  .kit-panel > label{
    display:none;
  }

  .bank-btn,
  .sound-bank-btn,
  .pattern-length-btn,
  .view-switch-btn{
    min-height:30px;
    height:30px;
    padding:4px 7px;
  }

  .song-chain-dock{
    margin-bottom:4px;
    padding-bottom:0;
  }

  .step-position-dock{
    margin-bottom:4px;
    padding:2px;
  }

  .master-effects-dock{
    top:2px;
    left:2px;
    padding:2px;
  }

  .stutter-rate-grid{
    grid-template-columns:repeat(3, 32px);
  }

  .stutter-rate-pad{
    min-height:26px;
  }

  .row{
    margin-bottom:2px;
  }

  .step-number-row{
    margin-bottom:2px;
  }

  .step-number{
    height:20px;
  }

  .step{
    height:var(--step-size);
    border-radius:5px;
  }

  .track-name{
    font-size:8px;
  }

  .mute-solo-group{
    gap:3px;
    margin-right:4px;
  }

  .mute-btn,
  .solo-btn,
  .song-mode-btn,
  .song-reset-btn{
    width:26px;
    min-width:26px;
    min-height:26px;
    padding:3px 0;
    font-size:9px;
  }

  .editors-row{
    gap:5px;
    margin-top:4px;
  }

  .panel.track-editor,
  .panel.step-editor{
    padding:5px 6px;
  }

  .app-footer{
    display:none;
  }
}

@media (pointer:coarse){
  .sequencer-scroll,
  .step-position-scroll,
  .song-chain-dock,
  .mixer,
  .editors-row{
    scrollbar-width:none;
  }

  .sequencer-scroll::-webkit-scrollbar,
  .step-position-scroll::-webkit-scrollbar,
  .song-chain-dock::-webkit-scrollbar,
  .mixer::-webkit-scrollbar,
  .editors-row::-webkit-scrollbar{
    height:0;
  }
}

/* ======================================
   Responsive horizontal scrollbars
   ====================================== */

.sequencer-scroll,
.step-position-scroll,
.song-chain-dock,
.mixer,
.topbar{
  scrollbar-width:thin;
  scrollbar-color:#696d74 #17181b;
}

.mixer{
  scrollbar-color:#58b85c #17181b;
}

.sequencer-scroll::-webkit-scrollbar,
.step-position-scroll::-webkit-scrollbar,
.song-chain-dock::-webkit-scrollbar,
.mixer::-webkit-scrollbar,
.topbar::-webkit-scrollbar{
  width:8px;
  height:8px;
}

.sequencer-scroll::-webkit-scrollbar-track,
.step-position-scroll::-webkit-scrollbar-track,
.song-chain-dock::-webkit-scrollbar-track,
.mixer::-webkit-scrollbar-track,
.topbar::-webkit-scrollbar-track{
  margin-right:10px;
  margin-left:10px;
  border:2px solid transparent;
  border-radius:999px;
  background:#17181b;
  background-clip:padding-box;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);
}

.sequencer-scroll::-webkit-scrollbar-thumb,
.step-position-scroll::-webkit-scrollbar-thumb,
.song-chain-dock::-webkit-scrollbar-thumb,
.topbar::-webkit-scrollbar-thumb{
  min-width:38px;
  border:2px solid transparent;
  border-radius:999px;
  background:linear-gradient(90deg, #555960, #777b83);
  background-clip:padding-box;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}

.mixer::-webkit-scrollbar-thumb{
  min-width:38px;
  border:2px solid transparent;
  border-radius:999px;
  background:linear-gradient(90deg, #357f38, #58b85c);
  background-clip:padding-box;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}

.sequencer-scroll::-webkit-scrollbar-thumb:hover,
.step-position-scroll::-webkit-scrollbar-thumb:hover,
.song-chain-dock::-webkit-scrollbar-thumb:hover,
.topbar::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(90deg, #9a7208, var(--accent));
  background-clip:padding-box;
}

.mixer::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(90deg, #429b45, var(--bank-c));
  background-clip:padding-box;
}

.sequencer-scroll::-webkit-scrollbar-corner,
.step-position-scroll::-webkit-scrollbar-corner,
.song-chain-dock::-webkit-scrollbar-corner,
.mixer::-webkit-scrollbar-corner,
.topbar::-webkit-scrollbar-corner{
  background:transparent;
}

@media (max-width:1200px){
  .sequencer-scroll,
  .step-position-scroll,
  .song-chain-dock,
  .mixer{
    padding-bottom:10px;
    scrollbar-gutter:stable;
  }

  .song-chain-dock{
    margin-bottom:8px;
  }

  .step-position-dock{
    margin-bottom:10px;
  }

  .step-position-scroll{
    margin-bottom:5px;
    padding-bottom:14px;
  }

  .editors-row{
    margin-top:8px;
  }
}

@media (max-width:720px){
  .sequencer-scroll,
  .step-position-scroll,
  .song-chain-dock,
  .mixer{
    padding-bottom:9px;
  }

  .song-chain-dock{
    margin-bottom:7px;
  }

  .step-position-dock{
    margin-bottom:9px;
  }

  .step-position-scroll{
    margin-bottom:4px;
    padding-bottom:13px;
  }

  .editors-row{
    margin-top:7px;
  }
}

@media (max-height:600px) and (orientation:landscape){
  .topbar{
    padding-bottom:8px;
    scrollbar-gutter:stable;
  }

  .song-chain-dock,
  .step-position-scroll,
  .sequencer-scroll,
  .mixer{
    padding-bottom:8px;
  }

  .song-chain-dock{
    margin-bottom:6px;
  }

  .step-position-dock{
    margin-bottom:8px;
  }

  .step-position-scroll{
    margin-bottom:3px;
    padding-bottom:11px;
  }
}