:root {
  --bg: #010101;
  --ink: #eeeeea;
  --word-x: 50%;
  --word-y: 50%;
  --core-x: 50%;
  --core-y: 50%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-family: "Bricolage Grotesque", "Noto Sans SC", system-ui, sans-serif;
}

.guide-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at var(--guide-x, 50%) var(--guide-y, 50%), rgba(255, 255, 255, 0.018), transparent 18%),
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.012), transparent 58%),
    linear-gradient(180deg, #030303 0%, #000 36%, #010101 68%, #000 100%);
  isolation: isolate;
}

.guide-page::before,
.guide-page::after {
  content: "";
  position: fixed;
  inset: -14%;
  z-index: 0;
  pointer-events: none;
}

.guide-page::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.014), transparent 20%, transparent 80%, rgba(255, 255, 255, 0.01)),
    radial-gradient(ellipse at 50% 50%, transparent 0 34%, rgba(0, 0, 0, 0.56) 76%, rgba(0, 0, 0, 0.96) 100%);
  opacity: 0.94;
}

.guide-page::after {
  background:
    radial-gradient(circle at 22% 46%, rgba(255, 255, 255, 0.045) 0 1px, transparent 1.8px),
    radial-gradient(circle at 62% 38%, rgba(255, 255, 255, 0.036) 0 1px, transparent 1.8px),
    radial-gradient(circle at 84% 58%, rgba(255, 255, 255, 0.028) 0 1px, transparent 1.8px);
  background-size: 420px 190px, 560px 260px, 700px 310px;
  opacity: 0.08;
  mix-blend-mode: screen;
  animation: guide-star-drift 18s ease-in-out infinite alternate;
}

.guide-page--right {
  --word-x: 65%;
  --word-y: 45%;
  --core-x: 65%;
  --core-y: 45%;
}

.guide-page--left {
  --word-x: 35%;
  --word-y: 56%;
  --core-x: 35%;
  --core-y: 56%;
}

.guide-page--center {
  --word-x: 50%;
  --word-y: 50%;
  --core-x: 50%;
  --core-y: 50%;
}

.guide-canvas,
.guide-flash,
.guide-hit {
  position: fixed;
  inset: 0;
}

.guide-canvas {
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.82;
  filter: brightness(0.82) contrast(0.96) saturate(0);
}

.guide-hit {
  z-index: 2;
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  outline: none;
}

.guide-hit:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.2);
  outline-offset: -20px;
}

.guide-back-hit {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 3;
  width: min(22vw, 260px);
  height: 100vh;
  color: rgba(238, 238, 234, 0.3);
  cursor: w-resize;
  outline: none;
  text-decoration: none;
}

.guide-back-hit::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 50%;
  width: 1px;
  height: 92px;
  background: linear-gradient(180deg, transparent, rgba(238, 238, 234, 0.28), transparent);
  opacity: 0;
  transform: translateY(-50%) scaleY(0.72);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.guide-back-hit span {
  position: absolute;
  left: 40px;
  top: 50%;
  color: rgba(238, 238, 234, 0.32);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  opacity: 0;
  transform: translateY(-50%) translateX(-8px);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.guide-back-hit:hover::before,
.guide-back-hit:focus-visible::before,
.guide-back-hit:hover span,
.guide-back-hit:focus-visible span {
  opacity: 1;
  transform: translateY(-50%) translateX(0) scaleY(1);
}

.guide-word {
  position: absolute;
  left: var(--word-x);
  top: var(--word-y);
  color: rgba(255, 255, 255, 0.095);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(5.8rem, 18vw, 20rem);
  font-weight: 400;
  line-height: 0.78;
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.2),
    0 0 38px rgba(255, 255, 255, 0.065),
    0 0 150px rgba(255, 255, 255, 0.035);
  transform: translate(-50%, -50%) scale(0.985);
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.05);
  animation: guide-word-enter 900ms cubic-bezier(0.16, 0.88, 0.18, 1) both;
}

.guide-page--final .guide-word {
  color: rgba(255, 255, 255, 0.12);
  font-size: clamp(5.8rem, 18vw, 18rem);
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.24),
    0 0 90px rgba(255, 255, 255, 0.08);
}

.guide-page--left .guide-word {
  font-size: clamp(5.2rem, 15vw, 17rem);
}

.guide-core {
  position: absolute;
  left: var(--core-x);
  top: var(--core-y);
  z-index: 3;
  display: grid;
  gap: 9px;
  place-items: center;
  min-width: min(42vw, 420px);
  color: rgba(238, 238, 234, 0.82);
  text-align: center;
  transform: translate(-50%, -50%);
  animation: guide-core-enter 960ms cubic-bezier(0.16, 0.88, 0.18, 1) 80ms both;
}

.guide-core::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(32vw, 320px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(238, 238, 234, 0.28), transparent);
  opacity: 0.26;
  transform: translate(-50%, -50%);
}

.guide-index {
  color: rgba(238, 238, 234, 0.28);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.guide-core strong {
  color: rgba(238, 238, 234, 0.86);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.45rem, 3vw, 2.65rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-shadow:
    0 0 18px rgba(255, 255, 255, 0.24),
    0 0 72px rgba(255, 255, 255, 0.1);
}

.guide-core em {
  color: rgba(238, 238, 234, 0.42);
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.11);
}

.guide-hit:hover .guide-word,
.guide-hit:focus-visible .guide-word {
  color: rgba(255, 255, 255, 0.12);
}

.guide-hit:hover .guide-core strong,
.guide-hit:focus-visible .guide-core strong {
  text-shadow:
    0 0 24px rgba(255, 255, 255, 0.34),
    0 0 96px rgba(255, 255, 255, 0.14);
}

.guide-flash {
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(242, 242, 238, 0), rgba(242, 242, 238, 0.96), rgba(242, 242, 238, 0)),
    #f2f2ee;
  opacity: 0;
  transform: translate3d(0, 0, 0);
}

body.is-leaving .guide-word {
  animation: guide-word-leave 620ms cubic-bezier(0.48, 0, 0.92, 0.16) both;
}

body.is-leaving .guide-core {
  animation: guide-core-leave 560ms cubic-bezier(0.48, 0, 0.92, 0.16) both;
}

body.is-leaving .guide-canvas {
  animation: guide-canvas-leave 760ms ease both;
}

body.is-leaving .guide-flash {
  animation: guide-flash-cut 740ms cubic-bezier(0.18, 0.84, 0.18, 1) 160ms both;
}

body.is-leaving-back .guide-flash {
  animation: guide-flash-cut-back 820ms cubic-bezier(0.12, 0.82, 0.14, 1) both;
}

body.is-leaving-back .guide-word {
  animation: guide-word-leave-back 620ms cubic-bezier(0.48, 0, 0.92, 0.16) both;
}

body.is-leaving-back .guide-core {
  animation: guide-core-leave-back 560ms cubic-bezier(0.48, 0, 0.92, 0.16) both;
}

body.is-leaving-back .guide-canvas {
  animation: guide-canvas-leave-back 760ms ease both;
}

body.is-entering-back .guide-word {
  animation: guide-word-enter-back 900ms cubic-bezier(0.16, 0.88, 0.18, 1) both;
}

body.is-entering-back .guide-core {
  animation: guide-core-enter-back 960ms cubic-bezier(0.16, 0.88, 0.18, 1) 80ms both;
}

@keyframes guide-word-enter {
  from {
    opacity: 0;
    filter: blur(14px);
    transform: translate(-50%, -50%) scale(0.92);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translate(-50%, -50%) scale(0.985);
  }
}

@keyframes guide-word-enter-back {
  from {
    opacity: 0;
    filter: blur(16px);
    transform: translate(-50%, -50%) scale(1.08);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translate(-50%, -50%) scale(0.985);
  }
}

@keyframes guide-core-enter {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: translate(-50%, -50%) scale(0.92);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes guide-core-enter-back {
  from {
    opacity: 0;
    filter: blur(12px);
    transform: translate(-50%, -50%) scale(1.08);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes guide-word-leave {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: translate(-50%, -50%) scale(0.985);
  }

  100% {
    opacity: 0;
    filter: blur(22px);
    transform: translate(-50%, -50%) scale(1.08);
  }
}

@keyframes guide-word-leave-back {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: translate(-50%, -50%) scale(0.985);
  }

  100% {
    opacity: 0;
    filter: blur(20px);
    transform: translate(-50%, -50%) scale(0.9);
  }
}

@keyframes guide-core-leave {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    filter: blur(18px);
    transform: translate(-50%, -50%) scale(1.08);
  }
}

@keyframes guide-core-leave-back {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    filter: blur(16px);
    transform: translate(-50%, -50%) scale(0.9);
  }
}

@keyframes guide-canvas-leave {
  to {
    opacity: 0.34;
    filter: brightness(0.78) contrast(1.02) blur(2px);
  }
}

@keyframes guide-canvas-leave-back {
  to {
    opacity: 0.28;
    filter: brightness(0.72) contrast(1.04) blur(2.4px);
  }
}

@keyframes guide-flash-cut {
  0%,
  100% {
    opacity: 0;
  }

  24% {
    opacity: 0.62;
  }
}

@keyframes guide-flash-cut-back {
  0% {
    opacity: 0;
    transform: translate3d(-18%, 0, 0) scaleX(0.72);
    filter: blur(8px);
  }

  16% {
    opacity: 0.78;
    transform: translate3d(-4%, 0, 0) scaleX(1.05);
    filter: blur(2px);
  }

  34% {
    opacity: 0.96;
    transform: translate3d(0, 0, 0) scaleX(1.12);
    filter: blur(0);
  }

  100% {
    opacity: 0;
    transform: translate3d(14%, 0, 0) scaleX(1.24);
    filter: blur(10px);
  }
}

@keyframes guide-star-drift {
  from {
    transform: translate3d(-1.5%, -1%, 0);
  }

  to {
    transform: translate3d(1.5%, 1%, 0);
  }
}

@media (max-width: 760px), (pointer: coarse) {
  .guide-page::after {
    animation: none;
    transform: none;
  }

  .guide-canvas {
    filter: none;
    opacity: 0.72;
  }

  .guide-word,
  .guide-core,
  .guide-canvas,
  .guide-flash,
  .guide-portal {
    filter: none !important;
  }

  .guide-portal i {
    animation: none !important;
    opacity: 0.68;
    transform: none;
  }
}

@media (max-width: 760px) {
  .guide-page--right,
  .guide-page--left {
    --word-x: 50%;
    --word-y: 50%;
    --core-x: 50%;
    --core-y: 50%;
  }

  .guide-word {
    font-size: clamp(4.4rem, 24vw, 8.5rem);
  }

  .guide-page--left .guide-word {
    font-size: clamp(3.3rem, 17vw, 6.2rem);
  }

  .guide-core {
    min-width: 74vw;
  }

  .guide-core strong {
    font-size: clamp(1.5rem, 7vw, 2.2rem);
  }

  .guide-core em,
  .guide-index {
    font-size: clamp(0.66rem, 2.6vw, 0.76rem);
    line-height: 1.45;
  }

  .guide-core em { color: rgba(238, 238, 234, 0.64); }
  .guide-index { color: rgba(238, 238, 234, 0.46); }
}

@media (prefers-reduced-motion: reduce) {
  .guide-page::after,
  .guide-word,
  .guide-core,
  body.is-entering-back .guide-word,
  body.is-entering-back .guide-core,
  body.is-leaving .guide-word,
  body.is-leaving .guide-core,
  body.is-leaving-back .guide-word,
  body.is-leaving-back .guide-core,
  body.is-leaving .guide-canvas,
  body.is-leaving-back .guide-canvas,
  body.is-leaving .guide-flash,
  body.is-leaving-back .guide-flash {
    animation-duration: 1ms;
    animation-iteration-count: 1;
  }
}

/* 2026-07-10: reversible guide-to-world portal */
.guide-portal {
  position: fixed;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: clamp(230px, 34vw, 520px);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0.22;
  filter: drop-shadow(0 0 28px rgba(255, 255, 255, 0.05));
  transform: translate(-50%, -50%) scale(0.68);
}

.guide-portal i,
.guide-portal b {
  position: absolute;
  border-radius: 50%;
}

.guide-portal i {
  border: 1px solid rgba(238, 238, 234, 0.12);
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.025),
    0 0 20px rgba(255, 255, 255, 0.025);
  animation: guide-portal-breathe 7s ease-in-out infinite alternate;
}

.guide-portal i:nth-child(1) { inset: 0; }
.guide-portal i:nth-child(2) { inset: 15%; animation-delay: -2.1s; }
.guide-portal i:nth-child(3) { inset: 31%; animation-delay: -4.2s; }

.guide-portal b {
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  background: #f3f3ef;
  box-shadow:
    0 0 12px rgba(255, 255, 255, 0.9),
    0 0 46px rgba(255, 255, 255, 0.36);
  transform: translate(-50%, -50%);
}

body.is-leaving-forward.guide-page--final .guide-portal {
  animation: guide-portal-dive 1080ms cubic-bezier(0.14, 0.84, 0.18, 1) both;
}

body.is-leaving-forward.guide-page--final .guide-word {
  animation: guide-world-word-recede 900ms cubic-bezier(0.28, 0.02, 0.76, 0.28) both;
}

body.is-leaving-forward.guide-page--final .guide-core {
  animation: guide-world-core-recede 820ms cubic-bezier(0.28, 0.02, 0.76, 0.28) both;
}

body.is-leaving-forward.guide-page--final .guide-canvas {
  transform-origin: 50% 50%;
  animation: guide-world-particle-capture 1080ms cubic-bezier(0.14, 0.84, 0.18, 1) both;
}

body.is-leaving-forward.guide-page--final .guide-flash {
  background:
    radial-gradient(circle at 50% 50%, rgba(250, 250, 247, 0.98) 0 2%, rgba(244, 244, 239, 0.72) 7%, rgba(230, 230, 226, 0.16) 22%, transparent 48%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.22), transparent 68%),
    #020202;
  mix-blend-mode: screen;
  animation: guide-world-optical-cut 1080ms cubic-bezier(0.14, 0.84, 0.18, 1) both;
}

body.is-entering-back .guide-portal {
  animation: guide-portal-return 1160ms cubic-bezier(0.16, 0.88, 0.18, 1) both;
}

body.is-entering-back .guide-word {
  animation: guide-world-word-return 1080ms cubic-bezier(0.16, 0.88, 0.18, 1) both;
}

body.is-entering-back .guide-core {
  animation: guide-world-core-return 1120ms cubic-bezier(0.16, 0.88, 0.18, 1) 70ms both;
}

body.is-entering-back .guide-canvas {
  transform-origin: 50% 50%;
  animation: guide-world-canvas-return 1200ms cubic-bezier(0.16, 0.88, 0.18, 1) both;
}

body.is-entering-back .guide-flash {
  background:
    radial-gradient(circle at 50% 50%, rgba(250, 250, 247, 0.96) 0 3%, rgba(236, 236, 231, 0.48) 11%, rgba(220, 220, 216, 0.08) 30%, transparent 58%),
    #020202;
  mix-blend-mode: screen;
  animation: guide-world-return-reveal 1050ms ease-out both;
}

@keyframes guide-portal-breathe {
  from { opacity: 0.48; transform: scale(0.985); }
  to { opacity: 0.86; transform: scale(1.025); }
}

@keyframes guide-portal-dive {
  0% { opacity: 0.22; transform: translate(-50%, -50%) scale(0.68); filter: blur(0); }
  42% { opacity: 0.82; transform: translate(-50%, -50%) scale(0.42); filter: blur(0); }
  70% { opacity: 0.94; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(3.8); filter: blur(8px); }
}

@keyframes guide-world-word-recede {
  0% { opacity: 1; filter: blur(0); transform: translate(-50%, -50%) scale(0.985); }
  100% { opacity: 0; filter: blur(16px); transform: translate(-50%, -50%) scale(0.56); }
}

@keyframes guide-world-core-recede {
  0% { opacity: 1; filter: blur(0); transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; filter: blur(12px); transform: translate(-50%, -50%) scale(0.7); }
}

@keyframes guide-world-particle-capture {
  0% { opacity: 0.82; filter: brightness(0.82) contrast(0.96) saturate(0); transform: scale(1); }
  62% { opacity: 0.96; filter: brightness(1.18) contrast(1.08) saturate(0); }
  100% { opacity: 0.08; filter: brightness(1.8) contrast(0.88) saturate(0) blur(8px); transform: scale(1.48); }
}

@keyframes guide-world-optical-cut {
  0%, 48% { opacity: 0; }
  72% { opacity: 0.96; }
  100% { opacity: 0.88; }
}

@keyframes guide-portal-return {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(3.2); filter: blur(10px); }
  34% { opacity: 0.74; }
  100% { opacity: 0.22; transform: translate(-50%, -50%) scale(0.68); filter: blur(0); }
}

@keyframes guide-world-word-return {
  0% { opacity: 0; filter: blur(18px); transform: translate(-50%, -50%) scale(0.66); }
  100% { opacity: 1; filter: blur(0); transform: translate(-50%, -50%) scale(0.985); }
}

@keyframes guide-world-core-return {
  0% { opacity: 0; filter: blur(14px); transform: translate(-50%, -50%) scale(0.72); }
  100% { opacity: 1; filter: blur(0); transform: translate(-50%, -50%) scale(1); }
}

@keyframes guide-world-canvas-return {
  0% { opacity: 0.12; filter: brightness(1.4) contrast(0.9) saturate(0) blur(10px); transform: scale(0.72); }
  100% { opacity: 0.82; filter: brightness(0.82) contrast(0.96) saturate(0); transform: scale(1); }
}

@keyframes guide-world-return-reveal {
  0% { opacity: 0.92; }
  58% { opacity: 0.22; }
  100% { opacity: 0; }
}

@media (max-width: 760px) {
  .guide-portal { width: min(72vw, 360px); }
}

@media (prefers-reduced-motion: reduce) {
  .guide-portal,
  .guide-portal i,
  body.is-leaving-forward.guide-page--final .guide-portal,
  body.is-entering-back .guide-portal {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}