/* TROUBled BEATS — the wall as an instrument.
   The house: pure white ground, ink #17150f, editorial red #8B2E2E for what
   is live, hairlines, the mark in its own hand, Helvetica 900 in capitals.
   The works are shown whole and in their own colour; everything around them
   stays quiet so the wall is the loudest thing on the screen. */
@font-face{font-family:"TroubledPure";src:url("../assets/fonts/elegant.ttf") format("truetype");font-weight:400;font-display:swap}
:root{
  --bg:#fff;--ink:#17150f;--ink2:#6a645a;--ink3:#a49e93;--red:#8B2E2E;
  --hair:rgba(23,21,15,.16);--hair2:rgba(23,21,15,.08);--wash:#f6f5f2;
  --sys:"Helvetica Neue",Helvetica,"Arial Black",Arial,sans-serif;
  --hand:"TroubledPure","Helvetica Neue",Helvetica,sans-serif;
  --e:cubic-bezier(.22,.78,.16,1);
  --tile:96px;--gap:4px;--dock:38vh;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink)}
body{font-family:var(--sys);font-weight:900;text-transform:uppercase;letter-spacing:.02em;-webkit-font-smoothing:antialiased;
  overflow:hidden;display:flex;flex-direction:column;-webkit-user-select:none;user-select:none;overscroll-behavior:none}
.mk{font-family:var(--hand);text-transform:none;letter-spacing:0;font-weight:400}
.mk i{font-style:normal}
button,input,select{font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---------- the door ---------- */
.bx-start{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;cursor:pointer;transition:opacity .5s var(--e),visibility .5s}
.bx-start.gone{opacity:0;visibility:hidden}
.bx-start__in{text-align:center;padding:24px}
.bx-start__mark{display:block;font-size:clamp(24px,3.4vw,44px);-webkit-text-stroke:1.2px currentColor;paint-order:stroke fill}
.bx-start__h{margin:.02em 0 0;font-size:clamp(64px,14vw,210px);line-height:.82;letter-spacing:-.05em;-webkit-text-stroke:clamp(1px,.16vw,2.4px) var(--ink);paint-order:stroke fill}
.bx-start__p{margin:22px 0 26px;font-size:11px;letter-spacing:.22em;line-height:1.9;color:var(--ink2)}
.bx-start__go{padding:14px 26px;background:var(--ink);color:#fff;font-size:11px;letter-spacing:.24em}
.bx-start__go:hover{background:var(--red)}
.bx-start__s{margin-top:18px;font-size:9px;letter-spacing:.24em;color:var(--ink3)}

/* ---------- the top bar ---------- */
.bx-top{flex:none;display:flex;align-items:center;gap:18px;padding:10px 16px;border-bottom:1px solid var(--hair);flex-wrap:wrap;row-gap:8px}
.bx-back{display:flex;align-items:baseline;gap:6px;text-decoration:none;color:var(--ink);font-size:10px;letter-spacing:.2em}
.bx-back .mk{font-size:20px;-webkit-text-stroke:1px currentColor;paint-order:stroke fill}
.bx-back:hover{color:var(--red)}
/* the TROUBled Beats logo (assets/brand/troubled-beats.webp): the only mark the studio carries */
.bx-logo{display:block;height:40px;width:auto;align-self:center}
.bx-start__logo{margin:0;line-height:0}
.bx-start__logo img{display:block;width:min(560px,82vw);height:auto;margin:0 auto}
@media (max-width:819px){.bx-logo{height:30px}}
.bx-title{font-size:22px;letter-spacing:-.03em;line-height:1;-webkit-text-stroke:1px currentColor;paint-order:stroke fill;margin-left:-8px}
.bx-group{display:flex;align-items:center;gap:6px}
.bx-group--set{gap:14px}
.bx-group--end{margin-left:auto}
.bx-btn{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border:1px solid var(--hair);font-size:9px;letter-spacing:.2em;font-weight:700;background:#fff;transition:background .15s,border-color .15s,color .15s}
.bx-btn:hover{border-color:var(--ink)}
.bx-btn svg{width:12px;height:12px;fill:currentColor}
.bx-btn.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.bx-btn--pri{background:var(--ink);color:#fff;border-color:var(--ink);position:relative}
.bx-btn--pri:hover{background:var(--red);border-color:var(--red)}
.bx-btn--ghost{border-color:transparent}
.bx-btn--ghost:hover{border-color:var(--hair)}
.bx-btn--sm{height:24px;padding:0 9px}
.bx-play{min-width:78px}
.bx-play.on{background:var(--red);border-color:var(--red)}
.bx-led{width:7px;height:7px;border-radius:50%;border:1px solid currentColor;display:inline-block}
.bx-btn.on .bx-led{background:#fff;border-color:#fff}
#rec.on{background:var(--red);border-color:var(--red);color:#fff}
#rec.on .bx-led{animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.bx-badge{position:absolute;top:-5px;right:-5px;min-width:15px;height:15px;border-radius:8px;background:var(--red);color:#fff;font-size:8px;font-style:normal;display:grid;place-items:center;padding:0 4px;letter-spacing:0}
.bx-field{display:flex;align-items:center;gap:6px;font-size:9px;letter-spacing:.2em;font-weight:700;color:var(--ink2)}
.bx-field input[type=number]{width:52px;height:28px;border:1px solid var(--hair);padding:0 6px;font-size:12px;font-weight:700;color:var(--ink);letter-spacing:0;background:#fff}
.bx-field select{height:28px;border:1px solid var(--hair);background:#fff;font-size:10px;letter-spacing:.08em;color:var(--ink);padding:0 4px;border-radius:0}
.bx-field--sm select{height:24px}
input[type=range]{accent-color:var(--ink);width:80px;height:18px}
.bx-scope{width:120px;height:28px;border-left:1px solid var(--hair2);border-right:1px solid var(--hair2)}

/* ---------- the wall ---------- */
.bx-wall{flex:1;min-height:0;overflow:auto;padding:12px 16px;display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:center;gap:14px 18px;touch-action:manipulation}
.bx-wall.fits{align-content:center}
.bx-wall.small .pad__l{font-size:7px;padding:2px 3px 1px;letter-spacing:.06em}
.bx-wall.small .pad__l em{margin-left:2px}
.bx-wall.tiny .pad__l em{display:none}
.fam{flex:none;display:flex;flex-direction:column;gap:6px}
.fam__h{display:flex;align-items:baseline;gap:8px;font-size:9px;letter-spacing:.24em;font-weight:700;color:var(--ink2);cursor:pointer;height:11px;line-height:11px}
.fam__h b{font-weight:900;color:var(--ink)}
.fam.focus .fam__h b{color:var(--red)}
.fam.focus .fam__h::after{content:"KEYS A–;";color:var(--red);font-size:8px}
.fam__g{display:grid;grid-template-columns:repeat(var(--cols),var(--tile));gap:var(--gap)}
.pad{position:relative;width:var(--tile);height:var(--tile);overflow:hidden;background:var(--wash);touch-action:none;
  box-shadow:inset 0 0 0 1px var(--hair2);transition:transform .22s var(--e),box-shadow .12s;outline:none}
.pad img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;transition:transform .5s var(--e),filter .12s}
.pad:hover img{transform:scale(1.04)}
.pad__l{position:absolute;left:0;bottom:0;max-width:100%;padding:3px 5px 2px;background:rgba(255,255,255,.92);font-size:8px;letter-spacing:.1em;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.pad__l em{font-style:normal;font-weight:700;color:var(--ink2);margin-left:4px}
.pad kbd{position:absolute;top:3px;right:3px;min-width:14px;height:14px;padding:0 3px;background:#fff;font:700 8px/14px var(--sys);text-align:center;color:var(--ink);box-shadow:0 0 0 1px var(--hair);pointer-events:none}
.pad__dot{position:absolute;top:4px;left:4px;width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 0 1.5px #fff;display:none;pointer-events:none}
.pad.in-seq .pad__dot{display:block}
.pad.sel{box-shadow:inset 0 0 0 2px var(--ink)}
.pad::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.pad.hit{transform:scale(.94)}
.pad.hit img{filter:saturate(1.35) contrast(1.08)}
.pad.hit::after{animation:flash .22s ease-out}
@keyframes flash{from{opacity:.55}to{opacity:0}}
.pad.held{transform:scale(.95);box-shadow:inset 0 0 0 3px var(--red)}
.pad.held img{filter:saturate(1.5)}
.fam--fx .pad__l{background:var(--ink);color:#fff}
.fam--fx .pad__l em{color:rgba(255,255,255,.6)}

.bx-status{flex:none;display:flex;justify-content:space-between;gap:12px;padding:6px 16px;border-top:1px solid var(--hair);font-size:9px;letter-spacing:.2em;font-weight:700;color:var(--ink2);white-space:nowrap;overflow:hidden}
.bx-status span{overflow:hidden;text-overflow:ellipsis}
.bx-status b{color:var(--ink);font-weight:900}

/* ---------- the dock ---------- */
.bx-dock{flex:none;height:var(--dock);display:flex;flex-direction:column;border-top:1px solid var(--ink);background:#fff;transition:height .35s var(--e)}
.bx-dock.folded{height:40px}
.bx-dock__bar{flex:none;display:flex;align-items:center;gap:12px;padding:0 12px 0 16px;height:40px;border-bottom:1px solid var(--hair);overflow-x:auto;scrollbar-width:none}
.bx-tabs{display:flex;gap:14px}
.bx-tabs button{font-size:10px;letter-spacing:.22em;color:var(--ink3);padding:4px 0;border-bottom:2px solid transparent}
.bx-tabs button.on{color:var(--ink);border-bottom-color:var(--ink)}
.bx-pats{display:flex;gap:3px;margin-left:10px}
.bx-pats button{width:26px;height:24px;border:1px solid var(--hair);font-size:10px;position:relative}
.bx-pats button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.bx-pats button.used::after{content:"";position:absolute;bottom:2px;left:50%;width:3px;height:3px;margin-left:-1.5px;border-radius:50%;background:currentColor}
.bx-pats button.queued{animation:blink .5s steps(2) infinite;border-color:var(--red)}
.bx-pats button.playing{box-shadow:0 0 0 2px var(--red)}
.bx-song{display:flex;align-items:center;gap:3px;font-size:9px;letter-spacing:.2em;font-weight:700;color:var(--ink2);margin-left:8px;white-space:nowrap}
.bx-song .chip{min-width:18px;height:20px;padding:0 4px;display:inline-grid;place-items:center;background:var(--wash);color:var(--ink);font-size:10px}
.bx-song .chip.now{background:var(--red);color:#fff}
.bx-song .chip:hover{text-decoration:line-through}
.bx-dock__fold{margin-left:auto;width:28px;height:28px;display:grid;place-items:center;flex:none}
.bx-dock__fold svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .3s}
.bx-dock.folded .bx-dock__fold svg{transform:rotate(180deg)}
.bx-panel{flex:1;min-height:0;overflow:auto}

/* sequencer rows */
.sq{--cell:22px;min-width:max-content;padding:6px 0 10px}
.sq__row{display:flex;align-items:center;height:30px;border-bottom:1px solid var(--hair2)}
.sq__row.ghost{opacity:.55}
.sq__row.ghost:hover{opacity:1}
.sq__h{position:sticky;left:0;z-index:2;flex:none;width:300px;height:100%;display:flex;align-items:center;gap:6px;padding:0 8px 0 16px;background:#fff;border-right:1px solid var(--hair)}
.sq__h img{width:22px;height:22px;object-fit:cover;flex:none;cursor:pointer}
.sq__name{flex:1;min-width:0;font-size:9px;letter-spacing:.12em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.sq__name em{font-style:normal;color:var(--ink2);font-weight:700;margin-left:4px}
.sq__h button{width:20px;height:20px;border:1px solid var(--hair);font-size:8px;flex:none}
.sq__h button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.sq__h button.solo.on{background:var(--red);border-color:var(--red)}
.sq__h select{height:20px;font-size:8px;border:1px solid var(--hair);background:#fff;width:44px;padding:0}
.sq__h input[type=range]{width:54px}
.sq__cells{display:flex;gap:2px;padding:0 10px}
.sq__cells i{width:var(--cell);height:20px;background:var(--wash);box-shadow:inset 0 0 0 1px var(--hair2);cursor:pointer;display:block;touch-action:none}
.sq__cells i.b{margin-left:5px}
.sq__cells i.bar{margin-left:12px}
.sq__cells i.beat{background:#efede8}
.sq__cells i.on{background:var(--ink);box-shadow:none}
.sq__cells i.acc{background:var(--red);box-shadow:none}
.sq__cells i.now{box-shadow:inset 0 0 0 2px var(--red)}
.sq__cells i:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.sq__empty{padding:22px 16px;font-size:10px;letter-spacing:.2em;line-height:1.9;color:var(--ink2)}
.sq__empty b{color:var(--ink)}

/* mix */
.mx{display:flex;gap:0;min-width:max-content;height:100%}
.mx__c{width:128px;padding:12px 12px 10px;border-right:1px solid var(--hair2);display:flex;flex-direction:column;gap:8px}
.mx__c h4{margin:0;font-size:10px;letter-spacing:.2em;display:flex;justify-content:space-between;align-items:center}
.mx__c label{display:flex;flex-direction:column;gap:2px;font-size:8px;letter-spacing:.2em;color:var(--ink2);font-weight:700}
.mx__c input[type=range]{width:100%}
.mx__c button{height:20px;border:1px solid var(--hair);font-size:8px;padding:0 6px}
.mx__c button.on{background:var(--ink);color:#fff}
.mx__c--master{background:var(--wash)}

/* keys */
.hp{padding:14px 16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:4px 28px;font-size:9px;letter-spacing:.18em;line-height:2.1;color:var(--ink2);font-weight:700}
.hp b{color:var(--ink);font-weight:900;display:inline-block;min-width:74px}
.hp h5{margin:0 0 4px;font-size:10px;letter-spacing:.24em;color:var(--ink)}

/* ---------- the export sheet ---------- */
.bx-sheet{position:fixed;inset:0;z-index:60;background:rgba(255,255,255,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;padding:16px}
.bx-sheet[hidden]{display:none}
.bx-sheet__in{width:min(860px,100%);max-height:calc(100vh - 32px);overflow:auto;background:#fff;border:1px solid var(--ink);padding:22px 24px;animation:up .32s var(--e)}
@keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ex__top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.ex__top h2{margin:0;font-size:34px;letter-spacing:-.04em;line-height:.9;-webkit-text-stroke:1px currentColor;paint-order:stroke fill}
.ex__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:700px){.ex__grid{grid-template-columns:1fr}}
.ex{border:1px solid var(--hair);padding:14px}
.ex h3{margin:0 0 4px;font-size:11px;letter-spacing:.22em}
.ex p{margin:0 0 12px;font-size:9px;letter-spacing:.14em;line-height:1.8;color:var(--ink2);font-weight:700}
.ex .row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px}
.ex .seg{display:inline-flex;border:1px solid var(--hair)}
.ex .seg button{height:24px;padding:0 9px;font-size:9px;letter-spacing:.14em}
.ex .seg button.on{background:var(--ink);color:#fff}
.ex--wide{grid-column:1/-1}
.ex__st{font-size:9px;letter-spacing:.16em;color:var(--red);min-height:14px;font-weight:700}
.take{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--hair2);flex-wrap:wrap}
.take b{font-size:10px;letter-spacing:.14em;min-width:92px}
.take audio{height:28px;flex:1;min-width:180px}

.bx-toast{position:fixed;left:50%;bottom:calc(var(--dock) + 44px);transform:translateX(-50%);background:var(--ink);color:#fff;padding:9px 14px;font-size:9px;letter-spacing:.2em;opacity:0;transition:opacity .25s;pointer-events:none;z-index:80;white-space:nowrap}
.bx-toast.on{opacity:1}

/* ---------- phones ----------
   A drum machine, not a web page: one slim bar on top, one family of works
   filling the screen, and underneath it the sixteen steps of whatever was
   tapped last. Tracks and the mixer slide up when wanted. */
.m-only{display:none}
@media(max-width:820px){
  :root{--dock:44vh}
  body{height:100vh;height:100dvh}
  .d-only{display:none}
  .bx-top{flex-wrap:nowrap;gap:6px;padding:8px 10px;padding-top:calc(8px + env(safe-area-inset-top))}
  .bx-back > span[aria-hidden]{display:none}
  .bx-title,.bx-scope{display:none}
  .bx-top .bx-group:first-of-type{gap:6px}
  .bx-back .mk{font-size:16px}
  .bx-play,#rec{min-width:0;width:42px;height:42px;padding:0;border-radius:50%;justify-content:center}
  .bx-play span,#recLabel{display:none}
  .bx-play svg{width:17px;height:17px}
  .bx-play.on svg{display:none}
  .bx-play.on::before{content:"";width:13px;height:13px;background:#fff;border-radius:2px}
  #rec .bx-led{width:13px;height:13px;background:var(--red);border-color:var(--red)}
  #rec.on{width:auto;border-radius:23px;padding:0 14px}
  #rec.on #recLabel{display:inline;font-size:10px}
  #rec.on .bx-led{background:#fff;border-color:#fff}
  .bx-group--end{margin-left:auto;gap:5px}
  #mBpm{display:inline-flex;height:34px;padding:0 9px;border-radius:17px;font-size:10px;letter-spacing:.12em;white-space:nowrap}
  #mSet{display:inline-flex;width:34px;height:34px;padding:0;border-radius:50%;justify-content:center}
  #mSet svg{width:16px;height:16px}
  #export{height:34px;padding:0 10px;letter-spacing:.12em}
  .m-fams{display:flex;flex:none;gap:6px;overflow-x:auto;padding:8px 10px;border-bottom:1px solid var(--hair2);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .m-fams::-webkit-scrollbar{display:none}
  .m-fams button{flex:none;height:32px;padding:0 15px;border:1px solid var(--hair);border-radius:16px;font-size:10px;letter-spacing:.18em;font-weight:900;white-space:nowrap}
  .m-fams button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
  .bx-wall{padding:10px;overflow:hidden;align-content:center;align-items:center}
  .bx-wall .fam{display:none}
  .bx-wall .fam.show{display:flex}
  .fam__h,.pad kbd{display:none}
  .pad{border-radius:6px}
  .pad__l{font-size:9px;padding:4px 6px 3px}
  .bx-status{display:none}
  .bx-dock{height:auto}
  .bx-dock.folded{height:auto}
  .bx-dock .bx-panel{display:none}
  .bx-dock:not(.folded){height:72vh;height:72dvh}
  .bx-dock:not(.folded) .bx-panel:not([hidden]){display:block}
  .bx-dock:not(.folded) .m-strip{display:none}
  body:has(.bx-dock:not(.folded)) .bx-wall{overflow:auto;align-content:flex-start;align-items:flex-start}
  .m-strip{display:block;padding:10px 10px 8px;border-bottom:1px solid var(--hair)}
  .ms__h{display:flex;align-items:center;gap:10px;margin-bottom:9px}
  #msImg{width:38px;height:38px;object-fit:cover;flex:none;border-radius:4px;background:var(--wash)}
  .ms__n{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;font-size:11px;letter-spacing:.12em}
  .ms__n b{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ms__n em{font-style:normal;color:var(--ink2)}
  .ms__n span{font-size:8px;letter-spacing:.18em;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #msSlot .bx-btn{height:36px;padding:0 14px;border-radius:18px}
  .ms__steps.sq__cells{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;padding:0}
  .ms__steps.sq__cells i{width:auto;height:auto;aspect-ratio:1/1;max-height:46px;border-radius:5px;margin:0;touch-action:none}
  .ms__steps.sq__cells i.q{box-shadow:inset 0 0 0 1px rgba(23,21,15,.28)}
  .ms__steps.sq__cells i.on{box-shadow:none}
  .ms__steps.sq__cells i.now{box-shadow:inset 0 0 0 3px var(--red)}
  .ms__bars{display:flex;justify-content:center;gap:6px;padding-top:9px}
  .ms__bars:empty{display:none}
  .ms__bars button{width:34px;height:26px;border:1px solid var(--hair);border-radius:13px;font-size:10px}
  .ms__bars button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
  .bx-dock__bar{height:48px;gap:8px;padding:0 10px}
  #tabs [data-t=help]{display:none}
  .bx-pats{margin-left:4px}
  .bx-pats button{width:32px;height:30px}
  .bx-song{display:none}
  .sq__h{width:170px;padding-left:10px}
  .sq__h input[type=range],.sq__h select{display:none}
  .sq{--cell:26px}
  .sq__cells i{height:24px}
  .bx-toast{top:calc(128px + env(safe-area-inset-top));bottom:auto}
  /* settings, in a sheet */
  .m-sheet .bx-sheet__in{align-self:end;width:100%;max-height:86vh;padding:18px 18px calc(18px + env(safe-area-inset-bottom));border:0;border-top:1px solid var(--ink)}
  .m-sheet{place-items:end center;padding:0}
  .m-set{display:flex;flex-direction:column;gap:16px}
  .m-set .bx-group--set{display:flex;flex-direction:column;align-items:stretch;gap:16px}
  .m-set .bx-field{justify-content:space-between;font-size:11px;gap:10px}
  .m-set .bx-field input[type=number]{width:96px;height:40px;font-size:16px;text-align:center}
  .m-set .bx-field select{height:40px;font-size:13px}
  .m-set input[type=range]{width:58%;height:28px}
  .m-set > .bx-btn{height:44px;justify-content:center;border-color:var(--hair)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.bx-badge[hidden]{display:none}