/* Signal House — aluminium, smoked glass, walnut, warm phosphor. */ :root {
  color-scheme:light;
  --paper:#e6e6e0;
  --ink:#31322f;
  --muted:#686c63;
  --amber:#ffc276;
  --amber-dark:#a9662d;
  --line:#c3c5bb;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased
}
button,input,a {
  -webkit-tap-highlight-color:transparent
}
button,input {
  font:inherit
}
button,a {
  touch-action:manipulation
}
button {
  color:inherit
}
a {
  color:inherit;
  text-decoration:none
}
button {
  cursor:pointer
}
button:disabled {
  cursor:default
}
button:focus-visible,a:focus-visible {
  outline:3px solid #8c4b20;
  outline-offset:5px
}
::selection {
  background:#edc194;
  color:#312719
}
.page-header,.intro,.listening-notes,.page-footer {
  max-width:1140px;
  margin-left:auto;
  margin-right:auto
}
.page-header {
  height:106px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  font-size:12px;
  letter-spacing:.01em
}
.collection-link {
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:600
}
.back-mark {
  font-size:21px;
  margin-right:8px;
  line-height:1
}
.link-divider,.footer-divider {
  color:#90948a;
  font-weight:400
}
.edition {
  display:flex;
  align-items:center;
  gap:15px;
  font-size:11px;
  color:#686b62
}
.edition-dot {
  width:5px;
  height:5px;
  border-radius:50%;
  background:#777c70;
  display:inline-block
}
.intro {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:46px 0 38px
}
.intro h1 {
  font-size:clamp(50px,6.2vw,86px);
  font-weight:400;
  letter-spacing:-.067em;
  line-height:1;
  margin:0
}
.title-period {
  color:#989b90
}
.intro p {
  font-size:14px;
  line-height:1.65;
  letter-spacing:-.01em;
  margin:8px 3px 0 25px;
  color:#66695f
}
.receiver {
  position:relative;
  max-width:1172px;
  margin:0 auto 0;
  padding:0 20px 5px;
  filter:drop-shadow(0 33px 20px #34322224) drop-shadow(0 5px 3px #34322212)
}
.wood-cheek {
  position:absolute;
  z-index:2;
  top:0;
  bottom:5px;
  width:22px;
  border-radius:8px 2px 3px 7px;
  background:repeating-linear-gradient(88deg,transparent 0px,transparent 3px,#21140940 4px,transparent 5px),linear-gradient(90deg,#60402a,#785135 27%,#3c2c22 82%,#35251c);
  box-shadow:inset 1px 1px 2px #d39f6760,1px 2px 1px #1d180c90
}
.wood-cheek-left {
  left:0
}
.wood-cheek-right {
  right:0;
  transform:scaleX(-1)
}
.faceplate {
  position:relative;
  padding:28px 33px 15px;
  border-radius:5px 5px 3px 3px;
  background:repeating-linear-gradient(0deg,#ffffff06 0,#ffffff06 1px,#00000004 1px,#00000004 2px),linear-gradient(115deg,#e0e0d6,#d6d6cb 40%,#c6c8be 100%);
  border:1px solid #b0b2a6;
  box-shadow:inset 0 2px 2px #fff9,inset 0 -2px 1px #7d807559,inset -2px 0 4px #5d605259
}
.screw {
  position:absolute;
  width:9px;
  height:9px;
  border-radius:50%;
  background:linear-gradient(130deg,#a5a89b,#e8e9dd 45%,#8a8d82);
  box-shadow:0 1px 1px #34372c66,inset 0 1px 1px #fff6
}
.screw:after {
  content:"";
  width:6px;
  height:1px;
  background:#686b61;
  position:absolute;
  top:4px;
  left:1px;
  transform:rotate(-35deg);
  box-shadow:0 1px #eceee133
}
.screw-tl {
  top:13px;
  left:11px
}
.screw-tr {
  top:13px;
  right:11px
}
.screw-bl {
  bottom:13px;
  left:11px
}
.screw-br {
  bottom:13px;
  right:11px
}
.receiver-brand-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:23px;
  padding:0 3px
}
.receiver-brand {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:19px;
  font-weight:600;
  letter-spacing:-.035em;
  text-shadow:0 1px #fff9
}
.brand-emblem {
  font-family:Georgia,serif;
  font-style:italic;
  font-size:24px;
  border:1px solid #555a50;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  letter-spacing:-.17em;
  padding-right:4px;
  line-height:1
}
.brand-emblem span {
  font-size:19px;
  margin-top:2px
}
.model-label {
  font-size:13px;
  font-weight:600;
  letter-spacing:.02em
}
.model-label span {
  font-size:9px;
  font-weight:400;
  margin-left:15px;
  color:#62675b;
  letter-spacing:.03em
}
.glass {
  color:var(--amber);
  background:linear-gradient(130deg,#2e2c25,#25261f);
  border:5px solid #8e9184;
  border-top-color:#8a8d7f;
  border-bottom-color:#edefdf;
  border-radius:7px;
  box-shadow:0 1px 1px #606456,inset 0 3px 11px #000c;
  position:relative;
  isolation:isolate
}
.glass:after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:2px;
  background:linear-gradient(135deg,#f1d9ae09,transparent 40%,transparent 80%,#f1d9ae06);
  pointer-events:none;
  z-index:4
}
.glass-readouts {
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:28px;
  padding:22px 25px 16px
}
.frequency-display {
  min-width:0
}
.display-topline {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:9px;
  letter-spacing:.09em;
  color:#cf9c61
}
.tuned-led {
  width:4px;
  height:4px;
  border-radius:50%;
  background:#ffc572;
  box-shadow:0 0 5px #ffb76780;
  flex-shrink:0
}
.tuned-led.is-weak {
  background:#6a5137;
  box-shadow:none
}
.band-label {
  margin-left:auto;
  color:#9f815a;
  font-size:8px;
  letter-spacing:.04em
}
.frequency-line {
  display:flex;
  align-items:baseline;
  gap:14px;
  margin-top:8px
}
.frequency-line output {
  font-family:var(--mono);
  font-weight:400;
  font-size:clamp(45px,4.7vw,66px);
  letter-spacing:-.07em;
  line-height:1.15;
  text-shadow:0 0 18px #ffbe5930;
  font-variant-numeric:tabular-nums
}
.frequency-unit {
  font-size:12px;
  color:#cc9c65
}
.station-readout {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-top:10px;
  gap:12px;
  font-size:12px;
  letter-spacing:.015em
}
.station-coordinate {
  font-size:9px;
  color:#aa8556;
  white-space:nowrap
}
.scope-panel {
  border-left:1px solid #69533970;
  padding-left:25px;
  display:flex;
  flex-direction:column;
  min-width:0
}
.scope-heading {
  display:flex;
  justify-content:space-between;
  color:#b38d5c;
  font-size:9px;
  letter-spacing:.03em
}
.scope-heading span:last-child {
  color:#94764e;
  font-size:8px
}
#scope {
  display:block;
  width:100%;
  height:72px;
  margin:8px 0 6px;
  opacity:.85
}
.strength-row {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:9px;
  color:#aa8556;
  margin-top:auto
}
.strength-row output {
  font-family:var(--mono);
  font-size:9px;
  margin-left:auto;
  color:#d8a96e;
  min-width:30px;
  text-align:right
}
.strength-bars {
  display:flex;
  gap:3px;
  height:12px;
  align-items:flex-end;
  flex:1
}
.strength-bars i {
  display:block;
  flex:1;
  height:7px;
  background:#5a4933;
  border-radius:1px
}
.strength-bars i:nth-child(n+5) {
  height:9px
}
.strength-bars i:nth-child(n+9) {
  height:12px
}
.strength-bars i.is-active {
  background:#c49355;
  box-shadow:0 0 4px #e7a74415
}
.tuning-ruler {
  height:63px;
  border-top:1px solid #55493480;
  padding:0 24px;
  overflow:hidden
}
.ruler-track {
  height:100%;
  position:relative
}
.ruler-ticks {
  position:absolute;
  inset:0 0 24px;
  background:repeating-linear-gradient(90deg,#bd935950 0px,#bd935950 1px,transparent 1px,transparent 1.11111%);
  mask-image:linear-gradient(to bottom,transparent 0px,transparent 14px,#000 14px,#000 26px,transparent 26px);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0px,transparent 14px,#000 14px,#000 26px,transparent 26px)
}
.ruler-labels {
  position:absolute;
  inset:0;
  font-family:var(--mono);
  font-size:9px;
  color:#bd9359
}
.ruler-labels span {
  position:absolute;
  top:32px;
  transform:translateX(-50%)
}
.ruler-labels span:before {
  content:"";
  position:absolute;
  height:18px;
  width:1px;
  bottom:16px;
  left:50%;
  background:#bd9359
}
.station-tick {
  position:absolute;
  bottom:7px;
  width:3px;
  height:3px;
  background:#e6b069;
  border-radius:50%;
  transform:translateX(-50%);
  opacity:.55
}
.ruler-needle {
  position:absolute;
  left:33.1111%;
  top:0;
  bottom:0;
  width:1px;
  background:#ffcc8e;
  box-shadow:0 0 9px #f9bb5b5c;
  transform:translateX(-50%)
}
.ruler-needle:before {
  content:"";
  position:absolute;
  top:0;
  left:-3px;
  border-top:5px solid #ffcc8e;
  border-left:3.5px solid transparent;
  border-right:3.5px solid transparent
}
.control-deck {
  display:grid;
  grid-template-columns:1.12fr 1.25fr 1.1fr .85fr;
  align-items:center;
  gap:24px;
  padding:30px 4px 27px
}
.speaker-block {
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:13px
}
.speaker-grille {
  height:104px;
  max-width:206px;
  background:radial-gradient(ellipse at 50% 0%,#292c24 0,#454a3f 1.2px,#a6ac9a 1.7px,transparent 2.3px) 0 0/6px 6px;
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  opacity:.85
}
.speaker-caption {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:8px;
  color:#656b5d;
  letter-spacing:.02em
}
.speaker-mark {
  font-size:17px;
  color:#5a6053;
  line-height:1
}
.small-controls {
  display:flex;
  justify-content:space-around;
  gap:20px
}
.knob-control {
  text-align:center
}
.knob-control label {
  display:block;
  font-size:11px;
  font-weight:600;
  letter-spacing:.02em;
  text-shadow:0 1px #fff8
}
.knob-control output {
  display:block;
  font-size:9px;
  color:#686f60;
  margin-top:7px;
  font-family:var(--mono);
  white-space:nowrap
}
.knob-wrap {
  position:relative;
  margin:0 auto 13px;
  isolation:isolate
}
.small-knob {
  width:78px;
  height:78px
}
.large-knob {
  width:116px;
  height:116px;
  margin-bottom:7px
}
.knob-ticks {
  position:absolute;
  inset:-8px;
  border-radius:50%;
  background:repeating-conic-gradient(from -135deg,#8e9484 0deg,#8e9484 1deg,transparent 1deg,transparent 27deg);
  mask:radial-gradient(circle,transparent 0,transparent 66%,#000 67%,#000 69%,transparent 70%),conic-gradient(transparent 0);
  -webkit-mask:radial-gradient(circle,transparent 0,transparent 66%,#000 67%,#000 69%,transparent 70%)
}
.knob-ticks:after {
  content:"";
  position:absolute;
  inset:0;
  background:conic-gradient(from 135deg,#d1d3c6 0deg,#d1d3c6 90deg,transparent 90deg);
  border-radius:50%
}
.dial {
  position:absolute;
  inset:3px;
  border-radius:50%;
  background:repeating-conic-gradient(#777c70 0deg,#c6cbbd 2deg,#c6cbbd 3deg,#777c70 4deg);
  box-shadow:0 4px 4px #49503c60,0 1px 1px #f6fae7,inset 0 1px 1px #fff;
  transform:rotate(var(--angle,0deg));
  pointer-events:none
}
.dial:before {
  content:"";
  position:absolute;
  inset:4px;
  border-radius:50%;
  background:conic-gradient(#e4e6dc,#bdc2b3 40deg,#f4f4e9 75deg,#d4d9c9 120deg,#b1b9a8 180deg,#e4e6dc 220deg,#c0c6b6 270deg,#eef0e2 320deg,#e4e6dc);
  box-shadow:inset 0 0 0 1px #e4e8d7,inset 0 0 0 3px #acb3a040
}
.dial>span {
  position:absolute;
  left:calc(50% - 1.5px);
  top:9px;
  width:3px;
  height:12px;
  border-radius:2px;
  background:#515b48;
  box-shadow:1px 0 0 #f0f4e5;
  z-index:2
}
.knob-input {
  position:absolute;
  inset:-9px;
  width:calc(100% + 18px);
  height:calc(100% + 18px);
  opacity:0;
  z-index:4;
  cursor:ns-resize;
  touch-action:none;
  margin:0
}
.knob-input:focus-visible~.dial {
  outline:3px solid #855121;
  outline-offset:7px
}
.knob-input:hover~.dial:before {
  filter:brightness(1.035)
}
.knob-input:active~.dial {
  box-shadow:0 2px 3px #49503c70,0 1px 1px #f6fae7,inset 0 1px 1px #fff
}
.tuning-dial {
  inset:2px;
  box-shadow:0 5px 5px #49503c60,0 1px 1px #f6fae7,inset 0 1px 1px #fff
}
.tuning-dial:before {
  inset:5px
}
.tuning-dial>span {
  top:11px;
  height:15px;
  width:3px;
  background:#795337
}
.dial-center {
  position:absolute;
  inset:33%;
  border-radius:50%;
  background:radial-gradient(circle at 40% 30%,#d8ddce,#a6ad9a);
  box-shadow:inset 0 1px 3px #626b5350,0 1px 1px #fff9
}
.tuning-caption {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  padding-top:4px
}
.seek-button {
  font-size:9px;
  padding:4px 0;
  background:none;
  border:0;
  display:flex;
  align-items:center;
  gap:5px;
  color:#656d5d
}
.seek-button span {
  font-size:17px;
  line-height:10px
}
.seek-button:hover {
  color:#2e3427
}
.power-controls {
  border-left:1px solid #b1b6a6;
  padding-left:24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:13px
}
.power-indicator {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:9px;
  color:#6c7363
}
.power-indicator>span:first-child {
  width:5px;
  height:5px;
  border-radius:50%;
  background:#7a8070;
  box-shadow:inset 0 1px 2px #39422f66,0 1px #f3f4e4
}
.power-indicator>span:first-child.is-on {
  background:#bb7437;
  box-shadow:0 0 6px #ad6d3640,inset 0 1px 1px #dfac71
}
.power-button {
  border:1px solid #757f6c;
  background:linear-gradient(#59634f,#424c3c);
  box-shadow:inset 0 1px #7b866d,0 3px 0 #303829,0 4px 5px #3b433638;
  border-radius:5px;
  padding:12px 11px;
  color:#eef1e5;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap;
  min-height:46px;
  font-size:10px
}
.power-button:hover {
  background:linear-gradient(#657058,#4c5744)
}
.power-button:active {
  transform:translateY(2px);
  box-shadow:inset 0 1px #7b866d,0 1px 0 #303829,0 2px 2px #3b433638
}
.power-button[aria-pressed=true] {
  background:linear-gradient(#505c45,#3f4b34);
  color:#f0d2a8
}
.power-button:disabled {
  opacity:.65
}
.mute-button {
  font-size:9px;
  border:0;
  background:none;
  padding:8px;
  display:flex;
  align-items:center;
  gap:8px;
  color:#59624f
}
.mute-button:disabled {
  opacity:.45
}
.mute-switch {
  display:block;
  width:24px;
  height:10px;
  background:#858e79;
  border-radius:7px;
  box-shadow:inset 0 1px 2px #303b274d;
  position:relative
}
.mute-switch:before {
  content:"";
  width:12px;
  height:9px;
  position:absolute;
  top:0;
  left:0;
  background:linear-gradient(#e8ecdf,#b8c0ac);
  border-radius:6px;
  border:1px solid #929c86;
  box-shadow:0 1px 2px #36442e66;
  transition:transform .15s
}
.mute-button[aria-pressed=true] .mute-switch {
  background:#946940
}
.mute-button[aria-pressed=true] .mute-switch:before {
  transform:translateX(11px)
}
.preset-bank {
  border-top:1px solid #aeb4a4;
  padding:21px 0 19px;
  display:grid;
  grid-template-columns:63px repeat(4,1fr);
  gap:9px;
  align-items:center
}
.preset-bank-label {
  font-size:9px;
  line-height:1.5;
  color:#676e5e;
  padding-left:3px
}
.preset {
  position:relative;
  text-align:left;
  min-width:0;
  height:54px;
  padding:9px 11px;
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid #9ca58f;
  border-bottom-color:#727f62;
  border-radius:3px;
  background:linear-gradient(#e2e7d8,#c4cdb7);
  box-shadow:inset 0 1px 1px #fff8,0 3px 0 #839174,0 4px 4px #3b4c2e20;
  transition:transform .1s,box-shadow .1s
}
.preset:hover {
  background:linear-gradient(#edf0e5,#d0d8c5)
}
.preset:active,.preset.is-selected {
  transform:translateY(2px);
  box-shadow:inset 0 1px 2px #50653d25,0 1px 0 #839174,0 2px 2px #3b4c2e25;
  background:linear-gradient(#ced6c2,#d8dece)
}
.preset-number {
  font-family:Georgia,serif;
  font-size:14px;
  color:#69765b;
  min-width:17px;
  align-self:flex-start;
  margin-top:1px
}
.preset-text {
  font-size:11px;
  line-height:1.3;
  letter-spacing:-.015em;
  white-space:nowrap
}
.preset-text small {
  display:block;
  font-family:var(--mono);
  font-size:8px;
  color:#737d66;
  margin-top:5px;
  letter-spacing:.01em
}
.preset-led {
  height:4px;
  width:4px;
  position:absolute;
  right:9px;
  bottom:10px;
  border-radius:50%;
  background:#9ba98b;
  box-shadow:inset 0 1px 1px #61744a38
}
.preset.is-selected .preset-led {
  background:#aa6931;
  box-shadow:0 0 4px #c3783a40,inset 0 1px #da965c
}
.receiver-bottomline {
  display:flex;
  justify-content:space-between;
  color:#727b65;
  font-size:7px;
  letter-spacing:.02em;
  margin-top:3px
}
.receiver-bottomline span>span {
  padding-left:5px;
  font-size:10px
}
.receiver-foot {
  width:92px;
  height:10px;
  background:linear-gradient(#4d4e42,#34372d);
  border-radius:0 0 4px 4px;
  position:absolute;
  bottom:-5px;
  z-index:-1;
  box-shadow:0 2px 1px #373c2226
}
.receiver-foot-left {
  left:66px
}
.receiver-foot-right {
  right:66px
}
.listening-notes {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:125px;
  padding:57px 19px 49px
}
.note-label {
  font-size:10px;
  letter-spacing:.02em;
  color:#7c8073
}
.current-note h2 {
  font-size:29px;
  letter-spacing:-.045em;
  font-weight:400;
  line-height:1.1;
  margin:14px 0 14px
}
.current-note p {
  font-size:13px;
  line-height:1.8;
  color:#686e60;
  max-width:420px;
  margin:0
}
.note-tags {
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:17px
}
.note-tags span {
  font-size:9px;
  color:#7a806f
}
.note-tags span+span:before {
  content:"/";
  margin-right:14px;
  color:#b0b5a6
}
.operating-note {
  padding-top:0
}
.operating-title {
  font-size:14px;
  letter-spacing:-.02em;
  margin:0 0 14px
}
.operating-note p:not(.operating-title) {
  font-size:11px;
  line-height:1.8;
  color:#777e6c;
  max-width:365px;
  margin:0 0 13px
}
.operating-note .control-help {
  font-size:10px!important;
  color:#808775!important
}
.operating-note .sound-status {
  color:#5e6a51!important;
  font-size:10px!important;
  padding-top:2px;
  margin-bottom:0!important
}
.sound-status:before {
  content:"";
  display:inline-block;
  width:4px;
  height:4px;
  background:#8c977f;
  border-radius:50%;
  vertical-align:middle;
  margin-right:7px
}
.page-footer {
  height:80px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#71786a;
  font-size:10px
}
.footer-divider {
  margin:0 8px
}
.page-footer a {
  display:flex;
  align-items:center;
  gap:24px
}
.page-footer a span:first-child {
  color:#343b2d
}
.page-footer a span:last-child {
  font-size:18px;
  color:#434c39
}
.sr-only {
  position:absolute!important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.noscript-note {
  max-width:1140px;
  margin:20px auto;
  padding:12px 16px;
  border:1px solid #aeb4a4;
  font-size:13px
}
@media(min-width:1550px) {
  .page-header {
    height:118px
  }
  .intro {
    padding-top:59px;
    padding-bottom:45px
  }
  .listening-notes {
    padding-top:65px;
    padding-bottom:58px
  }
}
@media(max-width:1240px) {
  .page-header,.intro,.listening-notes,.page-footer {
    margin-left:40px;
    margin-right:40px
  }
  .receiver {
    margin-left:24px;
    margin-right:24px
  }
  .faceplate {
    padding-left:25px;
    padding-right:25px
  }
  .control-deck {
    gap:18px
  }
  .power-controls {
    padding-left:18px
  }
  .preset {
    gap:8px;
    padding-left:9px
  }
  .preset-text {
    font-size:10px
  }
  .listening-notes {
    gap:75px
  }
  .preset-bank {
    grid-template-columns:58px repeat(4,1fr)
  }
}
@media(max-width:950px) {
  .control-deck {
    grid-template-columns:.8fr 1.1fr .9fr .8fr;
    gap:16px
  }
  .speaker-grille {
    height:93px
  }
  .speaker-caption {
    font-size:7px;
    letter-spacing:-.03em
  }
  .speaker-mark {
    display:none
  }
  .small-controls {
    gap:14px
  }
  .small-knob {
    width:65px;
    height:65px
  }
  .large-knob {
    width:101px;
    height:101px
  }
  .power-controls {
    padding-left:16px
  }
  .power-button {
    flex-direction:column;
    gap:6px;
    font-size:9px;
    padding:10px;
    min-width:100px
  }
  .glass-readouts {
    gap:18px;
    padding:20px 20px 16px;
    grid-template-columns:1.2fr 1fr
  }
  .scope-panel {
    padding-left:18px
  }
  .frequency-line output {
    font-size:54px
  }
  .station-coordinate {
    font-size:8px
  }
  .band-label {
    display:none
  }
  .preset-bank {
    grid-template-columns:48px repeat(4,1fr);
    gap:7px
  }
  .preset {
    gap:5px;
    padding:7px
  }
  .preset-number {
    font-size:11px;
    min-width:14px
  }
  .preset-text {
    font-size:9px
  }
  .preset-text small {
    font-size:7px
  }
  .preset-led {
    right:6px;
    bottom:8px
  }
  .model-label span {
    font-size:8px;
    margin-left:10px
  }
  .listening-notes {
    gap:50px
  }
  .speaker-block {
    gap:12px
  }
  .intro p {
    font-size:12px
  }
  .intro {
    padding-top:37px;
    padding-bottom:32px
  }
}
@media(max-width:740px) {
  .page-header,.intro,.listening-notes,.page-footer {
    margin-left:25px;
    margin-right:25px
  }
  .page-header {
    height:77px
  }
  .edition {
    font-size:9px;
    gap:10px
  }
  .edition-dot {
    width:3px;
    height:3px
  }
  .collection-link {
    font-size:11px;
    gap:8px
  }
  .back-mark {
    margin-right:2px;
    font-size:18px
  }
  .intro {
    align-items:flex-start;
    padding:32px 0 29px
  }
  .intro h1 {
    font-size:54px
  }
  .intro p {
    font-size:10px;
    line-height:1.6;
    margin-top:4px;
    margin-left:15px
  }
  .receiver {
    margin-left:15px;
    margin-right:15px;
    padding-left:13px;
    padding-right:13px
  }
  .wood-cheek {
    width:14px
  }
  .faceplate {
    padding:23px 20px 14px
  }
  .receiver-brand-row {
    margin-bottom:20px
  }
  .receiver-brand {
    font-size:17px;
    gap:9px
  }
  .brand-emblem {
    width:26px;
    height:26px;
    font-size:21px
  }
  .brand-emblem span {
    font-size:17px
  }
  .model-label {
    font-size:11px
  }
  .model-label span {
    display:none
  }
  .glass-readouts {
    padding:17px 18px 15px;
    grid-template-columns:1.1fr 1fr;
    gap:14px
  }
  .frequency-line {
    gap:8px
  }
  .frequency-line output {
    font-size:43px
  }
  .frequency-unit {
    font-size:9px
  }
  .display-topline {
    font-size:7px;
    letter-spacing:.04em;
    gap:5px
  }
  .station-readout {
    font-size:9px;
    margin-top:8px
  }
  .station-coordinate {
    display:none
  }
  .scope-panel {
    padding-left:15px
  }
  .scope-heading {
    font-size:7px
  }
  .scope-heading span:last-child {
    font-size:7px
  }
  #scope {
    height:59px;
    margin-top:6px;
    margin-bottom:5px
  }
  .strength-row {
    font-size:7px;
    gap:6px
  }
  .strength-bars {
    gap:2px
  }
  .strength-row output {
    font-size:7px;
    min-width:22px
  }
  .tuning-ruler {
    height:57px;
    padding:0 17px
  }
  .ruler-labels {
    font-size:8px
  }
  .ruler-labels span {
    top:29px
  }
  .ruler-ticks {
    mask-image:linear-gradient(to bottom,transparent 0px,transparent 10px,#000 10px,#000 24px,transparent 24px);
    -webkit-mask-image:linear-gradient(to bottom,transparent 0px,transparent 10px,#000 10px,#000 24px,transparent 24px)
  }
  .ruler-labels span:before {
    bottom:14px;
    height:18px
  }
  .control-deck {
    grid-template-columns:1.2fr 1fr 1fr;
    padding:26px 0 24px;
    gap:20px
  }
  .speaker-block {
    display:none
  }
  .small-controls {
    gap:15px
  }
  .small-knob {
    width:62px;
    height:62px
  }
  .large-knob {
    width:94px;
    height:94px
  }
  .small-control label {
    font-size:10px
  }
  .small-control output {
    font-size:8px
  }
  .tuning-caption {
    gap:10px
  }
  .power-controls {
    padding-left:17px;
    gap:9px
  }
  .power-button {
    flex-direction:row;
    min-width:110px;
    padding:12px 8px;
    font-size:9px
  }
  .power-button svg {
    width:17px;
    height:17px
  }
  .power-indicator {
    font-size:8px
  }
  .mute-button {
    font-size:8px
  }
  .preset-bank {
    padding-top:18px;
    grid-template-columns:repeat(4,1fr);
    gap:7px
  }
  .preset-bank-label {
    display:none
  }
  .preset {
    height:55px;
    padding:8px;
    gap:5px;
    align-items:flex-start
  }
  .preset-number {
    min-width:10px;
    font-size:10px;
    line-height:1.1
  }
  .preset-text {
    font-size:9px;
    white-space:normal;
    line-height:1.15
  }
  .preset-text small {
    font-size:7px;
    white-space:nowrap;
    margin-top:6px
  }
  .preset-led {
    width:3px;
    height:3px;
    right:6px;
    bottom:7px
  }
  .receiver-bottomline {
    font-size:6px
  }
  .receiver-bottomline>span:last-child {
    display:none
  }
  .listening-notes {
    padding:42px 4px 32px;
    gap:36px
  }
  .current-note h2 {
    font-size:25px
  }
  .current-note p {
    font-size:11px;
    line-height:1.8
  }
  .note-label {
    font-size:8px
  }
  .note-tags {
    gap:10px;
    flex-wrap:wrap
  }
  .note-tags span {
    font-size:8px
  }
  .note-tags span+span:before {
    margin-right:10px
  }
  .operating-title {
    font-size:12px;
    margin-bottom:11px
  }
  .operating-note p:not(.operating-title) {
    font-size:10px
  }
  .operating-note .control-help {
    font-size:9px!important
  }
  .operating-note .sound-status {
    font-size:9px!important
  }
  .page-footer {
    font-size:9px;
    height:70px
  }
  .page-footer a {
    gap:13px
  }
}
@media(max-width:530px) {
  .page-header,.intro,.listening-notes,.page-footer {
    margin-left:22px;
    margin-right:22px
  }
  .page-header {
    height:70px
  }
  .edition {
    font-size:0;
    gap:0
  }
  .edition-dot {
    display:none
  }
  .edition:after {
    content:"No. 04";
    font-size:10px
  }
  .intro {
    display:block;
    padding-top:29px;
    padding-bottom:25px
  }
  .intro h1 {
    font-size:57px;
    letter-spacing:-.065em
  }
  .intro p {
    margin:15px 0 0;
    font-size:11px;
    line-height:1.5
  }
  .intro p br {
    display:none
  }
  .intro p br:after {
    content:" "
  }
  .receiver {
    margin-left:12px;
    margin-right:12px;
    padding-left:12px;
    padding-right:12px
  }
  .wood-cheek {
    width:13px
  }
  .faceplate {
    padding:20px 14px 13px
  }
  .receiver-brand-row {
    padding:0 2px;
    margin-bottom:17px
  }
  .receiver-brand {
    font-size:15px;
    gap:8px
  }
  .brand-emblem {
    width:24px;
    height:24px;
    font-size:19px
  }
  .brand-emblem span {
    font-size:15px
  }
  .model-label {
    font-size:10px
  }
  .screw {
    width:7px;
    height:7px
  }
  .screw:after {
    width:5px;
    left:1px;
    top:3px
  }
  .screw-tl,.screw-tr {
    top:8px
  }
  .screw-tl,.screw-bl {
    left:6px
  }
  .screw-tr,.screw-br {
    right:6px
  }
  .screw-bl,.screw-br {
    bottom:8px
  }
  .glass {
    border-width:4px
  }
  .glass-readouts {
    grid-template-columns:1fr;
    padding:15px 16px 0;
    gap:0
  }
  .frequency-line {
    margin-top:8px;
    gap:11px
  }
  .frequency-line output {
    font-size:59px;
    letter-spacing:-.06em
  }
  .frequency-unit {
    font-size:10px
  }
  .display-topline {
    font-size:8px
  }
  .band-label {
    display:inline;
    font-size:6px;
    letter-spacing:0
  }
  .station-readout {
    font-size:10px;
    margin-top:7px
  }
  .station-coordinate {
    display:block;
    font-size:7px
  }
  .scope-panel {
    border:0;
    padding:13px 0 0;
    display:grid;
    grid-template-columns:1fr 80px;
    column-gap:15px;
    position:relative
  }
  .scope-heading {
    font-size:6px;
    grid-column:1;
    gap:6px;
    position:absolute;
    top:14px;
    left:0;
    right:95px
  }
  .scope-heading span:last-child {
    font-size:6px
  }
  #scope {
    grid-column:1;
    height:47px;
    margin:11px 0 8px
  }
  .strength-row {
    grid-column:2;
    align-self:center;
    flex-wrap:wrap;
    gap:5px;
    align-items:center;
    margin-top:0;
    padding-top:3px;
    line-height:1
  }
  .strength-row>span {
    font-size:6px;
    width:100%
  }
  .strength-bars {
    height:13px;
    gap:2px;
    flex-basis:calc(100% - 22px)
  }
  .strength-bars i {
    height:5px
  }
  .strength-bars i:nth-child(n+5) {
    height:7px
  }
  .strength-bars i:nth-child(n+9) {
    height:9px
  }
  .strength-row output {
    font-size:6px;
    min-width:17px;
    letter-spacing:-.08em;
    align-self:flex-end
  }
  .tuning-ruler {
    height:53px;
    padding:0 16px
  }
  .ruler-labels {
    font-size:7px
  }
  .ruler-labels span {
    top:28px
  }
  .ruler-labels span:before {
    height:16px
  }
  .station-tick {
    bottom:6px;
    width:2px;
    height:2px
  }
  .control-deck {
    grid-template-columns:1.15fr 1fr;
    gap:19px 14px;
    padding:27px 3px 19px;
    align-items:center
  }
  .small-controls {
    grid-column:1;
    gap:20px;
    padding-top:7px
  }
  .small-knob {
    width:57px;
    height:57px
  }
  .small-control label {
    font-size:9px
  }
  .small-control output {
    font-size:7px;
    margin-top:6px
  }
  .knob-wrap {
    margin-bottom:13px
  }
  .knob-ticks {
    inset:-7px
  }
  .dial {
    inset:2px
  }
  .dial:before {
    inset:3px
  }
  .dial>span {
    width:2px;
    left:calc(50% - 1px);
    top:8px;
    height:10px
  }
  .large-knob {
    width:99px;
    height:99px;
    margin-bottom:7px
  }
  .tuning-dial:before {
    inset:4px
  }
  .tuning-dial>span {
    top:10px;
    height:13px
  }
  .tuning-caption {
    gap:13px
  }
  .tuning-caption label {
    font-size:10px
  }
  .seek-button {
    font-size:8px
  }
  .power-controls {
    grid-column:1/-1;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    border-left:0;
    border-top:1px solid #b4bba8;
    padding:16px 0 0;
    gap:12px
  }
  .power-button {
    grid-column:2;
    grid-row:1;
    min-width:116px;
    font-size:9px;
    gap:6px;
    padding:10px 9px;
    min-height:39px
  }
  .power-indicator {
    justify-content:flex-start;
    gap:5px;
    font-size:7px
  }
  .power-indicator>span:first-child {
    width:4px;
    height:4px
  }
  .mute-button {
    justify-content:flex-end;
    padding:9px 0;
    font-size:8px;
    gap:6px
  }
  .mute-switch {
    width:22px
  }
  .mute-switch:before {
    width:11px
  }
  .preset-bank {
    grid-template-columns:repeat(2,1fr);
    gap:12px 9px;
    padding:18px 0 18px
  }
  .preset {
    height:46px;
    align-items:center;
    padding:8px 10px;
    gap:10px
  }
  .preset-number {
    min-width:15px;
    font-size:12px;
    align-self:center;
    margin-top:0
  }
  .preset-text {
    font-size:10px;
    line-height:1.1;
    white-space:nowrap
  }
  .preset-text small {
    font-size:7px;
    margin-top:5px
  }
  .preset-led {
    width:4px;
    height:4px;
    right:8px;
    bottom:9px
  }
  .receiver-bottomline {
    font-size:6px;
    padding-left:2px
  }
  .receiver-foot {
    width:61px;
    height:9px
  }
  .receiver-foot-left {
    left:35px
  }
  .receiver-foot-right {
    right:35px
  }
  .listening-notes {
    grid-template-columns:1fr;
    padding:39px 0 29px;
    gap:27px
  }
  .current-note h2 {
    font-size:29px;
    margin:12px 0 12px
  }
  .current-note p {
    font-size:12px;
    line-height:1.75;
    max-width:310px
  }
  .note-label {
    font-size:9px
  }
  .note-tags {
    margin-top:15px;
    gap:13px
  }
  .note-tags span {
    font-size:8px
  }
  .note-tags span+span:before {
    margin-right:13px
  }
  .operating-note {
    border-top:1px solid var(--line);
    padding-top:23px;
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:20px
  }
  .operating-title {
    font-size:12px;
    grid-column:1/-1;
    margin-bottom:12px
  }
  .operating-note p:not(.operating-title) {
    font-size:10px;
    line-height:1.7;
    max-width:none;
    margin-bottom:12px
  }
  .operating-note .control-help {
    font-size:9px!important
  }
  .operating-note .sound-status {
    grid-column:1/-1;
    font-size:9px!important;
    margin-top:0
  }
  .page-footer {
    font-size:8px;
    gap:15px;
    height:65px
  }
  .footer-divider {
    margin:0 4px
  }
  .page-footer a {
    gap:11px
  }
  .page-footer a span:last-child {
    font-size:17px
  }
}
@media(max-width:360px) {
  .intro h1 {
    font-size:50px
  }
  .faceplate {
    padding-left:11px;
    padding-right:11px
  }
  .frequency-line output {
    font-size:53px
  }
  .frequency-line {
    gap:8px
  }
  .band-label {
    display:none
  }
  .small-controls {
    gap:13px
  }
  .small-knob {
    width:51px;
    height:51px
  }
  .large-knob {
    width:91px;
    height:91px
  }
  .power-controls {
    gap:8px
  }
  .power-button {
    min-width:105px;
    font-size:8px;
    padding-left:7px;
    padding-right:7px
  }
  .preset-text {
    font-size:9px
  }
  .preset {
    padding-left:8px;
    gap:7px
  }
  .page-footer>span {
    max-width:120px;
    line-height:1.6
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important
  }
}