#experience.has-interface{height:100dvh;min-height:0;overflow:hidden}
/* Hide the whole interface without resizing, pausing or covering the artwork. */
.site-chrome{transition:opacity .35s ease,translate .45s cubic-bezier(.2,.8,.2,1),visibility 0s;}
.art-only .site-chrome{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:opacity .35s ease,translate .45s cubic-bezier(.2,.8,.2,1),visibility 0s .45s;}
.art-only header{translate:0 -48px}.art-only :is(footer,.social-nav,.social-links,.interaction-cue){translate:0 48px}
.piece-arrow{transition:translate .45s cubic-bezier(.2,.8,.2,1)}
.art-only .piece-arrow{opacity:.45;translate:0 0}.art-only .piece-arrow:is(:hover,:focus-visible,:active){opacity:1}
#experience .interface-toggle{position:absolute;z-index:10;left:calc(100% - max(44px,env(safe-area-inset-right)) - 22px);right:auto;bottom:160px;width:44px;height:44px;min-width:44px;min-height:44px;display:grid;place-items:center;padding:0;transform:translateX(-50%);border:1px solid #ffffff30;border-radius:50%;background:#080c11a6;color:#eee8df;touch-action:manipulation;transition:left .45s cubic-bezier(.2,.8,.2,1),bottom .45s cubic-bezier(.2,.8,.2,1),opacity .2s;}
#experience.art-only .interface-toggle{left:50%;bottom:max(12px,calc(env(safe-area-inset-bottom) + 10px));opacity:.65;background:#080c1166;}
#experience .interface-toggle:is(:hover,:focus-visible,:active){opacity:1;background:#080c11b8}
.interface-toggle .eye-slash{display:none}.art-only .interface-toggle .eye-slash{display:block}
@media(max-width:640px){#experience .interface-toggle{left:calc(100% - max(6px,env(safe-area-inset-right)) - 22px);bottom:150px}}
@media(prefers-reduced-motion:reduce){.site-chrome,.art-only .site-chrome,.piece-arrow,#experience .interface-toggle{transition:none}}
/* Kept inside the existing chrome so the eye hides this control as well. */
#auto-view{display:block;margin:6px auto 0;padding:5px 12px;min-height:44px;border:1px solid #ffffff30;border-radius:20px;background:#1115;color:inherit;font:inherit;font-size:11px;letter-spacing:.04em;cursor:pointer;white-space:nowrap}
#auto-view[aria-pressed="true"]{border-color:#ffffff65}
#auto-view:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* Footer height is content-dependent; never let the gesture cue overlap it. */
#experience.has-interface .interaction-cue{bottom:var(--cue-bottom,210px);max-width:calc(100% - 100px);min-height:44px;font-size:clamp(10px,2.5vw,13px);padding:6px 14px;white-space:normal}
#experience.has-interface .interaction-cue svg{width:52px;flex-shrink:0}
@media(max-height:460px){
 #experience.has-interface header{top:8px}
 #experience.has-interface #playback-controls{bottom:max(48px,calc(env(safe-area-inset-bottom) + 44px))}
 #experience.has-interface .transport{padding-top:3px;padding-bottom:3px}
 #experience.has-interface #auto-view{margin-top:3px;min-height:44px;height:44px;padding:3px 10px}
 #experience.has-interface .social-nav{bottom:0}
 #experience.has-interface .interaction-cue{padding-top:2px;padding-bottom:2px}
}
#experience.has-interface:not(.art-only) .interface-toggle{bottom:var(--cue-bottom,210px)}
#experience.has-interface .interaction-cue{max-width:calc(100% - 120px)}
@media(max-height:460px){#experience.has-interface:not(.art-only) .interface-toggle{left:max(30px,calc(env(safe-area-inset-left) + 30px));bottom:0}}

#experience.is-layout-changing .interface-toggle{transition:none}
@media(max-height:460px){#experience.has-interface .piece-arrow{top:40%}}