/* TONEHOLD: ONE instrument (10 October). Martial: "redesign the sampler, now its cold, this design as reference
   [coloured tracks], with the voice included"; "the sampler … should unfold like with a button play my sound, not
   taking all this space, same for voice, and voice should work and be melted with the sampler, like this they play
   with one instrument".
   Each part is a LANE: its name, its waveform across the excerpt in a warm colour of its own (a warm hue mixed with
   the production's tint: instrument.js), its level at its end. One playhead crosses every lane. The last lane is the
   visitor's voice (booth.js). Under the lanes, compact: the speed and the three effects. The ground is warm: mixed
   with the production's tint, under a light grain; no flat black.
   A page that carries the device loads this sheet after look.css. Every colour is a name of the look, or the
   lane's own (--lc). Everything stands still under prefers-reduced-motion. */
.ti{position:relative;display:flex;flex-direction:column;gap:14px;padding:18px 18px 14px;border-radius:26px;overflow:hidden;box-shadow:0 44px 60px -44px rgba(14,15,17,.6);
  background:radial-gradient(110% 90% at 8% 0%,color-mix(in srgb,var(--tint,#B5420F) 36%,transparent) 0,transparent 62%),radial-gradient(90% 90% at 100% 100%,color-mix(in srgb,var(--tint,#B5420F) 24%,transparent) 0,transparent 64%),color-mix(in srgb,var(--tint,#4a3326) 18%,#171513);
  --n:104px;--e:36px}
.ti::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/160px 160px;mix-blend-mode:soft-light;opacity:.55;pointer-events:none}
.ti>*{position:relative;z-index:1}
/* its head: play, what it is, the time, parts or whole */
.ti-h{display:flex;flex-wrap:nowrap;align-items:center;gap:12px;min-height:52px}
.ti-play{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--pa);color:var(--dk);font-size:15px;transition:transform .5s var(--spring)}
.ti-play:hover{transform:scale(1.06)}.ti-play:active{transform:scale(.94);transition-duration:.08s}
.ti-id{position:relative;display:flex;flex-direction:column;justify-content:center;min-width:0;min-height:52px}
.ti-id .ml{position:absolute;left:0;top:7px;font-size:9.5px;color:var(--pa2);pointer-events:none}
.ti-nm{display:block;padding:24px 0 7px;font:600 19px/1.1 var(--f);letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ti-h .th-tag{flex:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pa) 30%,transparent)}
.ti-time{flex:none;margin-left:auto;font:500 12px/1 var(--mono);letter-spacing:.1em;color:var(--pa2)}
.ti-mode{flex:none;margin-left:0}
/* the lanes */
.ti-lanes{position:relative;display:flex;flex-direction:column;gap:8px}
.ti-lane{position:relative;display:grid;grid-template-columns:var(--n) minmax(0,1fr) var(--e);align-items:center;width:100%;min-height:58px;padding:0;border-radius:14px;text-align:left;cursor:pointer;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--lc) 18%,transparent),color-mix(in srgb,var(--lc) 7%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lc) 60%,transparent);transition:box-shadow .25s,background .25s}
.ti-lane .ti-pn{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;min-width:0;padding:0 8px 0 14px}
.ti-lane .ti-pn b,.tv-lane .ti-pn b{max-width:100%;font:600 14.5px/1.1 var(--f);letter-spacing:-.01em;color:var(--pa);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ti-lane .ti-pn i{font:500 9.5px/1 var(--mono);font-style:normal;letter-spacing:.1em;color:var(--lc)}
.ti-lane canvas{display:block;width:100%;height:44px;pointer-events:none}
.ti-lv{position:relative;display:block;justify-self:stretch;align-self:stretch;min-height:58px;cursor:ns-resize;touch-action:none}
.ti-lv::before{content:"";position:absolute;left:50%;top:10px;bottom:10px;width:4px;margin-left:-2px;border-radius:2px;background:color-mix(in srgb,var(--pa) 16%,transparent)}
.ti-lv i{position:absolute;left:50%;bottom:10px;width:4px;height:calc((100% - 20px) * var(--lvl,.8));margin-left:-2px;border-radius:2px;background:var(--lc);opacity:calc(.62 + var(--m,0) * .38)}
.ti-lane.off{background:none;box-shadow:inset 0 0 0 1px var(--dkl)}
.ti-lane.off .ti-pn b{color:var(--pa3)}.ti-lane.off .ti-pn i{color:var(--pa3)}
.ti-lane.solo{box-shadow:inset 0 0 0 2px var(--lc)}
.ti-lane:focus-visible{outline-offset:2px}
/* one playhead, across every lane */
.ti-head{position:absolute;top:-5px;bottom:-5px;left:calc(var(--n) + (100% - var(--n) - var(--e)) * var(--f,0));width:2px;margin-left:-1px;border-radius:1px;background:var(--pa);box-shadow:0 0 0 1px rgba(14,15,17,.3);pointer-events:none;opacity:0;transition:opacity .3s}
.ti-head::before{content:"";position:absolute;left:50%;top:-4px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--pa)}
.ti:not(.rest) .ti-head{opacity:.9}
/* the last lane: the visitor's own voice (booth.js) */
.ti-vslot:empty,.ti-vmore:empty{display:none}
.tv-lane{display:grid;grid-template-columns:var(--n) minmax(0,1fr) auto;align-items:center;min-height:58px;border-radius:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--pa) 13%,transparent),color-mix(in srgb,var(--pa) 5%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pa) 44%,transparent)}
.tv-lane .ti-pn{display:flex;flex-direction:column;gap:6px;min-width:0;padding:0 8px 0 14px}
.tv-lane .ti-pn i{font:500 9.5px/1.2 var(--mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--pa2)}
.tv-lane .tb-lane{display:block;width:100%;height:44px;border-radius:0;background:none;pointer-events:none}
.tv [data-state="recording"] .tb-lane{}
.tv-lane .tb-rec{min-height:44px;margin:0 7px 0 8px;padding:0 15px 0 11px;gap:8px;border-radius:22px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pa) 46%,transparent);font:600 13.5px/1 var(--f);color:var(--pa)}
.tv-lane .tb-rec i{width:13px;height:13px}
.tv-lane .tb-rec{grid-column:auto;justify-content:flex-start}
.ti-vmore{display:flex;flex-direction:column;gap:8px}
.tv-more{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.tv-b{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:0 17px;border-radius:22px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pa) 46%,transparent);font:600 14px/1 var(--f);color:var(--pa);white-space:nowrap}
.tv-b i{font-style:normal}
.tv-b[disabled]{opacity:.42;cursor:default}
.tv-line{display:inline-flex;flex:1 1 230px;align-items:center;gap:10px;min-width:0}
.tv-line .ml{flex:none;color:var(--pa2)}
.tv-line input[type=range]{flex:1 1 auto;min-width:80px;height:44px;accent-color:var(--pa);background:none}
.tv-line input[disabled]{opacity:.4}
.tv-line #tbMs{flex:none;min-width:58px;color:var(--pa)}
.tv-more .tx{align-self:auto;min-height:44px;color:var(--pa2)}
.tv-more .tx[disabled]{opacity:.45}
.ti-vmore .tb-say{min-height:1.3em;font:400 14.5px/1.4 var(--serif);color:var(--pa2)}
.ti-vmore .tb-say.bad{color:var(--rust)}
/* under the lanes, compact: the speed, and the three effects held by hand */
.ti-foot{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:8px;align-items:stretch}
.ti-sp{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:0 12px;padding:6px 14px 8px;border-radius:16px;background:color-mix(in srgb,var(--pa) 6%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pa) 18%,transparent)}
.ti-sp>.ml{font-size:9.5px;color:var(--pa2)}
.ti-sp .ti-ruler{height:36px}
.ti-sp .ti-read{grid-column:1/-1;font-size:10px;text-align:left;color:var(--pa2)}
.ti-fx{gap:8px}
.ti-fx .ti-hold{flex-direction:row;justify-content:flex-start;gap:11px;min-height:64px;padding:0 13px;border-radius:16px;background:color-mix(in srgb,var(--pa) 6%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pa) 18%,transparent);overflow:hidden;touch-action:none}
.ti-fx .ti-hold svg{flex:none;width:24px;height:24px;color:var(--pa)}
.ti-fx .ti-hold span{display:flex;flex-direction:column;gap:5px;min-width:0;text-align:left}
.ti-fx .ti-hold b{font:600 14px/1 var(--f)}
.ti-fx .ti-hold small{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ti-fx .ti-hold.held{box-shadow:inset 0 0 0 1.5px var(--rust);background:color-mix(in srgb,var(--rust) 18%,transparent)}
.ti .ti-keys{font-size:9.5px;color:var(--pa3)}
/* folded until it is played: in a house, and on a production's own page */
body[data-page="release"] #instrument{padding-block:0!important}
body[data-page="release"] #instrument.open{padding-block:0 6px!important}
#cVoice{background:none}
@media (max-width:1000px){
  .ti{gap:12px;padding:14px 12px 12px;border-radius:22px;--n:78px;--e:34px}
  .ti-h{gap:10px}
  .ti-play{width:48px;height:48px}
  .ti-nm{font-size:17px}
  .ti-h .th-tag{display:none}
  .ti-lane,.tv-lane{min-height:54px}
  .ti-lane .ti-pn,.tv-lane .ti-pn{padding:0 6px 0 11px}
  .ti-lane .ti-pn b,.tv-lane .ti-pn b{font-size:13px}
  .tv-lane .ti-pn i{font-size:8.5px}
  .ti-foot{grid-template-columns:1fr}
  .ti-mode button{min-height:44px}
  .ti-sp .ti-ruler{height:44px}
  .ti-fx .ti-hold{flex-direction:column;justify-content:center;gap:6px;min-height:72px;padding:0 6px}
  .ti-fx .ti-hold span{align-items:center;text-align:center}
  .tv-more{gap:8px}
  .tv-b{flex:1 1 auto}
  .tv-line{flex:1 1 100%}
  .tv-more .tx{flex:1 1 100%;justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){.ti-play,.ti-head,.ti-lane{transition:none}}