/* ---------- the rooms: DJ booth | TV | hi-fi, a slide apart (rooms.js sets the offsets) ---------- */
#stage { translate: var(--room-tv, 0) 0; transition: translate .9s cubic-bezier(.65, 0, .25, 1); }

#hifi-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1000px;
  height: 900px;
  margin: -450px 0 0 -500px;
  transform-origin: center center;
  translate: var(--room-hifi, 105vw) 0;
  transition: translate .9s cubic-bezier(.65, 0, .25, 1);
  z-index: 1;
  font-family: 'VT323', monospace;
}
/* opening the window straight into a room shouldn't play the slide */
body.instant #stage, body.instant #hifi-stage, body.instant #dj-stage, body.instant #room { transition: none; }

#room { transition: background-position .9s cubic-bezier(.65, 0, .25, 1); background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
body[data-view="hifi"] #room { background-position: 0 0, -322px 0, -322px 0, -322px 0, 0 0; }
body[data-view="dj"] #room { background-position: 0 0, 322px 0, 322px 0, 322px 0, 0 0; }

/* ---------- wall plate of light switches between the rooms ---------- */
#viewSwitch {
  position: fixed;
  right: 18px;
  top: 110px;
  z-index: 5;
  display: flex;
  gap: 6px;
  padding: 10px 8px 8px;
  border-radius: 5px;
  background: linear-gradient(160deg, #f4ecd8, #d6c9a8);
  box-shadow: 0 3px 6px rgba(0,0,0,.45), inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0,0,0,.12);
  font: 13px/1 'VT323', monospace;
  color: #5a4630;
  letter-spacing: 1px;
}
#viewSwitch::before, #viewSwitch::after { content: ''; position: absolute; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #9a8a6a); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
#viewSwitch::before { top: 3px; }
#viewSwitch::after { bottom: 3px; }
.vs-toggle { width: 34px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; letter-spacing: inherit; }
.vs-toggle .slot { display: block; width: 12px; height: 26px; margin: 2px auto 0; border-radius: 3px; background: #3a2e22; box-shadow: inset 0 2px 3px rgba(0,0,0,.7); position: relative; }
.vs-toggle .lever { position: absolute; left: 1px; right: 1px; top: 1px; height: 13px; border-radius: 2px; background: linear-gradient(#fffaf0, #cfc2a2); box-shadow: 0 2px 2px rgba(0,0,0,.4); transition: top .15s; }
.vs-toggle:hover .lever { top: 4px; }
.vs-toggle .lbl { display: block; margin: 5px 0 2px; }

/* ---------- room lights (rooms.js): each room's dimmer level darkens it through .room-dark;
   whatever gives off light in the room is stacked above that layer and keeps glowing ---------- */
.room-dark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(105vw / var(--s, 1)); /* exactly the room spacing, so one room's dark never reaches into the next */
  height: calc(112vh / var(--s, 1));
  translate: -50% -50%;
  pointer-events: none;
  background: rgb(var(--night, 5 5 5) / var(--dark, 0));
  transition: background .4s;
}
#room-dimmer { position: fixed; right: 18px; top: 196px; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 50px; padding: 8px 0 7px; border-radius: 5px; background: linear-gradient(160deg, #f4ecd8, #d6c9a8); box-shadow: 0 3px 6px rgba(0,0,0,.45), inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0,0,0,.12); font: 13px/1 'VT323', monospace; letter-spacing: 1px; color: #5a4630; }
#room-dimmer .dim-led { width: 5px; height: 5px; border-radius: 50%; background: #ff9a3a; box-shadow: 0 0 5px #ff8a2a; }
#room-dimmer .dim-slot { position: relative; width: 14px; height: 70px; border-radius: 3px; background: #3a2e22; box-shadow: inset 0 2px 3px rgba(0,0,0,.7); cursor: ns-resize; touch-action: none; }
#room-dimmer .dim-cap { position: absolute; left: -7px; right: -7px; height: 14px; margin-top: -7px; border-radius: 3px; background: linear-gradient(#fffaf0, #cfc2a2); box-shadow: 0 2px 3px rgba(0,0,0,.4); pointer-events: none; }
/* the switch plates dim with the room, all but the dimmer's little locator light */
#viewSwitch, #room-dimmer { filter: brightness(calc(1 - var(--here-dark, 0) * .75)); }
#help { opacity: calc(1 - var(--here-dark, 0) * .5); }

/* the hi-fi in the dark: its display window, meters, LEDs and lit buttons keep glowing */
#hifi-stage > .room-dark { z-index: 3; }
.hcab-body::after { content: ''; position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none; background: rgb(4 6 12 / var(--dark, 0)); transition: background .4s; }
/* (switched off, the window, meters and buttons give off nothing: they drop under the darkness
   with the faceplate, and take room and lamp light like it) */
#hifi:not(.off) #hwin, #hifi:not(.off) #hled, .hbtn.on, #hifi:not(.off) .hvu { position: relative; z-index: 6; }
/* lit, they stand above the darkness, so the chrome round them darkens itself with the room (--tk);
   switched off they are under it and need nothing */
#hifi:not(.off) #hwin, #hifi:not(.off) .hvu { --tk: var(--dark, 0); }
/* glass only reflects the room's light: with the lights down the glare goes (the meters' glass fades
   by its own alphas, since their ::after also carries the bezel) */
#hifi:not(.off) #hwin::after { opacity: calc(1 - var(--dark, 0) * .92); transition: opacity .4s; }
.hbtn.on { text-shadow: 0 0 8px rgba(255,210,122,.9); }
#tt.playing #tt-led { position: relative; z-index: 4; }
/* ---------- turntable, seen from the front at eye level ---------- */
#tt {
  position: absolute;
  left: 290px;
  top: 285px;
  width: 420px;
  height: 150px;
}
#tt-lid { /* smoked acrylic dust cover, propped open behind: an even smoke, no haze */
  position: absolute;
  left: 8px;
  right: 8px;
  top: -6px;
  height: 88px;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, rgba(34,24,18,.26), rgba(26,18,13,.34));
  box-shadow: inset 0 0 0 1px rgba(255,248,236,.2);
}
/* its edges: opened up, the front skirt stands along the top, seen edge-on through two thicknesses
   of smoke, and the side skirts run down either end; each cut edge pipes a hairline of light */
#tt-lid::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,250,240,.5) 0 1px, rgba(16,11,8,.4) 1px 7px, rgba(255,248,236,.22) 7px 8px, transparent 8px),
    linear-gradient(90deg, rgba(255,250,240,.38) 0 1px, rgba(16,11,8,.26) 1px 4px, rgba(255,248,236,.12) 4px 5px, transparent 5px calc(100% - 5px), rgba(255,248,236,.08) calc(100% - 5px) calc(100% - 4px), rgba(16,11,8,.3) calc(100% - 4px) calc(100% - 1px), rgba(255,250,240,.26) calc(100% - 1px));
}
/* what the acrylic mirrors: the room's light as two crisp slanted bands, fading towards the hinge */
#tt-lid::after {
  content: '';
  position: absolute;
  inset: 8px 5px 0;
  pointer-events: none;
  background: linear-gradient(104deg, transparent 13.6%, rgba(255,252,246,.13) 14%, rgba(255,252,246,.1) 23.6%, transparent 24% 26.6%, rgba(255,252,246,.07) 27% 29.6%, transparent 30%);
  -webkit-mask: linear-gradient(#000 35%, transparent 96%);
          mask: linear-gradient(#000 35%, transparent 96%);
}
.tt-hinge { /* chrome hinge blocks */
  position: absolute;
  top: 76px;
  width: 24px;
  height: 7px;
  border-radius: 1.5px;
  background: linear-gradient(180deg, #fbfbf9 0, #a3a19c 42%, #e8e6e1 56%, #6c6a66 100%);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.45), inset 1px 0 0 rgba(255,255,255,.4), inset -1px 0 0 rgba(0,0,0,.25);
}
.tt-hinge.l { left: 60px; }
.tt-hinge.r { right: 60px; }
.tt-top { /* the deck plate: brushed aluminium seen nearly edge-on, so its brushing crowds together;
             the platter, arm base and rest each sit in a little shade on it */
  position: absolute;
  left: 0;
  right: 0;
  top: 80px;
  height: 12px;
  border-radius: 4px 4px 0 0;
  background:
    radial-gradient(ellipse 50% 100% at 50% 0, rgba(0,0,0,.34), transparent) 30px 4px / 310px 5px no-repeat,
    radial-gradient(ellipse 50% 100% at 50% 0, rgba(0,0,0,.3), transparent) 343px 2px / 22px 4px no-repeat,
    radial-gradient(ellipse 50% 100% at 50% 0, rgba(0,0,0,.3), transparent) 403px 2px / 14px 4px no-repeat,
    radial-gradient(ellipse 50% 100% at 50% 0, rgba(0,0,0,.3), transparent) 329px 4px / 14px 4px no-repeat,
    radial-gradient(ellipse 50% 100% at 50% 0, rgba(0,0,0,.34), transparent) 374px 2px / 36px 5px no-repeat,
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(255,255,255,.1) 50%, rgba(255,255,255,.22) 82%, rgba(0,0,0,.18) 92%, rgba(0,0,0,.3)),
    linear-gradient(90deg, rgba(0,0,0,.18), transparent 7%, transparent 93%, rgba(0,0,0,.22)),
    url(tex/brushed.jpg) -120px -40px / 900px 90px,
    #c9c6be;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}
/* the strobe lamp beside the platter: a little black housing, its chrome-ringed window aimed at the
   rim. Its neon burns while a record plays (an emitter then, above the room's darkness); unlit, the
   window is dark amber glass */
.tt-top::before { content: ''; position: absolute; left: 331px; top: -5px; width: 10px; height: 9px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'10'%20height%3D'9'%20viewBox%3D'0%200%2010%209'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'h'%20x1%3D'0'%20x2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%234e4e4e'%2F%3E%3Cstop%20offset%3D'.16'%20stop-color%3D'%239c9c9c'%2F%3E%3Cstop%20offset%3D'.34'%20stop-color%3D'%23fafafa'%2F%3E%3Cstop%20offset%3D'.48'%20stop-color%3D'%23c6c6c6'%2F%3E%3Cstop%20offset%3D'.78'%20stop-color%3D'%23636363'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%238a8a8a'%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D'b'%20x1%3D'0'%20x2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%230c0c0c'%2F%3E%3Cstop%20offset%3D'.3'%20stop-color%3D'%234a4a4a'%2F%3E%3Cstop%20offset%3D'.5'%20stop-color%3D'%23262626'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%230a0a0a'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D'M1%209%20V2.6%20Q1%20.6%203%20.6%20H7%20Q9%20.6%209%202.6%20V9%20Z'%20fill%3D'url(%23b)'%2F%3E%3Cpath%20d%3D'M2.6%20.9%20H7.4'%20stroke%3D'rgba(255%2C255%2C255%2C.3)'%20stroke-width%3D'.5'%2F%3E%3Crect%20x%3D'2.3'%20y%3D'2.3'%20width%3D'5.4'%20height%3D'4.4'%20rx%3D'1'%20fill%3D'url(%23h)'%2F%3E%3Crect%20x%3D'3'%20y%3D'3'%20width%3D'4'%20height%3D'3'%20rx%3D'.6'%20fill%3D'%231c0e06'%2F%3E%3C%2Fsvg%3E") no-repeat; }
.tt-top::after { content: ''; position: absolute; left: 334px; top: -2px; width: 4px; height: 3px; border-radius: .6px; pointer-events: none; background: radial-gradient(circle at 30% 30%, rgba(255,228,196,.6) 0 .45px, transparent 1px), linear-gradient(#5a3014, #2a1406); }
#tt.playing .tt-top::after { z-index: 4; background: radial-gradient(ellipse 70% 80% at 50% 50%, #fff2cf 0, #ffb45a 55%, #ff7a26 100%); box-shadow: 0 0 1.5px .4px rgba(255,150,60,.9), 0 0 4px rgba(255,118,36,.45); }
.tt-platter {
  position: absolute;
  left: 40px;
  top: 66px;
  width: 290px;
  height: 18px;
  border-radius: 3px / 4px;
  /* the machined rim, with the strobe band turned into it */
  background:
    linear-gradient(180deg, #767676, #a5a5a5 22%, #a8a8a8 76%, #c6c6c6) 0 5px / 100% 8px no-repeat,
    linear-gradient(180deg, #e9e9e9 0, #bdbdbd 25%, #f6f6f6 32%, #8f8f8f 70%, #5f5f5f);
  box-shadow: 0 3px 4px rgba(0,0,0,.45);
  overflow: hidden;
}
.tt-platter-top { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #2a2a2a; } /* the rubber mat's edge */
/* the strobe band's dots: hifi.js draws them on this canvas, fading them over the band's outer 18%
   each side itself (a mask here would fade the strobe lamp's light on the band too) */
.tt-strobe { position: absolute; left: 0; top: 5px; display: block; width: 290px; height: 8px; }
.tt-platter::after { /* it's round: shade the ends */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.55), transparent 22%, rgba(255,255,255,.15) 45%, transparent 60%, rgba(0,0,0,.55));
}
#tt-record { /* laid flat on the platter: you see its edge and a sliver of its top */
  position: absolute;
  left: 44px;
  top: 60px;
  width: 282px;
  height: 7px;
  opacity: 0;
  translate: 0 -46px;
  transition: translate .7s cubic-bezier(.3, 0, .4, 1), opacity .3s;
}
#tt-record.on { opacity: 1; translate: 0 0; }
#tt-record .rec-top { position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 50%; background: linear-gradient(90deg, #050505, #2a2a2a 30%, #0b0b0b 50%, #333 72%, #050505); }
#tt-record .rec-edge { position: absolute; left: 1px; right: 1px; top: 3px; height: 3px; border-radius: 0 0 2px 2px; background: #000; }
.tt-spindle { position: absolute; left: 182px; top: 54px; width: 4px; height: 8px; border-radius: 2px 2px 0 0; background: linear-gradient(90deg, #888, #fff, #888); }
/* the arm rest: a foot, a post and a rubber-lined cradle (hifi.js stands it in front of the arm, so the
   cradle's front wall hides the bottom of the tube lying in it), its transit clip swung open */
.tt-rest { position: absolute; left: 349px; top: 40px; width: 11px; height: 42px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'11'%20height%3D'42'%20viewBox%3D'0%200%2011%2042'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'h'%20x1%3D'0'%20x2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%234e4e4e'%2F%3E%3Cstop%20offset%3D'.16'%20stop-color%3D'%239c9c9c'%2F%3E%3Cstop%20offset%3D'.34'%20stop-color%3D'%23fafafa'%2F%3E%3Cstop%20offset%3D'.48'%20stop-color%3D'%23c6c6c6'%2F%3E%3Cstop%20offset%3D'.78'%20stop-color%3D'%23636363'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%238a8a8a'%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D'v'%20x1%3D'0'%20y1%3D'0'%20x2%3D'0'%20y2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23a0a0a0'%2F%3E%3Cstop%20offset%3D'.22'%20stop-color%3D'%23fdfdfd'%2F%3E%3Cstop%20offset%3D'.42'%20stop-color%3D'%23cfcfcf'%2F%3E%3Cstop%20offset%3D'.72'%20stop-color%3D'%235e5e5e'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%23929292'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D'M9.1%203.7%20C10.3%203.1%2010.5%201.7%2010%20.7'%20fill%3D'none'%20stroke%3D'%239a9a9a'%20stroke-width%3D'.8'%20stroke-linecap%3D'round'%2F%3E%3Crect%20x%3D'1.2'%20y%3D'39.4'%20width%3D'7.6'%20height%3D'2.6'%20rx%3D'1.1'%20fill%3D'url(%23h)'%2F%3E%3Crect%20x%3D'3.5'%20y%3D'6'%20width%3D'3'%20height%3D'34'%20fill%3D'url(%23h)'%2F%3E%3Cpath%20d%3D'M.6%203.4%20H2.2%20Q5%204.75%207.8%203.4%20H9.4%20V6.6%20Q5%207.3%20.6%206.6%20Z'%20fill%3D'url(%23v)'%2F%3E%3Cpath%20d%3D'M2.2%203.45%20Q5%204.8%207.8%203.45'%20fill%3D'none'%20stroke%3D'%23111'%20stroke-width%3D'.55'%2F%3E%3C%2Fsvg%3E") no-repeat; }
/* the arm's base (in front of the arm, so the gimbal holds the tube's end): a chrome escutcheon on the
   deck, the black base with its knurled height ring, the bearing post and the gimbal, its bearing cap
   facing out; the cue lever stands beside it */
.tt-pivot { position: absolute; left: 380px; top: 40px; width: 24px; height: 42px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'42'%20viewBox%3D'0%200%2024%2042'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'h'%20x1%3D'0'%20x2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%234e4e4e'%2F%3E%3Cstop%20offset%3D'.16'%20stop-color%3D'%239c9c9c'%2F%3E%3Cstop%20offset%3D'.34'%20stop-color%3D'%23fafafa'%2F%3E%3Cstop%20offset%3D'.48'%20stop-color%3D'%23c6c6c6'%2F%3E%3Cstop%20offset%3D'.78'%20stop-color%3D'%23636363'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%238a8a8a'%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D'b'%20x1%3D'0'%20x2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%230c0c0c'%2F%3E%3Cstop%20offset%3D'.28'%20stop-color%3D'%234a4a4a'%2F%3E%3Cstop%20offset%3D'.46'%20stop-color%3D'%232a2a2a'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%230a0a0a'%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D'y'%20x1%3D'0'%20y1%3D'0'%20x2%3D'0'%20y2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%239a9a9a'%2F%3E%3Cstop%20offset%3D'.25'%20stop-color%3D'%235a5a5a'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%231a1a1a'%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D'q'%20cx%3D'.36'%20cy%3D'.34'%20r%3D'.75'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23fff'%2F%3E%3Cstop%20offset%3D'.4'%20stop-color%3D'%23c8c8c8'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%234a4a4a'%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20x%3D'0'%20y%3D'39.2'%20width%3D'24'%20height%3D'2.8'%20rx%3D'1.3'%20fill%3D'url(%23h)'%2F%3E%3Crect%20x%3D'2.4'%20y%3D'29'%20width%3D'19.2'%20height%3D'10.6'%20rx%3D'1.2'%20fill%3D'url(%23b)'%2F%3E%3Crect%20x%3D'2.71'%20y%3D'29.8'%20width%3D'.44'%20height%3D'4.6'%20fill%3D'rgba(255%2C255%2C255%2C0.15)'%2F%3E%3Crect%20x%3D'3.4'%20y%3D'29.8'%20width%3D'.44'%20height%3D'4.6'%20fill%3D'rgba(255%2C255%2C255%2C0.2)'%2F%3E%3Crect%20x%3D'4.51'%20y%3D'29.8'%20width%3D'.44'%20height%3D'4.6'%20fill%3D'rgba(255%2C255%2C255%2C0.24)'%2F%3E%3Crect%20x%3D'5.98'%20y%3D'29.8'%20width%3D'.44'%20height%3D'4.6'%20fill%3D'rgba(255%2C255%2C255%2C0.28)'%2F%3E%3Crect%20x%3D'7.74'%20y%3D'29.8'%20width%3D'.44'%20height%3D'4.6'%20fill%3D'rgba(255%2C255%2C255%2C0.3)'%2F%3E%3Crect%20x%3D'9.71'%20y%3D'29.8'%20width%3D'.44'%20height%3D'4.6'%20fill%3D'rgba(255%2C255%2C255%2C0.32)'%2F%3E%3Crect%20x%3D'11.78'%20y%3D'29.8'%20width%3D'.44'%20height%3D'4.6'%20fill%3D'rgba(255%2C255%2C255%2C0.21)'%2F%3E%3Crect%20x%3D'13.85'%20y%3D'29.8'%20width%3D'.44'%20height%3D'4.6'%20fill%3D'rgba(255%2C255%2C255%2C0.21)'%2F%3E%3Crect%20x%3D'15.82'%20y%3D'29.8'%20width%3D'.44'%20height%3D'4.6'%20fill%3D'rgba(255%2C255%2C255%2C0.2)'%2F%3E%3Crect%20x%3D'17.58'%20y%3D'29.8'%20width%3D'.44'%20height%3D'4.6'%20fill%3D'rgba(255%2C255%2C255%2C0.19)'%2F%3E%3Crect%20x%3D'19.05'%20y%3D'29.8'%20width%3D'.44'%20height%3D'4.6'%20fill%3D'rgba(255%2C255%2C255%2C0.17)'%2F%3E%3Crect%20x%3D'20.16'%20y%3D'29.8'%20width%3D'.44'%20height%3D'4.6'%20fill%3D'rgba(255%2C255%2C255%2C0.15)'%2F%3E%3Crect%20x%3D'20.85'%20y%3D'29.8'%20width%3D'.44'%20height%3D'4.6'%20fill%3D'rgba(255%2C255%2C255%2C0.12)'%2F%3E%3Crect%20x%3D'2.4'%20y%3D'34.9'%20width%3D'19.2'%20height%3D'.7'%20fill%3D'rgba(255%2C255%2C255%2C.3)'%2F%3E%3Crect%20x%3D'8.3'%20y%3D'7'%20width%3D'7.4'%20height%3D'22.4'%20fill%3D'url(%23h)'%2F%3E%3Crect%20x%3D'8.3'%20y%3D'27.6'%20width%3D'7.4'%20height%3D'1.4'%20fill%3D'rgba(0%2C0%2C0%2C.35)'%2F%3E%3Crect%20x%3D'6.2'%20y%3D'.1'%20width%3D'11.6'%20height%3D'7.8'%20rx%3D'2.2'%20fill%3D'url(%23y)'%2F%3E%3Crect%20x%3D'6.6'%20y%3D'.45'%20width%3D'10.8'%20height%3D'.5'%20rx%3D'.25'%20fill%3D'rgba(255%2C255%2C255%2C.35)'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'3'%20r%3D'2.2'%20fill%3D'url(%23q)'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'3'%20r%3D'.55'%20fill%3D'%232a2a2a'%2F%3E%3C%2Fsvg%3E") no-repeat; }
.tt-pivot-post, .tt-pivot-base { display: none; }
.tt-pivot::after { content: ''; position: absolute; left: 25px; top: 20px; width: 15px; height: 22px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'15'%20height%3D'22'%20viewBox%3D'0%200%2015%2022'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'h'%20x1%3D'0'%20x2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%234e4e4e'%2F%3E%3Cstop%20offset%3D'.16'%20stop-color%3D'%239c9c9c'%2F%3E%3Cstop%20offset%3D'.34'%20stop-color%3D'%23fafafa'%2F%3E%3Cstop%20offset%3D'.48'%20stop-color%3D'%23c6c6c6'%2F%3E%3Cstop%20offset%3D'.78'%20stop-color%3D'%23636363'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%238a8a8a'%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D'q'%20cx%3D'.36'%20cy%3D'.34'%20r%3D'.75'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23fff'%2F%3E%3Cstop%20offset%3D'.4'%20stop-color%3D'%23c8c8c8'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%234a4a4a'%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20x%3D'1'%20y%3D'19.6'%20width%3D'7'%20height%3D'2.4'%20rx%3D'1.1'%20fill%3D'url(%23h)'%2F%3E%3Crect%20x%3D'3.2'%20y%3D'7.4'%20width%3D'2.6'%20height%3D'12.6'%20fill%3D'url(%23h)'%2F%3E%3Cpath%20d%3D'M4.5%208.2%20L11.4%204.6'%20stroke%3D'%238a8a8a'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%2F%3E%3Cpath%20d%3D'M4.5%207.8%20L11.3%204.25'%20stroke%3D'%23f4f4f4'%20stroke-width%3D'.55'%20stroke-linecap%3D'round'%2F%3E%3Crect%20x%3D'10.4'%20y%3D'2.3'%20width%3D'4.2'%20height%3D'2.7'%20rx%3D'1'%20transform%3D'rotate(-27%2012.5%203.65)'%20fill%3D'%231c1c1c'%2F%3E%3Crect%20x%3D'10.6'%20y%3D'2.5'%20width%3D'3.8'%20height%3D'.6'%20rx%3D'.3'%20transform%3D'rotate(-27%2012.5%203.65)'%20fill%3D'rgba(255%2C255%2C255%2C.28)'%2F%3E%3Ccircle%20cx%3D'4.5'%20cy%3D'8.1'%20r%3D'1.25'%20fill%3D'url(%23q)'%2F%3E%3C%2Fsvg%3E") no-repeat; }
#tt-arm { /* origin at the pivot; JS sets how far it reaches across and how high it's lifted */
  position: absolute;
  left: 392px;
  top: 43px;
  width: 0;
  height: 0;
}
/* the arm: a chrome tube tapering towards the headshell (its chrome's dark lower band gives it its
   edge, so it needs no shadow); the headshell, 18 x 21 with the arm's line 3px down, carries a finger
   lift, the cartridge with its red stylus assembly and the cantilever, the stylus at its tip; the
   counterweight is turned chrome with a black tracking-force dial */
.tt-arm-rod { position: absolute; right: 0; top: -1.75px; width: var(--reach, 46px); height: 3.5px; clip-path: polygon(0 22%, 100% 0, 100% 100%, 0 78%); background: linear-gradient(180deg, #8d8d8d 0, #fdfdfd 30%, #c8c8c8 45%, #6e6e6e 80%, #9a9a9a); transform-origin: 100% 50%; transform: rotate(var(--lift, 0deg)); }
.tt-head { position: absolute; top: -3px; left: calc(-1 * var(--reach, 46px) - 9px); width: 18px; height: 21px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'18'%20height%3D'21'%20viewBox%3D'0%200%2018%2021'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'c'%20x1%3D'0'%20y1%3D'0'%20x2%3D'0'%20y2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23a0a0a0'%2F%3E%3Cstop%20offset%3D'.22'%20stop-color%3D'%23fdfdfd'%2F%3E%3Cstop%20offset%3D'.42'%20stop-color%3D'%23cfcfcf'%2F%3E%3Cstop%20offset%3D'.72'%20stop-color%3D'%235e5e5e'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%23929292'%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D'p'%20x1%3D'0'%20y1%3D'0'%20x2%3D'0'%20y2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23fbfbfb'%2F%3E%3Cstop%20offset%3D'.5'%20stop-color%3D'%23c4c4c4'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%236e6e6e'%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D'k'%20x1%3D'0'%20y1%3D'0'%20x2%3D'0'%20y2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%233c3c3c'%2F%3E%3Cstop%20offset%3D'.2'%20stop-color%3D'%231e1e1e'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%23090909'%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D'r'%20x1%3D'0'%20y1%3D'0'%20x2%3D'0'%20y2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23ea5444'%2F%3E%3Cstop%20offset%3D'.35'%20stop-color%3D'%23bb2e25'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%23741510'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D'M8.7%204%20V8.6'%20stroke%3D'%23c63b2c'%20stroke-width%3D'.55'%2F%3E%3Cpath%20d%3D'M9.4%204%20V7.8'%20stroke%3D'%233f9a4a'%20stroke-width%3D'.55'%2F%3E%3Cpath%20d%3D'M2.4%203.9%20H8.8%20V11.4%20L7.9%2012.6%20H3.5%20L2.4%2010.9%20Z'%20fill%3D'url(%23k)'%2F%3E%3Cpath%20d%3D'M2.65%204.2%20V10.8'%20stroke%3D'rgba(255%2C255%2C255%2C.2)'%20stroke-width%3D'.5'%2F%3E%3Crect%20x%3D'3.3'%20y%3D'6.7'%20width%3D'4.6'%20height%3D'.55'%20fill%3D'rgba(225%2C225%2C225%2C.4)'%2F%3E%3Cpath%20d%3D'M2.9%2012.4%20H7.5%20V14.9%20L6.5%2016.1%20H4.1%20L2.9%2014.5%20Z'%20fill%3D'url(%23r)'%2F%3E%3Cpath%20d%3D'M3.2%2012.7%20H7.2'%20stroke%3D'rgba(255%2C200%2C190%2C.45)'%20stroke-width%3D'.4'%2F%3E%3Cpath%20d%3D'M4.4%2015.8%20L2.35%2019.4'%20stroke%3D'%23d6d6d6'%20stroke-width%3D'.7'%20stroke-linecap%3D'round'%2F%3E%3Cpath%20d%3D'M1.3%202.1%20H10%20V4.1%20H2.2%20Z'%20fill%3D'url(%23p)'%2F%3E%3Crect%20x%3D'3.5'%20y%3D'1.45'%20width%3D'1.2'%20height%3D'.8'%20rx%3D'.35'%20fill%3D'%23ededed'%2F%3E%3Crect%20x%3D'6.5'%20y%3D'1.45'%20width%3D'1.2'%20height%3D'.8'%20rx%3D'.35'%20fill%3D'%23ededed'%2F%3E%3Cpath%20d%3D'M2.8%203.3%20C1.5%203.3%20.8%202.7%20.55%20.8'%20fill%3D'none'%20stroke%3D'%23cfcfcf'%20stroke-width%3D'.95'%20stroke-linecap%3D'round'%2F%3E%3Cpath%20d%3D'M2.6%202.85%20C1.6%202.8%201.05%202.3%20.85%201'%20fill%3D'none'%20stroke%3D'%23fff'%20stroke-width%3D'.35'%20stroke-linecap%3D'round'%2F%3E%3Crect%20x%3D'8.2'%20y%3D'.9'%20width%3D'4.2'%20height%3D'4.2'%20rx%3D'.7'%20fill%3D'url(%23c)'%2F%3E%3Cpath%20d%3D'M10.3%201%20V5'%20stroke%3D'rgba(0%2C0%2C0%2C.4)'%20stroke-width%3D'.4'%2F%3E%3C%2Fsvg%3E") no-repeat; transform-origin: calc(var(--reach, 46px) + 9px) 3px; transform: rotate(var(--lift, 0deg)); }
.tt-head .stylus { position: absolute; left: 1.75px; top: 19.1px; width: 1.2px; height: 1.4px; border-radius: .3px; background: #c8a24a; }
.tt-arm-weight { position: absolute; left: 4px; top: -7px; width: 18px; height: 14px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'18'%20height%3D'14'%20viewBox%3D'0%200%2018%2014'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'w'%20x1%3D'0'%20y1%3D'0'%20x2%3D'0'%20y2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23d8d8d8'%2F%3E%3Cstop%20offset%3D'.14'%20stop-color%3D'%23f4f4f4'%2F%3E%3Cstop%20offset%3D'.3'%20stop-color%3D'%23d6d6d6'%2F%3E%3Cstop%20offset%3D'.62'%20stop-color%3D'%23888'%2F%3E%3Cstop%20offset%3D'.84'%20stop-color%3D'%23474747'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%236c6c6c'%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D'd'%20x1%3D'0'%20y1%3D'0'%20x2%3D'0'%20y2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23555'%2F%3E%3Cstop%20offset%3D'.22'%20stop-color%3D'%232a2a2a'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%23080808'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20x%3D'3.4'%20y%3D'0'%20width%3D'14.6'%20height%3D'14'%20rx%3D'1.6'%20fill%3D'url(%23w)'%2F%3E%3Crect%20x%3D'6'%20y%3D'.25'%20width%3D'1'%20height%3D'13.5'%20fill%3D'rgba(0%2C0%2C0%2C.33)'%2F%3E%3Crect%20x%3D'7'%20y%3D'.25'%20width%3D'.4'%20height%3D'13.5'%20fill%3D'rgba(255%2C255%2C255%2C.18)'%2F%3E%3Crect%20x%3D'8.5'%20y%3D'.25'%20width%3D'1'%20height%3D'13.5'%20fill%3D'rgba(0%2C0%2C0%2C.33)'%2F%3E%3Crect%20x%3D'9.5'%20y%3D'.25'%20width%3D'.4'%20height%3D'13.5'%20fill%3D'rgba(255%2C255%2C255%2C.18)'%2F%3E%3Crect%20x%3D'11'%20y%3D'.25'%20width%3D'1'%20height%3D'13.5'%20fill%3D'rgba(0%2C0%2C0%2C.33)'%2F%3E%3Crect%20x%3D'12'%20y%3D'.25'%20width%3D'.4'%20height%3D'13.5'%20fill%3D'rgba(255%2C255%2C255%2C.18)'%2F%3E%3Crect%20x%3D'13.5'%20y%3D'.25'%20width%3D'1'%20height%3D'13.5'%20fill%3D'rgba(0%2C0%2C0%2C.33)'%2F%3E%3Crect%20x%3D'14.5'%20y%3D'.25'%20width%3D'.4'%20height%3D'13.5'%20fill%3D'rgba(255%2C255%2C255%2C.18)'%2F%3E%3Crect%20x%3D'16'%20y%3D'.25'%20width%3D'1'%20height%3D'13.5'%20fill%3D'rgba(0%2C0%2C0%2C.33)'%2F%3E%3Crect%20x%3D'17'%20y%3D'.25'%20width%3D'.4'%20height%3D'13.5'%20fill%3D'rgba(255%2C255%2C255%2C.18)'%2F%3E%3Crect%20x%3D'0'%20y%3D'.8'%20width%3D'3.9'%20height%3D'12.4'%20rx%3D'.9'%20fill%3D'url(%23d)'%2F%3E%3Crect%20x%3D'1.3'%20y%3D'0.94'%20width%3D'1.5'%20height%3D'.34'%20fill%3D'rgba(255%2C255%2C255%2C0.48)'%2F%3E%3Crect%20x%3D'1.3'%20y%3D'1.55'%20width%3D'1.5'%20height%3D'.34'%20fill%3D'rgba(255%2C255%2C255%2C0.6)'%2F%3E%3Crect%20x%3D'0.5'%20y%3D'2.52'%20width%3D'2.6'%20height%3D'.34'%20fill%3D'rgba(255%2C255%2C255%2C0.7)'%2F%3E%3Crect%20x%3D'1.3'%20y%3D'3.78'%20width%3D'1.5'%20height%3D'.34'%20fill%3D'rgba(255%2C255%2C255%2C0.78)'%2F%3E%3Crect%20x%3D'1.3'%20y%3D'5.25'%20width%3D'1.5'%20height%3D'.34'%20fill%3D'rgba(255%2C255%2C255%2C0.83)'%2F%3E%3Crect%20x%3D'0.5'%20y%3D'6.83'%20width%3D'2.6'%20height%3D'.34'%20fill%3D'rgba(255%2C255%2C255%2C0.85)'%2F%3E%3Crect%20x%3D'1.3'%20y%3D'8.41'%20width%3D'1.5'%20height%3D'.34'%20fill%3D'rgba(255%2C255%2C255%2C0.83)'%2F%3E%3Crect%20x%3D'1.3'%20y%3D'9.88'%20width%3D'1.5'%20height%3D'.34'%20fill%3D'rgba(255%2C255%2C255%2C0.78)'%2F%3E%3Crect%20x%3D'0.5'%20y%3D'11.14'%20width%3D'2.6'%20height%3D'.34'%20fill%3D'rgba(255%2C255%2C255%2C0.7)'%2F%3E%3Crect%20x%3D'1.3'%20y%3D'12.11'%20width%3D'1.5'%20height%3D'.34'%20fill%3D'rgba(255%2C255%2C255%2C0.6)'%2F%3E%3Crect%20x%3D'1.3'%20y%3D'12.72'%20width%3D'1.5'%20height%3D'.34'%20fill%3D'rgba(255%2C255%2C255%2C0.48)'%2F%3E%3Crect%20x%3D'3.75'%20y%3D'.4'%20width%3D'.5'%20height%3D'13.2'%20fill%3D'rgba(0%2C0%2C0%2C.55)'%2F%3E%3C%2Fsvg%3E") no-repeat; transform-origin: -4px 7px; transform: rotate(var(--lift, 0deg)); }
.tt-front {
  position: absolute;
  left: 0;
  right: 0;
  top: 92px;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-radius: 0 0 4px 4px;
  /* the plinth's oiled teak front: long grain, rounded over at its ends */
  background:
    linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,0) 4px, rgba(255,236,206,.05) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,.12)),
    linear-gradient(90deg, rgba(20,8,0,.3), rgba(255,232,196,.07) 3px, transparent 8px calc(100% - 8px), rgba(20,8,0,.12) calc(100% - 3px), rgba(20,8,0,.36)),
    url(tex/teak.jpg) -540px -704px / 1000px 1000px,
    #a8743f;
  box-shadow: inset 0 1px 0 rgba(255,240,215,.22), inset 0 -4px 8px rgba(0,0,0,.35);
  color: #e6d6b4;
  font: 700 10px 'Archivo Narrow', sans-serif;
  letter-spacing: .3em;
}
/* the turntable's script badge is chrome on the wood (the receiver's is printed ink on silver) */
.tt-front .brand {
  font: 17px 'Pacifico', cursive;
  letter-spacing: 0;
  color: transparent;
  background: linear-gradient(180deg, #fafafa, #8c8c8c 55%, #e2e2e2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.45));
}
.tt-front .spd { margin-left: auto; display: flex; gap: 4px; }
/* the speed selectors: small moulded push caps like the receiver's, the chosen one pressed in */
.tt-front .spd span {
  padding: 4px 6px 3px calc(6px + .08em);
  line-height: 1;
  letter-spacing: .08em;
  border-radius: 2px;
  background: linear-gradient(#4a4642, #27241f 45%, #1b1916 55%, #2a2723);
  color: #a99d88;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 1px 0 0 rgba(255,255,255,.06), inset -1px 0 0 rgba(0,0,0,.45), 0 0 0 1px #0b0a09, 0 1.5px 0 #131210, 0 2px 3px rgba(0,0,0,.35);
}
.tt-front .spd span.on { color: #ffd27a; text-shadow: 0 0 4px rgba(255,210,122,.55); translate: 0 1px; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset -1px 0 0 rgba(0,0,0,.45), 0 0 0 1px #0b0a09, 0 .5px 0 #131210; }
#tt-led { width: 7px; height: 7px; border-radius: 50%; background: #3a1a12; }
#tt.playing #tt-led { background: #ff4a2a; box-shadow: 0 0 6px #ff4a2a; }

/* the album you're playing, propped up on the cabinet beside the turntable */
#tt-sleeve {
  position: absolute;
  left: 150px;
  top: 255px;
  width: 116px;
  height: 120px;
  opacity: 0;
  translate: 0 10px;
  transition: opacity .5s, translate .5s;
  pointer-events: none;
}
#tt-sleeve.on { opacity: 1; translate: 0 0; }
#tt-sleeve .sleeve-art { position: absolute; left: 8px; top: 0; width: 104px; height: 104px; background: #333 center / cover; box-shadow: 4px 6px 10px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.08); transform: perspective(400px) rotateY(14deg) rotateZ(-2deg); }
#tt-sleeve::after { /* a little wire stand */
  content: '';
  position: absolute;
  left: 20px;
  right: 18px;
  bottom: 0;
  height: 18px;
  border: 2px solid #b9b2a2;
  border-top: 0;
  border-radius: 0 0 4px 4px;
}
/* ---------- the console cabinet ---------- */
#hcab {
  position: absolute;
  left: 50px;
  top: 435px;
  width: 900px;
}
/* The console is oiled teak (tex/: photographed veneer, 1000 stage px to the metre, so the grain
   is true to size). Long grain runs along every rail; the legs and grille slats are cut with it
   running down their length. Light comes from the room's upper left: edges rounded over catch it
   on top and fall away underneath. */
.hcab-top { /* the top board's solid front edge: a roundover on top, a softer one underneath. It is
               a slab of its own, a little wider than the body, so it overhangs it at each end */
  position: relative;
  margin: 0 -4px;
  height: 18px;
  border-radius: 6px 6px 0 0;
  background:
    linear-gradient(180deg, rgba(255,240,212,.5) 0, rgba(255,234,200,.3) 1px, rgba(255,228,190,.13) 3px, rgba(255,228,190,0) 6px 11px, rgba(28,12,2,.16) 14px, rgba(28,12,2,.42) 17px, rgba(16,6,0,.62) 18px),
    linear-gradient(90deg, rgba(20,8,0,.34), rgba(255,232,196,.06) 4px, transparent 9px calc(100% - 9px), rgba(20,8,0,.16) calc(100% - 4px), rgba(20,8,0,.42)),
    url(tex/teak.jpg) -46px -330px / 1000px 1000px,
    #a8743f;
  box-shadow: 0 -2px 6px rgba(0,0,0,.3), 4px 5px 7px -3px rgb(var(--sh-rgb) / calc(.45 * var(--sh-k)));
}
/* The lamp stands on this board, set back from its edge: its bulb is behind the edge's face, so the
   face takes none of its light, but the rounded-over arris along the top mirrors the bulb as a fine
   warm line, brightest under the lamp. It is the lamp's light, so it sits above the room's darkness
   (in full room light it is lost in the room's own highlight there). */
.hcab-top::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 4; pointer-events: none; border-radius: 6px 6px 0 0; background: radial-gradient(ellipse 240px 1.7px at 784px 1px, rgb(255 226 178 / .8), rgb(255 214 160 / .28) 45%, transparent), radial-gradient(ellipse 440px 2.6px at 784px 1.3px, rgb(255 206 150 / .18), transparent); opacity: calc(var(--lamp) * var(--dark, 0)); transition: opacity .5s; }
.hcab-body {
  position: relative;
  z-index: 4; /* above the room's darkness; it darkens itself, under its lights */
  height: 300px;
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  /* one book-matched pair of leaves: the mirror line runs down the middle, behind the receiver */
  background:
    linear-gradient(180deg, rgba(255,238,212,.07), rgba(255,238,212,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,.16)),
    linear-gradient(90deg, rgba(20,8,0,.3) 0, rgba(255,232,196,.1) 3px, transparent 9px calc(100% - 9px), rgba(20,8,0,.12) calc(100% - 3px), rgba(20,8,0,.38) 100%),
    linear-gradient(100deg, transparent 12%, rgba(255,242,220,.05) 28%, transparent 44%),
    url(tex/teak-book.jpg) 50% -112px / 1000px 500px,
    #a8743f;
  /* under the top board's overhang its top edge is in shade; the bottom rail falls away. It stands
     close against the wall: a tight shade where it meets the drawer below (ambient), and its cast
     shadow from the room's key light, down and to the right, fading as that light is dimmed */
  box-shadow: inset 0 1px 0 rgba(30,12,0,.5), inset 0 6px 6px -4px rgb(var(--sh-rgb) / .5), inset 0 2px 0 rgba(255,236,206,.06), inset 0 -8px 14px rgba(0,0,0,.42), 0 2px 3px -1px rgb(var(--sh-rgb) / .4), 7px 16px 22px -8px rgb(var(--sh-rgb) / calc(.48 * var(--sh-k)));
  border-radius: 0 0 8px 8px;
}
/* each grille opening is routed through the front: a chamfer round it (the border, mitred at the
   corners, shows the same teak as the face around it, lit by the way each side faces), then the
   woven cloth set back behind six rounded teak slats, which throw soft shadows on it */
.hspk { /* 220 leaves the receiver exactly its width, centred, and six slats with equal cloth either side */
  flex: 0 0 220px;
  border: 4px solid;
  border-color: rgba(14,6,0,.56) rgba(255,228,186,.14) rgba(255,228,186,.26) rgba(14,6,0,.34);
  border-radius: 6px;
  background:
    repeating-linear-gradient(90deg, rgba(10,5,0,.55) 0, rgba(10,5,0,.3) 2px, rgba(10,5,0,.1) 4.5px, rgba(10,5,0,0) 7px 21.5px, rgba(10,5,0,.22) 24px, rgba(10,5,0,.55) 31px) 1px 0 / 100% 100% padding-box,
    linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,0) 30%, rgba(255,222,170,.04) 80%, rgba(0,0,0,.1)) padding-box,
    linear-gradient(rgba(74,34,6,.16), rgba(74,34,6,.16)) padding-box,
    url(tex/cloth.jpg) 0 0 / 360px 360px padding-box,
    url(tex/teak-book.jpg) -68px -128px / 1000px 500px border-box border-box,
    #3e3020 padding-box;
  box-shadow: inset 0 0 0 1px rgba(8,3,0,.75), inset 0 14px 12px -8px rgba(0,0,0,.62), inset 8px 0 8px -6px rgba(0,0,0,.42), inset 0 -3px 5px -2px rgba(0,0,0,.3);
  position: relative;
}
.hspk:last-child { background-position: 1px 0, 0 0, 0 0, -137px -71px, -712px -128px, 0 0; }
.hspk::after { /* the slats: half-round teak, lit on the left; the frame's top shades their tops */
  content: '';
  position: absolute;
  inset: 0 1px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,0) 9px calc(100% - 5px), rgba(0,0,0,.28)),
    repeating-linear-gradient(90deg, transparent 0 24px, rgba(30,12,0,.32) 24px, rgba(255,236,206,.26) 25.3px, rgba(255,236,206,.1) 26.6px, rgba(255,236,206,0) 27.8px, rgba(30,12,0,.12) 29.4px, rgba(30,12,0,.5) 31px),
    url(tex/teak-v.jpg) -301px -40px / 1000px 1000px,
    #a8743f;
  -webkit-mask: linear-gradient(90deg, transparent 23.6px, #000 24.4px 30.6px, transparent 31.4px 54.6px, #000 55.4px 61.6px, transparent 62.4px 85.6px, #000 86.4px 92.6px, transparent 93.4px 116.6px, #000 117.4px 123.6px, transparent 124.4px 147.6px, #000 148.4px 154.6px, transparent 155.4px 178.6px, #000 179.4px 185.6px, transparent 186.4px);
          mask: linear-gradient(90deg, transparent 23.6px, #000 24.4px 30.6px, transparent 31.4px 54.6px, #000 55.4px 61.6px, transparent 62.4px 85.6px, #000 86.4px 92.6px, transparent 93.4px 116.6px, #000 117.4px 123.6px, transparent 124.4px 147.6px, #000 148.4px 154.6px, transparent 155.4px 178.6px, #000 179.4px 185.6px, transparent 186.4px);
}
.hspk:last-child::after { background-position: 0 0, 0 0, -618px -310px, 0 0; }
.hrcv {
  flex: 1;
  min-width: 0; /* never wider than its slot, so the grilles can't be pushed off the cabinet */
  position: relative;
  border-radius: 3px;
  padding: 10px 16px 8px;
  /* a horizontally brushed aluminium plate: its sheen is a soft upright band (brushed metal smears a
     highlight across its grain), warm from the room */
  background:
    linear-gradient(90deg, rgba(255,255,255,0) 6%, rgba(255,255,255,.2) 25%, rgba(255,255,255,.06) 37%, rgba(255,255,255,0) 50%, rgba(0,0,0,.05) 78%, rgba(0,0,0,.1) 100%),
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 35%, rgba(0,0,0,.04) 70%, rgba(0,0,0,.14)),
    linear-gradient(rgba(196,176,146,.16), rgba(196,176,146,.16)),
    url(tex/brushed.jpg) 0 0 / 640px 160px,
    #c4c0b6;
  /* machined edges: a bright chamfer on top, a lit left edge, the right and bottom falling away; it
     sits in a cut-out in the teak, a dark reveal round it, standing a little proud of the wood */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9), inset 0 2px 0 rgba(255,255,255,.22),
    inset 1px 0 0 rgba(255,255,255,.45), inset -1px 0 0 rgba(0,0,0,.22),
    inset 0 -1px 0 rgba(0,0,0,.38), inset 0 -2px 0 rgba(0,0,0,.08),
    0 0 0 1px #160b04, 0 0 0 2px rgba(22,11,4,.5), 0 0 0 3px rgba(22,11,4,.16),
    1px 3px 5px 1px rgba(0,0,0,.34);
  color: #2a2620;
}
/* printed on the plate: crisp, small, widely spaced capitals (the bitmap font is only for the display) */
.hrcv-brand { display: flex; align-items: baseline; justify-content: space-between; }
.hrcv-brand b { font: 19px/1 'Pacifico', cursive; letter-spacing: 0; font-weight: normal; color: #2a2620; }
.hrcv-brand span { font: 700 10px/1 'Archivo Narrow', sans-serif; letter-spacing: .28em; margin-right: -.28em; color: #2e2b26; }
/* The dial: dark glass set back behind a thin chrome bezel. The bezel is drawn as rings inside the
   window's own box (no layout change): a dark joint against the plate, the chrome (a lit top lip,
   darker underneath), a black edge where it meets the glass; then the plate's thickness shades the
   top of the glass. Lit, the window is above the room's darkness, so its chrome mixes toward the
   night by --tk; switched off it is under the darkness with the plate. */
#hwin, .hvu {
  --tk: 0;
  --ch-a: color-mix(in srgb, #f6f5f0 calc(100% - var(--tk) * 88%), rgb(var(--night, 5 5 5)));
  --ch-b: color-mix(in srgb, #b4b2ab calc(100% - var(--tk) * 88%), rgb(var(--night, 5 5 5)));
  --ch-c: color-mix(in srgb, #64625d calc(100% - var(--tk) * 88%), rgb(var(--night, 5 5 5)));
  --trim: inset 0 0 0 1px rgb(12 12 12 / .9), inset 0 2px 0 var(--ch-a), inset 0 -2px 0 var(--ch-c), inset 0 0 0 3px var(--ch-b), inset 0 0 0 4px #0a0a0a;
  --lip: 0 1px 0 rgb(255 252 244 / calc(.5 * (1 - var(--tk)))), 0 -1px 0 rgb(0 0 0 / .28);
}
#hwin {
  position: relative;
  height: 86px;
  margin: 5px 0 8px;
  border-radius: 4px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, #0f2a2c, #061213 75%);
  box-shadow: var(--trim), inset 0 9px 8px -3px rgb(0 0 0 / .82), inset 0 -3px 6px -2px rgb(0 0 0 / .5), var(--lip);
}
/* lit: the lamps behind the dial glass show as three soft pools along its foot, and the window
   gives off only a little of its light round its edge */
#hifi:not(.off) #hwin {
  background: radial-gradient(ellipse 120px 58px at 15% 104%, rgb(60 200 210 / .16), transparent), radial-gradient(ellipse 130px 60px at 50% 104%, rgb(60 200 210 / .13), transparent), radial-gradient(ellipse 120px 58px at 85% 104%, rgb(60 200 210 / .16), transparent), radial-gradient(ellipse at 50% 30%, #0f2a2c, #061213 75%);
  box-shadow: var(--trim), inset 0 9px 8px -3px rgb(0 0 0 / .82), inset 0 -3px 6px -2px rgb(0 0 0 / .5), var(--lip), 0 0 calc(var(--dark, 0) * 4px) rgb(90 230 255 / calc(var(--dark, 0) * .3));
}
/* the glass: a crisp band where it mirrors the room's light, faint below it, and the cut edge of the
   pane catching the light along its foot (only on the glass, inside the bezel) */
#hwin::after { content: ''; position: absolute; inset: 4px; border-radius: 1px; pointer-events: none; background: linear-gradient(177deg, rgb(255 255 255 / .075) 0 30%, rgb(255 255 255 / .018) 30.5% 100%), linear-gradient(0deg, rgb(255 255 255 / .13) 0 1px, transparent 1px); }
/* the table lamp, off to the right, shows in the glass as a faint slanted band once the room is dark */
#hwin::before, #vuR::before { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, rgba(255,226,176,0) 66%, rgba(255,226,176,.1) 67%, rgba(255,226,176,.025) 80%, rgba(255,226,176,0) 81%); opacity: calc(var(--lamp, 0) * var(--dark, 0) * .5); transition: opacity .5s; } /* (half: the glass mirrors the room the lamp lights, not the lamp itself, which is behind its plane) */
/* (a reflection is the lamp's light, not the glass's: with the set off and its glass under the
   darkness, the band stays over it, still clipped to the glass) */
#hifi.off #hwin::before, #hifi.off #vuR::before { z-index: 6; }
/* the scale printed on the glass, laid out to the pointer's travel (88 at the left end, 4 MHz to a
   sixth of it; hifi.js centres each figure on its mark): a long mark every 4 MHz, a short one every
   1, from 88 to 108 */
.hscale { position: absolute; left: 12px; right: 12px; top: 6px; height: 16px; font: 700 10px/16px 'Archivo Narrow', sans-serif; letter-spacing: .06em; color: rgba(140, 240, 230, .45); }
.hscale span { position: absolute; top: 0; translate: -50% 0; }
.hscale span.unit { translate: -100% 0; font-size: 8.5px; letter-spacing: .1em; }
.hscale::after { content: ''; position: absolute; left: 0; width: calc(100% * 5 / 6 + 1px); top: 17px; height: 6px; opacity: .8; background: linear-gradient(90deg, currentColor 0 1px, transparent 1px) 0 0 / calc((100% - 1px) / 5) 6px repeat-x, linear-gradient(90deg, currentColor 0 1px, transparent 1px) 0 0 / calc((100% - 1px) / 20) 3px repeat-x; }
/* (switched off, the print is plain ink on the dark glass, lit only by the room) */
#hifi.off .hscale { opacity: 1; color: rgb(205 205 195 / .4); }
#hpointer { position: absolute; top: 4px; width: 2px; height: 28px; margin-left: -1px; background: #ff6a3a; box-shadow: 0 0 3px #ff6a3a; transition: left .8s cubic-bezier(.5, 0, .2, 1); left: 50%; }
.vfd { position: absolute; left: 12px; right: 12px; white-space: nowrap; overflow: hidden; color: #8ef6ec; text-shadow: 0 0 6px rgba(120, 255, 240, .8); }
#hline1 { top: 33px; font-size: 18px; letter-spacing: 2px; color: #ffb867; text-shadow: 0 0 6px rgba(255, 170, 80, .7); }
#hline2 { top: 53px; font-size: 26px; letter-spacing: 1px; }
#hline2 span { display: inline-block; }
#hline2.scroll span { padding-left: 100%; animation: hmarquee var(--dur, 12s) linear infinite; }
@keyframes hmarquee { to { transform: translateX(-100%); } }
#hstage-off #hwin .vfd, #hifi.off .vfd { opacity: .12; }
#hifi.off #hpointer { opacity: 1; background: #8c3b22; box-shadow: none; } /* unlit, it's just a painted needle */

.hmeters { display: flex; gap: 10px; margin-bottom: 12px; } /* (room above the control row for its legends) */
.hvu {
  position: relative;
  flex: 1;
  height: 56px;
  border-radius: 4px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 120%, #fff4d2, #e9d9a8 70%);
  box-shadow: var(--lip); /* (its bezel is drawn over the face, by ::after) */
}
.hvu .needle { position: absolute; left: 50%; bottom: -8px; width: 2px; height: 58px; margin-left: -1px; background: #1a1612; transform-origin: 50% 100%; transform: rotate(-48deg); }
#hifi.playing .hvu { background: radial-gradient(ellipse at 50% 120%, #fff7dc, #f3dc96 70%); box-shadow: inset 0 0 0 2px #2a241c, inset 0 3px 8px rgba(0,0,0,.35), inset 0 0 18px rgba(255, 200, 90, .5); }

.hctl { display: flex; align-items: center; gap: 10px; }
.hbtn { /* moulded caps with a slight dish, each standing in its own dark slot */
  font: 700 10.5px/1 'Archivo Narrow', sans-serif;
  letter-spacing: .12em;
  padding: 6px 10px 6px calc(10px + .12em);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  color: #eee;
  background: linear-gradient(#4a4642, #27241f 45%, #1b1916 55%, #2a2723);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 1px 0 0 rgba(255,255,255,.07), inset -1px 0 0 rgba(0,0,0,.45), 0 0 0 1px #0b0a09, 0 2px 0 #131210, 0 3px 4px rgba(0,0,0,.35);
}
.hbtn:active, .hbtn.pressed { transform: translateY(1.5px); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px #0b0a09, 0 .5px 0 #131210; }
.hbtn.on { color: #ffd27a; text-shadow: 0 0 6px rgba(255,210,122,.6); }
.hbtn svg { display: block; margin: 1.25px 2px; } /* the transport symbols (hifi.js draws them), as tall as a legend */
.hsel { position: relative; display: flex; gap: 4px; }
/* silkscreened group legends over the buttons, with a little bracket; POWER under its switch */
.hsel::before, #hpow::after { position: absolute; font: 700 7px/1 'Archivo Narrow', sans-serif; letter-spacing: .25em; text-indent: .25em; white-space: nowrap; color: #2e2b26; pointer-events: none; }
.hsel::before { content: attr(data-legend); left: 0; right: 0; bottom: calc(100% + 8px); text-align: center; }
.hsel::after { content: ''; position: absolute; left: 1px; right: 1px; bottom: calc(100% + 3px); height: 3px; border: 1px solid rgba(46,43,38,.55); border-bottom: 0; pointer-events: none; }
/* the volume knob: a knurled skirt and a spun-aluminium cap. Only the skirt and the pointer
   turn; the light on the metal stays where the light is */
#hvol { position: relative; width: 46px; height: 46px; border-radius: 50%; cursor: ns-resize; box-shadow: 2px 4px 5px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.3); }
#hvol::before { /* the cap */
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,.05) 1px 2px),
    conic-gradient(from -90deg, #7d7d7d 0deg, #f6f6f6 45deg, #8a8a8a 90deg, #6a6a6a 180deg, #e9e9e9 225deg, #808080 270deg, #6a6a6a 360deg);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.9), inset 0 -1px 2px rgba(0,0,0,.5);
}
#hvol .rot { position: absolute; inset: 0; border-radius: 50%; }
#hvol .rot::before, #hvol::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; -webkit-mask: radial-gradient(circle, transparent 0 18.5px, #000 19.5px); mask: radial-gradient(circle, transparent 0 18.5px, #000 19.5px); }
#hvol .rot::before { background: repeating-conic-gradient(#dcdcdc 0deg, #5e5e5e 2.5deg, #dcdcdc 5deg); } /* 72 soft ridges: no hard edges to shimmer */
#hvol::after { background: linear-gradient(160deg, rgba(255,255,255,.3), rgba(0,0,0,.35)); }
#hvol .mark { position: absolute; left: 50%; top: 6px; width: 2px; height: 10px; margin-left: -1px; border-radius: 1px; background: #b3261e; box-shadow: 0 0 0 .5px rgba(60,10,6,.4); }
.hvol-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; font: 700 8px/1 'Archivo Narrow', sans-serif; letter-spacing: .22em; text-indent: .22em; color: #2e2b26; margin-left: auto; }
#hpow { /* a chrome push-button in a dark bezel ring */
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: conic-gradient(from -90deg, #7d7d7d 0deg, #f6f6f6 45deg, #8a8a8a 90deg, #6a6a6a 180deg, #e9e9e9 225deg, #808080 270deg, #6a6a6a 360deg);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.85), inset 0 -1px 2px rgba(0,0,0,.45), 0 0 0 2px #1d1b18, 0 0 0 3px rgba(255,255,255,.45), 0 2px 3px 2px rgba(0,0,0,.45);
}
#hpow:active { box-shadow: inset 0 1px 2px rgba(0,0,0,.35), 0 0 0 2px #1d1b18, 0 0 0 3px rgba(255,255,255,.45), 0 1px 2px 2px rgba(0,0,0,.45); }
#hpow::after { content: 'POWER'; left: 50%; top: calc(100% + 9px); translate: -50% 0; }
#hled { width: 8px; height: 8px; border-radius: 50%; background: #3a1a12; box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); }
#hifi:not(.off) #hled { background: #ff3b2f; box-shadow: 0 0 6px #ff3b2f; }

/* the drawer front under the console: teak, in the shade of the body's overhang along its top,
   rounded over underneath, with a solid brass bar pull */
.hcab-drawer {
  position: relative;
  margin: -6px 60px 0;
  padding: 12px 16px 8px;
  border-radius: 0 0 12px 12px;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 6px, rgba(255,236,206,.06) 13px, rgba(0,0,0,0) 22px, rgba(20,8,0,.16) 31px, rgba(20,8,0,.46) 37px),
    linear-gradient(90deg, rgba(20,8,0,.3), rgba(255,232,196,.05) 4px, transparent 12px calc(100% - 12px), rgba(20,8,0,.14) calc(100% - 4px), rgba(20,8,0,.4)),
    url(tex/teak.jpg) -262px -436px / 1000px 1000px,
    #a8743f;
  box-shadow: inset 0 9px 8px -4px rgba(0,0,0,.55), 0 2px 4px rgb(var(--sh-rgb) / .4), 4px 8px 14px rgb(var(--sh-rgb) / calc(.42 * var(--sh-k)));
  z-index: 1;
}
.hcab-drawer::before { /* the pull: a polished brass bar standing off the wood, its shadow below */
  content: '';
  position: absolute;
  left: 50%;
  top: 17.5px;
  width: 62px;
  height: 9px;
  margin-left: -31px;
  border-radius: 4.5px;
  pointer-events: none;
  /* a round bar: the room's light along its top, the dark of the room below, the warm wood
     reflected in its underside; its rounded ends turn away */
  background:
    radial-gradient(ellipse 4px 1.4px at 17px 2.6px, rgba(255,252,236,.95), rgba(255,252,236,0)),
    linear-gradient(90deg, rgba(50,30,6,.55), rgba(50,30,6,0) 8%, rgba(50,30,6,0) 92%, rgba(50,30,6,.6)),
    linear-gradient(180deg, #6a4816 0, #d9b25e 14%, #fff2c6 28%, #f0d27e 38%, #b4862e 52%, #4e3410 66%, #7a5822 80%, #c99c4c 90%, #5a3c14 100%);
  box-shadow: 0 0 0 .5px rgba(40,24,6,.75), 1px 3px 3px rgba(0,0,0,.45);
}
#crateBtn { font: 700 9px 'Archivo Narrow', sans-serif; letter-spacing: .2em; background: none; border: 0; color: var(--label); cursor: pointer; }
.hlegs { position: relative; height: 70px; margin: 0 90px; z-index: 0; }
/* the legs: turned teak, tapering to a brass sabot. The round shading is a conic gradient centred
   where the taper's sides would meet (11px, 195.6px), so its bands narrow with the leg */
.hlegs .leg {
  position: absolute;
  top: -10px;
  width: 22px;
  height: 80px;
  clip-path: polygon(0 0, 22px 0, 17.5px 80px, 4.5px 80px);
  background:
    linear-gradient(180deg, transparent 68.5px, rgba(26,14,2,.85) 68.5px 69.5px, rgba(255,240,200,.55) 69.5px 70.3px, transparent 70.3px 79px, rgba(0,0,0,.4) 79px),
    conic-gradient(from -3.2195deg at 11px 126.56px, #3a2608 0deg, #7a5a24 .644deg, #e2c47c 1.417deg, #fff3cc 1.932deg, #d0a855 2.382deg, #7a5820 3.22deg, #3c280c 3.863deg, #7e5c22 4.894deg, #c9a050 5.795deg, #4a3210 6.439deg) 0 69px / 22px 11px no-repeat,
    conic-gradient(from -3.2195deg at 11px 195.56px, rgba(20,8,0,.58) 0deg, rgba(20,8,0,.26) .515deg, rgba(255,232,196,.1) 1.417deg, rgba(255,236,204,.27) 2.06deg, rgba(255,232,196,.08) 2.704deg, rgba(0,0,0,0) 3.863deg, rgba(20,8,0,.24) 5.151deg, rgba(20,8,0,.62) 6.439deg),
    url(tex/teak-v.jpg) -420px -300px / 1000px 1000px,
    #a8743f;
}
.hlegs .leg.l { left: 20px; transform: rotate(8deg); }
.hlegs .leg.r { right: 20px; transform: rotate(-8deg); background-position: 0 0, 0 69px, 0 0, -705px -560px, 0 0; }
/* The console stands on the floor. Under its body the floor is in its shade: darkest right under
   the drawer, at the back, and lightening toward the feet at the front (ambient, so it stays as the
   lights are dimmed); with the key light up to the left, its cast shadow leans a little to the
   right of it. Each foot presses into the rug: a small dark contact under the sabot, and its own
   short shadow trailing off to the right. (In the legs' own layer, above the rug and floor and
   under the legs and drawer; the feet sit at x 25.4 / 694.6, y 70 in this box once splayed.) */
/* (the shade follows the cabinet's footprint: from under the body down to the feet it is a plateau,
   falling away past them; its ends soften either side of the cabinet's ends, a little to the right) */
.hlegs::before { content: ''; position: absolute; left: -124px; right: -136px; top: -32px; height: 152px; pointer-events: none; background: linear-gradient(180deg, rgb(var(--sh-rgb) / .66) 0, rgb(var(--sh-rgb) / .6) 50%, rgb(var(--sh-rgb) / .44) 66%, rgb(var(--sh-rgb) / .2) 79%, rgb(var(--sh-rgb) / .06) 91%, transparent); -webkit-mask: linear-gradient(90deg, transparent 0, #000 8.6%, #000 91.4%, transparent); mask: linear-gradient(90deg, transparent 0, #000 8.6%, #000 91.4%, transparent); }
.hlegs::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 84px; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 14px 4.6px at 25.6px 71px, rgb(var(--sh-rgb) / .92), rgb(var(--sh-rgb) / .5) 50%, transparent), radial-gradient(ellipse 14px 4.6px at calc(100% - 25.6px) 71px, rgb(var(--sh-rgb) / .92), rgb(var(--sh-rgb) / .5) 50%, transparent), radial-gradient(ellipse 22px 5px at 39px 69.6px, rgb(var(--sh-rgb) / calc(.42 * var(--sh-k))), transparent), radial-gradient(ellipse 22px 5px at calc(100% - 12.5px) 69.6px, rgb(var(--sh-rgb) / calc(.42 * var(--sh-k))), transparent); }

/* ---------- the record crate: Spotify records and radio stations ---------- */
#crate {
  position: absolute;
  left: 110px;
  right: 110px;
  top: 60px;
  bottom: 120px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  padding: 16px 20px;
  border-radius: 10px;
  background: linear-gradient(#f3ead4, #e2d5b5);
  box-shadow: 0 20px 50px rgba(0,0,0,.7), inset 0 0 0 1px rgba(0,0,0,.15);
  color: #1b1b1b;
  font: 15px/1.3 'Archivo Narrow', sans-serif;
}
#crate[hidden] { display: none; }
.crate-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.crate-head h2 { margin: 0; font: 24px 'DM Serif Display', serif; }
.crate-tabs { display: flex; gap: 4px; margin-left: 16px; }
.crate-tabs button { font: 700 13px 'Archivo Narrow', sans-serif; letter-spacing: 1px; padding: 4px 10px; border: 2px solid #1b1b1b; background: transparent; cursor: pointer; border-radius: 3px; }
.crate-tabs button.on { background: #1b1b1b; color: #f3ead4; }
#crateClose { margin-left: auto; font-size: 18px; background: none; border: 0; cursor: pointer; }
.crate-body { flex: 1; overflow: auto; padding-right: 4px; }
.crate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 14px; }
.sleeve { display: block; cursor: pointer; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: inherit; }
.sleeve .cover { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 3px; background: #444 center / cover; box-shadow: 0 4px 10px rgba(0,0,0,.35); overflow: hidden; }
.sleeve .cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,.18), transparent 45%); }
.sleeve:hover .cover { transform: translateY(-3px); }
.sleeve .name { display: block; margin-top: 5px; font-weight: 700; font-size: 14px; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sleeve .sub { display: block; font-size: 12px; color: #6a5d48; }
.sleeve.on .cover { box-shadow: 0 0 0 3px #d4202a, 0 4px 10px rgba(0,0,0,.35); }
.crate-msg { padding: 20px 4px; color: #4a4030; }
.crate-setup ol { padding-left: 20px; margin: 6px 0 12px; }
.crate-setup li { margin: 4px 0; }
.crate-setup code { background: #fff8e6; padding: 1px 5px; border: 1px solid #d5c6a0; border-radius: 3px; font-size: 13px; user-select: all; }
.crate-row { display: flex; gap: 8px; margin: 8px 0; }
.crate-row input { flex: 1; font: 15px 'Archivo Narrow', sans-serif; padding: 6px 8px; border: 2px solid #1b1b1b; border-radius: 3px; background: #fffaf0; }
.crate-act { font: 700 14px 'Archivo Narrow', sans-serif; letter-spacing: 1px; padding: 6px 14px; border: 0; border-radius: 3px; background: #1db954; color: #fff; cursor: pointer; }
.crate-act.plain { background: #1b1b1b; }
.crate-act.ghost { background: transparent; color: #6a5d48; border: 1px solid #b8a983; }
.crate-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; color: #6a5d48; }
.crate-foot .crate-act { margin-left: auto; }
.station .cover { display: flex; align-items: flex-end; padding: 8px; color: #fff; font: 700 15px/1.05 'Archivo Narrow', sans-serif; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.station .freq { position: absolute; top: 6px; right: 8px; font: 16px 'VT323', monospace; color: #fff; }

/* Spotify search in the crate */
.crate-search { display: flex; gap: 8px; margin-bottom: 10px; }
.crate-search input { flex: 1; font: 16px 'Archivo Narrow', sans-serif; padding: 7px 10px; border: 2px solid #1b1b1b; border-radius: 3px; background: #fffaf0; }
.crate-h3 { margin: 12px 0 6px; font: 18px 'DM Serif Display', serif; }
.crate-h3:first-child { margin-top: 2px; }
.song-list { display: flex; flex-direction: column; }
.song { display: flex; align-items: center; gap: 10px; width: 100%; padding: 5px 6px; border: 0; border-bottom: 1px solid rgba(0,0,0,.08); background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; border-radius: 3px; }
.song:hover { background: rgba(212, 32, 42, .08); }
.song-art { flex: none; width: 40px; height: 40px; border-radius: 2px; background: #444 center / cover; box-shadow: 0 2px 4px rgba(0,0,0,.3); }
.song-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.song-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-by { font-size: 13px; color: #6a5d48; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-len { flex: none; font: 16px 'VT323', monospace; color: #6a5d48; }
.crate-act.more { margin: 8px 0 0; }
.sleeve.round .cover { border-radius: 50%; }

/* inside a record: its songs */
.rec-head { display: flex; align-items: center; gap: 12px; margin: 2px 0 10px; }
.rec-head .rec-back { flex: none; }
.rec-cover { flex: none; width: 64px; height: 64px; border-radius: 3px; background: #444 center / cover; box-shadow: 0 4px 10px rgba(0,0,0,.35); }
.rec-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rec-info .crate-h3 { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-info .sub { font-size: 13px; color: #6a5d48; }
.song-idx { flex: none; width: 24px; text-align: right; font: 15px 'VT323', monospace; color: #8a7d64; }
.song.on { background: rgba(29, 185, 84, .14); }
.song.on .song-title { color: #128a3c; }
.song.on .song-idx { color: #1db954; }

/* ---------- the hi-fi room: warm and cozy ---------- */
/* its dark is a warm brown, and the table lamp opens a soft warm patch in it */
#hifi-stage { --night: 8 5 3; --lamp: 0; --hfl: 0; }
/* One key light for the room, the ceiling light up to the left: cast shadows fall down and to the
   right, in a warm brown (not grey) on the tan wall, and fade as that light is dimmed (--sh-k).
   Ambient and contact shade stays. */
#hifi-stage { --sh-rgb: 28 14 4; --sh-k: calc(1 - var(--dark, 0)); }

/* VU meters: honey-amber backlit faces with a real scale */
.hvu { background: radial-gradient(ellipse at 50% 100%, #f2e8cc, #d9cba4 80%); }
/* over the face: the same chrome bezel as the dial (drawn here, above the printed face, so the scale
   never runs over it), the face set back behind it (shaded under the plate's top edge and a little
   at its sides), and the glass: a crisp-edged band of the room's light along the top, a weak one
   below, both going as the room's light goes */
.hvu::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  /* (the recess shading is plain gradients, not blurred inset shadows: this box is re-rastered with
     every frame of the needle while a record plays) */
  background:
    linear-gradient(172deg, rgb(255 255 255 / calc(.2 * (1 - var(--tk) * .92))) 0 22%, rgb(255 255 255 / calc(.045 * (1 - var(--tk) * .92))) 22.4% 55%, transparent 55.4%),
    linear-gradient(180deg, rgb(0 0 0 / .44) 4px, rgb(0 0 0 / .2) 8px, rgb(0 0 0 / .06) 12px, transparent 16px),
    linear-gradient(90deg, rgb(0 0 0 / .26) 4px, transparent 10px calc(100% - 10px), rgb(0 0 0 / .26) calc(100% - 4px));
  box-shadow: var(--trim);
}
/* lit: two little lamps behind the face's lower corners, and only a breath of light round its edge */
#hifi:not(.off) .hvu { background: radial-gradient(circle at 17% 114%, rgb(255 246 215 / .42), transparent 44%), radial-gradient(circle at 83% 114%, rgb(255 246 215 / .42), transparent 44%), radial-gradient(ellipse at 50% 105%, #fff7d8 0, #ffe6a0 38%, #f4c662 78%, #dba543 100%); box-shadow: inset 0 0 22px rgb(255 160 50 / .38), var(--lip), 0 0 calc(1px + var(--dark, 0) * 3px) rgb(255 190 90 / calc(.15 + var(--dark, 0) * .25)); }
.vu-face { position: absolute; inset: 0; width: 100%; height: 100%; }
.vu-arc { fill: none; stroke: #2b2014; stroke-width: 1.3; }
.vu-arc.red { stroke: #b8261c; }
.vu-band { fill: none; stroke: #c62a1e; stroke-width: 4.5; }
.vu-tick { stroke: #2b2014; stroke-width: 1.2; }
.vu-tick.minor { stroke-width: .9; }
.vu-tick.red { stroke: #b8261c; }
.vu-num { font: 700 7.6px 'Archivo Narrow', sans-serif; fill: #2b2014; text-anchor: middle; }
.vu-num.red { fill: #b8261c; }
.vu-name { font: 14px 'DM Serif Display', serif; fill: #2b2014; text-anchor: middle; letter-spacing: 1px; }
.vu-side { font: 700 7px 'Archivo Narrow', sans-serif; fill: #5a4630; letter-spacing: 1px; }
.vu-needle line { stroke: #120d06; stroke-width: 1.4; stroke-linecap: round; }
.vu-needle .vu-shadow { stroke: rgba(70, 35, 0, .22); stroke-width: 1.8; }

/* every receiver button is backlit, warm amber; lit ones glow brighter */
#hifi-stage .hbtn { position: relative; z-index: 6; --bl: 255 196 110; }
#hifi-stage .hbtn::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse at 50% 60%, rgb(var(--bl) / calc(.06 + var(--dark, 0) * .3)), transparent 78%), rgb(var(--night) / calc(var(--dark, 0) * .78)); }
#hifi-stage .hbtn:not(.on) { color: color-mix(in srgb, rgb(var(--bl)) calc(25% + var(--dark, 0) * 65%), #d8d0c0); text-shadow: 0 0 calc(2px + var(--dark, 0) * 5px) rgb(var(--bl) / calc(.3 + var(--dark, 0) * .6)); }
#hifi-stage .hbtn.on::after { background: radial-gradient(ellipse at 50% 60%, rgb(var(--bl) / .34), transparent 80%); }
/* the drawn transport symbols glow the way the lettering does (a fixed filter on three small icons) */
#hifi-stage .hbtn svg { filter: drop-shadow(0 0 calc(1px + var(--dark, 0) * 3px) rgb(var(--bl) / calc(.3 + var(--dark, 0) * .6))); }
#hifi-stage .hbtn.on svg { filter: drop-shadow(0 0 3px rgba(255,210,122,.7)); }
/* switched off, the caps are just dark plastic: under the room's darkness with the faceplate */
#hifi.off .hbtn:not(.on) { color: #9a9488; text-shadow: none; }
#hifi.off .hbtn { z-index: auto; }
#hifi.off .hbtn::after { background: none; }
#hifi.off .hbtn svg { filter: none; }
.hcab-drawer { z-index: auto; }
.hlegs { z-index: -1; }
/* (on the light teak the legend is branded in, dark with a lit lower edge; at night it glows) */
#crateBtn { position: relative; z-index: 4; color: color-mix(in srgb, #ffcf7a calc(var(--dark, 0) * 85%), #24140a); text-shadow: 0 1px 0 rgb(255 232 196 / calc(.24 * (1 - var(--dark, 0)))), 0 0 calc(var(--dark, 0) * 3px) rgb(255 190 90 / calc(var(--dark, 0) * .6)); }

/* the table lamp */
.hf-lamp { position: absolute; left: 765px; top: 226px; transform: scale(.95); transform-origin: 50% 100%; width: 130px; height: 215px; padding: 0; border: 0; background: none; cursor: pointer; z-index: 4; }
.hf-lamp svg { position: absolute; left: 0; top: 0; overflow: visible; }
.lamp-body { filter: brightness(calc(1 - var(--dark, 0) * (.97 - var(--lamp) * .55))) drop-shadow(2px 4px 3px rgb(var(--sh-rgb) / calc(.5 * var(--sh-k)))); }
.lamp-shade { filter: brightness(calc(1 - var(--dark, 0) * .95)) drop-shadow(1px 3px 3px rgb(var(--sh-rgb) / calc(.34 * var(--sh-k)))); transition: filter .5s; }
.hf-lamp.on .lamp-shade { filter: drop-shadow(0 0 3px rgba(255, 214, 150, .55)) drop-shadow(0 0 10px rgba(255, 180, 100, .2)); }
/* the bulb's own light on the brass: the collars' and the base's top faces catch it (no filter:
   it is light, so it doesn't dim with the room) */
.lamp-glint { opacity: calc(var(--lamp) * (.35 + var(--dark, 0) * .65)); pointer-events: none; transition: opacity .5s; }
.shade-cloth { fill: #e4d3ad; }
.shade-folds path { fill: rgba(90, 60, 20, .04); }
.hf-lamp.on .shade-folds path { fill: rgba(150, 90, 30, .06); }
/* lit from inside, the shade shows its harp and wire frame as faint shadows */
.shade-frame { opacity: var(--lamp); transition: opacity .5s; }
.hf-lamp.on .shade-cloth { fill: url(#shade-lit); }
.shade-pleats line { stroke: rgba(110, 80, 40, .2); stroke-width: .8; }
.hf-lamp.on .shade-pleats line { stroke: rgba(170, 110, 40, .16); }
.shade-mouth { fill: rgba(60, 40, 20, .35); }
.hf-lamp.on .shade-mouth { fill: #fff7dc; }

/* the lamp stands on the cabinet top: a soft contact shadow where its base meets the wood */
.hf-lamp::after { content: ''; position: absolute; left: 22px; right: 22px; bottom: -3px; height: 6px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.55), rgba(0,0,0,0) 70%); z-index: -1; }
/* The lamp's light. Light doesn't lay a colour over a room, it lets you see it: so the lamp cuts
   its shape out of the dark, revealing the real wall and wood.
   In the room's darkness (positions in the layer's box, whose centre is the stage's: the bulb B at
   stage 830, 283; the top board's right-hand back corner C at 954, 435), the light is built as one
   group of reveals and then turned into darkness:
     - the bare bulb through the shade's openings: a wedge up the wall through the top (about 44° either
       side of upright, where the rim cuts it) and a wider cone down through the bottom (about 64°),
       their strength falling off with distance, roughly as the inverse square;
     - the shade's own glow, all round it, falling off the same way;
     - all of that stops at the cabinet top it stands on: below the board's top edge only what passes
       beyond the cabinet's end (the wall to the right of it, the far floor) is lit, the boundary the
       line from the bulb past the corner C;
     - a faint, broad bounce off the lit wall and ceiling, the only light the cabinet front, drawer,
       legs and floor get;
     - while a record plays, the turntable's neon strobe lamp on the patch of the platter's rim beside
       it (--ttl; hifi.js draws the dots there warm). The patch is 7px, a pixel short of the 8px band
       and centred on it: the mask tile snaps to whole pixels, and a full-height patch would show a
       grey hairline of the bright rim above or below the band;
   then, inverted, the receiver's glow and a dither (to break up the banding of the long, dark
   gradient) are multiplied in. (Layers composite from the bottom up; add is a union of light,
   intersect multiplies.) It repaints only when the lamp, the dimmer or the strobe lamp change. */
#hifi-stage > .room-dark {
  background: rgb(var(--night) / var(--dark, 0));
  --lamp-mask:
    var(--dither, url(tex/dither.png)) 0 0 / calc(128px / var(--s, 1)) calc(128px / var(--s, 1)),
    radial-gradient(ellipse 300px 190px at var(--rx) var(--ry), rgb(0 0 0 / calc(1 - var(--hfl) * .42)) 0, rgb(0 0 0 / calc(1 - var(--hfl) * .2)) 45%, rgb(0 0 0 / calc(1 - var(--hfl) * .06)) 75%, #000 100%),
    linear-gradient(#000 0 0),
    linear-gradient(90deg, transparent, rgb(0 0 0 / calc(var(--ttl, 0) * .25)) 18%, rgb(0 0 0 / calc(var(--ttl, 0) * .7)) 38%, rgb(0 0 0 / calc(var(--ttl, 0) * .8)) 52%, rgb(0 0 0 / calc(var(--ttl, 0) * .65)) 70%, rgb(0 0 0 / calc(var(--ttl, 0) * .45)) 88%, rgb(0 0 0 / calc(var(--ttl, 0) * .35))) calc(50% + 65px) calc(50% - 90px) / 110px 7px no-repeat,
    radial-gradient(ellipse 560px 420px at calc(50% + 330px) calc(50% + 230px), rgb(0 0 0 / calc(var(--lamp) * .085)) 0, rgb(0 0 0 / calc(var(--lamp) * .045)) 50%, rgb(0 0 0 / calc(var(--lamp) * .015)) 80%, transparent 100%),
    conic-gradient(from 0deg at calc(50% + 454px) calc(50% - 15px), #000 0deg 139deg, transparent 145deg 270deg, #000 270deg),
    radial-gradient(circle at var(--lx) var(--ly), rgb(0 0 0 / calc(var(--lamp) * .52)) 0, rgb(0 0 0 / calc(var(--lamp) * .34)) 70px, rgb(0 0 0 / calc(var(--lamp) * .17)) 170px, rgb(0 0 0 / calc(var(--lamp) * .065)) 320px, rgb(0 0 0 / calc(var(--lamp) * .02)) 460px, transparent 580px),
    radial-gradient(circle at var(--lx) var(--ly), #000 0, rgb(0 0 0 / .8) 60px, rgb(0 0 0 / .55) 130px, rgb(0 0 0 / .26) 250px, rgb(0 0 0 / .12) 380px, rgb(0 0 0 / .04) 520px, transparent 640px),
    conic-gradient(from -50deg at var(--lx) var(--ly), transparent 0deg, rgb(0 0 0 / calc(var(--lamp) * .44)) 8deg 92deg, transparent 100deg),
    conic-gradient(from 110deg at var(--lx) var(--ly), transparent 0deg, rgb(0 0 0 / calc(var(--lamp) * .6)) 10deg 130deg, transparent 140deg);
  -webkit-mask: var(--lamp-mask);
  mask: var(--lamp-mask);
  -webkit-mask-composite: intersect, intersect, subtract, add, add, intersect, add, intersect, add, add;
  mask-composite: intersect, intersect, subtract, add, add, intersect, add, intersect, add, add;
}
#hifi-stage > .room-dark { --lx: calc(50% + 330px); --ly: calc(50% - 167px); --rx: 50%; --ry: calc(50% + 102px); }
/* The cabinet's front darkens itself (it stands above the room's darkness, under its own lights).
   The bulb is behind the plane of the front, so none of the lamp's direct light reaches it: only the
   broad, weak bounce from the lit wall and ceiling, strongest toward the top on the lamp's side,
   and the receiver's own glow round the faceplate. */
.hcab-body::after {
  background: rgb(var(--night) / var(--dark, 0));
  --lamp-mask:
    radial-gradient(ellipse 300px 190px at var(--rx) var(--ry), rgb(0 0 0 / calc(1 - var(--hfl) * .42)) 0, rgb(0 0 0 / calc(1 - var(--hfl) * .2)) 45%, rgb(0 0 0 / calc(1 - var(--hfl) * .06)) 75%, #000 100%),
    radial-gradient(ellipse 640px 400px at 770px -50px, rgb(0 0 0 / calc(1 - var(--lamp) * .17)) 0, rgb(0 0 0 / calc(1 - var(--lamp) * .1)) 35%, rgb(0 0 0 / calc(1 - var(--lamp) * .04)) 70%, #000 100%);
  -webkit-mask: var(--lamp-mask);
  mask: var(--lamp-mask);
  -webkit-mask-composite: intersect;
  mask-composite: intersect;
}
/* (drawn exactly on the body's edge, the two antialiased edges left a hairline of the lit teak showing
   round the cabinet in the dark; a pixel's overlap closes it. The light's centres move with the box.) */
.hcab-body::after { inset: -1px; border-radius: 0 0 9px 9px; --rx: 451px; --ry: 101px; }
/* (the second light: the receiver's display and meters, lighting the faceplate and cabinet round them) */

/* a breath of light at the shade's top (the pool it once cast on the board's face went: that face
   takes none of the lamp's light; the board's arris glints instead) */
.hf-light { position: absolute; left: 0; top: 0; width: 1000px; height: 900px; z-index: 5; pointer-events: none; mix-blend-mode: screen; opacity: calc(var(--lamp) * (.05 + var(--dark, 0) * .55)); transition: opacity .7s; }
.hf-light i { position: absolute; display: block; }
.hf-light .amb, .hf-light .face, .hf-light .down, .hf-light .pool { display: none; }
.hf-light .up { left: 768px; top: 225px; width: 124px; height: 40px; background: radial-gradient(ellipse 50% 60% at 50% 100%, rgba(255, 220, 170, .22), transparent 80%); filter: blur(4px); }

/* ---------- the wall clock ---------- */
/* its shadow on the wall is a filter on purpose: it keeps the sweeping second hand painted with
   the clock instead of on its own compositor layer, which would force much of the room's lit
   controls into layers of their own on every repaint (measured: layerize ~12ms vs ~530ms / 4s) */
.hf-wallclock { position: absolute; left: 92px; top: 46px; width: 150px; height: 150px; filter: drop-shadow(3px 6px 5px rgb(var(--sh-rgb) / calc(.5 * var(--sh-k)))); }
.hf-wallclock svg { display: block; }
.wc-nums text { font: 14px 'DM Serif Display', serif; fill: #241a10; text-anchor: middle; }
.wc-brand { font: 9px 'Pacifico', cursive; fill: #5a4630; text-anchor: middle; }
.wc-sub { font: 700 5.5px 'Archivo Narrow', sans-serif; letter-spacing: 1.5px; fill: #7a6a52; text-anchor: middle; }
.wc-sec { transform-box: view-box; transform-origin: 80px 80px; animation: wc-sweep 60s linear infinite; }
@keyframes wc-sweep { to { transform: rotate(360deg); } }
/* the album sleeve at a true LP size beside the turntable (a 12-inch sleeve is about two-thirds
   the turntable's width), on its wire stand on the cabinet top; the clock sits a touch higher */
/* the album sleeve at a true LP size beside the turntable, stood up straight on a wire easel: it
   rests on the easel's ledge (two little hooks in front of its bottom edge), leaning back a touch;
   the front legs splay down to the cabinet top and the back support shows under it */
#tt-sleeve { left: 88px; top: 249px; width: 192px; height: 186px; }
#tt-sleeve .sleeve-art { left: 12px; width: 168px; height: 168px; transform: none; /* flat: a 3D lean goes soft when the window is resized */ box-shadow: 5px 7px 12px rgb(var(--sh-rgb) / calc(.5 * var(--sh-k))), inset 0 0 0 1px rgba(255,255,255,.08); }
#tt-sleeve::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27192%27%20height%3D%27186%27%20viewBox%3D%270%200%20192%20186%27%3E%3Cg%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%3E%0A%3Cpath%20d%3D%27M96%20160%20L96%20183%27%20stroke%3D%27%236f685c%27%20stroke-width%3D%272.2%27%2F%3E%0A%3Cpath%20d%3D%27M37%20169%20L31%20184%20M155%20169%20L161%20184%27%20stroke%3D%27%238a8374%27%20stroke-width%3D%273%27%2F%3E%0A%3Cpath%20d%3D%27M37%20169%20L31%20184%20M155%20169%20L161%20184%27%20stroke%3D%27%23d8d2c4%27%20stroke-width%3D%271.2%27%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20fill%3D%27%232a2622%27%3E%3Crect%20x%3D%2727%27%20y%3D%27183%27%20width%3D%279%27%20height%3D%273%27%20rx%3D%271.5%27%2F%3E%3Crect%20x%3D%27156%27%20y%3D%27183%27%20width%3D%279%27%20height%3D%273%27%20rx%3D%271.5%27%2F%3E%3Crect%20x%3D%2792.5%27%20y%3D%27182.5%27%20width%3D%277%27%20height%3D%273%27%20rx%3D%271.5%27%20fill%3D%27%233a342e%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat; pointer-events: none; }
#tt-sleeve::after { content: ''; position: absolute; inset: 0; width: auto; height: auto; border: 0; border-radius: 0; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27192%27%20height%3D%27186%27%20viewBox%3D%270%200%20192%20186%27%3E%3Cg%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%0A%3Cpath%20d%3D%27M36%20156%20L36%20169%20L156%20169%20L156%20156%27%20stroke%3D%27%238a8374%27%20stroke-width%3D%273.2%27%2F%3E%0A%3Cpath%20d%3D%27M36%20156%20L36%20169%20L156%20169%20L156%20156%27%20stroke%3D%27%23e2dccf%27%20stroke-width%3D%271.3%27%20transform%3D%27translate(-.4%20-.5)%27%2F%3E%0A%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat; pointer-events: none; }
/* the sleeve is printed card: a slightly softened edge where the print has worn to the board, the
   spine's fold shading its left side, and the faint ring the record has rubbed into it */
#tt-sleeve .sleeve-art { border-radius: 1.5px; box-shadow: 5px 7px 12px rgb(var(--sh-rgb) / calc(.5 * var(--sh-k))), inset 0 0 0 1px rgba(236,224,200,.16), inset 2px 0 0 rgba(0,0,0,.22), inset 0 1px 0 rgba(255,250,236,.12), inset 0 0 7px rgba(0,0,0,.2); }
#tt-sleeve .sleeve-art::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle closest-side at 50.6% 50.4%, transparent 90.5%, rgba(255,250,236,.035) 92%, rgba(255,250,236,.05) 95%, transparent 97%),
    linear-gradient(135deg, rgba(255,252,244,.09), rgba(255,252,244,0) 26%),
    radial-gradient(circle at 0 0, rgba(240,228,204,.2), transparent 6px) 0 0 / 50% 50% no-repeat,
    radial-gradient(circle at 100% 100%, rgba(240,228,204,.16), transparent 6px) 100% 100% / 50% 50% no-repeat,
    url(tex/grain.png) 0 0 / 128px 128px;
}
.hf-wallclock { top: 56px; }

/* ---------- the poster above the turntable: a 1950s space-age print in a slim walnut frame ---------- */
/* (the frame is four mitred lengths, each catching the light by the way it faces: the walnut
   shows through tinted borders; its lip throws a shadow onto the print set back behind it) */
/* (its two shadows on the wall: the ceiling light's, down and to the right, fading as it is dimmed;
   and, as the lamp takes over in the dark, the lamp's, away from it, up and to the left) */
.hf-poster { position: absolute; left: 313px; top: 26px; box-sizing: content-box; width: 360px; height: 220px; padding: 0; border: 7px solid; border-color: rgba(255,226,180,.14) rgba(0,0,0,.16) rgba(0,0,0,.36) rgba(255,226,180,.05); background: linear-gradient(135deg, #6a4128, #3e2414 45%, #5a361f 70%, #2e1a0e) border-box; outline: 1px solid #1e1008; outline-offset: -1px; box-shadow: 4px 8px 12px rgb(var(--sh-rgb) / calc(.55 * var(--sh-k))), -7px -4px 9px rgb(var(--sh-rgb) / calc(.5 * var(--lamp) * var(--dark, 0) * var(--dark, 0))); border-radius: 2px; transform: scale(.92) rotate(-.4deg); transform-origin: 50% 0; }
.hf-poster svg { display: block; box-shadow: inset 0 0 0 1px #000, 0 0 0 1px rgba(0,0,0,.6); }
.hf-poster::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,220,170,.25), inset 3px 4px 5px rgba(0,0,0,.45), inset -1px -1px 2px rgba(0,0,0,.2); }
/* it hangs from its nail on a picture wire, running down behind the frame to either side */
.hf-poster::before { content: ''; position: absolute; left: 50%; top: -19px; width: 200px; height: 12px; margin-left: -100px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%2712%27%20viewBox%3D%270%200%20200%2012%27%3E%3Cg%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%3E%0A%3Cpath%20d%3D%27M100%204.5%20L6.5%2013.5%20M100%204.5%20L193.5%2013.5%27%20stroke%3D%27rgba%280%2C0%2C0%2C.18%29%27%20stroke-width%3D%271%27%2F%3E%0A%3Cpath%20d%3D%27M100%203%20L6.5%2012%20M100%203%20L193.5%2012%27%20stroke%3D%27%238a8378%27%20stroke-width%3D%271%27%2F%3E%0A%3C%2Fg%3E%0A%3Ccircle%20cx%3D%27100.6%27%20cy%3D%274.2%27%20r%3D%273%27%20fill%3D%27rgba%280%2C0%2C0%2C.45%29%27%2F%3E%3Ccircle%20cx%3D%27100%27%20cy%3D%273%27%20r%3D%273%27%20fill%3D%27%238a8378%27%2F%3E%3Ccircle%20cx%3D%2799.2%27%20cy%3D%272.2%27%20r%3D%271.2%27%20fill%3D%27rgba%28255%2C255%2C255%2C.35%29%27%2F%3E%3C%2Fsvg%3E") no-repeat; }
.hf-poster .pa-t { font-family: 'Bowlby One', 'Arial Black', sans-serif; }
.hf-poster .pa-tag { font-family: 'Archivo Narrow', sans-serif; font-weight: 700; letter-spacing: 1.2px; }
.hf-poster .pa-small { font-family: 'Archivo Narrow', sans-serif; font-weight: 700; }

/* the lamp stands back from the front edge: a little smaller for being farther off, and its base
   drops just behind the cabinet's front lip (the lamp is clipped there), as a base set back on a
   top seen at eye level would; in room light its shade throws a soft shadow on the wall behind */
.hf-lamp { clip-path: inset(-80px -80px 6px -80px); }
.hf-lamp::before { content: ''; position: absolute; left: 16px; top: 22px; width: 118px; height: 66px; z-index: -1; border-radius: 30% 30% 46% 46%; background: rgb(var(--sh-rgb) / .24); filter: blur(7px); opacity: calc(1 - var(--dark, 0)); pointer-events: none; }

/* ---------- the rug (hifirug.js): a Star Ushak laid on the floor in front of the console ----------
   roomshell.js draws it into the hi-fi's floor, in that floor's perspective (eye level about the
   turntable, so its back border runs in under the console and the near end runs off below the view),
   under everything in the room (the console's legs at -1 stand on it) and under the room's darkness,
   so the dimmer and the lamp light it like the rest of the floor. Over it, flat on the view, the
   console's shade on the rug and the floor beneath it, in the room's shell (whose middle is the
   stage's: x 70..930, y 772..852). */
.hf-rug-shade { position: absolute; left: calc(50% - 430px); top: calc(50% + 322px); width: 860px; height: 80px; pointer-events: none; background: radial-gradient(ellipse 52% 62% at 50% 22%, rgba(22, 11, 4, .6), rgba(22, 11, 4, .25) 55%, transparent 78%); }