/* Vixo course guide: isolated from the site's layout and menus. */
#vixo,.focus-layer .focus-avatar{background-image:url('assets/vixo-sprites-cyan.png');background-size:600% 100%;background-repeat:no-repeat;background-position:0 center;background-color:transparent;border:0}
#vixo{position:fixed;left:0;top:0;width:52px;height:104px;padding:0;opacity:0;z-index:1;cursor:pointer;filter:drop-shadow(0 0 8px #3bd7ffbb);appearance:none}
#vixo:focus-visible,#bubble:focus-visible,.focus-layer button:focus-visible{outline:2px solid #7eecff;outline-offset:3px}
#bubble{position:fixed;left:0;top:0;z-index:42;max-width:200px;background:#0d2a43;color:#effbff;border:1px solid #67dafa;border-radius:13px;padding:10px 12px;font:700 12px/1.35 Arial,sans-serif;box-shadow:0 8px 26px #001529b0,0 0 14px #2bbffb66;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s ease}
#bubble.visible{opacity:1;pointer-events:auto}#bubble.docked{max-width:120px;padding:9px 11px}
.brand .mark.lit{filter:drop-shadow(0 0 15px #44d9ff) brightness(1.3)}.nav-contact.bump{animation:vixo-bump .4s ease-in-out}@keyframes vixo-bump{40%{transform:translateX(5px) rotate(2deg)}75%{transform:translateX(-2px)}}
.focus-layer[hidden],.focus-layer [hidden]{display:none!important}.focus-layer{position:fixed;inset:0;z-index:100;display:grid;place-items:center;overflow:auto;padding:18px;background:#03121fbd;backdrop-filter:blur(11px) brightness(.54);-webkit-backdrop-filter:blur(11px) brightness(.54);font-family:Arial,Helvetica,sans-serif;color:#f3faff}.focus-layer *{box-sizing:border-box}
.focus-body{width:min(880px,100%);display:flex;align-items:center;justify-content:center;gap:clamp(10px,3vw,40px);position:relative}
.focus-layer .focus-avatar{position:relative;flex:0 0 auto;width:190px;height:380px;background-position:100% center;filter:drop-shadow(0 0 19px #42d8ffb8)}
.focus-layer .panel{position:relative;width:min(440px,100%);max-height:min(88vh,760px);flex:0 1 440px;overflow:auto;background:#0d2a43;border:1px solid #7cddf8b8;border-radius:18px;padding:23px;box-shadow:0 25px 90px #000c,0 0 40px #2bcaff33}
.focus-layer .panel:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#77ecff,#2b8fe4)}
.focus-layer .panel h2{font-size:25px;line-height:1.2;margin:19px 0 10px;color:#fff}.focus-layer .panel p{font-size:16px;line-height:1.65;margin:0 0 17px;color:#c0d6e4}.focus-layer button{font:inherit;cursor:pointer}.focus-layer .panel button{display:block;width:100%;margin-top:9px;padding:11px 13px;background:#183e58;border:1px solid #5bcafa77;border-radius:10px;color:#fff;text-align:left}.focus-layer .panel button:hover,.focus-layer .panel button:focus-visible{background:#226182;border-color:#7fe8ff}
.focus-layer .panel .close{position:absolute;top:7px;right:9px;background:none;border:0;width:auto;font-size:26px;margin:0;padding:5px 9px;line-height:1}.guide-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-right:24px}.guide-tag{font-size:10px;letter-spacing:.16em;color:#46d7f6;font-weight:900}.focus-layer .panel .voice-toggle{display:inline-block;width:auto;margin:0;padding:8px 10px;font-size:12px;text-align:center;white-space:nowrap}.focus-layer .panel .voice-toggle:disabled{opacity:.7;cursor:default}.guide-choices{display:grid;gap:7px}.focus-layer .panel .guide-choices button{margin:0}.guide-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:13px}.focus-layer .panel .guide-back{display:inline-block;width:auto;background:transparent;border:0;color:#7cdeff;padding:5px;margin:0}
.course-media{margin:15px 0 17px;background:#061827;border:1px solid #3d83a2;border-radius:14px;overflow:hidden}.course-media-head{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:10px 12px;color:#dcf8ff;font-size:12px}.course-media-head span{color:#7bdff7;font-size:9px;letter-spacing:.08em;white-space:nowrap}.course-media video{display:block;width:100%;aspect-ratio:16/9;background:#020914;object-fit:cover}.media-stage{display:flex;gap:10px;padding:10px 12px;background:#123750;color:#dff8ff;font-size:12px}.media-stage b{color:#74dff9}.focus-layer .panel .media-use{font-size:13px;line-height:1.5;margin:10px 12px;color:#d8e8f0}.course-media small{display:block;padding:0 12px 12px;color:#82abc0;font-size:10px}
.va-mini-vixo{display:inline-block;width:38px;height:52px;flex:none;background:url('assets/vixo-sprites-cyan.png') 100% center/600% 100% no-repeat;filter:drop-shadow(0 0 5px #51d9ff)}
@media(max-width:700px){#vixo{width:43px;height:86px}#bubble{max-width:154px;font-size:12px}.focus-body{flex-direction:column;gap:4px}.focus-layer .focus-avatar{width:78px;height:156px;margin-top:4px}.focus-layer .panel{max-height:calc(100vh - 205px);flex:auto;width:100%}}
@media(prefers-reduced-motion:reduce){.nav-contact.bump{animation:none}#bubble{transition:none}.focus-layer{backdrop-filter:none;-webkit-backdrop-filter:none;background:#03121fe8}}

/* Contact stays above Vixo in the header stacking context. */
header .menu .nav-contact{position:relative;z-index:3}
.social-icons{display:flex;gap:7px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.foot .social-icons a{display:grid;place-items:center;width:38px;height:38px;min-width:38px;margin:0;border:1px solid #315268;border-radius:10px;background:#0e1d2c;color:#a8eafa;transition:transform .2s,background .2s}
.foot .social-icons a:hover,.foot .social-icons a:focus-visible{transform:translateY(-3px);background:#194258;color:#fff;outline:2px solid var(--cyan)}
.social-icons svg{width:19px;height:19px;fill:currentColor}

/* Resting prompt stays within Vixo's silhouette and waits for his arrival. */
#bubble.docked{width:49px;max-width:49px;padding:5px 3px;border-radius:9px;text-align:center;font:700 10px/1.15 Arial,sans-serif;white-space:normal}

#bubble:not(.docked){width:49px;max-width:49px;padding:5px 3px;border-radius:9px;text-align:center;font:700 10px/1.15 Arial,sans-serif}

#bubble.moving{transition:none!important;opacity:0!important;pointer-events:none!important}