@font-face {
  font-family: "ReceiptDisplayFont";
  src: url("assets/fonts/ReceiptDisplayFont.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

:root {
  --skin-2-shell-background: linear-gradient(145deg, #303232, #242626 56%, #1b1c1c);
  --skin-2-safe-area-background: #242626;
  --skin-2-safe-area-left: env(safe-area-inset-left, 0px);
}

@font-face {
  font-family: "Dotted Songti Square";
  src: url("assets/fonts/DottedSongtiSquareRegular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

@font-face {
  font-family: "Dotted Songti Circle";
  src: url("assets/fonts/DottedSongtiCircleRegular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

@font-face {
  font-family: "Fusion Pixel";
  src: url("assets/fonts/FusionPixel12-JA.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

@font-face {
  font-family: "Fusion Pixel Korean";
  src: url("assets/fonts/FusionPixel12-KO.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

@font-face {
  font-family: "Doto";
  src: url("assets/fonts/Doto.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
}

.radio-body-2 button:focus {
  outline: none;
}

.radio-skin-2,
.radio-skin-2 * {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.radio-skin-2 {
  /* Keep native vertical page gestures available for pull-to-refresh and
     browser-toolbar collapse. Gesture-driven controls opt out separately. */
  touch-action: manipulation;
}

.radio-body-2 button:hover {
  border-color: #111212;
}

.radio-skin-2 {
  --lcd-background: #3b140c;
  --skin-3-halo-x: 620px;
  --skin-3-halo-y: 700px;
  --skin-2-button-border: #3c423f;
  --skin-2-button-shadow: 0 8px 24px #0008, inset 0 1px #ffffff0a;
  --skin-2-button-active-background: #202522;
  display: flex;
  position: relative;
  min-height: 100svh;
  padding: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #d5d7d5;
  background: radial-gradient(
    ellipse var(--skin-3-halo-x) var(--skin-3-halo-y) at 50% 50%,
    #1a1d1b 0%,
    #121513 48%,
    #090b0a 100%
  );
}

.site-credit {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: max(30px, calc(env(safe-area-inset-bottom) + 20px));
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #8f9692;
  font: 400 14px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  white-space: nowrap;
  transform: translateX(-50%);
}

.site-credit a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}

.site-credit a:hover,
.site-credit a:focus-visible {
  color: #c7ccc9;
  text-decoration: none;
}

.site-credit a:focus-visible {
  outline: 1px solid #c7ccc9;
  outline-offset: 3px;
  border-radius: 3px;
}

.site-credit img {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: contain;
}

.site-credit-phone {
  display: none;
}

.radio-skin-2 > .site-credit {
  display: none;
}

.radio-body-2 > .skin-2-phone-footer {
  position: relative;
  z-index: 3;
  grid-column: 1 / -1;
  grid-row: 3;
  align-self: end;
  height: 30px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  box-sizing: border-box;
  transform: none;
}

.radio-body-2 > .skin-2-phone-footer > .site-credit-phone {
  position: relative;
  z-index: 3;
  left: auto;
  bottom: auto;
  display: inline-flex;
  justify-self: end;
  align-self: center;
  height: 30px;
  margin: 0;
  padding: 6px 8px;
  color: #8f9692;
  font-size: 14px;
  box-sizing: border-box;
  transform: none;
}

.radio-body-2 > .skin-2-phone-footer > .skin-2-install-app {
  position: relative;
  z-index: 3;
  justify-self: start;
  align-self: center;
  height: 30px;
  min-height: 0;
  padding: 6px 8px;
  border: 0;
  border-radius: 4px;
  color: #8f9692;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  box-sizing: border-box;
  transform: none;
}

.station-share-toast {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 18px));
  max-width: min(80vw, 340px);
  padding: 10px 14px;
  border: 1px solid #494d4c;
  border-radius: 999px;
  color: #d5d7d5;
  background: #202222f2;
  box-shadow: 0 8px 22px #00000066, inset 0 1px #ffffff0d;
  font: 500 14px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 160ms ease-out, transform 160ms ease-out;
}

.station-share-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.install-app-toggle,
.device-view-toggle {
  display: grid;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  place-items: center;
  appearance: none;
  border: 1px solid var(--skin-2-button-border);
  border-radius: 12px;
  color: #c3c8c5;
  background: #111513e8;
  box-shadow: var(--skin-2-button-shadow);
  backdrop-filter: blur(10px);
  -webkit-tap-highlight-color: transparent;
}

.install-app-toggle[hidden] {
  display: none !important;
}

.device-view-toggle[hidden] {
  display: none;
}

.install-app-toggle:hover,
.install-app-toggle:focus-visible,
.device-view-toggle:hover,
.device-view-toggle:focus-visible {
  border-color: #707973;
  color: #ff7a42;
}

.install-app-toggle:focus-visible,
.device-view-toggle:focus-visible {
  outline: 2px solid #ff7657aa;
  outline-offset: 3px;
}

.install-app-toggle:active,
.device-view-toggle:active {
  background: var(--skin-2-button-active-background);
}

.install-app-icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.radio-body-2 > .skin-2-phone-footer > .skin-2-install-app {
  display: inline-flex;
  width: auto;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.install-app-label {
  font: 500 13px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .01em;
  white-space: nowrap;
}

.device-view-icon {
  display: block;
  width: 28px;
  height: 28px;
}

.device-view-icon-large {
  width: clamp(32px, 52%, 72px);
  height: clamp(32px, 52%, 72px);
}

.device-view-icon-small {
  display: none;
}

.radio-skin-2[data-device-view="screen"] .device-view-icon-large {
  display: none;
}

.radio-skin-2[data-device-view="screen"] .device-view-icon-small {
  display: block;
  opacity: .6;
}

.device-view-toggle[aria-pressed="true"] {
  color: #ff6b26;
}

.device-view-toggle {
  --device-view-toggle-size: clamp(44px, 8cqi, 88px);
  position: absolute;
  z-index: 6;
  top: 50%;
  right: calc(-20px - var(--device-view-toggle-size));
  width: var(--device-view-toggle-size);
  height: var(--device-view-toggle-size);
  min-height: var(--device-view-toggle-size);
  transform: translateY(-50%);
}

.radio-skin-2:not([data-device-view="screen"]) .device-view-toggle {
  --device-view-toggle-size: clamp(88px, 16cqi, 176px);
  position: fixed;
  top: auto;
  right: auto;
  bottom: 40px;
  left: 40px;
  transform: none;
}

.radio-skin-2:not([data-device-view="screen"])[data-device-layout="portrait"] .device-view-toggle {
  top: 40px;
  right: 40px;
  bottom: auto;
  left: auto;
}

.radio-skin-2:not([data-device-view="screen"])[data-device-layout="landscape"] .device-view-toggle {
  --device-view-toggle-size: clamp(52.8px, 9.6cqi, 105.6px);
  top: auto;
  right: 40px;
  bottom: 40px;
  left: auto;
}

.radio-skin-2:not([data-device-view="screen"])[data-device-layout="landscape"] > .site-credit {
  right: 40px;
  left: auto;
  transform: none;
}

html[data-standalone-pwa="true"] .skin-2-install-app {
  display: none !important;
}

html[data-standalone-pwa="true"],
html[data-standalone-pwa="true"] body {
  background: var(--skin-2-shell-background);
  background-attachment: fixed;
}

html[data-standalone-pwa="true"] body::before {
  content: "";
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  height: env(safe-area-inset-top);
  background: var(--skin-2-safe-area-background);
  pointer-events: none;
}

html[data-standalone-pwa="true"] body::after {
  content: "";
  position: fixed;
  z-index: 1000;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    var(--skin-2-safe-area-background) 0,
    var(--skin-2-safe-area-background) env(safe-area-inset-left, 0px),
    transparent env(safe-area-inset-left, 0px) 100%
  );
}

.map-tuning-panel {
  position: fixed;
  z-index: 20;
  top: 16px;
  left: 16px;
  width: min(286px, calc(100vw - 32px));
  max-height: calc(100svh - 32px);
  overflow: auto;
  border: 1px solid #39403c;
  border-radius: 12px;
  color: #d3dad5;
  background: #0c100eee;
  box-shadow: 0 10px 32px #0009, inset 0 1px #ffffff0a;
  font: 10px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(10px);
}

.map-tuning-panel[hidden] {
  display: none;
}

.map-tuning-panel summary {
  padding: 10px 12px;
  color: #ff7a42;
  letter-spacing: .12em;
  cursor: pointer;
  user-select: none;
}

.map-tuning-content {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
}

.map-tuning-readout {
  display: grid;
  gap: 3px;
  padding: 9px;
  border: 1px solid #2b332f;
  border-radius: 8px;
  background: #151b18;
}

.map-tuning-readout strong {
  color: #f5f0e9;
  font-size: 11px;
}

.map-tuning-readout small {
  color: #9ca7a0;
  font: inherit;
}

.map-tuning-readout #map-tuning-admin[data-state="visible"] {
  color: #9dcc9f;
}

.map-tuning-readout #map-tuning-admin[data-state="mixed"] {
  color: #e1b76e;
}

.map-tuning-readout #map-tuning-admin[data-state="hidden"] {
  color: #d58a72;
}

.map-tuning-view-switches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.map-tuning-view-switches button {
  min-height: 30px;
  border: 1px solid #343c38;
  border-radius: 7px;
  color: #aeb7b1;
  background: #1a201d;
  font: inherit;
  cursor: pointer;
}

.map-tuning-view-switches button:hover {
  border-color: #68726c;
}

.map-tuning-view-switches button.is-active {
  border-color: #ff6b35;
  color: #ff9968;
  background: #2b1811;
  box-shadow: inset 0 0 0 1px #ff6b3538;
}

.map-tuning-panel fieldset {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 8px 9px 9px;
  border: 1px solid #252c29;
  border-radius: 8px;
}

.map-tuning-panel legend {
  padding: 0 4px;
  color: #747f79;
  letter-spacing: .08em;
}

.map-tuning-formula {
  color: #6f7a74;
  font: inherit;
  line-height: 1.45;
}

.map-tuning-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 40px;
  gap: 7px;
  align-items: center;
}

.map-tuning-row > span {
  color: #aeb7b1;
}

.map-tuning-row output {
  color: #ff9968;
  text-align: right;
}

.map-tuning-row input[type="range"] {
  width: 100%;
  height: 14px;
  margin: 0;
  accent-color: #ff6b35;
  cursor: ew-resize;
}

.map-tuning-reset {
  min-height: 30px;
  border-color: #343c38;
  border-radius: 7px;
  color: #aeb7b1;
  background: #1a201d;
  font: inherit;
}

.map-tuning-reset:hover {
  border-color: #68726c;
}

@media (max-width: 720px) {
  .map-tuning-panel {
    top: 8px;
    left: 8px;
    width: min(270px, calc(100vw - 16px));
    max-height: calc(100svh - 16px);
  }
}

.radio-body-2 {
  /* 6px sub-grid / 12px major grid. Track heights plus gaps, padding and
     borders resolve to the unchanged 1008px outer height. */
  --skin-2-grid: 6px;
  --skin-2-gap: 24px;
  --skin-2-padding: 38px;
  --skin-2-padding-x: 38px;
  --skin-2-lcd-row-height: 666px;
  --skin-2-control-row-height: 108px;
  --skin-2-subscreen-gap: 12px;
  --skin-2-language-screen-height: 80px;
  --skin-2-language-switch-height: 80px;
  --skin-2-speaker-row-height: 108px;
  --skin-2-left-column: 226px;
  --skin-2-design-width: 880px;
  --skin-2-design-height: 1008px;
  --skin-2-shell-radius: 58px;
  --skin-2-screen-radius: max(12px, calc(var(--skin-2-shell-radius) - var(--skin-2-padding)));
  --skin-2-screen-bezel: 4px;
  --skin-2-screen-inner-radius: max(8px, calc(var(--skin-2-screen-radius) - var(--skin-2-screen-bezel)));
  --skin-2-speaker-cell: 12px;
  --skin-2-aperture-radius: 2px;
  --skin-2-aperture-edge: 2.35px;
  --skin-2-aperture-radius-ratio: 33.333333%;
  --skin-2-aperture-edge-ratio: 39.166667%;
  --skin-2-control: #282a2a;
  --skin-2-control-active: #202222;
  --skin-2-control-rim: #383a3a80;
  position: relative;
  container-type: inline-size;
  flex: 0 0 auto;
  isolation: isolate;
  display: grid;
  grid-template-columns: var(--skin-2-left-column) minmax(0, 1fr);
  grid-template-rows:
    minmax(0, var(--skin-2-lcd-row-height))
    minmax(0, var(--skin-2-control-row-height))
    minmax(0, var(--skin-2-speaker-row-height));
  gap: var(--skin-2-gap);
  width: var(--skin-2-design-width);
  height: var(--skin-2-design-height);
  padding: var(--skin-2-padding) var(--skin-2-padding-x);
  overflow: visible;
  border: 1px solid #0d0e0e;
  border-radius: var(--skin-2-shell-radius);
  background: var(--skin-2-shell-background);
  box-shadow:
    0 20px 42px #20222266,
    inset 0 1px 0 #555858,
    inset 0 0 0 9px #0f101055,
    inset 0 0 0 13px #4a4c4c2e;
}

.skin-2-left-controls {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
}

.skin-2-tuning-stack {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, var(--skin-2-language-switch-height));
  gap: var(--skin-2-subscreen-gap);
  min-width: 0;
  min-height: 0;
}

.skin-2-tuning-displays {
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, var(--skin-2-language-screen-height));
  gap: var(--skin-2-subscreen-gap);
  min-width: 0;
  min-height: 0;
}

.skin-2-language-wheel {
  --language-wheel-drag: 0%;
  --language-wheel-max-shift: 30%;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  appearance: none;
  overflow: hidden;
  border: 1px solid #111212;
  border-radius: var(--skin-2-screen-radius);
  background: linear-gradient(145deg, #191b1b, #111313 62%, #0d0e0e);
  box-shadow:
    inset 0 3px 7px #060707cc,
    inset 0 0 0 1px #000000cc;
  cursor: pointer;
  touch-action: none;
}

.skin-2-language-wheel.slide-left {
  --language-wheel-drag: calc(-1 * var(--language-wheel-max-shift));
}

.skin-2-language-wheel.slide-right {
  --language-wheel-drag: var(--language-wheel-max-shift);
}

.skin-2-language-wheel.is-hinting-left {
  --language-wheel-drag: -7.5%;
}

.skin-2-language-wheel.is-hinting-right {
  --language-wheel-drag: 7.5%;
}

.skin-2-language-wheel.is-hinting-left .skin-2-language-knob,
.skin-2-language-wheel.is-hinting-right .skin-2-language-knob {
  transition-duration: 440ms;
  transition-timing-function: cubic-bezier(.65, 0, .35, 1);
}

.skin-2-language-wheel.is-travelling .skin-2-language-knob {
  transition-duration: var(--language-wheel-travel-duration, 220ms);
  transition-timing-function: cubic-bezier(.65, 0, .35, 1);
}

.skin-2-language-wheel.is-returning .skin-2-language-knob {
  transition-duration: var(--language-wheel-return-duration, 800ms);
  transition-timing-function: cubic-bezier(.45, 0, .2, 1);
}

.skin-2-language-knob {
  position: absolute;
  isolation: isolate;
  left: calc(50% + var(--language-wheel-drag));
  top: 50%;
  width: 40%;
  height: calc(100% - 8px);
  border-radius: 28px;
  background:
    linear-gradient(to bottom, #5a5d5d5c, transparent 38%),
    linear-gradient(145deg, #3a3d3d, #2b2e2e 58%, #222424);
  box-shadow:
    0 2px 5px #00000070,
    inset 0 -4px 4px 6px #0b0d0d7a;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: left 220ms cubic-bezier(.65, 0, .35, 1);
}

.skin-2-language-knob::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 30%;
  border-radius: 99px;
  background: #161818;
  box-shadow: 1px 0 0 #50535366;
  transform: translate(-50%, -50%);
}

.skin-2-language-knob::before {
  content: "";
  display: none;
}

.skin-2-language-wheel.is-dragging .skin-2-language-knob {
  transition: none;
}

.skin-2-language-wheel:focus-visible {
  outline: 2px solid #ff7657aa;
  outline-offset: 3px;
}

.skin-2-power.power-required-flash {
  animation: skin-2-power-required-flash 560ms ease-out;
}

@keyframes skin-2-power-required-flash {
  0%,
  100% {
    filter: none;
  }

  32% {
    filter: brightness(1.65) drop-shadow(0 0 10px #ff8a45cc);
  }
}

.skin-2-screen {
  position: relative;
  z-index: 2;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: var(--skin-2-screen-bezel) solid #111212;
  border-radius: var(--skin-2-screen-radius);
  background: var(--lcd-background);
  box-shadow:
    inset 0 0 14px 6px #00000059,
    inset 0 3px 7px #00000059,
    inset 0 0 0 1px #00000059;
}

/* Canvas content fills the screen, so the recessed bezel must sit above it. */
.skin-2-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: var(--skin-2-screen-inner-radius);
  box-shadow:
    inset 0 0 14px 6px #00000059,
    inset 0 3px 7px #00000059,
    inset 0 0 0 1px #00000059;
}

.skin-2-tuning-screen {
  min-width: 0;
  min-height: 0;
  /* The tuning LCD owns one foreground recess layer, shared by every edge. */
  box-shadow: none;
}

.skin-2-tuning-screen::before {
  box-shadow: none;
}

/* The single recess layer sits above both canvas and needle, keeping every
   edge on one radius while still occluding the needle's glow at the bezel. */
.skin-2-tuning-screen::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  border-radius: var(--skin-2-screen-inner-radius);
  box-shadow: inset 0 0 14px 6px #00000059;
}

.skin-2-language-screen {
  min-width: 0;
  min-height: 0;
}

.skin-2-info-screen {
  grid-column: 2;
  grid-row: 1;
  height: 100%;
}

.skin-2-info-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Fade the LCD content, but keep the recessed bezel above it at all times. */
  z-index: 1;
  pointer-events: none;
  background: var(--lcd-background);
  opacity: 0;
  transition: opacity 180ms ease-out;
}

.radio-body-2.language-screen-blackout .skin-2-info-screen::after {
  opacity: 1;
  transition-duration: 320ms;
  transition-timing-function: ease-in;
}

.radio-body-2.language-screen-blackout .skin-2-info-screen canvas {
  opacity: 0;
  transition-duration: 320ms;
  transition-timing-function: ease-in;
}

.radio-body-2.language-screen-restarting .skin-2-info-screen::after {
  opacity: 0;
  transition-duration: 360ms;
  transition-timing-function: ease-out;
}

.radio-body-2.language-screen-restarting .skin-2-info-screen canvas {
  opacity: 1;
  transition-duration: 360ms;
  transition-timing-function: ease-out;
}

.skin-2-screen canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--skin-2-screen-inner-radius);
  clip-path: inset(0 round var(--skin-2-screen-inner-radius));
  opacity: 1;
  transition: opacity 160ms ease-out;
}

.skin-2-power {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  overflow: visible;
  justify-self: center;
  border: 1px solid #111212;
  border-radius: var(--skin-2-screen-radius);
  background: var(--skin-2-control);
  box-shadow:
    inset 0 0 0 1px var(--skin-2-control-rim),
    inset 0 2px 5px #0d0e0e99;
}

.skin-2-power:active {
  transform: none;
  background: var(--skin-2-control-active);
  box-shadow:
    inset 0 0 0 1px #30323280,
    inset 0 3px 7px #090a0aaa;
}

.skin-2-power-mark {
  position: absolute;
  isolation: isolate;
  left: 50%;
  top: 50%;
  width: 14.4%;
  aspect-ratio: 1;
  overflow: visible;
  border: 2px solid #a7aaa8;
  border-top-color: transparent;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  filter: none;
  transition: border-color 160ms ease-out, filter 160ms ease-out;
}

.skin-2-power-mark::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -24%;
  width: 2px;
  height: 62%;
  border-radius: 99px;
  background: #a7aaa8;
  transform: translateX(-50%);
  transition: background-color 160ms ease-out, box-shadow 160ms ease-out;
}

.skin-2-power[aria-pressed="true"] .skin-2-power-mark {
  border-color: #ff7657;
  border-top-color: transparent;
}

.skin-2-power[aria-pressed="true"] .skin-2-power-mark::before {
  background: #ff7657;
  box-shadow: 0 0 6px #ff8a45aa;
}

.skin-2-share {
  --skin-2-share-icon-block-size: 28%;
  display: none;
  position: relative;
  min-height: 0;
  padding: 0;
  appearance: none;
  border: 1px solid #111212;
  background: var(--skin-2-control);
  box-shadow:
    inset 0 0 0 1px var(--skin-2-control-rim),
    inset 0 2px 5px #0d0e0e99;
  color: #ff6b26;
}

.skin-2-share:active {
  background: var(--skin-2-control-active);
  box-shadow:
    inset 0 0 0 1px #30323280,
    inset 0 3px 7px #090a0aaa;
  color: #ff8a45;
}

.skin-2-share-mark {
  inline-size: auto;
  block-size: var(--skin-2-share-icon-block-size);
  aspect-ratio: 1;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  filter: drop-shadow(0 0 6px #ff8a45aa);
}

.skin-2-station-controls {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--skin-2-gap);
  min-width: 0;
  min-height: 0;
}

.skin-2-speaker-grid {
  --skin-2-speaker-cell-x: var(--skin-2-speaker-cell);
  --skin-2-speaker-cell-y: var(--skin-2-speaker-cell);
  --skin-2-speaker-exclusion-left: 100%;
  --skin-2-speaker-exclusion-top: 100%;
  --skin-2-speaker-exclusion-right: 100%;
  --skin-2-speaker-exclusion-bottom: 100%;
  grid-column: 1 / -1;
  grid-row: 3;
  min-height: 0;
  border-radius: 8px;
  opacity: 1;
  background-image: radial-gradient(
    circle closest-side,
    #121414 0 var(--skin-2-aperture-radius-ratio),
    transparent var(--skin-2-aperture-edge-ratio)
  );
  background-size: var(--skin-2-speaker-cell-x) var(--skin-2-speaker-cell-y);
  -webkit-mask-image:
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0);
  -webkit-mask-position:
    0 0,
    0 100%,
    0 var(--skin-2-speaker-exclusion-top),
    100% var(--skin-2-speaker-exclusion-top);
  -webkit-mask-size:
    100% var(--skin-2-speaker-exclusion-top),
    100% calc(100% - var(--skin-2-speaker-exclusion-bottom)),
    var(--skin-2-speaker-exclusion-left) calc(var(--skin-2-speaker-exclusion-bottom) - var(--skin-2-speaker-exclusion-top)),
    calc(100% - var(--skin-2-speaker-exclusion-right)) calc(var(--skin-2-speaker-exclusion-bottom) - var(--skin-2-speaker-exclusion-top));
  -webkit-mask-repeat: no-repeat;
  mask-image:
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0);
  mask-position:
    0 0,
    0 100%,
    0 var(--skin-2-speaker-exclusion-top),
    100% var(--skin-2-speaker-exclusion-top);
  mask-size:
    100% var(--skin-2-speaker-exclusion-top),
    100% calc(100% - var(--skin-2-speaker-exclusion-bottom)),
    var(--skin-2-speaker-exclusion-left) calc(var(--skin-2-speaker-exclusion-bottom) - var(--skin-2-speaker-exclusion-top)),
    calc(100% - var(--skin-2-speaker-exclusion-right)) calc(var(--skin-2-speaker-exclusion-bottom) - var(--skin-2-speaker-exclusion-top));
  mask-repeat: no-repeat;
}

.skin-2-station-controls button {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 1px solid #111212;
  border-radius: var(--skin-2-screen-radius);
  background: var(--skin-2-control);
  box-shadow:
    inset 0 0 0 1px var(--skin-2-control-rim),
    inset 0 2px 5px #0d0e0e99;
  transition: opacity 160ms ease-out, filter 160ms ease-out;
}

.skin-2-station-controls button:active {
  transform: none;
  background: var(--skin-2-control-active);
  box-shadow:
    inset 0 0 0 1px #30323280,
    inset 0 3px 7px #090a0aaa;
}

.skin-2-station-controls button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(50% + 31px);
  width: 18px;
  height: 6px;
  pointer-events: none;
  transform: translateX(-50%);
}

#radio-previous-2::after {
  background: radial-gradient(circle at 50% 50%, #3a3c3c 0 2px, transparent 2.2px);
}

#radio-next-2::after {
  background:
    radial-gradient(circle at 5px 50%, #3a3c3c 0 2px, transparent 2.2px),
    radial-gradient(circle at 13px 50%, #3a3c3c 0 2px, transparent 2.2px);
}

.skin-2-station-controls .previous-icon,
.skin-2-station-controls .next-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 30px;
  height: 48px;
  transform: translate(-50%, -50%);
}

.skin-2-station-controls .previous-icon::before,
.skin-2-station-controls .next-icon::before {
  content: "";
  position: absolute;
  top: 10%;
  bottom: 10%;
  width: 2px;
}

.skin-2-station-controls .previous-icon::after,
.skin-2-station-controls .next-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  border-top-width: 18px;
  border-top-style: solid;
  border-top-color: transparent;
  border-bottom-width: 18px;
  border-bottom-style: solid;
  border-bottom-color: transparent;
  transform: translateY(-50%);
}

.skin-2-station-controls .previous-icon::before {
  left: 0;
}

.skin-2-station-controls .next-icon::before {
  right: 0;
}

.skin-2-station-controls .previous-icon::after {
  left: 3px;
  border-right-width: 23px;
  border-right-style: solid;
}

.skin-2-station-controls .next-icon::after {
  right: 3px;
  border-left-width: 23px;
  border-left-style: solid;
}

.skin-2-station-controls .previous-icon::before,
.skin-2-station-controls .next-icon::before {
  background: #b8bbb9;
}

.skin-2-station-controls .previous-icon::after {
  border-right-color: #b8bbb9;
}

.skin-2-station-controls .next-icon::after {
  border-left-color: #b8bbb9;
}

.skin-2-station-controls .previous-icon,
.skin-2-station-controls .next-icon {
  filter: none;
}

.skin-2-power-mark {
  border-width: 4px;
}

.skin-2-power[aria-pressed="true"] .skin-2-power-mark {
  border-color: #ff6b26;
  border-top-color: transparent;
  filter: drop-shadow(0 0 6px #ff8a45aa);
}

.skin-2-power-mark::before,
.skin-2-station-controls .previous-icon::before,
.skin-2-station-controls .next-icon::before {
  width: 4px;
}

.skin-2-station-controls .previous-icon::before,
.skin-2-station-controls .next-icon::before {
  background: #ff6b26;
  box-shadow: 0 0 6px #ff8a45aa;
}

.skin-2-power[aria-pressed="true"] .skin-2-power-mark::before {
  background: #ff6b26;
  box-shadow: 0 0 6px #ff8a45aa;
}

.skin-2-station-controls .previous-icon::after {
  border-right-color: #ff6b26;
  filter: drop-shadow(0 0 6px #ff8a45aa);
}

.skin-2-station-controls .next-icon::after {
  border-left-color: #ff6b26;
  filter: drop-shadow(0 0 6px #ff8a45aa);
}

.skin-2-station-controls button:active .previous-icon::before,
.skin-2-station-controls button:active .next-icon::before {
  background: #ff8a45;
  box-shadow:
    0 0 10px #ff8a45ff,
    0 0 16px #ff6b26b8;
}

.skin-2-station-controls button:active .previous-icon::after,
.skin-2-station-controls button:active .next-icon::after {
  filter:
    drop-shadow(0 0 10px #ff8a45ff)
    drop-shadow(0 0 5px #ff6b26cc);
}

.radio-body-2.power-off .skin-2-station-controls .previous-icon,
.radio-body-2.power-off .skin-2-station-controls .next-icon {
  filter: none;
}

.radio-body-2.power-off .skin-2-station-controls .previous-icon::before,
.radio-body-2.power-off .skin-2-station-controls .next-icon::before {
  background: #a7aaa8;
  box-shadow: none;
}

.radio-body-2.power-off .skin-2-station-controls .previous-icon::after {
  border-right-color: #a7aaa8;
  filter: none;
}

.radio-body-2.power-off .skin-2-station-controls .next-icon::after {
  border-left-color: #a7aaa8;
  filter: none;
}

.radio-body-2.power-off .skin-2-screen canvas {
  opacity: .25;
  transition-duration: 900ms;
  transition-timing-function: ease-in;
}

/*
 * Screen-as-device view. Portrait uses the 804 x 1742, 6:13 B2TF canvas;
 * landscape keeps this view active while reusing the framed two-column layout.
 */
.radio-skin-2[data-device-view="screen"] {
  --skin-2-phone-slot-border: #3b3533;
  --skin-2-phone-slot-highlight: #4a4a4a;
  --skin-2-phone-slot-surface: #202020;
  --skin-2-phone-control-knob: #35302e;
  background: var(--skin-2-shell-background);
  background-attachment: fixed;
}

.radio-skin-2[data-device-view="screen"] .device-view-toggle {
  border: 1px solid #111212;
  border-radius: 50%;
  background: var(--skin-2-control);
  box-shadow:
    inset 0 0 0 1px var(--skin-2-control-rim),
    inset 0 2px 5px #0d0e0e99;
  backdrop-filter: none;
  transform: none;
  transition: background-color 70ms linear, box-shadow 70ms linear;
}

.radio-skin-2[data-device-view="screen"][data-device-layout="portrait"] .device-view-toggle {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  width: 144px;
  height: 144px;
  min-height: 0;
}

.radio-skin-2[data-device-view="screen"][data-device-layout="landscape"] .device-view-toggle {
  --device-view-toggle-width: 180px;
  --device-view-toggle-height: 91.2px;
  position: relative;
  z-index: 6;
  grid-column: 4;
  grid-row: 2;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  align-self: start;
  justify-self: center;
  width: var(--device-view-toggle-width);
  height: var(--device-view-toggle-height);
  min-height: 0;
  border-radius: 999px;
  transform: none;
}

.radio-skin-2[data-device-view="screen"] .device-view-toggle:active {
  background: var(--skin-2-control-active);
  box-shadow:
    inset 0 0 0 1px #30323280,
    inset 0 3px 7px #090a0aaa;
  transform: none;
}

/* A view change leaves the button focused in some mobile browsers. It is a
   persistent control state, not an error or an active selection, so do not
   leave an orange focus ring on the receiver. */
.radio-skin-2[data-device-view="screen"] .device-view-toggle:focus-visible {
  outline: none;
}

.radio-skin-2[data-device-view="screen"][data-device-layout="portrait"] .device-view-icon {
  width: 48px;
  height: 48px;
}

.radio-skin-2[data-device-view="screen"][data-device-layout="landscape"] .device-view-icon {
  width: 52.8px;
  height: 52.8px;
}

.radio-skin-2[data-device-view="screen"] .radio-body-2 {
  --skin-2-shell-radius: 0px;
  --skin-2-screen-radius: 36px;
  --skin-2-screen-inner-radius: calc(var(--skin-2-screen-radius) - var(--skin-2-screen-bezel) - 1px);
  --skin-2-speaker-cell: 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.radio-skin-2[data-device-view="screen"][data-device-layout="portrait"] .radio-body-2 {
  --skin-2-gap: var(--skin-2-portrait-gap, 58px);
  --skin-2-padding: 0;
  --skin-2-padding-x: 28px;
  --skin-2-design-width: 804px;
  --skin-2-design-height: 1742px;
  grid-template-columns: 152px minmax(0, 1fr) 144px;
  grid-template-rows:
    var(--skin-2-portrait-row-1, 150px)
    var(--skin-2-portrait-row-2, 676px)
    var(--skin-2-portrait-row-3, 90px)
    var(--skin-2-portrait-row-4, 94px)
    var(--skin-2-portrait-row-5, 160px)
    var(--skin-2-portrait-row-6, 180px);
  column-gap: 24px;
  row-gap: var(--skin-2-gap);
  width: var(--skin-2-design-width);
  height: var(--skin-2-design-height);
  padding:
    var(--skin-2-portrait-padding-top, 68px)
    var(--skin-2-padding-x)
    var(--skin-2-portrait-padding-bottom, 34px);
}

.radio-skin-2[data-device-view="screen"][data-device-layout="landscape"] .radio-body-2 {
  --skin-2-left-column: 271.2px;
  grid-template-columns: var(--skin-2-landscape-safe-gutter, 0px) var(--skin-2-left-column) minmax(0, 1fr) 384px;
  grid-template-rows: 630px 204px 0;
  column-gap: 0;
  row-gap: 48px;
}

.radio-skin-2[data-device-view="screen"][data-device-layout="portrait"] .skin-2-left-controls {
  grid-column: 1;
  grid-row: 1;
}

.radio-skin-2[data-device-view="screen"][data-device-layout="portrait"] .skin-2-tuning-stack,
.radio-skin-2[data-device-view="screen"][data-device-layout="portrait"] .skin-2-tuning-displays {
  display: contents;
}

.radio-skin-2[data-device-view="screen"][data-device-layout="portrait"] .skin-2-tuning-screen {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  width: 360px;
  height: 134px;
}

.radio-skin-2[data-device-view="screen"][data-device-layout="portrait"] .skin-2-language-screen {
  grid-column: 1 / -1;
  grid-row: 3;
  width: 260px;
  justify-self: center;
}

.radio-skin-2[data-device-view="screen"][data-device-layout="portrait"] .skin-2-language-wheel {
  grid-column: 1 / -1;
  grid-row: 4;
  width: 260px;
  justify-self: center;
  transform: translateY(-29px);
}

.radio-skin-2[data-device-view="screen"][data-device-layout="portrait"] .skin-2-info-screen {
  grid-column: 1 / -1;
  grid-row: 2;
}

.radio-skin-2[data-device-view="screen"][data-device-layout="portrait"] .skin-2-station-controls {
  grid-column: 1 / -1;
  grid-row: 5;
  /* Keep the compact language-screen → switch relationship, then use the
     normal module gap below it without shifting the speaker/footer row. */
  height: calc(100% + 30px);
  margin-block-start: -30px;
}

.radio-skin-2[data-device-view="screen"][data-device-layout="portrait"] .skin-2-speaker-grid {
  grid-column: 1 / -1;
  grid-row: 6;
}

.radio-skin-2[data-device-view="screen"][data-device-layout="landscape"] .skin-2-tuning-stack {
  grid-column: 2;
  padding-top: 0;
}

.radio-skin-2[data-device-view="screen"][data-device-layout="landscape"] .skin-2-info-screen {
  grid-column: 3;
  margin-inline: 24px;
}

.radio-skin-2[data-device-view="screen"][data-device-layout="landscape"] .skin-2-left-controls {
  grid-column: 2;
}

.radio-skin-2[data-device-view="screen"][data-device-layout="landscape"] .skin-2-station-controls {
  grid-column: 3;
  margin-inline: 24px;
  column-gap: 48px;
}

.radio-skin-2[data-device-view="screen"] .skin-2-left-controls {
  display: grid;
  place-items: center;
}

.radio-skin-2[data-device-view="screen"][data-device-layout="landscape"] .skin-2-left-controls .skin-2-power {
  top: 0;
  width: 165px;
  height: 165px;
  transform: none;
}

.radio-skin-2[data-device-view="screen"][data-device-layout="landscape"] .skin-2-power-mark,
.radio-skin-2[data-device-view="screen"][data-device-layout="landscape"] .skin-2-station-controls .previous-icon,
.radio-skin-2[data-device-view="screen"][data-device-layout="landscape"] .skin-2-station-controls .next-icon {
  transform: translate(-50%, -50%) scale(1.1);
}

.radio-skin-2[data-device-view="screen"][data-device-layout="landscape"] .skin-2-station-controls button::after {
  transform: translateX(-50%) scale(1.1);
}

.radio-skin-2[data-device-view="screen"] > .site-credit {
  display: none;
}

.radio-skin-2[data-device-view="screen"] .site-credit-phone {
  position: relative;
  z-index: 3;
  left: auto;
  bottom: auto;
  display: inline-flex;
  justify-self: end;
  align-self: center;
  margin: 0;
  padding: 6px 8px;
  color: #c7ccc9;
  background: transparent;
  box-shadow: none;
  height: 40.8px;
  font-size: 24px;
  transform: none;
}

.radio-skin-2[data-device-view="screen"] .skin-2-install-app {
  height: 40.8px;
  color: #c7ccc9;
  font-size: 24px;
}

.radio-skin-2[data-device-view="screen"] .skin-2-install-app .install-app-label {
  font-size: inherit;
}

.radio-skin-2[data-device-view="screen"] .skin-2-install-app .install-app-icon {
  width: 24px;
  height: 24px;
}

.radio-skin-2[data-device-view="screen"] .site-credit-phone a,
.radio-skin-2[data-device-view="screen"] .site-credit-phone a:hover,
.radio-skin-2[data-device-view="screen"] .site-credit-phone a:focus-visible {
  color: inherit;
  text-decoration: none;
}

.radio-skin-2[data-device-view="screen"] .site-credit-phone span {
  opacity: .3;
}

.radio-skin-2[data-device-view="screen"] .site-credit-phone img {
  width: 28.8px;
  height: 28.8px;
  opacity: .8;
  filter: grayscale(1);
}

.radio-skin-2[data-device-view="screen"][data-device-layout="portrait"] .skin-2-phone-footer {
  grid-column: 1 / -1;
  grid-row: 6;
  /* A single footprint controls both labels and removes complete speaker rows. */
  height: 86px;
}

.radio-skin-2[data-device-view="screen"][data-device-layout="portrait"] .site-credit-phone,
.radio-skin-2[data-device-view="screen"][data-device-layout="portrait"] .skin-2-install-app {
  align-self: end;
}

.radio-skin-2[data-device-view="screen"][data-device-layout="landscape"] .skin-2-phone-footer {
  grid-column: 4;
  grid-row: 1 / 3;
  align-self: stretch;
  justify-self: stretch;
  height: 100%;
  grid-template-columns: 1fr;
  grid-template-rows: 36px minmax(0, 1fr) 36px;
  row-gap: 0;
}

.radio-skin-2[data-device-view="screen"][data-device-layout="landscape"] .site-credit-phone {
  grid-column: 1;
  grid-row: 3;
  align-self: end;
  justify-self: center;
  height: 36px;
  padding: 6px 12px;
  font-size: 18px;
  transform: scale(1.6);
  transform-origin: center bottom;
}

.radio-skin-2[data-device-view="screen"][data-device-layout="landscape"] .skin-2-install-app {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: center;
  height: 36px;
  margin-bottom: 0;
  padding: 6px 12px;
  font-size: 18px;
}

.radio-skin-2[data-device-view="screen"][data-device-layout="landscape"] .site-credit-phone a {
  gap: 9px;
}

.radio-skin-2[data-device-view="screen"][data-device-layout="landscape"] .site-credit-phone img {
  width: 24px;
  height: 24px;
}

.radio-skin-2[data-device-view="screen"][data-device-layout="landscape"] .skin-2-speaker-grid {
  grid-column: 4;
  grid-row: 1;
}

.radio-skin-2[data-device-view="screen"] .skin-2-power {
  width: 150px;
  height: 150px;
  justify-self: center;
  border-radius: 50%;
}

.radio-skin-2[data-device-view="screen"] .skin-2-station-controls button,
.radio-skin-2[data-device-view="screen"] .skin-2-language-wheel {
  border-radius: 999px;
}

.radio-skin-2[data-device-view="screen"] .skin-2-language-wheel {
  overflow: visible;
  clip-path: inset(-20px -20px 0 -20px);
  border: 2px solid transparent;
  background:
    linear-gradient(var(--skin-2-phone-slot-surface), var(--skin-2-phone-slot-surface)) padding-box,
    linear-gradient(
      180deg,
      var(--skin-2-phone-slot-border) 0%,
      var(--skin-2-phone-slot-border) 58%,
      var(--skin-2-phone-slot-highlight) 100%
    ) border-box;
  box-shadow: inset 0 5px 8px #000b;
}

.radio-skin-2[data-device-view="screen"] .skin-2-language-knob {
  /* Keep the lower face seated while controlling the top-edge overhang. */
  top: -2px;
  bottom: 0;
  width: calc(32% + 6px);
  height: auto;
  background: var(--skin-2-phone-control-knob);
  box-shadow:
    0 5px 8px -4px #00000070,
    inset 0 1px 0 #ffffff16,
    inset 5px 0 3px -5px #0b0d0d80,
    inset -5px 0 3px -5px #0b0d0d80,
    inset 0 -6px 4px -3px #0b0d0dcc;
  transform: translateX(-50%);
}

.radio-skin-2[data-device-view="screen"] .skin-2-language-knob::before {
  display: none;
}

.radio-skin-2[data-device-view="screen"] .skin-2-screen,
.radio-skin-2[data-device-view="screen"] .skin-2-screen canvas,
.radio-skin-2[data-device-view="screen"] .skin-2-screen::before {
  border-radius: var(--skin-2-screen-radius);
}

.radio-skin-2[data-device-view="screen"] .skin-2-screen canvas,
.radio-skin-2[data-device-view="screen"] .skin-2-screen::before {
  border-radius: var(--skin-2-screen-inner-radius);
}

.radio-skin-2[data-device-view="screen"] .skin-2-info-screen::after {
  border-radius: var(--skin-2-screen-inner-radius);
  clip-path: inset(0 round var(--skin-2-screen-inner-radius));
}

.radio-skin-2[data-device-view="screen"] .skin-2-language-screen,
.radio-skin-2[data-device-view="screen"] .skin-2-language-screen canvas,
.radio-skin-2[data-device-view="screen"] .skin-2-language-screen::before {
  border-radius: 999px;
}

.radio-skin-2[data-device-view="screen"] .skin-2-install-app {
  border-radius: 4px;
}

.radio-skin-2 .skin-2-install-app:disabled {
  cursor: default;
  opacity: 1;
}

.radio-skin-2 .skin-2-install-app[data-install-state="prompting"],
.radio-skin-2 .skin-2-install-app[data-install-state="installing"] {
  color: #ff7a42;
}

.radio-skin-2 .skin-2-install-app[data-install-state="installed"] {
  color: #aebfb5;
}

.radio-skin-2 .skin-2-install-app[data-install-state="dismissed"],
.radio-skin-2 .skin-2-install-app[data-install-state="failed"] {
  color: #c7a39a;
}

.radio-skin-2[data-device-view="screen"] .skin-2-power:focus-visible,
.radio-skin-2[data-device-view="screen"] .skin-2-station-controls button:focus-visible,
.radio-skin-2[data-device-view="screen"] .device-view-toggle:focus-visible {
  outline: 3px solid #ff7657aa;
  outline-offset: 5px;
}

.radio-skin-2[data-device-view="screen"] .skin-2-power-mark {
  width: 27%;
}

html[data-standalone-pwa="true"] .radio-skin-2 .device-view-toggle {
  display: none;
}

html[data-standalone-pwa="true"] .radio-skin-2[data-device-view="screen"] .skin-2-left-controls {
  display: contents;
}

html[data-standalone-pwa="true"] .radio-skin-2[data-device-view="screen"] .skin-2-share {
  z-index: 4;
  display: grid;
  place-items: center;
}

html[data-standalone-pwa="true"] .radio-skin-2[data-device-view="screen"][data-device-layout="portrait"] .skin-2-power {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  justify-self: center;
  width: 144px;
  height: 144px;
}

html[data-standalone-pwa="true"] .radio-skin-2[data-device-view="screen"][data-device-layout="portrait"] .skin-2-share {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

html[data-standalone-pwa="true"] .radio-skin-2[data-device-view="screen"][data-device-layout="landscape"] .skin-2-power {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  justify-self: center;
  width: 165px;
  height: 165px;
  border-radius: 50%;
}

html[data-standalone-pwa="true"] .radio-skin-2[data-device-view="screen"][data-device-layout="landscape"] .skin-2-share {
  --skin-2-share-icon-block-size: 54%;
  grid-column: 4;
  grid-row: 2;
  align-self: start;
  justify-self: center;
  width: 216px;
  height: 109.44px;
  border-radius: 999px;
}

html[data-standalone-pwa="true"] .radio-skin-2[data-device-view="screen"][data-device-layout="landscape"] .skin-2-phone-footer {
  grid-column: 4;
  grid-row: 2;
  align-self: end;
  justify-self: stretch;
  height: 116px;
  grid-template-columns: 1fr;
  grid-template-rows: 36px 72px;
  row-gap: 8px;
}

html[data-standalone-pwa="true"] .radio-skin-2[data-device-view="screen"][data-device-layout="landscape"] .site-credit-phone {
  grid-column: auto;
  grid-row: 2;
  align-self: end;
  justify-self: end;
  height: 36px;
  padding: 6px 12px;
  font-size: 18px;
  transform: scale(1.6);
  transform-origin: right bottom;
}

main {
  display: block;
}

.player,
.catalogue {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .skin-2-screen canvas,
  .skin-2-power-mark,
  .skin-2-station-controls button {
    transition: none;
  }
}