:root{--sx-player-height:150px}
body.ss-song-exhibit #native-player .tn-player-controls{padding-inline-start:46px}
#ss-visualizer-eye{position:fixed;z-index:69;display:grid;place-items:center;width:44px;height:44px;padding:8px;border:0;border-radius:50%;color:#f3e9d5;background:transparent;cursor:pointer;touch-action:manipulation}
#ss-visualizer-eye[hidden]{display:none!important}
#ss-visualizer-eye:focus-visible{outline:2px solid #e5c99e;outline-offset:2px}
body.ss-song-exhibit .site-header,body.ss-song-exhibit .volume-nav{display:none}
body.ss-song-exhibit #listening-room{width:100%;max-width:none;margin:0;padding:0}
body.ss-song-exhibit #listening-room>.room-back{display:none}
body.ss-song-exhibit .song-copy{padding:26px 22px;max-width:660px}
.ss-exhibit[hidden]{display:none}
.ss-exhibit button,.ss-exhibit input,.sx-notes button{font:inherit;touch-action:manipulation}
.ss-exhibit button{color:inherit;cursor:pointer}
.sx-top a,.sx-top button{min-height:44px;display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:6px 0;white-space:nowrap}
.sx-top a>span{font:30px/1 Georgia,serif}
.sx-top .sx-about{font-size:12px;color:#b9c7c9}
.sx-visual[data-drawing=true]{touch-action:none;cursor:crosshair}
.sx-scene,.sx-world,.sx-targets,.sx-signal{position:absolute;inset:0;width:100%;height:100%;margin:0;max-width:none;pointer-events:none}
.sx-world{color:var(--sx-mineral);filter:brightness(calc(1 + var(--sx-signal)*.18));transition:filter 90ms linear}
.sx-scene{z-index:0}.sx-signal{z-index:1;mix-blend-mode:screen;opacity:.8}
.sx-targets{z-index:2}
.sx-targets button{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:58px;min-height:58px;max-width:105px;padding:9px 4px;color:#d7e2df;border:0;background:transparent;text-shadow:0 2px 12px #020a11;font-size:12px;line-height:1.35;pointer-events:auto}
.sx-touch-point{display:block;width:7px;height:7px;border:1px solid #e5d0a7a0;border-radius:50%;background:var(--sx-ink);box-shadow:0 0 10px #d9c69c40;transition:background .25s,box-shadow .25s}
.sx-targets button[aria-pressed=true] .sx-touch-point{background:var(--sx-light);box-shadow:0 0 calc(12px + var(--sx-signal)*30px) var(--sx-light)}
.sx-targets button[aria-pressed=true]{color:var(--sx-light)}
.sx-feeling{color:var(--sx-accent);font:400 17px/1.3 Georgia,serif}
.sx-stops{display:flex;gap:2px;justify-content:center;max-width:560px;margin:0 auto;overflow-x:auto;scrollbar-width:none}
.sx-stops button{flex:1;min-width:0;min-height:44px;border:0;border-bottom:1px solid #8ea1ac22;padding:8px 3px;background:transparent;color:#aebfc8;font-size:12px;line-height:1.25}
.sx-stops button[aria-pressed=true]{border-bottom-color:var(--sx-light);color:var(--sx-light)}
.sx-distance{display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:500px;margin:9px auto 0;text-align:left;color:#b7c9d1;font-size:12px;line-height:1.2}
.sx-distance>span:first-child{grid-column:1/-1}
.sx-distance input{grid-column:1/-1;width:100%;margin:0;min-height:30px;accent-color:var(--sx-light);background:transparent;cursor:ew-resize}
.sx-ends{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;color:#8fa9b7;font-size:11px}
.sx-sound{display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:500px;min-height:44px;margin:0 auto}
.sx-sound-status{font-size:12px;line-height:1.35;color:#a9bec7;text-align:left}
.ss-exhibit[data-signal=live][data-sound=active] .sx-sound-status:before{content:'';display:inline-block;width:4px;height:4px;margin-right:6px;border-radius:50%;background:#b7d8c6}
.sx-notes{max-width:660px;margin:0 auto;padding:34px 24px 5px;color:#b9c8cc;scroll-margin-top:12px;font:400 15px/1.75 Georgia,serif;outline:none}
.sx-notes h2{margin:0 0 12px;font:400 clamp(30px,7vw,40px)/1.16 Georgia,serif;color:#eadbc3;text-wrap:balance}
.sx-notes p{margin:12px 0}.sx-notes .eyebrow{font:500 9px/1.4 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;letter-spacing:.16em}
.sx-discovery{color:#e2cfaa}.sx-question{color:#e0d8c4;font-style:italic}
.sx-return-row{display:flex;justify-content:space-between;gap:16px;align-items:center;border-block:1px solid #a7b2b51c;padding:8px 0;margin:22px 0 6px}
.sx-return-row button{min-height:44px;max-width:52%;background:none;color:#dbc8a8;border:0;padding:0;text-align:left;font-size:12px;line-height:1.5}
.sx-return-row .sx-reset{color:#a6b9c2;text-align:right}
.sx-notes details{font:400 12px/1.7 -apple-system,BlinkMacSystemFont,system-ui,sans-serif}
.sx-notes summary{min-height:44px;cursor:pointer;padding:12px 0;color:#b2c1c6}
.ss-exhibit :focus-visible,.sx-notes :focus-visible{outline:2px solid #e3cba4;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.sx-signal{display:none}.sx-world{filter:none;transition:none}.sx-targets button .sx-touch-point{transition:none;box-shadow:none}.ss-exhibit *{animation:none!important;scroll-behavior:auto!important}}

.ss-exhibit {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto minmax(175px, 1fr) auto;
  width: 100%;
  max-width: 1100px;
  min-height: max(0px, calc(100svh - var(--sx-player-height)));
  margin: 0 auto;
  border: 0;
  border-radius: 0;
  background: radial-gradient(ellipse at 50% 28%, var(--sx-atmosphere), transparent 76%), var(--sx-ink);
  color: #eee5d6;
  --sx-signal: 0;
  touch-action: pan-y;
}
.sx-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  font-size: 12px;
  color: #c7d1cd;
}
.sx-visual {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.sx-bottom {
  padding: 0 max(16px, env(safe-area-inset-right)) 4px max(16px, env(safe-area-inset-left));
  text-align: center;
  background: linear-gradient(transparent, var(--sx-ink));
}
.sx-sound-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 12px;
}
.sx-sound-actions button {
  min-height: 44px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: #e1d2b6;
  font-size: 12px;
  text-decoration: underline;
  text-decoration-color: #b9c7c955;
  text-underline-offset: 5px;
}
.sx-reflection {
  margin-top: 24px;
  padding-left: 14px;
  border-left: 1px solid #a7b2b55c;
}
.sx-reflection .sx-feeling { color: #e0d8c4; }
.sx-reflection .sx-words, .sx-reflection .sx-question { margin: 3px 0; }

@media (max-width: 360px) {
  .sx-targets button { max-width: 84px; }
  .sx-top a, .sx-top .sx-about { font-size: 12px; }
}
@media (min-width: 720px) {
  .sx-visual { margin-inline: 14%; }
  .sx-top { padding-inline: 30px; }
  .sx-stops button, .sx-targets button { font-size: 12px; }
}
@media (max-height: 600px) and (min-width: 620px) {
  .ss-exhibit {
    grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
    grid-template-rows: auto minmax(180px, 1fr);
  }
  .sx-top { grid-column: 1 / -1; }
  .sx-visual { margin: 0; }
  .sx-bottom { align-self: center; background: none; }
}

.sx-architecture { opacity: .94; }
.sx-material { opacity: .8; }
.sx-targets button { transition: color 180ms ease; }
.sx-targets button span:last-child { text-wrap: balance; }
.sx-targets button:hover .sx-touch-point,
.sx-targets button:focus-visible .sx-touch-point { background: var(--sx-light); }
.sx-stops button { transition: color 180ms ease, border-color 180ms ease; }
.sx-stops button:hover { color: var(--sx-light); }
.sx-distance input { min-height: 36px; }
.sx-sound-actions button:hover { text-decoration-color: currentColor; }
.sx-notes { padding-bottom: 22px; }
.sx-notes .sx-discovery { margin: 12px 0 20px; }
.sx-notes .sx-reflection { padding-block: 5px; }
.sx-reflection .sx-feeling { font-size: 22px; }
.sx-reflection .sx-words { margin: 8px 0; }
.sx-reflection .sx-question { font-size: 14px; }
@media (prefers-reduced-motion: reduce) {
  .ss-exhibit *, .sx-notes * { transition: none !important; }
}

.song-row-title .sx-exhibit-label {
  display: block;
  margin-top: 5px;
  color: #a8b5bb;
  font: 400 12px/1.45 Georgia, serif;
  letter-spacing: .01em;
}