:root { --void: #075e5c; --night: #07130d; --cream: #eadfc9; --walnut: #73472f; --velvet: #174832; --brass: #b08a50; }
      * { box-sizing: border-box; }
      html, body { margin: 0; min-height: 100%; background: var(--void); }
      body { overflow: hidden; }
      .station-shell { position: relative; isolation: isolate; display: grid; min-height: 100vh; min-height: 100lvh; place-items: center; overflow: hidden; background-color: var(--void); background-image: url("/wigwam-background-desktop-v1.webp"); background-position: center; background-repeat: no-repeat; background-size: cover; }
      @media (orientation: portrait) {
        .station-shell { background-image: url("/wigwam-background-mobile-v1.webp"); }
      }
      /* Keep the artwork full-height; center controls in the visible mobile browser area. */
      @media (display-mode: browser) and (hover: none) and (pointer: coarse) {
        .station-shell { grid-template-rows: 100svh; grid-template-rows: 100dvh; align-content: start; }
      }
      .play-button { position: relative; z-index: 1; display: grid; width: clamp(190px, 30vw, 300px); aspect-ratio: 1; overflow: visible; padding: 0; place-items: center; border: 0; outline: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
      .play-glyph { position: relative; z-index: 2; display: block; width: 77%; height: 77%; overflow: visible; color: #f1eee5; filter: drop-shadow(0 4px 7px rgb(0 0 0 / 62%)); transform: translateX(5%) scale(.92); transition: opacity 160ms ease, filter 320ms ease, transform 320ms cubic-bezier(.22, 1, .36, 1); user-select: none; pointer-events: none; }
      .play-glyph path { fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
      .play-glyph .sketch-lines { transform-box: fill-box; transform-origin: center; animation: sketch-wobble 1.18s steps(4, end) infinite; }
      .playing-hand { position: absolute; z-index: 2; display: block; width: clamp(270px, 42vw, 420px); height: auto; opacity: 0; visibility: hidden; transform: translateY(-7px) scale(.965); user-select: none; pointer-events: none; }
      .play-button:hover .play-glyph, .play-button:focus-visible .play-glyph { filter: drop-shadow(0 5px 8px rgb(0 0 0 / 62%)) drop-shadow(0 0 10px rgb(241 238 229 / 22%)); transform: translateX(5%) scale(1); }
      .play-button:focus-visible { filter: drop-shadow(0 0 12px rgb(176 255 219 / 32%)); }
      .play-button:active .play-glyph { transform: translateX(5%) scale(.84); }
      .play-button[data-state="connecting"] .play-glyph { animation: press-into-screen 430ms cubic-bezier(.5, 0, .8, .25) forwards; }
      .play-button[data-state="playing"] .play-glyph { opacity: 0; filter: blur(3px) drop-shadow(0 1px 2px rgb(0 0 0 / 30%)); transform: translateX(5%) scale(.24); }
      .play-button[data-state="playing"] .playing-hand { visibility: visible; animation: hand-arrives 460ms cubic-bezier(.2, .72, .3, 1) 90ms both; }
      .play-button[data-state="retrying"] .play-glyph { animation: signal 1.25s ease-in-out infinite; }
      .play-button[data-state="error"] .play-glyph { opacity: .38; }
      @keyframes signal { 50% { opacity: .46; } }
      @keyframes press-into-screen {
        0% { opacity: 1; filter: drop-shadow(0 4px 7px rgb(0 0 0 / 62%)); transform: translateX(5%) scale(.92); }
        38% { opacity: 1; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 46%)); transform: translateX(5%) scale(.79); }
        100% { opacity: 0; filter: blur(3px) drop-shadow(0 0 0 transparent); transform: translateX(5%) scale(.24); }
      }
      @keyframes hand-arrives {
        0% { opacity: 0; transform: translateY(-7px) scale(.965); }
        100% { opacity: 1; transform: translateY(0) scale(1); }
      }
      @keyframes sketch-wobble {
        0% { transform: translate(0, 0) rotate(-.25deg); }
        25% { transform: translate(.7px, -.45px) rotate(.18deg); }
        50% { transform: translate(-.45px, .55px) rotate(-.08deg); }
        75% { transform: translate(.35px, .3px) rotate(.3deg); }
        100% { transform: translate(0, 0) rotate(-.25deg); }
      }
      @media (prefers-reduced-motion: reduce) {
        .play-glyph, .play-glyph .sketch-lines, .playing-hand { animation: none !important; transition: none; }
        .play-button[data-state="playing"] .playing-hand { opacity: 1; transform: none; }
      }