*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#040718;color:#f4f7ff;font-family:system-ui,-apple-system,sans-serif}#stage{position:fixed;inset:0;overflow:hidden}video,canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}video{transform:scaleX(-1)}canvas{pointer-events:none}.back{position:absolute;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));z-index:3;padding:10px 12px;border-radius:12px;background:#061025bb;color:white;text-decoration:none;font-size:.85rem}.card{position:absolute;z-index:4;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(92%,580px);max-height:40dvh;overflow:auto;padding:20px;border:1px solid #55d7ff88;border-radius:20px;background:#061025e8;text-align:center;box-shadow:0 12px 44px #0008}.card h1{font-size:clamp(1.5rem,4vw,2rem);line-height:1.3;margin:0 0 12px}.card p{font-size:clamp(1.12rem,3.8vw,1.4rem);line-height:1.55;margin:10px 0}#trialPrivacy,#trialStatus{font-size:.85rem;color:#c3d7ee}button,.primary{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 24px;margin-top:10px;font:700 1.05rem system-ui;border:1px solid #55d7ff;border-radius:12px;background:#55d7ff;color:#071025;text-decoration:none}button:disabled{opacity:.5}#trialCountdown{position:absolute;inset:0;display:grid;place-items:center;z-index:5;font-size:clamp(5rem,25vw,11rem);font-weight:900;text-shadow:0 4px 28px #000;color:#fff}#trialHud{position:absolute;top:max(66px,calc(env(safe-area-inset-top) + 54px));left:14px;right:14px;display:flex;justify-content:space-between;z-index:3;font-weight:750;font-size:1rem;text-shadow:0 2px 8px #000}#trialWarning{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));left:5%;right:5%;text-align:center;color:#fff;font-size:.85rem;text-shadow:0 2px 8px #000}#trialResult{bottom:50%;transform:translate(-50%,50%);max-height:80dvh}#stage [hidden]{display:none!important}.language-toggle{display:none!important}:focus-visible{outline:3px solid #fff;outline-offset:3px}@media(max-height:500px){.card{max-height:64dvh;left:auto;right:12px;transform:none;width:46%;bottom:12px}.card h1{font-size:1.3rem}.card p{font-size:1rem}#trialResult{bottom:50%;transform:translateY(50%);max-height:85dvh}}
/* Song choice belongs to the first guidance page. */
#trialSongChoice{display:grid;gap:8px;text-align:left;font-weight:700}#trialSongSelect{min-height:48px;width:100%;font:inherit;padding:8px;color:#fff;border:1px solid #55d7ff88;border-radius:10px;background:#071025}
#trialCountdown.guidance{font-size:clamp(1.8rem,6vw,3rem);line-height:1.5;text-align:center;padding:20px 6%;background:#04071855;white-space:pre-line}
/* Keep the song selector and action visible; only long guidance text scrolls. */
#trialGuide{display:flex;flex-direction:column;max-height:calc(100dvh - 88px);overflow:hidden;padding:0}.trial-guide-content{padding:20px 20px 8px;min-height:0;overflow:auto;overscroll-behavior:contain}.trial-guide-actions{flex-shrink:0;padding:12px 20px 18px;background:#061025;border-top:1px solid #55d7ff55;box-shadow:0 -6px 20px #0004}.trial-guide-actions button{width:100%}.trial-guide-actions #trialSongChoice{margin-bottom:8px}@media(max-width:760px) and (orientation:portrait){#trialVideo{object-fit:cover}#trialGuide{width:calc(100% - 24px);bottom:max(12px,env(safe-area-inset-bottom));max-height:calc(100dvh - max(80px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)))}.trial-guide-content{padding:18px 18px 8px}.trial-guide-actions{padding:12px 18px 16px}.trial-guide-actions button{min-height:52px}}
/* From the arrow explanation onward, leave the demonstration unobstructed. */
#trialGuide[data-compact=true]{max-height:32dvh}#trialGuide[data-compact=true] h1{font-size:1.25rem;margin-bottom:6px}#trialGuide[data-compact=true] .trial-guide-content{padding:12px 16px 4px}#trialGuide[data-compact=true] .trial-guide-content p{font-size:1rem;line-height:1.4;margin:6px 0}#trialGuide[data-compact=true] #trialPrivacy{display:none}#trialGuide[data-compact=true] #trialStatus{font-size:.78rem}#trialGuide[data-compact=true] .trial-guide-actions{padding:6px 16px 10px}#trialGuide[data-compact=true] .trial-guide-actions button{min-height:44px;margin-top:0}@media(max-height:500px){#trialGuide[data-compact=true]{width:35%;max-height:70dvh}}