.practice-guide{--guide-size:128px;position:fixed;z-index:30;right:clamp(.65rem,1.6vw,1.35rem);bottom:clamp(.65rem,1.6vw,1.35rem);width:var(--guide-size);height:calc(var(--guide-size)*1.34);pointer-events:none;filter:drop-shadow(0 16px 20px rgb(16 42 53/18%));transition:opacity 180ms ease}
.practice-guide[hidden]{display:none}
.practice-guide-character{position:absolute;inset:0;transform-origin:50% 100%;pointer-events:auto}
.practice-guide-sprite{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.practice-guide-open{position:absolute;inset:7% 4% 1%;border:0;background:transparent;cursor:pointer}
.practice-guide-open:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:45% 45% 38% 38%}
.practice-guide-bubble{position:absolute;right:calc(100% - 1rem);bottom:68%;width:min(320px,calc(100vw - 2rem));padding:1rem 2.7rem 1rem 1rem;border:1px solid rgb(16 42 53/32%);border-radius:14px;background:#fffdf9;color:var(--ink);box-shadow:0 18px 42px rgb(16 42 53/17%);pointer-events:auto;filter:none}
.practice-guide-bubble::after{position:absolute;right:-10px;bottom:20px;width:18px;height:18px;border-top:1px solid rgb(16 42 53/32%);border-right:1px solid rgb(16 42 53/32%);background:#fffdf9;content:'';transform:rotate(45deg)}
.practice-guide.is-bubble-right .practice-guide-bubble{right:auto;left:calc(100% - 1rem)}
.practice-guide.is-bubble-right .practice-guide-bubble::after{right:auto;left:-10px;border-right:0;border-bottom:1px solid rgb(16 42 53/32%);border-left:1px solid rgb(16 42 53/32%);transform:rotate(45deg)}
.practice-guide-bubble[hidden]{display:none}
.practice-guide-bubble>span{display:block;margin-bottom:.35rem;color:var(--cobalt-dark);font-size:.66rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.practice-guide-bubble>strong{display:block;font-family:var(--body);font-size:1rem;font-weight:700;line-height:1.38;text-wrap:pretty}
.practice-guide-close{position:absolute;top:.55rem;right:.55rem;display:grid;width:36px;height:36px;place-items:center;border:1px solid var(--line-dark);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}
.practice-guide-close svg,.practice-guide-motion svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}
.practice-guide-close:hover,.practice-guide-motion:hover{background:var(--mint)}
.practice-guide-close:focus-visible,.practice-guide-motion:focus-visible,.practice-guide-actions a:focus-visible,.practice-guide-actions button:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
.practice-guide-actions{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.8rem}
.practice-guide-actions a,.practice-guide-actions button{display:inline-flex;min-height:42px;align-items:center;justify-content:center;padding:.48rem .65rem;border:1px solid var(--navy);border-radius:8px;font:700 .69rem var(--body);text-decoration:none;cursor:pointer}
.practice-guide-actions a{background:var(--navy);color:white}
.practice-guide-actions button{background:transparent;color:var(--navy)}
.practice-guide-actions a:hover{background:var(--cobalt-dark);color:white}
.practice-guide-actions button:hover{background:var(--mint)}
.practice-guide-motion{position:absolute;right:0;bottom:0;display:grid;width:38px;height:38px;place-items:center;border:1px solid var(--line-dark);border-radius:50%;background:rgb(255 253 249/96%);color:var(--ink);box-shadow:0 6px 16px rgb(16 42 53/14%);cursor:pointer;pointer-events:auto}
.practice-guide-motion .play-icon{display:none;fill:currentColor;stroke:none}
.practice-guide.is-paused .practice-guide-motion .pause-icon{display:none}
.practice-guide.is-paused .practice-guide-motion .play-icon{display:block}
.practice-guide-minimized{position:absolute;right:0;bottom:0;display:grid;width:58px;height:58px;place-items:center;overflow:hidden;border:1px solid rgb(16 42 53/34%);border-radius:50%;background:#fffdf9;box-shadow:0 10px 26px rgb(16 42 53/18%);cursor:pointer;pointer-events:auto}
.practice-guide-minimized[hidden]{display:none}
.practice-guide-minimized img{display:block;width:52px;height:52px;object-fit:contain;transform:translateY(2px)}
.practice-guide-minimized:hover{background:var(--mint);box-shadow:0 12px 30px rgb(16 42 53/22%)}
.practice-guide-minimized:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
.practice-guide.is-minimized{--guide-size:58px;width:58px;height:58px;filter:none}
.practice-guide.is-minimized .practice-guide-character,.practice-guide.is-minimized .practice-guide-motion,.practice-guide.is-minimized .practice-guide-bubble{display:none}
.practice-guide.is-hopping .practice-guide-sprite{top:auto;right:auto;left:calc(var(--guide-size)*-.125);width:calc(var(--guide-size)*1.25);height:calc(var(--guide-size)*1.25)}
.practice-guide.is-arriving .practice-guide-bubble{animation:practice-guide-note-in 380ms cubic-bezier(.16,1,.3,1) both}
@keyframes practice-guide-note-in{from{opacity:0;clip-path:inset(12% 0 0 18% round 14px);transform:translate(8px,8px)}to{opacity:1;clip-path:inset(0 0 0 0 round 14px);transform:none}}
@media(max-width:760px){.practice-guide{--guide-size:88px;right:.45rem;bottom:.45rem}.practice-guide.is-minimized{--guide-size:54px;width:54px;height:54px}.practice-guide-minimized{width:54px;height:54px}.practice-guide-minimized img{width:48px;height:48px}.practice-guide-bubble{right:calc(100% - .5rem);bottom:5%;width:min(260px,calc(100vw - 1rem));max-height:min(70vh,430px);overflow:auto;padding:.85rem 2.55rem .85rem .85rem}.practice-guide-bubble>strong{font-size:1rem;line-height:1.36}.practice-guide-motion{width:34px;height:34px}.practice-guide-actions a,.practice-guide-actions button{min-height:40px;font-size:.64rem}}
@media(prefers-reduced-motion:reduce){.practice-guide{transform:none!important}.practice-guide-motion{display:none}.practice-guide-sprite{content:url('/images/characters/practice-guide/idle/frame-01.webp')}}
@media print{.practice-guide{display:none!important}}