.pub-app #hop-tutorial{z-index:30;color:var(--deep);overscroll-behavior:none;background:#100f1b;position:fixed;inset:0}.hop-school{box-sizing:border-box;width:min(100%,540px);height:100%;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);background:var(--paper);flex-direction:column;margin:auto;display:flex;position:relative}.hop-header{justify-content:space-between;align-items:center;min-height:46px;padding:2px 20px;display:flex}.hop-brand{font:15px/1.4 var(--arcade);color:var(--gold)}.hop-header-actions{align-items:center;gap:6px;display:flex}.pub-app .hop-skip{min-height:44px;color:var(--muted);text-underline-offset:3px;white-space:nowrap;background:0 0;border:0;padding:6px 4px;font:14px/1.2 system-ui,sans-serif;text-decoration:underline}.pub-app .hop-leave{color:var(--deep);background:0 0;border:0;min-width:44px;min-height:44px;font-size:25px}.hop-progress{gap:5px;margin:0 20px;display:flex}.hop-progress span{background:var(--line);flex:1;height:4px}.hop-progress .current{background:var(--gold)}.hop-copy{box-sizing:border-box;flex-shrink:0;min-height:122px;padding:16px 22px 8px}.hop-copy small{letter-spacing:.7px;color:var(--mint);font:11px/1.4 ui-monospace,monospace}.hop-copy h1{font:clamp(22px, 5.7vw, 29px)/1.25 var(--arcade);letter-spacing:0;min-height:2.5em;margin:6px 0}.hop-field{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;flex-direction:column;flex:1;min-height:0;display:flex}.pub-app .hop-field:focus{outline:none}.hop-cue-slot{flex-shrink:0;position:relative}.pub-app .hop-cue-slot .hop-next{width:auto;min-height:56px;font-size:18px;animation:.26s cubic-bezier(.2,1.4,.4,1) both hop-next-in,1.4s ease-in-out .6s infinite hop-next-pulse;position:absolute;top:50%;left:46px;right:46px;transform:translateY(-50%);box-shadow:0 5px #926626,0 0 0 3px #191827}.pub-app .hop-cue-slot .hop-next[hidden]{display:none}@keyframes hop-next-in{0%{opacity:0;transform:translateY(-50%)scale(.8)}}@keyframes hop-next-pulse{50%{box-shadow:0 5px #926626,0 0 0 3px #191827,0 0 0 9px #ffd44766}}@media (prefers-reduced-motion:reduce){.pub-app .hop-cue-slot .hop-next{animation:none}}.hop-cue{min-height:72.8px;color:var(--gold);pointer-events:none;flex-shrink:0;justify-content:center;align-items:center;gap:12px;padding:4px 18px 8px;font:19.6px/1.4 system-ui,sans-serif;display:flex}.hop-gesture{flex:0 0 140px;height:67.2px;position:relative}.hop-cue[data-gesture=hold] .hop-gesture{flex-basis:44px}.hop-cue[data-gesture=flag] .hop-gesture{flex-basis:60px}.hop-cue-copy{min-width:0}.hop-drag-arrows,.hop-flag-icon{width:100%;height:100%}.hop-cue-finger{width:61.6px;height:61.6px;position:absolute;top:2.8px;left:40.6px}.hop-cue[data-gesture=hold] .hop-cue-finger{left:-7px}.hop-cue-finger svg{width:100%;height:100%}.hop-cue[data-gesture=drag] .hop-cue-finger{animation:2.4s ease-in-out infinite hop-drag-sideways}.hop-hold-contact{box-sizing:border-box;border:2.8px solid;border-radius:50%;width:25.2px;height:25.2px;animation:2.4s ease-in-out infinite hop-hold-contact;position:absolute;top:2.8px;left:7px}.hop-cue:not([data-gesture=drag]) .hop-drag-arrows,.hop-cue:not([data-gesture=hold]) .hop-hold-contact,.hop-cue:not([data-gesture=flag]) .hop-flag-icon,.hop-cue[data-gesture=flag] .hop-cue-finger{display:none}@keyframes hop-hold-contact{0%,to{opacity:.3;transform:scale(.9)}50%{opacity:.8;transform:scale(1.15)}}@keyframes hop-drag-sideways{0%,15%,to{transform:translate(-16.8px)}45%,65%{transform:translate(16.8px)}}.hop-scene{flex:1;min-height:0;max-height:380px;margin:auto 0;position:relative;overflow:hidden}.hop-course .hop-scene{max-height:none}.hop-scene canvas{width:100%;height:100%;image-rendering:pixelated;display:block}.hop-demo-hand{color:var(--gold);pointer-events:none;transition:transform .5s;position:absolute}.hop-demo-hand svg{filter:drop-shadow(2px 2px #191827);width:44px;height:44px}.hop-meter{z-index:2;top:calc(env(safe-area-inset-top) + clamp(112px, 14vh, 144px));right:max(10px, env(safe-area-inset-right));color:#fff;pointer-events:none;width:18px;position:absolute}.hop-meter-arrow{filter:drop-shadow(0 2px #100c19);width:16px;height:10px;margin:0 auto 5px;display:block}.hop-meter-track{background:#151222ed;border:2px solid;height:clamp(156px,24vh,222px);padding:3px;box-shadow:0 0 0 2px #100c19}.hop-meter-fill{transform-origin:bottom;background:#fff;width:100%;height:100%;transform:scaleY(0);box-shadow:inset 0 2px #fff3d8}.hop-meter.full{color:var(--gold)}.hop-meter.full .hop-meter-fill{background:var(--gold)}.hop-meter-tag{background:var(--gold);color:#191827;letter-spacing:.08em;opacity:0;padding:4px 6px;font:700 11px/1 ui-monospace,monospace;transition:opacity .2s,transform .2s;position:absolute;top:calc(100% + 10px);right:-4px;transform:translateY(6px);box-shadow:2px 2px #100c19}.hop-meter-tag:after{content:"";border:5px solid #0000;border-bottom-color:var(--gold);position:absolute;bottom:100%;right:8px}.hop-meter.attention .hop-meter-tag{opacity:1;transform:translateY(0)}.hop-meter.attention .hop-meter-track{border-color:var(--gold);animation:.9s ease-in-out infinite hop-meter-pulse}@keyframes hop-meter-pulse{0%,to{box-shadow:0 0 0 2px #100c19,0 0 0 4px #ffd44700}50%{box-shadow:0 0 0 2px #100c19,0 0 0 6px #ffd447aa}}.hop-footer{box-sizing:border-box;flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding:12px 22px 32px;display:flex}.hop-note{color:var(--muted);font:13px/1.4 system-ui,sans-serif}.pub-app .hop-show{min-height:48px;color:var(--gold);text-underline-offset:4px;white-space:nowrap;background:0 0;border:0;padding:6px 2px;font-size:16px;text-decoration:underline}.pub-app .hop-next{background:var(--gold);color:#191827;width:100%;min-height:48px;font:16px/1.3 var(--arcade);border:0;padding:10px 14px;box-shadow:0 4px #926626}@media (height<=650px){.hop-header{min-height:38px}.hop-copy{min-height:108px;padding:9px 18px 6px}.hop-copy h1{font-size:22px}.hop-footer{min-height:50px;padding-block:8px 24px}}@media (height<=430px) and (width>=620px){.hop-school{grid-template-rows:44px 4px 1fr auto;grid-template-columns:40% 60%;max-width:850px;display:grid}.hop-header,.hop-progress,.hop-copy,.hop-footer{grid-column:1}.hop-field{grid-area:1/2/5;padding:8px}}@media (prefers-reduced-motion:reduce){.hop-cue[data-gesture=drag] .hop-cue-finger,.hop-hold-contact{animation:none}.hop-demo-hand{transition:none}.hop-meter.attention .hop-meter-track{animation:none;box-shadow:0 0 0 2px #100c19,0 0 0 5px #ffd447aa}}