:root {
  --bg: #0f0b14;
  --bg-2: #191123;
  --ink: #f5ecd9;
  --muted: #cdbfa8;
  --acid: #d6ff57;
  --rose: #ff6db2;
  --cyan: #75f0ff;
  --orange: #ff9a3c;
  --shadow: rgba(0, 0, 0, 0.35);
  --panel: rgba(26, 18, 37, 0.62);
  --border: rgba(255, 255, 255, 0.1);
  --glow: 0 0 40px rgba(117, 240, 255, 0.18);
  --mood-hue: 280;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Syne", system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 109, 178, 0.15), transparent 30%),
    radial-gradient(circle at 80% 10%, rgba(117, 240, 255, 0.12), transparent 22%),
    radial-gradient(circle at 50% 80%, hsla(var(--mood-hue), 90%, 60%, 0.15), transparent 28%),
    linear-gradient(160deg, var(--bg), var(--bg-2) 60%, #08070d 100%);
  overflow-x: hidden;
}

button,
input,
textarea {
  font: inherit;
}

.skip-link,
.sr-only {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  background: #fff;
  color: #000;
  padding: 0.75rem 1rem;
  border-radius: 999px;
}

.noise,
.halo,
.floating-notes,
.weekly-sheen,
.weekly-grain,
.moon-sheen,
.moon-grain,
.canal-dream-sheen {
  pointer-events: none;
  position: fixed;
  inset: 0;
}

.noise,
.weekly-grain,
.moon-grain {
  opacity: 0.08;
  background-image:
    linear-gradient(transparent 0, rgba(255,255,255,0.35) 50%, transparent 100%),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.02) 0,
      rgba(255,255,255,0.02) 1px,
      transparent 1px,
      transparent 5px
    );
  mix-blend-mode: soft-light;
}

.halo,
.weekly-sheen,
.moon-sheen,
.canal-dream-sheen {
  filter: blur(60px);
}

.halo-a {
  background: radial-gradient(circle, rgba(255, 154, 60, 0.16), transparent 60%);
  transform: translate(-10%, 10%);
}

.halo-b {
  background: radial-gradient(circle, rgba(117, 240, 255, 0.14), transparent 58%);
  transform: translate(70%, 65%);
}

.floating-notes::before,
.floating-notes::after {
  content: "✦ 𝄞 ✺ 𝄢 ✦";
  position: absolute;
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: 1rem;
  color: rgba(245, 236, 217, 0.14);
  animation: drift 20s linear infinite;
}

.floating-notes::before {
  top: 10%;
  left: -10%;
}

.floating-notes::after {
  bottom: 12%;
  right: -10%;
  animation-duration: 26s;
  animation-direction: reverse;
}

.site-head,
.stage {
  position: relative;
  z-index: 1;
}

.site-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem clamp(1rem, 3vw, 2rem);
}

.brand-mark {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.brand-logo {
  width: 3rem;
  height: 3rem;
  filter: drop-shadow(0 0 18px rgba(117, 240, 255, 0.18));
}

.eyebrow,
.tiny-tag,
.card-kicker,
.microcopy,
.footer-line,
.canal-labels,
.quiet-switch,
.tram-button,
.easter-egg,
.dial-readout,
.weekly-tag,
.moonroom-whisper,
.canal-dream-tag,
.canal-dream-smallprint,
.canal-spill-input {
  font-family: "IBM Plex Mono", monospace;
}

.eyebrow,
.tiny-tag,
.card-kicker,
.microcopy,
.footer-line,
.canal-labels,
.weekly-tag,
.moonroom-whisper,
.sideways-tag,
.canal-dream-tag,
.canal-dream-smallprint {
  text-transform: lowercase;
  letter-spacing: 0.06em;
}

.quiet-switch,
.tram-button,
.easter-egg,
.return-link,
.weekly-button,
.weekly-return,
.moonroom-button,
.moonroom-return,
.sideways-button,
.sideways-return,
.canal-spill-button {
  border: 1px solid var(--border);
  color: var(--ink);
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
  padding: 0.8rem 1rem;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.quiet-switch:hover,
.quiet-switch:focus-visible,
.tram-button:hover,
.tram-button:focus-visible,
.easter-egg:hover,
.easter-egg:focus-visible,
.return-link:hover,
.return-link:focus-visible,
.weekly-button:hover,
.weekly-button:focus-visible,
.weekly-return:hover,
.weekly-return:focus-visible,
.moonroom-button:hover,
.moonroom-button:focus-visible,
.moonroom-return:hover,
.moonroom-return:focus-visible,
.sideways-button:hover,
.sideways-button:focus-visible,
.sideways-return:hover,
.sideways-return:focus-visible,
.canal-spill-button:hover,
.canal-spill-button:focus-visible {
  transform: translateY(-2px) rotate(-1deg);
  background: rgba(255,255,255,0.1);
  border-color: rgba(214, 255, 87, 0.45);
  outline: none;
}

.stage {
  width: min(1100px, calc(100% - 2rem));
  margin: 0 auto;
  padding-bottom: 4rem;
}

.hero {
  min-height: 40vh;
  display: grid;
  align-content: center;
  padding: clamp(2rem, 7vw, 6rem) 0 2rem;
}

.tiny-tag {
  margin: 0 0 1rem;
  color: var(--acid);
}

.site-title {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em;
  font-size: clamp(3.5rem, 12vw, 9rem);
  line-height: 0.9;
  text-transform: lowercase;
}

.site-title span {
  display: inline-block;
  text-shadow: 0.04em 0 0 var(--rose), -0.04em 0 0 var(--cyan);
  transition: transform 180ms ease, text-shadow 180ms ease, color 180ms ease;
}

.site-title.is-messing span:nth-child(1) {
  transform: translateY(-0.03em) rotate(-2deg);
}

.site-title.is-messing span:nth-child(2) {
  transform: translateY(0.06em) rotate(1.5deg);
}

.site-title.is-messing span:nth-child(3) {
  transform: translateY(-0.04em) rotate(-1deg);
}

.lede {
  width: min(42rem, 100%);
  font-size: clamp(1rem, 2vw, 1.35rem);
  color: var(--muted);
  margin-top: 1.25rem;
}

.odd-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 2rem 0 3rem;
}

.card {
  position: relative;
  overflow: hidden;
  min-height: 16rem;
  padding: 1.2rem;
  border: 1px solid var(--border);
  border-radius: 1.7rem;
  background: var(--panel);
  box-shadow: var(--glow);
  backdrop-filter: blur(18px);
}

.card::after {
  content: "";
  position: absolute;
  inset: auto -20% -40% auto;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214,255,87,0.2), transparent 70%);
}

.card h2 {
  margin: 0.35rem 0 0.75rem;
  font-size: clamp(1.4rem, 2vw, 2rem);
  line-height: 1.02;
}

.card p {
  color: var(--muted);
}

.whisper-card {
  transform: rotate(-1deg);
}

.map-card {
  transform: rotate(1deg);
}

.dial-card {
  transform: rotate(-0.6deg);
}

.mood-dial {
  width: 100%;
  margin: 1rem 0 0.8rem;
  accent-color: var(--acid);
}

.dial-readout {
  color: var(--acid);
}

.canal-section {
  position: relative;
  margin: 3rem 0;
}

.canal-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  color: rgba(245, 236, 217, 0.55);
  margin-bottom: 0.75rem;
}

.canal {
  position: relative;
  display: block;
  width: 100%;
  min-height: 14rem;
  border-radius: 2rem;
  border: 1px solid rgba(117, 240, 255, 0.25);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01)),
    linear-gradient(135deg, rgba(117,240,255,0.22), rgba(89, 84, 255, 0.08) 40%, rgba(255,109,178,0.12));
  box-shadow: inset 0 0 60px rgba(117, 240, 255, 0.08), 0 20px 40px rgba(0,0,0,0.25);
  overflow: hidden;
  cursor: pointer;
}

.canal-glow {
  position: absolute;
  inset: 15% 25%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214,255,87,0.2), transparent 65%);
  filter: blur(18px);
}

.canal-ripple {
  position: absolute;
  inset: auto auto 10% 8%;
  width: 34%;
  height: 34%;
  border: 1px solid rgba(245, 236, 217, 0.35);
  border-radius: 48% 52% 41% 59% / 57% 43% 57% 43%;
  animation: wobble 11s infinite ease-in-out;
}

.canal-ripple-b {
  left: 38%;
  bottom: 22%;
  width: 26%;
  height: 22%;
  animation-duration: 8s;
}

.canal-ripple-c {
  left: 65%;
  bottom: 8%;
  width: 18%;
  height: 16%;
  animation-duration: 14s;
}

.canal.is-rung .canal-ripple {
  animation-duration: 1.4s;
}

body.canal-folding {
  overflow: hidden;
}

body.canal-folding::before,
body.canal-folding::after {
  content: "";
  position: fixed;
  inset: -12vh -8vw;
  pointer-events: none;
  z-index: 6;
}

body.canal-folding::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(117,240,255,0.24), transparent 16%),
    repeating-radial-gradient(circle at 50% 50%, rgba(245,236,217,0.12) 0 1.4rem, transparent 1.4rem 3rem);
  animation: canalPortalPulse 1.9s ease-in forwards;
}

body.canal-folding::after {
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(255,255,255,0.09) 18% 19%, transparent 19% 38%, rgba(255,109,178,0.12) 38% 39%, transparent 39% 58%, rgba(117,240,255,0.12) 58% 59%, transparent 59% 100%);
  mix-blend-mode: screen;
  animation: canalPortalStripes 1.9s ease-in forwards;
}

body.canal-folding .stage {
  animation: canalStageTilt 1.9s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}

body.canal-folding .canal {
  animation: canalOpenWide 1.9s cubic-bezier(0.16, 0.88, 0.18, 1) forwards;
}

body.canal-folding .site-title span,
body.canal-folding .card,
body.canal-folding .footer-zone {
  animation: canalScrambleAway 1.6s ease-in forwards;
}

.footer-zone {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding-bottom: 2rem;
}

.footer-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
}

.footer-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.footer-line a {
  color: inherit;
  text-decoration: none;
  opacity: 0.88;
  transition: color 160ms ease, opacity 160ms ease, text-shadow 160ms ease;
}

.footer-line a:hover,
.footer-line a:focus-visible {
  color: rgba(245, 236, 217, 0.96);
  opacity: 1;
  text-shadow: 0 0 12px rgba(214, 255, 87, 0.12);
  outline: none;
}

.weekly-body {
  overflow: hidden;
}

.weekly-sheen {
  background: radial-gradient(circle at 20% 15%, rgba(214,255,87,0.12), transparent 22%), radial-gradient(circle at 80% 75%, rgba(117,240,255,0.12), transparent 20%);
}

.weekly-room {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: clamp(2rem, 5vw, 4rem);
}

.weekly-tag {
  margin: 0 0 1rem;
  color: rgba(245, 236, 217, 0.65);
}

.weekly-word {
  margin: 0;
  font-size: clamp(4rem, 14vw, 10rem);
  line-height: 0.88;
  text-transform: lowercase;
}

.weekly-subtitle {
  margin: 0.75rem 0 2rem;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.2rem);
}

.weekly-fragments {
  display: grid;
  gap: 0.85rem;
  max-width: 28rem;
}

.weekly-fragments p,
.weekly-murmur {
  margin: 0;
  color: rgba(245, 236, 217, 0.88);
}

.ghost-link,
.ghost-link:visited,
.ghost-link:hover,
.ghost-link:focus-visible,
.ghost-link:active {
  color: inherit;
  text-decoration: none;
  cursor: text;
}

.weekly-button,
.weekly-return {
  margin-top: 2rem;
}

.weekly-return {
  width: fit-content;
}

.weekly-murmur {
  margin-top: 1rem;
  max-width: 24rem;
  color: var(--muted);
}

.bonsai-room-body {
  background:
    radial-gradient(circle at 30% 18%, rgba(214,255,87,0.08), transparent 18%),
    linear-gradient(180deg, #111710, #090d09 75%, #050705 100%);
}

.bonsai-room {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 22rem);
  gap: 2rem;
  align-items: end;
}

.bonsai-room .weekly-word {
  letter-spacing: -0.04em;
}

.bells-room-body {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 196, 92, 0.14), transparent 16%),
    linear-gradient(180deg, #1a1310, #0e0b0a 72%, #060505 100%);
}

.bells-room {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  padding-top: 4rem;
}

.bells-room .weekly-fragments {
  max-width: 40rem;
  justify-items: center;
}

.bells-room .weekly-word {
  font-size: clamp(4rem, 18vw, 12rem);
}

.moss-room-body {
  background:
    radial-gradient(circle at 18% 20%, rgba(120, 165, 92, 0.12), transparent 18%),
    radial-gradient(circle at 70% 70%, rgba(88, 131, 74, 0.1), transparent 22%),
    linear-gradient(180deg, #0d120d, #070907 75%, #040504 100%);
}

.moss-room {
  display: grid;
  grid-template-columns: minmax(12rem, 18rem) 1fr;
  gap: 3rem;
  align-items: center;
}

.moss-room .weekly-fragments {
  max-width: 22rem;
}

.labyrinth-room-body {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.04), transparent 18%),
    linear-gradient(180deg, #151116, #09080c 78%, #050407 100%);
}

.labyrinth-room {
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
}

.labyrinth-room .weekly-word {
  max-width: 8ch;
}

.moonroom-body {
  background:
    radial-gradient(circle at 50% 10%, rgba(245,236,217,0.12), transparent 10%),
    radial-gradient(circle at 30% 24%, rgba(117,240,255,0.08), transparent 16%),
    linear-gradient(180deg, #130d1c, #090811 72%, #050409 100%);
  overflow: hidden;
}

.moon-sheen {
  background: radial-gradient(circle at 50% 10%, rgba(245,236,217,0.22), transparent 12%), radial-gradient(circle at 70% 70%, rgba(117,240,255,0.1), transparent 20%);
}

.moonroom-layout {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: clamp(2rem, 6vw, 5rem);
  display: grid;
  align-content: center;
  gap: 1.5rem;
}

.moonroom-whisper {
  margin: 0;
  color: rgba(245,236,217,0.55);
}

.moonroom-cluster {
  display: grid;
  gap: 0.5rem;
}

.moonroom-headline {
  margin: 0;
  font-size: clamp(3.2rem, 11vw, 8rem);
  line-height: 0.92;
  max-width: 9ch;
}

.moonroom-line,
.moonroom-murmur {
  margin: 0;
  color: var(--muted);
}

.moonroom-fragments {
  display: grid;
  gap: 0.6rem;
  margin: 1rem 0;
}

.moonroom-fragments p {
  margin: 0;
  width: fit-content;
  padding: 0.2rem 0.5rem;
  background: rgba(255,255,255,0.04);
  border-radius: 999px;
}

.moonroom-button,
.moonroom-return {
  width: fit-content;
}

.moonroom-tilted .moonroom-layout {
  transform: rotate(-0.4deg);
}

.sideways-body {
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 109, 178, 0.1), transparent 18%),
    radial-gradient(circle at 85% 26%, rgba(117, 240, 255, 0.08), transparent 18%),
    linear-gradient(180deg, #161018, #0d0b10 78%, #060508 100%);
}

.sideways-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  filter: blur(70px);
  background: radial-gradient(circle at 70% 18%, rgba(255,154,60,0.12), transparent 16%), radial-gradient(circle at 30% 72%, rgba(117,240,255,0.08), transparent 20%);
}

.sideways-layout {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: clamp(2rem, 6vw, 5rem);
  display: grid;
  gap: 1.2rem;
  align-content: center;
}

.sideways-tag,
.sideways-murmur {
  margin: 0;
  color: rgba(245,236,217,0.62);
}

.sideways-title {
  margin: 0;
  font-size: clamp(3rem, 10vw, 7rem);
  line-height: 0.94;
  max-width: 10ch;
}

.sideways-notes {
  display: grid;
  gap: 0.7rem;
  max-width: 26rem;
}

.sideways-notes p {
  margin: 0;
  width: fit-content;
  padding: 0.18rem 0.5rem;
  background: rgba(255,255,255,0.04);
  border-radius: 999px;
}

.sideways-button,
.sideways-return {
  width: fit-content;
}

.sideways-tilted .sideways-layout {
  transform: rotate(0.35deg);
}

.whats-on-layout {
  align-content: start;
  max-width: 72rem;
}

.whats-on-stamp,
.whats-on-smallprint,
.whats-on-source,
.whats-on-meta,
.whats-on-links,
.nocturnal-scribble {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.9rem;
}

.whats-on-board {
  max-width: 62rem;
}

.whats-on-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.2rem;
}

.whats-on-item {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.whats-on-row {
  display: grid;
  gap: 0.2rem;
  padding: 0.55rem 0 0.8rem;
  border-bottom: 1px dashed rgba(245,236,217,0.12);
}

.whats-on-name,
.whats-on-meta,
.whats-on-source,
.whats-on-note,
.whats-on-links {
  margin: 0;
}

.whats-on-name {
  font-size: clamp(1.08rem, 2.1vw, 1.45rem);
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.01em;
}

.whats-on-meta {
  color: rgba(245,236,217,0.72);
}

.whats-on-link {
  display: inline-flex;
  margin-right: 0.45rem;
}

.subtle-link {
  color: rgba(245,236,217,0.42);
  text-decoration: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: lowercase;
}

.subtle-link:hover,
.subtle-link:focus-visible {
  color: rgba(245,236,217,0.76);
  text-decoration: none;
}

.whats-on-empty {
  padding: 1rem 0;
  color: rgba(245,236,217,0.72);
}

.nocturnal-board-body .sideways-title {
  margin-bottom: 1.6rem;
  max-width: 16ch;
}

.nocturnal-board {
  position: relative;
}

.nocturnal-item.tilt-1 { transform: rotate(-0.35deg); }
.nocturnal-item.tilt-2 { transform: rotate(0.2deg); }
.nocturnal-item.tilt-3 { transform: rotate(-0.12deg); }
.nocturnal-item.tilt-4 { transform: rotate(0.38deg); }

.nocturnal-row {
  position: relative;
}

.nocturnal-row::before {
  content: "•";
  position: absolute;
  left: -1rem;
  top: 0.5rem;
  color: rgba(245,236,217,0.28);
  font-size: 0.85rem;
}

.nocturnal-scribble {
  position: fixed;
  color: rgba(245,236,217,0.18);
  letter-spacing: 0.08em;
  pointer-events: none;
  user-select: none;
}

.nocturnal-scribble-a {
  top: 7rem;
  right: 4.5vw;
  transform: rotate(8deg);
}

.nocturnal-scribble-b {
  bottom: 5rem;
  left: 5vw;
  transform: rotate(-7deg);
}

.quiet-divider {
  color: rgba(245,236,217,0.22);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%) translateY(150%);
  padding: 0.85rem 1rem;
  border-radius: 999px;
  background: rgba(15, 11, 20, 0.88);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--ink);
  font-family: "IBM Plex Mono", monospace;
  text-align: center;
  transition: transform 220ms ease;
  z-index: 8;
}

.toast.is-visible {
  transform: translateX(-50%) translateY(0);
}

body.quiet {
  --acid: #b9c7b9;
  --rose: #d59aba;
  --cyan: #9ad7dd;
}

body.quiet .floating-notes,
body.quiet .noise {
  opacity: 0.04;
}

.weekly-tilted .weekly-room {
  transform: rotate(-0.3deg);
}

.faq-body {
  --faq-tilt: 0deg;
  --faq-hue-shift: 0deg;
  --faq-fall: 0px;
  --faq-chaos: 0px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 109, 178, 0.12), transparent 28%),
    radial-gradient(circle at 80% 22%, rgba(117, 240, 255, 0.1), transparent 24%),
    linear-gradient(180deg, #0f0b14, #130f1d 55%, #09080d 100%);
  filter: hue-rotate(var(--faq-hue-shift));
}

.faq-layout {
  width: min(820px, calc(100% - 2rem));
  margin: 0 auto;
  min-height: 100vh;
  padding: 4rem 0 5rem;
  display: grid;
  align-content: start;
  gap: 1.5rem;
  transform: rotate(var(--faq-tilt)) translateY(var(--faq-fall));
}

.faq-title {
  margin: 0;
  font-size: clamp(3rem, 10vw, 7rem);
  line-height: 0.9;
  text-transform: lowercase;
}

.faq-list {
  list-style: decimal-leading-zero;
  margin: 0;
  padding-left: 1.6rem;
  display: grid;
  gap: 0.95rem;
}

.faq-item {
  font-size: clamp(1.15rem, 2vw, 1.65rem);
  line-height: 1.2;
  max-width: 28ch;
  transition: transform 180ms ease, letter-spacing 180ms ease, opacity 180ms ease;
}

.faq-trigger {
  cursor: pointer;
}

.faq-murmur {
  min-height: 1.5rem;
  margin: 0;
  font-family: "IBM Plex Mono", monospace;
  color: rgba(245,236,217,0.68);
}

.faq-unravelling .faq-item:nth-child(odd) {
  opacity: 0.86;
}

.faq-unravelling .faq-item:nth-child(even) {
  opacity: 0.66;
}

.faq-critical .faq-layout {
  width: min(980px, calc(100% - 1rem));
}

.faq-critical .faq-title {
  transform: translateX(calc(var(--faq-chaos) * -0.3)) rotate(-8deg);
  opacity: 0.72;
}

.faq-critical .faq-list {
  gap: 0.35rem;
}

.faq-critical .faq-murmur {
  transform: rotate(4deg) translateX(calc(var(--faq-chaos) * 0.4));
  opacity: 0.88;
}

.register-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 230, 163, 0.08), transparent 24%),
    radial-gradient(circle at 78% 22%, rgba(170, 201, 255, 0.08), transparent 26%),
    linear-gradient(180deg, #14110d, #1c1711 55%, #0c0a08 100%);
}

.register-layout {
  width: min(880px, calc(100% - 2rem));
  margin: 0 auto;
  min-height: 100vh;
  padding: 3.5rem 0 5rem;
  display: grid;
  gap: 1.2rem;
}

.register-title {
  margin: 0;
  font-size: clamp(3rem, 10vw, 7rem);
  line-height: 0.92;
  text-transform: lowercase;
}

.register-excuse-label,
.register-excuse,
.register-sheet,
.register-refresh,
.register-list,
.register-passwords,
.register-password-block {
  font-family: "IBM Plex Mono", monospace;
}

.register-excuse-label,
.register-excuse {
  margin: 0;
}

.register-excuse {
  max-width: 34rem;
  padding: 0.8rem 1rem;
  border: 1px dashed rgba(245,236,217,0.2);
  background: rgba(255,255,255,0.03);
  transform: rotate(-0.4deg);
}

.register-sheet {
  max-width: 42rem;
  padding: 1.4rem 1.3rem;
  background: rgba(244, 234, 214, 0.06);
  border: 1px solid rgba(244, 234, 214, 0.16);
  box-shadow: 0 18px 50px rgba(0,0,0,0.18);
}

.register-list,
.register-passwords {
  display: grid;
  gap: 0.45rem;
}

.register-password-block {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px dashed rgba(244, 234, 214, 0.18);
}

.register-refresh {
  justify-self: start;
  border: 1px solid rgba(244, 234, 214, 0.18);
  background: rgba(255,255,255,0.04);
  color: var(--ink);
  padding: 0.8rem 1rem;
  cursor: pointer;
}

.footer-whisper {
  margin: 0.8rem 0 0;
  text-align: right;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  opacity: 0.18;
}

.footer-whisper a {
  color: inherit;
  text-decoration: none;
}

.footer-whisper:hover,
.footer-whisper:focus-within {
  opacity: 0.42;
}

.terms-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 16%, rgba(190, 255, 192, 0.08), transparent 24%),
    radial-gradient(circle at 82% 20%, rgba(255, 219, 167, 0.08), transparent 25%),
    linear-gradient(180deg, #10110f, #171915 54%, #0a0b09 100%);
}

.terms-layout {
  width: min(860px, calc(100% - 2rem));
  margin: 0 auto;
  min-height: 100vh;
  padding: 3.5rem 0 5rem;
  display: grid;
  gap: 1.35rem;
}

.terms-title {
  margin: 0;
  font-size: clamp(3rem, 10vw, 7rem);
  line-height: 0.92;
  text-transform: lowercase;
}

.terms-sheet,
.terms-list,
.terms-smallprint {
  font-family: "IBM Plex Mono", monospace;
}

.terms-sheet {
  max-width: 44rem;
  padding: 1.4rem 1.3rem;
  background: rgba(255,255,255,0.035);
  border: 1px dashed rgba(245,236,217,0.16);
  transform: rotate(-0.3deg);
}

.terms-list {
  display: grid;
  gap: 0.7rem;
  padding-left: 1.5rem;
}

.terms-smallprint {
  margin: 1.2rem 0 0;
  color: rgba(245,236,217,0.68);
}

.skiddle-credit {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 1.2rem 0 0;
  color: rgba(245,236,217,0.62);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
}

.skiddle-credit-logo {
  height: 18px;
  width: auto;
  opacity: 0.88;
}

.canal-dream-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 22% 12%, rgba(255, 239, 186, 0.08), transparent 18%),
    radial-gradient(circle at 80% 18%, rgba(117, 240, 255, 0.12), transparent 22%),
    linear-gradient(180deg, #120f17 0%, #0d1320 35%, #07111c 62%, #050b13 100%);
}

.canal-dream-sheen {
  background:
    radial-gradient(circle at 50% 10%, rgba(245,236,217,0.08), transparent 14%),
    radial-gradient(circle at 46% 58%, rgba(117,240,255,0.12), transparent 18%),
    radial-gradient(circle at 70% 74%, rgba(255,109,178,0.08), transparent 18%);
}

.canal-dream-layout {
  position: relative;
  z-index: 1;
  width: min(1200px, calc(100% - 1.5rem));
  margin: 0 auto;
  min-height: 100vh;
  padding: 2rem 0 3rem;
  display: grid;
  gap: 1rem;
  align-content: start;
}

.canal-dream-tag,
.canal-dream-murmur,
.canal-dream-smallprint {
  margin: 0;
}

.canal-dream-tag {
  color: rgba(245,236,217,0.62);
}

.canal-dream-title {
  margin: 0;
  font-size: clamp(3.4rem, 12vw, 8rem);
  line-height: 0.9;
  text-transform: lowercase;
}

.canal-dream-murmur {
  color: var(--muted);
  max-width: 36rem;
}

.canal-dream-stage {
  display: grid;
  gap: 1rem;
}

.canal-dream-water {
  position: relative;
  min-height: 72vh;
  border-radius: 2.2rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)),
    radial-gradient(circle at 50% 18%, rgba(255,235,196,0.08), transparent 12%),
    linear-gradient(180deg, rgba(14,22,38,0.2) 0%, rgba(8,17,28,0.1) 18%, rgba(5,16,27,0.72) 46%, rgba(4,10,18,0.92) 100%),
    linear-gradient(120deg, rgba(95, 120, 144, 0.08), rgba(35, 65, 92, 0.24) 40%, rgba(13, 39, 60, 0.45));
  box-shadow: inset 0 0 110px rgba(117,240,255,0.08), 0 28px 50px rgba(0,0,0,0.28);
}

.canal-dream-water::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 24%, rgba(255,255,255,0.05), transparent 12%),
    radial-gradient(circle at 76% 20%, rgba(255,255,255,0.04), transparent 14%),
    linear-gradient(180deg, transparent 0 34%, rgba(0,0,0,0.08) 48%, rgba(0,0,0,0.2) 100%);
  pointer-events: none;
}

.canal-dream-water::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), transparent 14%),
    repeating-linear-gradient(180deg, rgba(117,240,255,0.06) 0 1px, transparent 1px 14px);
  opacity: 0.5;
  pointer-events: none;
}

.canal-dream-surface {
  position: absolute;
  left: -10%;
  width: 120%;
  border-top: 1px solid rgba(255,255,255,0.12);
  opacity: 0.55;
}

.canal-dream-surface-a {
  top: 38%;
  animation: canalSurfaceShift 16s ease-in-out infinite;
}

.canal-dream-surface-b {
  top: 56%;
  opacity: 0.28;
  animation: canalSurfaceShift 11s ease-in-out infinite reverse;
}

.canal-dream-surface-c {
  top: 76%;
  opacity: 0.18;
  animation: canalSurfaceShift 21s ease-in-out infinite;
}

.canal-cloud-layer,
.canal-thought-layer,
.canal-letter-layer,
.canal-ripple-layer {
  position: absolute;
  inset: 0;
}

.canal-thought-layer,
.canal-letter-layer,
.canal-ripple-layer {
  pointer-events: none;
}

.canal-spill-form {
  display: grid;
  gap: 0.8rem;
  width: min(34rem, 100%);
  margin-top: -8rem;
  margin-left: clamp(0.5rem, 6vw, 3rem);
  padding: 1rem;
  border-radius: 1.4rem;
  background: rgba(10, 15, 24, 0.52);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(18px);
}

.canal-spill-input {
  width: 100%;
  resize: vertical;
  min-height: 5.8rem;
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: var(--ink);
  padding: 0.9rem 1rem;
}

.canal-spill-input::placeholder {
  color: rgba(245,236,217,0.46);
}

.canal-spill-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
}

.canal-dream-return {
  opacity: 0.78;
}

.canal-thought-block {
  position: absolute;
  top: 10%;
  left: 12%;
  max-width: min(34rem, 68vw);
  color: rgba(245,236,217,0.92);
  font-family: "IBM Plex Mono", monospace;
  line-height: 1.45;
  letter-spacing: 0.03em;
  text-shadow: 0 0 12px rgba(117,240,255,0.08);
}

.canal-thought-block.is-shedding {
  opacity: 0.2;
  transition: opacity 2200ms linear;
}

.canal-thought-line {
  white-space: nowrap;
}

.canal-thought-char {
  display: inline-block;
  margin-right: 0.7ch;
}

.canal-thought-line .canal-thought-char:last-child {
  margin-right: 0;
}

.canal-thought-cloud {
  position: absolute;
  max-width: min(22rem, 42vw);
  padding: 0.75rem 1rem;
  border-radius: 999px;
  background: rgba(244, 239, 231, 0.12);
  border: 1px solid rgba(244, 239, 231, 0.18);
  color: rgba(245,236,217,0.92);
  font-family: "IBM Plex Mono", monospace;
  line-height: 1.35;
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.16);
  animation: cloudLoiter 14s ease-in-out infinite;
}

.canal-thought-cloud.is-dropping {
  animation: cloudDrop 2.8s ease-in forwards;
}

.canal-letter-drift,
.canal-letter-fall {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.canal-letter-drift {
  animation: canalLetterHorizontalDrift var(--fall-duration, 5600ms) ease-in-out forwards;
}

.canal-letter-fall {
  animation: canalLetterVerticalFall var(--fall-duration, 5600ms) cubic-bezier(0.08, 0.02, 0.22, 1) forwards;
}

.canal-drifting-letter {
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(245,236,217,0.88);
  font-family: "IBM Plex Mono", monospace;
  text-shadow: 0 0 10px rgba(117,240,255,0.16);
  transform: translate(-50%, -50%) rotate(var(--letter-tilt));
  animation: canalLetterTumble var(--fall-duration, 5600ms) linear forwards;
}

.canal-thought-ripple {
  position: absolute;
  width: 1rem;
  height: 1rem;
  border: 1px solid rgba(245,236,217,0.34);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: thoughtRipple 2.4s ease-out forwards;
}

.canal-thought-ripple.is-large {
  border-color: rgba(117,240,255,0.34);
}

@keyframes drift {
  from {
    transform: translateX(0) translateY(0) rotate(0deg);
  }
  to {
    transform: translateX(40vw) translateY(-4vh) rotate(3deg);
  }
}

@keyframes wobble {
  0%,
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  33% {
    transform: translateY(-6px) rotate(2deg) scale(1.04);
  }
  66% {
    transform: translateY(4px) rotate(-2deg) scale(0.98);
  }
}

@keyframes canalPortalPulse {
  0% {
    transform: scale(0.2) rotate(0deg);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: scale(2.2) rotate(18deg);
    opacity: 0;
  }
}

@keyframes canalPortalStripes {
  0% {
    transform: translateX(-8vw) skewX(0deg);
    opacity: 0;
  }
  20% {
    opacity: 0.9;
  }
  100% {
    transform: translateX(8vw) skewX(-18deg);
    opacity: 0;
  }
}

@keyframes canalStageTilt {
  0% {
    transform: scale(1) rotate(0deg) translateY(0);
    filter: hue-rotate(0deg) blur(0);
  }
  35% {
    transform: scale(1.02) rotate(-1deg) translateY(1vh);
    filter: hue-rotate(28deg) blur(0);
  }
  100% {
    transform: scale(0.74) rotate(9deg) translateY(16vh);
    filter: hue-rotate(120deg) blur(8px);
    opacity: 0;
  }
}

@keyframes canalOpenWide {
  0% {
    transform: scale(1) rotate(0deg);
    filter: saturate(1);
  }
  50% {
    transform: scale(1.12, 1.45) rotate(-4deg);
    filter: saturate(1.8);
  }
  100% {
    transform: scale(3.6, 8.5) rotate(6deg);
    filter: saturate(2.2) blur(2px);
  }
}

@keyframes canalScrambleAway {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, -7vh, 0) rotate(-12deg);
    opacity: 0;
  }
}

@keyframes canalSurfaceShift {
  0%,
  100% {
    transform: translateX(0) scaleX(1);
  }
  50% {
    transform: translateX(-2%) scaleX(1.04);
  }
}

@keyframes canalLetterHorizontalDrift {
  0% {
    left: var(--start-x);
  }
  16% {
    left: calc((var(--start-x) * 0.74) + (var(--mid-x) * 0.26));
  }
  34% {
    left: var(--mid-x);
  }
  56% {
    left: var(--late-x);
  }
  78% {
    left: var(--final-curve-x);
  }
  90% {
    left: calc((var(--final-curve-x) * 0.38) + (var(--sink-x) * 0.62));
  }
  100% {
    left: var(--sink-x);
  }
}

@keyframes canalLetterVerticalFall {
  0% {
    top: var(--start-y);
    opacity: 0;
  }
  8% {
    top: var(--start-y);
    opacity: 1;
  }
  18% {
    top: calc(var(--start-y) + 1.6%);
    opacity: 0.99;
  }
  30% {
    top: calc(var(--start-y) + 8% - var(--flutter-lift));
    opacity: 0.98;
  }
  44% {
    top: calc(var(--start-y) + 16% + (var(--flutter-lift) * 0.08));
    opacity: 0.97;
  }
  58% {
    top: calc(var(--start-y) + 24% - (var(--flutter-lift) * 0.3));
    opacity: 0.96;
  }
  72% {
    top: calc(var(--start-y) + 32% + (var(--flutter-lift) * 0.06));
    opacity: 0.94;
  }
  84% {
    top: calc(var(--sink-y) - 18% - (var(--low-updraft) * 0.2));
    opacity: 0.92;
  }
  91% {
    top: calc(var(--sink-y) - 13% - var(--low-updraft));
    opacity: 0.89;
  }
  96% {
    top: calc(var(--sink-y) - 9% - (var(--low-updraft) * 0.18));
    opacity: 0.86;
  }
  100% {
    top: calc(var(--sink-y) - 4%);
    opacity: 0;
  }
}

@keyframes canalLetterTumble {
  0% {
    transform: translate(-50%, -50%) rotate(var(--letter-tilt)) scale(1);
  }
  12% {
    transform: translate(-50%, -50%) rotate(calc(var(--letter-tilt) + (var(--spin-a) * 0.9))) scale(1);
  }
  24% {
    transform: translate(-50%, -50%) rotate(calc(var(--letter-tilt) + (var(--spin-b) * 0.72))) scale(0.99);
  }
  38% {
    transform: translate(-50%, -50%) rotate(calc(var(--letter-tilt) + (var(--spin-a) * 1.18))) scale(0.97);
  }
  52% {
    transform: translate(-50%, -50%) rotate(calc(var(--letter-tilt) + (var(--spin-b) * 1.06))) scale(0.94);
  }
  68% {
    transform: translate(-50%, -50%) rotate(calc(var(--letter-tilt) + (var(--spin-a) * 0.82))) scale(0.9);
  }
  84% {
    transform: translate(-50%, -50%) rotate(calc(var(--letter-tilt) + (var(--spin-b) * 0.62))) scale(0.8);
  }
  100% {
    transform: translate(-50%, -50%) rotate(calc(var(--letter-tilt) + (var(--spin-a) * 0.36))) scale(0.24);
  }
}

@keyframes thoughtRipple {
  0% {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(0.2);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(7);
  }
}

@keyframes cloudLoiter {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-10px) rotate(1.5deg);
  }
}

@keyframes cloudDrop {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(52vh) scale(0.7) rotate(9deg);
  }
}

@media (max-width: 860px) {
  .odd-grid,
  .bonsai-room,
  .moss-room {
    grid-template-columns: 1fr;
  }

  .footer-zone {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-actions {
    justify-content: flex-start;
  }

  .canal-spill-form {
    margin: -4rem 0 0;
    width: 100%;
  }

  .canal-dream-water {
    min-height: 62vh;
  }

  .canal-thought-cloud {
    max-width: 70vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}


@media (max-width: 860px) {
  .variant-stage-one {
    grid-template-columns: 1fr;
  }

  .variant-grid-two {
    grid-template-columns: 1fr;
  }
}


.variant-stage-one {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  grid-template-areas:
    "canal hero"
    "canal cards"
    "footer footer";
  gap: 1.4rem;
  align-items: start;
  padding-top: 1.2rem;
}

.variant-stage-one .variant-canal { grid-area: canal; margin: 0; }
.variant-stage-one .variant-hero-one { grid-area: hero; min-height: auto; padding: 0.6rem 0 0; }
.variant-stage-one .variant-grid-one { grid-area: cards; margin: 0; grid-template-columns: 1fr; }
.variant-stage-one .variant-footer-one { grid-area: footer; margin-top: 0; }
.variant-stage-one .canal { min-height: 28rem; border-radius: 2.6rem; }
.variant-stage-one .site-title {
  font-size: clamp(4rem, 13vw, 10rem);
  line-height: 0.84;
  gap: 0.03em;
}

.variant-stage-one .site-title span:nth-child(2) {
  transform: translateX(0.18em) rotate(-2.5deg);
}
.variant-stage-one .variant-card-slot-1 { transform: rotate(-2deg); }
.variant-stage-one .variant-card-slot-2 { transform: rotate(2.4deg); }
.variant-stage-one .variant-card-slot-3 { transform: rotate(-1deg); }

.variant-stage-two {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding-top: 0.5rem;
}

.variant-stage-two .variant-hero-two {
  min-height: auto;
  padding: 0;
  justify-items: start;
  text-align: left;
  max-width: 34rem;
}

.variant-stage-two .variant-footer-two {
  order: 2;
  align-items: flex-start;
  transform: rotate(-1.2deg);
}

.variant-stage-two .variant-canal {
  order: 3;
  margin: 0;
}

.variant-stage-two .variant-grid-two {
  order: 4;
  grid-template-columns: 1.25fr 0.75fr;
  grid-template-areas:
    "map whisper"
    "map dial";
  gap: 1.25rem;
  margin: 0;
}

.variant-stage-two .variant-grid-two .variant-card-slot-1 { grid-area: map; transform: rotate(-1.6deg); }
.variant-stage-two .variant-grid-two .variant-card-slot-2 { grid-area: whisper; transform: rotate(1.8deg); }
.variant-stage-two .variant-grid-two .variant-card-slot-3 { grid-area: dial; transform: rotate(-2.2deg); }
.variant-stage-two .canal { min-height: 10rem; border-radius: 4rem; }
.variant-stage-two .footer-line {
  display: grid;
  gap: 0.15rem;
}
.variant-stage-two .site-title {
  font-size: clamp(4rem, 14vw, 11rem);
  max-width: 5ch;
  line-height: 0.76;
  gap: 0.02em;
}

.variant-stage-two .site-title span:nth-child(2) {
  transform: translateX(0.22em) rotate(3deg);
}
.variant-stage-two .lede {
  max-width: 24rem;
  color: rgba(245,236,217,0.82);
}

@media (max-width: 860px) {
  .variant-stage-one {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hero"
      "canal"
      "cards"
      "footer";
  }

  .variant-stage-two .variant-grid-two {
    grid-template-columns: 1fr;
    grid-template-areas:
      "map"
      "whisper"
      "dial";
  }
}


.variant-stage {
  min-height: calc(100vh - 7rem);
}

.variant-footer {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px dashed rgba(245,236,217,0.14);
}

.variant-footer .footer-whisper {
  opacity: 0.44;
}

.variant-footer .footer-whisper a,
.variant-footer .footer-whisper a:visited {
  color: var(--acid);
  text-decoration: none;
}

.variant-footer .footer-whisper a:hover,
.variant-footer .footer-whisper a:focus-visible {
  color: var(--acid);
  text-shadow: 0 0 12px rgba(214,255,87,0.16);
}


.variant-generated-stage-1 {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1.4rem;
}
.variant-generated-stage-1 .variant-canal { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.variant-generated-stage-1 .variant-generated-grid-1 { grid-column: 1; margin: 0; grid-template-columns: 1fr; }

.variant-generated-stage-2 {
  display: grid;
  gap: 1rem;
}
.variant-generated-stage-2 .variant-generated-footer-2 { order: 2; transform: rotate(-1deg); }
.variant-generated-stage-2 .variant-canal { order: 3; margin: 0; }
.variant-generated-stage-2 .variant-generated-grid-2 { order: 4; grid-template-columns: 1fr 1fr; }

.variant-generated-stage-3 {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 1.3rem;
}
.variant-generated-stage-3 .variant-generated-grid-3 { grid-column: 1; grid-row: 1 / span 2; grid-template-columns: 1fr; margin: 0; }
.variant-generated-stage-3 .variant-generated-hero-3 { grid-column: 2; }
.variant-generated-stage-3 .variant-canal { grid-column: 2; margin: 0; }

.variant-generated-stage-4 {
  display: grid;
  gap: 1rem;
}
.variant-generated-stage-4 .variant-generated-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.variant-generated-stage-4 .variant-canal { margin: 0; min-height: 10rem; }

@media (max-width: 860px) {
  .variant-generated-stage-1,
  .variant-generated-stage-3 {
    grid-template-columns: 1fr;
  }

  .variant-generated-stage-4 .variant-generated-grid-4,
  .variant-generated-stage-2 .variant-generated-grid-2 {
    grid-template-columns: 1fr;
  }
}