.sx-assistant { --sx-size: 82px; position: fixed; inset: 0; z-index: 40; pointer-events: none; font-family: Inter, system-ui, sans-serif; }
.sx-launcher { position: fixed; display: grid; place-items: center; width: var(--sx-size); height: var(--sx-size); padding: 0; border: 0; background: transparent; border-radius: 22px; color: white; cursor: grab; pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .4)); }
.sx-launcher:focus-visible, .sx-assistant button:focus-visible, .sx-assistant textarea:focus-visible { outline: 2px solid #77b7ff; outline-offset: 4px; }
.sx-launcher svg { width: 100%; height: 100%; overflow: visible; pointer-events: none; animation: sx-float 6.8s ease-in-out infinite; }
.sx-launcher.sx-dragging { cursor: grabbing; filter: drop-shadow(0 8px 18px rgba(26, 120, 255, .25)); }
.sx-launcher.sx-dragging svg { animation-play-state: paused; }
.sx-launcher.sx-docking { transition: left .22s ease-out, top .22s ease-out; }
.sx-launcher.sx-unavailable { opacity: 0; pointer-events: none; }
.sx-panel[hidden], .sx-hint[hidden], .sx-panel-tail[hidden] { display: none; }
.sx-panel { position: fixed; box-sizing: border-box; width: min(340px, calc(100vw - 32px)); max-height: calc(100dvh - 120px); overflow: auto; overscroll-behavior: contain; padding: 24px; pointer-events: auto; background: linear-gradient(150deg, rgba(10, 25, 47, .98), rgba(3, 10, 23, .97)); border: 1px solid rgba(60, 139, 245, .43); border-radius: 22px; box-shadow: 0 22px 70px rgba(0, 0, 0, .48), 0 0 28px rgba(20, 103, 225, .08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #f5f8ff; animation: sx-panel-in .18s ease-out; }
.sx-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 15px; border-bottom: 1px solid rgba(105, 152, 211, .14); }
.sx-panel-header strong { font: 700 11px/1.5 Manrope, sans-serif; letter-spacing: .15em; color: #75b5ff; margin-right: auto; }
.sx-close { min-height: 44px; min-width: 54px; padding: 9px 0 9px 10px; border: 0; background: none; color: #a9b9cf; font: 600 9px/1.5 Inter, sans-serif; letter-spacing: .08em; cursor: pointer; }
.sx-panel .sx-greeting { margin: 22px 0 12px; font-size: 16px; font-weight: 500; line-height: 1.65; color: #f1f6ff; }
.sx-panel .sx-secondary { margin: 0 0 24px; font-size: 12px; line-height: 1.8; color: #9bacc4; }
.sx-field-label { display: block; margin-bottom: 10px; font-size: 10px; color: #aebed3; }
.sx-panel textarea { box-sizing: border-box; display: block; width: 100%; min-height: 100px; max-height: 180px; padding: 14px; resize: vertical; border: 1px solid rgba(98, 145, 207, .3); border-radius: 12px; background: rgba(2, 8, 19, .75); color: #edf5ff; font: 400 16px/1.6 Inter, sans-serif; }
.sx-panel textarea::placeholder { color: #7f94af; opacity: 1; font-size: 12px; }
.sx-panel .sx-submit { width: 100%; min-height: 54px; margin-top: 16px; padding: 14px 12px; border: 1px solid #2582ff; border-radius: 12px; background: linear-gradient(135deg, #0879ff, #1359ed); box-shadow: 0 8px 24px rgba(0, 100, 240, .16); color: #fff; font: 600 10px/1.6 Inter, sans-serif; letter-spacing: .05em; cursor: pointer; touch-action: manipulation; }
.sx-hint { position: fixed; pointer-events: none; width: max-content; max-width: 190px; padding: 10px 14px; border: 1px solid rgba(60, 139, 245, .3); border-radius: 12px; background: rgba(5, 16, 34, .97); box-shadow: 0 8px 25px rgba(0, 0, 0, .25); color: #cbdcf2; font-size: 11px; line-height: 1.5; }
.sx-safe-area { position: absolute; width: 0; height: 0; padding-bottom: env(safe-area-inset-bottom, 0px); padding-right: env(safe-area-inset-right, 0px); pointer-events: none; }
body.mobile-menu-open .sx-assistant { visibility: hidden; pointer-events: none; }
@keyframes sx-float { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-3.5px) rotate(1.2deg); } }
@keyframes sx-panel-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 860px) {
  .site-header .menu-toggle { width: 108px; height: 44px; padding: 0 12px; align-items: center; border-radius: 14px; font: 700 9px/1.4 Inter, sans-serif; letter-spacing: .08em; white-space: nowrap; color: #d8eaff; transition: border-color .18s ease, background .18s ease; }
  .site-header .menu-toggle[aria-expanded="true"] { border-color: rgba(65, 154, 255, .7); background: rgba(16, 49, 93, .8); }
  .site-header .menu-toggle:active { background: rgba(25, 67, 119, .8); }
  .sx-assistant { --sx-size: 60px; }
  .sx-panel { width: min(304px, calc(100vw - 24px)); padding: 20px; border-radius: 18px; }
  .sx-panel .sx-greeting { font-size: 15px; margin-top: 17px; }
  .sx-panel .sx-secondary { margin-bottom: 20px; }
  .sx-panel textarea { min-height: 88px; }
  .sx-hint { max-width: 145px; font-size: 10px; }
}
@media (max-width: 400px) {
  .site-header .brand { gap: 8px; }
  .site-header .brand-mark { width: 42px; font-size: 28px; }
  .site-header .brand-copy strong { font-size: 15px; }
  .site-header .brand-copy small { font-size: 7px; letter-spacing: .15em; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-launcher svg, .sx-launcher svg *, .sx-panel, .sx-hint { animation: none !important; transition: none !important; }
  .sx-launcher.sx-docking { transition: none; }
}

/* The character has independently animated parts; interaction never moves its hit area. */
.sx-head { transform-origin: 56px 74px; animation: sx-head-idle 9.4s ease-in-out infinite; }
.sx-body { transform-origin: 56px 82px; animation: sx-breathe 5.8s ease-in-out infinite; }
.sx-antenna { transform-origin: 56px 24px; animation: sx-antenna-idle 6.2s ease-in-out infinite; }
.sx-gaze { transform: translate(var(--sx-gaze-x, 0px), var(--sx-gaze-y, 0px)); transition: transform .2s ease-out; }
.sx-eye-blink { transform-box: fill-box; transform-origin: center; animation: sx-blink 7.7s linear infinite; }
.sx-eye-glow { animation: sx-eye-light 5.8s ease-in-out infinite; }
.sx-beacon { animation: sx-beacon-light 4.5s ease-in-out infinite; }
.sx-aura { transform-origin: 56px 87px; animation: sx-aura-breathe 5.8s ease-in-out infinite; }
.sx-hover-ring { transform-origin: 56px 111px; animation: sx-ring-breathe 6.8s ease-in-out infinite; }
.sx-arm-left { transform-origin: 36px 79px; animation: sx-arm-idle 7.4s ease-in-out infinite; }
.sx-arm-right { transform-origin: 76px 79px; transition: transform .25s ease; }
.sx-smile { transform-origin: 56px 61px; transition: transform .2s ease; }
.sx-launcher.sx-reacting .sx-arm-right { animation: sx-wave .95s ease-in-out both; }
.sx-launcher.sx-reacting .sx-head { animation: sx-attention .95s ease-in-out both; }
.sx-launcher.sx-reacting .sx-eye-glow { opacity: .9; }
.sx-launcher[aria-expanded="true"] .sx-smile { transform: scaleX(1.15); }
.sx-launcher[aria-expanded="true"] .sx-aura { opacity: 1; }
.sx-launcher.sx-dragging svg * { animation-play-state: paused; }
.sx-launcher { transition: filter .2s ease; }
.sx-launcher:active, .sx-launcher[aria-expanded="true"] { filter: drop-shadow(0 7px 17px rgba(24, 116, 247, .3)); }
@media (hover: hover) and (pointer: fine) { .sx-launcher:hover { filter: drop-shadow(0 7px 17px rgba(24, 116, 247, .35)); } }
.sx-panel-avatar { flex: 0 0 30px; height: 27px; display: flex; justify-content: center; align-items: center; gap: 5px; border: 3px solid #e2edf7; border-radius: 10px; background: linear-gradient(145deg, #1a293a, #02060c); box-shadow: 0 0 14px rgba(22, 132, 255, .1); }
.sx-panel-avatar i { width: 6px; height: 4px; border: 1.5px solid #65caff; border-bottom: 0; border-radius: 6px 6px 0 0; box-shadow: 0 -2px 5px rgba(53, 162, 255, .2); }
.sx-panel-tail { position: fixed; width: 12px; height: 12px; transform: rotate(45deg); background: #060f21; border-right: 1px solid rgba(60, 139, 245, .43); border-bottom: 1px solid rgba(60, 139, 245, .43); pointer-events: none; }
.sx-panel-tail.sx-tail-below { background: #0a182d; border: 0; border-left: 1px solid rgba(60, 139, 245, .43); border-top: 1px solid rgba(60, 139, 245, .43); }
.sx-hint { border-radius: 14px; border-color: rgba(78, 152, 249, .38); background: linear-gradient(145deg, #0c1d36, #060f21); box-shadow: 0 14px 32px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(152, 201, 255, .06); animation: sx-panel-in .2s ease-out; }
.sx-hint::after { content: ""; position: absolute; bottom: -5px; left: calc(var(--sx-hint-tail, 50%) - 4px); width: 8px; height: 8px; background: #071225; border-right: 1px solid rgba(78, 152, 249, .38); border-bottom: 1px solid rgba(78, 152, 249, .38); transform: rotate(45deg); }
@keyframes sx-blink { 0%, 39%, 42%, 69%, 72%, 74%, 77%, 100% { transform: scaleY(1); } 40.5%, 70.5%, 75.5% { transform: scaleY(.08); } }
@keyframes sx-head-idle { 0%, 30%, 100% { transform: rotate(-1deg); } 55%, 75% { transform: rotate(1.5deg); } }
@keyframes sx-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015, 1.025); } }
@keyframes sx-antenna-idle { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(3deg); } }
@keyframes sx-eye-light { 0%, 100% { opacity: .4; } 50% { opacity: .7; } }
@keyframes sx-beacon-light { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@keyframes sx-aura-breathe { 0%, 100% { opacity: .6; transform: scale(.97); } 50% { opacity: .95; transform: scale(1.04); } }
@keyframes sx-ring-breathe { 0%, 100% { opacity: .6; transform: scaleX(1); } 50% { opacity: .85; transform: scaleX(.88); } }
@keyframes sx-arm-idle { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(4deg); } }
@keyframes sx-wave { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-42deg); } 48% { transform: rotate(-32deg); } 66% { transform: rotate(-45deg); } }
@keyframes sx-attention { 0%, 100% { transform: rotate(0); } 40%, 70% { transform: rotate(-4deg) translateY(-1px); } }

/* SX CORE: detached ceramic modules and an explicit acknowledgement blink. */
.sx-core-module-left { transform-origin: 17px 58px; animation: sx-module-left-idle 6.4s ease-in-out infinite; }
.sx-core-module-right { transform-origin: 95px 58px; animation: sx-module-right-idle 7.1s ease-in-out infinite; }
.sx-launcher.sx-reacting .sx-core-module-left { animation: sx-core-greet-left 1s ease-in-out both; }
.sx-launcher.sx-reacting .sx-core-module-right { animation: sx-core-greet-right 1s ease-in-out both; }
.sx-launcher.sx-reacting .sx-eye-blink { animation: sx-core-hello-blink .9s ease-in-out both; }
.sx-launcher.sx-reacting .sx-gaze { transform: translate(var(--sx-gaze-x, 0px), var(--sx-gaze-y, 0px)) scaleX(1.05); }
.sx-launcher.sx-reacting .sx-aura { animation: sx-core-greet-glow 1s ease-in-out both; }
@keyframes sx-module-left-idle { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-3px) rotate(2deg); } }
@keyframes sx-module-right-idle { 0%, 100% { transform: translateY(-1px) rotate(2deg); } 50% { transform: translateY(2px) rotate(-2deg); } }
@keyframes sx-core-greet-left { 0%, 100% { transform: translate(0, 0); } 40%, 65% { transform: translate(-2px, -4px) rotate(-6deg); } }
@keyframes sx-core-greet-right { 0%, 100% { transform: translate(0, 0); } 40%, 65% { transform: translate(2px, -4px) rotate(6deg); } }
@keyframes sx-core-hello-blink { 0%, 8%, 34%, 100% { transform: scaleY(1); } 20% { transform: scaleY(.05); } 55%, 75% { transform: scaleY(1.12); } }
@keyframes sx-core-greet-glow { 0%, 100% { opacity: .6; transform: scale(1); } 40%, 65% { opacity: 1; transform: scale(1.08); } }

/* Approved 3D artwork. Layer masks move the actual rendered parts, never vector substitutes. */
.sx-core-raster { display: block; position: relative; width: 100%; height: 100%; pointer-events: none; animation: sx-float 6.8s ease-in-out infinite; }
.sx-raster-part { position: absolute; inset: 0; display: block; background: url('/assets/sx-core-3d.webp') center / 100% 100% no-repeat; }
.sx-core-head, .sx-core-head-look { position: absolute; inset: 0; display: block; }
.sx-core-head { z-index: 4; transform-origin: 55% 58%; }
.sx-core-head-look { transform: perspective(260px) rotateY(var(--sx-core-yaw, 0deg)) rotateX(var(--sx-core-pitch, 0deg)); transition: transform .18s ease-out; }
.sx-core-head-surface { clip-path: polygon(13% 5%, 89% 5%, 91% 55%, 87% 61%, 78% 65%, 64% 64%, 41% 60%, 29% 58%, 18% 48%, 12% 40%); }
.sx-core-body { z-index: 2; clip-path: polygon(30% 60%, 39% 58%, 61% 62%, 71% 64%, 73% 85%, 60% 93%, 34% 93%, 29% 77%); transform-origin: 51% 77%; }
.sx-core-raster > .sx-core-module-left { z-index: 3; clip-path: polygon(2% 45%, 16% 47%, 29% 56%, 31% 65%, 29% 78%, 18% 80%, 5% 63%); transform-origin: 18% 64%; }
.sx-core-raster > .sx-core-module-right { z-index: 3; clip-path: polygon(72% 65%, 84% 65%, 97% 73%, 96% 80%, 78% 88%, 70% 87%); transform-origin: 82% 77%; }
.sx-core-eyes-off { background-image: url('/assets/sx-core-eyes-off.webp'); clip-path: polygon(42% 30%, 62% 33%, 83% 40%, 84% 55%, 66% 56%, 42% 46%); opacity: 0; animation: sx-raster-blink 7.7s linear infinite; }
.sx-core-aura { position: absolute; inset: 16% 8% 3%; border-radius: 50%; background: radial-gradient(ellipse at 50% 70%, rgba(22, 132, 255, .16), transparent 66%); animation: sx-aura-breathe 5.8s ease-in-out infinite; }
.sx-launcher.sx-reacting .sx-core-eyes-off { animation: sx-raster-hello-blink .9s ease-in-out both; }
.sx-launcher.sx-reacting .sx-core-aura { animation: sx-core-greet-glow 1s ease-in-out both; }
.sx-launcher.sx-dragging .sx-core-raster, .sx-launcher.sx-dragging .sx-core-raster * { animation-play-state: paused; }
.sx-panel-avatar { background: #071223 url('/assets/sx-core-3d.webp') center 32% / 34px 34px no-repeat; border: 1px solid rgba(103, 174, 246, .4); border-radius: 10px; }
.sx-panel-avatar i { visibility: hidden; }
@keyframes sx-raster-blink { 0%, 39%, 42%, 69%, 72%, 74%, 77%, 100% { opacity: 0; } 40.5%, 70.5%, 75.5% { opacity: 1; } }
@keyframes sx-raster-hello-blink { 0%, 8%, 34%, 100% { opacity: 0; } 20% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sx-core-raster, .sx-core-raster * { animation: none !important; transition: none !important; }
  .sx-core-eyes-off { opacity: 0 !important; }
  .sx-core-head-look { transform: none; }
}

/* Always acknowledge interaction, including when the device requests reduced motion. */
.sx-core-expression { background-image: url('/assets/sx-core-attentive.webp'); clip-path: polygon(42% 29%, 62% 32%, 83% 39%, 84% 56%, 66% 57%, 42% 47%); opacity: 0; transition: opacity .12s ease; }
.sx-core-eyes-off { z-index: 2; }
.sx-launcher.sx-hovered .sx-core-expression,
.sx-launcher.sx-reacting .sx-core-expression,
.sx-launcher.sx-dragging .sx-core-expression { opacity: 1; }
.sx-launcher.sx-hovered { filter: drop-shadow(0 6px 19px rgba(24, 135, 255, .5)); }
.sx-launcher.sx-hovered .sx-core-raster,
.sx-launcher.sx-reacting .sx-core-raster { animation: sx-core-notice 1.1s ease-in-out; }
.sx-launcher.sx-hovered .sx-core-module-left { animation: sx-core-active-left 1.6s ease-in-out infinite; }
.sx-launcher.sx-hovered .sx-core-module-right { animation: sx-core-active-right 1.6s ease-in-out infinite; }
.sx-launcher.sx-hovered .sx-core-aura { opacity: 1; }
.sx-launcher.sx-dragging .sx-core-raster { animation: none; transform: rotate(-5deg) scale(1.05); }
@keyframes sx-core-notice { 0%, 100% { transform: translateY(0) rotate(0) scale(1); } 30%, 65% { transform: translateY(-5px) rotate(-5deg) scale(1.055); } }
@keyframes sx-core-active-left { 0%, 100% { transform: translate(-2px, -2px) rotate(-3deg); } 50% { transform: translate(-5px, -5px) rotate(-8deg); } }
@keyframes sx-core-active-right { 0%, 100% { transform: translate(2px, -2px) rotate(3deg); } 50% { transform: translate(5px, -4px) rotate(8deg); } }
@media (prefers-reduced-motion: reduce) {
  .sx-launcher.sx-dragging .sx-core-raster { transform: none; }
}