:root {
  color-scheme: dark;
  --background: #171614;
  --foreground: #e8e1d3;
  --border: #3a362f;
  --ring: #b99a61;
  --ink: #171614;
  --paper: #e8e1d3;
  --cream: #f1ece2;
  --gold: #b99a61;
  --blue: #121d2d;
  --terra: #a3503a;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: Arial, sans-serif;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

.landing,
.final,
.ritual-room {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.landing::before,
.ritual-room::before,
.final::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0.13;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--paper);
  text-align: center;
}

.landing-orbit {
  position: absolute;
  width: min(64vw, 680px);
  aspect-ratio: 1;
  border: 1px solid rgba(195, 167, 109, 0.16);
  border-radius: 50%;
  transform: rotate(25deg);
}

.landing-orbit::after {
  position: absolute;
  top: 11%;
  left: 8%;
  width: 9px;
  height: 9px;
  content: "";
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 22px var(--gold);
}

.landing-mark {
  position: absolute;
  top: 36px;
  left: 42px;
  color: #82745c;
  font: 11px monospace;
  letter-spacing: 0.15em;
}

.landing-header,
.ritual-header {
  position: absolute;
  top: 30px;
  left: 42px;
  right: 42px;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.ritual-header {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  padding: 30px 42px 0;
}

.header-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  min-width: 150px;
}

.wordmark {
  border: 0;
  background: none;
  color: inherit;
  padding: 0;
  font: 16px Georgia, serif;
  letter-spacing: 0;
}

.wordmark span,
.landing h1 span,
.final h1 em {
  color: var(--gold);
}

.countdown {
  display: flex;
  align-items: baseline;
  gap: 7px;
  color: var(--gold);
  font: 10px monospace;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.countdown span,
.countdown small {
  color: #817a6d;
  font-size: 8px;
}

.countdown strong {
  font-weight: 400;
  letter-spacing: 0.1em;
}

.module-menu {
  display: flex;
  justify-content: center;
  gap: 8px;
  max-width: 720px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.module-menu button {
  border: 0;
  background: transparent;
  color: inherit;
  opacity: 0.42;
  padding: 8px 7px;
  font: 9px monospace;
  letter-spacing: 0.06em;
}

.module-menu button.active,
.module-menu button:hover {
  color: var(--gold);
  opacity: 1;
}

.landing section {
  z-index: 1;
}

.eyebrow {
  margin: 0 0 25px;
  color: var(--gold);
  font: 10px monospace;
  letter-spacing: 0.2em;
}

.landing h1,
.final h1 {
  margin: 0 0 15px;
  font: 400 96px / 0.9 Georgia, serif;
  letter-spacing: 0;
}

.tagline {
  margin: 34px 0 15px;
  color: #b1a898;
  font: 400 32px / 1.15 Georgia, serif;
}

.landing-countdown {
  margin: 0 0 6px;
  color: #817a6d;
  font: 30px monospace;
  letter-spacing: 0.12em;
}

.landing-countdown strong {
  color: var(--gold);
  font-weight: 400;
}

.start-button,
.return-button {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  border: 0;
  background: var(--gold);
  color: var(--ink);
  padding: 16px 24px;
  font-size: 10px;
  letter-spacing: 0.16em;
}

footer,
.final-note {
  color: #777267;
  font: 11px monospace;
  letter-spacing: 0.08em;
}

.landing footer {
  position: absolute;
  bottom: 34px;
}

.annual-progress {
  position: absolute;
  z-index: 4;
  left: 42px;
  right: 42px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #716b61;
  font: 9px monospace;
  letter-spacing: 0.08em;
}

.annual-track {
  position: relative;
  flex: 1;
  height: 2px;
  background: rgba(185, 154, 97, 0.15);
}

.annual-track i {
  display: block;
  height: 100%;
  background: var(--gold);
  opacity: 0.8;
}

.ritual-room {
  color: var(--paper);
  transition: background 0.5s ease;
}

.ritual-room.sentence {
  background: #080b0d;
}

.ritual-room.sentence::after {
  position: absolute;
  inset: 14px 18px 86px;
  z-index: 0;
  content: "";
  border: 1px solid rgba(185, 154, 97, 0.52);
  outline: 1px solid rgba(185, 154, 97, 0.24);
  outline-offset: -9px;
  pointer-events: none;
}

.ritual-room.canvas {
  background: #d9d0c0;
  color: var(--ink);
}

.ritual-room.review {
  background: #b9b0a1;
  color: var(--ink);
}

.ritual-room.clock {
  background: var(--blue);
}

.ritual-room.pact {
  background: #241616;
}

.progress {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #817a6d;
  font: 10px monospace;
}

.progress span {
  color: var(--gold);
}

.progress i {
  width: 55px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}

.room-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 150px);
  overflow: hidden;
  padding: 20px 40px 100px;
}

.room-content.slide-next {
  animation: ritual-slide-next 0.55s cubic-bezier(0.22, 0.75, 0.25, 1) both;
}

.room-content.slide-back {
  animation: ritual-slide-back 0.55s cubic-bezier(0.22, 0.75, 0.25, 1) both;
}

@keyframes ritual-slide-next {
  from {
    opacity: 0;
    transform: translateX(9vw);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes ritual-slide-back {
  from {
    opacity: 0;
    transform: translateX(-9vw);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.room-title {
  position: relative;
  z-index: 1;
  margin-bottom: 28px;
  text-align: center;
}

.room-title .eyebrow span {
  margin-right: 10px;
  opacity: 0.55;
}

.room-title h2 {
  margin: 0;
  font: 400 64px / 0.95 Georgia, serif;
  letter-spacing: 0;
}

.room-copy {
  max-width: 280px;
  margin: 24px auto 0;
  font: 16px / 1.45 Georgia, serif;
  opacity: 0.62;
}

.sentence-panel,
.canvas-panel,
.review-panel,
.clock-panel,
.pact-panel {
  width: min(100%, 940px);
}

.ritual-room.sentence .room-content {
  align-items: flex-start;
  min-height: calc(100vh - 178px);
  padding: 28px 40px 118px;
}

.ritual-room.sentence .sentence-panel {
  width: min(100%, 1040px);
  margin: 0 auto;
}

.sentence-manuscript {
  width: min(100%, 980px);
  min-height: calc(100vh - 340px);
  margin: 0 auto;
  padding: 44px clamp(28px, 7vw, 112px) 38px;
  text-align: center;
}

.sentence-manuscript::before {
  display: block;
  margin-bottom: 28px;
  color: var(--gold);
  content: "CHAPTER 1 - 2026";
  font: 11px monospace;
  letter-spacing: 0.25em;
}

.sentence-line {
  max-width: 900px;
  margin: 54px auto 0;
  color: #d8d0c3;
  font: 400 60px / 1.3 Georgia, serif;
  letter-spacing: 0;
  text-align: center;
}

.word-chip {
  position: relative;
  border: 0;
  border-bottom: 1px solid rgba(185, 154, 97, 0.5);
  background: transparent;
  color: var(--gold);
  padding: 0 2px;
  font: inherit;
}

.word-chip span {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  width: 150px;
  color: #9f927e;
  font: 9px monospace;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 0.2s ease;
}

.word-chip:hover span,
.word-chip:focus span {
  opacity: 1;
}

.sentence-prompt {
  margin-top: 50px;
  color: #9c8d75;
  font: 10px monospace;
  letter-spacing: 0.12em;
}

.sentence-input {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 340px;
  margin: 15px auto 0;
  border-bottom: 1px solid rgba(185, 154, 97, 0.44);
}

.sentence-input input {
  flex: 1;
  border: 0;
  background: none;
  color: var(--gold);
  outline: 0;
  padding: 10px 0;
  font: 18px Georgia, serif;
  text-align: center;
}

.sentence-input span {
  color: var(--gold);
  font: 9px monospace;
  letter-spacing: 0.1em;
}

.reference-room-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  color: var(--gold);
  font: 10px monospace;
  letter-spacing: 0.2em;
}

.canvas-panel {
  width: min(100%, 940px);
}

.canvas-head {
  color: #8e6553;
}

.canvas-actions {
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(156, 136, 115, 0.4);
  background: rgba(233, 227, 215, 0.8);
  color: #756a5b;
  padding: 6px 10px;
  font: 9px monospace;
}

.canvas-actions button {
  border: 0;
  background: none;
  color: inherit;
  padding: 0;
  font: inherit;
}

.canvas-frame {
  position: relative;
  width: min(100%, 700px);
  height: 490px;
  margin: 10px auto 0;
  border: 14px solid #b5a68e;
  outline: 2px solid #8f806b;
  background: #fbfaf5;
  padding: 42px;
  box-shadow: inset 0 0 35px rgba(85, 72, 53, 0.34), 0 10px 25px rgba(92, 81, 64, 0.27);
}

.canvas-frame .pixel-grid {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  width: 220px;
  transform: translate(-50%, -50%);
}

.pixel-grid button {
  aspect-ratio: 1;
  border: 0;
  background: transparent;
}

.canvas-frame .pixel-grid button.marked {
  background: var(--mark, var(--terra));
  box-shadow: inset 0 0 0 3px #fbfaf5;
}

.canvas-coordinates {
  position: absolute;
  left: 18px;
  top: 16px;
  color: #a69a88;
  font: 9px monospace;
}

.canvas-instruction {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -38px;
  color: #8e6553;
  font: 10px monospace;
  letter-spacing: 0.14em;
  text-align: center;
}

.canvas-instruction span {
  display: block;
  margin-top: 7px;
  color: #9c9182;
  font-size: 9px;
  letter-spacing: 0.04em;
}

.canvas-palette {
  display: grid;
  grid-template-columns: repeat(10, 24px);
  justify-content: center;
  gap: 8px;
  margin: 60px auto 0;
}

.canvas-palette button {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(74, 66, 52, 0.22);
  background: var(--swatch);
}

.canvas-palette button.active {
  outline: 2px solid var(--terra);
  outline-offset: 2px;
}

.canvas-stats {
  display: flex;
  justify-content: space-between;
  max-width: 940px;
  margin: 22px auto 0;
  color: #897d6c;
  font: 10px monospace;
  letter-spacing: 0.12em;
}

.review-card {
  max-width: 470px;
  margin: 48px auto 0;
  border: 1px solid #514a3f;
  background: var(--cream);
  color: #302b25;
  padding: 25px 28px;
  box-shadow: 12px 12px 0 rgba(130, 121, 108, 0.33);
}

.card-kicker,
.contract-head,
.contract-foot {
  display: flex;
  justify-content: space-between;
  color: #776d60;
  font: 10px monospace;
  letter-spacing: 0.13em;
}

.review-card h3 {
  margin: 48px 0 8px;
  font: 400 42px Georgia, serif;
  letter-spacing: 0;
}

.card-question {
  color: #6a6258;
  font: 14px Georgia, serif;
}

.stars {
  display: flex;
  gap: 10px;
  margin: 30px 0;
  border-bottom: 1px solid #b3a89b;
  padding-bottom: 24px;
}

.stars button {
  border: 0;
  background: none;
  color: #b9afa3;
  padding: 0;
  font-size: 28px;
}

.stars button.active {
  color: #a07044;
}

.review-card input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #9e9589;
  background: none;
  color: #302b25;
  outline: 0;
  padding: 12px 0;
  font: 14px Georgia, serif;
}

.card-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 42px;
  color: #8b8174;
  font: 9px monospace;
}

.clock-panel,
.pact-panel {
  text-align: center;
}

.clock-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 260px;
  aspect-ratio: 1;
  margin: 38px auto 30px;
}

.orbit {
  position: absolute;
  border: 1px solid rgba(145, 160, 179, 0.2);
  border-radius: 50%;
  transform: rotate(-30deg);
}

.orbit-one {
  inset: 10px;
}

.orbit-two {
  inset: 35px -10px;
  transform: rotate(58deg);
}

.globe {
  position: relative;
  display: grid;
  place-content: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #1e3348;
  box-shadow: inset -18px -10px 30px #07111c, 0 0 50px rgba(104, 137, 167, 0.2);
}

.globe::before {
  position: absolute;
  inset: 15px;
  content: "";
  border: 1px solid rgba(144, 168, 186, 0.2);
  border-radius: 50%;
  transform: skewY(-20deg);
}

.globe span {
  z-index: 1;
  color: #b5c4c7;
  font: 32px Georgia, serif;
}

.globe small {
  z-index: 1;
  color: #8294a0;
  font: 8px monospace;
  letter-spacing: 0.15em;
}

.hold-button {
  width: 190px;
  aspect-ratio: 1;
  border: 1px solid rgba(167, 186, 192, 0.27);
  border-radius: 50%;
  background: #1e3041;
  color: #c8d0ce;
  font: 11px monospace;
  letter-spacing: 0.12em;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.hold-button span {
  display: block;
  margin-top: 10px;
  font: 11px Georgia, serif;
  letter-spacing: 0;
  opacity: 0.45;
}

.hold-button.holding {
  background: #a5b2ad;
  color: #172535;
  transform: scale(1.04);
}

.contract {
  position: relative;
  max-width: 430px;
  min-height: 400px;
  margin: 45px auto 0;
  background: #ded1b6;
  color: #33251f;
  padding: 26px;
  text-align: left;
  box-shadow: 8px 10px 0 rgba(14, 8, 8, 0.27);
}

.contract-head,
.contract-foot {
  color: #765948;
}

.contract p {
  margin: 64px 0 34px;
  font: 25px / 1.3 Georgia, serif;
  text-align: center;
}

.signature {
  display: flex;
  gap: 10px;
  border-bottom: 1px solid #8c7966;
  color: #947457;
  padding: 15px 3px;
}

.signature span:last-child {
  color: #60483c;
  font: italic 22px Georgia, serif;
}

.wax-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 27px 0;
}

.wax-wrap small {
  color: #765948;
  font: 9px monospace;
}

.wax {
  width: 62px;
  height: 62px;
  border: 0;
  border-radius: 50%;
  background: #873630;
  color: #c98573;
  box-shadow: inset 5px 5px 8px rgba(178, 90, 74, 0.33), 3px 4px 5px rgba(73, 49, 41, 0.33);
}

.wax.sealed {
  background: #a64b40;
  color: #efd4a9;
}

.room-nav {
  position: absolute;
  z-index: 3;
  right: 42px;
  bottom: 34px;
  left: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-arrow {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  background: none;
  color: inherit;
  opacity: 0.65;
  font: 10px monospace;
  letter-spacing: 0.12em;
}

.nav-arrow.next {
  color: var(--gold);
  opacity: 1;
}

.nav-arrow:disabled {
  opacity: 0.22;
}

.validation-area {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
}

.give-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 210px;
  min-height: 48px;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold);
  padding: 12px 15px;
  font: 600 11px monospace;
  letter-spacing: 0.14em;
  box-shadow: 0 0 0 1px rgba(185, 154, 97, 0.25);
}

.give-button:hover,
.give-button.given {
  background: var(--gold);
  color: var(--ink);
}

.give-button:disabled {
  opacity: 0.32;
}

.final {
  display: grid;
  place-content: center;
  background: #171614;
  color: var(--paper);
  text-align: center;
}

.final-ornament {
  margin-bottom: 28px;
  color: var(--gold);
  font-size: 27px;
}

.final h1 {
  font-size: 104px;
}

.final h1 em {
  font-style: italic;
}

.final-copy {
  margin: 34px 0;
  color: #a39b8d;
  font: 16px / 1.5 Georgia, serif;
}

.summary {
  width: min(90vw, 400px);
  margin: auto;
  border-top: 1px solid rgba(185, 154, 97, 0.25);
}

.summary div {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(185, 154, 97, 0.15);
  padding: 12px 0;
  text-align: left;
}

.summary span {
  width: 80px;
  color: #948872;
  font: 10px monospace;
}

.summary strong {
  flex: 1;
  font: 15px Georgia, serif;
}

.summary i {
  color: var(--gold);
  font: 9px monospace;
  font-style: normal;
}

.return-button {
  justify-self: center;
  margin-top: 34px;
}

.final-note {
  margin-top: 26px;
}

@media (max-width: 860px) {
  .landing-header,
  .ritual-header {
    left: 24px;
    right: 24px;
    flex-wrap: wrap;
    gap: 12px;
  }

  .ritual-header {
    padding: 24px 24px 0;
  }

  .module-menu {
    order: 3;
    justify-content: flex-start;
    width: 100%;
    gap: 2px;
  }

  .module-menu button {
    padding: 6px 4px;
    font-size: 8px;
  }

  .progress {
    order: 4;
    width: 100%;
  }

  .landing h1,
  .final h1 {
    font-size: 64px;
  }

  .tagline {
    font-size: 26px;
  }

  .room-title h2 {
    font-size: 44px;
  }

  .room-content {
    min-height: calc(100vh - 120px);
    padding: 20px 22px 104px;
  }

  .sentence-line {
    margin-top: 38px;
    font-size: 34px;
  }

  .sentence-manuscript {
    min-height: calc(100vh - 300px);
    padding: 28px 18px;
  }

  .canvas-actions {
    position: static;
    margin-top: 12px;
    flex-wrap: wrap;
  }

  .reference-room-head {
    flex-direction: column;
  }

  .canvas-frame {
    height: 380px;
    border-width: 10px;
  }

  .canvas-frame .pixel-grid {
    width: 190px;
  }

  .canvas-palette {
    grid-template-columns: repeat(5, 24px);
  }

  .room-nav {
    right: 20px;
    bottom: 24px;
    left: 20px;
  }

  .give-button {
    min-width: 190px;
  }

  .annual-progress {
    left: 20px;
    right: 20px;
    bottom: 12px;
  }
}

@media (max-width: 520px) {
  .landing h1,
  .final h1 {
    font-size: 50px;
  }

  .landing-mark {
    left: 20px;
    top: 24px;
  }

  .countdown {
    margin-left: auto;
    font-size: 9px;
  }

  .sentence-line {
    font-size: 30px;
  }

  .review-card {
    padding: 20px;
  }

  .review-card h3 {
    margin-top: 40px;
    font-size: 36px;
  }

  .contract {
    min-height: 360px;
  }
}

/* V013: usable TheSentence and TheCanvas rooms inside the V012 global flow. */
.sentence-real,
.canvas-real-panel {
  width: min(100%, 1180px);
}

.ritual-room.sentence .room-content {
  align-items: center;
  min-height: calc(100vh - 156px);
  overflow-y: auto;
  padding: 22px 40px 118px;
}

.sentence-real-grid {
  display: grid;
  grid-template-columns: minmax(190px, 0.72fr) minmax(360px, 1.35fr) minmax(260px, 0.82fr);
  align-items: center;
  gap: 42px;
  width: 100%;
}

.sentence-context {
  color: rgba(232, 220, 200, 0.72);
}

.sentence-context .eyebrow {
  margin-bottom: 18px;
}

.sentence-context h2,
.canvas-work-head h2 {
  margin: 0;
  color: #f0e5cc;
  font: 400 48px / 0.95 Georgia, serif;
}

.sentence-question {
  margin: 22px 0 14px;
  color: #f0e5cc;
  font: italic 29px / 1.1 Georgia, serif;
}

.sentence-context p:not(.eyebrow):not(.sentence-question),
.canvas-work-head p {
  margin: 0;
  font: 15px / 1.48 Georgia, serif;
}

.chapter-pill {
  display: inline-flex;
  margin-top: 20px;
  border: 1px solid rgba(185, 154, 97, 0.24);
  color: rgba(185, 154, 97, 0.9);
  padding: 8px 10px;
  font: 10px monospace;
  letter-spacing: 0.08em;
}

.sentence-official-sheet {
  position: relative;
  min-height: 430px;
  border: 1px solid rgba(185, 154, 97, 0.48);
  background:
    linear-gradient(180deg, rgba(255, 246, 226, 0.03), rgba(255, 246, 226, 0)),
    rgba(7, 8, 8, 0.54);
  padding: 56px 34px 38px;
  text-align: center;
  box-shadow:
    inset 0 0 0 1px rgba(185, 154, 97, 0.14),
    0 24px 68px rgba(0, 0, 0, 0.32);
}

.sentence-official-sheet::before,
.sentence-official-sheet::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.sentence-official-sheet::before {
  inset: 12px;
  border: 1px solid rgba(185, 154, 97, 0.2);
}

.sentence-official-sheet::after {
  left: 50%;
  bottom: 58px;
  width: 118px;
  height: 1px;
  background: rgba(185, 154, 97, 0.42);
  transform: translateX(-50%);
}

.sentence-sheet-kicker,
.pool-head,
.card-label {
  color: rgba(185, 154, 97, 0.86);
  font: 10px monospace;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.official-line {
  position: relative;
  z-index: 1;
  max-width: 660px;
  margin: 82px auto 0;
  color: #f0e5cc;
  font: 400 64px / 1.22 Georgia, serif;
  letter-spacing: 0;
}

.official-word {
  position: relative;
  border: 0;
  border-bottom: 1px solid rgba(185, 154, 97, 0.44);
  background: none;
  color: inherit;
  padding: 0 2px;
  font: inherit;
}

.official-word.origin {
  color: #f6ecd4;
}

.official-word span {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  width: 150px;
  color: rgba(232, 220, 200, 0.58);
  font: 9px monospace;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 0.2s ease;
}

.official-word:hover span,
.official-word:focus span {
  opacity: 1;
}

.sentence-pending-wrap {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}

.proposal-star {
  display: inline-block;
  margin: 0 0.16em;
  color: var(--gold);
  font-size: 0.7em;
  transform: translateY(-0.08em);
}

.sentence-pending-wrap input {
  width: calc(var(--word-ch, 4) * 1ch);
  min-width: 4ch;
  max-width: 13ch;
  border: 0;
  border-bottom: 1px solid rgba(185, 154, 97, 0.48);
  background: transparent;
  color: var(--gold);
  outline: 0;
  padding: 0 0.03em;
  font: inherit;
  text-align: left;
}

.sentence-pending-wrap input::placeholder {
  color: rgba(185, 154, 97, 0.42);
}

.sentence-pending-wrap .entry-caret {
  display: inline-block;
  width: 2px;
  height: 0.7em;
  margin-left: 0.04em;
  background: var(--gold);
  transform: translateY(0.08em);
  animation: caretBlinkV013 780ms step-end infinite;
}

.sentence-pending-wrap.has-word .entry-caret,
.sentence-pending-wrap:focus-within .entry-caret {
  display: none;
}

@keyframes caretBlinkV013 {
  0%,
  46% {
    opacity: 1;
  }

  47%,
  100% {
    opacity: 0;
  }
}

.sentence-status {
  max-width: 430px;
  margin: 38px auto 0;
  color: rgba(218, 205, 178, 0.72);
  font: italic 16px / 1.38 Georgia, serif;
}

.sentence-action-card {
  border: 1px solid rgba(185, 154, 97, 0.24);
  background: rgba(10, 10, 9, 0.68);
  padding: 24px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
}

.voice-purpose {
  margin: 0 0 18px;
  color: #f0e5cc;
  font: italic 24px / 1.15 Georgia, serif;
  text-align: center;
}

.sentence-side-label {
  display: block;
  margin-bottom: 8px;
  color: rgba(232, 220, 200, 0.56);
  font: 10px monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.input-row-real {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.input-row-real input {
  min-width: 0;
  border: 1px solid rgba(185, 154, 97, 0.28);
  background: rgba(246, 236, 212, 0.06);
  color: #f0e5cc;
  outline: 0;
  padding: 12px 13px;
  font: 16px Georgia, serif;
}

.sentence-submit-real {
  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--ink);
  padding: 0 14px;
  font: 700 10px monospace;
  letter-spacing: 0.08em;
}

.sentence-submit-real:disabled {
  border-color: rgba(185, 154, 97, 0.18);
  background: rgba(185, 154, 97, 0.08);
  color: rgba(232, 220, 200, 0.34);
}

.sentence-pool {
  display: grid;
  gap: 8px;
  margin-top: 22px;
}

.pool-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.pool-head b {
  color: rgba(232, 220, 200, 0.52);
  font-weight: 400;
}

.pool-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  border-top: 1px solid rgba(185, 154, 97, 0.12);
  padding-top: 9px;
}

.pool-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #f0e5cc;
  font: 17px Georgia, serif;
}

.pool-row span,
.pool-row em {
  color: rgba(232, 220, 200, 0.5);
  font: 9px monospace;
  font-style: normal;
  letter-spacing: 0.05em;
  text-align: right;
  text-transform: uppercase;
}

.pool-row em {
  grid-column: 1 / -1;
  text-align: left;
}

.pool-row.is-yours strong,
.pool-row.is-yours span {
  color: var(--gold);
}

.ritual-room.canvas .room-content {
  align-items: center;
  min-height: calc(100vh - 156px);
  overflow-y: auto;
  padding: 18px 40px 116px;
}

.canvas-real-layout {
  display: grid;
  grid-template-columns: minmax(520px, 720px) minmax(300px, 380px);
  align-items: center;
  justify-content: center;
  gap: 44px;
  width: 100%;
}

.canvas-stage-real {
  display: grid;
  justify-items: center;
  width: 100%;
}

.canvas-work-head {
  max-width: 500px;
  margin: 0 auto 16px;
  text-align: center;
}

.canvas-work-head h2 {
  color: #211d17;
}

.canvas-work-head .eyebrow {
  margin-bottom: 12px;
  color: #8e6553;
}

.canvas-work-head p {
  color: rgba(33, 29, 23, 0.62);
}

.canvas-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 14px;
  color: #756a5b;
  font: 9px monospace;
  letter-spacing: 0.08em;
  flex-wrap: wrap;
}

.canvas-toolbar button,
.hand-actions button {
  border: 1px solid rgba(74, 66, 52, 0.18);
  background: rgba(253, 251, 246, 0.58);
  color: inherit;
  min-height: 30px;
  padding: 0 10px;
  font: inherit;
}

.canvas-toolbar button.active,
.canvas-toolbar button:hover,
.hand-actions button:hover {
  border-color: #a3503a;
  color: #a3503a;
}

.segmented-control {
  display: flex;
  border: 1px solid rgba(74, 66, 52, 0.18);
  background: rgba(253, 251, 246, 0.48);
}

.segmented-control button {
  border: 0;
  border-right: 1px solid rgba(74, 66, 52, 0.12);
  background: transparent;
}

.segmented-control button:last-child {
  border-right: 0;
}

.canvas-art-mount {
  position: relative;
  width: min(590px, 100%);
  aspect-ratio: 558 / 671;
  background: linear-gradient(180deg, #f6efdd, #efe6d0);
  border: 1px solid #b8a87f;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.64),
    0 32px 64px -28px rgba(60, 44, 24, 0.46),
    0 8px 18px -10px rgba(60, 44, 24, 0.3);
}

.canvas-art-mount::after {
  position: absolute;
  inset: 26px;
  z-index: 4;
  content: "";
  border: 1px solid rgba(120, 100, 66, 0.16);
  pointer-events: none;
}

.canvas-art-frame {
  position: absolute;
  left: 14.5%;
  right: 9.1%;
  top: 12.7%;
  bottom: 7.2%;
  z-index: 1;
  overflow: hidden;
  border: 1px solid rgba(74, 66, 52, 0.35);
  background: #fdfbf6;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.52);
}

.ritual-canvas-board {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  image-rendering: pixelated;
  touch-action: none;
}

.museum-frame-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.canvas-cartel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 14px;
  width: min(590px, 100%);
  margin-top: 15px;
  border-top: 1px solid rgba(74, 66, 52, 0.18);
  color: rgba(33, 29, 23, 0.58);
  padding-top: 10px;
  font: 10px monospace;
  letter-spacing: 0.1em;
}

.canvas-hand-card {
  border: 1px solid rgba(214, 202, 175, 0.82);
  background: rgba(253, 251, 246, 0.86);
  color: #211d17;
  padding: 23px;
  box-shadow:
    0 16px 36px rgba(70, 50, 25, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.hand-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.hand-head p {
  margin: 7px 0 0;
  color: rgba(33, 29, 23, 0.58);
  font: italic 15px / 1.28 Georgia, serif;
}

.hand-head b {
  border-radius: 999px;
  background: rgba(163, 80, 58, 0.08);
  color: #a3503a;
  flex: 0 0 auto;
  padding: 5px 10px;
  font: 800 10px monospace;
}

.hand-slots {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.hand-slot,
.canvas-hand-card .canvas-palette button {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid rgba(74, 66, 52, 0.14);
  background: var(--slot-color, rgba(253, 251, 246, 0.48));
  padding: 0;
}

.hand-slot {
  display: grid;
  place-items: center;
  color: rgba(33, 29, 23, 0.48);
  font: 9px monospace;
}

.hand-slot.filled {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0)),
    var(--slot-color);
  color: #fff8ec;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.34);
}

.hand-slot.empty {
  background: rgba(253, 251, 246, 0.44);
}

.canvas-hand-card .canvas-palette {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px dashed rgba(74, 66, 52, 0.18);
}

.canvas-hand-card .canvas-palette button {
  background: var(--swatch);
}

.canvas-hand-card .canvas-palette button.active {
  outline: 2px solid #a3503a;
  outline-offset: 2px;
}

.hand-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

.hand-actions button:disabled {
  opacity: 0.42;
}

.choose-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  min-height: 50px;
  margin-top: 14px;
  border: 0;
  background: #a3503a;
  color: #fff8ec;
  padding: 0 17px;
  font: 800 13px Arial, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 12px 24px rgba(168, 89, 58, 0.15);
}

.choose-btn b {
  border-radius: 999px;
  background: rgba(255, 248, 236, 0.18);
  padding: 4px 8px;
  font-size: 10px;
  line-height: 1;
}

.choose-btn:disabled {
  cursor: default;
  opacity: 0.56;
}

.hand-privacy {
  margin: 11px 0 0;
  color: rgba(33, 29, 23, 0.5);
  font: italic 13px / 1.28 Georgia, serif;
  text-align: center;
}

@media (max-width: 980px) {
  .ritual-room.sentence .room-content,
  .ritual-room.canvas .room-content {
    align-items: flex-start;
    padding: 28px 24px 120px;
  }

  .sentence-real-grid,
  .canvas-real-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .sentence-context,
  .sentence-action-card,
  .canvas-hand-card {
    width: min(620px, 100%);
    justify-self: center;
  }

  .sentence-context {
    text-align: center;
  }

  .sentence-context h2,
  .canvas-work-head h2 {
    font-size: 42px;
  }

  .official-line {
    margin-top: 58px;
    font-size: 48px;
  }

  .sentence-official-sheet {
    width: min(760px, 100%);
    min-height: 350px;
  }

  .canvas-art-mount,
  .canvas-cartel {
    width: min(520px, 100%);
  }
}

@media (max-width: 560px) {
  .ritual-room.sentence .room-content,
  .ritual-room.canvas .room-content {
    padding-right: 15px;
    padding-left: 15px;
  }

  .sentence-context h2,
  .canvas-work-head h2 {
    font-size: 36px;
  }

  .sentence-question {
    font-size: 24px;
  }

  .sentence-official-sheet {
    min-height: 310px;
    padding: 42px 18px 30px;
  }

  .official-line {
    margin-top: 42px;
    font-size: 36px;
  }

  .sentence-pending-wrap input {
    max-width: 9ch;
  }

  .input-row-real {
    grid-template-columns: 1fr;
  }

  .sentence-submit-real {
    min-height: 42px;
  }

  .canvas-toolbar {
    gap: 6px;
  }

  .canvas-toolbar button {
    min-height: 28px;
    padding: 0 8px;
  }

  .canvas-cartel {
    grid-template-columns: 1fr;
    gap: 6px;
    text-align: center;
  }

  .canvas-hand-card {
    padding: 18px;
  }

  .hand-head {
    flex-direction: column;
  }
}

/* V013 annotation pass: TheSentence becomes title + sentence + original voice CTA. */
.ritual-room.sentence {
  --cr: #f6ecd4;
  --cr2: rgba(232, 220, 200, 0.76);
  --gold2: #d4b878;
  --goldb: rgba(184, 154, 78, 0.24);
}

.ritual-room.sentence .room-content {
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
  padding: 72px 40px 126px;
}

.sentence-focus {
  position: relative;
  display: grid;
  grid-template-rows: 86px minmax(260px, 1fr) 116px;
  align-items: center;
  justify-items: center;
  width: min(100%, 1120px);
  min-height: calc(100vh - 280px);
  margin: 0 auto;
}

.sentence-title-only {
  align-self: start;
  width: 100%;
  text-align: center;
}

.sentence-title-only h2 {
  margin: 0;
  color: #f6ecd4;
  font: 400 66px / 0.95 Georgia, serif;
  letter-spacing: 0;
  text-shadow: 0 0 30px rgba(185, 154, 97, 0.18);
}

.sentence-official-sheet {
  width: 100%;
  min-height: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.sentence-official-sheet::before,
.sentence-official-sheet::after {
  display: none;
}

.sentence-phrase-wrap {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 260px;
}

.official-line {
  max-width: min(1120px, 92vw);
  max-height: 52vh;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0 auto;
  color: #f6ecd4;
  font: 400 clamp(54px, 7.2vw, 104px) / 1.12 Georgia, serif;
  letter-spacing: 0;
  text-align: center;
  scrollbar-color: rgba(184, 154, 78, 0.36) transparent;
  scrollbar-width: thin;
}

.official-word {
  position: relative;
  border: 0;
  background: none;
  color: inherit;
  margin: 0 0.035em;
  padding: 0;
  font: inherit;
  text-shadow: 0 16px 40px rgba(0, 0, 0, 0.36);
}

.official-word.origin {
  color: #fff4d5;
}

.official-word span {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  width: 150px;
  color: rgba(232, 220, 200, 0.58);
  font: 9px monospace;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 0.2s ease;
}

.official-word:hover span,
.official-word:focus span {
  opacity: 1;
}

.sentence-pending-wrap {
  display: inline-flex;
  align-items: baseline;
  color: var(--gold2);
  white-space: nowrap;
}

.sentence-pending-wrap .proposal-star {
  display: inline-block;
  margin: 0 0.14em;
  color: var(--gold2);
  font-size: 0.7em;
  transform: translateY(-0.08em);
}

.sentence-pending-wrap .word-preview {
  color: var(--gold2);
  border-bottom: 1px solid rgba(212, 184, 120, 0.54);
}

.sentence-pending-wrap.committed .word-preview {
  color: #fff2bd;
}

.sentence-pending-wrap .word-final-period {
  color: rgba(246, 236, 212, 0.92);
}

.sentence-bottom-input {
  align-self: end;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 40px;
  border: 0;
  background: transparent;
}

.sentence-bottom-input .voice-purpose {
  margin: 0 0 12px;
  color: rgba(232, 220, 200, 0.86);
  font: italic 23px / 1.12 Georgia, serif;
  text-align: center;
}

.sentence-bottom-input .voice-purpose::after {
  display: block;
  width: 62px;
  height: 1px;
  margin: 8px auto 0;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(184, 154, 78, 0.42), transparent);
}

.voice-start-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: min(560px, calc(100vw - 80px));
  min-height: 64px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(212, 184, 120, 0.66);
  border-radius: 999px;
  background: linear-gradient(180deg, #d7bd78 0%, #b99a4e 100%);
  color: #17120a;
  font: 750 18px Arial, sans-serif;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  box-shadow:
    0 0 0 1px rgba(255, 245, 220, 0.22),
    0 16px 38px rgba(0, 0, 0, 0.28),
    0 0 34px rgba(184, 154, 78, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  animation: sentenceVoiceInvitePulse 2.9s ease-in-out infinite;
}

.voice-start-btn::before,
.voice-start-btn::after {
  position: absolute;
  top: 50%;
  color: #fff2bd;
  content: "*";
  font: 17px Georgia, serif;
  text-shadow: 0 0 10px rgba(255, 242, 189, 0.7);
  transform: translateY(-50%);
}

.voice-start-btn::before {
  left: calc(50% - 172px);
}

.voice-start-btn::after {
  right: calc(50% - 172px);
}

.voice-start-btn:hover,
.voice-start-btn:focus-visible {
  border-color: rgba(255, 232, 160, 0.92);
  filter: saturate(1.05) brightness(1.04);
  outline: none;
  box-shadow:
    0 0 0 1px rgba(255, 245, 220, 0.28),
    0 18px 42px rgba(0, 0, 0, 0.34),
    0 0 42px rgba(212, 184, 120, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.46);
}

.voice-start-btn:active {
  transform: translateY(1px);
}

.sentence-bottom-input:not(.voice-input-open) .word-field-label,
.sentence-bottom-input:not(.voice-input-open) .input-row {
  display: none;
}

.sentence-bottom-input.voice-input-open .voice-start-btn {
  display: none;
}

.word-field-label {
  display: block;
  max-width: min(560px, calc(100vw - 80px));
  margin: 0 auto 7px;
  color: rgba(232, 220, 200, 0.54);
  font: 10px Arial, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.sentence-bottom-input .input-row {
  position: relative;
  width: 100%;
  max-width: min(560px, calc(100vw - 80px));
  margin: 0 auto;
  border: 1px solid rgba(184, 154, 78, 0.34);
  border-radius: 999px;
  background: rgba(13, 17, 24, 0.56);
  padding: 0;
  box-shadow:
    0 0 24px rgba(0, 0, 0, 0.16),
    0 0 18px rgba(184, 154, 78, 0.045),
    inset 0 0 0 1px rgba(212, 184, 120, 0.06);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.sentence-bottom-input .input-row:focus-within {
  border-color: rgba(212, 184, 120, 0.78);
  background: rgba(13, 17, 24, 0.68);
  box-shadow:
    0 0 0 1px rgba(212, 184, 120, 0.18),
    0 0 34px rgba(184, 154, 78, 0.13),
    inset 0 0 0 1px rgba(212, 184, 120, 0.1);
}

.sentence-bottom-input .input-row.has-word {
  border-color: rgba(212, 184, 120, 0.56);
  box-shadow:
    0 0 0 1px rgba(212, 184, 120, 0.1),
    0 0 28px rgba(184, 154, 78, 0.1),
    inset 0 0 0 1px rgba(212, 184, 120, 0.08);
}

.sentence-bottom-input .input-row.has-invalid-word {
  border-color: rgba(209, 119, 95, 0.68);
  box-shadow:
    0 0 0 1px rgba(209, 119, 95, 0.13),
    0 0 26px rgba(209, 119, 95, 0.1),
    inset 0 0 0 1px rgba(209, 119, 95, 0.08);
}

.word-input {
  position: relative;
  z-index: 2;
  width: 100%;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--cr);
  outline: 0;
  padding: 14px 134px;
  font: 300 28px Georgia, serif;
  letter-spacing: 0;
  text-align: center;
  caret-color: var(--gold2);
  transition: color 0.2s;
}

.word-input::placeholder {
  color: transparent;
}

.word-input:focus {
  color: var(--gold2);
}

.word-placeholder {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  color: var(--cr2);
  font: 12px Arial, sans-serif;
  letter-spacing: 0.18em;
  pointer-events: none;
  text-transform: uppercase;
  transform: translateY(-50%);
  transition: opacity 0.18s, filter 0.18s;
  white-space: nowrap;
}

.field-star {
  display: inline-block;
  color: var(--gold2);
  font-size: 12px;
  line-height: 1;
  text-shadow: 0 0 6px rgba(184, 154, 78, 0.4);
}

.sentence-bottom-input .input-row:focus-within .word-placeholder,
.sentence-bottom-input .input-row.has-word .word-placeholder {
  opacity: 0;
  filter: blur(2px);
}

.input-submit {
  position: absolute;
  top: 50%;
  right: 6px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(212, 184, 120, 0.5);
  border-radius: 50px;
  background: rgba(184, 154, 78, 0.26);
  color: var(--gold2);
  padding: 9px 18px;
  font: 400 12px Arial, sans-serif;
  letter-spacing: 0.09em;
  text-align: center;
  text-transform: uppercase;
  transform: translateY(-50%);
  transition: all 0.18s;
  white-space: nowrap;
  box-shadow:
    0 0 20px rgba(184, 154, 78, 0.11),
    inset 0 0 0 1px rgba(255, 245, 220, 0.04);
}

.sentence-bottom-input .input-row.has-word .input-submit,
.input-submit:hover {
  border-color: rgba(212, 184, 120, 0.74);
  background: rgba(184, 154, 78, 0.34);
  color: #fff5dc;
  box-shadow:
    0 0 28px rgba(184, 154, 78, 0.18),
    inset 0 0 0 1px rgba(255, 245, 220, 0.08);
}

.input-submit:disabled {
  cursor: default;
  opacity: 0.72;
}

@keyframes sentenceVoiceInvitePulse {
  0%,
  100% {
    transform: translateY(0) scale(1);
    box-shadow:
      0 16px 30px rgba(196, 164, 88, 0.18),
      0 0 0 1px rgba(245, 220, 146, 0.12),
      0 0 0 0 rgba(212, 184, 120, 0);
  }

  50% {
    transform: translateY(-1px) scale(1.012);
    box-shadow:
      0 20px 40px rgba(196, 164, 88, 0.28),
      0 0 0 1px rgba(245, 220, 146, 0.18),
      0 0 0 8px rgba(212, 184, 120, 0.055);
  }
}

.sentence-nav {
  right: 42px;
  bottom: 44px;
  left: 42px;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.sentence-nav .nav-arrow {
  min-width: 116px;
  min-height: 42px;
  border: 1px solid rgba(185, 154, 97, 0.48);
  background: rgba(8, 8, 7, 0.7);
  color: #d4b878;
  opacity: 1;
  padding: 0 16px;
  pointer-events: auto;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.22),
    inset 0 0 0 1px rgba(255, 245, 220, 0.05);
  backdrop-filter: blur(10px);
}

.sentence-nav .nav-arrow:hover {
  border-color: #d4b878;
  background: rgba(185, 154, 97, 0.16);
}

.sentence-nav .next {
  color: #171614;
  background: rgba(212, 184, 120, 0.92);
}

.sentence-nav .next:hover {
  background: #d4b878;
  color: #171614;
}

@media (max-width: 980px) {
  .ritual-room.sentence .room-content {
    overflow-y: auto;
    padding: 88px 22px 126px;
  }

  .sentence-focus {
    grid-template-rows: 72px minmax(240px, 1fr) auto;
    min-height: calc(100vh - 240px);
  }

  .sentence-title-only h2 {
    font-size: 50px;
  }

  .official-line {
    max-height: 48vh;
    font-size: clamp(42px, 9vw, 72px);
  }

  .sentence-bottom-input {
    padding: 0 18px;
  }

  .sentence-nav {
    right: 22px;
    left: 22px;
  }
}

@media (max-width: 560px) {
  .ritual-room.sentence .room-content {
    padding-top: 78px;
    padding-right: 14px;
    padding-left: 14px;
  }

  .sentence-focus {
    grid-template-rows: 56px minmax(220px, 1fr) auto;
    min-height: calc(100vh - 220px);
  }

  .sentence-title-only h2 {
    font-size: 39px;
  }

  .official-line {
    max-width: calc(100vw - 34px);
    font-size: clamp(33px, 11vw, 52px);
    line-height: 1.18;
  }

  .sentence-bottom-input {
    padding: 0 4px;
  }

  .sentence-bottom-input .voice-purpose {
    font-size: 19px;
  }

  .voice-start-btn {
    min-height: 56px;
    font-size: 13px;
    letter-spacing: 0.16em;
  }

  .voice-start-btn::before {
    left: 20px;
  }

  .voice-start-btn::after {
    right: 20px;
  }

  .word-field-label,
  .sentence-bottom-input .input-row {
    max-width: min(320px, calc(100vw - 48px));
  }

  .word-input {
    padding: 14px 62px;
    font-size: 21px;
  }

  .input-submit {
    right: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
  }

  .input-submit::before {
    display: block;
    color: var(--gold2);
    content: "OK";
    font: 600 12px Arial, sans-serif;
    letter-spacing: 0;
    line-height: 1;
  }

  .word-placeholder {
    gap: 7px;
    font-size: 9px;
    letter-spacing: 0.12em;
  }

  .sentence-nav {
    right: 14px;
    bottom: 34px;
    left: 14px;
  }

  .sentence-nav .nav-arrow {
    min-width: 92px;
    min-height: 40px;
    padding: 0 12px;
    font-size: 9px;
  }
}

/* V013c - TheSentence browser-note pass. */
.ritual-room.sentence .wordmark {
  font-size: 20px;
}

.ritual-room.sentence .countdown {
  font-size: 11px;
}

.ritual-room.sentence .countdown span,
.ritual-room.sentence .countdown small {
  font-size: 9px;
}

.ritual-room.sentence .module-menu {
  gap: 10px;
}

.ritual-room.sentence .module-menu button {
  padding: 9px 8px;
  font-size: 10.5px;
}

.sentence-focus {
  grid-template-rows: 70px minmax(360px, 1fr) 188px;
  min-height: calc(100vh - 250px);
}

.sentence-title-only h2 {
  font-size: 58px;
  line-height: 1;
}

.sentence-phrase-wrap {
  min-height: 360px;
}

.official-line {
  display: block;
  width: min(1040px, calc(100vw - 260px));
  max-width: none;
  max-height: 54vh;
  padding: 0 10px 28px;
  font-size: 46px;
  line-height: 1.34;
  scroll-behavior: auto;
}

.sentence-frame-chapter {
  position: sticky;
  top: 0;
  z-index: 4;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 20px;
  padding: 0 0 12px;
  background: linear-gradient(180deg, rgba(10, 12, 12, 0.94) 0%, rgba(10, 12, 12, 0.74) 68%, rgba(10, 12, 12, 0) 100%);
  color: rgba(212, 184, 120, 0.82);
  font: 650 12px / 1 Arial, sans-serif;
  letter-spacing: 0.26em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(212, 184, 120, 0.16);
  pointer-events: none;
}

.sentence-words {
  width: 100%;
}

.sentence-month {
  margin: 0 0 24px;
}

.sentence-month:last-child {
  margin-bottom: 0;
}

.sentence-month-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 0 9px;
  color: rgba(212, 184, 120, 0.66);
  font: 650 11px / 1 Arial, sans-serif;
  letter-spacing: 0.24em;
  text-align: center;
  text-transform: uppercase;
}

.sentence-month-label::before,
.sentence-month-label::after {
  content: "";
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 184, 120, 0.36));
}

.sentence-month-label::after {
  background: linear-gradient(90deg, rgba(212, 184, 120, 0.36), transparent);
}

.sentence-month-line {
  margin: 0;
}

.sentence-word-unit {
  display: inline;
}

.official-word {
  margin: 0 0.03em;
  border: 0;
  border-bottom: 1px solid rgba(185, 154, 97, 0.28);
  color: #f6ecd4;
}

.official-word span {
  display: none !important;
}

.sentence-live-star,
.luminous-star {
  display: inline-block;
  color: #ffe6a4;
  text-shadow:
    0 0 8px rgba(255, 230, 164, 0.86),
    0 0 22px rgba(212, 184, 120, 0.5),
    0 0 42px rgba(212, 184, 120, 0.22);
  animation: sentenceLuminousStar 2.4s ease-in-out infinite;
}

.sentence-live-star {
  display: block;
  width: max-content;
  margin: 18px auto 0;
  font-size: 28px;
  line-height: 1;
}

.sentence-pending-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.14em;
  margin: 16px auto 0;
  color: var(--gold2);
  white-space: nowrap;
}

.sentence-pending-wrap .proposal-star {
  margin: 0;
  font-size: 0.54em;
  transform: translateY(-0.1em);
}

.sentence-pending-wrap .word-preview {
  color: #ffe6a4;
  border-bottom: 1px solid rgba(212, 184, 120, 0.52);
}

@keyframes sentenceLuminousStar {
  0%,
  100% {
    opacity: 0.42;
    filter: brightness(0.92);
    transform: translateY(-0.04em) scale(0.92);
  }

  50% {
    opacity: 1;
    filter: brightness(1.16);
    transform: translateY(-0.04em) scale(1.14);
  }
}

.sentence-bottom-input {
  max-width: 640px;
  padding: 0 38px;
}

.sentence-bottom-input .voice-purpose {
  margin-bottom: 14px;
  font-size: 20px;
}

.word-field-label {
  display: none !important;
}

.sentence-bottom-input:not(.voice-input-open) .input-row,
.sentence-bottom-input:not(.voice-input-open) .voice-submit-btn {
  display: none;
}

.sentence-bottom-input.voice-input-open .voice-open-btn {
  display: none;
}

.sentence-bottom-input.voice-input-open .voice-submit-btn {
  display: flex;
}

.sentence-bottom-input .input-row {
  max-width: min(560px, calc(100vw - 96px));
  margin: 0 auto 14px;
}

.input-submit {
  display: none !important;
}

.word-input {
  padding: 15px 36px;
  font-size: 28px;
}

.field-star,
.voice-start-btn::before,
.voice-start-btn::after {
  content: "✦";
  animation: sentenceLuminousStar 2.4s ease-in-out infinite;
}

.field-star.r,
.voice-start-btn::after {
  animation-delay: 1.2s;
}

.voice-submit-btn {
  min-height: 58px;
  margin-top: 0;
}

.voice-submit-btn:disabled {
  cursor: default;
  opacity: 0.42;
  filter: saturate(0.75);
  animation: none;
}

.voice-submit-btn.ready {
  opacity: 1;
}

.sentence-nav {
  right: 42px;
  bottom: 86px;
  left: 42px;
}

.sentence-nav .nav-arrow {
  min-width: 118px;
  min-height: 38px;
  border-radius: 999px;
  padding: 0 18px;
  font-size: 10px;
}

@media (min-width: 1500px) {
  .official-line {
    width: min(1080px, calc(100vw - 520px));
    max-height: 56vh;
    font-size: 52px;
    line-height: 1.3;
  }
}

@media (max-width: 980px) {
  .sentence-focus {
    grid-template-rows: 62px minmax(320px, 1fr) 180px;
  }

  .sentence-title-only h2 {
    font-size: 48px;
  }

  .official-line {
    width: min(820px, calc(100vw - 70px));
    max-height: 50vh;
    font-size: 36px;
    line-height: 1.38;
  }

  .sentence-frame-chapter {
    font-size: 10px;
  }

  .sentence-bottom-input {
    padding: 0 18px;
  }

  .sentence-nav {
    right: 22px;
    bottom: 78px;
    left: 22px;
  }
}

@media (max-width: 560px) {
  .ritual-room.sentence .wordmark {
    font-size: 18px;
  }

  .ritual-room.sentence .module-menu button {
    font-size: 9.5px;
  }

  .sentence-focus {
    grid-template-rows: 52px minmax(280px, 1fr) 168px;
  }

  .sentence-title-only h2 {
    font-size: 38px;
  }

  .official-line {
    width: calc(100vw - 34px);
    max-height: 48vh;
    padding-bottom: 22px;
    font-size: 26px;
    line-height: 1.42;
  }

  .sentence-month-label {
    gap: 10px;
    font-size: 9px;
  }

  .sentence-month-label::before,
  .sentence-month-label::after {
    width: 30px;
  }

  .word-input {
    padding: 14px 24px;
    font-size: 22px;
  }

  .sentence-nav {
    right: 14px;
    bottom: 72px;
    left: 14px;
  }

  .sentence-nav .nav-arrow {
    min-width: 96px;
    min-height: 36px;
  }
}

/* V013d - TheSentence interaction and reading refinements. */
.ritual-room.sentence .header-brand {
  min-width: 230px;
}

.ritual-room.sentence .wordmark {
  font-size: 26px;
}

.ritual-room.sentence .countdown {
  gap: 8px;
  font-size: 12px;
}

.ritual-room.sentence .countdown span,
.ritual-room.sentence .countdown small {
  font-size: 10px;
}

.account-button {
  min-width: 116px;
  min-height: 36px;
  border: 1px solid rgba(212, 184, 120, 0.42);
  border-radius: 999px;
  background: rgba(8, 8, 7, 0.48);
  color: var(--gold2);
  padding: 0 18px;
  font: 650 11px / 1 Arial, sans-serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.2),
    inset 0 0 0 1px rgba(255, 245, 220, 0.05);
}

.account-button:hover,
.account-button:focus-visible {
  border-color: rgba(232, 220, 200, 0.68);
  outline: none;
}

.official-line {
  font-weight: 300;
}

.official-word {
  border-bottom: 0 !important;
  color: rgba(246, 236, 212, 0.94);
  font-weight: 300;
  text-decoration: none !important;
}

.sentence-period {
  color: rgba(246, 236, 212, 0.92);
}

.sentence-live-star {
  display: inline-block;
  width: auto;
  margin: 0 0 0 0.24em;
  font-size: 0.74em;
  line-height: 1;
  vertical-align: 0.08em;
}

.sentence-bottom-input {
  max-width: 610px;
}

.sentence-bottom-input .voice-open-btn {
  display: none !important;
}

.sentence-bottom-input .input-row {
  margin-bottom: 12px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.sentence-bottom-input .input-row.has-word {
  border-color: rgba(212, 184, 120, 0.38);
}

.sentence-bottom-input .input-row.has-valid-word {
  border-color: rgba(212, 184, 120, 0.72);
  box-shadow:
    0 0 0 1px rgba(212, 184, 120, 0.16),
    0 0 24px rgba(184, 154, 78, 0.1),
    inset 0 0 0 1px rgba(212, 184, 120, 0.08);
}

.word-placeholder {
  transition: opacity 0.08s ease;
}

.sentence-bottom-input .input-row:focus-within .word-placeholder,
.sentence-bottom-input .input-row.has-word .word-placeholder {
  opacity: 0;
  filter: none;
}

.voice-submit-btn {
  width: 100%;
  max-width: 430px;
  min-height: 54px;
  border-radius: 8px;
  border-color: rgba(212, 184, 120, 0.44);
  background: linear-gradient(180deg, #c6ad63 0%, #aa8e47 100%);
  color: #11100c;
  font-size: 13px;
  font-weight: 760;
  letter-spacing: 0.2em;
  animation: none;
  box-shadow:
    0 1px 0 rgba(255, 248, 220, 0.25) inset,
    0 12px 28px -18px rgba(0, 0, 0, 0.72);
}

.voice-submit-btn::before,
.voice-submit-btn::after {
  display: none !important;
}

.voice-submit-btn:disabled {
  border-color: rgba(212, 184, 120, 0.18);
  background: rgba(126, 113, 78, 0.38);
  color: rgba(246, 236, 212, 0.44);
  opacity: 1;
  filter: none;
}

.voice-submit-btn.ready:not(:disabled) {
  border-color: rgba(232, 220, 200, 0.7);
  background: linear-gradient(180deg, #d6bd74 0%, #b99b50 100%);
  color: #0f0e0b;
  box-shadow:
    0 1px 0 rgba(255, 248, 220, 0.34) inset,
    0 16px 32px -18px rgba(0, 0, 0, 0.78),
    0 0 28px rgba(212, 184, 120, 0.14);
}

.sentence-bottom-input.voice-given .voice-submit-btn:disabled {
  border-color: rgba(232, 220, 200, 0.46);
  background: linear-gradient(180deg, #d0ba72 0%, #b89a50 100%);
  color: #11100c;
}

.sentence-bottom-input.just-submitted .input-row,
.sentence-bottom-input.just-submitted .voice-submit-btn {
  animation: sentenceVoiceAccepted 0.95s ease both;
}

@keyframes sentenceVoiceAccepted {
  0% {
    transform: translateY(0);
    box-shadow:
      0 0 0 0 rgba(255, 230, 164, 0),
      0 1px 0 rgba(255, 248, 220, 0.24) inset;
  }

  38% {
    transform: translateY(-2px);
    box-shadow:
      0 0 0 6px rgba(255, 230, 164, 0.12),
      0 0 34px rgba(212, 184, 120, 0.28),
      0 1px 0 rgba(255, 248, 220, 0.38) inset;
  }

  100% {
    transform: translateY(0);
    box-shadow:
      0 0 0 0 rgba(255, 230, 164, 0),
      0 1px 0 rgba(255, 248, 220, 0.25) inset;
  }
}

.sentence-nav {
  bottom: 112px;
}

.ritual-room.sentence .annual-progress {
  bottom: 42px;
}

@media (max-width: 980px) {
  .ritual-room.sentence .wordmark {
    font-size: 22px;
  }

  .account-button {
    min-width: 102px;
    min-height: 34px;
    font-size: 10px;
  }

  .sentence-nav {
    bottom: 102px;
  }

  .ritual-room.sentence .annual-progress {
    bottom: 38px;
  }
}

@media (max-width: 560px) {
  .ritual-room.sentence .wordmark {
    font-size: 19px;
  }

  .ritual-room.sentence .countdown {
    font-size: 10px;
  }

  .account-button {
    min-width: 92px;
    min-height: 32px;
    padding: 0 12px;
    font-size: 9px;
  }

  .sentence-live-star {
    font-size: 0.82em;
  }

  .voice-submit-btn {
    min-height: 50px;
    font-size: 12px;
  }

  .sentence-nav {
    bottom: 94px;
  }

  .ritual-room.sentence .annual-progress {
    bottom: 34px;
  }
}

/* V013e - punctuation, compact voice row, centered module nav. */
.ritual-room .ritual-header {
  position: relative;
}

.ritual-room .module-menu {
  position: absolute;
  top: 30px;
  left: 50%;
  width: max-content;
  max-width: min(760px, calc(100vw - 560px));
  margin: 0;
  transform: translateX(-50%);
}

.sentence-month-line,
.sentence-word-unit,
.official-word {
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  background-image: none !important;
}

.official-word {
  font-weight: 300 !important;
}

.sentence-period {
  margin-left: 0;
  padding-left: 0;
}

.sentence-live-star {
  margin-left: 0.18em;
  font-size: 0.82em;
  vertical-align: 0.1em;
}

.sentence-bottom-input {
  width: min(720px, calc(100vw - 128px));
  max-width: none;
  padding: 0;
}

.sentence-bottom-input .voice-purpose,
.sentence-bottom-input .word-placeholder {
  display: none !important;
}

.sentence-bottom-input .sentence-voice-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 210px;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  max-width: none;
  min-height: 66px;
  margin: 0 auto;
  padding: 6px;
  border: 1px solid rgba(184, 154, 78, 0.36);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 246, 226, 0.035), rgba(255, 246, 226, 0)),
    rgba(8, 10, 12, 0.58);
  box-shadow:
    0 0 28px rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px rgba(212, 184, 120, 0.045);
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.sentence-bottom-input .sentence-voice-row:focus-within {
  border-color: rgba(212, 184, 120, 0.7);
  background:
    linear-gradient(180deg, rgba(255, 246, 226, 0.05), rgba(255, 246, 226, 0)),
    rgba(8, 10, 12, 0.68);
}

.sentence-bottom-input .sentence-voice-row.has-valid-word {
  border-color: rgba(212, 184, 120, 0.72);
}

.sentence-bottom-input .sentence-voice-row.has-invalid-word {
  border-color: rgba(209, 119, 95, 0.62);
}

.sentence-voice-row .word-input {
  min-height: 52px;
  padding: 0 20px;
  border-radius: 7px;
  color: #f6ecd4;
  font: 300 20px / 1.1 Georgia, serif;
  text-align: left;
}

.sentence-voice-row .word-input::placeholder {
  color: rgba(232, 220, 200, 0.72);
  opacity: 1;
  font-style: italic;
}

.sentence-voice-row .word-input:focus {
  color: #ffe6a4;
}

.sentence-voice-row .voice-submit-btn {
  width: 100%;
  max-width: none;
  min-height: 52px;
  margin: 0;
  border-radius: 7px;
  align-self: stretch;
  font-size: 12px;
}

.sentence-bottom-input.just-submitted .sentence-voice-row {
  animation: sentenceVoiceAccepted 0.95s ease both;
}

@media (max-width: 1120px) {
  .ritual-room .module-menu {
    max-width: min(700px, calc(100vw - 360px));
  }
}

@media (max-width: 980px) {
  .ritual-room .module-menu {
    position: static;
    width: auto;
    max-width: 720px;
    margin: 0 auto;
    transform: none;
  }

  .sentence-bottom-input {
    width: min(640px, calc(100vw - 64px));
  }

  .sentence-bottom-input .sentence-voice-row {
    grid-template-columns: minmax(0, 1fr) 188px;
  }
}

@media (max-width: 560px) {
  .sentence-bottom-input {
    width: calc(100vw - 34px);
  }

  .sentence-bottom-input .sentence-voice-row {
    grid-template-columns: 1fr;
    gap: 7px;
    min-height: 0;
  }

  .sentence-voice-row .word-input {
    min-height: 48px;
    text-align: center;
  }
}

/* V013h - stable live word, word hover, centered input, pool reveal test. */
.official-line,
.official-word {
  color: rgba(246, 236, 212, 0.9);
  font-weight: 260 !important;
  text-shadow: 0 12px 34px rgba(0, 0, 0, 0.3);
}

.official-word {
  border-radius: 3px;
  cursor: pointer;
  transition: color 0.15s ease, text-shadow 0.15s ease, filter 0.15s ease;
}

.official-word.origin {
  color: rgba(255, 244, 213, 0.92);
}

.official-word:hover,
.official-word:focus-visible {
  color: #d4b878;
  filter: brightness(1.06);
  outline: none;
  text-shadow:
    0 0 16px rgba(184, 154, 78, 0.3),
    0 12px 34px rgba(0, 0, 0, 0.28);
}

.official-word .official-word-date {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.34em);
  z-index: 8;
  display: block !important;
  width: max-content;
  max-width: 180px;
  padding: 5px 7px 4px;
  border: 1px solid rgba(212, 184, 120, 0.34);
  border-radius: 999px;
  background: rgba(8, 10, 12, 0.84);
  color: rgba(232, 220, 200, 0.72);
  font: 600 9px / 1 Arial, sans-serif;
  letter-spacing: 0.12em;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  text-shadow: none;
  text-transform: uppercase;
  transform: translate(-50%, 5px);
  transition: opacity 0.14s ease, transform 0.14s ease;
  white-space: nowrap;
}

.official-word:hover .official-word-date,
.official-word:focus-visible .official-word-date {
  opacity: 1;
  transform: translate(-50%, 0);
}

.sentence-word-unit {
  display: inline-block !important;
  white-space: nowrap;
}

.sentence-period {
  display: inline;
  margin-left: 0 !important;
}

.sentence-live-star {
  position: relative;
  top: 0.08em;
  margin-left: 0.2em;
  font-size: 0.88em;
}

.sentence-live-pending {
  display: inline-block;
  max-width: 0;
  margin-left: 0.18em;
  overflow: hidden;
  color: #ffe6a4;
  font-size: 1em;
  font: inherit;
  line-height: inherit;
  opacity: 0;
  text-align: left;
  text-overflow: ellipsis;
  transform: none;
  vertical-align: -0.01em;
  white-space: nowrap;
  text-shadow:
    0 0 8px rgba(255, 230, 164, 0.86),
    0 0 22px rgba(212, 184, 120, 0.5),
    0 0 42px rgba(212, 184, 120, 0.22);
}

.sentence-live-pending.has-word {
  max-width: min(25ch, 36vw);
  opacity: 1;
  animation: sentencePendingGlow 2.4s ease-in-out infinite;
}

.sentence-bottom-input {
  position: relative;
  transform: translateY(-42px);
  transition: transform 0.45s cubic-bezier(0.2, 0.72, 0.18, 1), width 0.45s cubic-bezier(0.2, 0.72, 0.18, 1);
}

.sentence-bottom-input.voice-given {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) 240px;
  align-items: stretch;
  gap: 16px;
  width: min(940px, calc(100vw - 180px));
  transform: translate(-42px, -42px);
}

.sentence-bottom-input .sentence-voice-row {
  min-height: 62px;
}

.sentence-bottom-input.voice-given .sentence-voice-row {
  width: 100%;
  margin: 0;
}

.sentence-voice-row .word-input,
.sentence-voice-row .voice-submit-btn {
  min-height: 50px;
}

.sentence-voice-row .word-input {
  text-align: center;
}

.sentence-pool-preview {
  min-width: 0;
  padding: 12px 14px 11px;
  border: 1px solid rgba(184, 154, 78, 0.34);
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(212, 184, 120, 0.07), rgba(212, 184, 120, 0.018)),
    rgba(8, 10, 12, 0.64);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.22),
    inset 0 0 0 1px rgba(255, 245, 220, 0.045);
  opacity: 0;
  transform: translateX(12px);
  animation: sentencePoolReveal 0.72s cubic-bezier(0.2, 0.72, 0.18, 1) 0.1s forwards;
}

.pool-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: rgba(212, 184, 120, 0.88);
  font: 650 10px / 1 Arial, sans-serif;
  letter-spacing: 0.2em;
}

.pool-preview-head span {
  color: rgba(232, 220, 200, 0.44);
  font-size: 8px;
}

.pool-preview-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px 0 8px;
  border-top: 1px solid rgba(184, 154, 78, 0.18);
}

.pool-preview-rank {
  color: #ffe6a4;
  text-shadow:
    0 0 8px rgba(255, 230, 164, 0.72),
    0 0 22px rgba(212, 184, 120, 0.36);
}

.pool-preview-row strong {
  min-width: 0;
  overflow: hidden;
  color: #f6ecd4;
  font: 300 22px / 1 Georgia, serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pool-preview-row span:last-child,
.pool-preview-foot {
  color: rgba(232, 220, 200, 0.48);
  font: 600 9px / 1.2 Arial, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pool-preview-foot {
  padding-top: 1px;
  text-align: right;
}

@keyframes sentencePendingGlow {
  0%,
  100% {
    opacity: 0.46;
    filter: brightness(0.94);
    text-shadow:
      0 0 5px rgba(255, 230, 164, 0.4),
      0 0 14px rgba(212, 184, 120, 0.2);
  }

  50% {
    opacity: 1;
    filter: brightness(1.16);
    text-shadow:
      0 0 9px rgba(255, 230, 164, 0.78),
      0 0 24px rgba(212, 184, 120, 0.42);
  }
}

@keyframes sentencePoolReveal {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.sentence-nav .nav-arrow span {
  display: inline-block;
  font-size: 1.12em;
  line-height: 1;
  transform: translateY(-0.02em);
}

@media (max-width: 980px) {
  .sentence-bottom-input {
    transform: translateY(-30px);
  }

  .sentence-bottom-input.voice-given {
    grid-template-columns: 1fr;
    gap: 10px;
    width: min(640px, calc(100vw - 64px));
    transform: translateY(-30px);
  }

  .sentence-pool-preview {
    transform: translateY(10px);
  }

  @keyframes sentencePoolReveal {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@media (max-width: 560px) {
  .sentence-bottom-input {
    transform: translateY(-18px);
  }

  .sentence-bottom-input.voice-given {
    width: calc(100vw - 34px);
    transform: translateY(-18px);
  }
}

/* V013i - vertical pool column and module color base. */
.ritual-room {
  --module-accent: #b99a61;
  --module-accent-soft: rgba(185, 154, 97, 0.48);
  --module-accent-faint: rgba(185, 154, 97, 0.14);
}

.ritual-room.sentence {
  --module-accent: #d4b878;
  --module-accent-soft: rgba(212, 184, 120, 0.5);
  --module-accent-faint: rgba(212, 184, 120, 0.15);
}

.ritual-room.canvas,
.ritual-room.pact {
  --module-accent: #b75a49;
  --module-accent-soft: rgba(183, 90, 73, 0.5);
  --module-accent-faint: rgba(183, 90, 73, 0.16);
}

.ritual-room.review {
  --module-accent: #78a06f;
  --module-accent-soft: rgba(120, 160, 111, 0.5);
  --module-accent-faint: rgba(120, 160, 111, 0.16);
}

.ritual-room.clock {
  --module-accent: #6595bf;
  --module-accent-soft: rgba(101, 149, 191, 0.5);
  --module-accent-faint: rgba(101, 149, 191, 0.16);
}

.ritual-room .wordmark span,
.ritual-room .countdown,
.ritual-room .countdown strong,
.ritual-room .module-menu button.active,
.ritual-room .module-menu button:hover,
.ritual-room .account-button {
  color: var(--module-accent);
}

.ritual-room .account-button {
  border-color: var(--module-accent-soft);
}

.ritual-room .annual-track i {
  background: var(--module-accent);
}

.sentence-focus {
  position: relative;
  --sentence-module-shift: 0px;
}

.sentence-focus.has-pool {
  --sentence-module-shift: clamp(96px, 8vw, 148px);
}

.sentence-focus .sentence-title-only,
.sentence-focus .sentence-official-sheet,
.sentence-focus .sentence-bottom-input {
  transition: transform 0.48s cubic-bezier(0.2, 0.72, 0.18, 1);
}

.sentence-focus.has-pool .sentence-title-only,
.sentence-focus.has-pool .sentence-official-sheet {
  transform: translateX(var(--sentence-module-shift));
}

.sentence-title-only {
  display: grid;
  justify-items: center;
}

.sentence-title-only h2 {
  width: max-content;
}

.official-line {
  max-height: clamp(340px, 38vh, 450px);
}

.sentence-live-star {
  position: relative;
  top: 0.13em;
  vertical-align: baseline;
}

.sentence-live-pending {
  display: inline;
  max-width: none;
  margin-left: 0.14em;
  overflow: visible;
  font: inherit;
  font-size: inherit;
  line-height: inherit;
  text-align: inherit;
  transform: none !important;
  vertical-align: baseline;
}

.sentence-live-pending.has-word {
  max-width: none;
  animation: sentencePendingGlow 2.4s ease-in-out infinite;
}

.sentence-bottom-input {
  width: min(620px, calc(100vw - 128px));
  transform: translateY(-30px);
}

.sentence-bottom-input.voice-given {
  display: block;
  width: min(560px, calc(100vw - 128px));
  transform: translate(var(--sentence-module-shift), -30px);
}

.sentence-bottom-input .sentence-voice-row {
  grid-template-columns: minmax(0, 1fr) 174px;
  min-height: 56px;
  padding: 5px;
  border-radius: 8px;
}

.sentence-voice-row .word-input {
  min-height: 46px;
  padding: 0 18px;
  font-size: 18px;
  text-align: center;
}

.sentence-voice-row .voice-submit-btn {
  min-height: 46px;
  border-radius: 6px;
  font-size: 10.5px;
  letter-spacing: 0.18em;
}

.sentence-pool-preview {
  position: absolute;
  top: 118px;
  bottom: 118px;
  left: clamp(28px, 4.2vw, 76px);
  z-index: 6;
  display: flex;
  width: clamp(248px, 20vw, 330px);
  min-width: 0;
  flex-direction: column;
  padding: 20px 18px;
  border: 1px solid rgba(184, 154, 78, 0.32);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(184, 154, 78, 0.065), rgba(184, 154, 78, 0.018)),
    rgba(8, 10, 12, 0.72);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px rgba(255, 245, 220, 0.045);
  opacity: 0;
  overflow: hidden;
  transform: translateX(-18px);
  animation: sentencePoolReveal 0.72s cubic-bezier(0.2, 0.72, 0.18, 1) 0.08s forwards;
}

.sentence-pool-preview .topnow-hdr {
  display: grid;
  grid-template-columns: auto minmax(22px, 1fr);
  gap: 8px 10px;
  align-items: center;
  margin-bottom: 12px;
}

.sentence-pool-preview .topnow-lbl {
  color: var(--module-accent);
  font: 650 10px / 1 Arial, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.sentence-pool-preview .topnow-line {
  height: 1px;
  background: linear-gradient(90deg, var(--module-accent-soft), transparent);
}

.sentence-pool-preview .topnow-meta {
  grid-column: 1 / -1;
  color: rgba(232, 220, 200, 0.46);
  font: 600 9px / 1.2 Arial, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sentence-pool-preview .topnow-guide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.sentence-pool-preview .topnow-guide span {
  padding: 8px 8px;
  border: 1px solid rgba(184, 154, 78, 0.16);
  border-radius: 6px;
  color: rgba(232, 220, 200, 0.48);
  font: 500 9px / 1.35 Arial, sans-serif;
}

.sentence-pool-preview .topnow-guide strong {
  display: block;
  color: rgba(246, 236, 212, 0.86);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sentence-pool-preview .topnow-list {
  display: grid;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
}

.sentence-pool-preview .topw {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 64px;
  grid-template-areas:
    "rank word prob"
    "rank voices prob"
    "mine mine prob";
  gap: 2px 8px;
  min-height: 54px;
  padding: 9px 10px;
  overflow: hidden;
  border: 1px solid rgba(184, 154, 78, 0.16);
  border-radius: 7px;
  background: rgba(232, 220, 200, 0.025);
}

.sentence-pool-preview .topw::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--pct, 8) * 1%);
  max-width: 100%;
  content: "";
  background: linear-gradient(90deg, var(--module-accent-faint), transparent);
  pointer-events: none;
}

.sentence-pool-preview .rk {
  position: relative;
  grid-area: rank;
  align-self: center;
  color: var(--module-accent);
  font: 650 10px / 1 Arial, sans-serif;
  letter-spacing: 0.04em;
}

.sentence-pool-preview .mine-star {
  display: block;
  margin-bottom: 4px;
  color: #ffe6a4;
  text-shadow:
    0 0 8px rgba(255, 230, 164, 0.72),
    0 0 22px rgba(212, 184, 120, 0.36);
}

.sentence-pool-preview .w {
  position: relative;
  grid-area: word;
  min-width: 0;
}

.sentence-pool-preview .w-main {
  display: block;
  overflow: hidden;
  color: rgba(246, 236, 212, 0.94);
  font: 300 21px / 1 Georgia, serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sentence-pool-preview .variants-inline,
.sentence-pool-preview .mine-label {
  display: block;
  color: rgba(212, 184, 120, 0.68);
  font: 600 8px / 1.2 Arial, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sentence-pool-preview .mine-label {
  grid-area: mine;
}

.sentence-pool-preview .vc {
  position: relative;
  grid-area: voices;
  color: rgba(232, 220, 200, 0.46);
  font: 600 9px / 1 Arial, sans-serif;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.sentence-pool-preview .prob-stack {
  position: relative;
  grid-area: prob;
  align-self: center;
  justify-self: end;
  text-align: right;
}

.sentence-pool-preview .voice-pct strong {
  display: block;
  color: var(--module-accent);
  font: 650 11px / 1 Arial, sans-serif;
  letter-spacing: 0.05em;
}

.sentence-pool-preview .voice-pct em {
  display: block;
  color: rgba(232, 220, 200, 0.42);
  font: 600 8px / 1.2 Arial, sans-serif;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sentence-pool-preview .show-more {
  width: 100%;
  margin: auto 0 12px;
  padding: 10px;
  border: 1px solid rgba(184, 154, 78, 0.18);
  border-radius: 999px;
  background: rgba(184, 154, 78, 0.055);
  color: rgba(212, 184, 120, 0.76);
  font: 650 9px / 1 Arial, sans-serif;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.sentence-pool-preview .transparency-note {
  color: rgba(232, 220, 200, 0.48);
  font: italic 14px / 1.35 Georgia, serif;
}

.sentence-pool-preview .tn-icon {
  display: inline-block;
  margin-right: 6px;
  color: #ffe6a4;
  text-shadow: 0 0 12px rgba(212, 184, 120, 0.45);
}

.sentence-nav {
  bottom: 76px;
}

.sentence-nav .nav-arrow {
  min-width: 132px;
  min-height: 46px;
  font-size: 10.5px;
  letter-spacing: 0.12em;
}

.ritual-room.sentence .annual-progress {
  bottom: 24px;
}

@media (max-width: 1220px) {
  .sentence-focus.has-pool {
    --sentence-module-shift: 96px;
  }

  .sentence-pool-preview {
    left: 22px;
    width: 220px;
    padding: 16px 14px;
  }

  .sentence-pool-preview .topnow-guide {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .sentence-focus.has-pool {
    --sentence-module-shift: 0px;
  }

  .sentence-focus.has-pool .sentence-title-only,
  .sentence-focus.has-pool .sentence-official-sheet {
    transform: none;
  }

  .sentence-pool-preview {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    width: min(640px, calc(100vw - 64px));
    max-height: 300px;
    margin: 0 auto 16px;
  }

  .sentence-bottom-input,
  .sentence-bottom-input.voice-given {
    width: min(620px, calc(100vw - 64px));
    transform: translateY(-22px);
  }

  .official-line {
    max-height: clamp(300px, 36vh, 410px);
  }

  .sentence-nav {
    bottom: 72px;
  }

  .ritual-room.sentence .annual-progress {
    bottom: 22px;
  }
}

@media (max-width: 560px) {
  .sentence-bottom-input .sentence-voice-row {
    grid-template-columns: 1fr;
  }

  .sentence-bottom-input,
  .sentence-bottom-input.voice-given {
    width: calc(100vw - 34px);
    transform: translateY(-14px);
  }

  .sentence-pool-preview {
    width: calc(100vw - 34px);
    max-height: 270px;
  }
}

/* V013j - right-side pool, balanced text window, submitted receipt. */
.sentence-focus.has-pool {
  --sentence-module-shift: 0px;
  grid-template-columns: minmax(620px, 900px) clamp(300px, 22vw, 360px);
  grid-template-rows: 86px auto auto;
  align-items: start;
  justify-content: center;
  justify-items: stretch;
  column-gap: clamp(44px, 4.4vw, 78px);
  width: min(100%, 1340px);
}

.sentence-focus.has-pool .sentence-title-only {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
  transform: none;
}

.sentence-focus.has-pool .sentence-official-sheet {
  grid-column: 1;
  grid-row: 2;
  justify-self: end;
  transform: none;
}

.sentence-focus.has-pool .sentence-bottom-input {
  grid-column: 1;
  grid-row: 3;
  justify-self: center;
}

.sentence-focus.has-pool .official-line {
  max-width: min(900px, calc(100vw - 540px));
  max-height: clamp(430px, 46vh, 560px);
}

.sentence-focus:not(.has-pool) .official-line {
  max-height: clamp(410px, 44vh, 540px);
}

.sentence-focus.has-pool .sentence-live-star {
  top: 0.16em;
}

.sentence-focus.has-pool .sentence-live-pending {
  vertical-align: baseline;
}

.sentence-bottom-input.voice-given {
  width: min(620px, calc(100vw - 128px));
  padding: 0;
}

.sentence-focus.has-pool .sentence-bottom-input.voice-given {
  transform: translateY(-50px);
}

.sentence-draw-receipt {
  width: 100%;
  padding: 20px 28px 26px;
  border: 1px solid rgba(184, 154, 78, 0.28);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(232, 220, 200, 0.04), rgba(184, 154, 78, 0.022)),
    rgba(8, 10, 12, 0.64);
  color: rgba(232, 220, 200, 0.68);
  text-align: center;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px rgba(255, 245, 220, 0.035);
}

.sentence-draw-receipt .done-action-rail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 13px;
  flex-wrap: wrap;
}

.sentence-draw-receipt .done-action-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(184, 154, 78, 0.26);
  border-radius: 999px;
  background: rgba(184, 154, 78, 0.045);
  color: rgba(232, 220, 200, 0.68);
  font: 600 11px / 1 Arial, sans-serif;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.sentence-draw-receipt .done-action-link strong,
.sentence-draw-receipt .done-share,
.sentence-draw-receipt .done-kicker {
  color: var(--module-accent);
}

.sentence-draw-receipt .done-kicker {
  margin: 0 0 18px;
  font: 600 13px / 1.2 Arial, sans-serif;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.sentence-draw-receipt .done-word-row {
  display: flex;
  justify-content: center;
  margin: 0 0 24px;
}

.sentence-draw-receipt .done-word {
  max-width: 100%;
  overflow: hidden;
  color: #f6ecd4;
  font: 300 clamp(52px, 5vw, 72px) / 0.95 Georgia, serif;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sentence-draw-receipt .done-rule {
  height: 1px;
  margin: 0 0 22px;
  background: linear-gradient(90deg, transparent, rgba(184, 154, 78, 0.32), transparent);
}

.sentence-draw-receipt .breath-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(320px, 100%);
  min-height: 44px;
  border: 1px solid rgba(184, 154, 78, 0.24);
  border-radius: 999px;
  background: rgba(184, 154, 78, 0.045);
  color: rgba(232, 220, 200, 0.62);
  font: 300 17px / 1 Georgia, serif;
}

.sentence-draw-receipt .breath-cooldown {
  margin-top: 21px;
  color: rgba(232, 220, 200, 0.42);
  font: 500 12px / 1 Arial, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.sentence-pool-preview {
  right: auto;
}

.sentence-focus.has-pool .sentence-pool-preview {
  position: relative;
  top: auto;
  bottom: auto;
  left: auto;
  grid-column: 2;
  grid-row: 2 / 4;
  align-self: start;
  width: 100%;
  height: clamp(520px, 56vh, 680px);
  margin-top: 18px;
  padding: 19px 17px;
  transform: translateX(18px);
}

.sentence-focus.has-pool .sentence-pool-preview::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -30px;
  width: 1px;
  content: "";
  background: linear-gradient(180deg, transparent, rgba(184, 154, 78, 0.34), transparent);
}

.sentence-pool-preview .topnow-guide {
  grid-template-columns: 1fr;
  gap: 6px;
  margin-bottom: 12px;
}

.sentence-pool-preview .topnow-guide span {
  padding: 7px 8px;
}

.sentence-pool-preview .pool-section-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 5px 0 7px;
  color: rgba(212, 184, 120, 0.82);
  font: 600 9px / 1.2 Arial, sans-serif;
  letter-spacing: 0.24em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.sentence-pool-preview .pool-section-label::before,
.sentence-pool-preview .pool-section-label::after {
  flex: 1;
  height: 1px;
  max-width: 54px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(184, 154, 78, 0.28));
}

.sentence-pool-preview .pool-section-label::after {
  background: linear-gradient(90deg, rgba(184, 154, 78, 0.28), transparent);
}

.sentence-pool-preview .pool-section-label.wild {
  margin-top: 11px;
  color: rgba(232, 220, 200, 0.45);
  border-top: 1px dashed rgba(184, 154, 78, 0.24);
  padding-top: 11px;
}

.sentence-pool-preview .pool-section-label.wild::before,
.sentence-pool-preview .pool-section-label.wild::after {
  display: none;
}

.sentence-pool-preview .pool-label-stack {
  display: grid;
  gap: 3px;
}

.sentence-pool-preview .pool-label-note {
  color: rgba(232, 220, 200, 0.36);
  font-size: 8px;
  letter-spacing: 0.12em;
}

.sentence-pool-preview .topnow-list {
  gap: 5px;
}

.sentence-pool-preview .topw {
  grid-template-columns: 32px minmax(0, 1fr) 104px;
  grid-template-areas:
    "rank word prob"
    "rank voices prob";
  min-height: 42px;
  gap: 2px 8px;
  padding: 7px 9px;
}

.sentence-pool-preview .topw::before {
  width: var(--pct, 8%);
}

.sentence-pool-preview .topw.first {
  border-color: rgba(212, 184, 120, 0.42);
}

.sentence-pool-preview .topw.finalist {
  background: rgba(184, 154, 78, 0.035);
}

.sentence-pool-preview .topw.wild-tail {
  border-color: rgba(184, 154, 78, 0.1);
  background: rgba(232, 220, 200, 0.018);
}

.sentence-pool-preview .topw.mine {
  border-color: rgba(212, 184, 120, 0.42);
  background: rgba(184, 154, 78, 0.05);
}

.sentence-pool-preview .rk {
  text-align: center;
}

.sentence-pool-preview .mine-star {
  display: inline-block;
  margin: 0 0 3px;
}

.sentence-pool-preview .w-main {
  font-size: 22px;
}

.sentence-pool-preview .prob-stack {
  width: 104px;
}

.sentence-pool-preview .draw-pct,
.sentence-pool-preview .wild-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 94px;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid rgba(184, 154, 78, 0.16);
  border-radius: 999px;
  background: rgba(232, 220, 200, 0.045);
  color: rgba(246, 236, 212, 0.86);
  font: 600 9px / 1 Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sentence-pool-preview .draw-pct {
  gap: 5px;
}

.sentence-pool-preview .draw-pct strong {
  color: rgba(246, 236, 212, 0.92);
  font-weight: 600;
}

.sentence-pool-preview .draw-pct em {
  color: var(--module-accent);
  font-size: 8px;
  font-style: normal;
}

.sentence-pool-preview .wild-note {
  color: rgba(232, 220, 200, 0.5);
  font-size: 8px;
}

.sentence-pool-preview .show-more {
  margin: auto 0 11px;
}

@media (max-width: 1220px) {
  .sentence-focus.has-pool {
    grid-template-columns: minmax(540px, 1fr) 284px;
    column-gap: 38px;
  }

  .sentence-focus.has-pool .official-line {
    max-width: min(800px, calc(100vw - 410px));
  }

  .sentence-focus.has-pool .sentence-pool-preview::before {
    left: -20px;
  }
}

@media (max-width: 980px) {
  .sentence-focus.has-pool {
    grid-template-columns: 1fr;
    grid-template-rows: 72px auto auto auto;
    width: min(100%, 720px);
  }

  .sentence-focus.has-pool .sentence-title-only,
  .sentence-focus.has-pool .sentence-official-sheet,
  .sentence-focus.has-pool .sentence-bottom-input,
  .sentence-focus.has-pool .sentence-pool-preview {
    grid-column: 1;
    transform: none;
  }

  .sentence-focus.has-pool .sentence-pool-preview {
    grid-row: 4;
    width: min(640px, calc(100vw - 64px));
    height: auto;
    max-height: 340px;
    margin: 0 auto 16px;
  }

  .sentence-focus.has-pool .sentence-pool-preview::before {
    display: none;
  }

  .sentence-focus.has-pool .official-line,
  .sentence-focus:not(.has-pool) .official-line {
    max-width: min(720px, calc(100vw - 64px));
    max-height: clamp(360px, 42vh, 500px);
  }

  .sentence-focus.has-pool .sentence-bottom-input.voice-given {
    transform: translateY(-24px);
  }
}

@media (max-width: 560px) {
  .sentence-draw-receipt {
    padding: 18px 16px 22px;
  }

  .sentence-draw-receipt .done-kicker {
    font-size: 10px;
    letter-spacing: 0.2em;
  }

  .sentence-draw-receipt .done-word {
    font-size: clamp(42px, 14vw, 58px);
  }
}

/* V013k - Journey module and delayed reveal tour. */
.ritual-room.journey {
  --module-accent: #9aa16a;
  --module-accent-soft: rgba(154, 161, 106, 0.48);
  --module-accent-faint: rgba(154, 161, 106, 0.14);
}

.ritual-room .module-menu {
  max-width: 820px;
}

.inline-seal {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 82px;
  color: rgba(232, 220, 200, 0.7);
  text-align: center;
}

.inline-seal span {
  color: var(--module-accent);
  font: 600 11px / 1 Arial, sans-serif;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.inline-seal strong {
  color: #f6ecd4;
  font: 300 28px / 1 Georgia, serif;
  letter-spacing: 0;
}

.sentence-bottom-input.just-submitted .inline-seal {
  animation: voiceSealPulse 0.95s ease both;
}

.ritual-confirmation {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 50%, rgba(12, 14, 15, 0.72), rgba(12, 14, 15, 0.12) 42%, transparent 68%);
  pointer-events: none;
  animation: ritual-confirmation-fade 0.98s ease both;
}

.ritual-confirmation div {
  display: grid;
  place-items: center;
  gap: 12px;
  min-width: min(440px, 80vw);
  padding: 30px 34px;
  border: 1px solid var(--module-accent-soft);
  border-radius: 999px;
  background: rgba(9, 11, 12, 0.84);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28), 0 0 42px var(--module-accent-faint);
}

.ritual-confirmation span {
  color: rgba(232, 220, 200, 0.46);
  font: 600 10px / 1 Arial, sans-serif;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.ritual-confirmation strong {
  color: var(--module-accent);
  font: 400 clamp(30px, 4vw, 52px) / 1 Georgia, serif;
  letter-spacing: 0;
}

@keyframes ritual-confirmation-fade {
  0% {
    opacity: 0;
    transform: scale(0.985);
  }
  18%,
  72% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.018);
  }
}

.journey-panel {
  width: min(100%, 1220px);
}

.ritual-room.journey .room-content {
  min-height: calc(100vh - 178px);
  padding: 34px 40px 126px;
}

.journey-layout {
  display: grid;
  grid-template-columns: minmax(620px, 820px) minmax(260px, 340px);
  gap: clamp(28px, 3vw, 52px);
  align-items: stretch;
}

.journey-map-card,
.journey-choice-card {
  position: relative;
  border: 1px solid rgba(154, 161, 106, 0.24);
  background: rgba(9, 12, 13, 0.48);
  box-shadow: inset 0 0 0 1px rgba(246, 236, 212, 0.025), 0 22px 56px rgba(0, 0, 0, 0.18);
}

.journey-map-card {
  min-height: clamp(430px, 54vh, 620px);
  padding: 16px;
}

.journey-map-shell {
  position: relative;
  height: 100%;
  min-height: 410px;
  overflow: hidden;
}

.journey-map-caption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  color: rgba(232, 220, 200, 0.48);
  font: 600 10px / 1 Arial, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.journey-map-caption strong {
  color: var(--module-accent);
  font-weight: 600;
}

.journey-choice-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: clamp(430px, 54vh, 620px);
  padding: 24px;
}

.journey-kicker {
  color: var(--module-accent);
  font: 600 10px / 1 Arial, sans-serif;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.journey-choice-card h3 {
  margin: 18px 0 14px;
  color: #f6ecd4;
  font: 400 32px / 1.08 Georgia, serif;
  letter-spacing: 0;
}

.journey-choice-card p {
  margin: 0 0 22px;
  color: rgba(232, 220, 200, 0.58);
  font: 400 15px / 1.48 Georgia, serif;
}

.journey-selected {
  display: grid;
  gap: 8px;
  margin-top: auto;
  border-top: 1px solid rgba(154, 161, 106, 0.22);
  border-bottom: 1px solid rgba(154, 161, 106, 0.16);
  padding: 20px 0;
}

.journey-selected span,
.journey-selected em,
.journey-rules span {
  color: rgba(232, 220, 200, 0.42);
  font: 600 10px / 1.2 Arial, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.journey-selected strong {
  color: rgba(232, 220, 200, 0.76);
  font: 400 28px / 1.08 Georgia, serif;
  letter-spacing: 0;
}

.journey-selected.has-choice strong {
  color: #f6ecd4;
}

.journey-selected em {
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: none;
}

.journey-rules {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.journey-rules span {
  display: flex;
  align-items: center;
  gap: 10px;
}

.journey-rules span::before {
  width: 5px;
  height: 5px;
  content: "";
  border-radius: 50%;
  background: var(--module-accent);
}

/* V013l - TheJourney uses real interactive map tiles and place-to-place choices. */
.journey-map-card {
  overflow: hidden;
  padding: 0;
}

.journey-map-shell.real-map {
  position: relative;
  min-height: clamp(500px, 58vh, 680px);
  background: #090d10;
}

.journey-map-shell.real-map::after {
  position: absolute;
  inset: 0;
  z-index: 430;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 10, 11, 0.28), transparent 24%, transparent 72%, rgba(8, 10, 11, 0.42)),
    radial-gradient(circle at 50% 50%, transparent 54%, rgba(8, 10, 11, 0.58));
}

.journey-map-live {
  position: absolute;
  inset: 0;
  z-index: 1;
  min-height: inherit;
  background: #090d10;
}

.journey-map-fallback {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  color: rgba(232, 220, 200, 0.46);
  font: 600 11px / 1 Arial, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.journey-map-shell.map-ready .journey-map-fallback {
  display: none;
}

.journey-map-shell .leaflet-container {
  width: 100%;
  height: 100%;
  min-height: inherit;
  background: #090d10;
  color: #e8dcc8;
  font-family: Arial, sans-serif;
}

.journey-map-shell .leaflet-tile {
  filter: saturate(0.74) contrast(1.05) brightness(0.72);
}

.journey-map-shell .leaflet-control-zoom {
  overflow: hidden;
  border: 1px solid rgba(154, 161, 106, 0.24);
  border-radius: 0;
  box-shadow: none;
}

.journey-map-shell .leaflet-control-zoom a {
  width: 34px;
  height: 34px;
  border: 0;
  border-bottom: 1px solid rgba(154, 161, 106, 0.2);
  background: rgba(7, 10, 12, 0.84);
  color: rgba(232, 220, 200, 0.72);
  line-height: 34px;
}

.journey-map-shell .leaflet-control-zoom a:hover {
  background: rgba(154, 161, 106, 0.18);
  color: #f6ecd4;
}

.journey-map-shell .leaflet-control-attribution,
.journey-map-shell .leaflet-control-scale-line {
  border-color: rgba(154, 161, 106, 0.22);
  background: rgba(7, 10, 12, 0.72);
  color: rgba(232, 220, 200, 0.52);
  font: 9px / 1.4 Arial, sans-serif;
}

.journey-route-line {
  filter: drop-shadow(0 0 10px rgba(224, 230, 153, 0.34));
  cursor: pointer;
}

.journey-place-marker,
.journey-traveler-marker {
  border: 0;
  background: transparent;
}

.journey-place-marker {
  display: grid;
  place-items: center;
}

.journey-place-marker::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  content: "";
  border: 1px solid rgba(246, 236, 212, 0.74);
  border-radius: 50%;
  background: #9aa16a;
  box-shadow: 0 0 18px rgba(224, 230, 153, 0.6);
  transform: translate(-50%, -50%);
}

.journey-place-marker span {
  position: absolute;
  left: 50%;
  bottom: calc(50% + 13px);
  min-width: 96px;
  max-width: 150px;
  padding: 7px 10px 6px;
  border: 1px solid rgba(154, 161, 106, 0.34);
  background: rgba(7, 10, 12, 0.84);
  color: rgba(246, 236, 212, 0.82);
  font: 600 10px / 1.1 Arial, sans-serif;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  white-space: normal;
  transform: translateX(-50%);
}

.journey-place-marker em {
  position: absolute;
  left: 50%;
  top: calc(50% + 10px);
  color: rgba(232, 220, 200, 0.48);
  font: 600 9px / 1 Arial, sans-serif;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.journey-place-marker.selected::before,
.journey-place-marker.leading::before {
  width: 14px;
  height: 14px;
  background: #d2b66c;
}

.journey-place-marker.selected span {
  border-color: rgba(238, 240, 168, 0.6);
  background: rgba(154, 161, 106, 0.2);
  color: #f6ecd4;
}

.journey-traveler-marker span {
  position: absolute;
  left: 0;
  top: 50%;
  width: 18px;
  height: 18px;
  border: 2px solid #f6ecd4;
  border-radius: 50%;
  background: #d2b66c;
  box-shadow: 0 0 22px rgba(210, 182, 108, 0.72);
  transform: translateY(-50%);
}

.journey-traveler-marker span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  content: "";
  border-radius: 50%;
  background: #090d10;
  transform: translate(-50%, -50%);
}

.journey-traveler-marker strong {
  position: absolute;
  left: 24px;
  top: 50%;
  padding: 6px 9px;
  border: 1px solid rgba(210, 182, 108, 0.38);
  background: rgba(7, 10, 12, 0.86);
  color: #f6ecd4;
  font: 600 10px / 1 Arial, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: translateY(-50%);
}

.journey-map-shell.real-map .journey-map-caption {
  z-index: 440;
  padding: 9px 11px;
  background: rgba(7, 10, 12, 0.66);
  backdrop-filter: blur(8px);
}

.journey-choice-card {
  background:
    linear-gradient(180deg, rgba(154, 161, 106, 0.05), rgba(154, 161, 106, 0.015)),
    rgba(9, 12, 13, 0.58);
}

.journey-selected.has-choice {
  border-color: rgba(154, 161, 106, 0.38);
}

.reveal-final {
  place-content: center;
  overflow: auto;
  min-height: 100vh;
  padding: clamp(34px, 5vw, 72px);
}

.reveal-page-frame {
  align-items: center;
  justify-items: center;
}

.reveal-page {
  position: relative;
  z-index: 1;
  width: min(100%, 1180px);
  margin: auto;
  text-align: center;
}

.reveal-page.sentence-reveal {
  --module-accent: #d4b878;
  --module-accent-soft: rgba(212, 184, 120, 0.5);
  --module-accent-faint: rgba(212, 184, 120, 0.15);
}

.reveal-page.canvas-reveal,
.reveal-page.pact-reveal {
  --module-accent: #b75a49;
  --module-accent-soft: rgba(183, 90, 73, 0.5);
  --module-accent-faint: rgba(183, 90, 73, 0.16);
}

.reveal-page.review-reveal {
  --module-accent: #78a06f;
  --module-accent-soft: rgba(120, 160, 111, 0.5);
  --module-accent-faint: rgba(120, 160, 111, 0.16);
}

.reveal-page.clock-reveal {
  --module-accent: #6595bf;
  --module-accent-soft: rgba(101, 149, 191, 0.5);
  --module-accent-faint: rgba(101, 149, 191, 0.16);
}

.reveal-page.journey-reveal {
  --module-accent: #9aa16a;
  --module-accent-soft: rgba(154, 161, 106, 0.48);
  --module-accent-faint: rgba(154, 161, 106, 0.14);
}

.reveal-page h1 {
  margin: 0 0 clamp(26px, 4vh, 44px);
  color: #f6ecd4;
  font: 400 clamp(52px, 6vw, 88px) / 0.95 Georgia, serif;
  letter-spacing: 0;
}

.reveal-sentence-layout,
.journey-reveal-layout {
  display: grid;
  grid-template-columns: minmax(380px, 590px) clamp(300px, 28vw, 380px);
  gap: clamp(28px, 3.4vw, 56px);
  align-items: stretch;
  text-align: left;
}

.reveal-sentence-layout .sentence-draw-receipt {
  align-self: start;
}

.reveal-sentence-layout .sentence-pool-preview {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: 100%;
  height: auto;
  min-height: 590px;
  max-height: none;
  margin: 0;
  padding: 19px 17px;
  transform: none;
}

.reveal-card {
  display: grid;
  gap: 16px;
  width: min(100%, 660px);
  margin: 0 auto;
  border: 1px solid rgba(184, 154, 78, 0.26);
  border-radius: 22px;
  background: rgba(9, 11, 12, 0.62);
  padding: clamp(22px, 3vw, 34px);
  box-shadow: inset 0 0 0 1px rgba(255, 245, 220, 0.035), 0 22px 56px rgba(0, 0, 0, 0.2);
  text-align: left;
}

.reveal-stat {
  display: grid;
  grid-template-columns: minmax(120px, 0.42fr) 1fr;
  align-items: baseline;
  gap: 18px;
  border-bottom: 1px solid rgba(184, 154, 78, 0.14);
  padding-bottom: 13px;
}

.reveal-stat.wide {
  grid-template-columns: 1fr;
  gap: 7px;
}

.reveal-stat span,
.reveal-countdown,
.reveal-nav span {
  color: rgba(232, 220, 200, 0.42);
  font: 600 10px / 1.2 Arial, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.reveal-stat strong {
  color: #f6ecd4;
  font: 400 25px / 1.1 Georgia, serif;
  letter-spacing: 0;
}

.reveal-countdown strong {
  color: var(--gold);
}

.reveal-pixel-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 4px 0 12px;
}

.reveal-pixel-strip i {
  display: block;
  min-height: 48px;
  border: 1px solid rgba(246, 236, 212, 0.18);
  background: var(--slot-color);
  box-shadow: inset 0 0 0 8px rgba(9, 11, 12, 0.5);
}

.review-bars {
  display: grid;
  gap: 9px;
  margin: 6px 0 10px;
}

.review-bars div {
  display: grid;
  grid-template-columns: 24px 1fr 42px;
  align-items: center;
  gap: 10px;
  color: rgba(232, 220, 200, 0.62);
  font: 600 10px / 1 Arial, sans-serif;
  letter-spacing: 0.08em;
}

.review-bars i {
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--module-accent, var(--gold)) var(--pct), rgba(232, 220, 200, 0.12) var(--pct));
}

.review-reveal-card blockquote {
  margin: 2px 0;
  color: rgba(232, 220, 200, 0.6);
  font: italic 17px / 1.35 Georgia, serif;
}

.clock-reveal-card {
  place-items: center;
  text-align: center;
}

.clock-orb {
  display: grid;
  place-items: center;
  width: 210px;
  aspect-ratio: 1;
  margin-bottom: 12px;
  border: 1px solid rgba(101, 149, 191, 0.34);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 28%, rgba(197, 217, 225, 0.18), rgba(29, 48, 65, 0.84) 54%, rgba(8, 13, 18, 0.98));
  box-shadow: 0 0 60px rgba(101, 149, 191, 0.16);
}

.clock-orb strong {
  color: #d8e4e5;
  font: 400 64px / 0.9 Georgia, serif;
}

.clock-orb span {
  color: rgba(216, 228, 229, 0.48);
  font: 600 10px / 1 Arial, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.journey-reveal-layout {
  grid-template-columns: minmax(520px, 760px) minmax(280px, 340px);
}

.journey-reveal-layout .journey-map-shell {
  min-height: 520px;
  border: 1px solid rgba(154, 161, 106, 0.24);
  background: rgba(9, 12, 13, 0.48);
}

.journey-result-card {
  align-content: start;
  border-color: rgba(154, 161, 106, 0.28);
}

.journey-result-card p,
.pact-reveal-card p {
  margin: 6px 0 0;
  color: rgba(232, 220, 200, 0.58);
  font: 400 16px / 1.45 Georgia, serif;
}

.pact-reveal-card {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pact-reveal-card .wide,
.pact-reveal-card .final-note {
  grid-column: 1 / -1;
}

.reveal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4vw, 52px);
  margin-top: clamp(24px, 4vh, 44px);
}

.reveal-nav .nav-arrow {
  position: static;
  border: 1px solid rgba(184, 154, 78, 0.28);
  border-radius: 999px;
  padding: 12px 18px;
}

.reveal-nav .return-button {
  margin-top: 0;
}

@media (max-width: 1040px) {
  .journey-layout,
  .journey-reveal-layout,
  .reveal-sentence-layout {
    grid-template-columns: 1fr;
  }

  .journey-choice-card {
    min-height: 0;
  }

  .reveal-sentence-layout .sentence-pool-preview {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .ritual-room.journey .room-content {
    padding: 24px 22px 132px;
  }

  .journey-map-card,
  .journey-choice-card {
    padding: 14px;
  }

  .journey-map-shell {
    min-height: 340px;
  }

  .journey-map-caption {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .journey-choice-card h3 {
    font-size: 25px;
  }

  .reveal-final {
    padding: 28px 18px;
  }

  .reveal-card,
  .pact-reveal-card {
    grid-template-columns: 1fr;
  }

  .reveal-stat {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .reveal-nav {
    flex-wrap: wrap;
  }
}

/* V013m - refined sentence arrival, bottom frame, and annual day grid. */
.ritual-room.sentence::after {
  inset: 14px 18px 18px;
  border-color: rgba(212, 184, 120, 0.42);
  outline: 0;
  box-shadow:
    inset 0 0 0 1px rgba(212, 184, 120, 0.16),
    inset 0 -56px 0 rgba(6, 8, 9, 0.14);
}

.ritual-room.sentence .room-content {
  padding: 62px 40px 114px;
}

.sentence-focus {
  grid-template-rows: 112px minmax(260px, 1fr) 104px;
  min-height: calc(100vh - 252px);
}

.sentence-focus.has-pool {
  grid-template-rows: 112px auto auto;
}

.sentence-title-only {
  gap: 10px;
}

.sentence-title-only h2 {
  justify-self: center;
}

.sentence-tagline {
  margin: 0;
  color: rgba(212, 184, 120, 0.82);
  font: 600 12px / 1.2 Arial, sans-serif;
  letter-spacing: 0.16em;
  text-align: center;
  text-shadow: 0 0 20px rgba(212, 184, 120, 0.1);
}

.sentence-focus:not(.has-pool) .official-line {
  max-height: clamp(450px, 48vh, 600px);
}

.sentence-month.current-month.reveal-month .sentence-word-unit.current-word {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(12px);
  animation: sentenceMonthWordReveal 0.78s cubic-bezier(0.19, 1, 0.22, 1) forwards;
  animation-delay: calc(0.18s + var(--reveal-index, 0) * 0.095s);
  will-change: opacity, filter, transform;
}

.sentence-month.current-month.reveal-month .sentence-word-unit.current-last-word {
  position: relative;
}

.sentence-month.current-month.reveal-month .sentence-word-unit.current-last-word::after {
  position: absolute;
  right: 0.02em;
  bottom: -0.09em;
  left: 0.02em;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 230, 164, 0.78), transparent);
  opacity: 0;
  transform: scaleX(0.16);
  transform-origin: center;
  animation: sentenceLastWordTrace 2.7s ease-in-out calc(0.86s + var(--reveal-index, 0) * 0.095s) infinite;
  pointer-events: none;
}

.sentence-month.current-month.reveal-month .current-last-word .official-word {
  color: #fff4d5;
  animation: sentenceLastWordBreath 2.7s ease-in-out calc(0.8s + var(--reveal-index, 0) * 0.095s) infinite;
}

.sentence-month.current-month.reveal-month .current-last-word .sentence-live-star {
  top: 0.12em;
  color: #ffe6a4;
  animation: sentencePendingGlow 2.4s ease-in-out infinite;
}

.sentence-word-unit.sentence-word-reveal {
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(12px);
  animation: sentenceMonthWordReveal 0.72s cubic-bezier(0.19, 1, 0.22, 1) forwards;
  animation-delay: calc(0.12s + var(--reveal-index, 0) * 0.038s);
  vertical-align: baseline;
  will-change: opacity, filter, transform;
}

.sentence-word-unit.current-last-word,
.sentence-word-unit.sentence-preview-match {
  position: relative;
  z-index: 2;
}

.sentence-word-unit.current-last-word::after {
  position: absolute;
  right: 0.02em;
  bottom: -0.09em;
  left: 0.02em;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 230, 164, 0.78), transparent);
  opacity: 0;
  transform: scaleX(0.16);
  transform-origin: center;
  animation: sentenceLastWordTrace 2.7s ease-in-out calc(0.78s + var(--reveal-index, 0) * 0.038s) infinite;
  pointer-events: none;
}

.sentence-word-unit.current-last-word .official-word {
  color: #fff4d5;
  animation: sentenceLastWordBreath 2.7s ease-in-out calc(0.72s + var(--reveal-index, 0) * 0.038s) infinite;
}

.sentence-word-unit.current-last-word .sentence-live-star {
  color: #ffe6a4;
  animation: sentencePendingGlow 2.4s ease-in-out infinite;
}

.sentence-word-unit.sentence-preview-match::before {
  position: absolute;
  inset: 0.02em -0.12em -0.08em;
  z-index: -1;
  content: "";
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(255, 230, 164, 0.24), rgba(255, 230, 164, 0.04) 62%, transparent 72%);
  box-shadow: 0 0 30px rgba(255, 230, 164, 0.22);
  pointer-events: none;
}

.sentence-word-unit.sentence-preview-match .official-word {
  border-bottom-color: rgba(255, 230, 164, 0.74);
  color: #fff7de;
  text-shadow:
    0 0 10px rgba(255, 230, 164, 0.62),
    0 0 28px rgba(212, 184, 120, 0.32);
}

.sentence-live-pending {
  line-height: 1;
  vertical-align: baseline;
}

.sentence-nav {
  right: 48px;
  bottom: 73px;
  left: 48px;
  z-index: 6;
}

.sentence-nav .nav-arrow {
  justify-content: center;
  min-width: 132px;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid var(--module-accent-soft);
  border-radius: 999px;
  background: rgba(6, 8, 9, 0.7);
  color: var(--module-accent);
  opacity: 1;
  font: 650 11px / 1 Arial, sans-serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.22),
    inset 0 0 0 1px rgba(255, 245, 220, 0.05);
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.sentence-nav .nav-arrow:hover,
.sentence-nav .nav-arrow:focus-visible {
  border-color: rgba(232, 220, 200, 0.68);
  color: #f6ecd4;
  outline: none;
  transform: translateY(-1px);
}

.sentence-nav .nav-arrow.next {
  border-color: rgba(212, 184, 120, 0.68);
  background: linear-gradient(180deg, #d7bd78 0%, #b99a4e 100%);
  color: #11100c;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.sentence-nav .nav-arrow.next:hover,
.sentence-nav .nav-arrow.next:focus-visible {
  color: #070807;
  filter: brightness(1.05);
}

.sentence-nav .nav-arrow span {
  font-size: 1em;
  transform: translateY(-0.02em);
}

.annual-track.annual-days {
  display: grid;
  grid-template-columns: repeat(var(--chapter-days, 181), minmax(1px, 1fr));
  gap: 1px;
  height: 8px;
  overflow: hidden;
  background: transparent;
  border-radius: 2px;
}

.annual-track.annual-days > i {
  display: block;
  width: auto !important;
  min-width: 1px;
  height: 100%;
  background: rgba(212, 184, 120, 0.13);
  opacity: 1;
}

.annual-track.annual-days > i.past {
  background: var(--module-accent);
  opacity: 0.62;
}

.annual-track.annual-days > i.today {
  background: #f6ecd4;
  opacity: 1;
  box-shadow: 0 0 10px rgba(212, 184, 120, 0.6);
}

.ritual-room.sentence .annual-progress {
  right: 48px;
  bottom: 28px;
  left: 48px;
  z-index: 6;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  color: rgba(232, 220, 200, 0.5);
  font: 650 10px / 1 Arial, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@keyframes sentenceMonthWordReveal {
  0% {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(12px);
  }

  72% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(-1px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes sentenceLastWordBreath {
  0%,
  100% {
    text-shadow:
      0 16px 40px rgba(0, 0, 0, 0.36),
      0 0 9px rgba(255, 230, 164, 0.22);
  }

  50% {
    text-shadow:
      0 16px 40px rgba(0, 0, 0, 0.36),
      0 0 16px rgba(255, 230, 164, 0.54),
      0 0 34px rgba(212, 184, 120, 0.28);
  }
}

@keyframes sentenceLastWordTrace {
  0%,
  100% {
    opacity: 0;
    transform: scaleX(0.16);
  }

  38%,
  58% {
    opacity: 0.72;
    transform: scaleX(1);
  }
}

@media (max-width: 980px) {
  .ritual-room.sentence::after {
    inset: 12px 14px 16px;
  }

  .ritual-room.sentence .room-content {
    padding: 74px 24px 126px;
  }

  .sentence-focus {
    grid-template-rows: 102px minmax(260px, 1fr) 102px;
  }

  .sentence-tagline {
    font-size: 11px;
    letter-spacing: 0.13em;
  }

  .sentence-nav {
    right: 28px;
    bottom: 76px;
    left: 28px;
  }

  .sentence-nav .nav-arrow {
    min-width: 116px;
    min-height: 42px;
    padding: 0 18px;
  }

  .annual-track.annual-days {
    gap: 0;
    height: 6px;
  }

  .ritual-room.sentence .annual-progress {
    right: 28px;
    bottom: 30px;
    left: 28px;
    gap: 10px;
  }
}

@media (max-width: 560px) {
  .ritual-room.sentence .room-content {
    padding-right: 16px;
    padding-left: 16px;
  }

  .sentence-title-only h2 {
    font-size: 52px;
  }

  .sentence-tagline {
    max-width: 260px;
    line-height: 1.35;
  }

  .sentence-nav {
    right: 18px;
    left: 18px;
  }

  .sentence-nav .nav-arrow {
    min-width: 96px;
    padding: 0 14px;
    font-size: 10px;
  }

  .ritual-room.sentence .annual-progress {
    right: 18px;
    left: 18px;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    font-size: 9px;
  }
}

/* V013n - global ritual chrome and richer word hover. */
.ritual-room::after {
  position: absolute;
  inset: 14px 18px 18px;
  z-index: 0;
  content: "";
  border: 1px solid var(--module-accent-soft);
  outline: 1px solid var(--module-accent-faint);
  outline-offset: -9px;
  box-shadow: none;
  pointer-events: none;
}

.ritual-room.sentence::after {
  border-color: rgba(212, 184, 120, 0.48);
  outline: 1px solid rgba(212, 184, 120, 0.2);
  outline-offset: -9px;
  box-shadow: none;
}

.ritual-room .room-nav {
  right: 48px;
  bottom: 73px;
  left: 48px;
  z-index: 6;
  align-items: center;
  pointer-events: none;
}

.ritual-room .room-nav .nav-arrow {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 132px;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid var(--module-accent-soft);
  border-radius: 999px;
  background: rgba(6, 8, 9, 0.72);
  color: var(--module-accent);
  opacity: 1;
  font: 650 11px / 1 Arial, sans-serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.22),
    inset 0 0 0 1px rgba(255, 245, 220, 0.05);
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, transform 0.18s ease, filter 0.18s ease;
}

.ritual-room .room-nav .nav-arrow:hover,
.ritual-room .room-nav .nav-arrow:focus-visible {
  border-color: rgba(232, 220, 200, 0.68);
  color: #f6ecd4;
  outline: none;
  transform: translateY(-1px);
}

.ritual-room .room-nav .nav-arrow.next {
  border-color: var(--module-accent-soft);
  background: var(--module-accent);
  color: #080807;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.ritual-room .room-nav .nav-arrow.next:hover,
.ritual-room .room-nav .nav-arrow.next:focus-visible {
  color: #050504;
  filter: brightness(1.05);
}

.ritual-room .room-nav .nav-arrow span {
  display: inline-block;
  font-size: 1em;
  line-height: 1;
  transform: translateY(-0.02em);
}

.ritual-room .room-nav .validation-area {
  bottom: 0;
  pointer-events: auto;
}

.ritual-room .room-nav .give-button {
  min-width: 230px;
  min-height: 44px;
  border-color: var(--module-accent-soft);
  border-radius: 999px;
  background: rgba(6, 8, 9, 0.58);
  color: var(--module-accent);
  font: 650 11px / 1 Arial, sans-serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px rgba(255, 245, 220, 0.05);
}

.ritual-room .room-nav .give-button:hover,
.ritual-room .room-nav .give-button.given {
  background: var(--module-accent);
  color: #080807;
}

.ritual-room .annual-progress {
  right: 48px;
  bottom: 28px;
  left: 48px;
  z-index: 6;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  color: var(--module-accent);
  font: 650 10px / 1 Arial, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.official-word .official-word-date {
  bottom: calc(100% + 0.28em);
  display: grid !important;
  gap: 3px;
  min-width: 132px;
  max-width: 220px;
  padding: 8px 12px 9px;
  border-color: rgba(212, 184, 120, 0.5);
  background:
    linear-gradient(180deg, rgba(212, 184, 120, 0.07), rgba(212, 184, 120, 0.02)),
    rgba(6, 8, 9, 0.92);
  color: rgba(232, 220, 200, 0.58);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(255, 245, 220, 0.04) inset;
  letter-spacing: 0.16em;
}

.official-word .official-word-date::after {
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 8px;
  height: 8px;
  content: "";
  border-right: 1px solid rgba(212, 184, 120, 0.48);
  border-bottom: 1px solid rgba(212, 184, 120, 0.48);
  background: rgba(6, 8, 9, 0.92);
  transform: translateX(-50%) rotate(45deg);
}

.official-word .official-word-date span {
  position: static;
  width: auto;
  color: rgba(232, 220, 200, 0.52);
  font: 650 8px / 1 Arial, sans-serif;
  letter-spacing: 0.18em;
  opacity: 1;
  text-transform: uppercase;
  transform: none;
}

.official-word .official-word-date strong {
  color: #f6ecd4;
  font: 650 11px / 1 Arial, sans-serif;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.official-word:hover,
.official-word:focus-visible {
  color: var(--module-accent);
}

@media (max-width: 980px) {
  .ritual-room::after {
    inset: 12px 14px 16px;
    outline-offset: -7px;
  }

  .ritual-room .room-nav {
    right: 28px;
    bottom: 76px;
    left: 28px;
  }

  .ritual-room .room-nav .nav-arrow {
    min-width: 116px;
    min-height: 42px;
    padding: 0 18px;
  }

  .ritual-room .annual-progress {
    right: 28px;
    bottom: 30px;
    left: 28px;
    gap: 10px;
  }
}

@media (max-width: 560px) {
  .ritual-room .room-nav {
    right: 18px;
    left: 18px;
  }

  .ritual-room .room-nav .nav-arrow {
    min-width: 96px;
    padding: 0 14px;
    font-size: 10px;
  }

  .ritual-room .room-nav .give-button {
    min-width: min(220px, calc(100vw - 200px));
    font-size: 9px;
  }

  .ritual-room .annual-progress {
    right: 18px;
    left: 18px;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    font-size: 9px;
  }

  .official-word .official-word-date {
    min-width: 118px;
    padding: 7px 10px;
  }
}

/* V013o - TheSentence header becomes the fixed chrome reference. */
.ritual-room .ritual-header {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  z-index: 7;
  align-items: flex-start;
  gap: 24px;
  min-height: 84px;
  padding: 30px 42px 0;
}

.ritual-room .header-brand {
  min-width: 230px;
  gap: 8px;
}

.ritual-room .wordmark {
  color: inherit;
  font: 400 26px / 1 Georgia, serif;
  letter-spacing: 0;
}

.ritual-room .countdown {
  gap: 8px;
  color: var(--module-accent);
  font: 400 12px / 1 monospace;
  letter-spacing: 0.1em;
}

.ritual-room .countdown span,
.ritual-room .countdown small {
  color: rgba(129, 122, 109, 0.92);
  font-size: 10px;
}

.ritual-room .module-menu {
  position: absolute;
  top: 30px;
  left: 50%;
  width: max-content;
  max-width: min(820px, calc(100vw - 560px));
  margin: 0;
  gap: 10px;
  transform: translateX(-50%);
}

.ritual-room .module-menu button {
  padding: 9px 8px;
  color: inherit;
  font: 400 10.5px / 1 monospace;
  letter-spacing: 0.06em;
}

.ritual-room .account-button {
  min-width: 116px;
  min-height: 36px;
  padding: 0 18px;
  border-color: var(--module-accent-soft);
  color: var(--module-accent);
  font: 650 11px / 1 Arial, sans-serif;
  letter-spacing: 0.15em;
}

.ritual-room:not(.sentence)::after {
  display: none;
  content: none;
}

.ritual-room.sentence::after {
  display: block;
  content: "";
}

@media (max-width: 1120px) {
  .ritual-room .module-menu {
    max-width: min(700px, calc(100vw - 360px));
  }
}

@media (max-width: 980px) {
  .ritual-room .ritual-header {
    min-height: 128px;
    padding: 22px 24px 0;
  }

  .ritual-room .module-menu {
    position: static;
    width: auto;
    max-width: 720px;
    margin: 0 auto;
    transform: none;
  }
}

@media (max-width: 560px) {
  .ritual-room .ritual-header {
    min-height: 138px;
    padding: 20px 18px 0;
  }

  .ritual-room .header-brand {
    min-width: 0;
  }

  .ritual-room .wordmark {
    font-size: 22px;
  }

  .ritual-room .account-button {
    min-width: 96px;
    min-height: 34px;
    padding: 0 14px;
    font-size: 10px;
  }
}

/* V013p - header and footer are overlay chrome, independent from modules. */
.ritual-room .ritual-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 30;
  min-height: 114px;
  padding: 30px 42px 0;
  pointer-events: none;
}

.ritual-room .ritual-header button,
.ritual-room .ritual-header nav {
  pointer-events: auto;
}

.ritual-room .room-content,
.ritual-room.sentence .room-content,
.ritual-room.canvas .room-content,
.ritual-room.review .room-content,
.ritual-room.clock .room-content,
.ritual-room.journey .room-content,
.ritual-room.pact .room-content {
  min-height: 100vh;
  padding: 146px 40px 144px;
}

.ritual-room::after,
.ritual-room.sentence::after {
  z-index: 2;
}

.ritual-room:not(.sentence)::after {
  display: none !important;
  content: none !important;
}

.ritual-room .room-nav,
.ritual-room.sentence .sentence-nav {
  right: 48px;
  bottom: 73px;
  left: 48px;
  z-index: 30;
}

.ritual-room .annual-progress,
.ritual-room.sentence .annual-progress {
  right: 48px;
  bottom: 28px;
  left: 48px;
  z-index: 30;
}

@media (max-width: 980px) {
  .ritual-room .ritual-header {
    min-height: 128px;
    padding: 22px 24px 0;
  }

  .ritual-room .room-content,
  .ritual-room.sentence .room-content,
  .ritual-room.canvas .room-content,
  .ritual-room.review .room-content,
  .ritual-room.clock .room-content,
  .ritual-room.journey .room-content,
  .ritual-room.pact .room-content {
    padding: 150px 24px 150px;
  }

  .ritual-room .room-nav,
  .ritual-room.sentence .sentence-nav {
    right: 28px;
    bottom: 76px;
    left: 28px;
  }

  .ritual-room .annual-progress,
  .ritual-room.sentence .annual-progress {
    right: 28px;
    bottom: 30px;
    left: 28px;
  }
}

@media (max-width: 560px) {
  .ritual-room .ritual-header {
    min-height: 138px;
    padding: 20px 18px 0;
  }

  .ritual-room .room-content,
  .ritual-room.sentence .room-content,
  .ritual-room.canvas .room-content,
  .ritual-room.review .room-content,
  .ritual-room.clock .room-content,
  .ritual-room.journey .room-content,
  .ritual-room.pact .room-content {
    padding: 156px 16px 150px;
  }

  .ritual-room .room-nav,
  .ritual-room.sentence .sentence-nav,
  .ritual-room .annual-progress,
  .ritual-room.sentence .annual-progress {
    right: 18px;
    left: 18px;
  }
}

/* V013q - TheSentence-style word detail card. */
.ritual-word-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 80;
  width: min(360px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  padding: 13px 15px 13px;
  border: 1px solid rgba(212, 184, 120, 0.28);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(12, 15, 20, 0.97), rgba(7, 9, 12, 0.96)),
    rgba(7, 9, 12, 0.96);
  color: #f6ecd4;
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.52),
    inset 0 0 0 1px rgba(255, 245, 220, 0.035);
  opacity: 0;
  pointer-events: none;
  text-align: left;
  transform: translateY(6px);
  transition: opacity 0.13s ease, transform 0.13s ease;
}

.ritual-word-tooltip.show {
  opacity: 1;
  transform: translateY(0);
}

.ritual-word-tooltip .word-tip-k {
  margin: 0 0 8px;
  color: var(--module-accent);
  font: 650 10px / 1 Arial, sans-serif;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.ritual-word-tooltip .word-tip-word {
  max-width: 100%;
  margin: 0 0 10px;
  overflow: hidden;
  color: #f6ecd4;
  font: 300 32px / 0.95 Georgia, serif;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ritual-word-tooltip .word-tip-note {
  margin: 0 0 12px;
  color: rgba(232, 220, 200, 0.72);
  font: 400 12px / 1 Georgia, serif;
  letter-spacing: 0.05em;
}

.ritual-word-tooltip .word-tip-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 11px;
}

.ritual-word-tooltip .word-tip-stat {
  min-height: 60px;
  padding: 9px 9px 8px;
  border: 1px solid rgba(212, 184, 120, 0.22);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(212, 184, 120, 0.045), rgba(212, 184, 120, 0.012)),
    rgba(232, 220, 200, 0.018);
}

.ritual-word-tooltip .word-tip-stat strong {
  display: block;
  margin: 0 0 7px;
  color: var(--module-accent);
  font: 400 14px / 1.05 Georgia, serif;
  letter-spacing: 0.06em;
}

.ritual-word-tooltip .word-tip-stat span {
  display: block;
  color: rgba(185, 181, 214, 0.72);
  font: 600 8.5px / 1.35 Arial, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ritual-word-tooltip .word-tip-rivals {
  color: rgba(232, 220, 200, 0.55);
  font: 400 11.5px / 1.35 Georgia, serif;
  letter-spacing: 0.03em;
}

.official-word[data-word-tooltip] {
  -webkit-user-select: none;
  user-select: none;
}

@media (max-width: 560px) {
  .ritual-word-tooltip {
    padding: 12px 12px 11px;
  }

  .ritual-word-tooltip .word-tip-word {
    font-size: 28px;
  }

  .ritual-word-tooltip .word-tip-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .ritual-word-tooltip .word-tip-stat {
    min-height: 0;
    padding: 8px 9px;
  }
}

/* V013r - every ritual module uses the same fixed viewport chrome. */
.app-shell {
  min-height: 100vh;
  overflow: hidden;
}

.ritual-room {
  isolation: isolate;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}

.ritual-room .ritual-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 40;
  min-height: 114px;
  padding: 30px 42px 0;
  pointer-events: none;
}

.ritual-room .ritual-header button,
.ritual-room .ritual-header nav {
  pointer-events: auto;
}

.ritual-room .room-content,
.ritual-room.sentence .room-content,
.ritual-room.canvas .room-content,
.ritual-room.review .room-content,
.ritual-room.clock .room-content,
.ritual-room.journey .room-content,
.ritual-room.pact .room-content {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 146px 40px 144px;
}

.ritual-room::after,
.ritual-room:not(.sentence)::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
  outline: 0 !important;
}

.ritual-room.sentence::after {
  display: block !important;
  position: absolute;
  inset: 14px 18px 18px;
  z-index: 2;
  content: "" !important;
  border: 1px solid rgba(212, 184, 120, 0.48) !important;
  outline: 1px solid rgba(212, 184, 120, 0.2) !important;
  outline-offset: -9px;
  pointer-events: none;
}

.ritual-room .room-nav,
.ritual-room.sentence .sentence-nav {
  right: 48px;
  bottom: 73px;
  left: 48px;
  z-index: 40;
}

.ritual-room .annual-progress,
.ritual-room.sentence .annual-progress {
  right: 48px;
  bottom: 28px;
  left: 48px;
  z-index: 40;
}

@media (max-width: 980px) {
  .ritual-room .ritual-header {
    min-height: 128px;
    padding: 22px 24px 0;
  }

  .ritual-room .room-content,
  .ritual-room.sentence .room-content,
  .ritual-room.canvas .room-content,
  .ritual-room.review .room-content,
  .ritual-room.clock .room-content,
  .ritual-room.journey .room-content,
  .ritual-room.pact .room-content {
    padding: 150px 24px 150px;
  }

  .ritual-room .room-nav,
  .ritual-room.sentence .sentence-nav {
    right: 28px;
    bottom: 76px;
    left: 28px;
  }

  .ritual-room .annual-progress,
  .ritual-room.sentence .annual-progress {
    right: 28px;
    bottom: 30px;
    left: 28px;
  }
}

@media (max-width: 560px) {
  .ritual-room {
    height: 100svh;
    min-height: 100svh;
  }

  .ritual-room .ritual-header {
    min-height: 138px;
    padding: 20px 18px 0;
  }

  .ritual-room .room-content,
  .ritual-room.sentence .room-content,
  .ritual-room.canvas .room-content,
  .ritual-room.review .room-content,
  .ritual-room.clock .room-content,
  .ritual-room.journey .room-content,
  .ritual-room.pact .room-content {
    padding: 156px 16px 150px;
  }

  .ritual-room .room-nav,
  .ritual-room.sentence .sentence-nav,
  .ritual-room .annual-progress,
  .ritual-room.sentence .annual-progress {
    right: 18px;
    left: 18px;
  }
}

/* V013s - TheCanvas v111 art-wall module. */
.ritual-room.canvas {
  --module-accent: #a3503a;
  --module-accent-soft: rgba(163, 80, 58, 0.42);
  --module-accent-faint: rgba(163, 80, 58, 0.16);
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 248, 230, 0.36), transparent 34%),
    radial-gradient(circle at 16% 74%, rgba(110, 84, 58, 0.1), transparent 28%),
    linear-gradient(90deg, rgba(84, 60, 42, 0.08), transparent 22%, transparent 78%, rgba(84, 60, 42, 0.08)),
    #d9d0c0;
  color: #211d17;
}

.ritual-room.canvas::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background:
    repeating-linear-gradient(0deg, rgba(60, 45, 30, 0.028) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.026) 0 1px, transparent 1px 7px);
  mix-blend-mode: multiply;
  opacity: 0.68;
  pointer-events: none;
}

.ritual-room.canvas .room-content {
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 104px 40px 112px;
}

.canvas-v111-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto auto;
  align-items: center;
  justify-items: center;
  align-content: center;
  gap: clamp(26px, 3vh, 38px);
  width: 100%;
  height: 100%;
  min-height: 0;
}

.canvas-v111-title {
  position: relative;
  z-index: 8;
  align-self: start;
  max-width: none;
  margin: 0 auto;
  text-align: center;
}

.canvas-v111-title h2 {
  margin: 0;
  color: #211d17;
  font: 400 66px / 0.95 Georgia, serif;
  letter-spacing: 0;
  text-shadow: none;
}

.canvas-v111-title p {
  margin: 10px 0 0;
  color: rgba(163, 80, 58, 0.78);
  font: 650 12px / 1.2 Arial, sans-serif;
  letter-spacing: 0.12em;
  text-transform: none;
}

.canvas-v111-layout {
  position: relative;
  align-self: center;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-content: center;
  justify-items: center;
  gap: 0;
  width: min(1180px, 100%);
  min-height: 0;
}

.canvas-stage-real {
  position: relative;
  justify-self: center;
  min-width: 0;
  width: min(700px, max(430px, calc((100vh - 390px) * 0.831)), calc(100vw - 360px));
}

.canvas-v111-layout .canvas-toolbar {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0 0 12px;
  color: rgba(67, 54, 40, 0.72);
  font: 650 10px / 1 Arial, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.canvas-utility-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.canvas-utility-tools span {
  min-width: 34px;
  color: rgba(67, 54, 40, 0.64);
  text-align: center;
}

.canvas-v111-layout .canvas-toolbar button,
.canvas-v111-layout .segmented-control {
  border-color: rgba(87, 67, 45, 0.18);
  background: rgba(238, 229, 210, 0.38);
  color: rgba(45, 34, 25, 0.74);
}

.canvas-v111-layout .canvas-toolbar button {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
}

.canvas-v111-layout .segmented-control {
  overflow: hidden;
  border-radius: 999px;
}

.canvas-v111-layout .segmented-control button {
  border-radius: 0;
}

.canvas-v111-layout .canvas-toolbar button.active,
.canvas-v111-layout .canvas-toolbar button:hover {
  border-color: rgba(163, 80, 58, 0.48);
  background: rgba(163, 80, 58, 0.1);
  color: #a3503a;
}

.canvas-v111-layout .canvas-toolbar button:disabled {
  cursor: default;
  opacity: 0.36;
}

.canvas-v111-layout .canvas-art-mount {
  width: 100%;
  min-width: 0;
  background:
    linear-gradient(180deg, #f8f0df, #efe3ca 44%, #dcccae),
    #efe3ca;
  border-color: rgba(103, 77, 42, 0.36);
  box-shadow:
    0 46px 70px -42px rgba(48, 34, 19, 0.62),
    0 22px 38px -30px rgba(48, 34, 19, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -18px 28px rgba(92, 60, 30, 0.08);
}

.canvas-v111-layout .canvas-art-mount::after {
  z-index: 6;
  inset: 28px;
  border-color: rgba(73, 54, 31, 0.13);
}

.canvas-v111-layout .canvas-art-frame {
  left: 7.95%;
  right: auto;
  top: 6.55%;
  bottom: auto;
  z-index: 2;
  width: 84.45%;
  height: auto;
  aspect-ratio: 41 / 51;
  border: 0;
  background: #fffdf7;
  box-shadow: none;
}

.canvas-v111-layout .ritual-canvas-board {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  background: transparent;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.canvas-v111-layout .ritual-canvas-board.is-pannable {
  cursor: grab;
}

.canvas-v111-layout .ritual-canvas-board.is-panning {
  cursor: grabbing;
}

.ritual-room.canvas .museum-frame-overlay {
  z-index: 7;
}

.ritual-room.canvas .account-button {
  border-color: rgba(163, 80, 58, 0.3);
  background: rgba(236, 224, 204, 0.58);
  color: #a3503a;
  box-shadow:
    0 14px 34px rgba(78, 58, 38, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.ritual-room.canvas .account-button:hover,
.ritual-room.canvas .account-button:focus-visible {
  border-color: rgba(163, 80, 58, 0.52);
  background: rgba(244, 235, 220, 0.72);
}

.ritual-room.canvas .room-nav .nav-arrow:not(.next) {
  border-color: rgba(163, 80, 58, 0.3);
  background: rgba(236, 224, 204, 0.58);
  color: #a3503a;
  box-shadow:
    0 14px 34px rgba(78, 58, 38, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.ritual-room.canvas .room-nav .nav-arrow:not(.next):hover,
.ritual-room.canvas .room-nav .nav-arrow:not(.next):focus-visible {
  border-color: rgba(163, 80, 58, 0.52);
  background: rgba(244, 235, 220, 0.72);
  color: #a3503a;
}

.canvas-daily-reveal {
  position: absolute;
  top: 54px;
  right: calc(100% + 16px);
  z-index: 5;
  display: grid;
  gap: 5px;
  width: 150px;
  padding: 9px 28px 9px 11px;
  border: 1px solid rgba(103, 77, 42, 0.16);
  border-radius: 8px;
  background: rgba(246, 237, 220, 0.44);
  color: #2d2419;
  box-shadow:
    0 10px 24px rgba(74, 50, 28, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.54);
  pointer-events: auto;
  backdrop-filter: blur(5px);
}

.canvas-daily-reveal::before {
  position: absolute;
  top: 38px;
  right: -8px;
  width: 0;
  height: 0;
  content: "";
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 8px solid rgba(246, 237, 220, 0.62);
  filter: drop-shadow(2px 2px 2px rgba(74, 50, 28, 0.07));
  pointer-events: none;
}

.canvas-daily-reveal[hidden] {
  display: none;
}

.canvas-reveal-close {
  position: absolute;
  top: 5px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(70, 48, 31, 0.52);
  font: 600 14px / 1 Arial, sans-serif;
  cursor: pointer;
}

.canvas-reveal-close:hover,
.canvas-reveal-close:focus-visible {
  color: #a3503a;
  outline: none;
}

.canvas-daily-reveal span {
  color: #a3503a;
  font: 750 8px / 1 Arial, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.canvas-daily-reveal strong {
  color: #211d17;
  font: 400 15px / 1.05 Georgia, serif;
  letter-spacing: 0;
}

.canvas-daily-reveal em {
  color: rgba(45, 34, 25, 0.58);
  font: italic 11px / 1.2 Georgia, serif;
}

.canvas-daily-reveal i {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 1px;
  margin-top: 3px;
  background: rgba(103, 77, 42, 0.16);
  transform-origin: left center;
}

.canvas-daily-reveal i b {
  display: block;
  width: 100%;
  height: 100%;
  background: #a3503a;
  transform-origin: left center;
}

.canvas-daily-reveal.playing {
  border-color: rgba(163, 80, 58, 0.24);
  background: rgba(251, 242, 222, 0.62);
}

.canvas-pixel-tooltip {
  position: fixed;
  z-index: 60;
  display: grid;
  gap: 8px;
  width: 258px;
  padding: 11px 13px;
  border: 1px solid rgba(103, 77, 42, 0.18);
  border-radius: 7px;
  background: rgba(253, 250, 242, 0.95);
  color: #211d17;
  box-shadow:
    0 12px 28px rgba(48, 34, 19, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  backdrop-filter: blur(5px);
}

.canvas-pixel-tooltip[hidden] {
  display: none;
}

.canvas-pixel-tooltip.show {
  opacity: 1;
  transform: translateY(0);
}

.canvas-pixel-tooltip-head {
  display: grid;
  grid-template-columns: 14px 1fr;
  align-items: center;
  gap: 9px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(103, 77, 42, 0.16);
}

.canvas-pixel-tooltip-head > span {
  width: 14px;
  height: 14px;
  background: var(--pixel-color);
}

.canvas-pixel-tooltip-head em {
  display: block;
  margin-bottom: 4px;
  color: #a3503a;
  font: 750 8px / 1 Arial, sans-serif;
  font-style: normal;
  letter-spacing: 0.22em;
}

.canvas-pixel-tooltip-head strong {
  display: block;
  color: #211d17;
  font: 400 16px / 1 Georgia, serif;
  letter-spacing: 0;
}

.canvas-pixel-tooltip-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 8px;
  align-items: baseline;
}

.canvas-pixel-tooltip-row span {
  color: rgba(67, 54, 40, 0.62);
  font: 650 9px / 1.2 Arial, sans-serif;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.canvas-pixel-tooltip-row b {
  color: #211d17;
  font: 400 13px / 1.18 Georgia, serif;
  letter-spacing: 0;
  text-align: right;
  white-space: nowrap;
}

.canvas-v111-layout .canvas-cartel {
  grid-template-columns: 1fr auto;
  width: 100%;
  min-width: 0;
  margin-top: 10px;
  padding-top: 8px;
  border-color: rgba(73, 54, 31, 0.16);
  color: rgba(45, 34, 25, 0.56);
  font: 650 10px / 1 Arial, sans-serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.canvas-hand-etched {
  position: absolute;
  left: calc(50% + min(350px, max(215px, calc((100vh - 390px) * 0.4155)), calc(50vw - 180px)) + 16px);
  top: 54px;
  transform: none;
  align-self: center;
  width: 235px;
  padding: 17px;
  border: 1px solid rgba(103, 77, 42, 0.16);
  border-radius: 8px;
  background: rgba(246, 237, 220, 0.58);
  color: rgba(33, 29, 23, 0.78);
  opacity: 1;
  box-shadow:
    0 10px 24px rgba(74, 50, 28, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.54);
  backdrop-filter: blur(5px);
}

.hand-impact-bubble {
  position: absolute;
  left: -9px;
  top: 39px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-right: 9px solid rgba(246, 237, 220, 0.68);
  border-bottom: 8px solid transparent;
  border-left: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(-2px 2px 2px rgba(74, 50, 28, 0.07));
  transform: none;
}

.hand-impact-bubble::after {
  display: none;
}

.hand-impact-bubble span {
  display: none;
}

.canvas-hand-etched .hand-head {
  display: block;
  margin: 0 0 13px;
}

.canvas-hand-etched .card-label {
  display: block;
  color: rgba(86, 60, 43, 0.72);
  font: 750 10px / 1 Arial, sans-serif;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.24),
    0 -1px 0 rgba(58, 42, 29, 0.08);
}

.canvas-hand-etched .hand-slots {
  gap: 7px;
}

.canvas-hand-etched .hand-slot {
  border-color: rgba(78, 58, 38, 0.18);
  border-radius: 3px;
  background: rgba(239, 229, 207, 0.32);
  color: rgba(44, 35, 26, 0.5);
  font: 650 9px / 1 Arial, sans-serif;
  letter-spacing: 0.1em;
  box-shadow:
    inset 1px 1px 0 rgba(75, 55, 38, 0.08),
    inset -1px -1px 0 rgba(255, 255, 255, 0.22);
}

.canvas-hand-etched .hand-slot.filled {
  background: var(--slot-color);
  border-color: rgba(52, 39, 27, 0.24);
  color: #fff8ec;
  box-shadow: none;
  text-shadow: none;
}

.canvas-hand-etched .hand-slot.filled span {
  display: none;
}

.canvas-hand-etched .canvas-palette {
  gap: 7px;
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid rgba(78, 58, 38, 0.16);
}

.canvas-hand-etched .canvas-palette button {
  overflow: hidden;
  border-color: rgba(52, 39, 27, 0.22);
  border-radius: 999px;
  opacity: 1;
  filter: none;
  box-shadow: none;
}

.canvas-hand-etched .canvas-palette button.active {
  outline: 2px solid rgba(163, 80, 58, 0.75);
  outline-offset: 3px;
}

.canvas-hand-etched .choose-btn {
  min-height: 40px;
  margin-top: 15px;
  border: 1px solid rgba(163, 80, 58, 0.36);
  border-radius: 999px;
  background: #a3503a;
  color: #fff8ec;
  font: 750 10px / 1 Arial, sans-serif;
  letter-spacing: 0.16em;
  box-shadow:
    0 14px 28px rgba(96, 46, 31, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.canvas-hand-etched .choose-btn:hover:not(:disabled),
.canvas-hand-etched .choose-btn:focus-visible:not(:disabled) {
  filter: brightness(1.05);
  outline: none;
}

.canvas-hand-etched .choose-btn:disabled {
  background: rgba(90, 65, 45, 0.16);
  color: rgba(45, 34, 25, 0.44);
  box-shadow: none;
  opacity: 1;
}

.ritual-room.canvas .room-nav .validation-area {
  display: none;
}

@media (max-width: 1120px) {
  .canvas-v111-layout {
    width: 100%;
  }

  .canvas-stage-real {
    width: min(620px, max(400px, calc((100vh - 390px) * 0.831)), calc(100vw - 300px));
  }

  .canvas-hand-etched {
    left: calc(50% + min(310px, max(200px, calc((100vh - 390px) * 0.4155)), calc(50vw - 150px)) + 16px);
    top: 54px;
    width: 220px;
  }
}

@media (max-width: 860px) {
  .ritual-room.canvas .room-content {
    overflow-y: auto;
    padding-top: 138px;
  }

  .canvas-v111-panel {
    height: auto;
    min-height: 100%;
    gap: 18px;
  }

  .canvas-v111-layout {
    grid-template-columns: 1fr;
    width: 100%;
    gap: 18px;
  }

  .canvas-stage-real {
    width: min(500px, 100%);
  }

  .canvas-hand-etched {
    position: static;
    transform: none;
    width: min(250px, 100%);
    justify-self: center;
  }

  .hand-impact-bubble {
    display: none;
  }

  .canvas-v111-layout .canvas-art-mount,
  .canvas-v111-layout .canvas-cartel {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .ritual-room.canvas .room-content {
    padding: 144px 16px 148px;
  }

  .canvas-v111-title h2 {
    font-size: 42px;
  }

  .canvas-v111-title p {
    font-size: 10px;
  }

  .canvas-v111-layout .canvas-art-mount,
  .canvas-v111-layout .canvas-cartel {
    min-width: 0;
  }

  .canvas-daily-reveal {
    top: 42px;
    right: auto;
    left: 0;
    width: 156px;
    padding: 8px 9px;
  }

  .canvas-daily-reveal::before {
    display: none;
  }

  .canvas-daily-reveal strong {
    font-size: 13px;
  }
}

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

  .sentence-word-unit.sentence-word-reveal {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

/* V013y - shared title scale and chapter-based year track. */
.ritual-room .room-title h2,
.ritual-room .sentence-title-only h2,
.ritual-room .canvas-v111-title h2 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 66px;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0;
}

.sentence-frame-chapter {
  position: relative;
  top: auto;
  z-index: 5;
  margin: 0 auto 6px;
  padding: 0;
  background: none;
  transform: translateY(-10px);
}

.inline-seal {
  width: min(420px, 100%);
  min-height: 102px;
  margin: 0 auto;
  gap: 10px;
  padding: 18px 28px 20px;
  border: 1px solid rgba(212, 184, 120, 0.32);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(212, 184, 120, 0.07), rgba(212, 184, 120, 0.018)),
    rgba(8, 10, 12, 0.42);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.16),
    0 0 30px rgba(212, 184, 120, 0.08),
    inset 0 0 0 1px rgba(255, 245, 220, 0.045);
}

.inline-seal::before,
.inline-seal::after {
  display: block;
  width: min(170px, 48vw);
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(212, 184, 120, 0.5), transparent);
}

.inline-seal span {
  color: rgba(212, 184, 120, 0.9);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-shadow: 0 0 16px rgba(212, 184, 120, 0.16);
}

.inline-seal strong {
  color: #fff4d5;
  font-size: 34px;
  line-height: 1;
  text-shadow:
    0 0 22px rgba(212, 184, 120, 0.2),
    0 14px 32px rgba(0, 0, 0, 0.26);
}

.annual-track.annual-days {
  grid-template-columns: repeat(var(--chapter-days, 182), minmax(1px, 1fr));
}

.annual-track.annual-days.previewing {
  position: relative;
  overflow: visible;
}

.annual-track.annual-days.previewing::after {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: var(--preview-left, 0%);
  width: 1px;
  content: "";
  background: currentColor;
  opacity: 0.72;
}

.annual-hover-label {
  position: absolute;
  bottom: 100%;
  left: var(--preview-left, 0%);
  z-index: 4;
  padding: 4px 7px;
  border: 1px solid rgba(163, 80, 58, 0.18);
  border-radius: 999px;
  background: rgba(246, 237, 220, 0.82);
  color: #a3503a;
  box-shadow: 0 8px 18px rgba(74, 50, 28, 0.08);
  font: 750 9px / 1 Arial, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -8px);
}

.annual-hover-label[hidden] {
  display: none;
}

.ritual-room.sentence .annual-progress {
  grid-template-columns: 44px minmax(0, 1fr) auto;
}

.ritual-room.sentence .annual-hover-label {
  border-color: rgba(212, 184, 120, 0.32);
  background: rgba(10, 12, 12, 0.94);
  color: #f3daa0;
  box-shadow: 0 0 22px rgba(212, 184, 120, 0.14);
}

@media (max-width: 560px) {
  .ritual-room .room-title h2,
  .ritual-room .sentence-title-only h2,
  .ritual-room .canvas-v111-title h2 {
    font-size: 52px;
  }

  .inline-seal {
    width: min(340px, 100%);
    min-height: 92px;
    padding: 15px 18px 17px;
  }

  .inline-seal strong {
    font-size: 28px;
  }
}

@media (max-height: 900px) and (min-width: 861px) {
  .ritual-room.canvas .room-content {
    padding-top: 96px;
    padding-bottom: 104px;
  }

  .ritual-room .room-title h2,
  .ritual-room .sentence-title-only h2,
  .ritual-room .canvas-v111-title h2 {
    font-size: 58px;
  }

  .canvas-v111-title p {
    margin-top: 8px;
  }

  .canvas-stage-real {
    width: min(650px, max(390px, calc((100vh - 375px) * 0.831)), calc(100vw - 360px));
  }

  .canvas-hand-etched {
    left: calc(50% + min(325px, max(195px, calc((100vh - 375px) * 0.4155)), calc(50vw - 180px)) + 16px);
  }
}

@media (max-height: 760px) and (min-width: 861px) {
  .ritual-room.canvas .room-content {
    padding-top: 84px;
    padding-bottom: 96px;
  }

  .ritual-room .room-title h2,
  .ritual-room .sentence-title-only h2,
  .ritual-room .canvas-v111-title h2 {
    font-size: 50px;
  }

  .canvas-stage-real {
    width: min(600px, max(340px, calc((100vh - 345px) * 0.831)), calc(100vw - 360px));
  }

  .canvas-hand-etched {
    left: calc(50% + min(300px, max(170px, calc((100vh - 345px) * 0.4155)), calc(50vw - 180px)) + 16px);
    top: 48px;
  }
}

/* V013ac - TheSentence guided reveal and closer voice card. */
.sentence-word-unit.sentence-preview-match::before {
  display: none;
}

.sentence-month.current-month.reveal-month .sentence-word-unit.current-last-word::after,
.sentence-word-unit.current-last-word::after {
  animation-delay: 0.18s;
}

.sentence-month.current-month.reveal-month .current-last-word .official-word,
.sentence-word-unit.current-last-word .official-word {
  animation-delay: 0.12s;
}

.sentence-bottom-input:not(.voice-given) {
  width: min(680px, calc(100vw - 150px));
  transform: translateY(-72px);
}

.sentence-bottom-input:not(.voice-given) .sentence-voice-row {
  position: relative;
  grid-template-columns: minmax(0, 1fr) 192px;
  min-height: 64px;
  padding: 7px;
  border-color: rgba(212, 184, 120, 0.32);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(246, 237, 220, 0.07), rgba(246, 237, 220, 0.018)),
    rgba(8, 10, 12, 0.68);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 245, 220, 0.08);
  backdrop-filter: blur(5px);
}

.sentence-bottom-input:not(.voice-given) .sentence-voice-row::before {
  position: absolute;
  top: -13px;
  left: 50%;
  width: 96px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(212, 184, 120, 0.34), transparent);
  transform: translateX(-50%);
  pointer-events: none;
}

.sentence-bottom-input:not(.voice-given) .sentence-voice-row:focus-within {
  border-color: rgba(212, 184, 120, 0.66);
  background:
    linear-gradient(180deg, rgba(246, 237, 220, 0.095), rgba(246, 237, 220, 0.026)),
    rgba(8, 10, 12, 0.74);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.24),
    0 0 28px rgba(212, 184, 120, 0.09),
    inset 0 1px 0 rgba(255, 245, 220, 0.1);
}

.sentence-bottom-input:not(.voice-given) .sentence-voice-row .word-input {
  min-height: 50px;
  border: 1px solid rgba(212, 184, 120, 0.1);
  border-radius: 5px;
  background: rgba(246, 237, 220, 0.028);
  color: #fff4d5;
  font-size: 19px;
  text-align: center;
}

.sentence-bottom-input:not(.voice-given) .sentence-voice-row .word-input::placeholder {
  color: rgba(246, 236, 212, 0.74);
  opacity: 1;
}

.sentence-bottom-input:not(.voice-given) .sentence-voice-row .voice-submit-btn {
  min-height: 50px;
  border: 1px solid rgba(212, 184, 120, 0.24);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(212, 184, 120, 0.16), rgba(212, 184, 120, 0.08)),
    rgba(246, 237, 220, 0.06);
  color: rgba(246, 236, 212, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 220, 0.08),
    0 8px 18px rgba(0, 0, 0, 0.14);
}

.sentence-bottom-input:not(.voice-given) .sentence-voice-row .voice-submit-btn::before,
.sentence-bottom-input:not(.voice-given) .sentence-voice-row .voice-submit-btn::after {
  display: none;
}

.sentence-bottom-input:not(.voice-given) .sentence-voice-row.has-valid-word .voice-submit-btn:not(:disabled) {
  border-color: rgba(212, 184, 120, 0.58);
  background: #d4b878;
  color: #080b0d;
}

@media (max-width: 760px) {
  .sentence-bottom-input:not(.voice-given) {
    width: min(100%, calc(100vw - 32px));
    transform: translateY(-52px);
  }

  .sentence-bottom-input:not(.voice-given) .sentence-voice-row {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .sentence-bottom-input:not(.voice-given) .sentence-voice-row .voice-submit-btn {
    min-height: 44px;
  }
}

@media (max-height: 760px) and (min-width: 761px) {
  .sentence-bottom-input:not(.voice-given) {
    transform: translateY(-54px);
  }
}

/* V013ad - ready states and TheReview rebuild. */
@keyframes ritualReadyPulse {
  0%,
  100% {
    box-shadow:
      0 12px 26px rgba(0, 0, 0, 0.12),
      0 0 0 rgba(212, 184, 120, 0);
    filter: brightness(1);
  }

  50% {
    box-shadow:
      0 16px 34px rgba(0, 0, 0, 0.16),
      0 0 26px rgba(212, 184, 120, 0.32);
    filter: brightness(1.06);
  }
}

@keyframes reviewReadyPulse {
  0%,
  100% {
    box-shadow:
      0 12px 28px rgba(45, 77, 48, 0.14),
      0 0 0 rgba(120, 160, 111, 0);
    filter: brightness(1);
  }

  50% {
    box-shadow:
      0 16px 38px rgba(45, 77, 48, 0.18),
      0 0 30px rgba(120, 160, 111, 0.42);
    filter: brightness(1.06);
  }
}

.sentence-bottom-input:not(.voice-given) .sentence-voice-row.has-valid-word .voice-submit-btn:not(:disabled) {
  border-color: rgba(255, 230, 164, 0.68);
  background:
    linear-gradient(105deg, #d4b878 0%, #f6e3a6 32%, #fff1c4 45%, #d4b878 60%, #b99754 100%);
  background-size: 220% 100%;
  color: #080b0d;
  animation: ritualReadyPulse 1.55s ease-in-out infinite;
}

.canvas-hand-etched .choose-btn:not(:disabled) {
  border-color: rgba(190, 92, 68, 0.68);
  background:
    linear-gradient(105deg, #a3503a 0%, #cc7858 34%, #f0aa74 46%, #b75a49 62%, #873e31 100%);
  background-size: 220% 100%;
  color: #fff8ec;
  animation: ritualReadyPulse 1.55s ease-in-out infinite;
}

.ritual-room.review {
  --module-accent: #78a06f;
  --module-accent-soft: rgba(120, 160, 111, 0.5);
  --module-accent-faint: rgba(120, 160, 111, 0.16);
  background:
    linear-gradient(rgba(120, 160, 111, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 160, 111, 0.08) 1px, transparent 1px),
    #fbfbf6;
  background-size: 32px 32px, 32px 32px, auto;
  color: #20271f;
}

.ritual-room.review .wordmark {
  color: #171b16;
}

.ritual-room.review .wordmark span,
.ritual-room.review .countdown strong,
.ritual-room.review .module-menu button.active,
.ritual-room.review .module-menu button:hover {
  color: #5f8b56;
}

.ritual-room.review .countdown span,
.ritual-room.review .countdown small,
.ritual-room.review .module-menu button {
  color: rgba(39, 46, 38, 0.58);
}

.ritual-room.review .account-button,
.ritual-room.review .room-nav .nav-arrow:not(.next) {
  border-color: rgba(120, 160, 111, 0.3);
  background: rgba(246, 248, 238, 0.78);
  color: #5f8b56;
  box-shadow:
    0 14px 34px rgba(57, 82, 52, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.ritual-room.review .account-button:hover,
.ritual-room.review .account-button:focus-visible,
.ritual-room.review .room-nav .nav-arrow:not(.next):hover,
.ritual-room.review .room-nav .nav-arrow:not(.next):focus-visible {
  border-color: rgba(120, 160, 111, 0.55);
  background: rgba(255, 255, 248, 0.92);
  color: #486f42;
}

.ritual-room.review .room-nav .nav-arrow.next {
  border-color: rgba(95, 139, 86, 0.46);
  background: #78a06f;
  color: #fbfbf6;
  box-shadow:
    0 18px 38px rgba(45, 77, 48, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.ritual-room.review .room-content {
  align-items: center;
  overflow-y: auto;
  padding-top: 118px;
}

.review-v013 {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: clamp(18px, 2.5vh, 28px);
  width: min(100%, 920px);
  min-height: 0;
  margin: 0 auto;
}

.review-title-only {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

.review-title-only h2 {
  margin: 0;
  color: #1f251e;
  font-family: Georgia, serif;
  font-size: 66px;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0;
}

.review-title-only p {
  margin: 0;
  color: rgba(95, 139, 86, 0.88);
  font: 650 12px / 1.2 Arial, sans-serif;
  letter-spacing: 0.12em;
}

.review-daily-object {
  display: grid;
  justify-items: center;
  gap: 15px;
  width: min(100%, 690px);
}

.review-image-shell {
  position: relative;
  overflow: hidden;
  width: min(610px, 100%);
  aspect-ratio: 16 / 9.8;
  border: 1px solid rgba(73, 98, 68, 0.18);
  border-radius: 8px;
  background: #edf1e8;
  box-shadow:
    0 24px 58px rgba(56, 76, 52, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.review-image-shell::after {
  position: absolute;
  inset: 0;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.42);
  pointer-events: none;
}

.review-image-shell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 57%;
}

.review-object-name {
  display: grid;
  justify-items: center;
  gap: 5px;
}

.review-object-name span,
.review-opinion-card label {
  color: rgba(69, 84, 66, 0.62);
  font: 750 10px / 1 Arial, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.review-object-name strong {
  color: #1f251e;
  font: 400 32px / 1 Georgia, serif;
  letter-spacing: 0;
}

.review-rating-stars {
  display: flex;
  justify-content: center;
  gap: 9px;
  min-height: 43px;
  margin: 1px 0 0;
}

.review-rating-stars button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(73, 98, 68, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 250, 0.66);
  color: rgba(65, 78, 61, 0.24);
  font: 400 26px / 1 Georgia, serif;
  cursor: pointer;
  transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.review-rating-stars button:hover,
.review-rating-stars button:focus-visible {
  outline: none;
  transform: translateY(-1px);
}

.review-rating-stars:not([data-hover-rating]) button.active,
.review-rating-stars[data-hover-rating="1"] button:nth-child(-n+1),
.review-rating-stars[data-hover-rating="2"] button:nth-child(-n+2),
.review-rating-stars[data-hover-rating="3"] button:nth-child(-n+3),
.review-rating-stars[data-hover-rating="4"] button:nth-child(-n+4),
.review-rating-stars[data-hover-rating="5"] button:nth-child(-n+5) {
  border-color: rgba(95, 139, 86, 0.34);
  background: rgba(120, 160, 111, 0.12);
  color: #78a06f;
  box-shadow: 0 0 18px rgba(120, 160, 111, 0.2);
}

.review-rating-stars[data-hover-rating] button {
  color: rgba(65, 78, 61, 0.24);
  box-shadow: none;
}

.review-opinion-card {
  display: grid;
  gap: 10px;
  width: min(610px, 100%);
  margin-top: 2px;
  padding: 17px;
  border: 1px solid rgba(73, 98, 68, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 250, 0.74);
  box-shadow:
    0 18px 42px rgba(56, 76, 52, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.review-opinion-card.has-text {
  border-color: rgba(120, 160, 111, 0.34);
}

.review-opinion-card textarea {
  width: 100%;
  min-height: 112px;
  resize: vertical;
  border: 1px solid rgba(73, 98, 68, 0.13);
  border-radius: 5px;
  background: rgba(248, 248, 240, 0.72);
  color: #1f251e;
  outline: none;
  padding: 13px 14px;
  font: 400 17px / 1.42 Georgia, serif;
  letter-spacing: 0;
}

.review-opinion-card textarea::placeholder {
  color: rgba(69, 84, 66, 0.46);
  font-style: italic;
}

.review-opinion-card textarea:focus {
  border-color: rgba(120, 160, 111, 0.52);
  box-shadow: 0 0 0 3px rgba(120, 160, 111, 0.11);
}

.review-submit-btn {
  display: grid;
  place-items: center;
  width: min(610px, 100%);
  min-height: 46px;
  border: 1px solid rgba(73, 98, 68, 0.18);
  border-radius: 999px;
  background: rgba(120, 160, 111, 0.12);
  color: rgba(45, 58, 43, 0.42);
  font: 750 11px / 1 Arial, sans-serif;
  letter-spacing: 0.18em;
  cursor: pointer;
}

.review-submit-btn:disabled {
  cursor: default;
  opacity: 1;
}

.review-submit-btn:not(:disabled) {
  border-color: rgba(95, 139, 86, 0.62);
  background:
    linear-gradient(105deg, #5f8b56 0%, #78a06f 32%, #b6d2a9 46%, #78a06f 62%, #486f42 100%);
  background-size: 220% 100%;
  color: #fbfbf6;
  animation: reviewReadyPulse 1.55s ease-in-out infinite;
}

@media (max-width: 760px) {
  .ritual-room.review .room-content {
    padding-top: 142px;
  }

  .review-title-only h2 {
    font-size: 52px;
  }

  .review-v013 {
    gap: 17px;
  }

  .review-daily-object {
    gap: 13px;
  }

  .review-image-shell,
  .review-opinion-card,
  .review-submit-btn {
    width: min(100%, calc(100vw - 32px));
  }

  .review-object-name strong {
    font-size: 28px;
  }

  .review-rating-stars {
    gap: 6px;
  }

  .review-rating-stars button {
    width: 34px;
    height: 34px;
    font-size: 23px;
  }
}

/* V013ae - review refinements and quieter ready animations. */
@keyframes canvasHandReadyPulse {
  0%,
  100% {
    box-shadow:
      0 14px 30px rgba(119, 65, 47, 0.14),
      0 0 0 rgba(190, 92, 68, 0);
    filter: brightness(1);
  }

  50% {
    box-shadow:
      0 18px 40px rgba(119, 65, 47, 0.2),
      0 0 24px rgba(190, 92, 68, 0.34);
    filter: brightness(1.07);
  }
}

@keyframes sentenceMonthDividerReveal {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.sentence-month-label.sentence-month-reveal {
  opacity: 0;
  transform: translateY(8px) scale(0.985);
  animation: sentenceMonthDividerReveal 0.52s cubic-bezier(0.22, 0.74, 0.28, 1) forwards;
  animation-delay: var(--month-reveal-delay, 0.08s);
}

.sentence-word-unit.sentence-word-reveal {
  animation-delay: var(--word-reveal-delay, 0.12s);
}

.sentence-month.current-month.reveal-month .sentence-word-unit.current-last-word::after,
.sentence-word-unit.current-last-word::after {
  animation: sentenceLastWordTrace 2.7s ease-in-out 0.18s infinite;
}

.sentence-month.current-month.reveal-month .current-last-word .official-word,
.sentence-word-unit.current-last-word .official-word {
  animation: sentenceLastWordBreath 2.7s ease-in-out 0.12s infinite;
}

.sentence-bottom-input:not(.voice-given) .sentence-voice-row.has-valid-word .voice-submit-btn:not(:disabled) {
  border-color: rgba(255, 230, 164, 0.68);
  background: linear-gradient(180deg, #f4dda0 0%, #d4b878 48%, #b99754 100%);
  background-size: 100% 100%;
  color: #080b0d;
  animation: ritualReadyPulse 1.55s ease-in-out infinite;
}

.canvas-hand-etched .choose-btn:not(:disabled) {
  border-color: rgba(190, 92, 68, 0.68);
  background: linear-gradient(180deg, #d77f5e 0%, #bd6048 50%, #964332 100%);
  background-size: 100% 100%;
  color: #fff8ec;
  animation: canvasHandReadyPulse 1.55s ease-in-out infinite;
}

.canvas-pixel-tooltip {
  width: 286px;
}

.canvas-pixel-tooltip-row {
  grid-template-columns: 82px minmax(0, 1fr);
}

.ritual-room.review {
  background:
    linear-gradient(rgba(120, 160, 111, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 160, 111, 0.028) 1px, transparent 1px),
    radial-gradient(circle at 18% 22%, rgba(120, 160, 111, 0.028), transparent 17%),
    radial-gradient(circle at 78% 62%, rgba(120, 160, 111, 0.022), transparent 18%),
    #fbfbf6;
  background-size: 32px 32px, 32px 32px, auto, auto, auto;
}

.ritual-room.review::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  opacity: 0.38;
  background:
    radial-gradient(ellipse at 13% 34%, transparent 0 46px, rgba(95, 139, 86, 0.035) 47px 48px, transparent 49px),
    radial-gradient(ellipse at 82% 28%, transparent 0 34px, rgba(95, 139, 86, 0.028) 35px 36px, transparent 37px),
    linear-gradient(8deg, transparent 0 63%, rgba(95, 139, 86, 0.028) 63% calc(63% + 1px), transparent calc(63% + 1px)),
    linear-gradient(97deg, transparent 0 22%, rgba(95, 139, 86, 0.024) 22% calc(22% + 1px), transparent calc(22% + 1px)),
    linear-gradient(150deg, transparent 0 78%, rgba(95, 139, 86, 0.022) 78% calc(78% + 1px), transparent calc(78% + 1px));
}

.review-v013 {
  width: min(100%, 980px);
}

.review-stage {
  position: relative;
  display: grid;
  justify-items: center;
  width: min(100%, 980px);
}

.review-daily-object {
  width: min(100%, 640px);
}

.review-image-shell {
  width: clamp(220px, 24vw, 330px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(237, 241, 232, 0.78);
}

.review-image-shell::after {
  border-radius: 50%;
}

.review-image-shell img {
  object-position: center 56%;
}

.review-object-name span {
  display: none;
}

.review-rating-stars {
  gap: 11px;
}

.review-rating-stars button {
  width: 34px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(65, 78, 61, 0.22);
  font-size: 32px;
  box-shadow: none;
}

.review-rating-stars:not([data-hover-rating]) button.active,
.review-rating-stars[data-hover-rating="1"] button:nth-child(-n+1),
.review-rating-stars[data-hover-rating="2"] button:nth-child(-n+2),
.review-rating-stars[data-hover-rating="3"] button:nth-child(-n+3),
.review-rating-stars[data-hover-rating="4"] button:nth-child(-n+4),
.review-rating-stars[data-hover-rating="5"] button:nth-child(-n+5) {
  border-color: transparent;
  background: transparent;
  color: #78a06f;
  box-shadow: none;
  text-shadow:
    0 0 13px rgba(120, 160, 111, 0.36),
    0 1px 0 rgba(255, 255, 255, 0.62);
}

.review-rating-stars[data-hover-rating] button {
  box-shadow: none;
}

.review-yesterday-card,
.review-archive-detail {
  border: 1px solid rgba(73, 98, 68, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 250, 0.72);
  color: #1f251e;
  box-shadow:
    0 18px 42px rgba(56, 76, 52, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.review-yesterday-card {
  position: absolute;
  top: 150px;
  left: -92px;
  display: grid;
  gap: 8px;
  width: 220px;
  padding: 15px 16px 16px;
  text-align: left;
  opacity: 0.36;
  filter: saturate(0.78);
  transition: opacity 0.18s ease, transform 0.18s ease, filter 0.18s ease;
}

.review-yesterday-card:hover,
.review-yesterday-card:focus-visible,
.review-stage.archive-open .review-yesterday-card {
  opacity: 0.78;
  filter: saturate(1);
  transform: translateX(-3px);
  outline: none;
}

.review-yesterday-card span,
.review-archive-date {
  color: rgba(69, 84, 66, 0.58);
  font: 750 10px / 1 Arial, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.review-yesterday-card strong,
.review-archive-detail strong {
  color: #1f251e;
  font: 400 25px / 1 Georgia, serif;
  letter-spacing: 0;
}

.review-yesterday-card em {
  color: rgba(95, 139, 86, 0.76);
  font: 400 18px / 1 Georgia, serif;
  letter-spacing: 0.02em;
  text-shadow: 0 0 12px rgba(120, 160, 111, 0.18);
}

.review-yesterday-copy,
.review-archive-detail p {
  margin: 0;
  color: rgba(31, 37, 30, 0.7);
  font: 400 14px / 1.32 Georgia, serif;
  letter-spacing: 0;
}

.review-yesterday-copy {
  display: block;
  text-transform: none;
}

.review-archive-detail {
  position: absolute;
  top: 338px;
  left: -92px;
  z-index: 4;
  display: grid;
  gap: 10px;
  width: 276px;
  padding: 17px;
  text-align: left;
  animation: reviewArchiveIn 0.18s ease both;
}

@keyframes reviewArchiveIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.review-archive-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(69, 84, 66, 0.5);
  font-size: 17px;
  line-height: 1;
}

.review-archive-detail div {
  display: grid;
  gap: 3px;
  padding-top: 10px;
  border-top: 1px solid rgba(73, 98, 68, 0.13);
}

.review-archive-detail div span {
  color: rgba(69, 84, 66, 0.58);
  font: 650 10px / 1.2 Arial, sans-serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.review-archive-detail div b {
  color: rgba(31, 37, 30, 0.78);
  font: 650 12px / 1.2 Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.review-submit-btn:not(:disabled) {
  border-color: rgba(95, 139, 86, 0.62);
  background: linear-gradient(180deg, #93bb89 0%, #72a068 48%, #557d4e 100%);
  background-size: 100% 100%;
  color: #fbfbf6;
  animation: reviewReadyPulse 1.55s ease-in-out infinite;
}

@media (max-width: 1180px) {
  .review-stage {
    gap: 18px;
  }

  .review-yesterday-card,
  .review-archive-detail {
    position: relative;
    top: auto;
    left: auto;
    width: min(610px, calc(100vw - 48px));
    opacity: 0.55;
    transform: none;
  }

  .review-yesterday-card {
    order: 3;
  }

  .review-yesterday-card:hover,
  .review-yesterday-card:focus-visible,
  .review-stage.archive-open .review-yesterday-card {
    transform: none;
  }

  .review-archive-detail {
    order: 4;
  }

  .review-daily-object {
    order: 1;
  }
}

@media (max-width: 760px) {
  .review-image-shell {
    width: clamp(190px, 62vw, 280px);
  }

  .review-rating-stars button {
    width: 30px;
    height: 36px;
    font-size: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sentence-month-label.sentence-month-reveal {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .sentence-bottom-input:not(.voice-given) .sentence-voice-row.has-valid-word .voice-submit-btn:not(:disabled),
  .canvas-hand-etched .choose-btn:not(:disabled),
  .review-submit-btn:not(:disabled) {
    animation: none;
  }
}

/* V014r - end-of-ritual live room. */
.final.live-final {
  display: block;
  place-content: initial;
  height: 100vh;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    linear-gradient(rgba(91, 113, 87, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 113, 87, 0.045) 1px, transparent 1px),
    radial-gradient(circle at 50% 34%, rgba(214, 177, 62, 0.07), transparent 36%),
    #f8f6ed;
  background-size: 28px 28px, 28px 28px, auto, auto;
  color: #171913;
  text-align: left;
  scroll-snap-type: y proximity;
}

.final.live-final::before {
  opacity: 0.075;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.42'/%3E%3C/svg%3E");
}

.live-final .ritual-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 30;
  color: #171913;
  padding: 30px 42px 0;
  pointer-events: none;
}

.live-final .ritual-header * {
  pointer-events: auto;
}

.live-final .wordmark span {
  color: #171913;
}

.live-final .countdown {
  color: #5d7456;
}

.live-final .countdown span,
.live-final .countdown small {
  color: rgba(23, 25, 19, 0.46);
}

.live-final .module-menu button:hover {
  color: #5d7456;
}

.live-final .annual-progress {
  position: fixed;
  z-index: 31;
  color: #5d7456;
}

.live-final .admin-reset-button {
  position: fixed;
  z-index: 32;
}

.live-scroll {
  position: relative;
  z-index: 1;
}

.live-section {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: clamp(116px, 13vh, 158px) clamp(38px, 6vw, 86px) clamp(96px, 11vh, 138px);
  scroll-snap-align: start;
}

.live-section-inner {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.live-intro {
  text-align: center;
}

.live-intro .live-section-inner {
  display: grid;
  justify-items: center;
}

.live-final .live-intro h1 {
  margin: 0;
  color: #171913;
  font: 400 clamp(72px, 9vw, 142px) / 0.9 Georgia, serif;
  letter-spacing: 0;
}

.live-final .live-intro h1 em {
  color: #5d7456;
}

.live-copy {
  width: min(680px, 100%);
  margin: 28px 0 0;
  color: rgba(23, 25, 19, 0.64);
  font: 400 clamp(18px, 2vw, 25px) / 1.34 Georgia, serif;
  letter-spacing: 0;
}

.live-intro-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 34px;
}

.live-intro-stats span {
  border: 1px solid rgba(93, 116, 86, 0.24);
  border-radius: 999px;
  background: rgba(255, 253, 246, 0.62);
  color: rgba(23, 25, 19, 0.55);
  padding: 10px 14px;
  font: 600 10px / 1 Arial, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.live-intro-stats strong {
  color: #5d7456;
  font-weight: 700;
}

.live-module {
  --module-accent: #5d7456;
  --module-accent-soft: rgba(93, 116, 86, 0.22);
}

.live-sentence {
  --module-accent: #d6b13e;
  --module-accent-soft: rgba(214, 177, 62, 0.22);
  background: #10110e;
  color: #f6ecd4;
}

.live-canvas {
  --module-accent: #b75a49;
  --module-accent-soft: rgba(183, 90, 73, 0.22);
  background: #e8dfcf;
}

.live-review {
  --module-accent: #78a06f;
  --module-accent-soft: rgba(120, 160, 111, 0.22);
  background: #fbfaf3;
}

.live-clock {
  --module-accent: #6595bf;
  --module-accent-soft: rgba(101, 149, 191, 0.2);
  background: #071018;
  color: #d8e4e5;
}

.live-journey {
  --module-accent: #9aa16a;
  --module-accent-soft: rgba(154, 161, 106, 0.22);
  background: #10130f;
  color: #e8e7d1;
}

.live-pact {
  --module-accent: #b75a49;
  --module-accent-soft: rgba(183, 90, 73, 0.2);
  background: #f2eadc;
}

.live-section-head {
  width: min(760px, 100%);
  margin: 0 0 clamp(24px, 4vh, 44px);
}

.live-section-head span {
  color: var(--module-accent);
  font: 700 11px / 1 Arial, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.live-section-head h2 {
  margin: 8px 0 10px;
  color: currentColor;
  font: 400 clamp(54px, 7vw, 94px) / 0.92 Georgia, serif;
  letter-spacing: 0;
}

.live-section-head p {
  width: min(620px, 100%);
  margin: 0;
  color: color-mix(in srgb, currentColor 58%, transparent);
  font: 400 18px / 1.4 Georgia, serif;
  letter-spacing: 0;
}

.live-section-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: clamp(26px, 4vw, 58px);
  align-items: center;
}

.live-side-stack {
  display: grid;
  gap: 16px;
}

.live-sentence .sentence-official-sheet {
  width: 100%;
  min-height: min(620px, 66vh);
  border-color: rgba(214, 177, 62, 0.28);
  background: radial-gradient(circle at 50% 16%, rgba(214, 177, 62, 0.1), transparent 44%), #080a0a;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(246, 236, 212, 0.06);
}

.live-sentence .live-official-line {
  max-height: min(560px, 58vh);
  padding-right: clamp(12px, 2vw, 28px);
}

.live-sentence-pool .sentence-pool-preview {
  position: relative;
  inset: auto;
  width: 100%;
  min-height: 0;
  max-height: none;
  margin: 0;
  transform: none;
}

.live-comma-card,
.live-panel,
.live-review-object,
.live-review-card,
.live-pact-grid {
  border: 1px solid var(--module-accent-soft);
  border-radius: 8px;
  background: rgba(255, 253, 246, 0.72);
  box-shadow: 0 22px 54px rgba(20, 18, 12, 0.08);
}

.live-sentence .live-comma-card,
.live-clock .live-panel,
.live-journey .live-panel {
  background: rgba(8, 10, 10, 0.58);
  box-shadow: inset 0 0 0 1px rgba(246, 236, 212, 0.035), 0 24px 62px rgba(0, 0, 0, 0.24);
}

.live-comma-card {
  display: grid;
  gap: 9px;
  padding: 18px;
}

.live-comma-card span,
.live-panel > span,
.live-popular-list > span {
  color: var(--module-accent);
  font: 700 10px / 1 Arial, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.live-comma-card strong {
  color: currentColor;
  font: italic 26px / 1.08 Georgia, serif;
  letter-spacing: 0;
}

.live-comma-card p {
  margin: 0;
  color: color-mix(in srgb, currentColor 58%, transparent);
  font: 400 15px / 1.45 Georgia, serif;
}

.live-comma-card button,
.live-review-card button,
.journey-live-pool button {
  min-height: 38px;
  border: 1px solid var(--module-accent-soft);
  border-radius: 999px;
  background: var(--module-accent);
  color: #0b0d09;
  padding: 0 16px;
  font: 800 10px / 1 Arial, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.live-comma-card button:disabled {
  opacity: 0.48;
}

.live-canvas-grid {
  grid-template-columns: minmax(420px, 560px) minmax(310px, 390px);
}

.live-canvas-stage {
  justify-self: center;
  width: min(520px, 100%);
}

.live-canvas-stage .canvas-art-mount {
  width: 100%;
}

.live-canvas-stage .ritual-canvas-board {
  cursor: zoom-in;
}

.live-panel {
  display: grid;
  gap: 15px;
  padding: clamp(20px, 3vw, 30px);
}

.live-stat {
  display: grid;
  grid-template-columns: minmax(108px, 0.42fr) 1fr;
  align-items: baseline;
  gap: 16px;
  border-bottom: 1px solid var(--module-accent-soft);
  padding-bottom: 13px;
}

.live-stat.wide {
  grid-template-columns: 1fr;
  gap: 6px;
}

.live-stat span {
  color: color-mix(in srgb, currentColor 45%, transparent);
  font: 700 10px / 1.2 Arial, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.live-stat strong {
  display: flex;
  align-items: center;
  gap: 10px;
  color: currentColor;
  font: 400 28px / 1.1 Georgia, serif;
  letter-spacing: 0;
}

.live-stat strong i,
.live-popular-list i {
  display: inline-block;
  width: 18px;
  aspect-ratio: 1;
  border: 1px solid rgba(20, 18, 12, 0.22);
  background: var(--swatch);
}

.live-popular-list {
  display: grid;
  gap: 10px;
}

.live-popular-list div {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 9px;
  color: color-mix(in srgb, currentColor 62%, transparent);
  font: 600 12px / 1.2 Arial, sans-serif;
}

.live-popular-list strong {
  color: currentColor;
  font: 400 18px / 1 Georgia, serif;
}

.live-popular-list em {
  font-style: normal;
}

.live-review-grid {
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  align-items: start;
}

.live-review-object {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 28px;
  text-align: center;
}

.live-review-object .review-fieldnote-photo {
  width: 178px;
}

.live-review-object > span {
  color: #78a06f;
  font: 700 10px / 1 Arial, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.live-review-object h3 {
  margin: 0;
  color: #171913;
  font: 400 44px / 0.98 Georgia, serif;
  letter-spacing: 0;
}

.live-review-object p {
  margin: 0;
  color: rgba(23, 25, 19, 0.56);
  font: 400 16px / 1.35 Georgia, serif;
}

.live-review-score {
  display: grid;
  justify-items: center;
  gap: 5px;
}

.live-stars {
  display: inline-flex;
  gap: 4px;
  color: rgba(23, 25, 19, 0.22);
  font: 24px / 1 Georgia, serif;
}

.live-stars i {
  font-style: normal;
}

.live-stars i.active {
  color: #78a06f;
  text-shadow: 0 0 12px rgba(120, 160, 111, 0.28);
}

.live-review-feed {
  display: grid;
  gap: 12px;
}

.live-review-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 18px;
  align-items: start;
  padding: 18px;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.live-review-card.mine {
  border-style: dashed;
}

.live-review-card.liked {
  border-color: rgba(120, 160, 111, 0.58);
  box-shadow: 0 24px 58px rgba(120, 160, 111, 0.12);
  transform: translateY(-1px);
}

.live-review-card div {
  display: grid;
  gap: 2px;
}

.live-review-card div strong {
  color: #171913;
  font: 700 12px / 1 Arial, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.live-review-card div span {
  color: rgba(23, 25, 19, 0.48);
  font: 600 10px / 1 Arial, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.live-review-card .live-stars {
  justify-self: end;
  font-size: 18px;
}

.live-review-card p {
  grid-column: 1 / -1;
  margin: 0;
  color: rgba(23, 25, 19, 0.68);
  font: 400 18px / 1.38 Georgia, serif;
}

.live-review-card button {
  grid-column: 1 / -1;
  justify-self: start;
  background: transparent;
  color: #5d7456;
}

.live-review-card.liked button {
  background: #78a06f;
  color: #0b0d09;
}

.live-clock-grid {
  grid-template-columns: minmax(520px, 0.9fr) minmax(320px, 430px);
}

.live-clock .clock-webgl-scene {
  width: min(680px, 100%);
  min-height: min(650px, 64vh);
  justify-self: center;
}

.live-clock .clock-reveal-origin-list {
  margin: 4px 0 0;
}

.live-journey-grid {
  grid-template-columns: minmax(520px, 760px) minmax(300px, 390px);
}

.live-journey .journey-map-shell {
  min-height: min(640px, 64vh);
}

.journey-live-pool {
  display: grid;
  gap: 10px;
}

.journey-live-pool button {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 14px;
  min-height: 66px;
  border-radius: 8px;
  background: rgba(232, 231, 209, 0.06);
  color: #e8e7d1;
  text-align: left;
}

.journey-live-pool button.active,
.journey-live-pool button:hover,
.journey-live-pool button:focus-visible {
  border-color: rgba(154, 161, 106, 0.66);
  background: rgba(154, 161, 106, 0.2);
}

.journey-live-pool button span {
  font: 400 24px / 1 Georgia, serif;
  letter-spacing: 0;
  text-transform: none;
}

.journey-live-pool button strong {
  color: #d2b66c;
  font: 700 18px / 1 Arial, sans-serif;
}

.journey-live-pool button em {
  grid-column: 1 / -1;
  color: rgba(232, 231, 209, 0.52);
  font: 600 10px / 1 Arial, sans-serif;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.live-pact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: clamp(24px, 4vw, 38px);
}

.live-pact-grid .live-stat.wide {
  grid-column: 1 / -1;
}

.live-module-ledger {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.live-module-ledger span {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  border: 1px solid rgba(23, 25, 19, 0.08);
  border-radius: 999px;
  color: rgba(23, 25, 19, 0.48);
  padding: 0 13px;
  font: 700 10px / 1 Arial, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.live-module-ledger span.done {
  border-color: rgba(183, 90, 73, 0.34);
  color: #a3503a;
  background: rgba(183, 90, 73, 0.08);
}

.live-module-ledger i {
  font-style: normal;
  opacity: 0.7;
}

.live-pact-grid .return-button {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 12px;
  border-radius: 999px;
  background: #171913;
  color: #f8f6ed;
}

@media (max-width: 1040px) {
  .live-section-grid,
  .live-canvas-grid,
  .live-review-grid,
  .live-clock-grid,
  .live-journey-grid {
    grid-template-columns: 1fr;
  }

  .live-section-head {
    width: 100%;
  }

  .live-canvas-stage,
  .live-clock .clock-webgl-scene {
    justify-self: center;
  }

  .live-pact-grid,
  .live-module-ledger {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .live-section {
    padding: 138px 18px 112px;
  }

  .live-final .ritual-header {
    padding: 24px 24px 0;
  }

  .live-final .live-intro h1 {
    font-size: clamp(54px, 16vw, 82px);
  }

  .live-section-head h2 {
    font-size: clamp(46px, 15vw, 68px);
  }

  .live-review-card {
    grid-template-columns: 1fr;
  }

  .live-review-card .live-stars {
    justify-self: start;
  }
}

/* V014a - TheReview Field Note direction. */
.ritual-room.review {
  background:
    linear-gradient(rgba(95, 139, 86, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95, 139, 86, 0.028) 1px, transparent 1px),
    radial-gradient(ellipse at 12% 32%, transparent 0 64px, rgba(95, 139, 86, 0.04) 65px 66px, transparent 67px),
    radial-gradient(ellipse at 84% 24%, transparent 0 44px, rgba(95, 139, 86, 0.032) 45px 46px, transparent 47px),
    #fbfbf4;
  background-size: 32px 32px, 32px 32px, auto, auto, auto;
}

.ritual-room.review::before {
  opacity: 0.28;
  background:
    linear-gradient(8deg, transparent 0 62%, rgba(95, 139, 86, 0.035) 62% calc(62% + 1px), transparent calc(62% + 1px)),
    linear-gradient(99deg, transparent 0 21%, rgba(95, 139, 86, 0.026) 21% calc(21% + 1px), transparent calc(21% + 1px)),
    linear-gradient(152deg, transparent 0 78%, rgba(95, 139, 86, 0.025) 78% calc(78% + 1px), transparent calc(78% + 1px));
}

.ritual-room.review .room-content {
  align-items: flex-start;
  overflow-y: auto;
  padding-top: 92px;
}

.review-v014 {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 18px;
  width: min(100%, 1080px);
  margin: 0 auto;
}

.review-v014 .review-title-only {
  gap: 8px;
}

.review-v014 .review-title-only p {
  color: rgba(95, 139, 86, 0.82);
}

.review-fieldnote-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 1020px);
  min-height: clamp(590px, 62vh, 660px);
  perspective: 1400px;
}

.review-fieldnote-page {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 12px;
  width: clamp(450px, 42vw, 540px);
  min-height: clamp(570px, 61vh, 650px);
  padding: 30px 36px 34px 48px;
  overflow: hidden;
  border: 1px solid rgba(67, 88, 61, 0.18);
  border-radius: 5px 18px 14px 5px;
  background:
    linear-gradient(180deg, rgba(255, 255, 252, 0.9), rgba(250, 247, 235, 0.92)),
    #fbf7e9;
  color: #1f251e;
  box-shadow:
    0 28px 70px rgba(43, 58, 39, 0.16),
    0 2px 0 rgba(255, 255, 255, 0.86) inset,
    -9px 0 18px rgba(58, 43, 28, 0.06) inset;
  transform-origin: left center;
}

.review-fieldnote-page::before {
  position: absolute;
  inset: 24px 28px 22px 42px;
  z-index: 0;
  content: "";
  pointer-events: none;
  opacity: 0.42;
  background:
    repeating-linear-gradient(to bottom, transparent 0 30px, rgba(95, 139, 86, 0.13) 31px 32px),
    linear-gradient(90deg, rgba(163, 80, 58, 0.12) 1px, transparent 1px);
  background-size: 100% 32px, 100% 100%;
}

.review-fieldnote-page::after {
  position: absolute;
  right: 28px;
  bottom: 28px;
  width: 108px;
  height: 108px;
  content: "";
  border: 1px solid rgba(95, 139, 86, 0.1);
  border-radius: 50%;
  opacity: 0.6;
  pointer-events: none;
}

.review-fieldnote-page > * {
  position: relative;
  z-index: 1;
}

.review-page-spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 24px;
  border-right: 1px solid rgba(67, 88, 61, 0.1);
  background: linear-gradient(90deg, rgba(77, 58, 38, 0.12), rgba(255, 255, 255, 0));
}

.review-page-spine::before,
.review-page-spine::after {
  position: absolute;
  left: 8px;
  width: 8px;
  height: 8px;
  content: "";
  border: 1px solid rgba(67, 88, 61, 0.22);
  border-radius: 50%;
  background: #fbfbf4;
  box-shadow: 0 1px 2px rgba(43, 58, 39, 0.08) inset;
}

.review-page-spine::before {
  top: 64px;
}

.review-page-spine::after {
  bottom: 64px;
}

.review-page-meta {
  position: absolute;
  top: 24px;
  right: 28px;
  display: grid;
  justify-items: end;
  gap: 3px;
  color: rgba(45, 58, 43, 0.62);
  text-align: right;
  text-transform: uppercase;
}

.review-page-meta span,
.review-fieldnote-name span,
.review-fieldnote-input label,
.review-best-note span,
.review-side-date {
  font: 750 10px / 1 Arial, sans-serif;
  letter-spacing: 0.18em;
}

.review-page-meta strong {
  color: rgba(69, 104, 62, 0.84);
  font: 400 28px / 1 Georgia, serif;
  letter-spacing: 0.03em;
}

.review-page-meta em {
  font: 650 9px / 1.2 Arial, sans-serif;
  font-style: normal;
  letter-spacing: 0.14em;
}

.review-fieldnote-photo {
  position: relative;
  display: block;
  width: clamp(165px, 18vw, 210px);
  aspect-ratio: 1;
  margin-top: 26px;
  overflow: hidden;
  border: 7px solid rgba(255, 255, 250, 0.82);
  border-radius: 50%;
  background: #edf1e8;
  box-shadow:
    0 18px 34px rgba(48, 64, 45, 0.14),
    0 0 0 1px rgba(73, 98, 68, 0.14);
}

.review-fieldnote-photo::after {
  position: absolute;
  inset: -1px;
  content: "";
  border: 1px solid rgba(67, 88, 61, 0.18);
  border-radius: 50%;
  pointer-events: none;
}

.review-fieldnote-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review-fieldnote-photo.small {
  width: 76px;
  margin: 0;
  border-width: 4px;
  box-shadow:
    0 8px 18px rgba(48, 64, 45, 0.12),
    0 0 0 1px rgba(73, 98, 68, 0.12);
}

.review-fieldnote-name {
  margin-top: 2px;
  gap: 4px;
}

.review-fieldnote-name span {
  display: block;
  color: rgba(69, 84, 66, 0.56);
  text-transform: uppercase;
}

.review-fieldnote-name strong {
  font-size: clamp(32px, 4.2vw, 42px);
}

.review-fieldnote-stars {
  min-height: 38px;
  margin: 0;
}

.review-fieldnote-stars button {
  color: rgba(65, 78, 61, 0.24);
  font-size: 34px;
}

.review-readonly-stars {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  color: #6b955f;
  font: 400 28px / 1 Georgia, serif;
  text-shadow: 0 0 12px rgba(120, 160, 111, 0.22);
}

.review-readonly-stars b {
  color: rgba(31, 37, 30, 0.72);
  font: 650 12px / 1 Arial, sans-serif;
  letter-spacing: 0.12em;
}

.review-fieldnote-input {
  width: min(100%, 420px);
  margin-top: 4px;
  padding: 14px 14px 10px;
  border-color: rgba(73, 98, 68, 0.16);
  background: rgba(255, 255, 250, 0.52);
  box-shadow: none;
}

.review-fieldnote-input textarea {
  min-height: 122px;
  border: 0;
  border-radius: 0;
  background:
    repeating-linear-gradient(to bottom, transparent 0 29px, rgba(95, 139, 86, 0.18) 30px 31px),
    transparent;
  padding: 10px 8px 4px;
  font-size: 18px;
  line-height: 1.52;
}

.review-fieldnote-input textarea:focus {
  box-shadow: none;
}

.review-fieldnote-page .review-submit-btn {
  width: min(100%, 350px);
  min-height: 48px;
  margin-top: 2px;
  border-radius: 4px;
}

.review-best-note {
  display: grid;
  gap: 10px;
  width: min(100%, 392px);
  margin-top: 6px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(73, 98, 68, 0.13);
  border-radius: 4px;
  background: rgba(255, 255, 250, 0.5);
  box-shadow: 0 10px 28px rgba(56, 76, 52, 0.07);
}

.review-best-note span {
  color: rgba(69, 84, 66, 0.62);
  text-transform: uppercase;
}

.review-best-note blockquote {
  margin: 0;
  color: #1f251e;
  font: 400 21px / 1.28 Georgia, serif;
  letter-spacing: 0;
}

.review-best-note blockquote::before,
.review-best-note blockquote::after {
  color: rgba(95, 139, 86, 0.65);
}

.review-best-note blockquote::before {
  content: "\"";
}

.review-best-note blockquote::after {
  content: "\"";
}

.review-best-note p,
.review-archive-count {
  margin: 0;
  color: rgba(45, 58, 43, 0.58);
  font: 650 10px / 1.4 Arial, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.review-archive-count {
  margin-top: 2px;
}

.review-side-page {
  position: absolute;
  top: 86px;
  z-index: 2;
  display: grid;
  justify-items: start;
  gap: 9px;
  width: 248px;
  min-height: 350px;
  padding: 18px 18px 20px;
  border: 1px solid rgba(67, 88, 61, 0.15);
  border-radius: 5px 14px 12px 5px;
  background:
    linear-gradient(180deg, rgba(255, 255, 252, 0.86), rgba(250, 247, 235, 0.88)),
    #fbf7e9;
  color: #1f251e;
  opacity: 0.52;
  text-align: left;
  box-shadow:
    0 18px 42px rgba(43, 58, 39, 0.11),
    -7px 0 14px rgba(58, 43, 28, 0.05) inset;
  transition: opacity 0.18s ease, transform 0.22s ease, box-shadow 0.18s ease;
}

.review-side-page::before {
  position: absolute;
  inset: 15px;
  content: "";
  opacity: 0.32;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 27px, rgba(95, 139, 86, 0.12) 28px 29px);
}

.review-side-page > * {
  position: relative;
  z-index: 1;
}

.review-side-page:hover,
.review-side-page:focus-visible {
  opacity: 0.88;
  outline: none;
  box-shadow:
    0 22px 50px rgba(43, 58, 39, 0.15),
    -7px 0 14px rgba(58, 43, 28, 0.05) inset;
}

.review-side-older {
  left: 22px;
  transform: translateX(-10px) rotate(-1.6deg);
}

.review-side-older:hover,
.review-side-older:focus-visible {
  transform: translateX(-18px) rotate(-2.2deg);
}

.review-side-newer {
  right: 22px;
  transform: translateX(10px) rotate(1.6deg);
}

.review-side-newer:hover,
.review-side-newer:focus-visible {
  transform: translateX(18px) rotate(2.2deg);
}

.review-side-date {
  display: grid;
  gap: 3px;
  color: rgba(69, 104, 62, 0.78);
  text-transform: uppercase;
}

.review-side-date small {
  color: rgba(45, 58, 43, 0.44);
  font: 650 9px / 1.2 Arial, sans-serif;
  letter-spacing: 0.12em;
}

.review-side-page strong {
  color: #1f251e;
  font: 400 25px / 1 Georgia, serif;
  letter-spacing: 0;
}

.review-side-page .review-readonly-stars {
  justify-content: start;
  gap: 7px;
  font-size: 18px;
}

.review-side-page .review-readonly-stars b {
  font-size: 10px;
}

.review-side-copy {
  display: block;
  color: rgba(31, 37, 30, 0.66);
  font: 400 14px / 1.36 Georgia, serif;
  letter-spacing: 0;
}

.review-turn-older .review-fieldnote-page {
  animation: reviewPageFromLeft 0.44s cubic-bezier(0.2, 0.76, 0.24, 1) both;
}

.review-turn-newer .review-fieldnote-page {
  animation: reviewPageFromRight 0.44s cubic-bezier(0.2, 0.76, 0.24, 1) both;
}

.review-turn-older .review-side-newer,
.review-turn-newer .review-side-older {
  animation: reviewSideSettle 0.44s cubic-bezier(0.2, 0.76, 0.24, 1) both;
}

@keyframes reviewPageFromLeft {
  from {
    opacity: 0.72;
    transform: translateX(-120px) rotateY(-10deg) rotate(-1.8deg);
  }

  to {
    opacity: 1;
    transform: translateX(0) rotateY(0) rotate(0);
  }
}

@keyframes reviewPageFromRight {
  from {
    opacity: 0.72;
    transform: translateX(120px) rotateY(10deg) rotate(1.8deg);
  }

  to {
    opacity: 1;
    transform: translateX(0) rotateY(0) rotate(0);
  }
}

@keyframes reviewSideSettle {
  from {
    opacity: 0;
  }

  to {
    opacity: 0.52;
  }
}

@media (max-height: 880px) and (min-width: 981px) {
  .ritual-room.review .room-content {
    padding-top: 82px;
    padding-bottom: 122px;
  }

  .review-title-only h2 {
    font-size: 58px;
  }

  .review-fieldnote-stage {
    min-height: 552px;
  }

  .review-fieldnote-page {
    min-height: 540px;
    padding-top: 24px;
    padding-bottom: 26px;
  }

  .review-fieldnote-photo {
    width: 155px;
    margin-top: 20px;
  }

  .review-fieldnote-input textarea {
    min-height: 100px;
  }
}

@media (max-width: 980px) {
  .ritual-room.review .room-content {
    padding-top: 132px;
  }

  .review-fieldnote-stage {
    display: grid;
    gap: 14px;
    min-height: 0;
  }

  .review-fieldnote-page {
    order: 1;
    width: min(100%, 520px);
    min-height: auto;
  }

  .review-side-page {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: min(100%, 420px);
    min-height: 0;
    opacity: 0.68;
    transform: none;
  }

  .review-side-older,
  .review-side-newer,
  .review-side-older:hover,
  .review-side-older:focus-visible,
  .review-side-newer:hover,
  .review-side-newer:focus-visible {
    transform: none;
  }

  .review-side-older {
    order: 2;
  }

  .review-side-newer {
    order: 3;
  }
}

@media (max-width: 560px) {
  .review-fieldnote-page {
    width: min(100%, calc(100vw - 30px));
    padding: 28px 22px 28px 34px;
  }

  .review-page-meta {
    position: relative;
    top: auto;
    right: auto;
    justify-items: center;
    margin-bottom: 2px;
    text-align: center;
  }

  .review-fieldnote-photo {
    width: clamp(142px, 48vw, 184px);
    margin-top: 2px;
  }

  .review-fieldnote-name strong {
    font-size: 31px;
  }

  .review-best-note blockquote {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .review-turn-older .review-fieldnote-page,
  .review-turn-newer .review-fieldnote-page,
  .review-turn-older .review-side-newer,
  .review-turn-newer .review-side-older {
    animation: none;
  }
}

/* V014b - more centered field-note composition and hand-drawn review page. */
.ritual-room.review .room-content {
  align-items: flex-start;
  padding-top: clamp(108px, 9.2vh, 128px);
}

.review-v014 {
  width: min(100%, 1010px);
  transform: translateX(clamp(8px, 1.4vw, 20px));
}

.review-fieldnote-stage {
  width: min(100%, 900px);
  min-height: clamp(600px, 63vh, 680px);
}

.review-fieldnote-page {
  width: clamp(455px, 41vw, 532px);
  min-height: clamp(584px, 63vh, 668px);
  border-color: rgba(58, 74, 54, 0.16);
  background:
    radial-gradient(circle at 16% 18%, rgba(104, 86, 59, 0.048) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 32%, rgba(104, 86, 59, 0.038) 0 1px, transparent 2px),
    radial-gradient(circle at 54% 82%, rgba(104, 86, 59, 0.036) 0 1px, transparent 2px),
    linear-gradient(92deg, rgba(255, 255, 255, 0.42), transparent 18%, transparent 78%, rgba(93, 75, 48, 0.035)),
    linear-gradient(180deg, rgba(255, 255, 250, 0.94), rgba(249, 247, 235, 0.92)),
    #fbf7e9;
  background-size: 130px 122px, 171px 151px, 111px 107px, auto, auto, auto;
  box-shadow:
    0 30px 74px rgba(43, 58, 39, 0.15),
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    -10px 0 18px rgba(58, 43, 28, 0.075) inset,
    7px 0 20px rgba(84, 95, 72, 0.035) inset;
}

.review-fieldnote-page::before {
  inset: 24px 28px 22px 42px;
  opacity: 0.5;
  background:
    repeating-linear-gradient(178.8deg, transparent 0 30px, rgba(83, 106, 77, 0.115) 31px 32px, transparent 33px 34px),
    repeating-linear-gradient(180.7deg, transparent 0 30px, rgba(83, 106, 77, 0.055) 31px 32px, transparent 33px 34px),
    linear-gradient(90deg, rgba(158, 84, 62, 0.11) 1px, transparent 2px);
  background-position: 0 0, 0 2px, 0 0;
  filter: blur(0.18px);
}

.review-fieldnote-page::after {
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: inherit;
  opacity: 0.62;
  background:
    radial-gradient(ellipse at 80% 83%, transparent 0 64px, rgba(99, 123, 91, 0.055) 65px 66px, transparent 67px),
    radial-gradient(ellipse at 28% 20%, rgba(106, 91, 62, 0.04), transparent 27%),
    radial-gradient(ellipse at 72% 12%, rgba(255, 255, 255, 0.42), transparent 18%),
    linear-gradient(3deg, transparent 0 57%, rgba(70, 81, 66, 0.06) 57% calc(57% + 1px), transparent calc(57% + 1px)),
    linear-gradient(166deg, transparent 0 78%, rgba(70, 81, 66, 0.04) 78% calc(78% + 1px), transparent calc(78% + 1px)),
    linear-gradient(90deg, transparent 0 15%, rgba(255, 255, 245, 0.32) 15% 19%, transparent 19% 100%);
}

.review-fieldnote-page,
.review-side-page {
  font-family: "Segoe Script", "Lucida Handwriting", "Bradley Hand ITC", "Ink Free", cursive;
}

.review-page-meta span,
.review-page-meta em,
.review-fieldnote-name span,
.review-fieldnote-input label,
.review-best-note span,
.review-archive-count,
.review-side-date,
.review-side-date small,
.review-readonly-stars b {
  font-family: "Segoe Script", "Lucida Handwriting", "Bradley Hand ITC", "Ink Free", cursive;
  letter-spacing: 0.13em;
}

.review-page-meta strong {
  color: rgba(82, 124, 74, 0.9);
  font: 700 28px / 1 "Segoe Script", "Lucida Handwriting", "Bradley Hand ITC", "Ink Free", cursive;
  letter-spacing: 0.04em;
}

.review-fieldnote-name strong,
.review-side-page strong,
.review-best-note blockquote,
.review-side-copy,
.review-fieldnote-input textarea {
  font-family: "Segoe Script", "Lucida Handwriting", "Bradley Hand ITC", "Ink Free", cursive;
}

.review-fieldnote-name strong {
  font-size: clamp(34px, 4vw, 44px);
  font-weight: 600;
}

.review-fieldnote-input {
  border-color: rgba(73, 98, 68, 0.18);
  background:
    radial-gradient(ellipse at 86% 78%, rgba(80, 103, 73, 0.035), transparent 28%),
    rgba(255, 255, 250, 0.38);
}

.review-fieldnote-input textarea {
  color: rgba(22, 27, 21, 0.9);
  background:
    repeating-linear-gradient(179.4deg, transparent 0 29px, rgba(83, 106, 77, 0.16) 30px 31px, transparent 32px),
    transparent;
  font-size: 18px;
  font-weight: 500;
}

.review-fieldnote-input textarea::placeholder {
  color: rgba(69, 84, 66, 0.42);
}

.review-fieldnote-stars {
  gap: 12px;
  min-height: 46px;
}

.review-fieldnote-stars button {
  width: 37px;
  height: 43px;
  border: 0;
  background: transparent;
  color: transparent;
  -webkit-text-fill-color: rgba(120, 160, 111, 0.06);
  -webkit-text-stroke: 1.15px rgba(76, 91, 72, 0.5);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 250, 0.68));
  font-family: "Segoe UI Symbol", "Arial Unicode MS", Georgia, serif;
  font-size: 34px;
  line-height: 1;
  text-shadow: none;
}

.review-fieldnote-stars button:hover,
.review-fieldnote-stars button:focus-visible {
  transform: translateY(-1px) rotate(-2deg);
}

.review-fieldnote-stars:not([data-hover-rating]) button.active,
.review-fieldnote-stars[data-hover-rating="1"] button:nth-child(-n+1),
.review-fieldnote-stars[data-hover-rating="2"] button:nth-child(-n+2),
.review-fieldnote-stars[data-hover-rating="3"] button:nth-child(-n+3),
.review-fieldnote-stars[data-hover-rating="4"] button:nth-child(-n+4),
.review-fieldnote-stars[data-hover-rating="5"] button:nth-child(-n+5) {
  border-color: transparent;
  background: transparent;
  color: #6f9d65;
  -webkit-text-fill-color: rgba(111, 157, 101, 0.82);
  -webkit-text-stroke: 1.2px rgba(54, 83, 49, 0.78);
  box-shadow: none;
  text-shadow:
    0 0 7px rgba(120, 160, 111, 0.18),
    0 1px 0 rgba(255, 255, 250, 0.7);
}

.review-fieldnote-stars[data-hover-rating] button {
  color: transparent;
  box-shadow: none;
}

.review-readonly-stars {
  color: #6f9d65;
  font-family: "Segoe Script", "Lucida Handwriting", "Bradley Hand ITC", "Ink Free", cursive;
  text-shadow: 0 0 8px rgba(120, 160, 111, 0.16);
}

.review-side-page {
  left: auto;
  min-height: 340px;
  background:
    radial-gradient(circle at 18% 20%, rgba(104, 86, 59, 0.045) 0 1px, transparent 2px),
    linear-gradient(180deg, rgba(255, 255, 252, 0.84), rgba(250, 247, 235, 0.84)),
    #fbf7e9;
  background-size: 118px 104px, auto, auto;
}

.review-side-older {
  left: 58px;
  transform: translateX(-6px) rotate(-1.4deg);
}

.review-side-older:hover,
.review-side-older:focus-visible {
  transform: translateX(-12px) rotate(-2deg);
}

.review-side-newer {
  right: 58px;
  transform: translateX(6px) rotate(1.4deg);
}

.review-side-newer:hover,
.review-side-newer:focus-visible {
  transform: translateX(12px) rotate(2deg);
}

@media (max-height: 880px) and (min-width: 981px) {
  .ritual-room.review .room-content {
    padding-top: 88px;
  }

  .review-fieldnote-stage {
    min-height: 568px;
  }

  .review-fieldnote-page {
    min-height: 548px;
  }
}

@media (max-width: 980px) {
  .review-v014 {
    transform: none;
  }
}

/* V014c - rougher field-note page and imperfect pencil stars. */
.ritual-room.review .room-content {
  padding-top: clamp(136px, 12vh, 164px);
}

.review-v014 {
  --review-scribble-font: "Segoe Script", "Lucida Handwriting", "Bradley Hand ITC", "Ink Free", cursive;
  margin-top: clamp(10px, 2.2vh, 30px);
  transform: none;
}

.review-fieldnote-stage[data-review-page="0"] {
  transform: translateX(clamp(44px, 7vw, 86px));
}

.review-fieldnote-page {
  border-color: rgba(50, 66, 47, 0.13);
  border-radius: 8px 23px 17px 6px / 12px 18px 26px 10px;
  background:
    radial-gradient(ellipse at 4% 42%, rgba(88, 69, 45, 0.07), transparent 19%),
    radial-gradient(circle at 92% 7%, rgba(89, 112, 80, 0.055) 0 1px, transparent 2px),
    radial-gradient(circle at 23% 87%, rgba(89, 112, 80, 0.045) 0 1px, transparent 2px),
    radial-gradient(circle at 58% 28%, rgba(122, 93, 58, 0.04) 0 1px, transparent 2px),
    linear-gradient(88deg, rgba(255, 255, 255, 0.56), transparent 16%, transparent 81%, rgba(93, 75, 48, 0.055)),
    linear-gradient(183deg, rgba(255, 255, 250, 0.91), rgba(247, 244, 230, 0.88)),
    #fbf5e5;
  background-size: auto, 97px 113px, 141px 127px, 181px 173px, auto, auto, auto;
  box-shadow:
    0 32px 76px rgba(43, 58, 39, 0.12),
    0 12px 26px rgba(43, 58, 39, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.86) inset,
    -11px 0 18px rgba(58, 43, 28, 0.075) inset,
    7px 0 17px rgba(84, 95, 72, 0.04) inset;
}

.review-fieldnote-page::before {
  opacity: 0.43;
  background:
    repeating-linear-gradient(179.2deg, transparent 0 30px, rgba(75, 91, 71, 0.1) 31px 32px, transparent 33px 34px),
    repeating-linear-gradient(181deg, transparent 0 30px, rgba(75, 91, 71, 0.045) 31px 32px, transparent 33px 34px),
    linear-gradient(90deg, rgba(142, 76, 58, 0.1) 1px, transparent 2px);
  filter: blur(0.32px);
}

.review-fieldnote-page::after {
  opacity: 0.72;
  background:
    radial-gradient(ellipse at 84% 84%, transparent 0 62px, rgba(92, 113, 84, 0.052) 63px 64px, transparent 65px),
    radial-gradient(ellipse at 69% 73%, rgba(255, 255, 255, 0.28), transparent 14%),
    radial-gradient(ellipse at 21% 18%, rgba(94, 72, 45, 0.052), transparent 24%),
    linear-gradient(2deg, transparent 0 58%, rgba(58, 70, 55, 0.05) 58% calc(58% + 1px), transparent calc(58% + 1px)),
    linear-gradient(174deg, transparent 0 79%, rgba(58, 70, 55, 0.04) 79% calc(79% + 1px), transparent calc(79% + 1px)),
    linear-gradient(104deg, transparent 0 36%, rgba(255, 255, 245, 0.32) 36% 38%, transparent 38% 100%),
    radial-gradient(ellipse at 47% 61%, transparent 0 44px, rgba(73, 85, 67, 0.035) 45px 46px, transparent 47px);
}

.review-fieldnote-page,
.review-side-page {
  font-family: Georgia, "Times New Roman", serif;
}

.review-page-meta strong,
.review-fieldnote-name strong,
.review-side-page strong {
  color: rgba(24, 31, 23, 0.92);
  font-family: var(--review-scribble-font);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-shadow:
    0.35px -0.25px 0 rgba(24, 31, 23, 0.28),
    -0.35px 0.25px 0 rgba(95, 139, 86, 0.16);
}

.review-page-meta strong {
  color: rgba(70, 111, 62, 0.96);
  font-size: 31px;
  line-height: 0.92;
  transform: rotate(-1.2deg);
}

.review-fieldnote-name strong {
  font-size: clamp(36px, 4.2vw, 48px);
  line-height: 0.96;
  transform: rotate(-0.7deg);
}

.review-page-meta span,
.review-page-meta em,
.review-fieldnote-name span,
.review-fieldnote-input label,
.review-best-note span,
.review-archive-count,
.review-side-date,
.review-side-date small,
.review-readonly-stars b {
  font-family: Arial, sans-serif;
  letter-spacing: 0.14em;
}

.review-fieldnote-input textarea,
.review-best-note blockquote,
.review-side-copy {
  font-family: Georgia, "Times New Roman", serif;
}

.review-fieldnote-input {
  border-radius: 7px 13px 10px 5px / 9px 12px 13px 8px;
}

.review-fieldnote-input textarea {
  background:
    repeating-linear-gradient(179.1deg, transparent 0 29px, rgba(83, 106, 77, 0.15) 30px 31px, transparent 32px),
    radial-gradient(ellipse at 84% 72%, rgba(95, 139, 86, 0.035), transparent 30%),
    transparent;
  font-size: 18px;
  font-weight: 400;
}

.review-fieldnote-stars {
  gap: 13px;
}

.review-fieldnote-stars button {
  --paint-x: 0px;
  --paint-y: 0px;
  --paint-rot: -2deg;
  --paint-scale: 1.1;
  --paint-smear: -2px 1px 0 rgba(111, 157, 101, 0.18), 1px -1px 0 rgba(111, 157, 101, 0.12);
  position: relative;
  overflow: visible;
  width: 39px;
  height: 43px;
  font-size: 0;
  filter: none;
}

.review-fieldnote-stars button::before,
.review-fieldnote-stars button::after {
  position: absolute;
  left: 50%;
  top: 52%;
  content: "★";
  font-family: "Segoe UI Symbol", "Arial Unicode MS", Georgia, serif;
  line-height: 1;
  pointer-events: none;
}

.review-fieldnote-stars button::before {
  z-index: 0;
  color: rgba(111, 157, 101, 0.08);
  font-size: 38px;
  opacity: 0.46;
  text-shadow: var(--paint-smear);
  transform: translate(calc(-50% + var(--paint-x)), calc(-50% + var(--paint-y))) rotate(var(--paint-rot)) scale(var(--paint-scale));
}

.review-fieldnote-stars button::after {
  z-index: 1;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.25px rgba(50, 65, 47, 0.62);
  font-size: 34px;
  text-shadow:
    0.5px 0.15px 0 rgba(50, 65, 47, 0.2),
    -0.35px -0.2px 0 rgba(50, 65, 47, 0.12);
  transform: translate(-50%, -50%) rotate(var(--outline-rot, 0deg));
}

.review-fieldnote-stars button:nth-child(1) {
  --paint-x: -2px;
  --paint-y: 1px;
  --paint-rot: -7deg;
  --paint-scale: 1.18;
  --outline-rot: -1deg;
  --paint-smear: -3px 1px 0 rgba(111, 157, 101, 0.19), 2px -1px 0 rgba(111, 157, 101, 0.14), 0 3px 0 rgba(111, 157, 101, 0.08);
}

.review-fieldnote-stars button:nth-child(2) {
  --paint-x: 1px;
  --paint-y: -2px;
  --paint-rot: 5deg;
  --paint-scale: 1.12;
  --outline-rot: 1.4deg;
  --paint-smear: 3px 0 0 rgba(111, 157, 101, 0.17), -1px 2px 0 rgba(111, 157, 101, 0.12), 1px -3px 0 rgba(111, 157, 101, 0.1);
}

.review-fieldnote-stars button:nth-child(3) {
  --paint-x: -1px;
  --paint-y: -1px;
  --paint-rot: -3deg;
  --paint-scale: 1.22;
  --outline-rot: -0.6deg;
  --paint-smear: -2px -2px 0 rgba(111, 157, 101, 0.18), 2px 2px 0 rgba(111, 157, 101, 0.11), 3px -1px 0 rgba(111, 157, 101, 0.09);
}

.review-fieldnote-stars button:nth-child(4) {
  --paint-x: 2px;
  --paint-y: 1px;
  --paint-rot: 8deg;
  --paint-scale: 1.14;
  --outline-rot: 1deg;
  --paint-smear: 2px 2px 0 rgba(111, 157, 101, 0.17), -3px 0 0 rgba(111, 157, 101, 0.1), 0 -3px 0 rgba(111, 157, 101, 0.11);
}

.review-fieldnote-stars button:nth-child(5) {
  --paint-x: -1px;
  --paint-y: 2px;
  --paint-rot: -9deg;
  --paint-scale: 1.2;
  --outline-rot: -1.5deg;
  --paint-smear: -2px 3px 0 rgba(111, 157, 101, 0.18), 3px 1px 0 rgba(111, 157, 101, 0.1), 1px -2px 0 rgba(111, 157, 101, 0.13);
}

.review-fieldnote-stars:not([data-hover-rating]) button.active::before,
.review-fieldnote-stars[data-hover-rating="1"] button:nth-child(-n+1)::before,
.review-fieldnote-stars[data-hover-rating="2"] button:nth-child(-n+2)::before,
.review-fieldnote-stars[data-hover-rating="3"] button:nth-child(-n+3)::before,
.review-fieldnote-stars[data-hover-rating="4"] button:nth-child(-n+4)::before,
.review-fieldnote-stars[data-hover-rating="5"] button:nth-child(-n+5)::before {
  color: rgba(111, 157, 101, 0.86);
  opacity: 1;
}

.review-fieldnote-stars:not([data-hover-rating]) button.active::after,
.review-fieldnote-stars[data-hover-rating="1"] button:nth-child(-n+1)::after,
.review-fieldnote-stars[data-hover-rating="2"] button:nth-child(-n+2)::after,
.review-fieldnote-stars[data-hover-rating="3"] button:nth-child(-n+3)::after,
.review-fieldnote-stars[data-hover-rating="4"] button:nth-child(-n+4)::after,
.review-fieldnote-stars[data-hover-rating="5"] button:nth-child(-n+5)::after {
  -webkit-text-stroke-color: rgba(44, 76, 39, 0.84);
}

.review-fieldnote-stars button:hover,
.review-fieldnote-stars button:focus-visible {
  transform: translateY(-1px) rotate(-1.5deg);
}

.review-side-page {
  border-radius: 7px 19px 15px 6px / 12px 17px 22px 9px;
}

@media (max-height: 880px) and (min-width: 981px) {
  .ritual-room.review .room-content {
    padding-top: 104px;
  }
}

@media (max-width: 980px) {
  .review-fieldnote-stage[data-review-page="0"] {
    transform: none;
  }
}

/* V014f - import the earlier TheClock space background and rotating 3D Earth. */
.ritual-room.clock {
  --module-accent: #8dc6e8;
  --module-accent-soft: rgba(141, 198, 232, 0.5);
  --module-accent-faint: rgba(141, 198, 232, 0.18);
  background:
    radial-gradient(circle at 50% 43%, rgba(48, 110, 170, 0.18), transparent 32%),
    linear-gradient(180deg, rgba(2, 7, 15, 0.16), rgba(1, 3, 8, 0.72)),
    url("clock-space-background-v005.png") center / cover no-repeat,
    #030712;
  color: #eef8ff;
}

.ritual-room.clock::before {
  z-index: 0;
  opacity: 0.22;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 50% 45%, rgba(141, 198, 232, 0.35), transparent 26%),
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.08), transparent 18%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

.ritual-room.clock::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block !important;
  content: "" !important;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 48%, transparent 0 19%, rgba(2, 5, 12, 0.12) 36%, rgba(2, 4, 9, 0.54) 82%),
    linear-gradient(180deg, rgba(2, 5, 12, 0.14), rgba(2, 5, 12, 0.42));
}

.ritual-room.clock .room-content {
  align-items: center;
  padding-top: 148px;
  padding-bottom: 132px;
}

.ritual-room.clock .clock-panel {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  width: min(100%, 760px);
  text-align: center;
}

.ritual-room.clock .room-title h2 {
  color: rgba(238, 248, 255, 0.94);
  text-shadow:
    0 0 36px rgba(141, 198, 232, 0.2),
    0 14px 40px rgba(0, 0, 0, 0.42);
}

.ritual-room.clock .room-title p {
  color: rgba(141, 198, 232, 0.82);
}

.clock-space-scene {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(260px, 34vw, 430px);
  aspect-ratio: 1;
  margin: clamp(22px, 4vh, 46px) auto clamp(20px, 3vh, 34px);
  perspective: 900px;
}

.clock-space-scene::before,
.clock-space-scene::after {
  position: absolute;
  content: "";
  border: 1px solid rgba(141, 198, 232, 0.22);
  border-radius: 50%;
  pointer-events: none;
}

.clock-space-scene::before {
  inset: 1%;
  opacity: 0.85;
  transform: rotate(-26deg) rotateX(58deg);
}

.clock-space-scene::after {
  inset: 15% -10%;
  opacity: 0.5;
  transform: rotate(54deg) rotateX(66deg);
}

.clock-space-scene .orbit {
  border-color: rgba(141, 198, 232, 0.16);
  box-shadow: 0 0 24px rgba(141, 198, 232, 0.06);
}

.clock-earth-shell {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: clamp(178px, 23vw, 292px);
  height: auto;
  aspect-ratio: 1;
  overflow: visible;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    0 0 70px rgba(81, 177, 234, 0.3),
    0 28px 64px rgba(0, 0, 0, 0.45);
  animation: clockEarthFloat 6.5s ease-in-out infinite;
  transform-style: preserve-3d;
}

.clock-earth-shell::before {
  position: absolute;
  inset: -5%;
  z-index: 1;
  content: "";
  border: 1px solid rgba(141, 198, 232, 0.28);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 26%, rgba(255, 255, 255, 0.26), transparent 18%),
    radial-gradient(circle at 68% 64%, transparent 0 48%, rgba(0, 0, 0, 0.54) 82%),
    radial-gradient(circle at 50% 50%, transparent 62%, rgba(95, 189, 247, 0.18) 78%, transparent 82%);
  pointer-events: none;
}

.clock-earth-shell::after {
  position: absolute;
  inset: -9%;
  z-index: 0;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, rgba(96, 188, 244, 0.24), transparent 68%);
  filter: blur(10px);
  pointer-events: none;
}

.clock-earth-image {
  position: absolute;
  inset: -3%;
  z-index: 0;
  display: block;
  border-radius: 50%;
  background: url("clock-earth-v003d.png") center / cover no-repeat;
  color: transparent;
  font-size: 0;
  line-height: 0;
  transform-origin: center;
  animation: clockEarthTurn 42s linear infinite;
  will-change: transform;
}

.clock-earth-shell [data-clock-seconds] {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 72px;
  min-height: 52px;
  border: 1px solid rgba(238, 248, 255, 0.24);
  border-radius: 999px;
  background: rgba(2, 7, 15, 0.34);
  color: rgba(238, 248, 255, 0.92);
  font: 400 clamp(32px, 4.8vw, 58px) / 1 Georgia, serif;
  letter-spacing: 0;
  text-shadow:
    0 0 18px rgba(141, 198, 232, 0.46),
    0 8px 28px rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(3px);
}

.clock-earth-shell small {
  position: absolute;
  z-index: 2;
  bottom: 21%;
  color: rgba(238, 248, 255, 0.66);
  font: 700 9px / 1 Arial, sans-serif;
  letter-spacing: 0.22em;
  text-shadow: 0 5px 18px rgba(0, 0, 0, 0.62);
}

.ritual-room.clock .hold-button {
  border-color: rgba(141, 198, 232, 0.38);
  background: rgba(8, 28, 48, 0.62);
  color: rgba(238, 248, 255, 0.88);
  box-shadow:
    0 18px 58px rgba(0, 0, 0, 0.34),
    0 0 36px rgba(81, 177, 234, 0.08);
}

.ritual-room.clock .hold-button.holding {
  background: rgba(165, 178, 173, 0.88);
  color: #07111c;
  box-shadow:
    0 22px 68px rgba(0, 0, 0, 0.4),
    0 0 52px rgba(141, 198, 232, 0.32);
}

@keyframes clockEarthTurn {
  to {
    transform: rotate(360deg);
  }
}

@keyframes clockEarthFloat {
  0%,
  100% {
    transform: rotateX(2deg) rotateY(-6deg) translateY(0);
  }

  50% {
    transform: rotateX(-2deg) rotateY(6deg) translateY(-8px);
  }
}

@media (max-width: 760px) {
  .ritual-room.clock .room-content {
    padding-top: 150px;
    padding-bottom: 148px;
  }

  .clock-space-scene {
    width: min(82vw, 340px);
  }

  .clock-earth-shell {
    width: min(58vw, 240px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .clock-earth-image,
  .clock-earth-shell {
    animation: none;
  }
}

/* V014g - TheClock integrated globe scene inside TheRitual. */
.ritual-room.clock {
  background:
    radial-gradient(circle at calc(50% + var(--clock-space-x, 0px)) calc(42% + var(--clock-space-y, 0px)), rgba(75, 149, 217, 0.24), transparent 30%),
    radial-gradient(circle at 76% 16%, rgba(141, 198, 232, 0.14), transparent 18%),
    linear-gradient(180deg, rgba(2, 7, 15, 0.16), rgba(1, 3, 8, 0.76)),
    url("clock-space-background-v005.png") calc(50% + var(--clock-space-x, 0px)) calc(50% + var(--clock-space-y, 0px)) / cover no-repeat,
    #030712;
}

.ritual-room.clock .room-content {
  align-items: center;
  padding-top: clamp(116px, 13vh, 154px);
  padding-bottom: 132px;
}

.ritual-room.clock .clock-panel {
  width: min(100%, 1180px);
}

.ritual-room.clock .room-title {
  margin-bottom: clamp(14px, 2.5vh, 26px);
}

.ritual-room.clock .room-title h2,
.clock-reveal h1 {
  color: rgba(238, 248, 255, 0.96);
  text-shadow:
    0 0 42px rgba(141, 198, 232, 0.22),
    0 18px 48px rgba(0, 0, 0, 0.52);
}

.ritual-room.clock .room-copy {
  max-width: 330px;
  margin-top: 16px;
  color: rgba(181, 216, 236, 0.72);
}

.clock-stage-shell {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(174px, 0.62fr) minmax(340px, 1fr) minmax(190px, 0.68fr);
  align-items: center;
  gap: clamp(18px, 3vw, 38px);
  width: min(100%, 1120px);
  margin: 0 auto;
}

.clock-webgl-scene {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(340px, 40vw, 560px);
  aspect-ratio: 1;
  margin: 0 auto;
  perspective: 1000px;
  cursor: grab;
  touch-action: none;
}

.clock-webgl-scene.is-dragging {
  cursor: grabbing;
}

.clock-webgl-scene::before,
.clock-webgl-scene::after {
  position: absolute;
  content: "";
  border: 1px solid rgba(141, 198, 232, 0.2);
  border-radius: 50%;
  pointer-events: none;
}

.clock-webgl-scene::before {
  inset: 5%;
  opacity: 0.78;
  transform: rotate(-26deg) rotateX(58deg);
}

.clock-webgl-scene::after {
  inset: 14% -9%;
  opacity: 0.46;
  transform: rotate(54deg) rotateX(66deg);
}

.clock-webgl-scene .orbit {
  position: absolute;
  inset: 19%;
  border: 1px solid rgba(141, 198, 232, 0.12);
  border-radius: 50%;
  box-shadow: 0 0 28px rgba(141, 198, 232, 0.06);
  pointer-events: none;
}

.clock-webgl-scene .orbit-two {
  inset: 6% 20%;
  transform: rotate(70deg) rotateX(68deg);
}

.clock-webgl-scene .clock-earth-shell {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: clamp(264px, 31vw, 430px);
  aspect-ratio: 1;
  overflow: visible;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    0 0 80px rgba(81, 177, 234, 0.28),
    0 34px 72px rgba(0, 0, 0, 0.46);
  transform-style: preserve-3d;
  animation: clockGlobeBreathe 7s ease-in-out infinite;
}

.clock-webgl-scene .clock-earth-shell::before {
  position: absolute;
  inset: -5%;
  z-index: 5;
  content: "";
  border: 1px solid rgba(141, 198, 232, 0.26);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 27%, rgba(255, 255, 255, 0.18), transparent 19%),
    radial-gradient(circle at 67% 64%, transparent 0 51%, rgba(0, 0, 0, 0.38) 83%),
    radial-gradient(circle at 50% 50%, transparent 63%, rgba(95, 189, 247, 0.17) 79%, transparent 84%);
  pointer-events: none;
}

.clock-webgl-scene .clock-earth-shell::after {
  position: absolute;
  inset: -13%;
  z-index: 0;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, rgba(96, 188, 244, 0.25), transparent 68%);
  filter: blur(12px);
  pointer-events: none;
}

.clock-earth-canvas,
.clock-webgl-scene .clock-earth-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.clock-earth-canvas {
  z-index: 2;
  opacity: 0;
  transition: opacity 0.46s ease;
}

.clock-webgl-scene.is-webgl-ready .clock-earth-canvas {
  opacity: 1;
}

.clock-webgl-scene .clock-earth-image {
  z-index: 1;
  display: block;
  background: url("clock-earth-v003d.png") center / cover no-repeat;
  opacity: 1;
  color: transparent;
  font-size: 0;
  line-height: 0;
  transform-origin: center;
  animation: clockEarthTurn 42s linear infinite;
  transition: opacity 0.42s ease;
}

.clock-webgl-scene.is-webgl-ready .clock-earth-image {
  opacity: 0;
  animation: none;
}

.clock-earth-halo {
  position: absolute;
  inset: -8%;
  z-index: 3;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 59%, rgba(141, 198, 232, 0.18) 67%, transparent 74%),
    radial-gradient(circle at 31% 26%, rgba(255, 255, 255, 0.08), transparent 21%);
  pointer-events: none;
}

.clock-markers,
.clock-numbers,
.clock-hand-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 7;
  width: 84%;
  height: 84%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.clock-markers {
  opacity: 0.84;
}

.clock-markers i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 13px;
  border-radius: 999px;
  background: rgba(237, 225, 174, 0.56);
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(-40.5%);
  transform-origin: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

.clock-markers i:nth-child(3n+1) {
  width: 3px;
  height: 20px;
  background: rgba(237, 225, 174, 0.72);
}

.clock-numbers {
  z-index: 8;
  opacity: 0.26;
}

.clock-numbers span {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 26px;
  height: 20px;
  margin: -10px 0 0 -13px;
  color: rgba(238, 248, 255, 0.72);
  font: 700 11px / 1 Arial, sans-serif;
  letter-spacing: 0.04em;
  transform: rotate(var(--a)) translateY(-34.5%) rotate(calc(-1 * var(--a)));
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.68);
}

.clock-hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  z-index: 9;
  border-radius: 999px;
  transform: translateX(-50%) rotate(0deg);
  transform-origin: 50% 100%;
  pointer-events: none;
}

.clock-hour-hand {
  width: 9px;
  height: 23%;
  background: linear-gradient(90deg, #aeb6b5, #f2f1e9 42%, #858c8d);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.52);
}

.clock-minute-hand {
  width: 6px;
  height: 35%;
  background: linear-gradient(90deg, #bac1bf, #f5f4eb 44%, #858f91);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.56);
}

.clock-second-hand {
  width: 2px;
  height: 40%;
  background: linear-gradient(180deg, #f1d576, #a47d2e);
  box-shadow: 0 0 12px rgba(216, 191, 115, 0.34), 0 2px 7px rgba(0, 0, 0, 0.5);
}

.clock-second-hand::after {
  position: absolute;
  left: 50%;
  bottom: -18%;
  width: 2px;
  height: 20%;
  content: "";
  border-radius: 999px;
  background: linear-gradient(180deg, #9f7b2d, #d8bf73);
  transform: translateX(-50%);
}

.clock-center-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 11;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle, #f5f1de 0 18%, #b9b8ac 19% 55%, #697071 56% 72%, #ece8da 73%);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.54), 0 0 0 2px rgba(255, 255, 255, 0.18);
  transform: translate(-50%, -50%);
}

.clock-center-pin::after {
  position: absolute;
  inset: 11px;
  content: "";
  border-radius: 50%;
  background: #d8bf73;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.46);
}

.clock-earth-shell .clock-seconds-readout {
  position: absolute;
  right: 9%;
  bottom: 11%;
  z-index: 12;
  display: grid;
  place-items: center;
  min-width: 54px;
  min-height: 34px;
  border: 1px solid rgba(238, 248, 255, 0.24);
  border-radius: 999px;
  background: rgba(2, 7, 15, 0.48);
  color: rgba(238, 248, 255, 0.92);
  font: 400 25px / 1 Georgia, serif;
  letter-spacing: 0;
  text-shadow:
    0 0 18px rgba(141, 198, 232, 0.46),
    0 8px 28px rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(4px);
}

.clock-earth-shell small {
  position: absolute;
  right: 10%;
  bottom: 7%;
  z-index: 12;
  color: rgba(238, 248, 255, 0.62);
  font: 700 8px / 1 Arial, sans-serif;
  letter-spacing: 0.18em;
  text-shadow: 0 5px 18px rgba(0, 0, 0, 0.62);
}

.clock-world-card {
  position: relative;
  display: grid;
  gap: 10px;
  max-width: 246px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(141, 198, 232, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(7, 22, 38, 0.72), rgba(3, 11, 22, 0.5)),
    rgba(2, 7, 15, 0.42);
  color: rgba(238, 248, 255, 0.78);
  text-align: left;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
}

.clock-world-card::before {
  position: absolute;
  inset: 10px;
  content: "";
  border: 1px solid rgba(141, 198, 232, 0.08);
  border-radius: 5px;
  pointer-events: none;
}

.clock-world-card > * {
  position: relative;
  z-index: 1;
}

.clock-world-card span {
  color: rgba(141, 198, 232, 0.8);
  font: 800 10px / 1 Arial, sans-serif;
  letter-spacing: 0.22em;
}

.clock-world-card strong {
  color: rgba(238, 248, 255, 0.96);
  font: 400 31px / 1 Georgia, serif;
  letter-spacing: 0;
}

.clock-world-card p {
  margin: 0;
  color: rgba(209, 226, 236, 0.6);
  font: 400 13px / 1.5 Georgia, serif;
}

.clock-world-card-left {
  justify-self: end;
  transform: translateY(12px);
}

.clock-world-card-right {
  justify-self: start;
  transform: translateY(-16px);
}

.clock-signal-list,
.clock-reveal-origin-list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.clock-signal-list li,
.clock-reveal-origin-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(141, 198, 232, 0.12);
}

.clock-signal-list li:first-child,
.clock-reveal-origin-list li:first-child {
  padding-top: 0;
  border-top: 0;
}

.clock-signal-list li span,
.clock-reveal-origin-list li span {
  min-width: 0;
  overflow: hidden;
  color: rgba(238, 248, 255, 0.78);
  font: 700 11px / 1.15 Arial, sans-serif;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.clock-signal-list li strong,
.clock-reveal-origin-list li strong {
  color: rgba(238, 248, 255, 0.94);
  font: 700 12px / 1 Arial, sans-serif;
  letter-spacing: 0.02em;
}

.clock-signal-list li em,
.clock-reveal-origin-list li em {
  grid-column: 1 / -1;
  color: rgba(181, 216, 236, 0.5);
  font: 400 12px / 1.2 Georgia, serif;
  letter-spacing: 0;
}

.clock-hold-panel {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(100%, 430px);
  margin: clamp(18px, 3vh, 34px) auto 0;
}

.ritual-room.clock .clock-hold-button {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  width: 100%;
  min-height: 68px;
  aspect-ratio: auto;
  padding: 14px 24px;
  overflow: hidden;
  border: 1px solid rgba(141, 198, 232, 0.34);
  border-radius: 999px;
  background: rgba(8, 28, 48, 0.66);
  color: rgba(238, 248, 255, 0.86);
  box-shadow:
    0 18px 58px rgba(0, 0, 0, 0.34),
    0 0 36px rgba(81, 177, 234, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  cursor: pointer;
  user-select: none;
  touch-action: none;
  transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease, background 0.24s ease;
}

.clock-hold-fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(91, 188, 240, 0.66), rgba(216, 191, 115, 0.58)),
    rgba(141, 198, 232, 0.18);
  opacity: 0.82;
  transform: scaleX(var(--hold-progress, 0));
  transform-origin: left center;
  transition: transform 0.1s linear;
}

.clock-hold-button strong,
.clock-hold-button span {
  position: relative;
  z-index: 1;
}

.clock-hold-button strong {
  color: currentColor;
  font: 850 12px / 1 Arial, sans-serif;
  letter-spacing: 0.24em;
}

.clock-hold-button span {
  display: block;
  margin-top: 8px;
  color: rgba(238, 248, 255, 0.58);
  font: 400 13px / 1.1 Georgia, serif;
  letter-spacing: 0;
}

.ritual-room.clock .clock-hold-button.holding {
  transform: scale(1.025);
  border-color: rgba(141, 198, 232, 0.68);
  background: rgba(12, 45, 76, 0.78);
  color: #eef8ff;
}

.ritual-room.clock .clock-hold-button.ready {
  border-color: rgba(216, 191, 115, 0.66);
  background: rgba(36, 55, 68, 0.74);
  color: #fff4c8;
  animation: clockReadyPulse 1.65s ease-in-out infinite;
}

.ritual-room.clock .clock-hold-button.given {
  border-color: rgba(141, 198, 232, 0.38);
  color: rgba(238, 248, 255, 0.68);
  animation: none;
}

.clock-hold-caption {
  margin: 0;
  color: rgba(181, 216, 236, 0.56);
  font: 700 10px / 1 Arial, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.ritual-room.clock .give-button:not(:disabled):not(.given) {
  border-color: rgba(216, 191, 115, 0.6);
  background: rgba(216, 191, 115, 0.88);
  color: #06101a;
  box-shadow:
    0 0 34px rgba(216, 191, 115, 0.38),
    0 18px 40px rgba(0, 0, 0, 0.26);
  animation: clockReadyPulse 1.65s ease-in-out infinite;
}

.clock-reveal-layout {
  display: grid;
  grid-template-columns: minmax(280px, 520px) minmax(280px, 360px);
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vw, 52px);
  width: min(100%, 1040px);
  margin: 24px auto 0;
}

.clock-reveal-layout .clock-webgl-scene {
  width: clamp(300px, 36vw, 500px);
}

.clock-reveal-card {
  border-color: rgba(141, 198, 232, 0.24);
  background:
    linear-gradient(180deg, rgba(7, 22, 38, 0.84), rgba(3, 11, 22, 0.72)),
    rgba(2, 7, 15, 0.48);
  color: rgba(238, 248, 255, 0.86);
  box-shadow:
    0 26px 76px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.clock-reveal-card .reveal-stat {
  border-color: rgba(141, 198, 232, 0.18);
  background: rgba(238, 248, 255, 0.05);
}

.clock-reveal-card .reveal-stat span,
.clock-reveal-card .reveal-countdown {
  color: rgba(181, 216, 236, 0.62);
}

.clock-reveal-card .reveal-stat strong {
  color: rgba(238, 248, 255, 0.96);
}

.clock-reveal-origin-list {
  margin-top: 10px;
}

@keyframes clockGlobeBreathe {
  0%,
  100% {
    transform: translateY(0) rotateX(1deg);
  }

  50% {
    transform: translateY(-7px) rotateX(-1deg);
  }
}

@keyframes clockReadyPulse {
  0%,
  100% {
    box-shadow:
      0 0 26px rgba(216, 191, 115, 0.22),
      0 18px 44px rgba(0, 0, 0, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }

  50% {
    box-shadow:
      0 0 46px rgba(216, 191, 115, 0.44),
      0 22px 54px rgba(0, 0, 0, 0.36),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }
}

@media (max-width: 1020px) {
  .clock-stage-shell {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .clock-world-card {
    max-width: min(100%, 420px);
    width: min(100%, 420px);
  }

  .clock-world-card-left,
  .clock-world-card-right {
    justify-self: center;
    transform: none;
  }

  .clock-world-card-left {
    order: 2;
  }

  .clock-webgl-scene {
    order: 1;
    width: min(78vw, 470px);
  }

  .clock-world-card-right {
    order: 3;
  }

  .clock-reveal-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .ritual-room.clock .room-content {
    padding-top: 126px;
  }

  .clock-webgl-scene {
    width: min(88vw, 360px);
  }

  .clock-webgl-scene .clock-earth-shell {
    width: min(68vw, 292px);
  }

  .clock-world-card {
    padding: 16px;
  }

  .clock-earth-shell .clock-seconds-readout {
    min-width: 45px;
    min-height: 30px;
    font-size: 21px;
  }

  .clock-hold-panel {
    width: min(100%, 340px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .clock-webgl-scene .clock-earth-shell,
  .ritual-room.clock .clock-hold-button.ready,
  .ritual-room.clock .give-button:not(:disabled):not(.given) {
    animation: none;
  }
}

/* V014h - local-only admin testing reset. */
.admin-reset-button {
  position: fixed;
  top: 82px;
  right: 34px;
  z-index: 120;
  display: inline-grid;
  place-items: center;
  min-width: 104px;
  min-height: 30px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--module-accent, #b45d45) 55%, rgba(255, 255, 255, 0.42));
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.04)),
    color-mix(in srgb, var(--module-accent, #b45d45) 16%, rgba(255, 255, 255, 0.68));
  color: color-mix(in srgb, var(--module-accent, #b45d45) 72%, #1b1712);
  font: 800 9px / 1 Arial, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
  cursor: pointer;
  opacity: 0.74;
  transition: opacity 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.admin-reset-button:hover,
.admin-reset-button:focus-visible {
  opacity: 1;
  outline: none;
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--module-accent, #b45d45) 76%, rgba(255, 255, 255, 0.64));
}

.ritual-room.clock .admin-reset-button {
  background:
    linear-gradient(180deg, rgba(238, 248, 255, 0.16), rgba(238, 248, 255, 0.05)),
    rgba(8, 28, 48, 0.72);
  color: rgba(238, 248, 255, 0.82);
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.24),
    0 0 24px rgba(141, 198, 232, 0.12);
}

@media (max-width: 760px) {
  .admin-reset-button {
    top: 76px;
    right: 14px;
    min-width: 88px;
    min-height: 28px;
    padding: 0 10px;
    font-size: 8px;
    letter-spacing: 0.12em;
  }
}

/* V014i - light homepage direction, closer to the ritual modules. */
.landing {
  --landing-ink: #1d1b17;
  --landing-muted: rgba(58, 52, 43, 0.58);
  --landing-paper: #f5f1e7;
  --landing-line: rgba(147, 122, 78, 0.13);
  --landing-accent: #5d7456;
  --landing-accent-2: #426d86;
  background:
    radial-gradient(circle at 18% 21%, rgba(93, 116, 86, 0.07), transparent 18%),
    radial-gradient(circle at 78% 28%, rgba(66, 109, 134, 0.09), transparent 21%),
    radial-gradient(circle at 54% 82%, rgba(93, 116, 86, 0.08), transparent 22%),
    linear-gradient(rgba(88, 70, 45, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 70, 45, 0.03) 1px, transparent 1px),
    var(--landing-paper);
  background-size:
    auto,
    auto,
    auto,
    31px 31px,
    31px 31px,
    auto;
  color: var(--landing-ink);
}

.landing::before {
  opacity: 0.08;
  mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

.landing::after {
  position: absolute;
  inset: 14px;
  z-index: 0;
  content: "";
  border: 1px solid rgba(147, 122, 78, 0.16);
  pointer-events: none;
}

.landing-orbit {
  width: min(68vw, 760px);
  border-color: rgba(147, 122, 78, 0.15);
  opacity: 0.9;
  transform: rotate(18deg);
}

.landing-orbit::before {
  position: absolute;
  inset: 12%;
  content: "";
  border: 1px solid rgba(66, 109, 134, 0.11);
  border-radius: 50%;
  transform: rotate(-32deg);
}

.landing-orbit::after {
  top: 13%;
  left: 13%;
  width: 8px;
  height: 8px;
  background: var(--landing-accent-2);
  box-shadow:
    0 0 0 5px rgba(66, 109, 134, 0.08),
    0 0 26px rgba(66, 109, 134, 0.22);
}

.landing-header {
  z-index: 6;
  align-items: flex-start;
}

.landing .wordmark {
  color: var(--landing-ink);
  font-size: 24px;
}

.landing .wordmark span,
.landing h1 span {
  color: var(--landing-accent);
}

.landing .countdown {
  color: var(--landing-accent);
}

.landing .countdown span,
.landing .countdown small {
  color: rgba(58, 52, 43, 0.48);
}

.landing .module-menu button {
  color: rgba(58, 52, 43, 0.42);
  opacity: 1;
}

.landing .module-menu button:hover,
.landing .module-menu button:focus-visible {
  color: var(--landing-accent);
  outline: none;
}

.landing section {
  position: relative;
  z-index: 2;
  width: min(100%, 900px);
  padding: clamp(22px, 4vw, 52px);
}

.landing section::before,
.landing section::after {
  position: absolute;
  left: 50%;
  width: min(620px, 72vw);
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(147, 122, 78, 0.28), transparent);
  transform: translateX(-50%);
  pointer-events: none;
}

.landing section::before {
  top: 0;
}

.landing section::after {
  bottom: 0;
}

.landing .eyebrow {
  margin-bottom: 20px;
  color: rgba(93, 116, 86, 0.9);
}

.landing h1 {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.075em;
  color: var(--landing-ink);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.58),
    0 20px 48px rgba(79, 63, 38, 0.08);
}

.landing-earth-dot {
  display: inline-block;
  width: 0.23em;
  height: 0.23em;
  margin-left: 0.015em;
  border: 1px solid rgba(238, 248, 255, 0.62);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.75), transparent 18%),
    url("clock-earth-v003d.png") center / cover no-repeat,
    #426d86;
  box-shadow:
    0 0 0 0.045em rgba(66, 109, 134, 0.08),
    0 0 0.18em rgba(66, 109, 134, 0.2);
  transform: translateY(-0.03em);
}

.landing .tagline {
  color: rgba(29, 27, 23, 0.74);
}

.landing-countdown {
  margin: clamp(24px, 4vh, 44px) 0 clamp(18px, 3vh, 30px);
  color: rgba(58, 52, 43, 0.44);
  font: 400 clamp(54px, 7vw, 92px) / 0.88 Georgia, serif;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}

.landing-countdown strong {
  color: var(--landing-accent);
  font-weight: 400;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.62),
    0 14px 34px rgba(66, 109, 134, 0.12);
}

.landing .start-button {
  position: relative;
  min-width: 228px;
  min-height: 58px;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(93, 116, 86, 0.36);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.1)),
    linear-gradient(135deg, #6f8a66, #426d86);
  color: #fffdf4;
  font-weight: 850;
  box-shadow:
    0 18px 42px rgba(48, 76, 70, 0.18),
    0 0 0 7px rgba(93, 116, 86, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.landing .start-button::after {
  position: absolute;
  inset: 7px 10px auto;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  opacity: 0.82;
  pointer-events: none;
}

.landing .start-button:hover,
.landing .start-button:focus-visible {
  outline: none;
  transform: translateY(-2px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.08)),
    linear-gradient(135deg, #5d7456, #345d75);
  box-shadow:
    0 24px 56px rgba(48, 76, 70, 0.24),
    0 0 0 9px rgba(66, 109, 134, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.landing footer {
  z-index: 2;
  color: rgba(58, 52, 43, 0.52);
}

.landing .annual-progress {
  color: rgba(58, 52, 43, 0.58);
}

.landing .annual-track {
  background: rgba(147, 122, 78, 0.12);
}

.landing .annual-track i {
  background: var(--landing-accent);
  opacity: 0.72;
}

.landing .admin-reset-button {
  border-color: rgba(93, 116, 86, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08)),
    rgba(93, 116, 86, 0.08);
  color: rgba(93, 116, 86, 0.86);
}

.landing .admin-reset-button:hover,
.landing .admin-reset-button:focus-visible {
  border-color: rgba(66, 109, 134, 0.44);
  color: rgba(66, 109, 134, 0.94);
}

.landing .annual-track.annual-days > i.past {
  background: var(--landing-accent);
  opacity: 0.58;
}

.landing .annual-track.annual-days > i.today {
  background: var(--landing-accent-2);
  box-shadow: 0 0 10px rgba(66, 109, 134, 0.24);
}

@media (max-width: 860px) {
  .landing-header {
    align-items: flex-start;
  }

  .landing section {
    padding: 38px 22px;
  }
}

@media (max-width: 520px) {
  .landing::after {
    inset: 10px;
  }

  .landing .wordmark {
    font-size: 22px;
  }

  .landing .module-menu {
    max-height: 72px;
    overflow: hidden;
  }
}

/* V014k - calmer homepage pass with a stable countdown and living earth dot. */
.landing {
  background:
    linear-gradient(rgba(88, 70, 45, 0.036) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 70, 45, 0.03) 1px, transparent 1px),
    linear-gradient(180deg, #f8f6ef 0%, #f3f0e7 100%);
  background-size: 32px 32px, 32px 32px, auto;
}

.landing::before {
  opacity: 0.045;
}

.landing::after {
  border-color: rgba(93, 116, 86, 0.12);
}

.landing-orbit {
  display: none;
}

.landing-header {
  align-items: center;
}

.landing .wordmark span {
  color: var(--landing-ink);
}

.landing .account-button {
  border-color: rgba(93, 116, 86, 0.3);
  background: rgba(255, 255, 255, 0.42);
  color: var(--landing-ink);
  box-shadow:
    0 10px 28px rgba(58, 52, 43, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.landing .account-button:hover,
.landing .account-button:focus-visible {
  border-color: rgba(93, 116, 86, 0.52);
  color: var(--landing-accent);
  background: rgba(255, 255, 255, 0.6);
}

.landing section {
  width: min(100%, 880px);
  padding: clamp(22px, 3.4vw, 42px);
  transform: translateY(clamp(10px, 2.2vh, 28px));
}

.landing section::before,
.landing section::after {
  background: linear-gradient(90deg, transparent, rgba(93, 116, 86, 0.18), transparent);
}

.landing h1 {
  gap: 0.065em;
}

.landing-earth-dot {
  --landing-earth-tilt-x: 2deg;
  --landing-earth-tilt-y: 0deg;
  --landing-earth-shift-x: 4%;
  --landing-earth-shift-y: 3%;
  width: 0.225em;
  height: 0.225em;
  margin-left: -0.005em;
  border-color: rgba(243, 255, 248, 0.78);
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.72), transparent 19%),
    url("landing-earth-reference.png") var(--landing-earth-shift-x) var(--landing-earth-shift-y) / 222% 222% no-repeat,
    #05adcb;
  box-shadow:
    0 0 0 0.038em rgba(255, 255, 255, 0.72),
    0 0 0.11em rgba(27, 94, 111, 0.26);
  transform: translateY(-0.045em) perspective(90px) rotateX(var(--landing-earth-tilt-x)) rotateY(var(--landing-earth-tilt-y));
  transform-origin: center;
  transition:
    transform 0.18s ease-out,
    background-position 0.18s ease-out,
    box-shadow 0.18s ease-out;
  will-change: transform, background-position;
  animation: landingEarthBreathe 4.8s ease-in-out infinite;
}

@keyframes landingEarthBreathe {
  0%,
  100% {
    box-shadow:
      0 0 0 0.038em rgba(255, 255, 255, 0.72),
      0 0 0.11em rgba(27, 94, 111, 0.24);
  }
  50% {
    box-shadow:
      0 0 0 0.045em rgba(255, 255, 255, 0.82),
      0 0 0.18em rgba(31, 124, 146, 0.34);
  }
}

.landing-countdown {
  display: block;
  width: 9.1ch;
  margin: clamp(26px, 4vh, 38px) auto clamp(18px, 2.8vh, 28px);
  color: rgba(58, 52, 43, 0.44);
  font: 700 clamp(36px, 4.25vw, 58px) / 1 "Courier New", Consolas, "Lucida Console", monospace;
  letter-spacing: 0.015em;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  text-align: center;
}

.landing-countdown strong {
  display: block;
  color: var(--landing-accent);
  font-weight: 700;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6),
    0 12px 30px rgba(93, 116, 86, 0.1);
}

.landing .start-button {
  min-width: 214px;
  min-height: 54px;
  border-color: rgba(56, 82, 58, 0.34);
  background: #637c62;
  color: #fffdf4;
  box-shadow:
    0 18px 38px rgba(58, 52, 43, 0.12),
    0 0 0 7px rgba(93, 116, 86, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.landing .start-button::after {
  display: none;
}

.landing .start-button:hover,
.landing .start-button:focus-visible {
  background: #536f5d;
  box-shadow:
    0 22px 46px rgba(58, 52, 43, 0.16),
    0 0 0 9px rgba(66, 109, 134, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.landing .admin-reset-button {
  border-color: rgba(93, 116, 86, 0.28);
  background: rgba(255, 255, 255, 0.42);
  color: rgba(93, 116, 86, 0.86);
}

/* V014l - ritual traces on the homepage. */
.landing {
  background:
    linear-gradient(115deg, transparent 0 41%, rgba(66, 109, 134, 0.026) 41.15% 41.45%, transparent 41.6%),
    linear-gradient(74deg, transparent 0 59%, rgba(93, 116, 86, 0.032) 59.1% 59.32%, transparent 59.46%),
    linear-gradient(rgba(88, 70, 45, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 70, 45, 0.028) 1px, transparent 1px),
    linear-gradient(180deg, #fbf9f2 0%, #f3f0e7 100%);
  background-size: auto, auto, 32px 32px, 32px 32px, auto;
}

.landing::after {
  border-color: rgba(93, 116, 86, 0.1);
}

.landing section {
  width: min(100%, 820px);
  padding: clamp(18px, 3vw, 36px);
  transform: translateY(clamp(8px, 1.6vh, 20px));
}

.landing section::before,
.landing section::after {
  width: min(560px, 64vw);
  background: linear-gradient(90deg, transparent, rgba(93, 116, 86, 0.24), rgba(66, 109, 134, 0.14), transparent);
}

.landing h1 {
  margin-bottom: clamp(18px, 2.8vh, 28px);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7),
    0 24px 54px rgba(58, 52, 43, 0.1);
}

.landing-earth-dot {
  width: 0.255em;
  height: 0.255em;
  margin-left: -0.01em;
}

.landing-countdown {
  width: 8.85ch;
  margin: 0 auto clamp(20px, 3vh, 30px);
  font: 700 clamp(34px, 3.75vw, 52px) / 1 "Courier New", Consolas, "Lucida Console", monospace;
  color: rgba(58, 52, 43, 0.38);
}

.landing-countdown span {
  display: block;
  margin-bottom: 10px;
  color: rgba(58, 52, 43, 0.42);
  font: 750 10px / 1 Arial, sans-serif;
  letter-spacing: 0.24em;
  text-align: center;
}

.landing-countdown strong {
  color: #587257;
}

.landing .start-button {
  min-width: 226px;
  min-height: 56px;
  border-color: rgba(45, 70, 50, 0.38);
  background: #4f6954;
  color: #fffdf4;
  box-shadow:
    0 18px 38px rgba(40, 52, 41, 0.16),
    0 0 0 7px rgba(79, 105, 84, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.13);
}

.landing .start-button:hover,
.landing .start-button:focus-visible {
  background: #395f61;
  box-shadow:
    0 24px 52px rgba(40, 52, 41, 0.2),
    0 0 0 9px rgba(57, 95, 97, 0.075),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.landing-traces {
  position: absolute;
  inset: 104px 76px 76px;
  z-index: 1;
  pointer-events: none;
}

.landing-trace {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(29, 27, 23, 0.46);
  font: 700 10px / 1.1 Arial, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.42;
  filter: blur(0.05px);
  transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.landing-trace em {
  color: inherit;
  font-style: normal;
  white-space: nowrap;
}

.trace-no {
  color: rgba(66, 109, 134, 0.58);
}

.trace-rule {
  display: inline-block;
  width: 56px;
  height: 1px;
  background: rgba(93, 116, 86, 0.28);
}

.trace-rule.short {
  width: 34px;
}

.trace-sentence {
  top: 22%;
  left: 22%;
  transform: rotate(-2deg);
}

.trace-canvas {
  top: 48%;
  left: 12%;
  transform: rotate(2deg);
}

.trace-review {
  top: 28%;
  right: 18%;
  transform: rotate(1.5deg);
}

.trace-clock {
  right: 12%;
  bottom: 33%;
  transform: rotate(-2deg);
}

.trace-journey {
  bottom: 23%;
  left: 23%;
  transform: rotate(-1deg);
}

.trace-pact {
  right: 24%;
  bottom: 18%;
  transform: rotate(1deg);
}

.trace-pixels {
  display: grid;
  grid-template-columns: repeat(5, 8px);
  gap: 3px;
}

.trace-pixels i {
  display: block;
  width: 8px;
  height: 8px;
  background: rgba(93, 116, 86, 0.54);
}

.trace-pixels i:nth-child(2),
.trace-pixels i:nth-child(5) {
  background: rgba(66, 109, 134, 0.52);
}

.trace-stars {
  color: rgba(93, 116, 86, 0.62);
  font: 16px / 1 Georgia, serif;
  letter-spacing: 0.09em;
}

.trace-ticks,
.trace-route {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.trace-ticks::before,
.trace-route::before {
  position: absolute;
  right: 3px;
  left: 3px;
  height: 1px;
  content: "";
  background: rgba(66, 109, 134, 0.24);
}

.trace-ticks i {
  position: relative;
  z-index: 1;
  display: block;
  width: 1px;
  height: 22px;
  background: rgba(93, 116, 86, 0.38);
}

.trace-route i {
  position: relative;
  z-index: 1;
  display: block;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(66, 109, 134, 0.44);
  border-radius: 50%;
  background: rgba(251, 249, 242, 0.76);
}

.trace-seal {
  padding: 6px 10px;
  border: 1px solid rgba(93, 116, 86, 0.24);
  color: rgba(93, 116, 86, 0.58);
  transform: rotate(-3deg);
}

.landing[data-trace-active] .landing-trace {
  opacity: 0.18;
}

.landing[data-trace-active="sentence"] .trace-sentence,
.landing[data-trace-active="canvas"] .trace-canvas,
.landing[data-trace-active="review"] .trace-review,
.landing[data-trace-active="clock"] .trace-clock,
.landing[data-trace-active="journey"] .trace-journey,
.landing[data-trace-active="pact"] .trace-pact {
  color: rgba(29, 27, 23, 0.78);
  opacity: 0.92;
  transform: translateY(-3px) rotate(0deg);
}

@media (max-width: 920px) {
  .landing-traces {
    inset: 112px 28px 82px;
  }

  .trace-canvas,
  .trace-clock {
    display: none;
  }

  .trace-sentence {
    left: 8%;
  }

  .trace-review {
    right: 8%;
  }

  .trace-journey {
    left: 12%;
  }
}

@media (max-width: 620px) {
  .landing-traces {
    display: none;
  }

  .landing-countdown {
    font-size: 34px;
  }
}

/* V014m - clean landing with a real 3D earth dot. */
.landing {
  background:
    linear-gradient(rgba(88, 70, 45, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 70, 45, 0.026) 1px, transparent 1px),
    #f8f6ef;
  background-size: 32px 32px, 32px 32px, auto;
}

.landing::before {
  opacity: 0.035;
}

.landing::after {
  border-color: rgba(58, 52, 43, 0.08);
}

.landing-traces {
  display: none;
}

.landing section {
  width: min(100%, 760px);
  padding: clamp(18px, 3vw, 34px);
  transform: translateY(clamp(8px, 1.4vh, 18px));
}

.landing section::before,
.landing section::after {
  display: none;
}

.landing h1 {
  align-items: baseline;
  gap: 0.045em;
  margin-bottom: clamp(22px, 3.2vh, 34px);
}

.landing-earth-dot {
  position: relative;
  display: inline-flex;
  width: 0.32em;
  height: 0.32em;
  margin-left: -0.015em;
  overflow: hidden;
  border: 1px solid rgba(94, 139, 86, 0.34);
  border-radius: 50%;
  background: #020403;
  box-shadow:
    0 0 0 0.035em rgba(255, 255, 255, 0.68),
    0 0 0.14em rgba(94, 139, 86, 0.22);
  transform: translateY(-0.035em);
}

.landing-earth-dot canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.landing-earth-dot::after {
  position: absolute;
  inset: 0;
  content: "";
  border-radius: inherit;
  background:
    radial-gradient(circle at 33% 24%, rgba(255, 255, 255, 0.24), transparent 23%),
    radial-gradient(circle at 68% 72%, rgba(0, 0, 0, 0.26), transparent 52%);
  pointer-events: none;
}

.landing-countdown {
  width: 8.6ch;
  margin: 0 auto clamp(21px, 3vh, 31px);
  color: rgba(58, 52, 43, 0.46);
  font-family: "Cascadia Mono", Consolas, "Lucida Console", monospace;
  font-size: clamp(36px, 3.45vw, 50px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.045em;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.landing-countdown span {
  margin-bottom: 12px;
  color: rgba(58, 52, 43, 0.38);
  font: 700 9px / 1 Arial, sans-serif;
  letter-spacing: 0.25em;
}

.landing-countdown strong {
  color: #50694f;
  font-weight: 400;
  text-shadow: none;
}

@media (max-width: 620px) {
  .landing-earth-dot {
    width: 0.34em;
    height: 0.34em;
  }

  .landing-countdown {
    font-size: 34px;
  }
}

/* V014n - realistic title earth, stable timer, black ritual CTA. */
.landing {
  background:
    linear-gradient(rgba(54, 52, 45, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 52, 45, 0.022) 1px, transparent 1px),
    #fbfaf5;
  background-size: 32px 32px, 32px 32px, auto;
}

.landing::before {
  opacity: 0.025;
}

.landing::after {
  border-color: rgba(30, 28, 23, 0.055);
}

.landing-header {
  top: 30px;
  left: 42px;
  right: 42px;
  align-items: flex-start;
}

.landing .header-brand {
  min-width: 230px;
  gap: 8px;
}

.landing .wordmark {
  color: var(--landing-ink);
  font: 400 26px / 1 Georgia, serif;
  letter-spacing: 0;
}

.landing .wordmark span {
  color: var(--landing-ink);
}

.landing section {
  width: min(100%, 760px);
  padding: clamp(16px, 2.7vw, 30px);
  transform: translateY(clamp(8px, 1.6vh, 20px));
}

.landing h1 {
  gap: 0.034em;
  margin-bottom: clamp(21px, 3vh, 32px);
}

.landing-earth-dot {
  width: 0.34em;
  height: 0.34em;
  margin-left: -0.018em;
  border-color: rgba(255, 255, 255, 0.78);
  background: #000;
  box-shadow:
    0 0 0 0.036em rgba(255, 255, 255, 0.76),
    0 0 0.11em rgba(0, 0, 0, 0.18),
    0 0 0.24em color-mix(in srgb, var(--landing-cycle-color, #78a06f) 24%, transparent);
}

.landing-earth-dot::after {
  background:
    radial-gradient(circle at 31% 22%, rgba(255, 255, 255, 0.28), transparent 24%),
    radial-gradient(circle at 70% 74%, rgba(0, 0, 0, 0.38), transparent 54%);
}

.landing-countdown {
  width: 8.55ch;
  margin: 0 auto clamp(20px, 2.8vh, 29px);
  color: rgba(52, 48, 40, 0.48);
  font-family: Cambria, "Times New Roman", Georgia, serif;
  font-size: clamp(31px, 3vw, 42px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.035em;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.landing-countdown span {
  margin-bottom: 10px;
  color: rgba(52, 48, 40, 0.36);
  font: 700 9px / 1 Arial, sans-serif;
  letter-spacing: 0.24em;
}

.landing-countdown strong {
  color: #536f54;
  font-weight: 400;
  text-shadow: none;
}

.landing .start-button {
  min-width: 254px;
  min-height: 58px;
  border-color: rgba(255, 255, 255, 0.08);
  background: #050705;
  color: var(--landing-cycle-color, #78a06f);
  text-shadow: 0 0 12px currentColor;
  box-shadow:
    0 18px 34px rgba(12, 15, 12, 0.18),
    0 0 0 7px rgba(5, 7, 5, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

.landing .start-button:hover,
.landing .start-button:focus-visible {
  background: #0a0d0a;
  color: var(--landing-cycle-color, #78a06f);
  box-shadow:
    0 22px 44px rgba(12, 15, 12, 0.23),
    0 0 0 9px rgba(5, 7, 5, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

@media (max-width: 620px) {
  .landing .wordmark {
    font-size: 22px;
  }

  .landing-countdown {
    font-size: 32px;
  }

  .landing .start-button {
    min-width: 226px;
  }
}

/* V014o - single-color synced planet, timer, and CTA cycle. */
.landing-countdown strong {
  color: var(--landing-cycle-color, #78a06f);
  transition: color 0.46s ease;
}

.landing .start-button {
  transition:
    color 0.46s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

/* V014p - quiet local submission animation, no confirmation copy. */
.ritual-room .room-content.ritual-module-pulse {
  animation: ritualModulePulse 0.95s ease both;
}

.ritual-room .room-content.ritual-module-pulse::after {
  position: absolute;
  left: 50%;
  bottom: clamp(86px, 10vh, 128px);
  z-index: 8;
  width: min(430px, 44vw);
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--module-accent), transparent);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scaleX(0.2);
  transform-origin: center;
  animation: ritualCommitLine 0.9s ease both;
}

.ritual-submit-flash {
  animation: ritualSubmitFlash 0.76s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.ritual-room .room-nav.module-given .nav-arrow.next,
.ritual-room .room-nav .nav-arrow.next.ready-next {
  min-width: 136px;
  min-height: 44px;
  justify-content: center;
  padding: 0 24px;
  border: 1px solid var(--module-accent-soft);
  border-radius: 999px;
  background: var(--module-accent);
  color: #080807;
  opacity: 1;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.16),
    0 0 0 7px var(--module-accent-faint);
  animation: ritualNextInvite 1.55s ease-in-out infinite;
}

.sentence-live-pending.word-accepted-pulse,
.sentence-bottom-input.just-submitted .voice-submit-btn,
.canvas-hand-card.hand-given-pulse,
.canvas-art-frame.hand-given-pulse,
.review-fieldnote-page.review-given-pulse,
.clock-webgl-scene.clock-given-pulse,
.journey-map-shell.journey-given-pulse,
.contract.pact-given-pulse {
  animation: ritualObjectPulse 0.92s ease both;
}

.sentence-bottom-input.voice-given .sentence-voice-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 192px;
  gap: 7px;
  border-color: rgba(212, 184, 120, 0.24);
  opacity: 0.82;
}

.sentence-bottom-input.voice-given {
  grid-template-columns: minmax(0, 1fr);
  width: min(680px, calc(100vw - 150px));
  transform: translateY(-72px);
}

.sentence-focus.has-pool .sentence-bottom-input.voice-given {
  transform: translateY(-72px);
}

.sentence-bottom-input.voice-given .word-input {
  color: rgba(246, 236, 212, 0.72);
}

.sentence-bottom-input.voice-given .voice-submit-btn.given,
.sentence-bottom-input.voice-given .voice-submit-btn:disabled {
  border-color: rgba(212, 184, 120, 0.34);
  background: rgba(212, 184, 120, 0.18);
  color: rgba(246, 236, 212, 0.64);
}

@media (max-width: 760px) {
  .sentence-bottom-input.voice-given {
    width: min(100%, calc(100vw - 32px));
    transform: translateY(-52px);
  }

  .sentence-bottom-input.voice-given .sentence-voice-row {
    grid-template-columns: 1fr;
  }

  .sentence-focus.has-pool .sentence-bottom-input.voice-given {
    transform: translateY(-52px);
  }
}

@keyframes ritualModulePulse {
  0%,
  100% {
    filter: none;
  }
  42% {
    filter: drop-shadow(0 0 18px var(--module-accent-faint));
  }
}

@keyframes ritualCommitLine {
  0% {
    opacity: 0;
    transform: translateX(-50%) scaleX(0.12);
  }
  35% {
    opacity: 0.72;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scaleX(1);
  }
}

@keyframes ritualSubmitFlash {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  32% {
    transform: translateY(1px) scale(0.985);
  }
  62% {
    transform: translateY(-2px) scale(1.025);
    box-shadow:
      0 18px 44px rgba(0, 0, 0, 0.2),
      0 0 34px var(--module-accent-faint);
  }
}

@keyframes ritualObjectPulse {
  0%,
  100% {
    filter: none;
    transform: translateZ(0) scale(1);
  }
  50% {
    filter: drop-shadow(0 0 22px var(--module-accent-faint));
    transform: translateZ(0) scale(1.012);
  }
}

@keyframes ritualNextInvite {
  0%,
  100% {
    box-shadow:
      0 14px 34px rgba(0, 0, 0, 0.16),
      0 0 0 7px var(--module-accent-faint);
  }
  50% {
    box-shadow:
      0 18px 42px rgba(0, 0, 0, 0.2),
      0 0 0 10px var(--module-accent-faint);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ritual-room .room-content.ritual-module-pulse,
  .ritual-room .room-content.ritual-module-pulse::after,
  .ritual-submit-flash,
  .sentence-live-pending.word-accepted-pulse,
  .sentence-bottom-input.just-submitted .voice-submit-btn,
  .canvas-hand-card.hand-given-pulse,
  .canvas-art-frame.hand-given-pulse,
  .review-fieldnote-page.review-given-pulse,
  .clock-webgl-scene.clock-given-pulse,
  .journey-map-shell.journey-given-pulse,
  .contract.pact-given-pulse,
  .ritual-room .room-nav.module-given .nav-arrow.next,
  .ritual-room .room-nav .nav-arrow.next.ready-next {
    animation: none;
  }
}