:root {
  --guide-navy: #06172d;
  --guide-blue: #123b5d;
  --guide-lime: #b9ef19;
  --guide-gold: #d8ad32;
  --guide-white: #f8fbff;
}

.lucidity-guide-host {
  position: fixed;
  z-index: 10020;
  right: clamp(18px, 2.2vw, 38px);
  bottom: clamp(18px, 2.2vw, 34px);
  width: min(680px, calc(100vw - 36px));
  pointer-events: none;
  font-family: Arial, Helvetica, sans-serif;
  transform: translateX(0);
  transition: transform 1.55s cubic-bezier(.45,0,.2,1);
}
.lucidity-guide-host.tour-side-left { transform: translateX(calc(-100vw + 100% + 76px)); }
.lucidity-guide-host.is-tour-travelling .lucidity-guide-stage { filter: drop-shadow(0 22px 30px rgba(185,239,25,.28)); }
.lucidity-guide-host.is-tour-travelling .lucidity-guide-copy { border-color: rgba(216,173,50,.82); }

.lucidity-guide-screen-note {
  position: fixed;
  z-index: 10019;
  top: clamp(90px, 11vh, 150px);
  left: 50%;
  max-width: calc(100vw - 40px);
  padding: 16px 28px;
  border: 2px solid var(--guide-lime);
  border-radius: 999px;
  color: var(--guide-white);
  background: rgba(4,20,39,.96);
  box-shadow: 0 0 0 8px rgba(185,239,25,.1), 0 0 44px rgba(185,239,25,.48), 0 18px 48px rgba(0,0,0,.48);
  font: 850 clamp(20px, 2vw, 32px)/1.15 Arial, Helvetica, sans-serif;
  letter-spacing: .025em;
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}
.lucidity-guide-screen-note.has-image {
  top: clamp(74px, 8vh, 108px);
  width: min(58vw, 1040px);
  padding: 10px;
  border-radius: 22px;
  background: rgba(4,20,39,.98);
}
.lucidity-guide-screen-note.has-image.has-cross::before,
.lucidity-guide-screen-note.has-image.has-cross::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 88%;
  height: clamp(13px, 1.6vw, 24px);
  border: 2px solid rgba(255,255,255,.76);
  border-radius: 999px;
  background: #e31927;
  box-shadow: 0 0 0 6px rgba(227,25,39,.16), 0 0 34px rgba(227,25,39,.9), 0 10px 26px rgba(0,0,0,.44);
  transform-origin: center;
}
.lucidity-guide-screen-note.has-image.has-cross::before { transform: translate(-50%, -50%) rotate(31deg); }
.lucidity-guide-screen-note.has-image.has-cross::after { transform: translate(-50%, -50%) rotate(-31deg); }
.lucidity-guide-screen-note.has-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 58vh;
  object-fit: contain;
  border-radius: 14px;
}
.lucidity-guide-screen-note.has-image strong {
  display: block;
  padding: 10px 12px 3px;
  color: var(--guide-lime);
  font-size: clamp(18px, 1.6vw, 26px);
  letter-spacing: .035em;
}
.lucidity-guide-screen-note.has-image.is-document-record {
  top: 20px;
  left: clamp(12px, 2.2vw, 36px);
  width: min(58vw, 930px);
  max-width: calc(100vw - 24px);
  padding: 8px;
  transform: none;
}
.lucidity-guide-screen-note.has-image.is-document-record img {
  max-height: 84vh;
  border-radius: 12px;
}
.lucidity-guide-screen-note.has-image.is-document-record strong {
  padding: 8px 10px 2px;
  font-size: clamp(15px, 1.15vw, 19px);
}
.lucidity-guide-screen-note.has-page {
  top: clamp(58px, 6vh, 86px);
  width: min(76vw, 1320px);
  height: min(76vh, 860px);
  padding: 10px;
  overflow: hidden;
  border-radius: 22px;
  background: rgba(4,20,39,.98);
}
.lucidity-guide-screen-note.has-page iframe {
  display: block;
  width: 100%;
  height: calc(100% - 48px);
  border: 0;
  border-radius: 14px;
  background: #fff;
}
.lucidity-guide-screen-note.has-page strong {
  display: block;
  height: 42px;
  padding: 9px 12px 3px;
  overflow: hidden;
  color: var(--guide-lime);
  font-size: clamp(16px, 1.35vw, 22px);
  letter-spacing: .035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lucidity-guide-screen-note[hidden] { display: none; }
.lucidity-guide-screen-note.is-module-end {
  top: 50%;
  width: min(680px, calc(100vw - 42px));
  padding: clamp(42px, 7vw, 76px) 34px;
  border-radius: 34px;
  background: radial-gradient(circle at 50% 12%, rgba(185,239,25,.16), transparent 42%), linear-gradient(145deg, #0b3a57, #041427 68%);
  box-shadow: 0 0 0 12px rgba(185,239,25,.11), 0 0 78px rgba(185,239,25,.62), 0 28px 90px rgba(0,0,0,.62);
  transform: translate(-50%, -50%);
}
.lucidity-guide-screen-note.is-module-end small {
  display: block;
  color: var(--guide-gold);
  font-size: clamp(14px, 1.4vw, 19px);
  letter-spacing: .2em;
}
.lucidity-guide-screen-note.is-module-end strong {
  display: block;
  margin: 14px 0 10px;
  color: var(--guide-lime);
  font-size: clamp(62px, 10vw, 126px);
  line-height: .9;
  letter-spacing: .04em;
  text-shadow: 0 0 32px rgba(185,239,25,.48);
}
.lucidity-guide-screen-note.is-module-end span {
  display: block;
  color: var(--guide-white);
  font-size: clamp(18px, 2.2vw, 30px);
  font-weight: 600;
  letter-spacing: .02em;
}

.lucidity-training-halo {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 112px;
  height: 112px;
  display: grid;
  place-content: center;
  gap: 3px;
  padding: 0;
  border: 2px solid var(--guide-lime);
  border-radius: 50%;
  color: var(--guide-white);
  background: radial-gradient(circle at 42% 35%, #75b914 0 6%, #12351e 36%, #071a2e 72%);
  box-shadow: 0 0 0 9px rgba(185,239,25,.09), 0 0 36px rgba(185,239,25,.28), 0 18px 38px rgba(0,0,0,.44);
  cursor: pointer;
  pointer-events: auto;
  transition: transform .24s ease, filter .24s ease;
}

.lucidity-guide-timeline {
  display: grid;
  grid-template-columns: 38px 38px minmax(110px, 1fr) auto 38px;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 18px 0 4px;
  padding: 10px;
  border: 1px solid rgba(185,239,25,.78);
  border-radius: 18px;
  color: var(--guide-white);
  background: rgba(2,13,32,.72);
  box-shadow: inset 0 0 22px rgba(185,239,25,.05);
  pointer-events: auto;
}
.lucidity-guide-timeline[hidden] { display: none; }
.lucidity-guide-timeline button {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--guide-lime);
  border-radius: 50%;
  color: var(--guide-lime);
  background: rgba(8,40,74,.86);
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
}
.lucidity-guide-timeline button:disabled { opacity: .3; cursor: default; }
.lucidity-guide-timeline label { display: grid; gap: 6px; min-width: 0; }
.lucidity-guide-timeline label span {
  color: var(--guide-gold);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
}
.lucidity-guide-timeline input[type="range"] {
  width: 100%;
  margin: 0;
  accent-color: var(--guide-lime);
  cursor: ew-resize;
}
.lucidity-guide-timeline output {
  min-width: 58px;
  color: var(--guide-white);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
}

.lucidity-training-halo:hover,
.lucidity-training-halo:focus-visible { transform: scale(1.055); filter: brightness(1.08); }
.lucidity-training-halo i { width: 10px; height: 10px; margin: 0 auto 2px; border-radius: 50%; background: var(--guide-lime); box-shadow: 0 0 12px var(--guide-lime); }
.lucidity-training-halo b { color: var(--guide-lime); font-size: 19px; letter-spacing: .08em; }
.lucidity-training-halo span { font-size: 10px; font-weight: 700; letter-spacing: .04em; }

.lucidity-guide-panel {
  position: absolute;
  right: 44px;
  bottom: 64px;
  width: min(620px, calc(100vw - 54px));
  min-height: 330px;
  display: grid;
  grid-template-columns: 238px 1fr;
  overflow: hidden;
  border: 1px solid rgba(185,239,25,.72);
  border-radius: 30px;
  color: var(--guide-white);
  background: linear-gradient(135deg, rgba(9,45,69,.98), rgba(4,20,39,.99) 62%);
  box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 50px rgba(185,239,25,.12);
  opacity: 0;
  transform: translate(30px, 40px) scale(.72);
  transform-origin: 100% 100%;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s ease, transform .36s cubic-bezier(.2,.9,.26,1.18), visibility .28s, width .48s ease;
}

.lucidity-guide-host.is-open .lucidity-guide-panel {
  opacity: 1;
  transform: translate(0,0) scale(1);
  visibility: visible;
  pointer-events: auto;
}

.lucidity-guide-stage {
  position: relative;
  overflow: hidden;
  min-height: 330px;
  background: radial-gradient(circle at 50% 28%, rgba(216,173,50,.23), transparent 38%), linear-gradient(180deg, rgba(28,103,106,.54), rgba(5,25,43,.18));
}

.lucidity-guide-host.is-tour-mode .lucidity-guide-stage {
  pointer-events: auto;
  cursor: pointer;
}
.lucidity-guide-host.is-tour-mode .lucidity-guide-stage:focus-visible {
  outline: 3px solid var(--guide-lime);
  outline-offset: 6px;
  border-radius: 28px;
}

.lucidity-guide-stage img {
  position: absolute;
  inset: 10px 0 0;
  width: 100%;
  height: calc(100% - 10px);
  object-fit: contain;
  object-position: center bottom;
  transition: opacity 55ms linear;
}

.lucidity-guide-stage img[data-guide-open] { opacity: 0; }
.lucidity-guide-stage img[data-guide-blink] { opacity: 0; }
.lucidity-guide-stage img[data-guide-open],
.lucidity-guide-stage img[data-guide-blink] { display: none; }

.lucidity-guide-copy {
  padding: 48px 34px 30px;
  align-self: center;
}
.lucidity-guide-copy small { display: block; margin-bottom: 10px; color: var(--guide-gold); font-size: 12px; font-weight: 800; letter-spacing: .16em; }
.lucidity-guide-copy h2 { margin: 0 0 12px; font-size: 31px; line-height: 1.06; }
.lucidity-guide-copy h2 span { color: var(--guide-lime); }
.lucidity-guide-copy p { margin: 0 0 20px; color: #c7d6e4; font-size: 16px; line-height: 1.48; }
.lucidity-guide-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.lucidity-guide-actions button { min-height: 42px; padding: 11px 16px; border: 1px solid var(--guide-lime); border-radius: 999px; color: #081528; background: var(--guide-lime); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.lucidity-guide-actions button:disabled { cursor: wait; opacity: .58; }
.lucidity-guide-actions button + button { color: var(--guide-white); border-color: rgba(216,173,50,.72); background: transparent; }
.lucidity-guide-copy em { display: block; min-height: 16px; margin-top: 14px; color: #8fa7bb; font-size: 11px; font-style: normal; }
.lucidity-guide-copy [hidden] { display: none !important; }
.lucidity-guide-module-menu {
  max-height: min(68vh, 650px);
  padding-right: 7px;
  overflow-y: auto;
  scrollbar-color: rgba(185,239,25,.7) rgba(255,255,255,.08);
  scrollbar-width: thin;
}
.lucidity-guide-module-card {
  display: grid;
  width: 100%;
  margin: 4px 0 14px;
  padding: 18px;
  text-align: left;
  border: 1px solid rgba(185,239,25,.72);
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, rgba(185,239,25,.14), rgba(11,53,69,.58));
  cursor: pointer;
}
.lucidity-guide-module-card b { color: var(--guide-gold); font-size: 11px; letter-spacing: .16em; }
.lucidity-guide-module-card strong { margin-top: 7px; font-size: 20px; line-height: 1.12; }
.lucidity-guide-module-card span { margin-top: 8px; color: #c7d6e4; font-size: 13px; line-height: 1.4; }
.lucidity-guide-module-card i { margin-top: 14px; color: var(--guide-lime); font-size: 11px; font-style: normal; font-weight: 850; letter-spacing: .08em; }
.lucidity-guide-text-button { padding: 0; border: 0; color: #b9ef19; background: transparent; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.lucidity-guide-module-step .lucidity-guide-actions { margin-top: 18px; }
.lucidity-guide-module-step .lucidity-guide-text-button { margin-top: 16px; }
.lucidity-guide-module-step h2 { font-size: 27px; }

.lucidity-tour-focus {
  position: relative;
  z-index: 45;
  scroll-margin-top: 120px;
  outline: 5px solid rgba(195,255,25,.98);
  outline-offset: 8px;
  animation: lucidity-tour-glow 2.6s ease-in-out infinite;
}
@keyframes lucidity-tour-glow {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(195,255,25,.18), 0 0 34px rgba(185,239,25,.48), inset 0 0 22px rgba(185,239,25,.08);
    filter: brightness(1.03);
  }
  50% {
    box-shadow: 0 0 0 13px rgba(195,255,25,.28), 0 0 82px rgba(185,239,25,.82), inset 0 0 38px rgba(185,239,25,.16);
    filter: brightness(1.13);
  }
}
.lucidity-guide-close { position: absolute; z-index: 4; top: 14px; right: 16px; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; color: white; background: rgba(2,12,25,.58); font-size: 23px; line-height: 1; cursor: pointer; }

.lucidity-guide-host.is-kept-hidden .lucidity-training-halo span { display: none; }
.lucidity-guide-host.is-kept-hidden .lucidity-training-halo { width: 86px; height: 86px; }

/* LUCIDITY appears as an independent character, not inside a large panel. */
.lucidity-guide-panel {
  right: 4px;
  bottom: 70px;
  width: min(650px, calc(100vw - 44px));
  min-height: 430px;
  grid-template-columns: minmax(250px, 310px) minmax(260px, 320px);
  align-items: center;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.lucidity-guide-stage {
  min-height: 430px;
  overflow: visible;
  background: transparent;
  filter: drop-shadow(0 22px 24px rgba(0,0,0,.42));
}

.lucidity-guide-stage img {
  inset: 0;
  height: 100%;
  object-position: center bottom;
}

.lucidity-guide-copy {
  position: relative;
  margin-left: -8px;
  padding: 30px 28px 26px;
  border: 1px solid rgba(185,239,25,.7);
  border-radius: 24px;
  background: rgba(4,20,39,.94);
  box-shadow: 0 18px 52px rgba(0,0,0,.42);
  backdrop-filter: blur(12px);
  transition: opacity .34s ease, transform .44s ease, visibility .34s;
}

.lucidity-guide-host.is-tour-copy-hidden .lucidity-guide-panel {
  right: 4px;
  width: 310px;
  grid-template-columns: 310px 0;
}
.lucidity-guide-host.tour-side-left.is-tour-copy-hidden .lucidity-guide-panel {
  right: auto;
  left: 0;
}
.lucidity-guide-host.is-tour-copy-hidden .lucidity-guide-copy {
  display: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(18px) scale(.96);
}
.lucidity-guide-host.is-tour-copy-hidden .lucidity-guide-close {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.lucidity-guide-host.is-tour-copy-hidden .lucidity-guide-stage {
  animation: lucidity-guide-invite 3.2s ease-in-out infinite;
}
@keyframes lucidity-guide-invite {
  0%, 100% { filter: drop-shadow(0 22px 24px rgba(0,0,0,.42)); }
  50% { filter: drop-shadow(0 22px 31px rgba(185,239,25,.36)); }
}

.lucidity-guide-copy::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 74px;
  width: 26px;
  height: 26px;
  border-left: 1px solid rgba(185,239,25,.7);
  border-bottom: 1px solid rgba(185,239,25,.7);
  background: rgba(4,20,39,.94);
  transform: rotate(45deg);
}

.lucidity-guide-close {
  top: 18px;
  right: 18px;
}

@media (max-width: 680px) {
  .lucidity-guide-screen-note.has-image { top: 76px; width: calc(100vw - 24px); }
  .lucidity-guide-screen-note.has-image.is-document-record { top: 10px; left: 12px; width: calc(100vw - 24px); }
  .lucidity-guide-screen-note.has-image.is-document-record img { max-height: 72vh; }
  .lucidity-guide-screen-note.has-page { top: 68px; width: calc(100vw - 20px); height: 72vh; }
  .lucidity-guide-host, .lucidity-guide-host.tour-side-left { right: 12px; bottom: 12px; width: calc(100vw - 24px); transform: none; }
  .lucidity-guide-panel { right: 0; bottom: 72px; width: 100%; min-height: 500px; grid-template-columns: 1fr; grid-template-rows: 300px auto; border-radius: 0; }
  .lucidity-guide-stage { min-height: 300px; }
  .lucidity-guide-copy { margin: -18px 4px 0; padding: 23px 24px 24px; }
  .lucidity-guide-copy::before { left: 50%; top: -13px; transform: translateX(-50%) rotate(135deg); }
  .lucidity-guide-copy h2 { font-size: 27px; }
  .lucidity-guide-host.is-tour-copy-hidden .lucidity-guide-panel { right: 0; left: auto; width: min(300px, calc(100vw - 24px)); grid-template-columns: 1fr; grid-template-rows: 300px 0; }
  .lucidity-training-halo { width: 88px; height: 88px; }
  .lucidity-training-halo span { display: none; }
  .lucidity-guide-timeline {
    grid-template-columns: 36px 36px minmax(80px, 1fr) 44px 36px;
    gap: 7px;
    width: 100%;
    margin: 16px 0 4px;
    padding: 8px 9px;
  }
  .lucidity-guide-timeline button { width: 36px; height: 36px; font-size: 17px; }
  .lucidity-guide-timeline label span { font-size: 8px; letter-spacing: .08em; }
  .lucidity-guide-timeline output { min-width: 48px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .lucidity-guide-host, .lucidity-guide-panel, .lucidity-training-halo, .lucidity-guide-stage img { transition: none; }
  .lucidity-tour-focus { animation: none; }
  .lucidity-guide-host.is-tour-copy-hidden .lucidity-guide-stage { animation: none; }
}