.robot-guide{display:grid;grid-template-columns:145px minmax(0,1fr) 145px;gap:20px;position:relative;overflow:hidden;isolation:isolate;border:1px solid #2d7592;border-radius:20px;background:linear-gradient(125deg,#0e2237,#153f55);color:#edfaff;padding:18px 45px 18px 16px;margin:0 0 22px;box-shadow:0 8px 22px #102d4120}
.robot-guide[hidden],.robot-guide-reopen[hidden],.robot-guide [hidden]{display:none!important}
.robot-guide h2{font-size:20px;margin:4px 0 8px;color:#a0e8ff}
.robot-guide-text{font-size:14px;line-height:1.55;margin:0 0 14px;color:#edfaff;max-width:850px}
.robot-guide-art{position:relative;align-self:center;width:145px;height:194px;overflow:hidden}
.robot-guide-sprite{width:100%;height:100%;background:url('assets/pino-robot-pair.webp') left top/400% 200% no-repeat}
.robot-guide-actions{display:flex;gap:8px;flex-wrap:wrap}
.robot-guide-actions button,.robot-guide-reopen{border:1px solid #53c5eb;background:#123d54;color:#f2fcff;border-radius:10px;padding:9px 14px;font:inherit;font-size:13px;cursor:pointer}
.robot-guide-actions button:first-child{background:#80e4ff;color:#123144;font-weight:700}
.robot-guide-close{position:absolute;right:12px;top:9px;background:transparent;border:0;color:#b9deee;font-size:28px;width:32px;height:32px;cursor:pointer}
.robot-guide button:focus-visible,.robot-guide-reopen:focus-visible{outline:3px solid #ffe082;outline-offset:3px}
.robot-guide-status{display:block;min-height:17px;margin-top:9px;color:#bedbe7;font-size:12px}
.robot-guide-reopen{margin:0 0 15px}
.robot-speaking .robot-guide-male .robot-guide-sprite{animation:robot-explain 3s step-end infinite}
.robot-guide-signal{position:absolute;bottom:2px;left:52px;width:40px;height:3px;border-radius:4px;background:#70e2ff;opacity:.35}
.robot-speaking .robot-guide-signal{animation:robot-signal .65s ease-in-out infinite alternate}
@keyframes robot-explain{0%,100%{background-position:0% top}25%{background-position:33.333333% top}50%{background-position:66.666667% top}75%{background-position:100% top}}
@keyframes robot-signal{to{opacity:1;box-shadow:0 0 12px #3ad8ff}}
@media(max-width:650px){.robot-guide{grid-template-columns:95px 1fr;gap:12px;padding:14px 32px 14px 10px}.robot-guide-art{width:95px;height:127px}.robot-guide h2{font-size:17px}.robot-guide-text{font-size:13px}.robot-guide-actions button{padding:8px 10px}.robot-guide-signal{left:28px}}
@media(prefers-reduced-motion:reduce){.robot-speaking .robot-guide-sprite,.robot-speaking .robot-guide-signal{animation:none}}

.robot-guide-matrix{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.45}
.robot-guide-art,.robot-guide-content,.robot-guide-close{z-index:1;position:relative}
.robot-guide-close{position:absolute}
.robot-guide-female .robot-guide-sprite{background-position:0% bottom}
.robot-guide-content{align-self:center;text-shadow:0 1px 4px #06121e}
@media(max-width:650px){.robot-guide{grid-template-columns:1fr 1fr;padding:14px 18px;gap:10px}.robot-guide-male{grid-column:1;grid-row:1;justify-self:center}.robot-guide-female{grid-column:2;grid-row:1;justify-self:center}.robot-guide-content{grid-column:1/-1;grid-row:2}.robot-guide-art{width:105px;height:140px}}

.robot-guide{grid-template-columns:220px minmax(0,1fr) 145px}
.robot-guide-start{display:flex;align-items:center;gap:12px;position:relative;z-index:1}
.robot-guide-start .robot-guide-art{flex:0 0 145px}
.robot-guide-content{min-height:158px}
.robot-guide-status:empty{display:none}
.robot-guide-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:650px){.robot-guide{grid-template-columns:minmax(0,1fr) 105px;gap:10px;padding:14px 18px}.robot-guide-start{grid-column:1;grid-row:1;gap:8px;justify-self:start}.robot-guide-start .robot-guide-art{flex-basis:105px}.robot-guide-male{grid-column:auto;grid-row:auto}.robot-guide-female{grid-column:2;grid-row:1}.robot-guide-content{grid-column:1/-1;grid-row:2;min-height:55px}.robot-guide-actions button{padding:8px}}
@media(max-width:380px){.robot-guide{padding:12px 8px;grid-template-columns:minmax(0,1fr) 85px;gap:6px}.robot-guide-art{width:85px;height:114px}.robot-guide-start .robot-guide-art{flex-basis:85px}.robot-guide-start{gap:5px}.robot-guide-actions button{padding:7px 6px;font-size:12px}}

.robot-guide{grid-template-columns:220px minmax(0,1fr) 220px}
.robot-guide-end{display:flex;align-items:center;justify-content:flex-end;gap:12px;position:relative;z-index:1}
.robot-guide-end .robot-guide-art{flex:0 0 145px}
.robot-guide-actions button:disabled{cursor:default;opacity:.8}
@media(max-width:650px){.robot-guide{grid-template-columns:1fr}.robot-guide-start{grid-column:1;grid-row:1}.robot-guide-content{grid-column:1;grid-row:2;min-height:55px}.robot-guide-end{grid-column:1;grid-row:3;justify-self:end;gap:8px}.robot-guide-end .robot-guide-art{flex-basis:105px}.robot-guide-female{grid-column:auto;grid-row:auto}}
@media(max-width:380px){.robot-guide{grid-template-columns:1fr}.robot-guide-end .robot-guide-art{flex-basis:85px}.robot-guide-end{gap:5px}}

.robot-guide-navigation,.robot-guide-goodbye{font-size:14px;line-height:1.55;margin:0 0 12px;color:#edfaff;max-width:850px}
.robot-guide-goodbye{font-weight:600;margin-bottom:0}
.robot-guide-content{padding:2px 10px}
.robot-guide-reopen{position:fixed;right:22px;bottom:22px;z-index:1000;width:42px;height:42px;border-radius:50%;padding:0;margin:0;font-size:23px;font-weight:700;box-shadow:0 4px 16px #001b3c66}
.robot-guides-hidden .robot-guide,.robot-guides-hidden [data-ai-guide]{display:none!important}
@media(max-width:650px){.robot-guide-navigation,.robot-guide-goodbye{font-size:13px}.robot-guide-content{padding:0 4px}.robot-guide-reopen{right:14px;bottom:14px}}

.robot-guide-content{text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:8px 12px}
.robot-guide h2{font-size:clamp(22px,2vw,28px);line-height:1.25;margin:0 0 15px}
.robot-guide-text,.robot-guide-navigation,.robot-guide-goodbye{font-size:clamp(16px,1.3vw,19px);line-height:1.6;max-width:900px;margin:0 0 15px}
.robot-guide-goodbye{margin-bottom:0}
@media(max-width:650px){.robot-guide-content{padding:10px 4px}.robot-guide h2{font-size:22px}.robot-guide-text,.robot-guide-navigation,.robot-guide-goodbye{font-size:16px;line-height:1.55}}

.robot-guide{grid-template-columns:145px minmax(0,1fr) 145px}
.robot-guide-start,.robot-guide-end{flex-direction:column;justify-content:center;gap:8px}
.robot-guide-start .robot-guide-art,.robot-guide-end .robot-guide-art{flex:0 0 auto;order:0}
.robot-guide-start .robot-guide-actions,.robot-guide-end .robot-guide-actions{order:1;justify-content:center}
.robot-guide-actions .robot-audio-toggle,.pino-page-bot .robot-audio-toggle{display:grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;cursor:pointer}
.robot-audio-toggle svg{display:block;width:100%;height:100%;filter:drop-shadow(0 2px 4px #0006)}
.robot-guide-actions .robot-audio-toggle:disabled,.pino-page-bot .robot-audio-toggle:disabled{opacity:.65;cursor:default}
@media(max-width:650px){.robot-guide{grid-template-columns:1fr 1fr}.robot-guide-start{grid-column:1;grid-row:1;justify-self:center}.robot-guide-end{grid-column:2;grid-row:1;justify-self:center}.robot-guide-content{grid-column:1/-1;grid-row:2}}

.robot-inline-play{display:inline-block;width:1.35em;height:1.35em;vertical-align:-.32em;margin:0 .12em}
.robot-inline-play svg{display:block;width:100%;height:100%}

.robot-guide-reopen{position:fixed;inset:auto 18px 18px auto;z-index:10050;width:auto;min-width:168px;max-width:calc(100vw - 36px);height:auto;min-height:44px;padding:11px 16px;border-radius:12px;font-size:14px;line-height:1.3;box-shadow:0 4px 20px #001b3c66}
.robot-guide-menu-reopen{display:block;width:100%;margin:0 0 6px;padding:12px 14px;border:1px solid #80e4ff;border-radius:10px;background:#123d54;color:#f2fcff;font:700 15px/1.3 inherit;cursor:pointer;text-align:left}
.robot-guide-menu-reopen[hidden]{display:none!important}
.robot-guide-menu-reopen:focus-visible{outline:3px solid #ffe082;outline-offset:3px}