.beosha-tour{position:fixed;inset:0;z-index:1300;pointer-events:none}.beosha-tour-spot{position:fixed;border:2px solid var(--accent);border-radius:9px;box-shadow:0 0 0 4px var(--accent-soft);pointer-events:none}
.beosha-tour-bubble{position:fixed;z-index:1302;padding:15px;border:1px solid var(--line);border-radius:17px;background:var(--surface);color:var(--ink);box-shadow:0 8px 32px #0003;box-sizing:border-box;max-width:calc(100vw - 24px);font:13px/1.5 'Golos Text',sans-serif;pointer-events:auto}
.beosha-tour-identity{display:flex;align-items:center;gap:9px}.beosha-tour-progress{margin-left:auto;font-size:11px;color:var(--ink-soft)}.beosha-tour-mascot{display:grid;place-items:center;width:34px;height:34px;background:var(--accent-soft);border-radius:50%;font-size:18px;font-weight:600;transition:transform .3s}
.beosha-tour-mascot[data-action=point]{animation:beosha-nod 1.6s ease-in-out infinite}.beosha-tour-mascot[data-action=type]{transform:rotate(-9deg)}.beosha-tour-mascot[data-action=choose]{transform:rotate(9deg)}.beosha-tour-mascot[data-action=check]{transform:scale(1.08)}
.beosha-tour-text{margin:12px 0;line-height:1.6}.beosha-tour-actions{display:flex;gap:6px;flex-wrap:wrap}.beosha-tour-actions button{font:inherit;font-size:12px;padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);cursor:pointer}.beosha-tour-actions button:nth-child(2){margin-left:auto;background:var(--accent-soft)}.beosha-tour-actions button:disabled{opacity:.5;cursor:default}.beosha-tour-actions button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.beosha-tour-arrow{position:fixed;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.beosha-tour-arrow path{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:5 4;animation:beosha-flow 1s linear infinite}.beosha-float .beosha-tour-start{grid-column:1/-1;border-color:var(--accent);font-weight:600}
@keyframes beosha-nod{50%{transform:translateY(-3px) rotate(7deg)}}@keyframes beosha-flow{to{stroke-dashoffset:-18}}@media(prefers-reduced-motion:reduce){.beosha-tour-mascot,.beosha-tour-arrow path{animation:none!important;transition:none}}

/* Geometry comes from the actual control, independently of the bubble/list bounds. */
.beosha-tour-spot{box-sizing:border-box;box-shadow:0 0 0 2px var(--accent-soft)}
.beosha-tour-bubble[popover]{margin:0;inset:auto;position:fixed}

/* One wardrobe per tour, five poses. Artwork never intercepts form controls. */
.beosha-tour-scene{display:grid;grid-template-columns:90px minmax(0,1fr);gap:12px;align-items:center}
.beosha-tour-mascot{display:block;position:relative;width:90px;height:150px;border-radius:0;background:none;overflow:hidden;animation:none!important;transform:none!important}
.beosha-tour-sprite{display:block;width:450px!important;max-width:none!important;height:150px!important;transition:none}
.beosha-tour-fallback{width:90px;height:150px;object-fit:contain}
.beosha-tour-mascot img[hidden]{display:none!important}
.beosha-tour-identity{gap:6px}.beosha-tour-text{margin:8px 0;line-height:1.55}
.beosha-tour-actions{margin-top:12px}
@media(max-width:390px){.beosha-tour-scene{grid-template-columns:66px minmax(0,1fr);gap:8px}.beosha-tour-mascot{width:66px;height:110px}.beosha-tour-sprite{width:330px!important;height:110px!important}.beosha-tour-fallback{width:66px;height:110px}.beosha-tour-bubble{padding:12px}}

/* The guide owns a separate workspace area: it never floats over a form. */
html.beosha-tour-side .main{margin-right:380px}
html.beosha-tour-side #modal-root .modal-scrim{right:380px}
html.beosha-tour-bottom .main{padding-bottom:var(--beosha-tour-reserve,220px)}
html.beosha-tour-bottom #modal-root .modal-scrim{top:var(--beosha-tour-top,0px);bottom:auto;height:var(--beosha-tour-space,60dvh);box-sizing:border-box;padding:10px}
html.beosha-tour-bottom #modal-root .modal{max-height:calc(var(--beosha-tour-space,60dvh) - 20px)}
.beosha-tour-bubble{display:flex;flex-direction:column;overflow:hidden}
.beosha-tour-scene{min-height:0;overflow:auto;overscroll-behavior:contain}
.beosha-tour-actions{flex:none}
.beosha-tour-bubble[data-layout=bottom] .beosha-tour-scene{grid-template-columns:54px minmax(0,1fr);gap:10px;align-items:start}
.beosha-tour-bubble[data-layout=bottom] .beosha-tour-mascot{width:54px;height:90px}
.beosha-tour-bubble[data-layout=bottom] .beosha-tour-sprite{width:270px!important;height:90px!important}
.beosha-tour-bubble[data-layout=bottom] .beosha-tour-fallback{width:54px;height:90px}
.beosha-tour-bubble[data-layout=bottom] .beosha-tour-text{font-size:12px;line-height:1.5;margin:5px 0 0}
.beosha-tour-bubble[data-layout=bottom]{padding:11px 12px}
.beosha-tour-arrow path{stroke-dasharray:none;animation:beosha-pointer 1.5s ease-in-out infinite;stroke-width:2}
@keyframes beosha-pointer{50%{opacity:.55}}
html.beosha-tour-side #modal-root .modal-scrim{top:var(--beosha-tour-top,0px);bottom:auto;height:var(--beosha-tour-space,100dvh);box-sizing:border-box}
html.beosha-tour-side #modal-root .modal{max-height:calc(var(--beosha-tour-space,100dvh) - 24px)}
html.beosha-tour-keyboard #modal-root .modal-h{padding:8px 12px;font-size:14px}
html.beosha-tour-keyboard #modal-root .modal-f{padding:6px 12px}
html.beosha-tour-keyboard #modal-root .modal-b{padding:8px 12px}
html.beosha-tour-side .beosha-float,html.beosha-tour-bottom .beosha-float{visibility:hidden}
/* Desktop guide floats over the unchanged workspace; mobile keeps its bottom area. */
html.beosha-tour-floating .beosha-float{visibility:hidden}
.beosha-tour-bubble[data-layout=floating] .beosha-tour-scene{grid-template-columns:64px minmax(0,1fr);gap:10px}
.beosha-tour-bubble[data-layout=floating] .beosha-tour-mascot{width:64px;height:107px}
.beosha-tour-bubble[data-layout=floating] .beosha-tour-sprite{width:320px!important;height:107px!important}
.beosha-tour-bubble[data-layout=floating] .beosha-tour-fallback{width:64px;height:107px}
.beosha-tour-arrow path{animation:none;opacity:1;stroke-linejoin:round;stroke-linecap:round}
.beosha-tour-arrow path.beosha-arrow-halo{stroke:var(--surface);stroke-width:9;filter:drop-shadow(0 1px 2px #0008)}
.beosha-tour-arrow path.beosha-arrow-line{stroke:var(--accent);stroke-width:4}


html.beosha-tour-bottom main{padding-bottom:calc(var(--beosha-tour-reserve,220px) + 24px)}
.beosha-guide-notice{position:fixed;z-index:1400;bottom:92px;right:20px;max-width:min(360px,calc(100vw - 40px));padding:14px 16px;background:var(--card,var(--surface));color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 5px 24px #0002;font:13px/1.5 inherit}
.beosha-guide-notice button{display:block;margin:10px 0 0 auto}

/* A quiet cue appears only when the current step allows continuing. */
.beosha-tour-actions .beosha-tour-next{display:inline-flex;align-items:center;justify-content:center;gap:5px}
.beosha-tour-next-cue{display:inline-block;width:14px;font-size:17px;font-weight:500;line-height:1;visibility:hidden}
.beosha-tour-next:not(:disabled) .beosha-tour-next-cue{visibility:visible;animation:beosha-ready-nudge 1.15s ease-in-out 2}
@keyframes beosha-ready-nudge{0%,100%{transform:translateX(-2px)}50%{transform:translateX(1px)}}
@media(prefers-reduced-motion:reduce){.beosha-tour-next:not(:disabled) .beosha-tour-next-cue{animation:none}}

/* Frame offsets are relative to the mascot viewport, never the wide image transform box. */
.beosha-tour-bubble .beosha-tour-mascot>.beosha-tour-sprite{position:absolute;top:0;left:0;width:500%!important;height:100%!important;max-width:none!important;object-fit:fill;transform:none!important;margin:0}

/* A little more character, while keeping the reading surface and controls crisp. */
.beosha-tour-bubble{background:var(--surface)}
.beosha-tour-bubble[data-layout=floating] .beosha-tour-scene{grid-template-columns:76px minmax(0,1fr)}
.beosha-tour-bubble[data-layout=floating] .beosha-tour-mascot,.beosha-tour-bubble[data-layout=floating] .beosha-tour-fallback{width:76px;height:127px}
.beosha-tour-bubble[data-layout=bottom] .beosha-tour-scene{grid-template-columns:62px minmax(0,1fr)}
.beosha-tour-bubble[data-layout=bottom] .beosha-tour-mascot,.beosha-tour-bubble[data-layout=bottom] .beosha-tour-fallback{width:62px;height:103px}

/* Keep the guide readable over loaded tables and narrow modal margins. */
.beosha-tour-bubble{background:var(--surface)}
.beosha-tour-identity{cursor:grab;touch-action:none;user-select:none;min-height:32px;border-radius:6px}
.beosha-tour-identity.is-dragging{cursor:grabbing}
.beosha-tour-identity:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.beosha-tour-identity::before{content:'⠿';color:var(--ink-soft);font-size:16px}
.beosha-tour-speech{min-width:0}
.beosha-tour-actions{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center}
.beosha-tour-actions button{min-width:0;white-space:nowrap;font-size:12px;padding:7px 9px}
.beosha-tour-actions button:nth-child(2){margin-left:0}