.pip-guide{color:var(--ink);min-width:0}.pip-guide details{border:1px solid var(--line);background:var(--paper);padding:18px;border-radius:12px}.pip-guide summary{cursor:pointer;list-style:none;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}.pip-guide summary::-webkit-details-marker{display:none}.pip-guide summary strong{font:25px Georgia,serif}.pip-guide summary small{font-size:12px;color:var(--muted)}.pip-sprite{display:block;width:192px;height:208px;background:url('/pip.png') 0 0 / 1536px 2288px no-repeat;image-rendering:pixelated}@keyframes pip-idle{to{background-position-x:-1152px}}.pip-guide details[open] summary{padding-bottom:18px;border-bottom:1px solid var(--line)}.pip-guide .pip-body{padding-top:16px}.pip-guide p{font:14px/1.6 system-ui,sans-serif}.pip-guide .pip-note{font-size:12px;color:var(--muted)}.pip-guide nav,.pip-guide .pip-results{display:grid;gap:8px;font-size:13px}.pip-guide nav a,.pip-guide .pip-results a{display:block;padding:9px 12px;border:1px solid var(--line);border-radius:6px;text-decoration:none;overflow-wrap:anywhere}.pip-guide nav a:hover,.pip-guide .pip-results a:hover{background:#e7e9de}.pip-guide .pip-results small{display:block;color:var(--muted);font-size:12px}.pip-guide form{margin-top:16px}.pip-guide label{display:block;font-size:13px;margin-bottom:6px}.pip-guide form>div{display:flex;gap:6px}.pip-guide input{width:100%;min-width:0;padding:10px;border-radius:6px}.pip-guide button{font:14px system-ui;cursor:pointer;border:1px solid var(--ink);border-radius:6px;padding:10px 14px;background:var(--ink);color:var(--paper);min-height:44px}.pip-guide .pip-close{background:transparent;color:var(--ink);margin-top:14px}.pip-guide .pip-results:not(:empty){margin-top:16px}.pip-guide .pip-results p{margin:0 0 5px}.pip-guide :focus-visible{outline:3px solid var(--accent);outline-offset:4px}@media(prefers-reduced-motion:reduce){.pip-sprite{animation:none}}@media(max-width:400px){.pip-guide details{padding:12px}.pip-guide form>div{flex-wrap:wrap}.pip-guide input{flex-basis:100%}}
.pip-guide{align-self:center;width:100%;max-width:440px;justify-self:center}.pip-guide details:not([open]){padding:28px 18px}.pip-guide summary{min-height:285px;justify-content:center}.pip-guide details[open] summary{min-height:0}.pip-guide details[open] .pip-sprite{width:96px;height:104px;background-size:768px 1144px}@keyframes pip-idle-small{to{background-position-x:-576px}}


.pip-guide .pip-motion-toggle{display:block;margin:10px auto 0;background:transparent;color:var(--muted);border-color:var(--line);font-size:12px}.pip-guide .pip-motion-toggle[hidden]{display:none}.pip-guide .pip-motion-toggle:disabled{cursor:default}
.pip-sprite[data-frame="0-0"]{background-position:0% 0%}
.pip-sprite[data-frame="0-1"]{background-position:14.285714285714285% 0%}
.pip-sprite[data-frame="0-2"]{background-position:28.57142857142857% 0%}
.pip-sprite[data-frame="0-3"]{background-position:42.857142857142854% 0%}
.pip-sprite[data-frame="0-4"]{background-position:57.14285714285714% 0%}
.pip-sprite[data-frame="0-5"]{background-position:71.42857142857143% 0%}
.pip-sprite[data-frame="3-0"]{background-position:0% 30%}
.pip-sprite[data-frame="3-1"]{background-position:14.285714285714285% 30%}
.pip-sprite[data-frame="3-2"]{background-position:28.57142857142857% 30%}
.pip-sprite[data-frame="3-3"]{background-position:42.857142857142854% 30%}
.pip-sprite[data-frame="7-0"]{background-position:0% 70%}
.pip-sprite[data-frame="7-1"]{background-position:14.285714285714285% 70%}
.pip-sprite[data-frame="7-2"]{background-position:28.57142857142857% 70%}
.pip-sprite[data-frame="7-3"]{background-position:42.857142857142854% 70%}
.pip-sprite[data-frame="7-4"]{background-position:57.14285714285714% 70%}
.pip-sprite[data-frame="7-5"]{background-position:71.42857142857143% 70%}
.pip-sprite[data-frame="9-0"]{background-position:0% 90%}
.pip-sprite[data-frame="9-1"]{background-position:14.285714285714285% 90%}
.pip-sprite[data-frame="9-2"]{background-position:28.57142857142857% 90%}
.pip-sprite[data-frame="9-3"]{background-position:42.857142857142854% 90%}
.pip-sprite[data-frame="9-4"]{background-position:57.14285714285714% 90%}
.pip-sprite[data-frame="9-5"]{background-position:71.42857142857143% 90%}
.pip-sprite[data-frame="9-6"]{background-position:85.71428571428571% 90%}
.pip-sprite[data-frame="9-7"]{background-position:100% 90%}
.pip-sprite[data-frame="10-0"]{background-position:0% 100%}
.pip-sprite[data-frame="10-1"]{background-position:14.285714285714285% 100%}
.pip-sprite[data-frame="10-2"]{background-position:28.57142857142857% 100%}
.pip-sprite[data-frame="10-3"]{background-position:42.857142857142854% 100%}
.pip-sprite[data-frame="10-4"]{background-position:57.14285714285714% 100%}
.pip-sprite[data-frame="10-5"]{background-position:71.42857142857143% 100%}
.pip-sprite[data-frame="10-6"]{background-position:85.71428571428571% 100%}
.pip-sprite[data-frame="10-7"]{background-position:100% 100%}
/* A true floating overlay: no body padding, reserved rail, or fixed page bar. */

.pip-guide{position:fixed;z-index:100;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));width:132px;max-width:calc(100vw - 20px);margin:0;text-align:center;filter:drop-shadow(0 4px 9px #203c3826)}
.pip-guide details,.pip-guide details:not([open]){padding:8px;border-radius:10px;background:var(--paper)}.pip-guide summary,.pip-guide details[open] summary{min-height:0;gap:4px}.pip-guide summary strong{font-size:13px;line-height:1.25}.pip-guide details:not([open]) summary small{display:none}
.pip-character{position:relative;display:block;width:96px;height:104px}.pip-sprite,.pip-guide details[open] .pip-sprite{width:96px;height:104px;background-size:768px 1144px}.pip-smoke{position:absolute;left:75px;top:25.5px;width:6.5px;height:9px;background:url('/pip-smoke.png') center/100% 100% no-repeat;opacity:0;pointer-events:none;transform-origin:0 50%;image-rendering:pixelated}.pip-guide[data-puff=true] .pip-smoke{animation:pip-puff 2.4s ease-in-out both}@keyframes pip-puff{0%{opacity:0;transform:translate(0,0) scale(1)}45%{opacity:.35;transform:translate(1px,-1px) scale(1.4)}100%{opacity:0;transform:translate(2px,-2px) scale(1.6)}}
.pip-guide:has(details[open]){width:min(370px,calc(100vw - 20px));text-align:left}.pip-guide details[open]{padding:14px;max-height:calc(100dvh - 125px);overflow-y:auto;overscroll-behavior:contain}.pip-guide details[open] summary strong{font-size:20px}.pip-guide .pip-motion-toggle,.pip-guide .pip-minimize{display:block;width:100%;margin:5px 0 0;min-height:36px;padding:6px 8px;background:var(--paper);color:var(--ink);border:1px solid var(--line);font:11px/1.2 system-ui;cursor:pointer}.pip-guide button[hidden]{display:none}.pip-guide input{font-size:16px}.pip-guide[data-minimized=true] details,.pip-guide[data-minimized=true] .pip-motion-toggle{display:none}.pip-guide[data-minimized=true]{width:86px}.pip-guide[data-minimized=true] .pip-minimize{margin:0;min-height:44px}
@media(max-width:600px){.pip-guide{width:116px;top:max(6px,env(safe-area-inset-top));right:max(6px,env(safe-area-inset-right))}.pip-guide details,.pip-guide details:not([open]){padding:5px}.pip-guide summary strong{font-size:12px}.pip-guide .pip-motion-toggle,.pip-guide .pip-minimize{min-height:44px}.pip-guide details[open]{max-height:calc(100dvh - 120px)}.pip-guide:has(details[open]){width:min(370px,calc(100vw - 12px))}}
@media(prefers-reduced-motion:reduce){.pip-guide[data-puff=true] .pip-smoke{animation:none;opacity:0}}
/* Compact Pip; retain readable guide content and comfortably sized touch controls. */
.pip-guide{width:132px}.pip-character{width:102px;height:110.5px}.pip-sprite,.pip-guide details[open] .pip-sprite{width:102px;height:110.5px;background-size:816px 1215.5px}.pip-smoke{left:79.6875px;top:27.09375px;width:6.90625px;height:9.5625px}
@media(max-width:600px){.pip-guide{width:116px}.pip-character{width:96px;height:104px}.pip-sprite,.pip-guide details[open] .pip-sprite{width:96px;height:104px;background-size:768px 1144px}.pip-smoke{left:75px;top:25.5px;width:6.5px;height:9px}.pip-guide[data-minimized=true]{width:86px}}
.pip-controls{display:flex;gap:4px;margin-top:4px}.pip-guide .pip-controls>button{flex:1;width:auto;min-width:0;min-height:28px;margin:0;padding:3px 5px;font-size:10px;line-height:1.2}.pip-guide[data-minimized=true] .pip-controls{margin:0}.pip-guide[data-minimized=true] .pip-controls>.pip-minimize{min-height:36px}.pip-character{touch-action:none;user-select:none;cursor:grab}.pip-guide[data-dragging=true] .pip-character{cursor:grabbing}.pip-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media(pointer:coarse){.pip-guide .pip-controls>button{min-height:36px}}
.pip-character>.pip-sprite-previous{position:absolute;left:0;top:0;opacity:0;pointer-events:none;z-index:1}.pip-smoke{z-index:2}@media(prefers-reduced-motion:reduce){.pip-character>.pip-sprite-previous{display:none}}

.pip-sprite[data-frame="4-0"]{background-position:0% 40%}
.pip-sprite[data-frame="4-1"]{background-position:14.285714285714286% 40%}
.pip-sprite[data-frame="4-2"]{background-position:28.571428571428573% 40%}
.pip-sprite[data-frame="4-3"]{background-position:42.857142857142854% 40%}
/* Closed Pip is just the transparent character; no card, labels, or extra hit area. */
.pip-guide{width:102px;filter:none}.pip-guide details:not([open]){padding:0;border:0;border-radius:0;background:transparent}.pip-guide details:not([open]) summary{gap:0}.pip-guide details:not([open]) summary strong,.pip-guide details:not([open]) summary small{display:none}.pip-guide:has(details[open]){width:min(370px,calc(100vw - 20px))}@media(max-width:600px){.pip-guide{width:96px}.pip-guide:has(details[open]){width:min(370px,calc(100vw - 12px))}}

/* Keep the entire original character scene fixed. Only the small smoke overlay moves. */
.pip-sprite,.pip-guide details[open] .pip-sprite{background-position:0 0;animation:none}

.pip-gaze{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.pip-gaze .pupil{image-rendering:pixelated}@media(prefers-reduced-motion:reduce),(pointer:coarse){.pip-gaze{display:none}}