/* The small guide shares the room character's contours and theme palette. */
:root{--dev-ink:#2f2e41;--dev-device:#3f3d56;--dev-paper:#e6e6e6;--dev-screen:#f2f2f2;--dev-sage:#8a9d91}
html[data-theme=night]{--dev-ink:#64758e;--dev-device:#697b96;--dev-paper:#a2afc3;--dev-screen:#1b2230;--dev-sage:#7e9c96}
.dev-character{position:relative;display:inline-flex;flex:none;width:64px;height:106px;pointer-events:none;isolation:isolate}
.dev-character svg{position:static!important;inset:auto!important;display:block;width:100%!important;height:100%!important;max-width:none;max-height:none;margin:0;fill:none;stroke:none;overflow:visible}
html[data-guide-ready=true] #guide-launcher{width:68px;height:106px;min-width:68px!important;min-height:106px!important;padding:0;border:0;background:none;box-shadow:none;backdrop-filter:none;border-radius:16px;left:var(--dev-x);top:var(--dev-y);contain:layout;transition:opacity 140ms}
#guide-launcher .dev-character{width:68px;height:106px}
html[data-dev-ready]:not([data-dev-visible=true]) #guide-launcher{visibility:hidden;pointer-events:none}
html[data-theme] #guide-launcher:focus-visible{outline:2px solid var(--focus);outline-offset:3px;background:var(--surface-gradient)}
.guide-top .dev-character{width:52px;height:80px;margin-block:-12px}
.guide-prompts{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.guide-prompts button{display:flex;align-items:center;gap:8px}
.guide-prompts .ui-icon{width:19px;height:19px;flex:none}
.guide-more .guide-prompts{grid-template-columns:1fr}
.guide-bottom{font-size:11px}
.dev-micro{width:36px;height:58px}
.contact-companion .dev-micro{width:38px;height:62px}
.footer-guide{position:relative;overflow:visible;background:none;border:none;width:44px;height:64px}
.footer-guide .dev-micro{height:64px;width:40px}
@media(max-width:799px){html[data-guide-ready=true] #guide-launcher{width:56px;height:88px;min-width:56px!important;min-height:88px!important}#guide-launcher .dev-character{width:56px;height:88px}}
@media(prefers-reduced-motion:reduce){.dev-character{animation:none!important;transition:none!important}}
@media print{.dev-character{display:none!important}}

.scene-heading .scene-guide{display:none}.scene-panel[data-scene=game] .scene-guide{display:inline-flex;width:30px;height:50px;margin-right:4px}.dev-detour{display:flex;width:70px;height:115px;margin:0 auto 20px}
@media print{#guide-launcher,#pocket-guide,.guide-backdrop,.scene-panel,.footer-guide{display:none!important}}

/* Part motion stays inside fixed character boxes; the scene never becomes a carousel. */
.dev-definitions{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.dev-character [data-part],.motion-art [data-part]{transform-box:fill-box;transform-origin:center}
.dev-character [data-part=prop],.motion-art [data-part=prop]{transform-origin:center bottom}
.motion-scene{--scene-ink:#2f2e41;--scene-device:#3f3d56;--scene-paper:#e6e6e6;--scene-screen:#f2f2f2}
html[data-theme=night] .motion-scene{--scene-ink:#3d4a63;--scene-device:#4d5d7a;--scene-paper:#39475b;--scene-screen:#1b2230}
.motion-scene>img{visibility:hidden!important}.motion-scene>.motion-art{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;display:block;pointer-events:none;overflow:visible;fill:none;stroke:none}
.dev-character[data-pose=peek-bottom]{overflow:hidden}
.guide-detail{font-size:13px;line-height:1.6}.guide-detail summary{padding:8px 0;cursor:pointer;font-weight:600}
.guide-categories{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}.guide-categories button{padding:7px 10px;font-size:12px;border-radius:12px}
.guide-categories button[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent)}
.guide-all-list{max-height:220px;overflow:auto}.guide-more .guide-prompts{grid-template-columns:1fr 1fr}
.guide-launch-label{transition:opacity 180ms,translate 180ms;translate:0 3px}#guide-launcher[data-cue-visible=true] .guide-launch-label{translate:0 0}
@media(max-width:400px){.guide-more .guide-prompts{grid-template-columns:1fr}.guide-prompts button{font-size:12px}}
@media(prefers-reduced-motion:reduce){.guide-launch-label{transition:none}}
html[data-motion=reduce] .guide-launch-label{transition:none}
html[data-theme=night] [data-motion-scene=hero]{--scene-paper:#2c364a}

/* Structural SVG matrices position the drawing; reduced motion must retain them. */
html[data-motion=reduce] :is(.motion-art,.dev-character,.dev-definitions) [transform]{transform:var(--dev-base-transform)!important;transform-origin:0 0;transform-box:view-box}

/* Only the internal SVG rig turns; labels, controls and prop marks keep their direction. */
.dev-character [data-facing-body],.dev-character [data-upright-prop]{transform-origin:0 0;transform-box:view-box}
.guide-related{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.guide-related:before{content:'Keep exploring';flex-basis:100%;font-size:11px;opacity:.75}
.guide-related button{display:flex;align-items:center;gap:5px;padding:7px 9px;font-size:11px;border-radius:12px}
.guide-related .ui-icon{width:14px;height:14px}

.guide-prompts button[hidden]{display:none}

.guide-prompts[hidden]{display:none}
.guide-related button,.guide-actions button{min-height:44px;border:1px solid var(--edge);background:var(--surface-gradient);color:var(--ink-secondary);font:12px/1.5 var(--font-body);text-align:left}
.guide-actions button{padding:8px 12px;border-radius:9px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}

/* A reserved corridor contains the actor and his own movable chair. */
html[data-dev-intensity] #guide-launcher{width:var(--dev-w,76px);height:var(--dev-h,124px);min-width:var(--dev-w,76px)!important;min-height:var(--dev-h,124px)!important;right:auto!important;bottom:auto!important;transition:opacity 120ms}
html[data-dev-intensity] #guide-launcher .dev-character{width:100%;height:100%}
html[data-dev-intensity] #guide-launcher .guide-launch-label{display:none}
.dev-chair{position:fixed;display:block;z-index:89;pointer-events:none;contain:layout;transform-origin:center bottom}
.dev-chair svg{display:block;width:100%;height:100%;overflow:visible;transform-origin:center bottom}
.dev-chair[hidden]{display:none}
.dev-prompt{position:fixed;z-index:91;max-width:min(234px,calc(100vw - 28px));padding:5px;border:1px solid var(--edge);border-radius:16px;background:var(--surface-high);background-image:var(--surface-gradient);box-shadow:var(--shadow-raised);color:var(--ink);font:12px/1.4 var(--font-body)}
.dev-prompt[hidden],html[data-guide-open=true] .dev-prompt,html[data-scene-open=true] .dev-prompt{display:none}
.dev-prompt button{min-height:44px;min-width:44px;border:0;border-radius:10px;background:transparent;color:var(--ink);font:inherit;padding:7px 10px;cursor:pointer;text-align:left;display:flex;align-items:center;gap:6px}
.dev-prompt-line{width:100%;font-weight:600!important}
.dev-prompt-chips{display:flex;gap:4px;flex-wrap:wrap}
.dev-prompt-chips button{border:1px solid var(--edge);background:var(--surface-gradient);font-size:11px;flex:1;white-space:nowrap}
.dev-prompt .ui-icon{width:15px;height:15px;flex:none}
.dev-prompt button:hover{background:var(--accent-soft)}
.dev-prompt button:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
@media(max-width:799px){.dev-prompt{max-width:208px;font-size:11px}.dev-prompt button{padding:6px 8px}}
@media print{.dev-chair,.dev-prompt{display:none!important}}

.scene-panel[data-scene=detail] .scene-guide{display:inline-flex;width:30px;height:50px;margin-right:8px;flex:none}
.scene-panel[data-scene=detail] .scene-heading{gap:14px}.scene-panel[data-scene=detail] .scene-heading>div{flex:1;min-width:0}

@media(max-width:799px), (max-width:1000px) and (max-height:500px){html[data-dev-intensity] #guide-launcher{display:grid;place-items:center;min-width:44px!important;min-height:50px!important}html[data-dev-intensity] #guide-launcher .dev-character{width:30px;height:50px}.dev-chair{display:none!important}}

/* Reveal the floating guide only after its first safe position is established. */
html:not([data-dev-visible=true]) #guide-launcher{visibility:hidden;pointer-events:none}