:root {
  color-scheme: dark;
  --night: #030302;
  --ink: #080805;
  --ink-soft: #10100b;
  --ivory: #f7f0df;
  --ivory-soft: rgba(247, 240, 223, 0.72);
  --gold: #d8b45a;
  --gold-light: #f7df9b;
  --gold-deep: #8e6a1c;
  --teal: #86b7ad;
  --rose: #d39aa4;
  --blue: #8da9c8;
  --spectrum-notice: #7db7d8;
  --spectrum-stabilise: #78b89f;
  --spectrum-discern: #a8c6d8;
  --spectrum-reclaim: #e1b45e;
  --spectrum-cross: #a58dcb;
  --spectrum-embody: #d79baa;
  --spectrum-integrate: #7fb5b0;
  --section-color: var(--gold);
  --line: rgba(216, 180, 90, 0.22);
  --line-strong: rgba(247, 223, 155, 0.5);
  --panel: rgba(8, 8, 5, 0.86);
  --serif: "Iowan Old Style", "Baskerville", "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --safe-top: max(18px, env(safe-area-inset-top));
  --safe-bottom: max(18px, env(safe-area-inset-bottom));
  --sword-axis-x: 50.274%;
  font-family: var(--sans);
  background: var(--night);
  color: var(--ivory);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--night); scroll-behavior: auto; }
body { min-height: 100vh; margin: 0; overflow-x: hidden; background: var(--night); }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }
img { display: block; max-width: 100%; }

::selection { color: #140d00; background: var(--gold-light); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ambient-field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.6;
}

#app { position: relative; min-height: 100vh; z-index: 1; }

.app-shell {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 8%, color-mix(in srgb, var(--section-color) 11%, transparent), transparent 31rem),
    linear-gradient(180deg, rgba(8, 8, 5, 0.76), rgba(3, 3, 2, 0.95));
}

.app-shell::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .9;
}

.interface-navigation::before {
  background:
    radial-gradient(circle at 50% 9%, color-mix(in srgb, var(--section-color) 14%, transparent), transparent 36rem),
    radial-gradient(circle at 8% 58%, color-mix(in srgb, var(--section-color) 5%, transparent), transparent 32rem);
}

.interface-practice::before {
  background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--section-color) 15%, transparent), transparent 32rem);
}

.interface-teaching::before {
  background:
    radial-gradient(circle at 12% 14%, color-mix(in srgb, var(--section-color) 12%, transparent), transparent 30rem),
    linear-gradient(90deg, color-mix(in srgb, var(--section-color) 5%, transparent), transparent 62%);
}

.interface-threshold::before {
  background:
    radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--section-color) 19%, transparent), transparent 30rem),
    linear-gradient(180deg, transparent 58%, color-mix(in srgb, var(--section-color) 7%, transparent) 62%, transparent 64%);
}

.interface-teaching .page { width: min(820px, 100%); }
.interface-teaching .prose { max-width: 44rem; }
.interface-practice .page:not(.wide) { width: min(700px, 100%); }

.app-shell:not(.spectrum-orientation) .topbar-title span,
.app-shell:not(.spectrum-orientation) .section-intro > .eyebrow {
  color: color-mix(in srgb, var(--section-color) 84%, var(--gold-light));
}

.app-shell:not(.spectrum-orientation) .section-intro {
  position: relative;
  padding-left: 18px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--section-color) 7%, transparent), transparent 68%);
}

.app-shell:not(.spectrum-orientation) .section-intro::before {
  content: "";
  position: absolute;
  inset: 3px auto 3px 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--section-color) 76%, transparent), transparent);
}

.interface-teaching .section-intro::before { width: 3px; }
.interface-practice .section-intro {
  padding-inline: 0;
  text-align: center;
  background: none;
}
.interface-practice .section-intro::before { display: none; }
.interface-practice .section-intro .lede { margin-inline: auto; }

.page {
  width: min(760px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: 28px clamp(20px, 6vw, 52px) calc(var(--safe-bottom) + 48px);
}

.page.wide { width: min(1120px, 100%); }

.topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  left: auto;
  width: min(1120px, 100%);
  min-height: calc(var(--safe-top) + 54px);
  padding: var(--safe-top) clamp(14px, 4vw, 30px) 8px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  /* A solid reading surface prevents scrolled text showing through controls. */
  background: #030302;
}

.topbar-title { min-width: 0; overflow-wrap: anywhere; }
.topbar-title strong { display: block; font-family: var(--serif); font-size: 1.25rem; font-weight: 400; }
.topbar-title span { display: block; color: var(--gold); font-size: 0.78rem; line-height: 1.35; margin-top: 2px; }
.topbar-actions { display: flex; gap: 6px; align-items: center; }

.icon-button,
.text-button,
.primary-button,
.secondary-button,
.choice,
.door,
.list-row,
.tone-option,
.field-node,
.chip {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(10, 10, 7, 0.72);
  color: var(--ivory);
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.icon-button {
  text-decoration: none;
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.2rem;
}

.sound-glyph {
  position: relative;
  width: 22px;
  height: 20px;
  display: inline-block;
  flex: 0 0 22px;
}

.sound-speaker {
  position: absolute;
  left: 2px;
  top: 7px;
  width: 5px;
  height: 7px;
  border-radius: 1px;
  background: currentColor;
}

.sound-speaker::after {
  content: "";
  position: absolute;
  left: 4px;
  top: -3px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 0;
  border-left: 7px solid currentColor;
}

.sound-wave {
  position: absolute;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-radius: 50%;
}

.sound-wave-one { left: 10px; top: 6px; width: 7px; height: 9px; }
.sound-wave-two { left: 11px; top: 3px; width: 11px; height: 15px; opacity: .72; }
.sound-slash { display: none; }

.sound-glyph.is-off .sound-wave { display: none; }
.sound-glyph.is-off .sound-slash {
  position: absolute;
  display: block;
  left: 10px;
  top: 2px;
  width: 1.5px;
  height: 18px;
  border-radius: 2px;
  background: currentColor;
  transform: rotate(-42deg);
  transform-origin: center;
}

.icon-button:hover,
.text-button:hover,
.primary-button:hover,
.secondary-button:hover,
.choice:hover,
.door:hover,
.list-row:hover,
.tone-option:hover,
.field-node:hover,
.chip:hover {
  border-color: var(--line-strong);
  background: rgba(216, 180, 90, 0.09);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

button:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

.text-button { min-width: 44px; min-height: 44px; padding: 0 14px; color: var(--ivory-soft); }
.primary-button,
.secondary-button {
  width: 100%;
  min-height: 54px;
  padding: 12px 18px;
  font-family: var(--serif);
  font-size: 1.08rem;
}
.primary-button {
  color: #fff9e8;
  border-color: rgba(247, 223, 155, 0.58);
  background: linear-gradient(100deg, rgba(110, 77, 15, 0.54), rgba(216, 180, 90, 0.25), rgba(46, 34, 9, 0.6));
  box-shadow: inset 0 1px rgba(255, 245, 214, 0.08), 0 10px 34px rgba(0, 0, 0, 0.2);
}
.app-shell:not(.spectrum-orientation) .primary-button {
  border-color: color-mix(in srgb, var(--section-color) 58%, transparent);
  background: linear-gradient(100deg, color-mix(in srgb, var(--section-color) 24%, #090806), color-mix(in srgb, var(--section-color) 13%, #17130a), rgba(8, 8, 5, .82));
}
.secondary-button { background: rgba(7, 7, 5, 0.68); color: var(--ivory-soft); }
.button-row { display: flex; gap: 10px; align-items: center; }
.button-row > * { flex: 1; }

.eyebrow {
  margin: 0 0 10px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 600;
}

h1, h2, h3, p { overflow-wrap: anywhere; }
.display,
.page-title,
.practice-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ivory);
}
.display { font-size: clamp(2.7rem, 8vw, 5.2rem); line-height: 0.98; }
.page-title { font-size: clamp(2.15rem, 7vw, 3.65rem); line-height: 1.04; }
.practice-title { font-size: clamp(2rem, 7vw, 3.4rem); line-height: 1.08; text-align: center; }
.lede { color: var(--ivory-soft); font-size: clamp(1rem, 2.6vw, 1.16rem); line-height: 1.65; }
.muted { color: var(--ivory-soft); }
.gold { color: var(--gold-light); }
.measure { max-width: 62ch; }

/* First Light */
.landing {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #000;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.landing-inner {
  position: relative;
  z-index: 3;
  width: min(590px, 100%);
  min-height: 100svh;
  padding: calc(var(--safe-top) + 18px) 24px calc(var(--safe-bottom) + 22px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(300px, 1fr) auto auto;
  justify-items: center;
  align-items: center;
}

.landing-navigation { width: 100%; min-width: 0; }
.landing-tools > * { min-width: 0; max-width: 100%; white-space: normal; }
.landing-replay-button span { min-width: 0; overflow-wrap: anywhere; }
.landing-quick-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; margin-bottom: .5rem; }
.landing-quick-actions a,
.landing-quick-actions button { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; padding: .5rem 0; border: 0; background: none; color: var(--gold-light); font: inherit; font-size: .9375rem; cursor: pointer; text-decoration: underline; text-underline-offset: .25em; }
.landing-quick-actions :focus-visible { outline: 3px solid var(--gold-light); outline-offset: 4px; }
.landing-tools {
  flex-wrap: wrap;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  opacity: 0;
  animation: revealControl 800ms 15.18s ease forwards;
}

.ceremony.is-settled .landing-tools { opacity: 1; animation: none; }
.landing-replay-button {
  min-height: 44px;
  padding: 0 14px 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(10, 10, 7, .74);
  color: var(--gold-light);
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
}
.landing-replay-button:hover { border-color: var(--line-strong); background: rgba(216, 180, 90, .09); }
.ceremony.is-playing .landing-tools,
.ceremony.is-playing .landing-copy,
.ceremony.is-playing .landing-actions { pointer-events: none; }
.ceremony.is-playing.entry-ready .landing-actions {
  pointer-events: auto;
  opacity: 1;
  transform: none;
  animation: none;
}

.landing-title {
  width: 100%;
  min-width: 0;
  container-type: inline-size;
  align-self: end;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  animation: revealTitle .82s 13.08s ease forwards;
}
.landing-title span { display: block; font-family: var(--serif); font-weight: 400; line-height: 0.88; }
.landing-title .tone-word { font-size: clamp(4rem, 17vw, 7rem); color: var(--ivory); }
.landing-title .sovereign-word { margin-top: 10px; font-size: clamp(2rem, 8.8vw, 3.7rem); color: var(--ivory); }
/* The wordmark scales to its own column; enlarged controls may wrap beneath it. */
.landing-title .tone-word { font-size: min(7rem, 26cqi); }
.landing-title .sovereign-word { font-size: min(3.7rem, 12cqi); }
.landing-copy { min-width: 0; max-width: 100%; }

.ceremony.is-settled .landing-title,
.ceremony.is-settled .landing-copy,
.ceremony.is-settled .landing-actions { opacity: 1; transform: none; animation: none; }

.mark-stage {
  --mark-w: min(65vw, 310px);
  --ring-left: calc(var(--sword-axis-x) - 33.8%);
  --ring-top: 20%;
  --ring-size: 67.6%;
  --ring-draw-delay: 4.309s;
  --ring-draw-duration: 2.812s;
  position: relative;
  width: var(--mark-w);
  aspect-ratio: 730 / 940;
  align-self: center;
  margin-top: 6px;
}

.sword-mark,
.sword-construction-mark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sword-construction-mark {
  opacity: 0;
  filter: brightness(0.38) saturate(0.84) drop-shadow(0 0 0 transparent);
  animation: revealSword 1.72s .48s cubic-bezier(.2,.7,.2,1) forwards,
             awakenSword 3.54s 9.42s ease forwards,
             retireConstructingMark .82s 11.94s ease forwards;
}

.sword-blade-mark { clip-path: inset(1% 45.5% 31% 45.5% round 999px); }
.sword-hilt-mark { clip-path: inset(65.5% 29% 29.5% 29% round 999px); }
.sword-handle-mark { clip-path: inset(68.5% 45.9% 18.5% 45.9% round 999px); }
.sword-triskelion-mark { clip-path: circle(18.5% at 50.274% 87.3%); }

.sword-mark {
  opacity: 0;
  filter: brightness(.92) saturate(.96) drop-shadow(0 0 0 transparent);
  animation: revealCompletedMark 1.02s 11.94s ease forwards;
}

.ceremony.is-settled .sword-construction-mark { opacity: 0; animation: none; }
.ceremony.is-settled .sword-mark {
  opacity: 1;
  filter: brightness(1.02) saturate(1.02) drop-shadow(0 0 18px rgba(216, 180, 90, 0.16));
  animation: none;
}

.ring-trace {
  position: absolute;
  z-index: 4;
  left: var(--ring-left);
  top: var(--ring-top);
  width: var(--ring-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 218deg, #fff6ce 0deg, var(--gold) var(--ring-progress, 0deg), transparent calc(var(--ring-progress, 0deg) + .8deg));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  opacity: 0;
  filter: drop-shadow(0 0 7px rgba(247, 223, 155, 0.8));
  animation: drawRing var(--ring-draw-duration) var(--ring-draw-delay) linear forwards,
             fadeConstructingRing .82s 11.94s ease forwards;
}
.ceremony.is-settled .ring-trace { opacity: 0; animation: none; }

.ring-leading-star-orbit {
  position: absolute;
  z-index: 7;
  left: var(--ring-left);
  top: var(--ring-top);
  width: var(--ring-size);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: rotate(218deg);
  animation: leadRing var(--ring-draw-duration) var(--ring-draw-delay) linear forwards;
}

.ring-leading-star {
  position: absolute;
  left: 50%;
  top: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fffdf2;
  box-shadow:
    0 0 7px 2px #fff4bd,
    0 0 22px 8px rgba(242, 190, 62, 0.82);
  transform: translate(-50%, -50%);
}

.ring-leading-star::before,
.ring-leading-star::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: linear-gradient(90deg, transparent, #fff8cf, transparent);
  transform: translate(-50%, -50%);
}

.ring-leading-star::before { width: 42px; height: 1px; }
.ring-leading-star::after { width: 1px; height: 42px; }
.ceremony.is-settled .ring-leading-star-orbit { display: none; }

.travelling-star {
  position: absolute;
  z-index: 7;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fffdf2;
  box-shadow: 0 0 7px 2px #fff4bd, 0 0 22px 8px rgba(242, 190, 62, 0.72);
}
.travelling-star::before,
.travelling-star::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: linear-gradient(90deg, transparent, #fff8cf, transparent);
  transform: translate(-50%, -50%);
}
.travelling-star::before { width: 40px; height: 1px; }
.travelling-star::after { width: 1px; height: 40px; }

.travelling-star {
  left: calc(var(--sword-axis-x) - 4px);
  top: 86%;
  opacity: 0;
  animation: traceMark 6.54s 2.38s linear forwards;
}
.ceremony.is-settled .travelling-star { display: none; }

.blade-current {
  position: absolute;
  z-index: 5;
  left: calc(var(--sword-axis-x) - 8px);
  top: 7%;
  width: 16px;
  height: 64%;
  opacity: 0;
  background: linear-gradient(180deg, transparent 0%, #fffbdc 48%, transparent 54%);
  filter: blur(3px) drop-shadow(0 0 10px #f4c95d);
  animation: bladeRise 1.50s 7.42s ease-in forwards;
}
.ceremony.is-settled .blade-current { display: none; }

.tip-star {
  position: absolute;
  z-index: 8;
  left: calc(var(--sword-axis-x) - 4px);
  top: calc(3.05% - 4px);
  width: 8px;
  height: 8px;
  overflow: visible;
  opacity: 0;
  animation: crownArrival .92s 8.92s ease-out forwards, livingStar 1.46s 12.96s steps(4, end) infinite;
}
.ceremony.is-settled .tip-star { opacity: 1; animation: livingStar 1.46s steps(4, end) infinite; }

.tip-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #fffef5;
  box-shadow:
    0 0 5px 2px #fff,
    0 0 15px 6px rgba(255, 237, 158, 0.96),
    0 0 34px 13px rgba(242, 190, 62, 0.72);
  animation: tipCoreFlicker 0.91s steps(3, end) infinite;
}

.tip-ray {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--ray-length);
  height: 1.2px;
  border-radius: 999px;
  transform-origin: 0 50%;
  transform: rotate(var(--ray-angle)) scaleX(0.24);
  background: linear-gradient(90deg, rgba(255,255,255,.98), rgba(255,244,190,.78) 30%, rgba(230,174,48,.22) 72%, transparent);
  box-shadow: 0 0 6px rgba(255, 238, 159, 0.84);
  opacity: 0.18;
  animation: tipRayFlicker var(--ray-speed) var(--ray-delay) steps(3, end) infinite;
}

.tip-spark {
  position: absolute;
  left: calc(50% - 1.5px);
  top: calc(50% - 1.5px);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fffbd9;
  box-shadow: 0 0 7px 2px rgba(248, 208, 93, 0.82);
  opacity: 0;
  animation: tipSparkFlight var(--spark-speed) var(--spark-delay) ease-out infinite;
}

.sun-rays {
  position: absolute;
  z-index: 2;
  left: var(--sword-axis-x);
  top: 3.05%;
  width: min(94vw, 720px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.04);
  opacity: 0;
  background: repeating-conic-gradient(from 4deg, rgba(255, 244, 189, 0.8) 0deg 0.8deg, transparent 1deg 14deg);
  -webkit-mask: radial-gradient(circle, transparent 0 4%, #000 17%, transparent 68%);
  mask: radial-gradient(circle, transparent 0 4%, #000 17%, transparent 68%);
  animation: openRays 2.40s 9.18s cubic-bezier(.1,.5,.2,1) forwards;
}
.ceremony.is-settled .sun-rays { opacity: 0.08; transform: translate(-50%, -50%) scale(0.72); animation: rayTurn 32s linear infinite; }

.gold-wash {
  position: fixed;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 34%, #fffef2 0, #fff8aa 14%, #eac65d 42%, rgba(183, 131, 25, 0.7) 68%, rgba(0, 0, 0, 0) 100%);
  mix-blend-mode: screen;
  animation: washField 3.54s 9.42s ease-in-out forwards;
}
.ceremony.is-settled .gold-wash { opacity: 0; animation: none; }

.landing-copy {
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  animation: revealCopy .88s 13.86s ease forwards;
}
.landing-copy p { margin: 0; color: var(--ivory-soft); font-size: clamp(1.05rem, 4vw, 1.35rem); }
.landing-copy strong { display: block; margin-top: 4px; font-family: var(--serif); font-size: clamp(2.1rem, 8vw, 3.6rem); font-weight: 400; color: var(--gold-light); }
.symbol-link { min-height: 44px; margin-top: 4px; padding: 0 12px; border: 0; background: transparent; color: rgba(216, 180, 90, 0.78); cursor: pointer; }

.landing-actions {
  width: min(360px, 100%);
  margin-top: 14px;
  opacity: 0;
  transform: translateY(8px);
  animation: revealControl .82s 15.18s ease forwards;
}
.enter-button {
  width: 100%;
  min-height: 50px;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ivory);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  cursor: pointer;
}

@keyframes revealSword { to { opacity: .92; filter: brightness(.76) saturate(.9); } }
@keyframes awakenSword { to { opacity: 1; filter: brightness(1.02) saturate(1.02) drop-shadow(0 0 18px rgba(216,180,90,.16)); } }
@keyframes retireConstructingMark { to { opacity: 0; } }
@keyframes revealCompletedMark { to { opacity: 1; filter: brightness(1.02) saturate(1.02) drop-shadow(0 0 18px rgba(216,180,90,.16)); } }
@keyframes drawRing { 0% { opacity: 1; --ring-progress: 0deg; } 100% { opacity: 1; --ring-progress: 284deg; } }
@keyframes leadRing {
  0% { opacity: 1; transform: rotate(218deg); }
  99.5% { opacity: 1; transform: rotate(502deg); }
  100% { opacity: 0; transform: rotate(502deg); }
}
@keyframes fadeConstructingRing { to { opacity: 0; } }
@property --ring-progress { syntax: "<angle>"; inherits: false; initial-value: 0turn; }
@keyframes traceMark {
  0% { left: calc(var(--sword-axis-x) - 4px); top: 85%; opacity: 0; transform: scale(.5); }
  10.7% { left: calc(var(--sword-axis-x) - 4px); top: 85%; opacity: 1; transform: scale(1.2); }
  26.3% { left: calc(var(--sword-axis-x) - 4px); top: 68%; opacity: 1; }
  29.2% { left: 27%; top: 64%; opacity: 1; }
  29.5% { left: 27%; top: 64%; opacity: 0; }
  40% { left: 15%; top: 45%; opacity: 0; }
  51% { left: 30%; top: 22%; opacity: 0; }
  57% { left: calc(var(--sword-axis-x) - 4px); top: 19%; opacity: 0; }
  63% { left: 70%; top: 22%; opacity: 0; }
  69% { left: 85%; top: 45%; opacity: 0; }
  72.4% { left: 73%; top: 64%; opacity: 0; }
  72.5% { left: 73%; top: 64%; opacity: 1; }
  77.1% { left: calc(var(--sword-axis-x) - 4px); top: 68%; }
  98% { left: calc(var(--sword-axis-x) - 4px); top: 3.05%; opacity: 1; transform: scale(1.4); }
  100% { left: calc(var(--sword-axis-x) - 4px); top: 3.05%; opacity: 0; transform: scale(2); }
}
@keyframes bladeRise { 0% { opacity: 0; background-position-y: 100%; transform: translateY(35%); } 35% { opacity: 1; } 100% { opacity: 0; background-position-y: 0; transform: translateY(-35%); } }
@keyframes crownArrival { 0% { opacity: 0; transform: scale(.2); } 55% { opacity: 1; transform: scale(2); } 100% { opacity: 1; transform: scale(1); } }
@keyframes livingStar {
  0%, 100% { transform: scale(.88) rotate(-1deg); filter: brightness(.96); }
  13% { transform: scale(1.42) rotate(2deg); filter: brightness(1.52); }
  22% { transform: scale(.98) rotate(-2deg); filter: brightness(1.08); }
  47% { transform: scale(1.22) rotate(1deg); filter: brightness(1.32); }
  71% { transform: scale(.91) rotate(0deg); filter: brightness(1.01); }
  83% { transform: scale(1.55) rotate(3deg); filter: brightness(1.64); }
}
@keyframes tipCoreFlicker {
  0%, 100% { transform: scale(.86); filter: brightness(.96); }
  19% { transform: scale(1.35); filter: brightness(1.55); }
  31% { transform: scale(.95); }
  62% { transform: scale(1.18); filter: brightness(1.28); }
  76% { transform: scale(.9); }
}
@keyframes tipRayFlicker {
  0%, 100% { opacity: .12; transform: rotate(var(--ray-angle)) scaleX(.24); }
  14% { opacity: .94; transform: rotate(var(--ray-angle)) scaleX(1); }
  24% { opacity: .28; transform: rotate(var(--ray-angle)) scaleX(.38); }
  53% { opacity: .74; transform: rotate(var(--ray-angle)) scaleX(.76); }
  67% { opacity: .18; transform: rotate(var(--ray-angle)) scaleX(.3); }
  84% { opacity: 1; transform: rotate(var(--ray-angle)) scaleX(.92); }
}
@keyframes tipSparkFlight {
  0%, 48% { opacity: 0; transform: rotate(var(--spark-angle)) translateX(4px) scale(.5); }
  53% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--spark-angle)) translateX(var(--spark-distance)) scale(.12); }
}
@keyframes openRays { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.04); } 45% { opacity: .92; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.22) rotate(8deg); } }
@keyframes rayTurn { to { transform: translate(-50%,-50%) scale(.72) rotate(360deg); } }
@keyframes washField { 0%,100% { opacity: 0; } 42% { opacity: .98; } 62% { opacity: .82; } }
@keyframes revealTitle { to { opacity: 1; transform: none; } }
@keyframes revealCopy { to { opacity: 1; transform: none; } }
@keyframes revealControl { to { opacity: 1; transform: none; } }

/* Orientation and Five Doors */
.hero-copy { margin: 12px 0 0; max-width: 34rem; }
.door-stack { margin-top: 36px; border-top: 1px solid var(--line); }
.door {
  width: 100%;
  min-height: 112px;
  padding: 20px 10px;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 26px;
  gap: 18px;
  align-items: center;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.spectrum-row {
  --item-color: var(--section-color);
  position: relative;
  border-left: 2px solid color-mix(in srgb, var(--item-color) 64%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--item-color) 11%, transparent), color-mix(in srgb, var(--item-color) 3%, transparent) 56%, transparent);
}
.spectrum-row:hover {
  border-left-color: var(--item-color);
  background: linear-gradient(90deg, color-mix(in srgb, var(--item-color) 17%, transparent), color-mix(in srgb, var(--item-color) 4%, transparent) 62%, transparent);
}
.spectrum-row .door-mark,
.spectrum-row .door-arrow,
.spectrum-row > b,
.spectrum-row > span > b { color: var(--item-color); }
.spectrum-row .door-mark {
  border-color: color-mix(in srgb, var(--item-color) 58%, transparent);
  background: radial-gradient(circle, color-mix(in srgb, var(--item-color) 11%, transparent), transparent 72%);
  box-shadow: inset 0 0 22px color-mix(in srgb, var(--item-color) 8%, transparent), 0 0 24px color-mix(in srgb, var(--item-color) 7%, transparent);
}
.spectrum-row .door-copy span { color: color-mix(in srgb, var(--item-color) 78%, var(--ivory-soft)); }
.door.primary-door { min-height: 148px; }
.door-mark,
.movement-mark {
  position: relative;
  width: 58px;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold-light);
  font-family: var(--serif);
  font-size: 1.45rem;
  box-shadow: inset 0 0 22px rgba(216, 180, 90, 0.06);
}
.door.primary-door .door-mark { width: 68px; }
.door-copy strong { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 5vw, 2.35rem); }
.door-copy span { display: block; margin-top: 5px; color: var(--gold); line-height: 1.45; }
.door-arrow { color: var(--ivory-soft); font-size: 1.5rem; }
.home-footer { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

.orientation-invitation {
  width: 100%;
  min-height: 92px;
  margin: 18px 0 26px;
  padding: 16px 4px;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ivory);
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 24px;
  gap: 16px;
  align-items: center;
  text-align: left;
  cursor: pointer;
}
.orientation-invitation strong { display: block; font-family: var(--serif); font-size: 1.35rem; font-weight: 400; }
.orientation-invitation small { display: block; margin-top: 5px; color: var(--ivory-soft); line-height: 1.45; }
.orientation-invitation b { color: var(--gold-light); font-weight: 400; }
.orientation-invitation.spectrum-row {
  padding-inline: 12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--item-color) 10%, transparent), transparent 70%);
}

/* Practice */
.practice-page { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; }
.movement-field-page { padding-top: clamp(28px, 7vh, 76px); }
.movement-field-intro { text-align: center; }
.movement-field-intro .lede { margin-inline: auto; }
.full-practice-entry {
  width: min(760px, 100%);
  min-height: 108px;
  margin: 26px auto 0;
  padding: 18px 20px;
  border: 1px solid rgba(216,180,90,.55);
  border-radius: 8px;
  background: radial-gradient(circle at 12% 50%, rgba(216,180,90,.15), rgba(0,0,0,.16) 56%);
  color: var(--ivory);
  display: grid;
  grid-template-columns: 58px minmax(0,1fr) 22px;
  gap: 16px;
  align-items: center;
  text-align: left;
}
.full-practice-entry > span:first-child { width: 54px; aspect-ratio: 1; border: 1px solid var(--line-strong); border-radius: 50%; display: grid; place-items: center; color: var(--gold-light); font-size: 1.5rem; }
.full-practice-entry strong { display: block; font-family: var(--serif); font-size: 1.45rem; font-weight: 400; }
.full-practice-entry small { display: block; margin-top: 6px; color: var(--gold); line-height: 1.4; }
.full-practice-entry b { color: var(--gold-light); font-weight: 400; }
.guided-practice-entry {
  width: min(760px, 100%);
  min-height: 78px;
  margin: 14px auto 0;
  padding: 13px 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ivory);
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) 20px;
  gap: 14px;
  align-items: center;
  text-align: left;
}
.guided-practice-entry > span:first-child { width: 42px; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; color: var(--gold-light); }
.guided-practice-entry strong { display: block; font-family: var(--serif); font-size: 1.22rem; font-weight: 400; }
.guided-practice-entry small { display: block; margin-top: 4px; color: var(--gold); }
.guided-practice-entry b { color: var(--gold-light); font-weight: 400; }
.movement-or-label { margin: 26px 0 0; color: var(--gold); font-size: .72rem; letter-spacing: .16em; text-align: center; }
.movement-field-grid {
  width: min(760px, 100%);
  margin: clamp(26px, 5vh, 48px) auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.movement-field-choice {
  min-height: 116px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--movement-color) 36%, transparent);
  border-radius: 8px;
  background: radial-gradient(circle at 20% 50%, color-mix(in srgb, var(--movement-color) 10%, transparent), rgba(0,0,0,.16) 58%);
  color: var(--ivory);
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 14px;
  text-align: left;
  cursor: pointer;
}
.movement-field-choice:hover { border-color: color-mix(in srgb, var(--movement-color) 74%, transparent); transform: translateY(-1px); }
.movement-field-choice:nth-child(7) { grid-column: 1 / -1; width: calc(50% - 6px); justify-self: center; }
.movement-field-mark {
  width: 60px;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--movement-color) 60%, transparent);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--movement-color);
  font-family: var(--serif);
  font-size: 1.8rem;
  box-shadow: inset 0 0 28px color-mix(in srgb, var(--movement-color) 8%, transparent), 0 0 28px color-mix(in srgb, var(--movement-color) 7%, transparent);
}
.movement-field-choice strong { display: block; font-family: var(--serif); font-size: 1.45rem; font-weight: 400; }
.movement-field-choice small { display: block; margin-top: 5px; color: color-mix(in srgb, var(--movement-color) 76%, var(--ivory-soft)); line-height: 1.35; }
.movement-field-choice b { color: var(--movement-color); font-weight: 400; }
.movement-field-note { margin: 28px auto 0; max-width: 540px; color: var(--ivory-soft); text-align: center; line-height: 1.55; }
.movement-session-page { min-height: calc(100svh - 82px); display: grid; }
.movement-session-page .eyebrow,
.movement-session-page .practice-settings-row,
.movement-session-page .timer { color: var(--movement-color); }
.movement-session-page .choice.selected {
  border-color: color-mix(in srgb, var(--movement-color) 72%, transparent);
  background: color-mix(in srgb, var(--movement-color) 14%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--movement-color) 8%, transparent);
}
.movement-session-page .practice-stage { animation: movementStageIn 240ms ease both; }
@keyframes movementStageIn { from { opacity: 0; } to { opacity: 1; } }
.focused-stage { width: min(620px, 100%); margin-inline: auto; justify-items: center; text-align: center; }
.movement-heading { width: 100%; }
.movement-heading .practice-title { margin-inline: auto; }
.continuity-page { min-height: calc(100svh - 82px); display: grid; align-content: center; gap: 34px; }
.continuity-page .lede { max-width: 520px; margin: 0 auto; text-align: center; }
.seal-orb { display: grid; place-items: center; color: var(--gold-light); font-size: 2.2rem; }
.practice-settings-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px; color: var(--gold); }
.practice-settings-row label { display: flex; align-items: center; gap: 8px; }
.practice-settings-row select { min-height: 44px; border: 1px solid var(--line); border-radius: 6px; background: #070705; color: var(--ivory); padding: 0 12px; }
.notice-instrument.still .aperture-ring { animation: none; }
.notice-live-stage .button-row { width: 100%; justify-content: center; }
.notice-status { margin: -14px 0 0; color: var(--movement-color); font-size: .78rem; letter-spacing: .15em; text-transform: uppercase; }
.notice-instrument.acknowledged .aperture-ring { opacity: .34; transform: scale(1.04); }
.notice-instrument.acknowledged .aperture-line { opacity: .28; }
.notice-instrument.acknowledged .aperture-point { transform: scale(1.18); box-shadow: 0 0 24px var(--movement-color); }
.stabilise-instrument {
  position: relative;
  width: min(260px, 68vw);
  height: 126px;
  margin-inline: auto;
  display: grid;
  place-items: center;
  color: var(--movement-color);
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--movement-color) 12%, transparent), transparent 65%);
}
.stabilise-instrument span { width: 1px; height: 88px; background: currentColor; box-shadow: 0 0 14px currentColor; }
.stabilise-instrument i { position: absolute; width: 86%; height: 1px; background: color-mix(in srgb, currentColor 44%, transparent); }
.state-list { width: min(620px, 100%); margin-inline: auto; display: grid; gap: 9px; }
.state-choice {
  min-height: 72px;
  padding: 12px 16px;
  border: 1px solid rgba(134,183,173,.22);
  border-radius: 8px;
  background: rgba(7,15,13,.36);
  color: var(--ivory);
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) 18px;
  gap: 13px;
  align-items: center;
  text-align: left;
}
.state-choice strong, .state-choice small { display: block; }
.state-choice small { margin-top: 4px; color: var(--ivory-soft); }
.state-choice b { color: #86b7ad; font-weight: 400; }
.state-mini-axis { position: relative; width: 32px; height: 32px; display: block; }
.state-mini-axis::before { content: ""; position: absolute; left: 50%; top: 3px; width: 1px; height: 26px; background: rgba(var(--pattern-rgb, 134,183,173),.78); }
.state-mini-axis::after { content: ""; position: absolute; left: 4px; top: 50%; width: 24px; height: 1px; background: rgba(var(--pattern-rgb, 134,183,173),.38); }
.consent-copy { max-width: 520px; margin: 0 auto; color: var(--gold); text-align: center; line-height: 1.55; }
.capacity-stage { min-height: min(680px, calc(100svh - 100px)); }
.capacity-choices { width: min(570px, 100%); }
.capacity-instrument { width: min(600px, 100%); margin-inline: auto; }
.discern-lenses { position: relative; min-height: 142px; display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center; }
.discern-lens { width: min(132px, 32vw); aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--movement-color) 44%, transparent); border-radius: 50%; display: grid; place-items: center; justify-self: center; background: radial-gradient(circle, color-mix(in srgb, var(--movement-color) 13%, transparent), transparent 68%); transition: opacity 280ms ease, box-shadow 280ms ease, border-color 280ms ease; }
.discern-lens span { max-width: 12ch; color: var(--ivory-soft); font-size: .76rem; line-height: 1.25; text-align: center; }
.discern-lens small, .discern-lenses > p small, .instrument-labels small { display: block; margin-top: 5px; color: var(--ivory); font-size: .68rem; font-weight: 400; letter-spacing: 0; line-height: 1.25; text-transform: none; }
.discern-channel { height: 1px; background: linear-gradient(90deg, var(--movement-color), rgba(255,255,255,.2), var(--movement-color)); }
.discern-lenses > p { grid-column: 1 / -1; margin: -8px 0 0; color: var(--ivory-soft); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.discern-lenses.step-0 .direct, .discern-lenses.step-1 .added { border-color: var(--movement-color); box-shadow: 0 0 34px color-mix(in srgb, var(--movement-color) 22%, transparent); }
.discern-lenses.step-0 .added, .discern-lenses.step-1 .direct { opacity: .42; }
.discern-lenses.step-2 .discern-lens { opacity: .42; }
.discern-lenses.step-2 > p { color: var(--movement-color); }
.integrate-strands svg { display: block; width: 100%; height: 116px; overflow: visible; }
.integrate-strands .strand { fill: none; stroke: var(--movement-color); stroke-width: 1.4; opacity: .42; transition: opacity 280ms ease, stroke-width 280ms ease; }
.integrate-strands .one { opacity: .9; stroke-width: 2.2; }
.integrate-strands .two { stroke: var(--spectrum-cross); }
.integrate-strands .three { stroke: var(--spectrum-stabilise); }
.integrate-strands circle { fill: #020303; stroke: var(--movement-color); stroke-width: 1.5; }
.integrate-strands.step-1 .two { opacity: .92; stroke-width: 2.2; }
.integrate-strands.step-2 .three { opacity: .92; stroke-width: 2.2; }
.instrument-labels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; color: var(--ivory-soft); font-size: .72rem; letter-spacing: .06em; line-height: 1.3; text-transform: uppercase; }
.integrate-strands.step-0 .instrument-labels span:first-child, .integrate-strands.step-1 .instrument-labels span:nth-child(2), .integrate-strands.step-2 .instrument-labels span:nth-child(3) { color: var(--movement-color); }
.reclaim-instrument.small { width: min(210px, 54vw); }
.reclaim-instrument.is-complete { box-shadow: 0 0 72px rgba(216,180,90,.24), inset 0 0 44px rgba(216,180,90,.08); }
.reclaim-custom-field { width: min(520px, 100%); text-align: left; }
.reclaim-spiral { position: absolute; width: 64%; height: 64%; overflow: visible; transform: rotate(-8deg); transition: opacity 380ms ease, transform 3.2s linear; }
.reclaim-spiral path { fill: none; stroke: var(--gold-light); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 230; stroke-dashoffset: 0; filter: drop-shadow(0 0 7px rgba(216,180,90,.55)); transition: stroke-dashoffset 3.2s linear, opacity 380ms ease; }
.reclaim-instrument:not(.is-complete) .reclaim-line { height: 16%; opacity: .24; }
.reclaim-instrument.hold-active .reclaim-spiral { transform: rotate(-30deg); }
.reclaim-instrument.hold-active .reclaim-spiral path { stroke-dashoffset: 210; }
.reclaim-instrument.is-complete .reclaim-spiral { opacity: 0; }
.reclaim-instrument.is-complete .reclaim-line { height: 62%; opacity: 1; transition: height 380ms ease, opacity 380ms ease; }
.reclaim-opening { width: min(178px, 48vw); }
.reclaim-opening .reclaim-spiral { opacity: .9; }
.reclaim-opening .reclaim-point { width: 11px; height: 11px; }
.reclaim-centre-copy { margin: -12px auto 0; max-width: 32rem; color: var(--ivory-soft); line-height: 1.5; }
.cross-focus-grid { width: min(760px, 100%); display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.cross-focus-choice { min-height: 104px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0,0,0,.24); color: var(--ivory); display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; gap: 3px 12px; text-align: left; align-items: center; }
.cross-focus-choice > span { grid-row: 1 / 3; width: 42px; aspect-ratio: 1; border: 1px solid var(--line-strong); border-radius: 50%; display: grid; place-items: center; color: var(--gold-light); font-family: var(--serif); }
.cross-focus-choice strong { font-family: var(--serif); font-size: 1.22rem; font-weight: 400; }
.cross-focus-choice small { color: var(--ivory-soft); line-height: 1.35; }
.cross-focus-carousel { width: min(560px, 100%); min-height: 250px; display: grid; grid-template-columns: 54px 1fr 54px; align-items: center; text-align: center; }
.cross-focus-carousel h2 { margin: 12px 0 4px; font-family: var(--serif); font-size: 2.2rem; font-weight: 400; }
.cross-focus-carousel p { margin: 0; color: var(--gold); }
.cross-focus-glyph { width: 112px; aspect-ratio: 1; margin: 0 auto; border: 1px solid var(--line-strong); border-radius: 50%; display: grid; place-items: center; color: var(--gold-light); font-family: var(--serif); font-size: 2.8rem; box-shadow: 0 0 44px rgba(216,180,90,.1); }
.cross-door { position: relative; width: min(260px, 66vw); aspect-ratio: .82; margin: 0 auto; border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 50% 50% 0 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 78%, rgba(247,223,155,.18), transparent 42%); }
.cross-door::before,
.cross-door::after { content: ""; position: absolute; left: 50%; top: 31%; width: 3px; height: 58%; background: var(--gold-light); box-shadow: 0 0 28px var(--gold); transform: translateX(-50%); transform-origin: 50% 100%; transition: transform 720ms cubic-bezier(.22,.8,.24,1), box-shadow 720ms ease; }
.cross-door > span { position: absolute; top: 13%; color: var(--gold); font-family: var(--serif); font-size: 1.35rem; }
.cross-door.open::before { transform: translateX(calc(-50% - 23px)) rotate(-2deg); box-shadow: 0 0 42px var(--gold-light); }
.cross-door.open::after { transform: translateX(calc(-50% + 23px)) rotate(2deg); box-shadow: 0 0 42px var(--gold-light); }
.cross-question { max-width: 680px; font-size: clamp(2.25rem, 6vw, 4rem); }
.cross-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.cross-decisions { width: min(560px, 100%); display: grid; }
.cross-decisions button { min-height: 58px; padding: 13px 16px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ivory); font: inherit; cursor: pointer; }
.cross-decisions button:first-child { border-top: 1px solid var(--line); }
.cross-decisions button:hover, .cross-decisions button:focus-visible { color: var(--movement-color); background: color-mix(in srgb, var(--movement-color) 7%, transparent); }
.cross-decisions button small { display: block; margin-top: 4px; color: var(--movement-color); font-size: .72rem; }
.remaining-copy { color: var(--movement-color); }
.tone-carousel { width: min(520px, 100%); display: grid; grid-template-columns: 50px minmax(0,1fr) 50px; align-items: center; gap: 12px; }
.tone-field.compact { height: 235px; }
.tone-field.large { width: min(640px, 100vw); height: min(430px, 47vh); }
.embody-stage { gap: 18px; }
.embody-hold-stage { min-height: calc(100svh - 120px); }
.tone-field.neutral .tone-orb { background: radial-gradient(circle, rgba(183,175,162,.22), rgba(183,175,162,.08) 28%, transparent 66%); opacity: .55; }
.tone-field.neutral .tone-wave-main { stroke-width: 4; opacity: .58; filter: drop-shadow(0 0 5px currentColor); }
.tone-field.after-image { opacity: .54; filter: saturate(.72); }
.tone-field.after-image .tone-orb { opacity: .42; }
.tone-field.after-image .tone-wave-main { stroke-width: 4; opacity: .48; filter: drop-shadow(0 0 5px currentColor); }
.embody-after-stage { gap: 16px; }
.embody-selection-context { max-width: 34rem; line-height: 1.45; }
.movement-strip { display: flex; gap: 6px; justify-content: center; margin-bottom: 24px; }
.movement-dot { width: 28px; height: 3px; border: 0; background: rgba(247,240,223,.18); padding: 0; cursor: pointer; }
.movement-dot.done { background: var(--gold-deep); }
.movement-dot.active { background: var(--gold-light); width: 42px; }
.practice-stage { display: grid; align-content: center; gap: 24px; min-height: 570px; }
.practice-copy { text-align: center; }
.practice-copy .lede { margin: 12px auto 0; max-width: 34rem; }
.practice-actions { display: grid; gap: 10px; padding-top: 20px; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.choice { min-height: 58px; padding: 12px; color: var(--ivory-soft); }
.choice.selected { color: var(--ivory); border-color: var(--gold-light); background: rgba(216,180,90,.14); box-shadow: 0 0 22px rgba(216,180,90,.08); }

.instrument-region {
  position: relative;
  width: min(270px, 68vw);
  aspect-ratio: 1;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247,223,155,.2), rgba(216,180,90,.06) 38%, rgba(0,0,0,.18) 68%);
  box-shadow: 0 0 50px rgba(216,180,90,.13), inset 0 0 44px rgba(216,180,90,.05);
}
.aperture-point { width: 18px; height: 18px; border-radius: 50%; background: var(--gold-light); box-shadow: 0 0 24px var(--gold); }
.aperture-ring { position: absolute; width: 58%; aspect-ratio: 1; border: 1px solid rgba(247,223,155,.4); border-radius: 50%; animation: breatheRing 5s ease-in-out infinite; }
.aperture-line { position: absolute; width: 56%; height: 2px; background: var(--gold-light); box-shadow: 0 0 12px var(--gold); }
@keyframes breatheRing { 50% { transform: scale(1.22); opacity: .36; } }
.cue-label { margin: -8px 0 0; color: var(--gold); text-align: center; letter-spacing: .1em; }
.timer { text-align: center; color: var(--gold); font-variant-numeric: tabular-nums; letter-spacing: .14em; }

.breath-orb { animation: breathOrb 10s ease-in-out infinite; }
.breath-orb::before { content: ""; width: 40%; aspect-ratio: 1; border-radius: 50%; background: rgba(134,183,173,.48); box-shadow: 0 0 42px rgba(134,183,173,.45); }
@keyframes breathOrb { 0%,100% { transform: scale(.82); } 40% { transform: scale(1); } 60% { transform: scale(1); } }

.steady-setup-copy {
  width: min(520px, 100%);
  margin: 5vh auto 0;
  padding: clamp(28px, 6vw, 52px) clamp(20px, 5vw, 42px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: radial-gradient(circle at 50% 46%, rgba(134,183,173,.09), transparent 68%);
}
.steady-pattern-title {
  margin: 18px 0 12px;
  color: var(--ivory);
  font-family: var(--serif);
  font-size: clamp(2rem, 7vw, 3.4rem);
  font-weight: 400;
}

.steady-session {
  position: fixed;
  z-index: 60;
  inset: 0;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(var(--steady-rgb), .065), transparent 55%),
    #030302;
}
.steady-breath-instrument {
  position: absolute;
  inset: 0 0 148px;
  width: 100%;
  height: calc(100% - 148px);
  border: 0;
  background: #030302;
  color-scheme: dark;
  pointer-events: none;
}
.steady-session-header {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  min-height: calc(var(--safe-top) + 62px);
  padding: var(--safe-top) clamp(18px, 5vw, 34px) 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(180deg, rgba(3,3,2,.88), transparent);
}
.steady-session-header .icon-button {
  flex: 0 0 auto;
  background: rgba(5,5,4,.48);
  border-color: rgba(var(--steady-rgb), .2);
}
.steady-session-header strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
}
.steady-session-header span {
  display: block;
  margin-top: 3px;
  color: rgba(var(--steady-rgb), .82);
  font-size: .76rem;
}
.steady-session-footer {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 28px max(24px, env(safe-area-inset-left)) calc(var(--safe-bottom) + 12px);
  display: grid;
  justify-items: center;
  gap: 12px;
  background: linear-gradient(180deg, transparent, rgba(3,3,2,.94) 28%, #030302 62%);
}
.steady-session-footer p {
  max-width: 430px;
  margin: 0;
  color: rgba(247,223,155,.68);
  font-size: .82rem;
  line-height: 1.45;
  text-align: center;
}
.steady-session-timer { color: rgba(247,223,155,.82); font-variant-numeric: tabular-nums; font-size: .92rem; letter-spacing: .08em; }
.steady-session-footer .primary-button { max-width: 430px; }

.field-input,
.field-textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(0,0,0,.36);
  color: var(--ivory);
  padding: 15px;
}
.field-input { min-height: 52px; }
.field-textarea { min-height: 120px; line-height: 1.5; resize: vertical; }
.field-label { display: grid; gap: 8px; color: var(--gold); }
.two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.reclaim-line { position: absolute; width: 3px; height: 62%; background: var(--gold-light); box-shadow: 0 0 16px rgba(216,180,90,.62); }
.reclaim-point { position: absolute; width: 15px; height: 15px; border-radius: 50%; background: var(--gold-light); box-shadow: 0 0 18px var(--gold); }
.hold-active .reclaim-point { animation: centreHold 2.6s ease-in-out infinite; }
@keyframes centreHold { 50% { transform: scale(1.5); box-shadow: 0 0 32px var(--gold-light); } }

.doorway-instrument { border-radius: 44% 44% 8px 8px; border-bottom: 0; background: radial-gradient(circle at 50% 76%, rgba(247,223,155,.3), transparent 35%); }
.doorway-instrument::after { content: ""; position: absolute; left: 50%; top: 15%; bottom: 6%; width: 3px; background: var(--gold-light); box-shadow: 0 0 22px var(--gold); transform: translateX(-50%); }
.doorway-instrument.cross-door::before,
.doorway-instrument.cross-door::after { top: 31%; bottom: auto; height: 58%; }
.doorway-instrument.cross-door.open::before { transform: translateX(calc(-50% - 23px)) rotate(-2deg); }
.doorway-instrument.cross-door.open::after { transform: translateX(calc(-50% + 23px)) rotate(2deg); }

.tone-field { width: min(380px, 88vw); height: 260px; margin: 0 auto; position: relative; display: grid; place-items: center; }
.tone-orb { width: 190px; aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; background: radial-gradient(circle, currentColor 0, color-mix(in srgb, currentColor 38%, transparent) 22%, transparent 65%); opacity: .7; }
.tone-wave { position: absolute; left: -4%; width: 108%; height: 180px; overflow: visible; color: inherit; }
.tone-wave path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tone-wave-halo { stroke: currentColor; stroke-width: 18; opacity: .2; filter: blur(7px); }
.tone-wave-main { stroke: currentColor; stroke-width: 8; opacity: .82; filter: drop-shadow(0 0 7px currentColor); }
.tone-wave-light { stroke: rgba(255,255,255,.75); stroke-width: 2.5; opacity: .72; }
.tone-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.range-label { display: grid; gap: 8px; color: var(--ivory-soft); text-align: center; }
input[type="range"] { accent-color: var(--gold); width: 100%; }

.completion-seal { display: grid; gap: 18px; justify-items: center; text-align: center; }
.seal-orb { width: 150px; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--line-strong); background: radial-gradient(circle, rgba(247,223,155,.62), rgba(216,180,90,.15) 32%, transparent 68%); box-shadow: 0 0 46px rgba(216,180,90,.16); }

/* Fields, teachings, acts, history */
.section-intro { margin-bottom: 30px; }
.nested-map { position: relative; min-height: 620px; display: grid; place-items: center; margin: 24px 0 34px; overflow: hidden; }
.field-ring { position: absolute; border: 1px solid var(--ring-color, var(--line)); border-radius: 50%; width: var(--size); aspect-ratio: 1; opacity: .75; pointer-events: none; }
.field-nodes { position: relative; width: min(600px, 100%); display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; z-index: 2; }
.field-node { min-height: 72px; padding: 12px; text-align: left; display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; border-color: color-mix(in srgb, var(--field-color) 38%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--field-color) 10%, transparent), rgba(5,5,4,.7)); backdrop-filter: blur(14px); }
.field-number { width: 44px; height: 44px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; color: var(--field-color); }
.field-node strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.15rem; }
.field-node small { color: var(--ivory-soft); }
.carry-forward { margin: 22px 0; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.field-emblem { grid-template-rows: 1fr auto 1fr; gap: 12px; }
.field-emblem .field-number { align-self: end; }
.field-emblem small { align-self: start; color: currentColor; font-family: var(--serif); font-size: 1rem; }
.field-teaching blockquote,
.section-intro blockquote,
.start-here blockquote {
  margin: 20px 0 0;
  padding: 16px 0 16px 20px;
  border-left: 1px solid var(--gold);
  color: var(--gold-light);
  font-family: var(--serif);
  font-size: clamp(1.25rem, 4vw, 1.65rem);
  line-height: 1.45;
}

.start-here { padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.start-here h2 { margin: 0 0 8px; font-family: var(--serif); font-size: 1.65rem; font-weight: 400; }
.start-here > p:not(.eyebrow) { color: var(--ivory-soft); line-height: 1.65; }
.list { margin-top: 20px; border-top: 1px solid var(--line); }
.list-row { width: 100%; min-height: 82px; padding: 16px 10px; border: 0; border-bottom: 1px solid var(--line); background: transparent; display: grid; grid-template-columns: minmax(0,1fr) 24px; gap: 16px; align-items: center; text-align: left; }
.list-row.spectrum-row { border-left-width: 2px; }
.list-row.spectrum-row > b { color: var(--item-color); font-weight: 500; }
.list-row.spectrum-row > span > span { color: color-mix(in srgb, var(--item-color) 42%, var(--ivory-soft)); }
.list-row strong { display: block; font-family: var(--serif); font-size: 1.3rem; font-weight: 400; }
.list-row span { display: block; margin-top: 4px; color: var(--ivory-soft); line-height: 1.4; }
.prose { font-size: 1.03rem; line-height: 1.75; color: var(--ivory-soft); }
.prose h2 { margin: 2.2rem 0 .5rem; font-family: var(--serif); font-size: 1.8rem; font-weight: 400; color: var(--ivory); }
.prose strong { color: var(--gold-light); }
.prose ul { padding-left: 1.3rem; }
.prose ol { padding-left: 1.35rem; }
.prose li { margin: .75rem 0; padding-left: .35rem; }
.prose blockquote { margin: 1rem 0; color: var(--gold-light); font-family: var(--serif); font-size: 1.4rem; line-height: 1.55; }

.segmented {
  width: min(520px, 100%);
  min-height: 48px;
  margin: 0 0 28px;
  padding: 3px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(0, 0, 0, .34);
}
.segmented button,
.depth-selector button {
  min-height: 44px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ivory-soft);
  cursor: pointer;
}
.segmented button[aria-pressed="true"],
.depth-selector button[aria-pressed="true"] { color: #fff8df; background: rgba(216,180,90,.16); box-shadow: inset 0 0 0 1px rgba(247,223,155,.2); }
.practice-guidance { margin: 4px auto 18px; }
.practice-duration { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px auto 10px; }
.voice-invitation { display: block; margin: -12px auto 18px; }
.cross-focus-choice.selected,
.cross-focus-choice[aria-pressed="true"] { border-color: var(--gold-light); background: rgba(216,180,90,.13); }
.dial-help { width: min(520px, 100%); margin: 0 auto 18px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ivory-soft); }
.dial-help summary { min-height: 44px; display: flex; align-items: center; justify-content: center; color: var(--gold-light); cursor: pointer; }
.dial-help p { margin: 8px 0; line-height: 1.55; }
.kept-device-section { margin: 24px 0; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kept-device-section h2 { margin: 8px 0; font: 400 1.8rem/1.2 var(--serif); color: var(--gold-light); }
.reset-confirmation { display: grid; align-items: center; }
.reset-confirmation > section { width: min(620px, 100%); margin: 0 auto; }
.reset-list { margin: 22px 0; padding-left: 1.3rem; color: var(--ivory-soft); line-height: 1.65; }
.danger-button { border-color: rgba(222,125,112,.7); color: #ffe0da; }
.reset-error { padding: 14px; border-left: 2px solid #dc887a; color: #ffe0da; line-height: 1.55; }
.reclaim-confirmed-pull { margin: 28px 0; color: var(--gold-light); font: 400 clamp(1.8rem, 6vw, 2.8rem)/1.2 var(--serif); text-align: center; }
.adjacent-bridge { width: min(520px, 100%); margin: 18px auto 0; padding-top: 18px; border-top: 1px solid var(--line); text-align: center; }
.adjacent-bridge p { margin: 0 0 12px; color: var(--ivory-soft); }

.content-grid { margin: 26px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.content-card {
  position: relative;
  min-height: 188px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: linear-gradient(145deg, rgba(216,180,90,.08), rgba(7,7,5,.72) 55%);
  color: var(--ivory);
  display: grid;
  align-content: start;
  gap: 8px;
  text-align: left;
  cursor: pointer;
}
.content-card.spectrum-card {
  border-color: color-mix(in srgb, var(--item-color) 34%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--item-color) 13%, transparent), rgba(7,7,5,.76) 58%);
  box-shadow: inset 3px 0 color-mix(in srgb, var(--item-color) 62%, transparent);
}
.content-card.spectrum-card .eyebrow,
.content-card.spectrum-card .tag-line,
.content-card.spectrum-card b { color: color-mix(in srgb, var(--item-color) 82%, var(--gold-light)); }
.content-card.spectrum-card:hover {
  border-color: color-mix(in srgb, var(--item-color) 62%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--item-color) 19%, transparent), rgba(7,7,5,.74) 62%);
}
.content-card strong { font-family: var(--serif); font-size: 1.45rem; font-weight: 400; }
.content-card small { color: var(--ivory-soft); font-size: .92rem; line-height: 1.5; }
.content-card b { position: absolute; right: 18px; bottom: 16px; color: var(--gold-light); font-weight: 400; }
.content-card .tag-line { margin-top: 7px; color: var(--gold); font-size: .76rem; line-height: 1.45; }

.progressive-disclosure { width: min(520px, 100%); margin: 18px auto 36px; display: block; }

.library-tools { margin: 26px 0 12px; }
.search-field { display: grid; gap: 8px; color: var(--gold); }
.filter-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.filter-grid label { display: grid; gap: 7px; color: var(--ivory-soft); font-size: .78rem; }
.filter-grid select {
  width: 100%;
  min-height: 46px;
  padding: 0 32px 0 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #0a0a07;
  color: var(--ivory);
}
.result-count { color: var(--gold); font-size: .78rem; }
.foundation-list .list-row small { color: var(--gold); }

.depth-selector { width: 180px; margin: 4px 0 20px; padding: 3px; border: 1px solid var(--line); border-radius: 6px; display: grid; grid-template-columns: repeat(3, 1fr); }
.depth-content { min-height: 360px; }
.gentle-note { margin: 30px 0 4px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ivory-soft); font-size: .92rem; line-height: 1.6; }
.embodied-invitation { margin: 26px 0; padding: 22px; border-left: 1px solid var(--gold); background: linear-gradient(90deg, rgba(216,180,90,.09), transparent); }
.embodied-invitation h2 { margin: 0 0 8px; font-family: var(--serif); font-size: 1.65rem; font-weight: 400; }
.embodied-invitation p { margin: 0; color: var(--gold-light); font-size: 1.08rem; line-height: 1.6; }

.practice-engine-page { display: grid; align-content: start; gap: 22px; }
.practice-engine-page .section-intro { padding-top: 10vh; text-align: center; }
.practice-engine-page .lede { max-width: 36rem; margin-inline: auto; }
.pause-field { width: min(250px, 70vw); aspect-ratio: 1; margin: 0 auto; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(216,180,90,.14), transparent 67%); }
.pause-field span { width: 14px; aspect-ratio: 1; border-radius: 50%; background: var(--gold-light); box-shadow: 0 0 24px rgba(247,223,155,.8); }
.duration-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 40px; padding: 0 14px; }
.chip[aria-pressed="true"] { color: #fff8df; border-color: var(--gold-light); background: rgba(216,180,90,.14); }
.engine-completion { min-height: 72svh; display: grid; align-content: center; gap: 30px; }

.act-filters { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; }
.act-filters summary { color: var(--gold); cursor: pointer; }

.commitment-list { border-top: 1px solid var(--line); }
.commitment-row { min-height: 78px; padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; color: var(--ivory-soft); line-height: 1.5; }
.commitment-row input { width: 20px; height: 20px; accent-color: var(--gold); }
.commitment-row strong { display: block; margin-bottom: 3px; color: var(--gold); font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; }

.mission-form { display: grid; gap: 18px; }
.mission-form select {
  width: 100%;
  min-height: 52px;
  padding: 0 38px 0 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0a0a07;
  color: var(--ivory);
}
.continuity-links .orientation-invitation { margin-block: 0; }

.scale-rings { margin-top: 28px; display: grid; gap: 0; }
.scale-rings article { min-height: 130px; padding: 20px 0; border-top: 1px solid color-mix(in srgb, var(--gold) calc(55% - var(--scale-index) * 8%), transparent); display: grid; grid-template-columns: 48px 1fr; gap: 18px; align-items: start; }
.scale-rings article > span { width: 44px; aspect-ratio: 1; border: 1px solid var(--line-strong); border-radius: 50%; display: grid; place-items: center; color: var(--gold-light); }
.scale-rings h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.65rem; }
.scale-rings p { margin: 7px 0 0; color: var(--ivory-soft); line-height: 1.55; }

.act-stage { min-height: 500px; display: grid; align-content: center; gap: 28px; }
.act-path { height: 110px; position: relative; }
.act-path::before { content: ""; position: absolute; left: 5%; right: 5%; top: 52%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); transform: rotate(-5deg); }
.act-path::after { content: ""; position: absolute; right: 9%; top: 31%; width: 10px; height: 10px; border-radius: 50%; background: var(--gold-light); box-shadow: 0 0 20px var(--gold); }
.act-copy { text-align: center; }
.act-copy h2 { margin: 0; font-family: var(--serif); font-size: clamp(2.2rem,8vw,4rem); font-weight: 400; }
.act-copy p { max-width: 38rem; margin: 14px auto 0; color: var(--ivory-soft); font-size: 1.1rem; line-height: 1.6; }

.threshold-stage { min-height: 590px; display: grid; place-items: center; text-align: center; }
.threshold-frame { width: min(420px, 90vw); min-height: 470px; padding: 40px 26px; border: 1px solid var(--line-strong); border-radius: 46% 46% 8px 8px; background: radial-gradient(circle at 50% 76%, rgba(216,180,90,.14), transparent 45%); display: grid; align-content: center; gap: 20px; }
.threshold-frame h2 { margin: 0; font-family: var(--serif); font-size: clamp(2rem,7vw,3.2rem); font-weight: 400; }

.trace-list { margin-top: 24px; border-top: 1px solid var(--line); }
.trace-row { padding: 18px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 16px; }
.trace-row h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.25rem; }
.trace-row p { margin: 5px 0 0; color: var(--ivory-soft); }
.trace-row time { color: var(--gold); font-size: .76rem; }
.empty-state { padding: 44px 0; color: var(--ivory-soft); text-align: center; }

/* Settings and modal-like pages */
.settings-group { margin-top: 30px; border-top: 1px solid var(--line); }
.setting-row { min-height: 68px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 20px; align-items: center; border-bottom: 1px solid var(--line); }
.setting-row strong { display: block; font-weight: 500; }
.setting-row span { color: var(--ivory-soft); font-size: .85rem; }
.switch { position: relative; width: 52px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.switch::before { content: ""; position: absolute; inset: 7px 0; border: 1px solid var(--line-strong); border-radius: 999px; background: #0b0b08; }
.switch::after { content: ""; position: absolute; top: 11px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--ivory-soft); transition: transform 180ms ease, background 180ms ease; }
.switch[aria-checked="true"]::after { transform: translateX(22px); background: var(--gold-light); box-shadow: 0 0 12px var(--gold); }
.danger { color: #e6a792; border-color: rgba(230,167,146,.36); }
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.symbol-mark { width: min(290px, 66vw); margin: 12px auto 34px; filter: drop-shadow(0 0 18px rgba(216,180,90,.18)); }
.symbol-section { padding: 26px 0; border-top: 1px solid var(--line); }
.symbol-section h2 { margin: 0; font-family: var(--serif); font-size: 2rem; font-weight: 400; }
.symbol-section h3 { margin: 4px 0 14px; color: var(--gold); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; }
.symbol-section p { color: var(--ivory-soft); line-height: 1.7; }
.symbol-section.active { background: radial-gradient(circle at 50% 30%, rgba(216,180,90,.09), transparent 60%); }

.about-audio { margin: 22px 0 30px; }
.about-copy { white-space: pre-line; }

/* Golden Age route parity */
.library-mode-choices { margin: 26px 0 34px; border-top: 1px solid var(--line); }
.library-mode-choices .list-row[aria-pressed="true"] {
  border-left-color: var(--item-color);
  background: linear-gradient(90deg, color-mix(in srgb, var(--item-color) 20%, transparent), color-mix(in srgb, var(--item-color) 5%, transparent) 68%, transparent);
}
.path-steps { counter-reset: path-step; }
.path-steps .list-row { min-height: 104px; }
.entry-actions { align-items: stretch; }
.entry-actions .text-button { min-height: 48px; border-bottom: 1px solid var(--line); }

/* Comics */
.comics-library-page { max-width: 1120px; }
.comics-intro { display: flex; justify-content: space-between; align-items: end; gap: 28px; }
.comics-intro > div:first-child { min-width: 0; }
.comic-language-control { flex: none; display: grid; grid-template-columns: repeat(2, 48px); padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: rgba(0, 0, 0, .28); }
.comic-language-control button { min-height: 40px; border: 0; border-radius: 999px; background: transparent; color: var(--ivory-soft); font: inherit; font-size: .78rem; letter-spacing: .08em; cursor: pointer; }
.comic-language-control button[aria-pressed="true"] { background: var(--gold-light); color: #160f03; }
.comic-shelf { margin-top: 52px; padding-top: 28px; border-top: 1px solid var(--line); }
.comic-shelf > header { max-width: 700px; }
.comic-collection-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 24px; }
.comic-collection-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold-light); font-size: 1rem; text-underline-offset: .25em; }
.comic-shelf h2 { scroll-margin-top: 110px; }
.integrate-choice-group { min-width: 0; padding: 0; margin: 24px 0; border: 0; text-align: left; }
.integrate-choice-group legend { color: var(--ivory); font-size: 1.1rem; }
.integrate-summary { margin: 24px 0; text-align: left; border-top: 1px solid var(--line); padding-top: 16px; }
.integrate-summary p, .trace-row p { white-space: pre-line; }
.comic-shelf h2 { margin: 5px 0 8px; font-family: var(--serif); font-size: clamp(1.75rem, 4vw, 2.55rem); font-weight: 400; }
.comic-shelf > header > p:last-child { margin: 0; color: var(--ivory-soft); line-height: 1.6; }
.comic-issue-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 26px 22px; }
.comic-issue-card { min-width: 0; padding: 0; border: 0; background: transparent; color: var(--ivory); font: inherit; text-align: left; cursor: pointer; }
.comic-cover-wrap { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 2 / 3; overflow: hidden; background: #020201; box-shadow: 0 12px 34px rgba(0, 0, 0, .36); }
.comic-cover-wrap::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(247, 223, 155, .16); pointer-events: none; }
.comic-cover-wrap img { width: 100%; height: 100%; object-fit: contain; transition: transform 220ms ease, filter 220ms ease; }
.comic-issue-card:hover .comic-cover-wrap img { transform: scale(1.018); filter: brightness(1.05); }
.comic-cover-placeholder { width: 100%; height: 100%; padding: 22px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: radial-gradient(circle at 50% 30%, rgba(216, 180, 90, .14), transparent 42%), repeating-linear-gradient(118deg, rgba(247, 223, 155, .025) 0 1px, transparent 1px 7px), #080806; color: var(--ivory); text-align: center; }
.comic-cover-placeholder small { color: var(--gold); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; }
.comic-cover-placeholder strong { font-family: var(--serif); font-size: clamp(1.3rem, 5vw, 2rem); font-weight: 400; letter-spacing: .08em; }
.comic-cover-placeholder span { color: var(--ivory-soft); font-size: .72rem; line-height: 1.4; }
.comic-issue-card:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 5px; }
.comic-card-copy { display: block; padding: 13px 2px 0; }
.comic-card-copy small { display: block; color: var(--gold); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.comic-card-copy strong { display: block; margin-top: 5px; font-family: var(--serif); font-size: 1.16rem; font-weight: 400; line-height: 1.25; }
.comic-card-copy > span { display: block; margin-top: 7px; color: var(--ivory-soft); font-size: .74rem; line-height: 1.4; }
.comic-reader-page { width: min(100%, 1080px); margin: 0 auto; padding: 28px 24px var(--safe-bottom); }
.comic-reader-heading { display: flex; align-items: end; justify-content: space-between; gap: 22px; margin: 0 auto 18px; }
.comic-reader-heading .eyebrow { margin: 0 0 5px; }
.comic-reader-heading h1 { margin: 0; font-family: var(--serif); font-size: clamp(1.65rem, 4.4vw, 2.4rem); font-weight: 400; }
.comic-language-note { margin: 0 auto 18px; padding: 11px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--gold-light); font-size: .86rem; text-align: center; }
.comic-page-stage { width: min(100%, 860px); min-height: 240px; margin: 0 auto; display: block; outline: none; touch-action: pan-y pinch-zoom; scroll-margin-top: 18px; }
.comic-page-stage.is-enlarged { height: 75vh; height: 75svh; overflow: auto; touch-action: pan-x pan-y pinch-zoom; overscroll-behavior-x: contain; }
.comic-zoom-control { width: min(100%, 860px); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--ivory-soft); font-size: .85rem; }
.comic-zoom-control select { min-height: 44px; padding: 8px 12px; color: var(--ivory); background: var(--black, #0b0c09); border: 1px solid var(--gold-dim, #756335); border-radius: 4px; font: inherit; }
.comic-zoom-help { width: min(100%, 860px); margin: 8px auto 16px; color: var(--ivory-soft); font-size: .78rem; line-height: 1.5; }
.comic-page-stage:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 5px; }
/* Deliberate reader enlargement must outrank the shared responsive-image reset. */
.comic-page-stage .comic-page-image { display: block; width: calc(100% * var(--comic-zoom, 1)); max-width: none; height: auto; max-height: none; box-shadow: 0 18px 56px rgba(0, 0, 0, .5); -webkit-user-drag: none; user-select: none; }
.comic-page-placeholder { width: min(100%, 760px); min-height: min(72svh, 920px); aspect-ratio: 2 / 3; padding: clamp(28px, 8vw, 72px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; border: 1px solid rgba(247, 223, 155, .24); background: radial-gradient(circle at 50% 36%, rgba(216, 180, 90, .11), transparent 40%), repeating-linear-gradient(118deg, rgba(247, 223, 155, .022) 0 1px, transparent 1px 8px), #080806; box-shadow: 0 18px 56px rgba(0, 0, 0, .5); text-align: center; }
.comic-page-placeholder .eyebrow { margin: 0; }
.comic-page-placeholder strong { font-family: var(--serif); font-size: clamp(2rem, 8vw, 4.5rem); font-weight: 400; letter-spacing: .08em; overflow-wrap: anywhere; }
.comic-page-placeholder > span { color: var(--ivory-soft); }
.comic-reader-controls { width: min(100%, 680px); margin: 24px auto 0; display: grid; grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr); gap: 16px; align-items: center; }
.comic-reader-controls button { min-height: 48px; }
.comic-reader-controls output { min-width: 72px; color: var(--gold-light); font-variant-numeric: tabular-nums; text-align: center; }
.comic-reader-controls button:disabled { opacity: .32; cursor: default; }
.comic-reader-help { margin: 14px auto 0; color: var(--ivory-soft); font-size: .76rem; text-align: center; }
.comic-page-picker { width: min(100%, 280px); margin: 16px auto 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; color: var(--ivory-soft); font-size: .8rem; }
.comic-page-picker select { width: 100%; min-height: 44px; padding: 8px 34px 8px 12px; border: 1px solid var(--line); border-radius: 4px; background: #090906; color: var(--ivory); font: inherit; }
.comic-reading-tools { width: min(100%, 860px); margin: 0 auto 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.comic-reading-tools .comic-page-picker { margin: 0; width: min(100%, 280px); }
.comic-reading-tools a { min-height: 44px; display: inline-flex; align-items: center; font-size: 1rem; }
.comic-zoom-help, .comic-page-picker, .comic-zoom-control { font-size: 1rem; }
.comic-image-error { width: min(100%, 860px); margin: 16px auto; }
.comic-language-control button { min-height: 44px; }
.comic-transcript { width: min(100%, 760px); margin: 28px auto 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.comic-transcript summary { min-height: 50px; display: flex; align-items: center; color: var(--gold-light); cursor: pointer; line-height: 1.4; }
.comic-transcript-content { padding: 2px 0 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.comic-transcript-content h2 { margin: 0 0 8px; color: var(--gold); font-family: var(--serif); font-size: 1.05rem; font-weight: 400; }
.comic-transcript-content p { margin: 0; color: var(--ivory-soft); line-height: 1.65; white-space: pre-line; }

.nested-fields-page { max-width: 760px; }
.nested-spectrum { position: relative; width: min(100%, 620px); aspect-ratio: 1; margin: 24px auto 46px; display: grid; place-items: center; }
.nested-spectrum button { position: absolute; width: calc(98% - var(--nested-index) * 11%); aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--nested-color), transparent 38%); border-radius: 50%; background: transparent; color: var(--ivory); cursor: pointer; display: grid; align-content: start; justify-items: center; padding-top: calc(4% + var(--nested-index) * 1.25%); transition: border-color 180ms ease, box-shadow 180ms ease; }
.nested-spectrum button:hover, .nested-spectrum button:focus-visible { border-color: var(--nested-color); box-shadow: 0 0 26px color-mix(in srgb, var(--nested-color), transparent 72%); }
.nested-spectrum span { color: var(--nested-color); font-size: .72rem; letter-spacing: .12em; }
.nested-spectrum strong { font-family: var(--serif); font-weight: 400; }
.nested-spectrum small { max-width: 46%; margin-top: 2px; color: var(--ivory-soft); font-size: .65rem; text-align: center; }

.guided-experience-page { max-width: 680px; }
.guided-phase { min-height: clamp(340px, 54vh, 560px); display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.guided-phase h2 { margin: 0; color: var(--gold); font-family: var(--serif); font-size: clamp(1.45rem, 4vw, 2rem); font-weight: 400; }
.guided-phase .practice-title { max-width: 18ch; margin: 0; }
.guided-phase .lede { max-width: 44ch; }

/* Guided Sits */
.guided-sits-page { max-width: 680px; }
.guided-sit-catalog { margin-top: 28px; }
.guided-sit-row { grid-template-columns: 58px minmax(0, 1fr) 24px; }
.guided-sit-row-mark {
  width: 52px;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--guided-accent), transparent 48%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--guided-accent);
  font-family: var(--serif);
  font-size: 1.55rem;
  box-shadow: inset 0 0 20px color-mix(in srgb, var(--guided-accent), transparent 88%);
}
.guided-sit-setup { display: grid; align-content: start; gap: 26px; }
.guided-sit-setup .section-intro { margin: 0; }
.guided-sit-orientation {
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--ivory-soft);
  line-height: 1.65;
}
.guided-sit-orientation p { margin: 0; }
.guided-sit-orientation p + p { margin-top: 12px; color: var(--gold-light); }
.guided-sit-options { display: grid; gap: 10px; }
.guided-sit-options .eyebrow { margin: 0; }
.guided-sit-segments {
  padding: 3px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(0, 0, 0, .34);
}
.guided-sit-segments.guidance-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.guided-sit-segments.tone-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.guided-sit-segments button {
  min-width: 0;
  min-height: 48px;
  padding: 7px 6px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ivory-soft);
  cursor: pointer;
}
.guided-sit-segments button[aria-pressed="true"] {
  color: #140d00;
  background: var(--gold-light);
  box-shadow: 0 0 18px rgba(216, 180, 90, .22);
}
.guided-sit-option-detail { min-height: 2.8em; margin: 0; color: var(--gold); line-height: 1.45; }
.guided-sit-introduction-option {
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.guided-sit-introduction-option .guided-sit-segments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.guided-sit-intro-listen { width: fit-content; min-height: 44px; color: var(--gold-light); }
.guided-sit-transcript {
  width: 100%;
  color: var(--ivory-soft);
  line-height: 1.65;
}
.guided-sit-transcript summary { min-height: 44px; display: flex; align-items: center; color: var(--ivory); cursor: pointer; }
.guided-sit-transcript p { margin: 8px 0 0; }
.guided-sit-instrument {
  position: relative;
  width: min(236px, 68vw);
  aspect-ratio: 1;
  margin: 8px auto;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.guided-sit-instrument svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.guided-sit-glow { fill: rgba(0, 0, 0, .94); filter: drop-shadow(0 0 24px color-mix(in srgb, var(--guided-accent), transparent 72%)); }
.guided-sit-track { fill: none; stroke: color-mix(in srgb, var(--guided-accent), transparent 78%); stroke-width: .8; }
.guided-sit-progress { fill: none; stroke: var(--guided-accent); stroke-width: 1.4; stroke-linecap: round; transition: stroke-dashoffset 480ms linear; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--guided-accent), transparent 40%)); }
.guided-sit-inner-ring { fill: color-mix(in srgb, var(--guided-accent), transparent 91%); stroke: color-mix(in srgb, var(--guided-accent), transparent 58%); stroke-width: .9; transform-origin: 110px 110px; }
.guided-sit-mark { position: relative; z-index: 2; color: var(--ivory); font-family: var(--serif); font-size: 3.1rem; text-shadow: 0 0 20px color-mix(in srgb, var(--guided-accent), transparent 38%); }
.guided-sit-star { position: absolute; z-index: 3; top: 2.5%; left: 50%; width: 8px; aspect-ratio: 1; border-radius: 50%; background: var(--guided-accent); transform: translateX(-50%); box-shadow: 0 0 12px var(--guided-accent); }
.guided-sit-instrument.is-active .guided-sit-inner-ring { animation: guided-sit-breathe 4.8s ease-in-out infinite alternate; }
.guided-sit-instrument.is-active .guided-sit-star { animation: guided-sit-star 3.6s ease-in-out infinite; }
@keyframes guided-sit-breathe { from { transform: scale(.96); opacity: .72; } to { transform: scale(1.05); opacity: 1; } }
@keyframes guided-sit-star { 0%, 100% { opacity: .65; box-shadow: 0 0 8px var(--guided-accent); } 50% { opacity: 1; box-shadow: 0 0 18px var(--guided-accent); } }
.guided-sit-session {
  min-height: calc(100svh - 82px);
  padding-top: clamp(18px, 4vh, 42px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 3.5vh, 30px);
  text-align: center;
}
.guided-sit-session > .eyebrow { margin: 0; }
.guided-sit-cue { width: min(100%, 600px); display: grid; justify-items: center; gap: 12px; }
.guided-sit-cue h1 { max-width: 21ch; margin: 0; font-family: var(--serif); font-size: clamp(1.8rem, 5.8vw, 2.65rem); font-weight: 400; line-height: 1.16; }
.guided-sit-cue time { color: var(--gold-light); font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.guided-sit-controls { width: min(100%, 520px); }
.guided-sit-tone-toggle { min-height: 44px; margin-top: -8px; color: var(--gold); }
.guided-sit-session > .text-button:last-child { margin-top: auto; }
.guided-sit-introduction {
  min-height: calc(100svh - 82px);
  display: grid;
  align-content: center;
  justify-items: stretch;
  gap: 24px;
}
.guided-sit-introduction .section-intro { margin: 0 auto; text-align: center; }
.guided-sit-intro-status { margin: 0; color: var(--gold-light); text-align: center; }
.guided-sit-completion {
  min-height: calc(100svh - 82px);
  display: grid;
  align-content: center;
  justify-items: stretch;
  gap: 30px;
  text-align: center;
}
.guided-sit-completion .section-intro { margin: 0 auto; }

.toast { position: fixed; z-index: 50; left: 50%; top: calc(var(--safe-top) + 62px); transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 12px 18px; border: 1px solid var(--line-strong); border-radius: 6px; background: rgba(8,8,5,.96); color: var(--ivory); box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.noscript { padding: 60px 24px; max-width: 700px; margin: auto; }

@media (min-width: 840px) {
  .home-page { padding-top: 44px; }
  .door-stack { display: grid; grid-template-columns: 1.35fr 1fr; }
  .door.primary-door { grid-row: span 2; min-height: 260px; border-right: 1px solid var(--line); }
  .door:nth-child(4), .door:nth-child(5) { border-top: 1px solid var(--line); }
  .practice-stage { min-height: 650px; }
}

@media (max-width: 620px) {
  .page { padding-inline: 18px; }
  .comics-intro, .comic-reader-heading { align-items: start; flex-direction: column; }
  .comic-issue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .comic-reader-page { padding-inline: 14px; }
  .comic-reader-controls { grid-template-columns: minmax(92px, 1fr) auto minmax(92px, 1fr); gap: 8px; }
  .comic-reader-controls button { padding-inline: 10px; }
  .comic-page-placeholder { min-height: 60svh; }
  .comic-transcript-content { grid-template-columns: 1fr; gap: 20px; }
  .comic-reader-help { display: none; }
  .landing-inner { padding-inline: 18px; }
  .landing-title .tone-word { font-size: min(5rem, 26cqi); }
  .mark-stage { --mark-w: min(64vw, 280px); }
  .landing-copy strong { font-size: clamp(2rem, 10vw, 3rem); }
  .topbar { grid-template-columns: 44px minmax(0,1fr) auto; }
  .topbar-actions .labelled { width: 44px; overflow: hidden; padding: 0; }
  .two-fields, .tone-controls, .field-nodes, .content-grid, .filter-grid { grid-template-columns: 1fr; }
  .movement-field-grid { grid-template-columns: 1fr; }
  .movement-field-choice, .movement-field-choice:nth-child(7) { width: 100%; grid-column: auto; min-height: 94px; grid-template-columns: 54px minmax(0,1fr) 18px; }
  .movement-field-mark { width: 52px; }
  .capacity-choices, .cross-focus-grid { grid-template-columns: 1fr; }
  .choice-grid:not(.capacity-choices) { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .movement-session-page { padding-inline: 18px; }
  .practice-stage { min-height: 610px; }
  .door { grid-template-columns: 54px minmax(0,1fr) 20px; gap: 12px; }
  .door-mark { width: 52px; }
  .nested-map { min-height: auto; display: block; }
  .field-ring { display: none; }
  .field-nodes { width: 100%; }
  .button-row { flex-direction: column; }
  .button-row > * { flex: none; }
  .content-card { min-height: 158px; }
  .practice-engine-page .section-intro { padding-top: 4vh; }
  .orientation-invitation { grid-template-columns: 52px minmax(0, 1fr) 18px; gap: 12px; }
  .guided-sit-row { grid-template-columns: 54px minmax(0, 1fr) 18px; }
  .guided-sit-session { padding-inline: 18px; }
  .nested-spectrum { aspect-ratio: auto; display: flex; flex-direction: column; gap: 0; }
  .nested-spectrum button { position: static; width: 100%; aspect-ratio: auto; min-height: 88px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 14px 4px; align-content: center; }
  .nested-spectrum small { max-width: 90%; }
}

@media (max-width: 390px) {
  .comic-reader-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .comic-reader-controls output { grid-column: 1 / -1; grid-row: 1; }
  .comic-reader-controls button { grid-row: 2; }
}

@media (max-width: 360px) {
  .topbar { grid-template-columns: 44px minmax(0, 1fr); }
  .topbar-title { grid-column: 1 / -1; grid-row: 2; }
  .topbar-actions { grid-column: 2; grid-row: 1; justify-self: end; }
  .topbar-title span { display: none; }
  .topbar-title strong { font-size: 1.15rem; }
  .guided-sit-segments button { font-size: .78rem; }
  .guided-sit-instrument { width: min(192px, 62vw); }
}

@media (max-height: 760px) and (max-width: 620px) {
  .landing-inner { grid-template-rows: auto auto minmax(180px,1fr) auto auto; padding-top: calc(var(--safe-top) + 8px); padding-bottom: calc(var(--safe-bottom) + 8px); }
  .landing-title .tone-word { font-size: min(3.3rem, 26cqi); }
  .landing-title .sovereign-word { font-size: min(1.75rem, 12cqi); }
  .mark-stage { --mark-w: min(43vw, 205px); }
  .landing-copy p { font-size: .96rem; }
  .landing-copy strong { font-size: 1.9rem; }
  .symbol-link { margin-top: 5px; }
  .landing-actions { margin-top: 6px; }
}

@media (min-width: 621px) and (max-height: 820px) {
  .landing-inner {
    grid-template-rows: auto auto minmax(240px, 1fr) auto auto;
    padding-top: calc(var(--safe-top) + 10px);
    padding-bottom: calc(var(--safe-bottom) + 10px);
  }
  .landing-title .tone-word { font-size: min(4.75rem, 26cqi); }
  .landing-title .sovereign-word { font-size: min(2.5rem, 12cqi); }
  .mark-stage { --mark-w: min(34vh, 260px); margin-top: 2px; }
  .landing-copy p { font-size: 1rem; }
  .landing-copy strong { font-size: 2.45rem; }
  .symbol-link { margin-top: 5px; }
  .landing-actions { margin-top: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .ceremony *, .ceremony *::before, .ceremony *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
  .travelling-star, .ring-trace, .ring-leading-star-orbit, .blade-current, .sun-rays, .gold-wash, .tip-ray, .tip-spark { display: none !important; }
  .landing-title, .landing-copy, .landing-actions, .landing-tools, .sword-mark, .tip-star { opacity: 1 !important; transform: none !important; }
  .sword-construction-mark { display: none !important; }
}

.user-reduced-motion *,
.user-reduced-motion *::before,
.user-reduced-motion *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
.user-reduced-motion .travelling-star,
.user-reduced-motion .ring-trace,
.user-reduced-motion .ring-leading-star-orbit,
.user-reduced-motion .blade-current,
.user-reduced-motion .sun-rays,
.user-reduced-motion .gold-wash,
.user-reduced-motion .tip-ray,
.user-reduced-motion .tip-spark { display: none !important; }
.user-reduced-motion .landing-title,
.user-reduced-motion .landing-copy,
.user-reduced-motion .landing-actions,
.user-reduced-motion .landing-tools,
.user-reduced-motion .sword-mark,
.user-reduced-motion .tip-star { opacity: 1 !important; transform: none !important; }
.user-reduced-motion .sword-construction-mark { display: none !important; }
.user-reduced-motion .ceremony *,
.user-reduced-motion .ceremony *::before,
.user-reduced-motion .ceremony *::after { animation: none !important; transition: none !important; }
/* Optional offline packs remain plain controls, not a progress dashboard. */
.offline-pack { border-top: 1px solid var(--line, #55482d); padding-block: 24px; }
.offline-pack h2 { font-size: 1.3rem; }
.offline-pack button { min-height: 44px; }
.home-city-still { width: min(100%, 960px); margin: 0 auto 32px; }
.home-city-still img { display: block; width: 100%; height: auto; max-height: none; object-fit: contain; }
.practice-story { width: min(100%, 620px); min-width: 0; margin: 16px auto 24px; text-align: left; border-top: 1px solid var(--line); }
.practice-story summary { cursor: pointer; min-height: 44px; display: list-item; padding: 14px 0; font-size: 1rem; color: #d8be82; list-style-position: inside; }
.practice-story summary small { display: block; margin-top: 4px; color: var(--ivory-soft); font-size: .82rem; line-height: 1.4; }
.practice-story summary:focus-visible { outline: 2px solid #d8be82; outline-offset: 4px; }
.practice-story figure { width: 100%; margin: 0 auto; }
.practice-story img { display: block; width: 100%; height: auto; max-height: none; object-fit: contain; }
.practice-story figcaption { font-size: 1rem; line-height: 1.65; padding: 18px 0 4px; color: var(--ivory-soft); text-wrap: pretty; }
.practice-story figcaption strong { display: block; margin-bottom: 8px; font-family: var(--serif); font-size: 1.5rem; font-weight: 400; color: var(--ivory); line-height: 1.2; }
.story-introduction { margin: 6px 0 24px; color: var(--ivory-soft); line-height: 1.65; }
.notice-story-sequence { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; }
.notice-story-sequence li { padding: 0; }
.story-return-link, .story-practice-link { display: inline-flex; align-items: center; min-height: 44px; padding-block: 10px; color: var(--gold-light); text-underline-offset: .24em; font-size: .94rem; }
.story-return-link { margin-top: 22px; }
.story-practice-link { justify-self: center; }
.illustrated-capacity-page .capacity-stage { width: 100%; align-content: start; }
.illustrated-capacity-page .movement-heading { max-width: 44rem; }
.practice-scene-layout { display: grid; width: min(620px, 100%); align-items: start; gap: 24px; text-align: left; }
.practice-scene-layout .practice-story { margin: 0; }
.practice-work { width: 100%; min-width: 0; display: grid; gap: 22px; align-content: start; scroll-margin-top: 115px; }
.practice-work > .primary-button { justify-self: stretch; }
.practice-work .choice-grid { width: 100%; }
.practice-work .capacity-instrument { margin-bottom: 10px; }
.practice-work .discern-lenses { grid-template-columns: minmax(0, 1fr) minmax(1rem, 3rem) minmax(0, 1fr); row-gap: 18px; }
.practice-work .discern-lens { width: min(10rem, 100%); min-height: 10rem; aspect-ratio: auto; padding: .75rem; }
.practice-work .discern-lenses .discern-lens { opacity: 1; }
.practice-work .discern-lenses.step-0 .added,
.practice-work .discern-lenses.step-1 .direct,
.practice-work .discern-lenses.step-2 .discern-lens { border-color: color-mix(in srgb, var(--movement-color) 30%, transparent); background: none; box-shadow: none; }
.practice-work .discern-lens span { font-size: .84rem; max-width: 100%; overflow-wrap: anywhere; }
.practice-work .discern-lens small, .practice-work .discern-lenses > p small { font-size: .8rem; line-height: 1.4; }
.practice-work .discern-lenses > p { line-height: 1.45; text-align: center; }
.practice-work:focus-visible { outline: 2px solid var(--movement-color); outline-offset: 8px; }
.focused-stage > .choice-grid { width: 100%; min-width: 0; }
.movement-session-page .choice { overflow-wrap: anywhere; }
#notice-begin { scroll-margin-top: 115px; }
@media (min-width: 960px) {
  .practice-scene-layout.with-story { width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 64px); }
  .practice-scene-layout.with-story .practice-work { padding-top: 12px; }
  .illustrated-capacity-page .story-practice-link { display: none; }
}
@media (max-width: 430px) {
  .practice-work .capacity-choices { grid-template-columns: 1fr; }
}
.completion-story, .lived-offer { border-top: 1px solid #55482d; padding-block: 24px; margin-top: 28px; }
.completion-story { max-width: 42rem; margin-inline: auto; }
/* Narrative scenes use their full aspect ratio at every breakpoint. Their
   meaning must remain visible; compact thumbnails belong only on book shelves. */
.storage-warning { padding: 18px; margin: 12px auto; max-width: 52rem; border: 1px solid #c89757; background: #1c160e; color: #f5ebd7; line-height: 1.55; }
.backup-choice { display: flex; align-items: center; gap: 12px; padding-block: 12px; min-height: 44px; font-size: 1rem; }
.backup-choice input { width: 20px; height: 20px; flex-shrink: 0; }
.interactive-comic-entry{display:grid;grid-template-columns:minmax(160px,.62fr) minmax(0,1fr);gap:clamp(1.25rem,4vw,3rem);align-items:center;margin:2rem 0 4rem;border:1px solid var(--line);background:#0b0e0c;color:inherit;text-decoration:none;overflow:hidden}
.interactive-comic-art{height:260px;overflow:hidden}.interactive-comic-art img{width:100%;height:100%;object-fit:cover;filter:saturate(.68) brightness(.67)}
.interactive-comic-copy{display:grid;gap:.45rem;padding:1.5rem 1.5rem 1.5rem 0}.interactive-comic-copy small{color:var(--gold);letter-spacing:.12em;text-transform:uppercase}.interactive-comic-copy strong{font:800 clamp(2.8rem,7vw,5rem)/.85 "Arial Narrow",Impact,sans-serif;letter-spacing:-.05em}.interactive-comic-copy>span{color:var(--muted)}.interactive-comic-copy b{margin-top:.55rem;color:var(--gold)}
.interactive-comic-entry:hover{border-color:var(--gold)}
@media(max-width:620px){.interactive-comic-entry{grid-template-columns:1fr}.interactive-comic-art{height:220px}.interactive-comic-copy{padding:0 1.25rem 1.5rem}}