/* SIGNAL 2002 lower deck. Same tokens and radii as the first screen (wells 8px, keys 10px). */
.deck{--hole:#05070d;--lcd:#7dfcff;--lcd-ghost:rgba(125,252,255,.09);--lcd-dim:#3c8fa6;--sel:#1c3fd0;--amber:#ffc23a;
  --px:"Silkscreen",monospace;--dot:"VT323",monospace;
  position:absolute;width:1440px;height:900px;background:var(--dskin) 0 0/var(--sw) var(--sh) no-repeat;color:var(--lcd);font-family:var(--dot)}
.deck .dh{position:absolute;overflow:hidden;background:var(--hole);border-radius:8px}
.deck .dh::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px)}
.deck .dk{position:absolute;border:0;padding:0;background:transparent no-repeat;background-size:var(--sw) var(--sh);cursor:pointer;border-radius:10px}
.deck .dk:hover,.deck .dk:focus-visible,.deck .dk[aria-pressed="true"]{background-image:var(--dlit)}
.deck .dk:active,.deck .dk.is-down{background-image:var(--ddown)}
.deck .dk:focus-visible{outline:2px dotted var(--amber);outline-offset:2px}
.deck .cap{font:400 9px var(--px);color:var(--lcd-dim);letter-spacing:.5px}
.deck .seg{position:relative;display:inline-block;font-family:"DSEG7",var(--dot);line-height:1}
.deck .seg__ghost{color:var(--lcd-ghost)}
.deck .seg__lit{position:absolute;right:0;top:0;text-shadow:0 0 6px rgba(125,252,255,.55)}

/* tech bay: one object turning, the six on keys below */
.tb__img{position:absolute;left:50%;top:44px;width:470px;transform:translateX(-50%);image-rendering:auto}
.tb__top{position:absolute;left:14px;right:14px;top:10px;display:flex;justify-content:space-between;align-items:baseline}
.tb__name{font:400 14px var(--px);color:#fff;letter-spacing:1px}
.tb__note{position:absolute;left:14px;right:14px;bottom:10px;font-size:17px;line-height:1.05;color:var(--lcd)}
.tb__note small{display:block;font:400 9px var(--px);color:var(--lcd-dim);margin-top:3px}

/* beat lab */
.bl{padding:12px 16px}
.bl__top{display:flex;align-items:flex-end;gap:14px;margin-bottom:10px}
.bl__bpm{font-size:40px}
.bl__grid{display:grid;gap:7px}
.bl__row{display:grid;grid-template-columns:62px repeat(16,1fr);gap:4px;align-items:center}
.bl__row span{font:400 10px var(--px);color:var(--lcd-dim)}
.bl__step{all:unset;cursor:pointer;height:36px;border-radius:3px;background:#0b1a24;box-shadow:inset 0 0 0 1px #12303a}
.bl__step:nth-child(4n+2){box-shadow:inset 0 0 0 1px #1f5566}
.bl__step[aria-pressed="true"]{background:var(--lcd);box-shadow:0 0 6px rgba(125,252,255,.5)}
.bl__step.is-now{background:#1c3fd0}
.bl__step[aria-pressed="true"].is-now{background:var(--amber)}
.bl__step:focus-visible{outline:1px dotted var(--amber)}
.bl__pos{margin-left:auto;font-size:26px}

/* scene: four cities, one live */
.sc{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px}
.sc button{all:unset;cursor:pointer;position:relative;display:flex;flex-direction:column;gap:4px;padding:4px;border-radius:3px}
.sc img{width:100%;height:96px;object-fit:cover;border-radius:3px;filter:contrast(1.1) saturate(.85)}
.sc b{font:400 10px var(--px);color:#fff}
.sc i{font-style:normal;font-size:14px;line-height:1;color:var(--lcd-dim)}
.sc .on{background:var(--sel)}
.sc .on i{color:#bcd0ff}
.sc .live{position:absolute;left:8px;top:8px;background:#ff3b2f;color:#fff;font:400 9px var(--px);padding:2px 5px;border-radius:2px}
.sc button:focus-visible{outline:1px dotted var(--amber)}

/* download centre: a directory, SHOUTcast-dense */
.dc{padding:10px 12px}
.dc__h,.dc__r{display:grid;grid-template-columns:150px 1fr 110px;column-gap:14px;align-items:center}
.dc__h{font:400 9px var(--px);color:var(--lcd-dim);padding:0 6px 5px;border-bottom:1px solid #12303a;margin-bottom:4px}
.dc__r{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:150px 1fr 110px;column-gap:14px;align-items:center;padding:5px 6px;border-radius:3px;cursor:pointer}
.dc__r img{width:150px;height:62px;object-fit:cover;border-radius:3px}
.dc__r b{display:block;font:400 11px var(--px);color:#fff;margin-bottom:3px}
.dc__r span{font-size:17px;line-height:1.05;color:var(--lcd)}
.dc__r em{font-style:normal;font-size:15px;color:var(--amber);text-align:right}
.dc__r.on{background:var(--sel)}
.dc__r.on span{color:#fff}
.dc__r:focus-visible{outline:1px dotted var(--amber)}

/* the handheld deck */
.deck.is-phone .tb__img{width:300px;top:30px}
.deck.is-phone .tb__note{font-size:15px}
.deck.is-phone .bl{padding:8px 8px}
.deck.is-phone .bl__top{margin-bottom:6px}
.deck.is-phone .bl__bpm{font-size:26px}
.deck.is-phone .bl__row{grid-template-columns:40px repeat(16,1fr);gap:2px}
.deck.is-phone .bl__row span{font-size:9px}
.deck.is-phone .bl__step{height:26px;border-radius:2px}
.deck.is-phone .bl__grid{gap:4px}
.deck.is-phone .panel{overflow-y:auto;overscroll-behavior:contain}
.deck.is-phone .sc{grid-template-columns:repeat(4,1fr);gap:4px;padding:6px}
.deck.is-phone .sc img{height:58px}
.deck.is-phone .sc b{font-size:9px}
.deck.is-phone .sc i{display:none}
.deck.is-phone .dc{padding:6px}
.deck.is-phone .dc__h{display:none}
.deck.is-phone .dc__r{grid-template-columns:64px 1fr;padding:4px}
.deck.is-phone .dc__r img{width:64px;height:40px}
.deck.is-phone .dc__r em{display:none}
.deck.is-phone .dc__r span{font-size:15px}
@media (prefers-reduced-motion:reduce){.deck .bl__step.is-now{background:#0b1a24}}

/* route 3 edit 1: the deck's wells are smaller inside the tray */
.tb__img{width:400px;top:36px}
.bl{padding:10px 14px}
.bl__top{margin-bottom:6px}
.bl__bpm{font-size:34px}
.bl__step{height:32px}
.bl__grid{gap:6px}
.sc img{height:124px}
.dc__r{padding:4px 6px}
.dc__r img{height:56px}
.deck.is-phone .tb__img{width:250px;top:28px}
.deck.is-phone .bl__step{height:24px}
.deck.is-phone .sc img{height:52px}

/* SILVER, as period-sound-e-silver/sound.css: royal blue wells with a fine dot grid and white segments; orange only on the live mark */
.deck{--hole:#1a3a9e;--lcd:#ffffff;--lcd-ghost:rgba(255,255,255,.12);--lcd-dim:#9fb6ff;--sel:#0b1f6e;--amber:#ff8a1e}
.deck .dh{background:linear-gradient(180deg,#2448b8 0,#173193 100%)}
.deck .dh::after{background:radial-gradient(circle,rgba(0,8,50,.45) 0 .7px,transparent 1px) 0 0/3px 3px}
.deck .dh::before{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,40,.6);border-radius:inherit;z-index:2}
.deck .seg__lit{text-shadow:0 0 4px rgba(200,220,255,.6)}
/* beat lab pads on the blue well: dark recessed off, bright white on, the playhead a pale blue, a hit on the playhead orange */
.bl__step{background:#0f2370;box-shadow:inset 0 0 0 1px #3552b8}
.bl__step:nth-child(4n+2){box-shadow:inset 0 0 0 1px #8aa2ff}
.bl__step[aria-pressed="true"]{background:#ffffff;box-shadow:0 0 0 1px #c9d6ff}
.bl__step.is-now{background:#5f7fe8}
.bl__step[aria-pressed="true"].is-now{background:#ff8a1e}
.sc .on i{color:#dfe6ff}
.sc .live{background:#ff8a1e;color:#081a5e}
.dc__h{border-bottom-color:#5d79d6}
.dc__r em{color:#dfe6ff}
@media (prefers-reduced-motion:reduce){.deck .bl__step.is-now{background:#0f2370}}