:root {
  --okita-cyan: #21f4ef;
  --okita-yellow: #fff31d;
  --okita-red: #ff3a22;
  --okita-blue: #061d3b;
  --okita-deep: rgba(1, 10, 24, .96);
}

.okita-auto-guide {
  position: fixed;
  z-index: 160;
  right: clamp(10px, 1.5vw, 24px);
  bottom: clamp(38px, 5vh, 58px);
  display: grid;
  grid-template-columns: minmax(280px, 470px) 112px;
  align-items: end;
  gap: 10px;
  max-width: min(620px, calc(100vw - 22px));
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(.985);
  transition: opacity .36s ease, transform .48s cubic-bezier(.2,.8,.2,1);
}

.okita-auto-guide[hidden] { display: none !important; }
.okita-auto-guide[data-state="visible"] { opacity: 1; transform: none; }
.okita-auto-guide.is-leaving { opacity: 0; transform: translate3d(0, 22px, 0) scale(.97); }

.okita-auto-dialogue {
  position: relative;
  pointer-events: auto;
  min-width: 0;
  max-height: 190px;
  overflow: hidden;
  border: 2px solid var(--okita-yellow);
  background:
    linear-gradient(90deg, rgba(33,244,239,.045) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(180deg, rgba(5,29,61,.97), var(--okita-deep));
  box-shadow: 8px 9px 0 rgba(0,0,0,.32), 0 0 22px rgba(33,244,239,.12), inset 0 0 0 2px rgba(0,0,0,.55);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.okita-auto-dialogue::after {
  content: "";
  position: absolute;
  right: -9px;
  bottom: 24px;
  width: 18px;
  height: 18px;
  border-right: 2px solid var(--okita-yellow);
  border-bottom: 2px solid var(--okita-yellow);
  background: #031126;
  transform: rotate(-45deg);
}

.okita-auto-dialogue-head,
.okita-auto-dialogue-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.okita-auto-dialogue-head {
  border-bottom: 1px solid rgba(33,244,239,.32);
  color: var(--okita-cyan);
  background: rgba(0, 4, 14, .42);
}
.okita-auto-dialogue-head strong { color: #fff; font-size: 11px; }
.okita-auto-route { margin-left: auto; color: var(--okita-yellow); }
.okita-auto-dialogue-foot {
  justify-content: space-between;
  border-top: 1px solid rgba(33,244,239,.2);
  color: #9db1c9;
}
.okita-auto-live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--okita-red);
  box-shadow: 0 0 10px var(--okita-red);
  animation: okita-live 1.2s ease-out infinite;
}
.okita-auto-guide.is-speaking .okita-auto-live-dot { background: var(--okita-yellow); box-shadow: 0 0 12px var(--okita-yellow); }

.okita-auto-icon {
  width: 25px; height: 25px; min-width: 25px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid rgba(33,244,239,.36);
  color: #fff;
  background: rgba(0,12,28,.78);
  cursor: pointer;
  font: 700 12px/1 system-ui, sans-serif;
}
.okita-auto-icon:hover, .okita-auto-icon:focus-visible { border-color: var(--okita-yellow); color: var(--okita-yellow); outline: none; }

.okita-auto-dialogue-text {
  min-height: 70px;
  max-height: 112px;
  margin: 0;
  padding: 13px 15px 12px;
  overflow: auto;
  scrollbar-width: thin;
  color: #f8fbff;
  font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  font-size: clamp(13px, 1.05vw, 15px);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .015em;
  text-shadow: 1px 1px 0 #000;
}

.okita-auto-character {
  position: relative;
  width: 112px;
  pointer-events: none;
  filter: drop-shadow(0 12px 6px rgba(0,0,0,.58));
  transform-origin: 50% 100%;
  animation: okita-idle 1.8s steps(2,end) infinite;
}
.okita-auto-guide.is-speaking .okita-auto-character { animation: okita-talk .28s steps(2,end) infinite; }
.okita-auto-sprite { display: block; width: 112px; height: auto; overflow: visible; image-rendering: pixelated; image-rendering: crisp-edges; }
.okita-auto-shadow { position:absolute; left:50%; bottom:-3px; width:82px; height:14px; border-radius:50%; background:rgba(0,0,0,.58); filter:blur(5px); transform:translateX(-50%); z-index:-1; }

/* Pixel palette, scoped to the attached SVG design. */
.okita-auto-guide .skin-main { fill:#f5c78e; }.okita-auto-guide .skin-light{fill:#fff0d0}.okita-auto-guide .skin-shadow{fill:#d99a62}.okita-auto-guide .skin-deep{fill:#b86f48}
.okita-auto-guide .hair-black{fill:#08080c}.okita-auto-guide .hair-dark{fill:#151019}.okita-auto-guide .hair-main{fill:#251821}.okita-auto-guide .hair-shadow{fill:#0d0b11}.okita-auto-guide .hair-highlight{fill:#49303a}
.okita-auto-guide .eye-sclera-dark{fill:#1d0708}.okita-auto-guide .eye-pupil-slit{fill:#100000}.okita-auto-guide .eye-shine-hot{fill:#fffbd0}.okita-auto-guide .fire-underlight{fill:#ff3a12;opacity:.72}
.okita-auto-guide .mouth-dark{fill:#321319}.okita-auto-guide .teeth{fill:#fff7df}.okita-auto-guide .tongue{fill:#d55e5e}
.okita-auto-guide .ribbon-main{fill:#e64c1d}.okita-auto-guide .ribbon-bright{fill:#ff7a2e}.okita-auto-guide .ribbon-dark{fill:#8f2518}
.okita-auto-guide .scarf-main{fill:#db4c20}.okita-auto-guide .scarf-bright{fill:#ff7a2b}.okita-auto-guide .scarf-dark{fill:#171116}
.okita-auto-guide .haori-main{fill:#45d5bd}.okita-auto-guide .haori-light{fill:#a7fff0}.okita-auto-guide .haori-highlight{fill:#72efdb}.okita-auto-guide .haori-shadow{fill:#25aa9a}.okita-auto-guide .haori-dark{fill:#167a73}
.okita-auto-guide .kimono-main{fill:#191a21}.okita-auto-guide .kimono-dark{fill:#101117}.okita-auto-guide .kimono-black{fill:#06070b}.okita-auto-guide .kimono-highlight{fill:#2d303a}
.okita-auto-guide .belt-dark{fill:#171116}.okita-auto-guide .belt-brown{fill:#6a3517}.okita-auto-guide .gold{fill:#ffc53e}.okita-auto-guide .hakama-main{fill:#24252d}.okita-auto-guide .hakama-dark{fill:#111218}.okita-auto-guide .hakama-highlight{fill:#363845}.okita-auto-guide .leg-wrap{fill:#211719}.okita-auto-guide .sandal-dark{fill:#120d0d}.okita-auto-guide .sword-sheath{fill:#1a1113}.okita-auto-guide .sword-sheath-highlight{fill:#6c2d23}.okita-auto-guide .sword-guard{fill:#d99c25}.okita-auto-guide .sword-handle{fill:#342021}
.okita-auto-guide .eyes-blink,.okita-auto-guide .mouth-open-small,.okita-auto-guide .mouth-open-wide{display:none}
.okita-auto-guide.is-blinking .eyes-open{display:none}.okita-auto-guide.is-blinking .eyes-blink{display:block}
.okita-auto-guide[data-mouth="0"] .mouth-closed{display:block}
.okita-auto-character[data-mouth="0"] .mouth-closed{display:block}.okita-auto-character[data-mouth="0"] .mouth-open-small,.okita-auto-character[data-mouth="0"] .mouth-open-wide{display:none}
.okita-auto-character[data-mouth="1"] .mouth-closed,.okita-auto-character[data-mouth="1"] .mouth-open-wide{display:none}.okita-auto-character[data-mouth="1"] .mouth-open-small{display:block}
.okita-auto-character[data-mouth="2"] .mouth-closed,.okita-auto-character[data-mouth="2"] .mouth-open-small{display:none}.okita-auto-character[data-mouth="2"] .mouth-open-wide{display:block}
.okita-auto-guide .fire-iris{transform-box:fill-box;transform-origin:center;animation:okita-iris 1.25s steps(3,end) infinite}
.okita-auto-guide .eye-flame{transform-box:fill-box;transform-origin:50% 100%;animation:okita-flame .42s steps(2,end) infinite alternate}
.okita-auto-guide .eye-flame-right{animation-delay:-.18s}.okita-auto-guide .fire-iris-right{animation-delay:-.3s}
.okita-auto-guide.is-speaking .fire-eyes{filter:url(#fireEyeGlow) drop-shadow(0 0 6px #ff2900) drop-shadow(0 0 10px rgba(255,94,0,.82))}
.okita-auto-guide .ponytail{transform-origin:40px 38px;animation:okita-ponytail 1.65s steps(3,end) infinite}.okita-auto-guide .scarf{transform-origin:105px 120px;animation:okita-scarf 1.35s steps(3,end) infinite}

.okita-auto-focus { outline: 2px solid rgba(255,243,29,.9) !important; outline-offset: 3px; box-shadow: 0 0 0 5px rgba(33,244,239,.12), 0 0 28px rgba(255,243,29,.12) !important; transition: outline-color .25s ease, box-shadow .25s ease; }

@keyframes okita-live { 0%{box-shadow:0 0 0 0 rgba(255,58,34,.62),0 0 8px #ff3a22} 100%{box-shadow:0 0 0 8px rgba(255,58,34,0),0 0 8px #ff3a22} }
@keyframes okita-idle { 0%,100%{transform:translateY(0) rotate(-.3deg)} 50%{transform:translateY(-4px) rotate(.3deg)} }
@keyframes okita-talk { 0%,100%{transform:translateY(0) rotate(-.65deg)} 50%{transform:translateY(-3px) rotate(.65deg)} }
@keyframes okita-flame { 0%{transform:translateY(1px) scaleY(.82);opacity:.72} 100%{transform:translateY(-2px) scaleY(1.18);opacity:1} }
@keyframes okita-iris { 0%,100%{transform:scale(.94)} 50%{transform:scale(1.08)} }
@keyframes okita-ponytail { 0%,100%{transform:rotate(-1deg)} 50%{transform:rotate(2deg)} }
@keyframes okita-scarf { 0%,100%{transform:rotate(-.8deg)} 50%{transform:rotate(1.8deg)} }

@media (max-width: 820px) {
  .okita-auto-guide { right: 8px; bottom: 38px; grid-template-columns: minmax(0, 1fr) 82px; width: min(430px, calc(100vw - 16px)); gap: 6px; }
  .okita-auto-character, .okita-auto-sprite { width: 82px; }
  .okita-auto-dialogue { max-height: 172px; }
  .okita-auto-dialogue-text { font-size: 12px; max-height: 98px; min-height: 64px; padding: 10px 12px; }
  .okita-auto-dialogue-head, .okita-auto-dialogue-foot { padding: 6px 8px; font-size: 9px; }
}

@media (max-width: 480px) {
  .okita-auto-guide { bottom: 34px; grid-template-columns: minmax(0, 1fr) 66px; }
  .okita-auto-character, .okita-auto-sprite { width: 66px; }
  .okita-auto-dialogue { max-height: 160px; }
  .okita-auto-dialogue-text { font-size: 11.5px; line-height: 1.62; max-height: 91px; }
  .okita-auto-dialogue-head strong { font-size: 10px; }
  .okita-auto-dialogue::after { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  .okita-auto-guide, .okita-auto-character, .okita-auto-guide .fire-iris, .okita-auto-guide .eye-flame, .okita-auto-live-dot, .okita-auto-guide .ponytail, .okita-auto-guide .scarf { animation:none !important; transition:none !important; }
}

@media print { .okita-auto-guide { display:none !important; } }


/* V6 Unified IT Command integration: smaller landing typography and compact recruiter guide. */
.text-card h1 {
  font-size: clamp(2.45rem, 5.25vw, 5.15rem) !important;
  line-height: .88 !important;
  letter-spacing: .018em !important;
}
.text-card h2 {
  font-size: clamp(2.15rem, 4.55vw, 4.25rem) !important;
  line-height: .9 !important;
}
.text-card {
  max-width: min(470px, 40vw) !important;
  padding: clamp(1.45rem, 2.5vw, 2rem) clamp(1.35rem, 2.4vw, 1.85rem) !important;
}
.body-text { font-size: clamp(.76rem, .86vw, .88rem) !important; line-height: 1.72 !important; }

.okita-auto-guide {
  z-index: 210;
  right: clamp(8px, 1.1vw, 18px);
  bottom: calc(var(--footer-h) + 10px);
  grid-template-columns: minmax(230px, 390px) 94px;
  max-width: min(500px, calc(100vw - 18px));
  gap: 7px;
}
.okita-auto-dialogue { max-height: 168px; }
.okita-auto-dialogue-text {
  min-height: 58px;
  max-height: 93px;
  padding: 10px 12px;
  font-size: clamp(11.5px, .85vw, 13px);
  line-height: 1.62;
}
.okita-auto-dialogue-head,
.okita-auto-dialogue-foot { padding: 5px 8px; font-size: 8.5px; }
.okita-auto-dialogue-head strong { font-size: 10px; }
.okita-auto-character,
.okita-auto-sprite { width: 94px; }
.okita-auto-shadow { width: 68px; height: 11px; }
.okita-auto-focus {
  outline: 2px solid rgba(255,243,29,.82) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(33,244,239,.09), 0 0 20px rgba(255,243,29,.10) !important;
}

@media (max-width: 980px) {
  .text-card { max-width: min(500px, 88vw) !important; }
  .text-card h1 { font-size: clamp(2.35rem, 11vw, 4.7rem) !important; }
  .text-card h2 { font-size: clamp(2.05rem, 9vw, 3.8rem) !important; }
  .okita-auto-guide {
    right: 7px;
    bottom: calc(var(--footer-h) + 7px);
    grid-template-columns: minmax(0, 1fr) 76px;
    width: min(405px, calc(100vw - 14px));
  }
  .okita-auto-character, .okita-auto-sprite { width: 76px; }
}
@media (max-width: 560px) {
  .text-card { padding: 1.1rem !important; max-width: 93vw !important; }
  .text-card h1 { font-size: clamp(2rem, 10.7vw, 3.45rem) !important; }
  .text-card h2 { font-size: clamp(1.8rem, 9.2vw, 3rem) !important; }
  .body-text { font-size: .78rem !important; }
  .okita-auto-guide {
    grid-template-columns: minmax(0, 1fr) 62px;
    width: calc(100vw - 10px);
    right: 5px;
    bottom: calc(var(--footer-h) + 5px);
    gap: 4px;
  }
  .okita-auto-character, .okita-auto-sprite { width: 62px; }
  .okita-auto-dialogue { max-height: 148px; }
  .okita-auto-dialogue-text { font-size: 10.8px; max-height: 80px; min-height: 52px; padding: 8px 9px; }
  .okita-auto-dialogue-head, .okita-auto-dialogue-foot { font-size: 7.8px; padding: 4px 6px; }
  .okita-auto-icon { width: 22px; min-width: 22px; height: 22px; font-size: 10px; }
}