#experience-controls { position:fixed; z-index:110; top:max(22px,env(safe-area-inset-top)); left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px; max-width:calc(100vw - 140px); padding:7px; border:1px solid #d5bd8740; border-radius:22px; background:#181a20d9; color:#eee5d5; box-shadow:0 6px 28px #0003; backdrop-filter:blur(14px); font:12px/1.4 Inter,sans-serif; }
#experience-controls[hidden], #experience-controls [hidden], #experience-tribute[hidden] { display:none !important; }
#experience-controls button, #experience-controls select { min-height:34px; border:1px solid #f1dfbb30; border-radius:15px; padding:6px 13px; background:#ffffff0a; color:inherit; font:inherit; cursor:pointer; }
#experience-controls select { max-width:250px; text-overflow:ellipsis; }
#experience-controls option { background:#23242a; color:#eee5d5; }
#experience-controls button:hover, #experience-controls select:hover { background:#f1dfbb20; }
#experience-controls :focus-visible, #experience-tribute:focus-visible { outline:2px solid #ead39f; outline-offset:3px; }
.experience-status { white-space:nowrap; padding:0 8px; font-size:11px; color:#c4b99f; }
.experience-status:empty { display:none; }
#experience-tribute { position:fixed; z-index:105; width:232px; padding:14px 16px; text-align:left; border:1px solid #b38c5755; border-radius:12px; background:#181510ee; color:#eee3cc; box-shadow:0 6px 24px #0005; cursor:pointer; }
#experience-tribute span { display:block; font:10px/1.5 Inter,sans-serif; letter-spacing:.06em; text-transform:uppercase; color:#ccb68b; }
#experience-tribute q { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin-top:8px; font:italic 16px/1.4 Georgia,serif; }
#experience-tribute small { display:block; margin-top:8px; font:11px Inter,sans-serif; }
body.autoplay-mode:not(.user-active) #experience-controls, body.autoplay-mode:not(.user-active) #experience-tribute { visibility:hidden; }
@media(max-width:600px) { #experience-controls { top:max(12px,env(safe-area-inset-top)); max-width:calc(100vw - 28px); gap:5px; } #experience-controls select { max-width:145px; } #experience-controls button,#experience-controls select { padding:6px 9px; font-size:11px; } .experience-status { font-size:10px; padding:0 2px; } #experience-tribute { width:210px; } #experience-tribute q { -webkit-line-clamp:2; font-size:14px; } }
@media (min-width:769px) and (max-width:1100px) { #experience-controls { left:86px; transform:none; max-width:calc(100vw - 480px); } #experience-controls select { max-width:140px; } #experience-controls button { font-size:11px; padding:6px 9px; } }
@media (max-width:768px) and (min-height:501px) { #experience-controls { top:82px; } }
@media (max-height:500px) { #experience-controls { top:20px; left:82px; transform:none; max-width:calc(100vw - 465px); } #experience-controls select { max-width:140px; } #experience-controls .experience-status { display:none; } #experience-controls button { font-size:10px; padding:6px 8px; } #experience-tribute q, #experience-tribute small { display:none; } #experience-tribute { padding:10px 12px; } }
@media (max-height:500px) and (max-width:768px) { #experience-controls { max-width:calc(100vw - 390px); top:16px; } #experience-controls select { max-width:120px; } }
@media (max-width:600px) { #experience-tribute q, #experience-tribute small { display:none; } #experience-tribute { padding:10px 12px; } }
/* Gesture instruction for the interactive paper. */
#paper-gesture-hint { position:fixed; bottom:86px; left:50%; transform:translateX(-50%); z-index:90; max-width:calc(100vw - 40px); width:max-content; box-sizing:border-box; padding:10px 19px; border:1px solid #e8cc8645; border-radius:30px; background:linear-gradient(120deg,#271a10d9,#49301acc); box-shadow:0 6px 28px #160c0633,inset 0 1px #ffedc215; color:#f1dfb6; backdrop-filter:blur(12px); font:italic 15px/1.35 'Cormorant Garamond',Georgia,serif; letter-spacing:.25px; text-align:center; pointer-events:none; transition:opacity .4s,border-color .4s; }
#paper-gesture-hint[hidden] { display:none; }
#paper-gesture-hint.is-held { border-color:#f5d48d99; color:#fff0c9; }
body.autoplay-mode #paper-gesture-hint { visibility:hidden; }
@media(max-width:600px) { #paper-gesture-hint { bottom:max(80px,calc(env(safe-area-inset-bottom) + 65px)); font-size:14px; padding:8px 14px; } }
/* Leave the menu reachable beside the fullscreen control on laptop screens. */
@media (max-width:1700px) {
    .bottom-controls .control-text, #btn-fullscreen-toggle .control-text { display:none; }
    .bottom-controls .control-svg { display:block; }
    .bottom-controls { gap:18px; padding:9px 18px; }
    #btn-fullscreen-toggle { padding:11px; border-radius:50%; }
}