/* Bean's street controls, kept at the same scale and opacity in the gallery. */
:root{--rail:283px;--bar:28px}
.gallery-street-controls{position:fixed;inset:0;z-index:9;pointer-events:none;display:none;font:9px/1.35 Arial,sans-serif;letter-spacing:.04em;color:#fff}
body[data-mode=explore] .gallery-street-controls{display:block}
.gallery-street-controls button{pointer-events:auto;min-height:30px;padding:0;font:inherit;letter-spacing:inherit;touch-action:none}
.seoul-stick,.seoul-jump{z-index:4;opacity:.62;transition:opacity .18s ease;background:#060a124d!important;touch-action:none;user-select:none;-webkit-user-select:none}
.seoul-stick:active,.seoul-jump:active,.seoul-jump.is-pressed{opacity:.62}
.seoul-stick:focus-visible,.seoul-jump:focus-visible{opacity:.72}
.seoul-stick{position:absolute;left:max(calc(10px + var(--rail)*.5 - 32px),calc(env(safe-area-inset-left) + 12px));bottom:102px;width:64px;height:64px;border:1px solid #ffffffb3!important;border-radius:50%}
.seoul-stick:before{content:'';position:absolute;inset:12px;border:1px dashed #ffffff12;border-radius:50%}
.seoul-stick span{position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px;border-radius:50%;background:#d9dfe9cc;border:1px solid #ffffffcc;pointer-events:none;transform:translate(var(--sx,0px),var(--sy,0px))}
.seoul-stick:after{content:'MOVE';position:absolute;top:calc(100% + 8px);left:0;right:0;text-align:center;color:#b2bac6;font-size:7px;letter-spacing:.15em}
.seoul-jump{position:absolute;right:max(41px,calc(env(safe-area-inset-right) + 12px));bottom:140px;border:1px solid #ffffffb3!important;border-radius:50%;width:44px;height:44px;display:grid;place-items:center}
.seoul-jump svg{width:18px;height:18px;stroke:#f1f5ff;fill:none;stroke-width:1.2}
.seoul-jump:after{content:'JUMP';position:absolute;top:calc(100% + 8px);color:#b2bac6;font-size:7px;letter-spacing:.15em}
body:has(dialog[open]) .gallery-street-controls{visibility:hidden}
body[data-embedded=true][data-suspended=true] .gallery-street-controls button{pointer-events:none}

/* The original parent Audio player supplies every waveform and playback action. */
.street-music-host{display:none;flex:0 0 auto;align-items:center;justify-content:center}
html[data-street-music=ready] .street-music-host{display:flex}
.street-music-host .sound-control{display:flex;align-items:center;justify-content:center;gap:9px;width:86px;height:44px;padding:0;background:transparent;color:inherit;border:0;cursor:pointer;opacity:.7;touch-action:manipulation}
.street-music-host .sound-control svg{display:block;width:18px;height:18px}
.street-music-host .sound-control:hover,.street-music-host .sound-control:focus-visible{opacity:1}
.street-music-host .sound-wave{width:34px;height:14px;display:block;pointer-events:none}
.street-music-host .sound-icon{display:block;width:18px;height:18px}
.street-music-floating{position:fixed;right:max(12px,calc(env(safe-area-inset-right) + 12px));bottom:calc(var(--bar) + 10px);z-index:12;color:#fff;mix-blend-mode:difference}
.street-music-panel{justify-content:flex-end;margin-top:16px}
html[data-street-music=ready] #sound-btn,html[data-street-music=ready] #collection-sound-btn,html[data-street-music=ready] .explore-toolbar .toolbar-divider{display:none}
html[data-street-music=ready] .artwork-topbar>.eyebrow{max-width:calc(100% - 150px)}
.artwork-topbar .street-music-host{margin-left:auto}
.explore-toolbar{left:50%;right:auto;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);background:transparent;backdrop-filter:none}
body[data-controls=joystick] .movement-hint{display:none}
body[data-controls=joystick] .nearest-art{left:50%;right:auto;transform:translateX(-50%);bottom:calc(var(--bar) + 125px);max-width:calc(100vw - 40px);white-space:normal}
.tour-controls{bottom:calc(var(--bar) + 125px)}

@media(max-width:850px){:root{--rail:205px}}
@media(max-width:700px){
  :root{--bar:44px}
  .seoul-stick{left:max(calc(10px + var(--rail)*.5 - 28px),calc(env(safe-area-inset-left) + 12px));bottom:calc(var(--bar) + 33px + env(safe-area-inset-bottom,0px));width:56px;height:56px}
  .seoul-stick span{width:20px;height:20px;margin:-10px}
  .seoul-stick:after{top:calc(100% + 6px);font-size:6px}
  .seoul-jump{right:max(21px,calc(env(safe-area-inset-right) + 12px));bottom:calc(var(--bar) + 47px + env(safe-area-inset-bottom,0px));width:44px;height:44px}
  .seoul-jump:after{font-size:6px;top:calc(100% + 6px)}
  .street-music-host .sound-control{width:78px;gap:6px}
  .street-music-host .sound-wave{width:30px}
  .street-music-floating{bottom:max(12px,calc(env(safe-area-inset-bottom) + 8px))}
  .explore-toolbar{left:max(12px,calc(env(safe-area-inset-left) + 12px));right:auto;bottom:max(8px,calc(env(safe-area-inset-bottom) + 8px));transform:none;padding:0;gap:0}
  .explore-toolbar .tool-button{width:44px;height:44px}
}
@media(max-width:600px){:root{--rail:136px}}
@media(min-width:601px) and (max-height:600px){
  :root{--rail:clamp(150px,24vw,240px);--bar:28px}
  .seoul-stick{width:48px;height:48px;left:max(calc(10px + var(--rail)*.5 - 24px),calc(env(safe-area-inset-left) + 12px));bottom:calc(var(--bar) + 67px)}
  .seoul-stick span{width:18px;height:18px;margin:-9px}
  .seoul-jump{right:max(22px,calc(env(safe-area-inset-right) + 12px));bottom:calc(var(--bar) + 67px)}
}