.nf{& .deck{justify-items:center;gap:10px;display:grid;position:relative}& .walkman{width:min(100%,540px)}& .dk{aspect-ratio:440/320;width:100%;position:relative}& .dk:before{content:"";box-shadow:0 16px 26px #0009, 0 4px 30px color-mix(in srgb, var(--tape-far) 30%, transparent);border-radius:6%/8%;position:absolute;inset:7% 2% 1.5% 2.5%}& .dk-layer{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}& .dk-keys{pointer-events:auto}& .dk-back,& .dk-veil,& .dk-front{will-change:transform}& .dk .dk-s1{stop-color:var(--tape-cyan)}& .dk .dk-s2{stop-color:var(--tape-mid)}& .dk .dk-s3{stop-color:var(--tape-far)}& .dk .dk-w1{stop-color:var(--tape-cyan)}& .dk .dk-w2{stop-color:var(--tape-mid)}& .dk .dk-w3{stop-color:var(--tape-far)}& .dk .dk-glow{stroke:var(--tape-cyan)}& .dk .sil{fill:var(--tape-deep)}& .dk .sil-line{stroke:var(--tape-deep);stroke-opacity:.8}& .dk .rim-line{stroke:var(--tape-cyan);stroke-opacity:.4}& .dk .solder circle{fill:var(--tape-cyan);fill-opacity:.55}& .dk .dk-gold1{stop-color:var(--candle)}& .dk .dk-gold2{stop-color:var(--warn)}& .dk .dk-motor{opacity:.55}& .dk .dk-chrome1{stop-color:var(--cyan-ink)}& .dk .dk-chrome2{stop-color:var(--white)}& .dk .dk-chrome3{stop-color:var(--tape-mid)}& .dk .chrome-edge{stroke:var(--white);stroke-opacity:.7}& .dk .dk-pinch{fill:var(--metal-lo)}& .dk .dk-silk{font-family:var(--mono);letter-spacing:.5px;fill:var(--print-silk);font-size:6.4px;font-weight:500}& .dk .dk-silk.dark{fill:var(--metal-lo)}& .dk .dk-silk.lit{fill:var(--lcd);letter-spacing:2px}& .dk .dk-emboss{font-family:var(--mono);letter-spacing:2px;fill:var(--tape-far);fill-opacity:.55;font-size:14px;font-weight:700}& .dk .dk-emboss.hi{fill:var(--white);fill-opacity:.45}& .dk .dk-emboss.lo{fill:var(--tape-deep);fill-opacity:.7}& .dk .dk-print{font-family:var(--mono);letter-spacing:1.4px;fill:var(--white);fill-opacity:.8;font-size:7.5px;font-weight:500}& .dk .dk-hand{font-family:var(--hand);fill:var(--paper-ink);font-size:23px}& .dk .dk-small{font-family:var(--mono);letter-spacing:1px;fill:var(--paper-ink-2);font-size:6.5px}& .dk .counter{font-family:var(--mono);letter-spacing:2px;fill:var(--lcd);font-size:15px;font-weight:500}& .dk .led{fill:var(--led-g);fill-opacity:.16}& .dk .led.hi{fill:var(--warn)}& .dk .led.pk{fill:var(--rec)}& .dk .led.on{fill-opacity:1}& .dk-reel{will-change:transform;pointer-events:none;position:absolute;inset:0}& .dk-reel.l{transform-origin:31.818% 36.875%}& .dk-reel.r{transform-origin:68.182% 36.875%}& .deck.playing .dk-reel{animation:1.8s linear infinite nf-spin}& .deck.playing .dk-reel.l{animation-duration:1.3s}& .deck.ff .dk-reel{animation:.25s linear 3 nf-spin}& .deck.rew .dk-reel{animation:.25s linear 3 reverse nf-spin}& .dk .dk-fly{transform-box:fill-box;transform-origin:50%}& .deck.playing .dk .dk-belt{animation:.5s steps(4,end) infinite nf-belt}& .deck.playing .dk .dk-fly{animation:.7s steps(8,end) infinite nf-spin}& .dk .key{cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none}& .dk .keytop{transition:transform 70ms ease-out}& .dk .key .keycap{transition:fill .18s}@media (hover:hover){& .dk .key:hover .keycap{fill:url(#dkk-capHot)}}& .dk .key:active .keytop,& .dk .key.pressed .keytop,& .dk .key[aria-pressed=true] .keytop{transform:translateY(2px)}& .dk .key:active .keycap,& .dk .key.pressed .keycap,& .dk .key[aria-pressed=true] .keycap{filter:brightness(.8)}& .dk .key[aria-pressed=true] path{fill:var(--tape-cyan)}& .dk .key:focus-visible .ring{opacity:1}@media (forced-colors:active){& .dk .key:focus-visible .ring{stroke:highlight}}& .meters{gap:6px;width:min(100%,540px);min-width:0;display:grid}& .wave{width:100%;height:40px;display:block}& .vu{grid-template-columns:repeat(14,1fr);gap:3px;display:grid}& .vu i{background:#ffffff1a;height:8px;transition:background 80ms}& .vu i.on{background:var(--neon-soft)}& .vu i.pk{background:var(--warn)}& .remote{right:calc(var(--gut) - 12px);z-index:calc(var(--z-chrome) + 15);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;--rb:.5;--rs:.41;--rg:.09;width:min(212px,max(176px,13vw + 24px),37.1svh - 17.808px);filter:brightness(var(--rb)) saturate(var(--rs)) drop-shadow(0 26px 38px #000c) drop-shadow(0 6px 28px hsl(var(--shell-hue) 70% 55% / var(--rg)));transition:filter .9s ease-out;position:fixed;bottom:18px}& .remote:hover,& .remote:has(:focus-visible),& .remote.awake{--rb:1;--rs:.82;--rg:.3;transition:filter .18s ease-out}&[data-overlay]:not([data-overlay=sheet]) .remote:not(:hover):not(:has(:focus-visible)){--rb:.36;--rs:.35;--rg:0}& .remote:active{cursor:grabbing}& .rsvg{width:100%;height:auto;display:block;overflow:visible}& .remote-handle,& .remote-scrim{display:none}& .remote-grip{cursor:grab;touch-action:none;width:58px;height:44px;box-shadow:none;background:0 0;border:0;place-items:center;padding:0;transition:filter .18s;display:grid;position:absolute;top:-36px;left:50%;translate:-50%}& .remote-grip:after{content:"";border:1px solid hsl(var(--shell-hue) 70% 70% / .45);background:linear-gradient(180deg, hsl(var(--shell-hue) 60% 34% / .82), hsl(var(--shell-hue) 70% 14% / .78));box-shadow:inset 0 1px 0 #ffffff59, 0 0 14px hsl(var(--shell-hue) 70% 55% / .3);border-bottom:0;border-radius:11px 11px 3px 3px;position:absolute;inset:11px 0}& .remote-grip[hidden]{display:none}& .remote-grip:active{cursor:grabbing}& .remote-grip:before{content:"";z-index:1;border-right:2px solid var(--print);border-bottom:2px solid var(--print);width:8px;height:8px;margin-top:-5px;transition:rotate .35s,margin .35s;position:relative;rotate:45deg}& .remote-grip[aria-expanded=false]:before{margin-top:5px;rotate:225deg}& .remote-grip:hover{filter:brightness(1.25)}& .remote-grip:focus-visible{outline:2px solid var(--white);outline-offset:2px}& .rsvg{transition:transform .25s cubic-bezier(.2,.8,.2,1)}&.remote-stowed .remote{cursor:pointer}&.remote-stowed .remote:hover .rsvg{transform:translateY(-7px)}@media (prefers-reduced-motion:reduce){& .rsvg,& .remote-grip:before{transition:none}}& .rsvg .etch{font-family:var(--mono);letter-spacing:1.2px;fill:var(--print);fill-opacity:.86;stroke:var(--print-line);stroke-opacity:.7;stroke-width:1.6px;paint-order:stroke;stroke-linejoin:round;font-size:10px;font-weight:500}& .rsvg .etch.tiny{letter-spacing:1.1px;fill-opacity:.8;font-size:5.6px}& .rsvg .etch.fk{letter-spacing:.3px;fill-opacity:.92;font-size:10px}& .rsvg .etch.hot{fill:#ff8a7a;fill-opacity:1}& .rsvg .wordmark{font-family:var(--serif);fill:var(--print);stroke:var(--print-line);stroke-opacity:.55;stroke-width:2.2px;paint-order:stroke;stroke-linejoin:round;font-size:28px;font-style:italic}& .rsvg .silk{font-family:var(--mono);letter-spacing:.5px;fill:var(--print-silk);fill-opacity:.55;font-size:4.4px}& .rsvg .silk.chipmark{fill:var(--print-chip);fill-opacity:.7;font-size:4.2px}& .rsvg .silk.cellmark{letter-spacing:1px;fill:var(--white);fill-opacity:.8;font-size:7px}& .rsvg .lbl{font-family:var(--mono);fill:var(--print);font-size:19px;font-weight:500}& .rsvg .lbl.small{letter-spacing:.6px;fill-opacity:.92;font-size:10.5px}& .rsvg .lbl.small.wide{letter-spacing:3px;font-size:11px}& .rsvg .lbl.ch{letter-spacing:1.5px;fill-opacity:.8;font-size:10px}& .rsvg .key{cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none}& .rsvg .keytop{transition:transform 70ms ease-out}& .rsvg .key .keycap{transition:fill .18s}& .rsvg .key .swatch{transition:filter .18s}& .rsvg .key .ring{transition:opacity .12s}@media (hover:hover){& .rsvg .key:hover .keycap{fill:url(#rm-capHot)}& .rsvg .key:hover .swatch{filter:brightness(1.22)saturate(1.1)}}& .rsvg .key:active .keytop,& .rsvg .key.pressed .keytop{transform:translateY(1.7px)}& .rsvg .key:active .keycap,& .rsvg .key.pressed .keycap,& .rsvg .key:active .swatch,& .rsvg .key.pressed .swatch{filter:brightness(.78)}& .rsvg .key:focus-visible .ring{opacity:1}@media (prefers-reduced-motion:reduce){& .rsvg .keytop,& .rsvg .key .ring{transition:none}}@media (forced-colors:active){& .rsvg .key:focus-visible .ring{stroke:highlight}}& .osd-menu{z-index:calc(var(--z-overlay) + 5);background:#03080d52;place-items:center;padding:clamp(12px,1.8vw,26px) clamp(20px,3vw,48px);display:none;position:absolute;inset:0}& .osd-menu.on{grid-template-rows:minmax(0,1fr);display:grid}& .osd-panel{backdrop-filter:blur(3px);background:linear-gradient(#0a1026f2,#040714f5);border:1px solid #78c8ff52;border-radius:3px;flex-direction:column;width:min(500px,100%);max-height:100%;display:flex;box-shadow:0 20px 60px #000000b3,inset 0 0 40px #143c7840}& .osd-title{font-family:var(--mono);font-size:var(--m-2);letter-spacing:.3em;text-transform:uppercase;color:var(--cyan-hi);background:#4c86ff4d;border-bottom:1px solid #78c8ff4d;justify-content:space-between;align-items:baseline;padding:.8em 1.1em;display:flex}& .osd-title .osd-ch{font-size:var(--m-1);letter-spacing:.16em;color:var(--cyan-dim)}& .osd-rows{min-height:0;padding:.5em .5em .8em;overflow:auto}& .osd-rows::-webkit-scrollbar{width:5px}& .osd-rows::-webkit-scrollbar-thumb{background:#7fd8ff4d}& .osd-group{font-family:var(--mono);font-size:var(--m-1);letter-spacing:.22em;text-transform:uppercase;color:var(--cyan-dim);margin:1em 0 .3em;padding:0 .8em}& .osd-row{cursor:pointer;border:1px solid #0000;outline:none;grid-template-columns:1fr auto 2.6em;align-items:center;gap:1em;min-height:44px;padding:.35em .8em;display:grid}& .osd-row.sel{background:#7fd8ff29;border-color:#9fe2ff73}& .osd-row:focus-visible,& .osd-row:focus-within{border-color:var(--white)}& .osd-row.sel .osd-label{color:var(--white)}& .osd-label{font-family:var(--mono);font-size:var(--m-2);letter-spacing:.06em;color:var(--cyan-ink)}& .osd-ctl{outline:none}& .osd-segs{gap:3px;padding:2px 0;display:flex}& .osd-segs i{background:#7fd8ff2e;border-radius:1px;width:12px;height:14px;transition:background .12s}& .osd-segs i.on{background:var(--cyan);box-shadow:0 0 7px #7fd8ff99}& .osd-val{font-family:var(--mono);font-size:var(--m-1);color:var(--cyan-dim);text-align:right;font-variant-numeric:tabular-nums}& .osd-pick{font-family:var(--mono);font-size:var(--m-1);letter-spacing:.12em;text-transform:uppercase;gap:2px;display:flex}& .osd-pick i{color:var(--cyan-dim);border:1px solid #0000;padding:.35em .8em;font-style:normal}& .osd-pick i.on{color:var(--on-cyan);background:var(--cyan);border-color:var(--cyan)}& .osd-pick.wide i{padding:.35em 1em}& .osd-foot{font-family:var(--mono);font-size:var(--m-1);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-dim);border-top:1px solid #78c8ff47;flex-wrap:wrap;align-items:center;gap:1.2em;padding:.75em 1.1em;display:flex}& .osd-foot b{color:var(--cyan-hi);font-weight:500}& .osd-foot button{font:inherit;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;min-height:44px;color:var(--cyan-ink);background:0 0;border:1px solid #78c8ff59;border-radius:2px;padding:0 1em}& .osd-foot .osd-exit{background:var(--cyan);border-color:var(--cyan);color:var(--on-cyan);margin-left:auto}& .osd-foot button:active{transform:translateY(1px)}@media (width<=820px){& .osd-panel{width:100%}& .osd-foot span{display:none}& .osd-foot{justify-content:flex-end}}&.lowfx .remote{filter:brightness(var(--rb)) saturate(var(--rs))}&.lowfx .dk:before{box-shadow:0 12px 20px #0009}&.calm .deck :is(.dk-reel,.dk-fly,.dk-belt){animation:none!important}@media (width<=980px){& .remote{cursor:default;--rb:.9;width:auto;padding-bottom:14px;transition:transform .4s cubic-bezier(.2,.8,.2,1),filter .9s;position:fixed;bottom:0;left:50%;right:auto;transform:translate(-50%,100%)}& .remote .rsvg{width:auto;height:min(100svh - 150px,540px)}&.remote-up .remote{transform:translate(-50%,-6px)}&:not(.remote-up) .remote{visibility:hidden;transition:transform .4s cubic-bezier(.2,.8,.2,1),visibility 0s .4s}& .remote-handle{z-index:calc(var(--z-chrome) + 16);min-height:44px;font-family:var(--mono);font-size:var(--m-1);letter-spacing:.18em;text-transform:uppercase;color:var(--paper);background:linear-gradient(180deg,var(--hull-lift),var(--hull));cursor:pointer;box-shadow:0 3px 0 var(--ink), 0 10px 24px #000000b3;border:1px solid #ffffff24;border-radius:6px;align-items:center;gap:.6em;padding:0 1.1em;display:flex;position:fixed;bottom:12px;right:12px}& .remote-handle:active{transform:translateY(2px)}& .remote-handle:before{content:"";background:var(--neon);width:16px;height:3px;box-shadow:0 0 8px var(--neon);border-radius:2px}& .remote-handle.up{background:linear-gradient(180deg,var(--metal-hi),var(--hull-lift))}& .remote-scrim{z-index:calc(var(--z-chrome) + 14);opacity:0;pointer-events:none;background:#03080d99;transition:opacity .3s;display:block;position:fixed;inset:0}&.remote-up .remote-scrim{opacity:1;pointer-events:auto}}}
