/* Hardware layout; photographic asset provenance is in docs/asset-sources.md. */
:root{--bg:#111722;--panel:#282624;--ink:#f4f3f0;--muted:#b3aeaa;--accent:#d8dfca;--line:#494643}
body{background:var(--bg)}
.library,dialog{background:#282624}.tag[aria-pressed=true]{background:#ffffff0c}.primary{color:#242722}.result-note{background:#1c1b1a}
.console{max-width:500px;margin:auto;padding:0;border:2px solid #090909;border-radius:0;background:#5d5651;box-shadow:0 16px 50px #0005}
.console:before,.console:after,.console-footer{display:none}
.deck{padding:7px 10px 9px;background:#615953 url('/deck-metal.svg') repeat;position:relative;display:flex;flex-direction:column}
.deck+.deck{border-left:2px solid #080808;box-shadow:none;background-position:-23px -89px}
.deck-top{height:76px;flex:none;display:flex;justify-content:center;align-items:start;margin:0}
.gain-area{display:flex;flex-direction:column;align-items:center;position:relative;gap:0;text-align:center}
.gain-knob{display:block;width:48px;height:48px;border-radius:50%;background:linear-gradient(110deg,#1d1d1d,#161616);box-shadow:0 6px 10px #0007;position:relative;transform:rotate(0deg)}
.gain-knob:before{content:'';position:absolute;left:22px;top:-3px;width:4px;height:26px;background:#e1e1e1;border-radius:3px;box-shadow:0 0 1px #fff}
.gain-area label{margin-top:3px;background:#15131340;border:1px solid #cbc6c185;border-radius:4px;padding:1px 4px;font-size:14px;line-height:17px;color:#fff;white-space:nowrap}
.gain-area input{position:absolute;top:-2px;left:calc(50% - 26px);width:52px;height:52px;margin:0;opacity:0;cursor:ns-resize;touch-action:none;appearance:none}
.gain-area:focus-within .gain-knob{outline:2px solid #fff;outline-offset:4px}
.fader-area{height:490px;display:grid;grid-template-columns:minmax(0,1fr) 58px;grid-template-rows:minmax(0,1fr);gap:10px;position:relative;flex:none}
.pitch-assembly{width:100%;height:100%;display:block;position:relative;grid-row:1;grid-column:1}
.pitch-rail{container-type:inline-size;margin-left:40px;position:relative;width:82px;height:100%;border:1px solid #c0b9b799;border-radius:7px;background:#2c292929;display:flex;justify-content:center}
.pitch-rail:before{left:50%;transform:translateX(-50%);width:10px;top:40px;bottom:40px;background:#201a19;border:1px solid #88807a;border-radius:9px}
.pitch{width:100%;height:100%;padding:0;margin:0;position:relative;writing-mode:vertical-lr;direction:ltr;background:transparent}
.pitch::-webkit-slider-runnable-track{width:100%;background:transparent}
.pitch::-webkit-slider-thumb{width:100cqw;height:calc(100cqw * 632 / 545);border:0;border-radius:0;background:transparent url('/assets/pitch-cap.png') center/100% 100% no-repeat;box-shadow:none}
.pitch::-moz-range-thumb{width:100cqw;height:calc(100cqw * 632 / 545);border:0;border-radius:0;background:transparent url('/assets/pitch-cap.png') center/100% 100% no-repeat;box-shadow:none}
.ticks{left:3px;top:35px;bottom:35px;width:38px;color:#f3eeee;font-size:14px;line-height:16px;font-weight:400;text-shadow:0 1px #333}
.ticks span:after{content:' -';color:#d8d2cd}
.ticks span:nth-child(5){visibility:hidden}
.zero-led{z-index:2;top:calc(50% - 15px);left:0;width:42px;height:30px;border:0;border-radius:0;background:transparent url('/assets/zero-off.jpg') center/100% 100% no-repeat;box-shadow:none}
.zero-led:after{display:none}
.zero-led.on{background:transparent url('/assets/zero-on.jpg') center/100% 100% no-repeat;box-shadow:none}

.meter{grid-row:1;grid-column:2;width:58px;height:100%;border:0;border-radius:6px;background:#000;padding:0;overflow:hidden}
.meter:before{content:'∞  −∞';position:absolute;right:6px;top:3px;font-size:8px;color:#ddd;z-index:2}
.meter:after{inset:12px 5px 10px auto;width:13px;background:repeating-linear-gradient(to top,transparent 0,transparent 5px,#000 5px,#000 7px)}
.meter-fill{left:auto;right:5px;width:13px;bottom:10px;height:calc(100% - 24px);opacity:.95}
.meter-scale{display:flex;position:absolute;left:14px;top:10px;bottom:15px;padding:0;color:#e6e6e6;font-size:8px;z-index:2}
.deck:nth-child(2) .fader-area{grid-template-columns:58px minmax(0,1fr)}
.deck:nth-child(2) .pitch-assembly{grid-column:2}
.deck:nth-child(2) .meter{grid-column:1}
.pitch-info{position:absolute;top:85px;left:18px;display:block;margin:0;z-index:3}
.deck:nth-child(2) .pitch-info{left:84px}
.range{padding:0;width:30px;height:32px;border:3px solid #090909;border-radius:4px;background:#efefec;color:#151515;font-size:9px;font-weight:900;line-height:25px;box-shadow:0 1px 2px #0005}
.pitch-value{display:none}
.control-row{display:grid;grid-template-columns:1fr 1fr;gap:7px;width:170px;align-self:center;margin-top:7px}
.transport{height:58px;min-height:0;padding:4px;border:2px solid #fff;border-radius:40px;background:radial-gradient(ellipse at center,#181212 0%,#181212 58%,transparent 60%);box-shadow:none;font-size:20px;color:white;text-shadow:none;touch-action:none}
.transport.small{font-size:30px}
.transport:disabled{opacity:.55}
.transport:hover{filter:none;background-color:#ffffff08}
.transport.active,.transport:active{transform:scale(.96);color:white;background:radial-gradient(ellipse at center,#3d342e 0%,#3d342e 58%,transparent 60%);box-shadow:none}
.transport.playing{border-color:#fff;color:#d8eed4;background:radial-gradient(ellipse at center,#212b1d 0%,#212b1d 58%,transparent 60%)}
.deck-label{text-align:center;font-size:30px;font-weight:400;line-height:44px;margin-top:2px;color:#fff}
.deck-bottom{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}
.transport-footer{max-width:500px;margin-left:auto;margin-right:auto}
@media(max-width:600px){
  .console{width:100%;max-width:500px;padding:0}
  .deck{padding:7px 7px 8px}
  .deck-top{height:76px}
  .gain-area{display:flex;text-align:center}
  .gain-area input{width:52px;height:52px;display:block}
  .gain-area label{font-size:12px}
  .fader-area{height:clamp(330px,59vh,490px);grid-template-columns:minmax(0,1fr) 40px;gap:5px}
  .deck:nth-child(2) .fader-area{grid-template-columns:40px minmax(0,1fr)}
  .pitch-assembly{width:100%}
  .pitch-rail{margin-left:27px;width:min(82px,calc(100% - 31px));min-width:40px;border-radius:6px}
  .pitch-rail:before{top:34px;bottom:34px;width:9px}
  .pitch{width:100%}
  .pitch::-webkit-slider-runnable-track{width:100%}
  .ticks{left:0;width:28px;font-size:12px;top:28px;bottom:28px}
  .zero-led{left:-2px;top:calc(50% - 11.25px);width:30px;height:22.5px;border:0}

  .meter{width:40px}
  .meter-scale{display:flex;left:7px;font-size:7px}
  .meter-fill{width:10px;right:3px;left:auto}
  .meter:after{width:10px;inset:12px 3px 10px auto}
  .pitch-info{left:10px;top:85px}
  .deck:nth-child(2) .pitch-info{left:55px}
  .range{width:25px;height:28px;font-size:8px;line-height:21px}
  .control-row{width:min(170px,100%);gap:6px}
  .transport{height:53px;font-size:18px;border-width:2px;padding:3px}
  .transport.small{font-size:28px}
  .deck-label{font-size:28px;line-height:40px}
}

.transport svg{width:25px;height:25px;display:block;margin:auto;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}.transport.cue svg{width:29px;height:29px}