.mezzo-tutorial{position:absolute;z-index:20;left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));display:flex;justify-content:center;pointer-events:none;color:#f2efe4;font-family:var(--ui,"Fredoka","Trebuchet MS",sans-serif)}
.mezzo-tutorial[hidden]{display:none!important}
.tutorial-card{pointer-events:auto;width:min(490px,100%);max-height:45dvh;display:flex;flex-direction:column;overflow:hidden;padding:10px 14px 12px;border:2px solid #a4ba78;border-radius:16px;background:rgba(31,47,36,.97);box-shadow:0 5px 24px #15251b55;overscroll-behavior:contain}
.tutorial-card>:not(.tutorial-instruction){flex-shrink:0}
.tutorial-instruction{min-height:0;overflow:auto;overscroll-behavior:contain}
.tutorial-topline{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px}
.tutorial-eyebrow{font-size:12px;font-weight:600;letter-spacing:.04em;color:#eed079}
.tutorial-skip{flex-shrink:0;min-height:44px;padding:6px 8px;border:0;border-radius:8px;background:transparent;color:#e4eadf;text-decoration:underline;text-underline-offset:3px;font-size:12px}
.tutorial-progress-label{font-size:11px;color:#bbcbb7;margin-top:1px}
.tutorial-title{margin:3px 0 5px;font:600 clamp(19px,4.7vw,24px)/1.1 var(--ui,"Fredoka",sans-serif);color:#fff}
.tutorial-body{margin:0;font-size:clamp(13px,3.4vw,15px);line-height:1.4;max-width:57ch;color:#f2efe4}
.tutorial-progress{display:flex;gap:4px;margin-top:10px}
.tutorial-progress span{height:4px;flex:1;border-radius:4px;background:#566958}
.tutorial-progress .is-current{background:#e9b949}
.tutorial-progress .is-done{background:#a4d481}
.tutorial-safe{margin:7px 0 8px;font-size:11px;line-height:1.3;color:#becdb8}
.tutorial-footer{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.tutorial-controls{display:flex;gap:8px}
.tutorial-controls button{width:48px;min-height:44px;border:2px solid #829778;border-radius:10px;color:#fff;background:#3c5240;font:600 22px/1 var(--ui,"Fredoka",sans-serif);touch-action:manipulation}
.tutorial-controls button.is-cued{color:#302612;background:#e9b949;border-color:#ffdd82}
.tutorial-controls button:disabled{opacity:.4;cursor:default}
.tutorial-next{min-height:44px;flex:1;padding:8px 12px;border:2px solid #ffdd82;border-radius:10px;background:#e9b949;color:#302612;font-size:14px;font-weight:600;touch-action:manipulation}
.tutorial-next[hidden]{display:none!important}
.mezzo-tutorial button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.mezzo-tutorial[data-outcome="success"] .tutorial-card{border-color:#b2d98c}
.mezzo-tutorial[data-outcome="retry"] .tutorial-card{border-color:#e9b949}
.tutorial-active #practice,.tutorial-active #songCaptions{visibility:hidden}
@media(min-width:900px) and (min-height:601px){.mezzo-tutorial{right:16px;left:auto;width:340px;bottom:24px}.tutorial-card{max-height:70dvh}.tutorial-title{font-size:23px}}
@media(max-height:600px) and (min-width:600px){.mezzo-tutorial{left:auto;right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));width:min(34vw,290px)}.tutorial-card{padding:6px 10px 9px;max-height:80dvh;border-radius:12px}.tutorial-eyebrow{font-size:10px}.tutorial-skip{font-size:11px;padding:3px}.tutorial-title{font-size:18px}.tutorial-body{font-size:12px;line-height:1.3}.tutorial-controls button{width:44px;min-height:44px}.tutorial-footer{gap:7px}.tutorial-progress{margin-top:7px}.tutorial-safe{font-size:10px;margin:5px 0 7px}}
@media(max-height:600px) and (max-width:599px){.tutorial-card{max-height:44dvh}.tutorial-title{font-size:18px}.tutorial-body{font-size:12px}.tutorial-safe{display:none}.tutorial-progress{margin-bottom:8px}.tutorial-topline{min-height:30px}}